:root{
    /* marca */
    --brand:#2a78d6; --brand-ink:#1c5cab; --brand-soft:#eaf2fd;
    /* estados */
    --ok:#0e7a55; --ok-soft:#e9f7f1;
    --warn:#a15c07; --warn-soft:#fff6e8;
    --bad:#b42318; --bad-soft:#fdecec;
    --wa:#128c4a; --wa-soft:#e7f6ed;
    /* séries de gráfico (validadas p/ daltonismo) */
    --s1:#2a78d6; --s2:#e34948;
    /* superfícies */
    --bg:#f5f6f8; --surface:#ffffff; --surface-2:#fafbfc;
    --line:#e6e8ec; --line-soft:#f0f1f4;
    --ink:#171a21; --ink-2:#5b6172; --ink-3:#8b91a3;
    /* sidebar */
    --sb:#141824; --sb-2:#1e2434; --sb-3:#0f1320; --sb-ink:#aeb5c6;
    --r:10px; --r-sm:8px;
    --sh:0 1px 2px rgba(16,24,40,.04),0 1px 3px rgba(16,24,40,.06);
    --sh-2:0 6px 24px rgba(16,24,40,.12);
    --sbw:236px;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{-webkit-text-size-adjust:100%}
  body{
    background:var(--bg);color:var(--ink);font-size:14px;line-height:1.45;
    font-family:"Segoe UI Variable Text","Segoe UI",-apple-system,BlinkMacSystemFont,Inter,Roboto,Helvetica,Arial,sans-serif;
    -webkit-font-smoothing:antialiased;
  }
  b,strong{font-weight:600}
  .num{font-variant-numeric:tabular-nums;letter-spacing:-.01em}
  .i{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
  .i-sm{width:15px;height:15px}
  .i-lg{width:20px;height:20px}

  /* ocultar valores (ícone de olho) */
  .money{transition:filter .15s}
  body.priv .money{filter:blur(7px);user-select:none;pointer-events:none}

  /* ================= LOGIN ================= */
  #login{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;
    background:radial-gradient(120% 100% at 50% 0%,#1e2434 0%,#0f1320 65%)}
  .lg-box{background:#fff;border-radius:14px;padding:34px 32px;width:376px;max-width:92vw;box-shadow:0 24px 60px rgba(0,0,0,.45)}
  .lg-brand{text-align:center;margin-bottom:24px}
  .wordmark{font-size:24px;font-weight:700;letter-spacing:5px}
  .wordmark span{color:var(--brand)}
  .lg-brand p{color:var(--ink-3);font-size:12px;margin-top:6px;letter-spacing:.3px}
  .lg-box label{display:block;font-size:12px;font-weight:600;color:var(--ink-2);margin:16px 0 6px}
  .lg-box input{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:var(--r-sm);font:inherit;font-size:14px;outline:none;background:var(--surface-2)}
  .lg-box input:focus{border-color:var(--brand);background:#fff;box-shadow:0 0 0 3px var(--brand-soft)}
  .lg-box button{width:100%;margin-top:22px;padding:12px;background:var(--brand);color:#fff;border:none;border-radius:var(--r-sm);font:inherit;font-size:14px;font-weight:600;cursor:pointer}
  .lg-box button:hover{background:var(--brand-ink)}
  .lg-demo{margin-top:16px;text-align:center;font-size:11.5px;color:var(--ink-3);background:var(--bg);border-radius:var(--r-sm);padding:9px 10px;line-height:1.5}

  /* ================= SHELL ================= */
  #app{display:none;min-height:100vh}
  #app.on{display:flex}

  .sidebar{width:var(--sbw);background:var(--sb);color:var(--sb-ink);flex:none;display:flex;flex-direction:column;
    position:sticky;top:0;height:100vh;transition:width .16s ease}
  body.mini .sidebar{width:64px}
  .sb-brand{padding:17px 18px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--sb-2);color:#fff;min-height:57px}
  .sb-brand .wordmark{font-size:17px;letter-spacing:4px;white-space:nowrap}
  .sb-user{padding:12px 18px;border-bottom:1px solid var(--sb-2);font-size:12px;white-space:nowrap;overflow:hidden}
  .sb-user b{display:block;color:#fff;font-size:13px;margin-bottom:1px}
  .sb-user .cred{color:#5fd3a2;font-weight:600}
  .sb-scroll{flex:1;overflow-y:auto;overflow-x:hidden}
  .sb-scroll::-webkit-scrollbar{width:6px}
  .sb-scroll::-webkit-scrollbar-thumb{background:#333c52;border-radius:3px}
  .sb-menu{list-style:none;padding:8px 8px 16px}
  .mi{padding:9px 10px;margin:1px 0;border-radius:var(--r-sm);cursor:pointer;display:flex;align-items:center;gap:11px;font-size:13.5px;white-space:nowrap}
  .mi:hover{background:var(--sb-2);color:#fff}
  .mi.active{background:var(--brand);color:#fff;font-weight:600}
  .mi .car{margin-left:auto;transition:transform .15s;opacity:.55}
  li.open>.mi .car{transform:rotate(90deg)}
  .sb-sub{list-style:none;display:none;margin:2px 0 6px}
  li.open>.sb-sub{display:block}
  .sb-sub li{padding:7px 10px 7px 41px;font-size:12.5px;cursor:pointer;color:#98a0b3;border-radius:var(--r-sm);white-space:nowrap}
  .sb-sub li:hover{color:#fff;background:var(--sb-2)}
  .sb-sub li.active{color:#fff;background:var(--sb-3);font-weight:600;box-shadow:inset 2px 0 0 var(--brand)}
  .sb-out{padding:12px 18px;border-top:1px solid var(--sb-2);cursor:pointer;font-size:13.5px;display:flex;align-items:center;gap:11px;white-space:nowrap}
  .sb-out:hover{color:#fff}
  body.mini .sb-brand .wordmark,body.mini .sb-user,body.mini .mi .lbl,body.mini .mi .car,body.mini .sb-sub,body.mini .sb-out .lbl{display:none}
  body.mini .mi{justify-content:center;padding:10px 0}
  body.mini .sb-out{justify-content:center;padding:14px 0}

  .main{flex:1;display:flex;flex-direction:column;min-width:0}
  .topbar{background:var(--surface);border-bottom:1px solid var(--line);padding:10px 20px;display:flex;align-items:center;
    gap:12px;flex-wrap:wrap;position:sticky;top:0;z-index:20;min-height:57px}
  .tb-title{font-size:15px;font-weight:600;line-height:1.2}
  .tb-sub{font-size:12px;color:var(--ink-3)}
  .tb-right{display:flex;gap:8px;align-items:center;margin-left:auto;flex-wrap:wrap}
  .icon-btn{width:34px;height:34px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--surface);
    color:var(--ink-2);display:grid;place-items:center;cursor:pointer}
  .icon-btn:hover{background:var(--bg);color:var(--ink)}
  .icon-btn.on{background:var(--brand-soft);border-color:#cfe1f8;color:var(--brand-ink)}
  .search{position:relative}
  .search .i{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--ink-3);pointer-events:none}
  .search input{padding:8px 12px 8px 33px;border:1px solid var(--line);border-radius:var(--r-sm);font:inherit;font-size:13px;width:230px;outline:none;background:var(--surface-2)}
  .search input:focus{border-color:var(--brand);background:#fff;box-shadow:0 0 0 3px var(--brand-soft)}
  .content{padding:20px;flex:1;max-width:1480px;width:100%}

  /* ================= BOTÕES ================= */
  .btn{padding:8px 14px;border-radius:var(--r-sm);border:1px solid transparent;font:inherit;font-size:13px;font-weight:600;
    cursor:pointer;display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
  .btn-primary{background:var(--brand);color:#fff}
  .btn-primary:hover{background:var(--brand-ink)}
  .btn-ghost{background:var(--surface);border-color:var(--line);color:var(--ink-2)}
  .btn-ghost:hover{background:var(--bg);color:var(--ink)}
  .btn-wa{background:var(--wa);color:#fff}
  .btn-wa:hover{filter:brightness(.93)}
  .btn-sm{padding:6px 11px;font-size:12.5px}

  /* ações de linha */
  .act{display:flex;gap:4px;justify-content:flex-end}
  .act a,.act button{width:30px;height:30px;border-radius:7px;border:1px solid var(--line);background:var(--surface);
    display:grid;place-items:center;cursor:pointer;color:var(--ink-3);text-decoration:none}
  .act a:hover,.act button:hover{border-color:currentColor}
  .act .a-wa{color:var(--wa);background:var(--wa-soft);border-color:#cdead9}
  .act .a-ren{color:var(--brand-ink);background:var(--brand-soft);border-color:#d6e6fa}
  .act .a-blk:hover{color:var(--bad)}

  /* ================= CARDS ================= */
  .kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:12px}
  .kpi-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 15px;box-shadow:var(--sh)}
  .kpi-card .top{display:flex;align-items:center;gap:9px;margin-bottom:9px}
  .kpi-ic{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;flex:none}
  .kpi-card .lbl{font-size:11.5px;font-weight:600;color:var(--ink-2);letter-spacing:.2px}
  .kpi-card .val{font-size:27px;font-weight:700;line-height:1.05}
  .kpi-card .sub{font-size:11.5px;color:var(--ink-3);margin-top:4px}
  .kpi-card .sub .up{color:var(--ok);font-weight:600}
  .kpi-card .sub .down{color:var(--bad);font-weight:600}
  .ic-brand{background:var(--brand-soft);color:var(--brand-ink)}
  .ic-ok{background:var(--ok-soft);color:var(--ok)}
  .ic-warn{background:var(--warn-soft);color:var(--warn)}
  .ic-bad{background:var(--bad-soft);color:var(--bad)}

  .stat-strip{display:grid;grid-template-columns:repeat(4,1fr);background:var(--surface);border:1px solid var(--line);
    border-radius:var(--r);margin-bottom:14px;box-shadow:var(--sh);overflow:hidden}
  .stat{padding:14px 16px;border-right:1px solid var(--line-soft)}
  .stat:last-child{border-right:none}
  .stat .t{font-size:11px;text-transform:uppercase;letter-spacing:.55px;color:var(--ink-3);font-weight:700}
  .stat .v{font-size:20px;font-weight:700;margin-top:5px}
  .stat .v.neg{color:var(--bad)} .stat .v.pos{color:var(--ok)}
  .stat .s{font-size:11.5px;color:var(--ink-3);margin-top:2px}

  /* ================= PAINÉIS ================= */
  .panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);margin-bottom:14px;box-shadow:var(--sh)}
  .panel-h{padding:13px 16px;border-bottom:1px solid var(--line-soft);display:flex;justify-content:space-between;
    align-items:center;gap:10px;flex-wrap:wrap}
  .panel-h h3{font-size:14px;font-weight:600;display:flex;align-items:center;gap:8px}
  .panel-h h3 .i{color:var(--ink-3)}
  .panel-h .tag{font-size:11.5px;color:var(--ink-3)}
  .panel-h .link{font-size:12px;color:var(--brand-ink);cursor:pointer;font-weight:600}
  .panel-b{padding:14px 16px}
  .panel-b.flush{padding:0}
  .grid2{display:grid;grid-template-columns:1.55fr 1fr;gap:14px;align-items:start}
  .grid-charts{display:grid;grid-template-columns:1fr 1fr;gap:14px}

  /* ================= TABELA ================= */
  .tw{overflow-x:auto}
  table.tb{width:100%;border-collapse:collapse;font-size:13px}
  table.tb th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--ink-3);
    font-weight:700;padding:10px 10px;border-bottom:1px solid var(--line);white-space:nowrap;background:var(--surface-2)}
  table.tb td{padding:10px;border-bottom:1px solid var(--line-soft);vertical-align:middle}
  table.tb tr:last-child td{border-bottom:none}
  table.tb tbody tr:hover td{background:var(--surface-2)}
  table.tb tr.sel td{background:var(--brand-soft)}
  .ck{width:15px;height:15px;accent-color:var(--brand);cursor:pointer;vertical-align:middle}
  .dot{width:7px;height:7px;border-radius:50%;display:inline-block;margin-left:5px;vertical-align:middle}
  .dot.on{background:#22a06b} .dot.off{background:#cdd2dc}
  code.mono{background:var(--bg);padding:2px 7px;border-radius:5px;font-size:12px;
    font-family:"Cascadia Mono",Consolas,"SF Mono",Menlo,monospace}
  .chip{display:inline-block;padding:3px 9px;border-radius:999px;font-size:11.5px;font-weight:600;white-space:nowrap}
  .chip-bad{background:var(--bad-soft);color:var(--bad)}
  .chip-warn{background:var(--warn-soft);color:var(--warn)}
  .chip-ok{background:var(--ok-soft);color:var(--ok)}
  .chip-mute{background:var(--bg);color:var(--ink-2)}
  .chip-brand{background:var(--brand-soft);color:var(--brand-ink)}
  .empty{padding:40px 16px;text-align:center;color:var(--ink-3);font-size:13px}

  /* filtros + colunas */
  .filters{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:12px 16px;border-bottom:1px solid var(--line-soft);background:var(--surface-2)}
  .filters .fw{position:relative;flex:1 1 150px;min-width:150px}
  .filters .fw .i{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--ink-3);pointer-events:none}
  .filters input,.filters select{padding:8px 9px;max-width:100%;border:1px solid var(--line);border-radius:var(--r-sm);font:inherit;
    font-size:12.5px;outline:none;background:#fff;color:var(--ink)}
  .filters .fw input{width:100%;padding-left:32px}
  .filters input:focus,.filters select:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
  .colmenu{position:relative;margin-left:auto}
  .colmenu .pop{position:absolute;right:0;top:40px;z-index:30;background:#fff;border:1px solid var(--line);
    border-radius:var(--r);box-shadow:var(--sh-2);padding:8px;min-width:190px;display:none}
  .colmenu.open .pop{display:block}
  .colmenu .pop .h{font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--ink-3);font-weight:700;padding:4px 8px 7px}
  .colmenu .pop label{display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:6px;font-size:13px;cursor:pointer}
  .colmenu .pop label:hover{background:var(--bg)}

  /* barra de seleção em lote */
  .bulk{display:none;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 16px;background:var(--brand-soft);
    border-bottom:1px solid #d6e6fa}
  .bulk.on{display:flex}
  .bulk .cnt{font-size:13px;font-weight:600;color:var(--brand-ink)}
  .bulk .sep{margin-left:auto}

  /* ================= GRÁFICOS ================= */
  .viz{position:relative}
  .viz svg{display:block;width:100%;height:auto;overflow:visible}
  .viz .grid line{stroke:var(--line-soft);stroke-width:1}
  .viz .axis text{font-size:10.5px;fill:var(--ink-3);font-family:inherit}
  .viz .band{fill:#171a21;opacity:0;pointer-events:all;transition:opacity .1s}
  .viz.hot .band{opacity:.04}
  .viz .endlbl{font-size:11px;font-weight:700;fill:var(--brand-ink);font-family:inherit}
  .viz-tip{position:absolute;pointer-events:none;opacity:0;transition:opacity .12s;background:#171a21;color:#fff;
    border-radius:8px;padding:8px 10px;font-size:12px;line-height:1.5;white-space:nowrap;box-shadow:var(--sh-2);z-index:5;transform:translate(-50%,-115%)}
  .viz-tip.on{opacity:1}
  .viz-tip .tt{font-weight:700;margin-bottom:3px}
  .viz-tip .row{display:flex;align-items:center;gap:7px}
  .viz-tip .sw{width:8px;height:8px;border-radius:2px;flex:none}
  .legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:10px;padding-left:2px}
  .legend span{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--ink-2)}
  .legend i{width:9px;height:9px;border-radius:2px;display:inline-block}

  /* ================= FORMS ================= */
  .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .fg{display:flex;flex-direction:column;gap:6px}
  .fg.full{grid-column:1/-1}
  .fg label{font-size:12px;font-weight:600;color:var(--ink-2)}
  .fg input,.fg select,.fg textarea{padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-sm);
    font:inherit;font-size:13px;outline:none;background:#fff;color:var(--ink)}
  .fg input:disabled{background:var(--bg);color:var(--ink-3)}
  .fg input:focus,.fg select:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
  .form-foot{margin-top:16px;display:flex;gap:10px;flex-wrap:wrap}

  /* templates de teste */
  .tpl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
  .tpl{border:1px solid var(--line);border-radius:var(--r);padding:15px;cursor:pointer;background:var(--surface);transition:.13s}
  .tpl:hover{border-color:var(--brand);box-shadow:0 4px 14px rgba(42,120,214,.13);transform:translateY(-1px)}
  .tpl b{display:block;margin-bottom:4px;font-size:13.5px}
  .tpl small{color:var(--ink-3);font-size:11.5px;display:block;line-height:1.5}
  .tpl .go{margin-top:11px;font-size:12px;color:var(--brand-ink);font-weight:600;display:flex;align-items:center;gap:5px}

  .info-list{list-style:none}
  .info-list li{padding:10px 0;border-bottom:1px solid var(--line-soft);font-size:13px}
  .info-list li:last-child{border-bottom:none}
  .info-list .k{font-weight:600;display:block;margin-bottom:5px;font-size:12.5px}
  .badge{display:inline-block;background:var(--brand);color:#fff;font-size:10px;font-weight:700;border-radius:4px;
    padding:2px 6px;margin-right:5px;text-transform:uppercase;letter-spacing:.3px}
  .badge.g{background:var(--ink-3)}
  .aviso{border:1px solid var(--line);border-left:3px solid var(--warn);background:var(--warn-soft);border-radius:var(--r-sm);
    padding:11px 13px;margin-bottom:10px;font-size:12.5px;line-height:1.55}
  .aviso:last-child{margin-bottom:0}
  .aviso b{display:block;margin-bottom:2px;font-size:13px;color:var(--ink)}
  .aviso small{color:var(--ink-3)}
  .ph{background:var(--surface);border:1px dashed var(--line);border-radius:var(--r);padding:56px 20px;text-align:center;color:var(--ink-3)}
  .ph b{display:block;color:var(--ink-2);margin:10px 0 4px;font-size:14px}
  .txtdoc{font-size:13px;line-height:1.75;color:var(--ink-2)}
  .txtdoc h4{color:var(--ink);margin:14px 0 4px;font-size:13px}
  .txtdoc h4:first-child{margin-top:0}

  @media (max-width:1180px){.grid2{grid-template-columns:1fr}}
  @media (max-width:960px){.kpi-row,.stat-strip{grid-template-columns:repeat(2,1fr)}.grid-charts{grid-template-columns:1fr}
    .stat:nth-child(2){border-right:none}.stat:nth-child(1),.stat:nth-child(2){border-bottom:1px solid var(--line-soft)}
    .form-grid{grid-template-columns:1fr}}
  @media (max-width:720px){:root{--sbw:64px}body{font-size:13.5px}
    .sidebar .wordmark,.sb-user,.mi .lbl,.mi .car,.sb-sub,.sb-out .lbl{display:none}
    .mi{justify-content:center;padding:10px 0}.sb-out{justify-content:center}
    .content{padding:14px}.search input{width:150px}}
  @media (max-width:560px){.kpi-row,.stat-strip{grid-template-columns:1fr}
    .stat{border-right:none;border-bottom:1px solid var(--line-soft)}}

/* ================= EXTRAS (versão conectada) ================= */
.tabs{display:flex;gap:4px;padding:10px 16px 0;border-bottom:1px solid var(--line-soft);background:var(--surface-2)}
.tab{padding:9px 14px;font-size:13px;font-weight:600;color:var(--ink-2);border-bottom:2px solid transparent;cursor:pointer;margin-bottom:-1px;border-radius:6px 6px 0 0}
.tab:hover{color:var(--ink);background:var(--bg)}
.tab.active{color:var(--brand-ink);border-bottom-color:var(--brand)}
.tab .n{font-size:11px;background:var(--bg);border-radius:999px;padding:1px 7px;margin-left:6px;color:var(--ink-3)}
.tab.active .n{background:var(--brand-soft);color:var(--brand-ink)}

.modal-bg{position:fixed;inset:0;background:rgba(15,19,32,.55);z-index:90;display:none;align-items:center;justify-content:center;padding:16px}
.modal-bg.on{display:flex}
.modal{background:#fff;border-radius:14px;width:520px;max-width:100%;max-height:92vh;overflow:auto;box-shadow:0 24px 60px rgba(0,0,0,.35)}
.modal.wide{width:760px}
.modal-h{padding:16px 20px;border-bottom:1px solid var(--line-soft);display:flex;align-items:center;gap:10px}
.modal-h h3{font-size:15px;font-weight:600;flex:1}
.modal-b{padding:18px 20px}
.modal-f{padding:14px 20px;border-top:1px solid var(--line-soft);display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;background:var(--surface-2);border-radius:0 0 14px 14px}
.x{width:30px;height:30px;border-radius:7px;border:1px solid var(--line);background:#fff;display:grid;place-items:center;cursor:pointer;color:var(--ink-3)}

.toasts{position:fixed;right:16px;bottom:16px;z-index:200;display:flex;flex-direction:column;gap:8px}
.toast{background:#171a21;color:#fff;padding:11px 14px;border-radius:10px;font-size:13px;box-shadow:var(--sh-2);max-width:360px;animation:tin .18s ease}
.toast.ok{border-left:3px solid #22a06b}.toast.err{border-left:3px solid #e34948}.toast.warn{border-left:3px solid #f3a41f}
@keyframes tin{from{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}}

.cred-box{background:var(--sb);color:#fff;border-radius:10px;padding:14px 16px;font-family:"Cascadia Mono",Consolas,Menlo,monospace;font-size:13px;line-height:1.8;white-space:pre-wrap;word-break:break-all;position:relative}
.cred-box b{color:#5fd3a2}
.loading{padding:32px;text-align:center;color:var(--ink-3);font-size:13px}
.spin{display:inline-block;width:16px;height:16px;border:2px solid var(--line);border-top-color:var(--brand);border-radius:50%;animation:sp .7s linear infinite;vertical-align:middle;margin-right:8px}
@keyframes sp{to{transform:rotate(360deg)}}
.btn[disabled],.act button[disabled]{opacity:.55;cursor:wait}
.est{font-size:11px;color:var(--ink-3);margin-top:6px}
.err-box{background:var(--bad-soft);color:var(--bad);border:1px solid #f5c2be;border-radius:var(--r-sm);padding:10px 12px;font-size:12.5px;margin-top:12px}
.ok-box{background:var(--ok-soft);color:var(--ok);border:1px solid #bfe6d3;border-radius:var(--r-sm);padding:10px 12px;font-size:12.5px;margin-top:12px}
.role{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;padding:2px 7px;border-radius:4px;background:var(--brand-soft);color:var(--brand-ink)}
.role.admin{background:#fdecec;color:var(--bad)}.role.master{background:var(--warn-soft);color:var(--warn)}
.pager{display:flex;gap:6px;align-items:center;justify-content:flex-end;padding:10px 16px;font-size:12.5px;color:var(--ink-3)}
.pager button{padding:5px 10px;border-radius:6px;border:1px solid var(--line);background:#fff;cursor:pointer;font:inherit;font-size:12.5px}
.pager button[disabled]{opacity:.4;cursor:default}
.tb td.dim{color:var(--ink-3);font-size:12px}
textarea.code{font-family:"Cascadia Mono",Consolas,Menlo,monospace;font-size:12.5px;min-height:220px;line-height:1.5}
.lg-box .err-box{margin-top:14px}
.qr{display:block;margin:10px auto;border:1px solid var(--line);border-radius:10px}
.sb-user .role{margin-top:4px}
.kpi-card .val.sm{font-size:20px}
.srv{display:inline-flex;align-items:center;gap:6px;font-size:12px;padding:4px 9px;border-radius:999px;background:var(--bg);color:var(--ink-2)}
.srv i{width:8px;height:8px;border-radius:50%;background:#cdd2dc}.srv.on i{background:#22a06b}
.warn-inline{font-size:12px;color:var(--warn);margin-top:6px}
@media (max-width:720px){.modal{border-radius:12px}.modal-f{border-radius:0 0 12px 12px}}