:root{
    --bg:#0b1020; --bg2:#0f1630; --surface:#141c38; --surface2:#1b2547;
    --border:#25314f; --text:#e8ecf7; --muted:#9aa6c4; --primary:#6d8bff;
    --primary2:#8aa2ff; --ok:#34d399; --danger:#f87171; --shadow:rgba(0,0,0,.35);
  }
  :root.theme-light{
    --bg:#f3f4f6; --bg2:#e5e7eb; --surface:#ffffff; --surface2:#f9fafb;
    --border:#d1d5db; --text:#111827; --muted:#6b7280; --primary:#4f46e5;
    --primary2:#6366f1; --ok:#059669; --danger:#dc2626; --shadow:rgba(0,0,0,.08);
  }
  :root.theme-cronos{
    --bg:#f3f4f6; --bg2:#e8ecf1; --surface:#f0f3f8; --surface2:#f0f3f8;
    --border:transparent; --text:#1e293b; --muted:#64748b; --primary:#2563eb;
    --primary2:#3b82f6; --ok:#059669; --danger:#dc2626; 
    /* --shadow é uma COR em todos os temas (é usada como "0 8px 20px var(--shadow)").
       Antes, no Cronos, era uma sombra inteira: toda regra que a usava como cor
       ficava inválida e o navegador simplesmente tirava a sombra. */
    --shadow:rgba(30,50,100,.14);
    /* Relevo do Cronos (neumorfismo), mais leve que o original de 15px/30px. */
    --neu:7px 7px 16px #d1d5df, -7px -7px 16px #ffffff;
    --neu-hover:10px 10px 22px #cdd2dc, -10px -10px 22px #ffffff;
    /* Janela e menu flutuam sobre o fundo escurecido: lá o brilho branco do
       relevo virava uma mancha. Usam uma sombra comum e suave. */
    --flutua:0 24px 60px rgba(30,50,100,.20), 0 2px 10px rgba(30,50,100,.08);
  }
  :root.theme-sepia{
    --bg:#f4ecd8; --bg2:#e8ddc0; --surface:#fdf6e3; --surface2:#f4ecd8;
    --border:#d5c4a1; --text:#4c412f; --muted:#796a50; --primary:#d35400;
    --primary2:#e67e22; --ok:#27ae60; --danger:#c0392b; --shadow:rgba(100,80,50,.1);
  }
  :root.theme-hc{
    --bg:#000000; --bg2:#111111; --surface:#000000; --surface2:#111111;
    --border:#ffff00; --text:#ffffff; --muted:#cccccc; --primary:#ffff00;
    --primary2:#ffcc00; --ok:#00ff00; --danger:#ff0000; --shadow:rgba(255,255,0,.3);
  }
  *{box-sizing:border-box}
  html,body{margin:0;height:100%}
  body{
    font-family:-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
    background:radial-gradient(1200px 700px at 80% -10%, #1a2450 0%, var(--bg) 55%) fixed;
    color:var(--text); -webkit-font-smoothing:antialiased;
  }
  html[data-font="dyslexic"] body, html[data-font="dyslexic"] * {
    font-family: "OpenDyslexic", "Comic Sans MS", sans-serif !important;
  }
  .theme-light body {
    background:radial-gradient(1200px 700px at 80% -10%, #e0e7ff 0%, var(--bg) 55%) fixed;
  }
  .theme-cronos body {
    background: var(--bg);
  }
  a{color:inherit;text-decoration:none}
  .hidden{display:none !important}

  header{
    display:flex;align-items:center;justify-content:space-between;
    padding:14px 20px;border-bottom:1px solid var(--border);
    background:rgba(10,14,30,.6);backdrop-filter:blur(8px);position:sticky;top:0;z-index:5
  }
  .theme-light header{background:rgba(255,255,255,.7)}
  .theme-cronos header{background:rgba(240,243,248,.8)}
  .brand{display:flex;align-items:center;gap:12px;font-weight:800;letter-spacing:.02em;color:var(--text)}
  .brand img{width:34px;height:34px;border-radius:8px;object-fit:cover;background:#0008}
  .theme-light .brand img{background:#0001}
  .theme-cronos .brand img{background:transparent}
  .theme-sepia .brand img{background:#b8a07010}
  .brand span b{color:var(--primary2)}
  .theme-light .brand span b, .theme-cronos .brand span b{color:var(--primary)}
  .theme-sepia .brand span b{color:var(--primary)}
  .theme-sepia .brand span{color:#fff}
  .theme-sepia .brand small{color:#fff}
  .theme-hc .brand span b{color:var(--primary)}
  .brand small{display:block;font-weight:600;color:var(--muted);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
  .userbox{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--muted)}
  .btn{
    border:1px solid var(--border);background:var(--surface);color:var(--text);
    padding:9px 16px;border-radius:10px;cursor:pointer;font-size:14px;font-weight:600;transition:.15s
  }
  .btn:hover{border-color:var(--primary);transform:translateY(-1px)}
  .btn-p{background:linear-gradient(180deg,var(--primary),#5a79f0);border-color:transparent;color:#fff}
  .btn-ghost{background:transparent}

  .login-wrap{min-height:calc(100vh - 66px);display:flex;align-items:center;justify-content:center;padding:24px}
  .card{
    width:100%;max-width:400px;background:var(--surface);border:1px solid var(--border);
    border-radius:20px;padding:34px 30px;box-shadow:0 24px 60px var(--shadow)
  }
  .card h1{margin:0 0 4px;font-size:22px}
  .card p.sub{margin:0 0 24px;color:var(--muted);font-size:14px}
  .fld{margin-bottom:16px}
  .fld label{display:block;font-size:12px;color:var(--muted);margin-bottom:7px;font-weight:600;letter-spacing:.03em}
  .fld input:not([type="checkbox"]),.fld select{
    width:100%;padding:13px 14px;border-radius:12px;border:1px solid var(--border);
    background:var(--bg2);color:var(--text);font-size:15px;outline:none;transition:.15s;appearance:none;-webkit-appearance:none
  }
  .fld select{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239aa6c4' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");background-repeat:no-repeat;background-position:right 14px center;padding-right:38px;cursor:pointer}
  .fld input:focus,.fld select:focus{border-color:var(--primary);box-shadow:0 0 0 3px #6d8bff33}
  .fld select option{background:var(--surface);color:var(--text)}
  .row-remember{display:flex;align-items:center;gap:8px;margin:6px 0 20px;color:var(--muted);font-size:13px}
  .btn-block{width:100%;padding:14px;font-size:15px}
  .err{color:var(--danger);font-size:13px;min-height:18px;margin-top:12px;text-align:center}
  /* Recado do porquê de a pessoa estar nesta tela (veio de um módulo, saiu,
     a sessão venceu). Sem isso, ser jogado no login parece defeito. */
  .aviso-login{display:none;align-items:center;gap:9px;margin:0 0 18px;padding:11px 13px;
    border-radius:12px;font-size:13px;line-height:1.5;
    background:rgba(109,139,255,.10);border:1px solid rgba(109,139,255,.32);color:var(--text)}
  .aviso-login.on{display:flex}
  .aviso-login svg{flex:0 0 auto;width:17px;height:17px;fill:none;stroke:var(--primary);
    stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  /* Olho de mostrar a senha, dentro do campo. */
  .fld-senha{position:relative}
  .fld-senha input{padding-right:46px!important}
  .olho{position:absolute;right:6px;bottom:5px;width:34px;height:34px;display:flex;
    align-items:center;justify-content:center;background:none;border:none;cursor:pointer;
    color:var(--muted);border-radius:9px}
  .olho:hover{color:var(--text);background:var(--surface2)}
  .olho svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;
    stroke-linecap:round;stroke-linejoin:round}
  .caps{display:none;margin-top:7px;font-size:12px;color:#f5b74e}
  .caps.on{display:block}
  .spin{display:inline-block;width:15px;height:15px;border:2px solid #fff5;border-top-color:#fff;border-radius:50%;animation:sp .7s linear infinite;vertical-align:-2px;margin-right:6px}
  @keyframes sp{to{transform:rotate(360deg)}}

  .hub{max-width:1100px;margin:0 auto;padding:34px 20px 60px}
  .hub h2{margin:0 0 4px;font-size:24px}
  .hub .hi{color:var(--muted);margin:0 0 26px;font-size:15px}
  .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:18px}
  .tile{
    position:relative;display:flex;flex-direction:column;gap:12px;
    background:linear-gradient(180deg,var(--surface2),var(--surface));
    border:1px solid var(--border);border-radius:18px;padding:22px;min-height:150px;
    cursor:pointer;transition:.18s;overflow:hidden
  }
  .tile:hover{transform:translateY(-3px);border-color:var(--primary);box-shadow:0 16px 40px var(--shadow)}
  .tile::after {
    content: ""; position: absolute; inset: 0;
    border-radius: inherit; border: 2px solid transparent;
    pointer-events: none; transition: 0.18s;
    -webkit-mask-image: radial-gradient(200px 150px at bottom left, black 20%, transparent 75%);
    mask-image: radial-gradient(200px 150px at bottom left, black 20%, transparent 75%);
  }
  .tile:hover:not(.soon)::after {
    border-bottom-color: var(--primary); border-left-color: var(--primary);
  }
  .tile .ic{font-size:34px;line-height:1}
  .tile .tt{font-weight:700;font-size:16px}
  /* Número do cartão, na ordem em que aparece na tela */
  .tile .tile-n{display:inline-block;min-width:26px;margin-right:8px;padding:2px 6px;border-radius:7px;font-size:11.5px;font-weight:800;
    text-align:center;vertical-align:2px;color:var(--primary);background:color-mix(in srgb,var(--primary) 12%,transparent);font-variant-numeric:tabular-nums}
  .tile .td{color:var(--muted);font-size:13px;line-height:1.4}
  .tile.soon{cursor:default;opacity:.62}
  .tile.soon:hover{transform:none;border-color:var(--border);box-shadow:none}
  .badge{position:absolute;top:14px;right:14px;font-size:10px;font-weight:700;letter-spacing:.05em;
    padding:4px 8px;border-radius:20px;text-transform:uppercase}
  .badge.on{background:#34d39922;color:var(--ok);border:1px solid #34d39955}
  .badge.br{background:#9aa6c422;color:var(--muted);border:1px solid var(--border)}

  /* ---- Busca + Ordenação do hub ---- */
  .hub-top{margin:0 0 20px}
  .hub-search-wrap{
    position:relative;display:flex;align-items:center;
    background:var(--surface);border:1.5px solid var(--border);border-radius:10px;
    padding:0 10px;gap:6px;margin-bottom:12px;
    transition:border-color .15s;
  }
  .hub-search-wrap:focus-within{border-color:var(--primary)}
  .hub-search-ic{flex-shrink:0;color:var(--muted)}
  .hub-search-wrap input[type=search]{
    flex:1;border:none;background:transparent;outline:none;
    padding:9px 0;font-size:14px;color:var(--text);min-width:0;
  }
  .hub-search-wrap input[type=search]::placeholder{color:var(--muted)}
  /* esconde o botão nativo de limpar do Chrome */
  .hub-search-wrap input[type=search]::-webkit-search-cancel-button{display:none}
  #hubSearchClear{
    background:none;border:none;cursor:pointer;color:var(--muted);
    font-size:13px;padding:4px;line-height:1;border-radius:4px;flex-shrink:0;
  }
  #hubSearchClear:hover{color:var(--text)}
  .hub-ord{display:flex;gap:6px;margin:0 0 16px;flex-wrap:wrap}
  .ord-b{border:1px solid var(--border);background:var(--surface);color:var(--muted);
    padding:7px 14px;border-radius:20px;cursor:pointer;font-size:13px;font-weight:600}
  .ord-b:hover{border-color:var(--primary)}
  .ord-b.on{background:var(--primary);border-color:transparent;color:#fff}
  .ord-b .n{margin-left:6px;font-weight:700;opacity:.7;font-variant-numeric:tabular-nums}
  /* Ordens + botão de seleção na mesma linha: a margem é da linha, não do grupo,
     senão o botão ficava centralizado mais embaixo que as pílulas. */
  .ord-linha{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:0 0 16px}
  .ord-linha .hub-ord{margin:0}
  .ord-b.on .n{opacity:.9}
  /* Botão de favorito no cartão — canto inferior direito, não sobrepõe o badge */
  .tile-fav{
    position:absolute;bottom:10px;right:12px;
    background:none;border:none;cursor:pointer;
    font-size:16px;line-height:1;padding:2px;border-radius:4px;
    color:var(--muted);opacity:0;transition:opacity .15s,transform .15s;
  }
  .tile:hover .tile-fav{opacity:.5}
  .tile-fav.fav{opacity:1;color:#f59e0b}
  .tile-fav:hover{opacity:1 !important;transform:scale(1.2)}
  /* Mensagem sem resultado */
  .hub-empty{color:var(--muted);font-size:14px;padding:24px 0;grid-column:1/-1}
  /* Seleção múltipla */
  /* No modo seleção o selo "Ativo" dá lugar a um círculo: vazio = não
     marcado, azul com ✓ = marcado. O favorito some para não ser clicado sem querer. */
  body.modo-selecao .tile:not(.soon){cursor:pointer}
  body.modo-selecao .tile:not(.soon) .badge,
  body.modo-selecao .tile .tile-fav{display:none}
  body.modo-selecao .tile:not(.soon)::before{content:'';position:absolute;top:13px;right:14px;z-index:1;
    width:24px;height:24px;border-radius:50%;border:2px solid var(--border);background:var(--surface);
    display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;color:#fff;transition:.15s}
  .theme-cronos body.modo-selecao .tile:not(.soon)::before{border-color:#c5ccd8}
  body.modo-selecao .tile:not(.soon):hover::before{border-color:var(--primary)}
  .tile.selecionado{border-color:var(--primary)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 30%,transparent)!important}
  body.modo-selecao .tile.selecionado::before{content:'✓';background:var(--primary);border-color:var(--primary)}
  .theme-hc body.modo-selecao .tile.selecionado::before{color:#000}
  #selBar{
    position:fixed;bottom:24px;left:50%;transform:translateX(-50%);
    background:var(--surface2);border:1.5px solid var(--primary);
    border-radius:14px;padding:10px 12px 10px 18px;width:max-content;max-width:calc(100vw - 24px);
    display:flex;flex-direction:column;gap:8px;
    box-shadow:0 8px 32px var(--shadow);z-index:200;
    animation:selBarIn .18s ease;
  }
  #selBar .sel-linha{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
  #selBar .sel-bts{display:flex;gap:6px;flex-wrap:wrap}
  #selAviso{max-width:560px;font-size:12.5px;line-height:1.45;color:var(--text);padding:8px 10px;border-radius:9px;
    background:#d9770614;border:1px solid #d9770655}
  @media(max-width:600px){ #selBar{bottom:12px;padding:10px 12px} #selBar .sel-linha{justify-content:center} }
  @keyframes selBarIn{from{opacity:0;transform:translateX(-50%) translateY(12px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
  #selBar[hidden]{display:none !important}
  #selCount{font-size:14px;font-weight:600;color:var(--text)}
  #selBar button{background:var(--surface);color:var(--muted);border:1px solid var(--border);border-radius:8px;cursor:pointer;font-size:13px;font-weight:600;padding:7px 14px;transition:.15s}
  #selBar button:hover:not(:disabled){border-color:var(--primary);color:var(--text)}
  #selBar button:disabled{opacity:.4;cursor:default}
  #selBtnAbrir{background:var(--primary)!important;color:#fff!important;border-color:transparent!important}
  #selBtnAbrir:hover:not(:disabled){opacity:.88}
  /* Título de seção (Favoritos / Todos os módulos / Em breve). Precisa de
     espaço embaixo e ficar por cima: com 2px, a sombra dos cartões passava
     por cima do texto e ele parecia apagado, fora do lugar. */
  .hub-sec{position:relative;z-index:1;display:flex;align-items:center;gap:8px;margin:36px 0 16px;
    font-size:15px;color:var(--text);font-weight:700}
  .hub-sec.hub-sec-1{margin-top:6px}
  .hub-sec .n{font-size:12px;font-weight:700;color:var(--muted);background:var(--surface);border:1px solid var(--border);
    border-radius:20px;padding:1px 9px}
  .hub-sec[hidden]{display:none}
  .hub-sec + .hub-sec-d{margin-top:-10px}
  .hub-sec-d{margin:0 0 16px;font-size:13px;color:var(--muted);opacity:.75}
  /* Acessos (ordem "Mais usados"): rodapé do cartão, abaixo da descrição.
     Antes ficava solto no canto e caía por cima de descrição de duas linhas. */
  .tile .uso{margin-top:auto;padding:10px 26px 0 0;border-top:1px solid var(--border);
    display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
  .tile .uso b{color:var(--text);font-weight:700}
  .theme-cronos .tile .uso{border-top-color:#dde2ea}

  /* ---- Janela flutuante "quem está online" ---- */
  .online-box{position:fixed;right:20px;bottom:20px;z-index:70;font-size:14px}
  /* Voltar ao topo (portal): no canto; sobe quando o balão "online" aparece */
  .topo-btn{position:fixed;right:20px;bottom:20px;z-index:65;width:46px;height:46px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;cursor:pointer;color:#fff;background:var(--primary);
    border:none;box-shadow:0 8px 24px var(--shadow);opacity:0;transform:translateY(12px);pointer-events:none;transition:.2s}
  .topo-btn.on{opacity:1;transform:none;pointer-events:auto}
  .topo-btn:hover{filter:brightness(1.1);transform:translateY(-2px)}
  .online-box:not(.hidden) ~ .topo-btn{bottom:76px}
  .theme-hc .topo-btn{color:#000}
  .online-bolha{display:flex;align-items:center;gap:8px;background:var(--surface);
    border:1px solid var(--border);color:var(--text);border-radius:30px;padding:10px 16px;
    cursor:pointer;box-shadow:0 10px 30px var(--shadow);font-size:13px;font-weight:600}
  .online-bolha:hover{border-color:var(--primary)}
  .online-bolha .ponto{width:9px;height:9px;border-radius:50%;background:var(--ok);
    box-shadow:0 0 0 0 #34d39999;animation:pulsa 2s infinite}
  @keyframes pulsa{70%{box-shadow:0 0 0 9px #34d39900}100%{box-shadow:0 0 0 0 #34d39900}}
  .online-painel{position:absolute;right:0;bottom:52px;width:320px;max-height:70vh;overflow:auto;
    background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:16px;
    box-shadow:0 24px 60px var(--shadow)}
  .online-cab{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
  .online-x{background:none;border:none;color:var(--muted);font-size:20px;cursor:pointer;line-height:1}
  .online-x:hover{color:var(--danger)}
  .online-resumo{color:var(--muted);font-size:12px;margin-bottom:12px}
  .online-mod{display:flex;align-items:center;gap:8px;padding:7px 0;font-size:13px}
  .online-mod .nome{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .online-mod .barra{height:6px;background:var(--bg2);border-radius:4px;width:70px;overflow:hidden}
  .online-mod .barra i{display:block;height:100%;background:var(--primary)}
  .online-mod .qtd{font-weight:700;min-width:18px;text-align:right}
  .online-sep{margin:14px 0 6px;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
  .online-pessoas{display:flex;flex-direction:column;gap:6px}
  .online-p{display:flex;align-items:center;gap:8px;font-size:13px}
  .online-p .av{width:26px;height:26px;border-radius:50%;background:var(--primary);color:#fff;
    display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex:0 0 auto}
  .online-p .av.conv{background:var(--muted)}
  .online-p .quem{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .online-p .onde{color:var(--muted);font-size:11px}
  .online-p .login{color:var(--muted);font-size:11.5px;overflow:hidden;text-overflow:ellipsis}
  .online-rodape{margin-top:12px;color:var(--muted);font-size:11px;text-align:center}
  @media(max-width:520px){
    .online-painel{width:calc(100vw - 40px)}
    /* CELULAR: a bolha e' fixa e tapava o ultimo cartao de sistema. Fica
       compacta (so o ponto e o numero) e o hub ganha folga no fim para a
       rolagem passar por baixo dela. */
    .online-bolha{padding:9px 12px;font-size:12px}
    .online-bolha .rotulo{display:none}
    .online-box{right:12px;bottom:12px}
    .topo-btn{right:12px;bottom:12px;width:42px;height:42px}
    .online-box:not(.hidden) ~ .topo-btn{bottom:62px}
    .hub{padding-bottom:96px}
  }

  .toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);
    background:var(--surface2);border:1px solid var(--border);color:var(--text);
    padding:12px 18px;border-radius:12px;font-size:14px;box-shadow:0 10px 30px var(--shadow);
    opacity:0;pointer-events:none;transition:.25s;z-index:50}
  .toast.show{opacity:1;transform:translateX(-50%) translateY(-4px)}

  /* Admin */
  .tbl-wrap{overflow:auto;border:1px solid var(--border);border-radius:14px;margin-top:10px}
  table.utbl{width:100%;border-collapse:collapse;font-size:14px;min-width:640px}
  table.utbl th,table.utbl td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--border);white-space:nowrap}
  table.utbl th{background:var(--bg2);color:var(--muted);font-size:12px;text-transform:uppercase}
  table.utbl tr:hover td{background:var(--surface)}
  .upill{font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px}
  .upill.on{background:#34d39922;color:var(--ok);border:1px solid #34d39955}
  .upill.off{background:#f8717122;color:var(--danger);border:1px solid #f8717155}
  .upill.role{background:#6d8bff22;color:var(--primary2);border:1px solid #6d8bff55}
  .upill.wait{background:#f59e0b22;color:#d97706;border:1px solid #f59e0b66}
  .uedit.liberar{color:var(--ok);border-color:#34d39966}
  .aviso-pendentes{display:inline-block;margin-left:8px;padding:2px 10px;border-radius:20px;font-size:12.5px;
    background:#f59e0b22;color:#d97706;border:1px solid #f59e0b66}
  .uedit{border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:8px;padding:6px 12px;cursor:pointer;font-size:13px;font-weight:600}
  .uedit:hover{border-color:var(--primary)}
  .ov{position:fixed;inset:0;background:#000a;backdrop-filter:blur(3px);display:none;align-items:flex-start;justify-content:center;padding:24px;overflow:auto;z-index:60}
  .ov.open{display:flex}
  .modu{width:100%;max-width:960px;background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:24px;box-shadow:0 30px 80px #000;margin:auto}
  .theme-light .modu{box-shadow:0 30px 80px rgba(0,0,0,0.15)}
  .fg2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .apps-perm{display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));gap:10px;margin-top:4px}
  .apps-perm label{display:flex;align-items:center;gap:8px;font-size:13px;line-height:1.2;background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:10px 12px;cursor:pointer;transition:.15s;font-weight:500;min-width:0}
  .apps-perm label:hover{border-color:var(--primary);background:var(--surface)}
  .apps-perm input{width:17px;height:17px;margin:0;accent-color:var(--primary);cursor:pointer;flex-shrink:0}
  .apps-perm label span:last-child{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  @media(max-width:900px){ .apps-perm{grid-template-columns:1fr 1fr} }
  @media(max-width:560px){ .fg2,.apps-perm{grid-template-columns:1fr} }
  .tabs{display:flex;gap:8px;border-bottom:1px solid var(--border);margin-bottom:16px;padding-bottom:8px}
  .tab-btn{display:flex;align-items:center;gap:6px;background:transparent;border:none;color:var(--muted);padding:8px 16px;font-size:14px;font-weight:600;cursor:pointer;border-radius:8px;transition:0.2s}
  .tab-btn:hover{background:var(--surface);color:var(--text)}
  .tab-btn.active{background:var(--surface2);color:var(--primary2);border:1px solid var(--border)}
  .theme-light .tab-btn.active{color:var(--primary)}
  footer{color:var(--muted);text-align:center;font-size:12px;padding:20px}
  @media(max-width:600px){
    .hub{padding:24px 16px 50px}
    .grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
    .tile{min-height:130px;padding:18px}
  }

  /* --- Neumorphism (Cronos) Overrides --- */
  .theme-cronos body { background: var(--bg); }
  .theme-cronos .card, 
  .theme-cronos .tile, 
  .theme-cronos .pu-menu, 
  .theme-cronos .modu {
    background: var(--surface);
    border: none;
    box-shadow: var(--neu);
  }
  .theme-cronos .pu-menu,
  .theme-cronos .modu {
    box-shadow: var(--flutua);
  }
  .theme-cronos header {
    background: rgba(240, 243, 248, 0.85);
    border-bottom: none;
    box-shadow: 0 4px 16px rgba(30,50,100,.08);
  }
  .theme-cronos .btn, 
  .theme-cronos .tile {
    border-radius: 20px;
    border: 2px solid transparent;
  }
  .theme-cronos .tile:hover:not(.soon) {
    background: var(--surface);
    box-shadow: var(--neu-hover);
    transform: translateY(-3px);
  }

  .theme-cronos .fld input:not([type="checkbox"]), 
  .theme-cronos .fld select {
    background: #e8ecf1;
    border: none;
    box-shadow: inset 4px 4px 10px #d1d5df, inset -4px -4px 10px #ffffff;
  }
  .theme-cronos .fld input:focus, 
  .theme-cronos .fld select:focus {
    box-shadow: inset 4px 4px 10px #d1d5df, inset -4px -4px 10px #ffffff, 0 0 0 2px var(--primary);
  }
  .theme-cronos .btn-p {
    background: var(--primary);
    box-shadow: 4px 4px 10px #d1d5df, -4px -4px 10px #ffffff;
  }

  /* Customização visual do botão do painel de usuário para combinar com o layout (pill transparente) */
  #painelUsuario .pu-btn, #userbox .pu-btn {
    background: transparent !important;
    border: 1px solid var(--primary) !important;
    color: var(--text) !important;
    border-radius: 99px !important;
    padding: 6px 14px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    box-shadow: none !important;
  }
  #painelUsuario .pu-btn:hover, #userbox .pu-btn:hover {
    background: rgba(100, 100, 255, 0.08) !important;
  }

  /* ══════════ Efeitos e animações do portal ══════════
     Valem só para os cartões do portal (.tile.app), não para a loja e outros
     módulos que também usam .tile. */

  /* Topo surge suavemente; o 👋 acena uma vez */
  @keyframes portalSobe{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  #hubView > h2, #hubView > .hi, #hubView > .hub-top{animation:portalSobe .5s cubic-bezier(.2,.8,.2,1) backwards}
  #hubView > .hi{animation-delay:.06s}
  #hubView > .hub-top{animation-delay:.12s}
  @keyframes acena{0%,60%,100%{transform:rotate(0)}10%,30%{transform:rotate(16deg)}20%,40%{transform:rotate(-8deg)}}
  .aceno{display:inline-block;transform-origin:70% 80%}
  .aceno.abertura{animation:acena 1.8s ease-in-out .4s 1}   /* só ao abrir; o JS tira a classe depois */
  /* Com o mouse em cima da MÃO (só dela — o título ocupa a largura toda da
     página), ela acena sem parar. Nome de animação diferente, senão o
     navegador não recomeça a que já terminou. */
  @keyframes acenaDeNovo{0%,100%{transform:rotate(0)}25%{transform:rotate(18deg)}75%{transform:rotate(-10deg)}}
  #hubHi .aceno{cursor:default}
  #hubHi .aceno:hover{animation:acenaDeNovo .6s ease-in-out infinite}

  /* Cartões entram em cascata */
  @keyframes cartaoEntra{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
  .grid.entrando > .tile{animation:cartaoEntra .5s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:calc(var(--i,0) * 35ms)}

  /* Ícone num quadradinho da cor do tema, que se enche no hover */
  .tile.app .ic{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;
    color:var(--primary);background:color-mix(in srgb,var(--primary) 11%,transparent);
    transition:transform .3s cubic-bezier(.34,1.56,.64,1),background .2s,color .2s}
  .tile.app .ic svg{width:20px;height:20px}
  .tile.app:not(.soon):hover .ic{transform:scale(1.08) rotate(-5deg);background:var(--primary);color:#fff}
  .theme-hc .tile.app:not(.soon):hover .ic{color:#000}
  .tile.app.soon .ic{color:var(--muted);background:color-mix(in srgb,var(--muted) 12%,transparent)}

  /* Hover: o fundo do cartão ganha um toque leve da cor do tema */
  .tile.app{transition:transform .18s,box-shadow .18s,border-color .18s,background .25s}
  .tile.app:not(.soon):hover{background:color-mix(in srgb,var(--primary) 5%,var(--surface))}
  .theme-hc .tile.app:not(.soon):hover{background:var(--surface)}

  /* Pílulas e botões respondem ao clique */
  .ord-b{transition:background .2s,color .2s,border-color .2s,transform .12s}
  .ord-b:active, .btn:active, .topo-btn:active{transform:scale(.96)}

  /* Não seguem o "reduzir movimento" do sistema: o John desliga os efeitos de
     animação do Windows e quer o portal animado. São efeitos curtos e leves. */