@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=Sora:wght@300;400;600;700&display=swap');

/* =============================================
   Design tokens — fonte única (index.html e pressel.html não podem
   declarar :root; ver test-ui-shell.js S9).
   ============================================= */
:root{
  --bg:#0a0a0f;--bg2:#12121a;--card:#16161f;--card2:#1a1a25;--border:#2a2a3a;--border2:#4a4a6a;
  --t1:#e8e8f0;--t2:#a0a0bc;--t3:#7a7a96;
  --acc:#00d4aa;--acc-d:#00d4aa22;--acc-g:#00d4aa44;--danger:#ff4466;--warn:#ffaa00;--ok:#00d4aa;

  --r-sm:6px;--r-md:8px;--r-lg:10px;--r-xl:12px;--r-2xl:16px;
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-8:32px;--sp-12:48px;
  --shadow-acc:0 0 24px var(--acc-g);
  --tr-fast:.15s;--tr:.2s;--tr-slow:.3s;
  --font-sans:'Sora',sans-serif;--font-mono:'JetBrains Mono',monospace;
}

/* =============================================
   Reset + body
   ============================================= */
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Sora',sans-serif;background:var(--bg);color:var(--t1);min-height:100vh}

/* =============================================
   Componentes comuns (extraídos de index.html / pressel.html)
   ============================================= */
.noise{position:fixed;inset:0;opacity:.03;pointer-events:none;z-index:9999;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.container{max-width:800px;margin:0 auto;padding:40px 24px;width:100%}
.section-title{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--t3);margin-bottom:16px}
.brand{font-family:'JetBrains Mono',monospace;font-size:14px;font-weight:500;letter-spacing:4px;text-transform:uppercase;color:var(--acc);margin-bottom:12px}
.footer{text-align:center;margin-top:48px;padding-top:24px;border-top:1px solid var(--border);font-size:12px;color:var(--t3)}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;background:var(--bg2);border:1px solid var(--border);border-radius:12px;margin-bottom:32px;font-size:13px;flex-wrap:wrap;gap:10px}
.avatar{width:32px;height:32px;border-radius:8px;background:var(--acc-d);border:1px solid var(--acc);display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-weight:700;font-size:13px;color:var(--acc);text-transform:uppercase}
.uinfo{display:flex;align-items:center;gap:10px}
.uname{font-weight:600}
.urole{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--t3);letter-spacing:1px;text-transform:uppercase}

/* Botões */
.btn-main{width:100%;padding:14px;border:none;border-radius:10px;background:var(--acc);color:var(--bg);font-family:'Sora',sans-serif;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s;margin-top:4px}
.btn-main:hover{box-shadow:0 0 24px var(--acc-g);transform:translateY(-1px)}
.btn-main:disabled{background:var(--card);color:var(--t3);cursor:not-allowed;box-shadow:none;transform:none;border:1px solid var(--border)}
.btn-secondary{width:auto;flex:1;min-width:200px;padding:14px;border:1px solid var(--border);border-radius:10px;background:none;color:var(--t2);font-family:'Sora',sans-serif;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s}
.btn-secondary:hover{border-color:var(--acc);color:var(--acc)}
.btn-outline{background:none;border:1px solid var(--acc);color:var(--acc)}
.btn-outline:hover{background:var(--acc-d);box-shadow:none}
.btn-outline:disabled{border-color:var(--border);color:var(--t3);background:none}
.bbtn{background:none;border:1px solid var(--border);color:var(--t2);padding:6px 14px;border-radius:6px;cursor:pointer;font-size:12px;font-family:'Sora',sans-serif;transition:all .2s}
.bbtn:hover{border-color:var(--acc);color:var(--acc)}
.bbtn.dng:hover{border-color:var(--danger);color:var(--danger)}
.sbtn{padding:4px 10px;border:1px solid var(--border);background:none;color:var(--t2);border-radius:4px;cursor:pointer;font-size:11px;font-family:'Sora',sans-serif;transition:all .2s;margin-right:4px}
.sbtn:hover{border-color:var(--acc);color:var(--acc)}
.sbtn.dng:hover{border-color:var(--danger);color:var(--danger)}
.dl-btn{display:inline-block;padding:12px 32px;background:var(--acc);color:var(--bg);text-decoration:none;border-radius:8px;font-weight:600;font-size:14px;transition:all .2s;border:none;cursor:pointer;font-family:'Sora',sans-serif}
.dl-btn:hover{box-shadow:0 0 20px var(--acc-g)}
.process-btn{width:100%;padding:16px;border:none;border-radius:12px;font-family:'Sora',sans-serif;font-size:15px;font-weight:600;cursor:pointer;transition:all .3s;margin-bottom:16px}
.process-btn.ready{background:var(--acc);color:var(--bg)}
.process-btn.ready:hover{box-shadow:0 0 30px var(--acc-g);transform:translateY(-1px)}
.process-btn.disabled{background:var(--card);color:var(--t3);cursor:not-allowed;border:1px solid var(--border)}
.process-btn.processing{background:var(--card);color:var(--t1);cursor:wait;border:1px solid var(--border)}
.btn-change-layout{background:none;border:1px solid var(--border2);color:var(--t2);border-radius:8px;padding:8px 12px;font-family:'Sora',sans-serif;font-size:12px;cursor:pointer;transition:all .2s}
.btn-change-layout:hover{border-color:var(--acc);color:var(--acc)}

/* Formulário */
.fg{margin-bottom:20px}
.fg label{display:block;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--t3);margin-bottom:8px}
.fi{width:100%;padding:12px 16px;background:var(--card);border:1px solid var(--border);border-radius:10px;color:var(--t1);font-family:'Sora',sans-serif;font-size:14px;outline:none;transition:all .2s;resize:vertical}
.fi:focus{border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-d)}
.fi::placeholder{color:var(--t3)}
.fi.mono{font-family:'JetBrains Mono',monospace;font-size:12px}
.pw{position:relative}
.pw-toggle{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--t3);cursor:pointer;font-size:13px}
.create-form{display:flex;gap:8px;flex-wrap:wrap;align-items:end;padding:12px;background:var(--card);border-radius:8px;margin-bottom:16px}
.create-form .fg{margin-bottom:0;flex:1;min-width:140px}
.create-form .fi{padding:8px 12px;font-size:13px}
.create-form .btn-main{width:auto;padding:8px 20px;margin-top:0;flex-shrink:0}
.hint{font-size:11px;color:var(--t3);margin-top:6px}
.status-line{font-size:11px;color:var(--acc);margin-top:6px;min-height:14px}

/* Seletor de arquivo — <input type=file> nativo escondido (mas focável),
   estilizado por um <label for> que aparece no lugar. Sem click() sintético:
   o navegador abre o seletor porque o <label for> aponta pro id do input. */
.file-input{position:absolute;width:1px;height:1px;padding:0;margin:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.fg .file-field{display:flex;align-items:center;gap:var(--sp-3);width:100%;padding:10px 12px;background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);cursor:pointer;font-family:var(--font-sans);font-size:13px;letter-spacing:normal;text-transform:none;color:var(--t2);margin-bottom:0;transition:all var(--tr)}
.fg .file-field:hover{border-color:var(--acc)}
.file-field-btn{flex:0 0 auto;padding:6px 14px;border-radius:var(--r-md);background:var(--acc-d);border:1px solid var(--acc);color:var(--acc);font-weight:600;font-size:12px;white-space:nowrap}
.file-field-name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--t3)}
.file-input:focus-visible+.file-field{outline:2px solid var(--acc);outline-offset:2px}

/* Feedback */
.msg{text-align:center;font-size:13px;margin-top:16px;min-height:20px}
.msg.err{color:var(--danger)}
.msg.ok{color:var(--ok)}
.err{background:#ff446615;border:1px solid var(--danger);color:var(--danger);padding:12px 16px;border-radius:10px;font-size:13px;margin-bottom:20px;display:none}
.err.show{display:block}
.warn{background:#ffaa0015;border:1px solid var(--warn);color:var(--warn);padding:12px 16px;border-radius:10px;font-size:13px;margin-bottom:20px;display:none}
.warn.show{display:block}
.af-disclaimer{background:#ffaa0010;border:1px solid #ffaa0033;border-radius:10px;padding:12px 14px;margin-bottom:16px;font-size:12px;color:var(--warn);line-height:1.5}
.af-disclaimer strong{color:var(--warn)}
.whisper-warning{background:#ffaa0012;border:1px solid #ffaa0044;border-radius:10px;padding:16px;margin-bottom:16px;font-size:13px;color:var(--warn)}

/* Superfícies — .admin-section/.af-report/.kw-section/.history-card/.stat-box
   compartilham fundo/borda/raio; o resto de cada uma (padding, filhos como
   h3/h4) é específico da página e continua no <style> local. */
.surface,.admin-section,.af-report,.kw-section,.history-card,.stat-box{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r-xl)}
.admin-section{padding:20px;margin-bottom:20px}
.admin-section h3{font-size:14px;font-weight:600;margin-bottom:16px;color:var(--acc)}

/* Abas */
.tabs{display:flex;margin-bottom:28px;border-bottom:1px solid var(--border)}
.tab{flex:1;padding:10px;text-align:center;font-size:13px;font-weight:600;color:var(--t3);cursor:pointer;border:none;border-bottom:2px solid transparent;background:none;font-family:'Sora',sans-serif;transition:all .2s}
.tab:hover{color:var(--t2)}
.tab.active{color:var(--acc);border-bottom-color:var(--acc)}
/* As 6 abas somam mais que a largura de um celular: a barra rola dentro de si
   mesma, senão empurra a página inteira pra rolagem horizontal. */
.admin-tabs{display:flex;gap:0;margin-bottom:16px;border-bottom:1px solid var(--border);overflow-x:auto;scrollbar-width:thin}
.admin-tabs::-webkit-scrollbar{height:4px}
.admin-tabs::-webkit-scrollbar-track{background:transparent}
.admin-tabs::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
.atab{flex:0 0 auto;white-space:nowrap;padding:10px 20px;font-size:13px;font-weight:600;color:var(--t3);cursor:pointer;border:none;border-bottom:2px solid transparent;background:none;font-family:'Sora',sans-serif;transition:all .2s}
.atab:hover{color:var(--t2)}
.atab.active{color:var(--acc);border-bottom-color:var(--acc)}
.atabcontent{display:none}
.atabcontent.active{display:block}

/* Tabela */
.atable{width:100%;border-collapse:collapse;font-size:12px}
.atable th{text-align:left;padding:8px 12px;border-bottom:1px solid var(--border);color:var(--t3);font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:1px;text-transform:uppercase}
.atable td{padding:8px 12px;border-bottom:1px solid var(--border);color:var(--t2)}
.atable tr:last-child td{border-bottom:none}

/* Badge */
.badge{display:inline-block;padding:2px 8px;border-radius:4px;font-size:10px;font-family:'JetBrains Mono',monospace}
.b-admin{background:var(--acc-d);color:var(--acc)}
.b-user{background:var(--card);color:var(--t3)}
.b-active{background:#00d4aa18;color:var(--ok)}
.b-inactive{background:#ff446618;color:var(--danger)}
.b-locked{background:#ffaa0018;color:var(--warn)}

/* Componentes novos */
.empty-state{text-align:center;color:var(--t3);padding:var(--sp-12) var(--sp-4)}
.spinner{width:16px;height:16px;border-radius:50%;border:2px solid var(--border);border-top-color:var(--acc);display:inline-block;animation:spin .6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* =============================================
   Casca (shell) — navegação lateral persistente
   ============================================= */
.shell{display:flex;min-height:100vh;width:100%;min-width:0}
.app-nav{flex:0 0 232px;align-self:stretch;background:var(--bg2);border-right:1px solid var(--border)}
.nav-inner{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:var(--sp-2);padding:var(--sp-5) var(--sp-4);overflow-y:auto}
.nav-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--sp-4)}
.nav-brand{font-family:var(--font-mono);font-size:14px;font-weight:500;letter-spacing:4px;text-transform:uppercase;color:var(--acc);text-decoration:none}
.nav-toggle{display:none;background:none;border:1px solid var(--border);color:var(--t2);border-radius:var(--r-md);padding:6px 10px;cursor:pointer;font-size:16px;line-height:1}
.nav-items{list-style:none;display:flex;flex-direction:column;gap:2px;flex:1}
.nav-item{display:flex;align-items:center;gap:var(--sp-2);padding:10px 12px;border-radius:var(--r-lg);color:var(--t2);text-decoration:none;font-size:13px;font-weight:600;transition:all var(--tr)}
.nav-item:hover{background:var(--card);color:var(--t1)}
.nav-item.active,.nav-item[aria-current="page"]{background:var(--acc-d);color:var(--acc);box-shadow:inset 2px 0 0 var(--acc)}
.nav-footer{border-top:1px solid var(--border);padding-top:var(--sp-3);display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);margin-top:auto}
.shell-main{flex:1;min-width:0}

/* =============================================
   Home — cartões das ferramentas
   ============================================= */
.tool-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--sp-4)}
.tool-card{display:block;background:var(--card);border:1px solid var(--border);border-radius:var(--r-xl);padding:var(--sp-5);text-decoration:none;transition:all var(--tr)}
.tool-card:hover{border-color:var(--acc);transform:translateY(-2px)}
.tool-card h3{font-size:16px;font-weight:600;margin-bottom:8px;color:var(--t1)}
.tool-card p{font-size:12px;color:var(--t2);line-height:1.5;margin-bottom:12px}
.tool-cta{font-family:var(--font-mono);font-size:11px;color:var(--acc);letter-spacing:2px}

/* #homeView é o único filho direto de .container que alterna .active (ver
   switchView() em index.html) — a home usa a largura útil sem alargar as
   views de leitura (formulários do processador/compressor/gerador seguem em
   800px). Em browser sem :has(), a regra não casa e a home degrada pra 2
   colunas em vez de 3 — nada quebra. */
.shell-main .container:has(> #homeView.active){max-width:1120px}

/* =============================================
   Responsivo
   ============================================= */
@media(max-width:900px){
  .shell{flex-direction:column}
  .app-nav{flex:none;width:100%;border-right:none;border-bottom:1px solid var(--border)}
  .nav-inner{position:static;height:auto;padding:var(--sp-3);overflow:visible}
  .nav-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:0}
  .nav-toggle{display:inline-flex;align-items:center;justify-content:center}
  .nav-items{display:none}
  .nav-items.open{display:flex}
  .nav-footer{border-top:none;padding-top:var(--sp-2);margin-top:0}
}
@media(max-width:600px){
  .layout-grid{grid-template-columns:1fr}
  .tool-grid{grid-template-columns:1fr}
}

/* =============================================
   Foco (acessibilidade)
   ============================================= */
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.fi:focus-visible{border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-d)}