:root{
    --canvas:#061427; --panel:#0b1d35; --panel2:#0f2542; --line:#1c3556; --txt:#e6edf5; --mut:#8ea3bd;
    --brand:#22d3ee; --brand2:#0891b2; --gold:#d6b98c; --ok:#34d399; --bad:#f87171; --warn:#fbbf24;
  }
  *{box-sizing:border-box} body{margin:0;background:var(--canvas);color:var(--txt);font:14px/1.45 "DM Sans",sans-serif}
  h1,h2,h3{font-family:"Plus Jakarta Sans",sans-serif;margin:0}
  .mono{font-family:"JetBrains Mono",monospace}
  
  /* layout */
  .side{width:220px;background:var(--panel);border-right:1px solid var(--line);padding:18px 12px;display:flex;flex-direction:column;gap:4px}
  .logo{display:flex;align-items:center;gap:10px;padding:4px 8px 18px}
  .logo .mark{width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,var(--brand),var(--brand2));display:grid;place-items:center;font-weight:800;color:#04202a}
  .logo span{font:800 17px "Plus Jakarta Sans"} .logo small{display:block;color:var(--mut);font-size:11px;font-weight:500}
  .nav{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;color:var(--mut);cursor:pointer}
  .nav:hover{background:var(--panel2)} .nav.on{background:#22d3ee18;color:var(--brand)}
  .nav .ic{width:18px;text-align:center}
  .sec{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:#5d7594;padding:14px 10px 4px}
  .me{margin-top:auto;border-top:1px solid var(--line);padding:12px 8px 0;font-size:12.5px;color:var(--mut)}
  .me b{color:var(--txt);display:block;font-size:13.5px}
  main{flex:1;padding:22px 26px;overflow:auto}
  .head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
  .head p{margin:3px 0 0;color:var(--mut);font-size:13px}
  .card{background:var(--panel);border:1px solid var(--line);border-radius:12px}
  .btn{background:var(--brand);color:#04202a;border:0;border-radius:8px;padding:8px 14px;font:600 13px "DM Sans";cursor:pointer}
  .btn.ghost{background:transparent;color:var(--txt);border:1px solid var(--line)}
  .btn.danger{background:transparent;color:var(--bad);border:1px solid #f8717155}
  .pill{display:inline-block;padding:2px 8px;border-radius:99px;font-size:11.5px;font-weight:600}
  .p-admin{background:#d6b98c22;color:var(--gold)} .p-dev{background:#22d3ee1c;color:var(--brand)} .p-cons{background:#8ea3bd22;color:var(--mut)}
  .p-ok{background:#34d39920;color:var(--ok)} .p-bad{background:#f8717120;color:var(--bad)} .p-warn{background:#fbbf2420;color:var(--warn)}
  table{border-collapse:collapse;width:100%} th,td{text-align:left;padding:8px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
  th{font-size:11.5px;color:var(--mut);font-weight:600;background:var(--panel2);position:sticky;top:0}
  td.n{text-align:right;font-family:"JetBrains Mono";font-size:12.5px}
  input,select{background:var(--canvas);border:1px solid var(--line);color:var(--txt);border-radius:8px;padding:8px 10px;font:inherit}
  .row{display:flex;gap:10px;align-items:center}
  .tag{font-family:"JetBrains Mono";font-size:10.5px;color:var(--mut);background:var(--canvas);border:1px solid var(--line);border-radius:4px;padding:1px 5px}
  .note{border-left:3px solid var(--gold);background:#d6b98c10;padding:8px 12px;border-radius:0 8px 8px 0;color:#e9dcc6;font-size:12.5px;margin-top:14px}
  /* login */
  #s-login{align-items:center;justify-content:center;background:radial-gradient(1000px 500px at 50% -10%,#0e7490 0%,transparent 60%),var(--canvas)}
  .login{width:360px;padding:30px}
  .login label{display:block;font-size:12px;color:var(--mut);margin:14px 0 5px} .login input{width:100%}
  .otp{display:flex;gap:8px}.otp input{width:44px;text-align:center;font:600 18px "JetBrains Mono"}
  /* tabelas */
  .tree{width:250px;padding:12px;flex:none}
  .tree .t{padding:7px 9px;border-radius:7px;display:flex;justify-content:space-between;cursor:pointer}
  .tree .t.on{background:#22d3ee18;color:var(--brand)}
  .cols{max-height:380px;overflow:auto;margin-top:6px;border-top:1px solid var(--line);padding-top:6px}
  .cols div{display:flex;justify-content:space-between;padding:3px 9px;font-size:12.5px;color:var(--mut)}
  .cols div.hid{text-decoration:line-through;opacity:.45}
  .grid{overflow:auto;max-height:470px}
  .pager{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;color:var(--mut);font-size:12.5px}
  /* sql */
  .editor{font:13px/1.7 "JetBrains Mono";padding:14px 16px;min-height:150px;background:var(--canvas);border-radius:10px;border:1px solid var(--line);white-space:pre}
  .k{color:#c084fc}.s{color:#86efac}.f{color:var(--brand)}.c{color:#5d7594}
  /* restrição */
  .perm td{text-align:center}.perm td:first-child,.perm th:first-child{text-align:left}
  .chk{width:18px;height:18px;border-radius:5px;display:inline-grid;place-items:center;font-size:12px;font-weight:700}
  .chk.y{background:var(--brand);color:#04202a}.chk.n{border:1.5px solid #34506f}.chk.lock{background:#d6b98c;color:#231a09}
  .chk.ovr{outline:2px solid var(--warn);outline-offset:2px}
  .colgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px 16px;padding:12px 16px;font-size:12.5px}
  .colgrid label{display:flex;gap:8px;align-items:center;color:var(--mut)}

/* ---- app real ---- */
#app{display:flex;min-height:100vh}
#login-tela{display:flex;align-items:center;justify-content:center;min-height:100vh;width:100%;background:radial-gradient(1000px 500px at 50% -10%,#0e7490 0%,transparent 60%),var(--canvas)}
.erro{color:var(--bad);font-size:12.5px;margin-top:10px;min-height:1em}
.ok-msg{color:var(--ok);font-size:12.5px}
.qr{background:#fff;border-radius:10px;padding:8px;width:180px;margin:10px auto}
.qr svg{display:block;width:100%;height:auto}
.segredo{font:12px "JetBrains Mono";color:var(--mut);text-align:center;word-break:break-all}
.side .nav{user-select:none}
.me a{color:var(--brand);cursor:pointer}
button:disabled{opacity:.5;cursor:default}
.btn.sm{padding:5px 10px;font-size:12px}
.vazio{color:var(--mut);padding:24px;text-align:center}
td.nulo{color:#5d7594;font-style:italic}
th.ord{cursor:pointer} th.ord:hover{color:var(--txt)}
.filtro{display:flex;gap:6px;align-items:center}
.filtro .x{cursor:pointer;color:var(--mut);padding:0 6px}
textarea.editor{width:100%;resize:vertical;color:var(--txt);outline:none}
.caixa-senha{border:1px solid var(--gold);background:#d6b98c14;border-radius:10px;padding:14px 16px;margin:14px 0}
.caixa-senha .mono{font-size:18px;color:var(--gold);letter-spacing:.04em;user-select:all}
.chk{cursor:pointer;border:0;padding:0}
.chk.lock{cursor:default}
.chk.parc{background:#fbbf24;color:#231a09}
.tabs-cols{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.acoes{display:flex;gap:6px;flex-wrap:wrap}
.muted{color:var(--mut)}
.linha-sel td{background:#22d3ee0c}
.grid table td{max-width:420px;overflow:hidden;text-overflow:ellipsis}
.aviso{color:var(--warn);font-size:12px}
.chk{background:transparent}
.chk.lock:disabled{opacity:1}
.btn{white-space:nowrap}
.erro:empty{display:none}
.mark-img{width:30px;height:30px;border-radius:8px;display:block}
.login .mark-img{width:40px;height:40px;border-radius:10px}