/* Core — base stylesheet. Emerald brand, light + dark, accessible. */

:root{
  --bg:#f5f7f6; --bg-elev:#ffffff; --surface:#ffffff; --surface-2:#eef2f0;
  --border:#dbe2de; --text:#16201c; --muted:#4a554f;
  --em:#0F6E56; --em-deep:#0b5240; --accent:#b07d22;
  --ok:#0f8f63; --ok-glow:rgba(15,143,99,.32);
  --down:#d23b32; --down-glow:rgba(210,59,50,.30);
  --focus:#0F6E56; --warn:#B45309; --track:#dbe2de;
}
[data-theme="dark"]{
  --bg:#171b19; --bg-elev:#1c211e; --surface:#1d221f; --surface-2:#212620;
  --border:#333b36; --text:#e9edea; --muted:#a6b0aa;
  --em:#1D9E75; --em-deep:#0F6E56; --accent:#d8a24b;
  --ok:#2bbb86; --ok-glow:rgba(43,187,134,.55);
  --down:#f0564b; --down-glow:rgba(240,86,75,.58);
  --focus:#2bbb86; --warn:#FBBF24; --track:#333b36;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:"IBM Plex Sans",ui-sans-serif,system-ui,sans-serif;
  background:var(--bg); color:var(--text); min-height:100vh;
  -webkit-font-smoothing:antialiased; line-height:1.5;
  background-image:radial-gradient(120% 80% at 50% -10%, color-mix(in srgb, var(--em) 12%, transparent), transparent 60%);
}
.wrap{max-width:1080px;margin:0 auto;padding:28px 22px 60px}

.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:34px}
.brand{display:flex;align-items:center;gap:11px;font-weight:600;font-size:1.02rem;letter-spacing:.2px}
.glyph{width:30px;height:30px;border-radius:9px;background:linear-gradient(150deg,var(--em),var(--em-deep));
  display:grid;place-items:center;color:#fff;box-shadow:0 4px 14px -4px var(--ok-glow)}
.glyph svg{width:17px;height:17px}
.controls{display:flex;align-items:center;gap:10px}
.chip{font-family:"IBM Plex Mono",monospace;font-size:.74rem;color:var(--muted);
  border:1px solid var(--border);border-radius:999px;padding:5px 11px;background:var(--surface)}
.toggle{display:inline-flex;align-items:center;gap:7px;font:inherit;font-size:.82rem;color:var(--text);
  background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:6px 12px;cursor:pointer;transition:border-color .15s}
.toggle:hover{border-color:var(--em)}
.toggle svg{width:15px;height:15px}

.head{margin-bottom:24px}
.head h1{font-size:1.55rem;font-weight:700;letter-spacing:-.4px}
.head .sub{color:var(--muted);font-size:.92rem;margin-top:5px;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.dot-live{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 4px var(--ok-glow)}
.scope{font-family:"IBM Plex Mono",monospace;font-size:.78rem;color:var(--muted)}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:15px}
.tile{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:15px;
  padding:18px 18px 16px;min-height:152px;display:flex;flex-direction:column;justify-content:space-between;
  transition:transform .15s,border-color .15s}
.row-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.name{font-weight:600;font-size:1.05rem}
.metric{font-size:.85rem;color:var(--muted);margin-top:6px;line-height:1.5;max-width:160px}
.fig{color:var(--text);font-weight:600}
.stat{display:inline-flex;align-items:center;gap:7px;font-size:.8rem;font-weight:600;
  padding:5px 10px;border-radius:999px;border:1px solid var(--border);background:var(--surface-2);white-space:nowrap}
.stat svg{width:14px;height:14px}

.row-bot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:16px}
.spark{width:66px;height:22px;display:block;overflow:visible}
.spark.ok-line{stroke:var(--ok)}
.spark.down-line{stroke:var(--down)}
.sub2{font-family:"IBM Plex Mono",monospace;font-size:.69rem;color:var(--muted);letter-spacing:.2px}

.tile.ok{box-shadow:0 0 0 1px color-mix(in srgb,var(--ok) 26%,transparent), 0 0 22px -10px var(--ok-glow);
  animation:calm 3.4s ease-in-out infinite alternate}
.tile.ok .stat{color:var(--ok)}
.tile .ledge{position:absolute;left:0;top:16px;bottom:16px;width:3px;border-radius:3px}
.tile.ok .ledge{background:var(--ok);box-shadow:0 0 10px 0 var(--ok-glow)}
@keyframes calm{
  from{box-shadow:0 0 0 1px color-mix(in srgb,var(--ok) 22%,transparent), 0 0 16px -12px var(--ok-glow)}
  to{box-shadow:0 0 0 1px color-mix(in srgb,var(--ok) 40%,transparent), 0 0 34px -6px var(--ok-glow)}
}

.tile.down{cursor:pointer;background:color-mix(in srgb,var(--down) 7%,var(--surface));
  border-color:color-mix(in srgb,var(--down) 45%,var(--border));
  animation:throb .85s ease-in-out infinite;text-align:left;width:100%;font:inherit;color:var(--text)}
.tile.down .stat{color:var(--down);border-color:color-mix(in srgb,var(--down) 40%,var(--border))}
.tile.down .ledge{background:var(--down);box-shadow:0 0 12px 1px var(--down-glow)}
.tile.down:hover{transform:translateY(-1px)}
@keyframes throb{
  0%,100%{box-shadow:0 0 0 1px color-mix(in srgb,var(--down) 40%,transparent), 0 0 14px -8px var(--down-glow)}
  50%{box-shadow:0 0 0 2px color-mix(in srgb,var(--down) 70%,transparent), 0 0 40px -2px var(--down-glow)}
}
.hint{font-family:"IBM Plex Mono",monospace;font-size:.7rem;color:var(--down);display:inline-flex;align-items:center;gap:6px;opacity:.95}
.hint svg{width:12px;height:12px;transition:transform .2s}
.tile.down[aria-expanded="true"] .hint svg{transform:rotate(90deg)}

:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:15px}

.detail{margin-top:16px;background:var(--surface-2);border:1px solid color-mix(in srgb,var(--down) 30%,var(--border));border-radius:15px;overflow:hidden}
.detail[hidden]{display:none}
.detail .dhead{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 18px;border-bottom:1px solid var(--border);flex-wrap:wrap}
.detail .dtitle{display:flex;align-items:center;gap:10px;font-weight:600;font-size:.95rem}
.ecode{font-family:"IBM Plex Mono",monospace;font-size:.84rem;color:var(--down);
  background:color-mix(in srgb,var(--down) 12%,transparent);border:1px solid color-mix(in srgb,var(--down) 35%,var(--border));padding:4px 9px;border-radius:7px}
.logs{padding:10px 18px 16px;font-family:"IBM Plex Mono",monospace;font-size:.79rem;line-height:1.95;color:var(--muted);overflow-x:auto}
.logs .empty{color:var(--muted);opacity:.8}

.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.foot{margin-top:30px;color:var(--muted);font-size:.76rem;text-align:center}

@media (prefers-reduced-motion: reduce){
  .tile.ok,.tile.down{animation:none}
  .tile.ok{box-shadow:0 0 0 1px color-mix(in srgb,var(--ok) 40%,transparent)}
  .tile.down{box-shadow:0 0 0 2px color-mix(in srgb,var(--down) 55%,transparent)}
}

/* --- Auth pages (sign-in, owner activation) --- */
body.auth{display:grid;place-items:center;padding:24px}
.auth-card{width:100%;max-width:418px;background:var(--surface);border:1px solid var(--border);
  border-radius:18px;padding:32px 28px;box-shadow:0 24px 60px -30px rgba(0,0,0,.5)}
.auth-card .brand{margin-bottom:22px}
.auth-card .glyph{width:36px;height:36px;border-radius:10px}
.auth-card .glyph svg{width:19px;height:19px}
.auth h1{font-size:1.4rem;font-weight:700;letter-spacing:-.4px;margin-bottom:5px}
.auth .lead{color:var(--muted);font-size:.92rem;margin-bottom:20px}
.auth .step{font-size:.78rem;font-weight:600;color:var(--focus);letter-spacing:.3px;
  text-transform:uppercase;margin-bottom:6px}
.auth label{display:block;font-size:.82rem;font-weight:500;margin-bottom:6px}
.auth .input{width:100%;font:inherit;font-size:.92rem;color:var(--text);background:var(--bg-elev);
  border:1px solid var(--border);border-radius:11px;padding:12px 13px;margin-bottom:14px}
.auth .input.mono{font-family:"IBM Plex Mono",monospace;letter-spacing:1px}
.auth .input::placeholder{color:var(--muted)}
.auth .btn{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;font:inherit;
  font-size:.96rem;font-weight:600;border-radius:11px;padding:14px 16px;cursor:pointer;border:1px solid transparent}
.auth .btn[disabled]{opacity:.65;cursor:default}
.auth .btn svg{width:18px;height:18px}
.auth .btn-primary{background:var(--em);color:#fff;border-color:var(--em)}
.auth .btn-primary:hover:not([disabled]){background:var(--em-deep)}
.auth .btn-ghost{background:transparent;color:var(--text);border-color:var(--border)}
.auth .btn-ghost:hover{border-color:var(--em)}
.auth .divider{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:.78rem;margin:18px 0}
.auth .divider::before,.auth .divider::after{content:"";height:1px;background:var(--border);flex:1}
.auth .cmd-label{font-size:.78rem;color:var(--muted);margin-bottom:6px}
.auth .cmd{display:block;font-family:"IBM Plex Mono",monospace;font-size:.86rem;background:var(--bg-elev);
  border:1px solid var(--border);border-radius:10px;padding:11px 13px;color:var(--text);
  margin-bottom:22px;overflow-x:auto;white-space:nowrap}
.auth .cmd .p{color:var(--muted)}
.auth .note{color:var(--muted);font-size:.82rem;margin-top:16px;display:flex;gap:8px;align-items:flex-start}
.auth .note svg{width:15px;height:15px;flex:none;margin-top:2px}
.auth .msg{font-size:.85rem;border-radius:10px;padding:10px 12px;margin-bottom:14px}
.auth .msg.error{color:var(--down);background:color-mix(in srgb,var(--down) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--down) 35%,var(--border))}
.auth .msg.ok{color:var(--ok);background:color-mix(in srgb,var(--ok) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--ok) 35%,var(--border))}
.auth .status{font-size:.85rem;color:var(--muted);margin-top:12px;min-height:1.2em;text-align:center}

/* --- Billing admin UI --- */
.tabs{display:flex;gap:4px;overflow-x:auto;border-bottom:1px solid var(--border);margin-bottom:24px;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:none;font:inherit;font-size:.9rem;color:var(--muted);background:none;border:none;text-decoration:none;
  border-bottom:2px solid transparent;padding:10px 13px;cursor:pointer;white-space:nowrap}
.tab:hover{color:var(--text)}
.tab[aria-current="page"]{color:var(--text);border-bottom-color:var(--em);font-weight:600}

.phead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.section-h{display:flex;align-items:center;justify-content:space-between;margin:24px 0 12px}
.section-h h2{font-size:1.02rem;font-weight:600}
.muted{color:var(--muted)}
.back{display:inline-flex;align-items:center;gap:6px;font-size:.84rem;color:var(--muted);text-decoration:none;margin-bottom:14px}
.back:hover{color:var(--text)} .back svg{width:15px;height:15px}
.link{font-size:.82rem;color:var(--em);text-decoration:none} [data-theme="dark"] .link{color:var(--focus)}
.link:hover{text-decoration:underline}

.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:13px;margin-bottom:8px}
.kpi{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:16px;overflow:hidden}
.kpi::before{content:"";position:absolute;left:0;top:0;height:3px;width:100%;background:linear-gradient(90deg,var(--em),transparent)}
.kpi .k{font-size:.78rem;color:var(--muted);font-weight:500;margin-bottom:9px}
.kpi .v{font-size:1.5rem;font-weight:700;letter-spacing:-.5px}
.kpi .v .cur{font-size:.85rem;font-weight:600;color:var(--muted);margin-right:3px}
.kpi .d{font-size:.76rem;margin-top:6px;color:var(--muted)}

.panel{background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow:hidden}
.lrow{display:flex;align-items:center;gap:14px;padding:14px 16px;border-bottom:1px solid var(--border);flex-wrap:wrap}
.lrow:last-child{border-bottom:none}
.lmain{flex:1;min-width:170px}
.lmain .p{font-family:"IBM Plex Mono",monospace;font-size:.86rem;font-weight:600}
.lmain .s{font-size:.8rem;color:var(--muted)}
.lmeta{font-size:.82rem;color:var(--muted);min-width:84px}
.lmeta .lab{font-size:.68rem;text-transform:uppercase;letter-spacing:.4px;opacity:.8;display:block}
.lmeta.num{font-family:"IBM Plex Mono",monospace;color:var(--text)}
.empty{padding:30px 16px;text-align:center;color:var(--muted);font-size:.9rem}

.badge{font-size:.72rem;font-weight:600;padding:3px 9px;border-radius:999px;border:1px solid var(--border);background:var(--surface-2);color:var(--muted);white-space:nowrap}
.badge.active,.badge.paid,.badge.converted{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 40%,var(--border));background:color-mix(in srgb,var(--ok) 10%,transparent)}
.badge.revoked,.badge.void,.badge.past_due,.badge.failed,.badge.uncollectible{color:var(--down);border-color:color-mix(in srgb,var(--down) 40%,var(--border));background:color-mix(in srgb,var(--down) 10%,transparent)}
.badge.type,.badge.accent{color:var(--em-deep)} [data-theme="dark"] .badge.type,[data-theme="dark"] .badge.accent{color:var(--focus)}

.itable{width:100%;border-collapse:collapse}
.itable th,.itable td{text-align:left;padding:11px 18px;font-size:.88rem}
.itable thead th{font-size:.7rem;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);font-weight:600;border-bottom:1px solid var(--border)}
.itable tbody td{border-bottom:1px solid var(--border)}
.itable td.num,.itable th.num{text-align:right;font-family:"IBM Plex Mono",monospace}
.itable td.neg{color:var(--down)}
.totals{padding:14px 18px 6px;display:flex;flex-direction:column;gap:7px}
.trow{display:flex;justify-content:space-between;font-size:.9rem;color:var(--muted)}
.trow .v{font-family:"IBM Plex Mono",monospace;color:var(--text)}
.trow.grand{font-size:1.05rem;font-weight:700;color:var(--text);border-top:1px solid var(--border);padding-top:11px;margin-top:4px}

.flash{font-size:.88rem;border-radius:11px;padding:11px 14px;margin-bottom:18px}
.flash.ok{color:var(--ok);background:color-mix(in srgb,var(--ok) 10%,transparent);border:1px solid color-mix(in srgb,var(--ok) 35%,var(--border))}
.flash.err{color:var(--down);background:color-mix(in srgb,var(--down) 10%,transparent);border:1px solid color-mix(in srgb,var(--down) 35%,var(--border))}
.keyflash{font-family:"IBM Plex Mono",monospace;font-size:.9rem;word-break:break-all;background:var(--bg-elev);border:1px dashed color-mix(in srgb,var(--em) 50%,var(--border));border-radius:10px;padding:11px 13px;margin-top:8px}

/* --- Buttons (shared) --- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:inherit;font-size:.88rem;font-weight:600;
  border-radius:10px;padding:9px 14px;cursor:pointer;border:1px solid var(--em);background:var(--em);color:#fff;text-decoration:none}
.btn:hover{background:var(--em-deep)} .btn svg{width:16px;height:16px}
.btn[disabled]{opacity:.6;cursor:default}
.btn-sm{font-size:.8rem;padding:6px 11px}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--border)} .btn-ghost:hover{border-color:var(--em)}
.btn-danger{background:transparent;color:var(--down);border-color:color-mix(in srgb,var(--down) 40%,var(--border))}
.btn-danger:hover{background:color-mix(in srgb,var(--down) 10%,transparent)}
.actions{display:flex;gap:9px;padding:16px;flex-wrap:wrap;border-top:1px solid var(--border)}

/* --- Forms (shared) --- */
.field{margin-bottom:13px}
.field label{display:block;font-size:.82rem;font-weight:500;margin-bottom:6px}
.input,select.input{width:100%;font:inherit;font-size:.92rem;color:var(--text);background:var(--bg-elev);
  border:1px solid var(--border);border-radius:10px;padding:10px 12px}
.input::placeholder{color:var(--muted)}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:0 14px}
.form-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:18px;margin-bottom:22px}
.form-card h2{font-size:1rem;font-weight:600;margin-bottom:14px}
details.form-card>summary{cursor:pointer;font-weight:600;font-size:.95rem;list-style:none}
details.form-card>summary::-webkit-details-marker{display:none}
details.form-card[open]>summary{margin-bottom:14px}

/* --- Form extras --- */
.input:focus,select.input:focus{outline:none;border-color:var(--em);box-shadow:0 0 0 3px color-mix(in srgb,var(--em) 22%,transparent)}
select.input{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23A8A29E' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:34px}
.field.full{grid-column:1 / -1}
.hint{font-size:.74rem;color:var(--muted);margin-top:5px}
.form-foot{display:flex;gap:10px;margin-top:6px;flex-wrap:wrap}
summary .car{width:16px;height:16px;color:var(--muted);transition:transform .15s;flex:none}
details[open] summary .car{transform:rotate(90deg)}
.check{display:flex;align-items:center;gap:10px;padding:11px 12px;border:1px solid var(--border);border-radius:10px;background:var(--bg-elev)}
.check input{width:17px;height:17px;accent-color:var(--em);flex:none}
.check label{margin:0;font-size:.88rem;font-weight:500}
.money{position:relative}
.money .cur{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:.92rem}
.money .input{padding-left:30px}

/* --- Per-seat indicator --- */
.seat{font-family:"IBM Plex Mono",monospace;font-size:.78rem;color:var(--em);white-space:nowrap;
  background:color-mix(in srgb,var(--em) 12%,transparent);border:1px solid color-mix(in srgb,var(--em) 35%,var(--border));border-radius:999px;padding:3px 9px}
[data-theme="dark"] .seat{color:var(--focus)}

/* --- Voice & speech settings --- */
.settings-sub{color:var(--muted);margin:0 0 22px;font-size:.92rem}
.card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:18px;margin-bottom:18px}
.card h2{font-size:1rem;font-weight:600;margin:0 0 4px}
.card .h-note{font-size:.8rem;color:var(--muted);margin:0 0 14px}
.dimmed{opacity:.45;pointer-events:none}
fieldset{border:none;margin:0;padding:0} legend{padding:0;font-weight:600;font-size:1rem;margin-bottom:4px}
.master{display:flex;align-items:center;justify-content:space-between;gap:14px}
.master .mtitle{font-weight:600;font-size:1.02rem} .master .mnote{font-size:.82rem;color:var(--muted);margin-top:2px}
.sw{position:relative;width:50px;height:28px;flex:none}
.sw input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.sw .track{position:absolute;inset:0;background:var(--surface-2);border:1px solid var(--border);border-radius:999px;transition:.15s}
.sw .knob{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--muted);transition:.15s}
.sw input:checked ~ .track{background:color-mix(in srgb,var(--em) 30%,transparent);border-color:var(--em)}
.sw input:checked ~ .knob{left:25px;background:var(--em)}
.sw input:focus-visible ~ .track{box-shadow:0 0 0 3px color-mix(in srgb,var(--em) 25%,transparent)}
.grouplab{font-size:.7rem;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);font-weight:600;margin:14px 0 8px;display:flex;align-items:center;gap:8px}
.grouplab .tag{font-family:"IBM Plex Mono",monospace;font-size:.66rem;color:var(--em);background:color-mix(in srgb,var(--em) 12%,transparent);border:1px solid color-mix(in srgb,var(--em) 35%,var(--border));border-radius:999px;padding:2px 7px;text-transform:none;letter-spacing:0}
.vrow{display:flex;align-items:center;gap:12px;padding:11px 13px;border:1px solid var(--border);border-radius:11px;background:var(--bg-elev);margin-bottom:8px;cursor:pointer}
.vrow:hover{border-color:color-mix(in srgb,var(--em) 45%,var(--border))}
.vrow.sel{border-color:var(--em);box-shadow:0 0 0 3px color-mix(in srgb,var(--em) 18%,transparent)}
.vrow.locked{opacity:.6;cursor:default} .vrow.locked:hover{border-color:var(--border)}
.vrow input[type=radio]{width:18px;height:18px;accent-color:var(--em);flex:none}
.vrow .vmain{flex:1} .vrow .vname{font-weight:600;font-size:.92rem} .vrow .vmeta{font-size:.76rem;color:var(--muted)}
.vrow .play{flex:none;display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:.78rem;font-weight:600;color:var(--text);background:transparent;border:1px solid var(--border);border-radius:8px;padding:5px 10px;cursor:pointer}
.vrow .play:hover{border-color:var(--em)} .vrow .play svg{width:13px;height:13px;color:var(--em)}
.locktag{font-size:.7rem;color:var(--muted);border:1px solid var(--border);border-radius:999px;padding:2px 8px;white-space:nowrap}
.slider{margin-bottom:18px}
.slider .top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.slider label{font-size:.84rem;font-weight:500} .slider .val{font-family:"IBM Plex Mono",monospace;font-size:.82rem;color:var(--em)}
input[type=range]{width:100%;accent-color:var(--em);height:26px}
.lib{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 13px;border-bottom:1px solid var(--border)} .lib:last-of-type{border-bottom:none}
.lib .ln{font-weight:600;font-size:.9rem} .lib .lm{font-size:.76rem;color:var(--muted)}
.pill{font-size:.68rem;font-weight:600;padding:2px 8px;border-radius:999px;border:1px solid var(--border);color:var(--muted)}
.pill.paid{color:var(--em);border-color:color-mix(in srgb,var(--em) 40%,var(--border))}
.libactions{display:flex;gap:10px;align-items:center}

/* --- Branding settings --- */
.colorrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
input[type=color]{width:52px;height:42px;border:1px solid var(--border);border-radius:10px;background:var(--bg-elev);padding:4px;cursor:pointer}
.hex{width:130px;font-family:"IBM Plex Mono",monospace;text-transform:uppercase}
.contrast{font-size:.82rem;font-weight:600;padding:6px 11px;border-radius:9px;border:1px solid var(--border);color:var(--muted)}
.contrast.pass{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 40%,var(--border));background:color-mix(in srgb,var(--ok) 10%,transparent)}
.contrast.fail{color:var(--down);border-color:color-mix(in srgb,var(--down) 40%,var(--border));background:color-mix(in srgb,var(--down) 10%,transparent)}
.swatches{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.swatches .swatch{width:30px;height:30px;border-radius:8px;border:2px solid transparent;cursor:pointer;padding:0}
.swatches .swatch:hover{border-color:var(--text)}
.preview{margin-top:16px;border:1px dashed var(--border);border-radius:12px;padding:16px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.pv-btn{font:inherit;font-weight:600;font-size:.88rem;color:#fff;background:var(--em);border:1px solid var(--em);border-radius:10px;padding:9px 15px;cursor:default}
.pv-link{font-weight:600;color:var(--em);text-decoration:none} [data-theme="dark"] .pv-link{color:var(--focus)}
.pv-chip{font-size:.74rem;color:#fff;background:var(--em);border-radius:999px;padding:3px 10px}

/* --- Voice library edit rows --- */
.voicelib{border:1px solid var(--border);border-radius:11px;background:var(--bg-elev);margin-bottom:8px;overflow:hidden}
.vlsum{display:flex;align-items:center;gap:12px;padding:12px 13px;cursor:pointer;list-style:none} .vlsum::-webkit-details-marker{display:none}
.vlsum:hover{background:var(--surface-2)}
.vlsum .amain{flex:1;min-width:0;display:flex;flex-direction:column}
.vledit{padding:0 13px 14px 38px}
.editgrid{display:grid;grid-template-columns:1fr 150px;gap:10px;margin-bottom:10px}
@media (max-width:520px){.editgrid{grid-template-columns:1fr}}

/* --- Audit log viewer --- */
.auditfilters{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:14px;margin-bottom:18px;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr auto;gap:10px;align-items:end}
.auditfilters .f label{display:block;font-size:.7rem;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);font-weight:600;margin-bottom:5px}
.arow{border-bottom:1px solid var(--border)} .arow:last-child{border-bottom:none}
.asum{display:flex;align-items:center;gap:13px;padding:13px 16px;cursor:pointer;list-style:none} .asum::-webkit-details-marker{display:none}
.asum:hover{background:var(--surface-2)}
.asum .amain{flex:1;min-width:0;display:flex;flex-direction:column}
.aact{font-family:"IBM Plex Mono",monospace;font-size:.88rem;font-weight:600}
.ameta{font-size:.79rem;color:var(--muted)}
.atime{font-size:.78rem;color:var(--muted);white-space:nowrap;text-align:right}
.badge.b-auth{color:var(--em);border-color:color-mix(in srgb,var(--em) 40%,var(--border))}
.badge.b-billing{color:#2563EB;border-color:#2563EB55} [data-theme="dark"] .badge.b-billing{color:#60A5FA;border-color:#60A5FA55}
.badge.b-warn{color:var(--down);border-color:color-mix(in srgb,var(--down) 40%,var(--border))}
.adet{padding:0 16px 15px 44px;font-size:.84rem}
.kv{display:flex;gap:8px;padding:4px 0;border-top:1px dashed var(--border)} .kv:first-child{border-top:none}
.kv .k{color:var(--muted);min-width:88px;flex:none} .kv .v{font-family:"IBM Plex Mono",monospace;word-break:break-all}
.pager{display:flex;justify-content:space-between;align-items:center;margin-top:16px;font-size:.85rem;color:var(--muted)}
.pbtn{font:inherit;font-size:.85rem;font-weight:600;color:var(--text);background:transparent;border:1px solid var(--border);border-radius:9px;padding:7px 13px;cursor:pointer;text-decoration:none} .pbtn:hover{border-color:var(--em)}
.pbtn[aria-disabled="true"]{opacity:.4;cursor:default;pointer-events:none}
@media (max-width:680px){.auditfilters{grid-template-columns:1fr 1fr}.auditfilters .f-search,.auditfilters .f-apply{grid-column:1/-1}.atime{display:none}}

/* --- People (users & teams) --- */
.count{font-size:.78rem;color:var(--muted)}
.urow{border-bottom:1px solid var(--border)} .urow:last-child{border-bottom:none}
.usum{display:flex;align-items:center;gap:12px;padding:13px 16px;cursor:pointer;list-style:none} .usum::-webkit-details-marker{display:none}
.usum:hover{background:var(--surface-2)}
.usum .umain{flex:1;min-width:0;display:flex;flex-direction:column}
.uname{font-weight:600;font-size:.92rem} .umail{font-size:.78rem;color:var(--muted)}
.chips{display:flex;gap:5px;flex-wrap:wrap}
.chip2{font-size:.68rem;font-weight:600;padding:2px 8px;border-radius:999px;border:1px solid var(--border);color:var(--muted)}
.chip2.role{color:var(--em);border-color:color-mix(in srgb,var(--em) 40%,var(--border))} [data-theme="dark"] .chip2.role{color:var(--focus)}
.badge.suspended{color:var(--down);border-color:color-mix(in srgb,var(--down) 40%,var(--border))}
.badge.owner{color:#B45309;border-color:#B4530955} [data-theme="dark"] .badge.owner{color:#FBBF24;border-color:#FBBF2455}
.udet{padding:2px 16px 16px 43px;font-size:.86rem}
.blk{padding:12px 0;border-top:1px dashed var(--border)} .blk:first-child{border-top:none}
.blk .lab{font-size:.72rem;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);font-weight:600;margin-bottom:8px}
.rolegrid{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.rk{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--border);border-radius:9px;padding:7px 11px;background:var(--bg-elev);font-size:.85rem;cursor:pointer}
.rk input{width:15px;height:15px;accent-color:var(--em)}
.inline{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.teamhead{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 16px;background:var(--surface-2);border-bottom:1px solid var(--border)}
.teamhead .tn{font-weight:700} .teamhead .tm{font-size:.78rem;color:var(--muted)}
.addrow{padding:12px 16px;border-top:1px solid var(--border);background:var(--bg-elev)}
.addrow>details>summary{cursor:pointer;font-weight:600;font-size:.85rem;color:var(--em);list-style:none} .addrow>details>summary::-webkit-details-marker{display:none}
[data-theme="dark"] .addrow>details>summary{color:var(--focus)}
.note{font-size:.82rem;color:var(--muted);background:color-mix(in srgb,var(--em) 7%,transparent);border:1px solid color-mix(in srgb,var(--em) 25%,var(--border));border-radius:10px;padding:10px 13px;margin-top:10px}

.inline .input{width:auto;flex:1;min-width:150px}
.inline .btn{flex:none}

/* --- Subscribe / onboard --- */
.badge.trial{color:#2563EB;border-color:#2563EB55} [data-theme="dark"] .badge.trial{color:#60A5FA;border-color:#60A5FA55}
.badge.none{color:var(--muted)}
.cur{font-size:.9rem} .cur b{font-weight:700}
.plans{display:flex;gap:10px;flex-wrap:wrap}
.plan{border:1px solid var(--border);border-radius:11px;padding:11px 13px;background:var(--surface);min-width:150px}
.plan .pn{font-weight:600;font-size:.9rem} .plan .pp{font-size:.82rem;color:var(--muted);margin-top:2px}

/* --- Email (SMTP) settings --- */
.statusline{display:inline-flex;align-items:center;gap:8px;font-size:.84rem;font-weight:600;padding:7px 12px;border-radius:10px;border:1px solid var(--border);margin-bottom:16px}
.statusline.on{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 40%,var(--border));background:color-mix(in srgb,var(--ok) 10%,transparent)}
.statusline.off{color:var(--muted);background:var(--surface-2)}
.card h2{font-size:1rem;font-weight:600;margin:0 0 4px} .card .hn{font-size:.8rem;color:var(--muted);margin:0 0 14px}
.grid3{display:grid;grid-template-columns:1fr 110px 130px;gap:0 14px}
.testrow{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap} .testrow .field{flex:1;min-width:200px;margin:0}
@media (max-width:560px){.grid3{grid-template-columns:1fr}}

/* --- Roles management --- */
.back{font-size:.82rem;color:var(--muted);text-decoration:none} .back:hover{color:var(--em)}
.pgroup{margin:14px 0 4px} .pgroup .pg-h{font-size:.72rem;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);font-weight:700;margin-bottom:8px}
.rk small{color:var(--muted);font-family:"IBM Plex Mono",monospace}
.badge.system{color:#B45309;border-color:#B4530955} [data-theme="dark"] .badge.system{color:#FBBF24;border-color:#FBBF2455}
.foot{display:flex;gap:10px;align-items:center;margin-top:14px}

/* --- Modules admin + System settings --- */
.mrow{display:flex;align-items:center;gap:13px;padding:14px 16px;border-bottom:1px solid var(--border);flex-wrap:wrap} .mrow:last-child{border-bottom:none}
.mmain{flex:1;min-width:160px} .mname{font-weight:600;font-size:.93rem} .mmeta{font-size:.77rem;color:var(--muted)}
.switch{position:relative;width:42px;height:24px;flex:none;display:inline-block} .switch input{opacity:0;width:0;height:0}
.sl{position:absolute;inset:0;background:var(--border);border-radius:999px;transition:.15s;cursor:pointer}
.sl::before{content:"";position:absolute;width:18px;height:18px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.15s}
.switch input:checked+.sl{background:var(--em)} .switch input:checked+.sl::before{transform:translateX(18px)}
.switch input:focus+.sl{box-shadow:0 0 0 3px color-mix(in srgb,var(--em) 25%,transparent)}
.chk{display:inline-flex;align-items:center;gap:7px;font-size:.8rem;color:var(--muted)} .chk input{width:15px;height:15px;accent-color:var(--em)}
.grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 14px} .grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.field .hint{font-size:.76rem;color:var(--muted);margin-top:4px}
@media (max-width:560px){.grid,.grid2{grid-template-columns:1fr}}

/* --- API tokens --- */
.reveal{border:1px solid color-mix(in srgb,var(--ok) 45%,var(--border));background:color-mix(in srgb,var(--ok) 10%,transparent);border-radius:12px;padding:14px;margin-bottom:18px}
.reveal .rt{font-size:.78rem;font-weight:700;color:var(--ok);margin-bottom:8px;letter-spacing:.3px}
.tokenbox{display:flex;gap:8px;align-items:center}
.tokenbox code{flex:1;font-family:"IBM Plex Mono",monospace;font-size:.86rem;background:var(--bg-elev);border:1px solid var(--border);border-radius:8px;padding:9px 11px;overflow:auto;white-space:nowrap}
.trow{display:flex;align-items:center;gap:12px;padding:13px 16px;border-bottom:1px solid var(--border);flex-wrap:wrap} .trow:last-child{border-bottom:none}
.tmain{flex:1;min-width:160px} .tname{font-weight:600;font-size:.92rem} .tmeta{font-size:.77rem;color:var(--muted)}
.pill.mono,.pill.scope{font-family:"IBM Plex Mono",monospace}

/* --- Usage tab --- */
.seclabel{font-size:.72rem;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);margin:22px 0 10px}
.cap{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.capcard{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:14px}
.capk{font-size:.78rem;color:var(--muted)} .capv{font-size:1.5rem;font-weight:700;margin:3px 0 8px}
.caphint{font-size:.78rem;color:var(--muted);margin:8px 0 0}
.bar{height:8px;border-radius:999px;background:var(--track,#2C2825);overflow:hidden}
.bar > span{display:block;height:100%;border-radius:999px;background:var(--em)}
.bar.warn > span{background:var(--warn,#B45309)} .bar.over > span{background:var(--down)}
.acct{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:16px;margin-bottom:14px}
.acct h2{font-size:1rem;font-weight:600;margin:0} .acct .period{font-size:.78rem;color:var(--muted);margin:2px 0 14px}
.metric{margin-bottom:13px} .metric:last-child{margin-bottom:0}
.mhead{display:flex;justify-content:space-between;align-items:baseline;font-size:.86rem;margin-bottom:5px}
.mname{font-weight:500} .mval{color:var(--muted);font-family:"IBM Plex Mono",monospace;font-size:.8rem}
.mval b{color:var(--text);font-weight:600} .mval.over b{color:var(--down)}
.tag{font-size:.68rem;font-weight:600;padding:1px 7px;border-radius:999px;margin-left:6px}
.tag.over{background:color-mix(in srgb,var(--down) 16%,transparent);color:var(--down)}
.tag.unl{background:var(--surface-2);color:var(--muted)}

/* --- Log viewer (errors) + audit chain pill --- */
:root{--crit:#b3261e;--err:#d23b32;--info:#2563EB;--grape:#7C3AED;--note:#E6B142;--star:#F7C948}
[data-theme="dark"]{--crit:#ff6b61;--err:#f0564b;--info:#7AA2F7;--grape:#C9A9FF;--note:#E6B142;--star:#FFD24D}
.logsearch{display:flex;gap:8px;margin-bottom:12px}
.logsearch .input{flex:1}
.sevchips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px}
.sevchip{font-size:.78rem;font-weight:600;color:var(--muted);background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:6px 12px;text-decoration:none}
.sevchip[aria-current]{color:#fff;background:var(--em);border-color:var(--em)}
[data-theme=dark] .sevchip[aria-current]{color:#08120e}
.elist{background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow:hidden}
.erow{border-bottom:1px solid var(--border)} .erow:last-child{border-bottom:none}
.ehead{display:flex;align-items:center;gap:11px;padding:13px 15px;cursor:pointer;list-style:none}
.ehead::-webkit-details-marker{display:none}
.ehead:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.edot{width:9px;height:9px;border-radius:50%;flex:none}
.edot.crit{background:var(--crit)} .edot.err{background:var(--err)} .edot.warn{background:var(--warn)} .edot.info{background:var(--info)}
.emain{flex:1;min-width:0} .etitle{display:block;font-size:.9rem;font-weight:600}
.eref{display:block;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.74rem;color:var(--muted);margin-top:1px}
.etime{font-size:.74rem;color:var(--muted);white-space:nowrap}
.echev{color:var(--muted);transition:transform .15s;flex:none} details[open] > .ehead .echev{transform:rotate(90deg)}
.ebody{padding:0 15px 15px}
.elong{font-size:.86rem;background:var(--bg-elev);border:1px solid var(--border);border-radius:10px;padding:11px 13px;margin-top:4px;color:var(--text)}
.ekv{display:grid;grid-template-columns:130px 1fr;gap:4px 12px;font-size:.82rem;margin-top:12px}
.ekv dt{color:var(--muted)} .ekv dd{font-family:"IBM Plex Mono",ui-monospace,monospace;word-break:break-all}
.chainpill{display:inline-flex;align-items:center;gap:8px;font-size:.82rem;font-weight:600;border-radius:999px;padding:7px 13px;margin:0 0 16px;border:1px solid var(--border)}
.chainpill .cdot{width:9px;height:9px;border-radius:50%}
.chainpill.ok{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 40%,var(--border));background:color-mix(in srgb,var(--ok) 9%,transparent)} .chainpill.ok .cdot{background:var(--ok)}
.chainpill.bad{color:var(--down);border-color:color-mix(in srgb,var(--down) 45%,var(--border));background:color-mix(in srgb,var(--down) 11%,transparent)} .chainpill.bad .cdot{background:var(--down)}

/* --- AI connection tab --- */
.switchrow{display:flex;align-items:center;justify-content:space-between;gap:12px}
.switchrow .lbl{font-weight:600} .switchrow .hint{margin-top:2px}
.keystate{font-size:.74rem;font-weight:600;color:var(--ok);margin-left:8px}

/* --- AI analyze panel --- */
.analyze-bar{display:flex;align-items:center;gap:10px;margin-bottom:16px;flex-wrap:wrap}
.btn-ai{display:inline-flex;align-items:center;gap:8px;font:inherit;font-size:.9rem;font-weight:600;border-radius:10px;padding:10px 16px;cursor:pointer;border:1px solid var(--em);background:var(--em);color:#fff}
.btn-ai svg{width:17px;height:17px}
.ai{background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow:hidden;margin-bottom:18px}
.ai-top{display:flex;align-items:center;gap:9px;padding:14px 16px;border-bottom:1px solid var(--border)}
.ai-spark{width:20px;height:20px;color:var(--em)} [data-theme=dark] .ai-spark{color:var(--focus)}
.ai-top h2{font-size:1rem;font-weight:700;margin:0}
.ai-summary{padding:14px 16px;font-size:.9rem;border-bottom:1px solid var(--border);color:var(--text)}
.finding{display:flex;gap:11px;padding:13px 16px;border-bottom:1px solid var(--border)} .finding:last-of-type{border-bottom:none}
.fbar{width:4px;border-radius:3px;flex:none;align-self:stretch;background:var(--info)}
.fbar.warn{background:var(--warn)} .fbar.info{background:var(--info)} .fbar.ok{background:var(--em)}
.fmain{flex:1;min-width:0}
.ftag{display:inline-block;font-size:.66rem;font-weight:700;letter-spacing:.4px;text-transform:uppercase;padding:1px 7px;border-radius:999px;margin-bottom:5px}
.ftag.pattern{color:var(--warn);background:color-mix(in srgb,var(--warn) 16%,transparent)}
.ftag.anomaly{color:var(--info);background:color-mix(in srgb,var(--info) 16%,transparent)}
.ftag.integrity{color:var(--em);background:color-mix(in srgb,var(--em) 16%,transparent)}
.ftitle{font-size:.92rem;font-weight:600;margin-bottom:3px} .fexp{font-size:.86rem;color:var(--muted);margin:0}
.fview{display:inline-block;margin-top:7px;font-size:.8rem;font-weight:600;color:var(--em);text-decoration:none} [data-theme=dark] .fview{color:var(--focus)}
.disclaim{display:flex;align-items:center;gap:8px;padding:11px 16px;font-size:.82rem;color:var(--muted);background:var(--surface-2);border-top:1px solid var(--border)}
.disclaim svg{width:15px;height:15px;flex:none}
.ai-foot{padding:10px 16px;font-size:.74rem;color:var(--muted);border-top:1px solid var(--border)}

/* --- AI fix review (diff) --- */
.back{font-size:.84rem;color:var(--muted);text-decoration:none;display:inline-block;margin-bottom:10px}
.exp{font-size:.9rem}
.badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.badge{display:inline-flex;align-items:center;gap:6px;font-size:.76rem;font-weight:600;border-radius:999px;padding:5px 11px;border:1px solid var(--border)}
.badge svg{width:14px;height:14px}
.badge.ok{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 40%,var(--border));background:color-mix(in srgb,var(--ok) 9%,transparent)}
.badge.bad{color:var(--down);border-color:color-mix(in srgb,var(--down) 45%,var(--border));background:color-mix(in srgb,var(--down) 11%,transparent)}
.badge.file{color:var(--muted);font-family:"IBM Plex Mono",ui-monospace,monospace}
.difftitle{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.difftitle .f{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.8rem;color:var(--muted)}
.diff{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.8rem;line-height:1.5;background:var(--bg-elev);border:1px solid var(--border);border-radius:10px;overflow:auto}
.dl{display:flex;white-space:pre-wrap;word-break:break-word} .dl .ln{width:42px;text-align:right;padding:1px 10px 1px 0;color:var(--muted);opacity:.6;flex:none;user-select:none} .dl .tx{padding:1px 12px 1px 6px;flex:1}
.dl.add{background:color-mix(in srgb,var(--ok) 14%,transparent);box-shadow:inset 3px 0 var(--ok)} .dl.add .tx::before{content:"+ "}
.dl.del{background:color-mix(in srgb,var(--down) 14%,transparent);box-shadow:inset 3px 0 var(--down)} .dl.del .tx::before{content:"- "}
.dl.ctx .tx::before{content:"  "}
.dl.gap{color:var(--muted);font-style:italic;background:var(--surface-2)}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px;align-items:center}
.actions form{margin:0}
.note{display:flex;gap:9px;font-size:.82rem;color:var(--muted);background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:12px 14px;margin-top:14px} .note svg{width:16px;height:16px;flex:none;margin-top:1px}
.btn-ai.btn-sm{font-size:.82rem;padding:7px 12px} .btn-ai.btn-sm svg{width:15px;height:15px}
.fixform{margin-top:12px}

/* Backups settings */
.warnbox{display:flex;gap:9px;font-size:.82rem;color:var(--text);background:color-mix(in srgb,var(--warn) 12%,transparent);border:1px solid color-mix(in srgb,var(--warn) 40%,var(--border));border-radius:10px;padding:11px 13px;margin-top:6px}
.warnbox svg{width:16px;height:16px;flex:none;margin-top:1px;color:var(--warn)}
.blist{margin-top:4px}
.brow{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--border)}
.brow:last-child{border-bottom:none}
.bmain{flex:1;min-width:0}
.bname{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.82rem;word-break:break-all}
.bmeta{font-size:.75rem;color:var(--muted);margin-top:2px}
.steps{font-size:.86rem;color:var(--muted);line-height:1.7}
.steps code{font-family:"IBM Plex Mono",ui-monospace,monospace;color:var(--text);background:var(--bg-elev);border:1px solid var(--border);border-radius:6px;padding:1px 6px}

/* Security: passkey list + recommended-setup tip */
.klist{margin-top:4px;margin-bottom:14px}
.krow{display:flex;align-items:center;gap:13px;padding:13px 0;border-bottom:1px solid var(--border)}
.krow:last-child{border-bottom:none}
.kicon{width:34px;height:34px;flex:none;border-radius:9px;background:var(--surface-2);display:grid;place-items:center;color:var(--em)}
.kicon svg{width:18px;height:18px}
.kmain{flex:1;min-width:0}
.kname{font-weight:600;font-size:.92rem}
.kmeta{font-size:.78rem;color:var(--muted);margin-top:2px}
.rm{font:inherit;font-size:.8rem;color:var(--muted);background:transparent;border:1px solid var(--border);border-radius:8px;padding:6px 11px;cursor:pointer;transition:border-color .15s,color .15s}
.rm:hover{border-color:color-mix(in srgb,var(--down) 55%,var(--border));color:var(--text)}
.tip{display:flex;gap:11px;font-size:.88rem;color:var(--text);background:color-mix(in srgb,var(--em) 9%,transparent);border:1px solid color-mix(in srgb,var(--em) 30%,var(--border));border-radius:11px;padding:13px 15px}
.tip svg{width:18px;height:18px;flex:none;margin-top:2px;color:var(--em)}
.tip b{font-weight:700}
.tip ul{margin:7px 0 0 0;padding-left:18px}
.tip li{margin:3px 0}

/* ============================================================ *
 * Dashboard shell — left sidebar, pinned profile, responsive   *
 * ============================================================ */
.app{display:flex;min-height:100vh}
.sidebar{width:256px;flex:none;background:var(--surface);border-right:1px solid var(--border);
  display:flex;flex-direction:column;padding:14px 12px;position:sticky;top:0;height:100vh;z-index:30}
.s-brand{display:flex;align-items:center;gap:10px;padding:6px 8px 12px;font-weight:600;font-size:1rem;letter-spacing:.2px}
.s-bname{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s-nav{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:2px}
.s-ghead{font-size:.66rem;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);padding:15px 10px 6px;font-weight:600}
.s-item{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:9px;color:var(--text);
  text-decoration:none;font-size:.9rem;font-weight:500;border:1px solid transparent;transition:background .12s,border-color .12s}
.s-item svg{width:18px;height:18px;opacity:.8;flex:none}
.s-item:hover{background:var(--surface-2)}
.s-item.is-active{background:color-mix(in srgb,var(--em) 12%,transparent);color:var(--em);
  border-color:color-mix(in srgb,var(--em) 35%,var(--border));box-shadow:0 0 16px -7px color-mix(in srgb,var(--em) 60%,transparent)}
.s-item.is-active svg{opacity:1}
.s-item:focus-visible{outline:2px solid var(--em);outline-offset:2px}

.s-foot{border-top:1px solid var(--border);padding-top:10px;margin-top:6px}
.s-profile{position:relative}
.s-pbtn{width:100%;display:flex;align-items:center;gap:10px;padding:8px;border-radius:10px;background:transparent;
  border:none;cursor:pointer;font:inherit;text-align:left;color:var(--text)}
.s-pbtn:hover{background:var(--surface-2)}
.s-pbtn:focus-visible{outline:2px solid var(--em);outline-offset:2px}
.s-av{width:34px;height:34px;border-radius:50%;background:linear-gradient(150deg,var(--em),var(--em-deep));color:#fff;
  display:grid;place-items:center;font-weight:600;font-size:.8rem;flex:none;box-shadow:0 0 16px -5px color-mix(in srgb,var(--em) 60%,transparent)}
.s-who{display:flex;flex-direction:column;min-width:0;flex:1}
.s-name{font-size:.84rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s-sub{font-size:.74rem;color:var(--muted)}
.s-chev{width:15px;height:15px;color:var(--muted);flex:none}
.s-menu{position:absolute;left:6px;right:6px;bottom:60px;background:var(--bg-elev);border:1px solid var(--border);
  border-radius:11px;box-shadow:0 14px 36px -18px rgba(0,0,0,.6);padding:6px;display:none}
.s-menu.open{display:block}
.s-menu form{margin:0}
.s-mi{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border-radius:8px;color:var(--text);
  text-decoration:none;font:inherit;font-size:.9rem;background:none;border:none;cursor:pointer;text-align:left}
.s-mi svg{width:17px;height:17px;opacity:.8;flex:none}
.s-mi:hover{background:var(--surface-2)}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.mainbar{display:flex;align-items:center;gap:10px;padding:12px 22px;border-bottom:1px solid var(--border)}
.mb-spacer{flex:1}
.iconbtn{width:38px;height:38px;border-radius:10px;border:1px solid var(--border);background:var(--surface);
  color:var(--text);display:grid;place-items:center;cursor:pointer;transition:border-color .15s}
.iconbtn svg{width:18px;height:18px}
.iconbtn:hover{border-color:var(--em)}
.iconbtn:focus-visible{outline:2px solid var(--em);outline-offset:2px}
.content{max-width:1120px;margin:0 auto;width:100%;padding:26px 22px 64px}

.only-mobile{display:none}
.scrim{display:none;border:0}
@media (max-width:860px){
  .sidebar{position:fixed;top:0;left:0;height:100vh;transform:translateX(-100%);transition:transform .2s ease;
    box-shadow:0 0 40px -10px rgba(0,0,0,.6)}
  .app.nav-open .sidebar{transform:none}
  .app.nav-open .scrim{display:block;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:25}
  .only-mobile{display:grid}
  .mainbar{padding:10px 14px}
  .content{padding:20px 16px 56px}
}

/* ---- Home dashboard ---- */
.sec-h{font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);font-weight:600;margin:6px 0 12px}
.htiles{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:24px}
.htile{position:relative;overflow:hidden;background:var(--surface);border:1px solid var(--border);border-radius:14px;
  padding:16px 16px 14px;text-decoration:none;color:var(--text);display:block}
.htile::after{content:"";position:absolute;top:-30px;right:-30px;width:80px;height:80px;border-radius:50%;
  background:color-mix(in srgb,var(--em) 45%,transparent);filter:blur(26px);opacity:.5}
.htile .n{font-size:1.6rem;font-weight:700;letter-spacing:-.02em;position:relative}
.htile .k{font-size:.8rem;color:var(--muted);margin-top:2px;position:relative}
a.htile:hover{border-color:var(--em)}
.mods{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:14px;margin-bottom:22px}
.modcard{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:18px;display:flex;flex-direction:column;transition:border-color .15s,box-shadow .15s}
.modcard:hover{border-color:color-mix(in srgb,var(--em) 35%,var(--border));box-shadow:0 0 26px -10px color-mix(in srgb,var(--em) 55%,transparent)}
.modcard .btn{align-self:flex-start}
.mod-ico{width:38px;height:38px;border-radius:10px;background:color-mix(in srgb,var(--em) 12%,transparent);color:var(--em);display:grid;place-items:center;margin-bottom:12px}
.mod-ico svg{width:20px;height:20px}
.modcard h3{font-size:.98rem;font-weight:600;margin:0 0 4px}
.modcard p{font-size:.8rem;color:var(--muted);margin:0 0 14px;line-height:1.45;flex:1}
.mod-badge{align-self:flex-start;font-size:.72rem;font-weight:600;border-radius:8px;padding:6px 11px}
.mod-badge.next{color:var(--em);background:color-mix(in srgb,var(--em) 12%,transparent);border:1px solid color-mix(in srgb,var(--em) 35%,var(--border))}
.mod-badge.soon{color:var(--muted);background:var(--surface-2);border:1px solid var(--border)}
.recent-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:18px}
.r-row{display:flex;align-items:center;gap:12px;padding:9px 0;border-top:1px solid var(--border);font-size:.9rem}
.r-row:first-of-type{border-top:none}
.r-dot{width:8px;height:8px;border-radius:50%;background:var(--em);flex:none;box-shadow:0 0 8px color-mix(in srgb,var(--em) 60%,transparent)}
.r-t{color:var(--muted);font-size:.78rem;margin-left:auto;white-space:nowrap}
@media(max-width:900px){.htiles{grid-template-columns:repeat(2,1fr)}}

/* people-row avatar (visual retrofit v1.00.070) */
.usum .uav{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:600;color:#06140e;flex:none}
.usum .uav.av1{background:#6db59c}.usum .uav.av2{background:#caa45a}.usum .uav.av3{background:#7fa9cf}.usum .uav.av4{background:#c98d8d}.usum .uav.av5{background:#9b8fc0}

/* ===== Toasts (v1.00.078) ===== */
.toasts{position:fixed;top:18px;right:18px;z-index:1000;display:flex;flex-direction:column;
  gap:10px;width:330px;max-width:calc(100vw - 32px);pointer-events:none}
.toast{position:relative;display:flex;gap:11px;align-items:flex-start;pointer-events:auto;
  background:var(--surface);border:1px solid var(--border);border-radius:13px;
  padding:12px 12px 14px;box-shadow:0 16px 40px rgba(0,0,0,.34);overflow:hidden;
  opacity:0;transform:translateY(-8px) scale(.98);transition:opacity .2s ease,transform .2s ease}
.toast.in-view{opacity:1;transform:none}
.toast.leaving{opacity:0;transform:translateY(-8px) scale(.98)}
.toast::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px}
.toast.ok::before{background:var(--ok)}
.toast.dn::before{background:var(--down)}
.toast.wn::before{background:var(--warn)}
.toast.in::before{background:var(--em)}
.toast .tico{flex:none;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;margin-top:1px}
.toast .tico svg{width:15px;height:15px}
.toast.ok .tico{background:rgba(43,187,134,.16);color:var(--ok)}
.toast.dn .tico{background:rgba(240,86,75,.16);color:var(--down)}
.toast.wn .tico{background:rgba(251,191,36,.16);color:var(--warn)}
.toast.in .tico{background:rgba(29,158,117,.16);color:var(--em)}
.toast .tbody{flex:1;min-width:0;padding-right:28px}
.toast .tbody .m{font-size:.88rem;font-weight:500;line-height:1.45}
.toast .tbody .code{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.72rem;color:var(--down);margin-top:3px}
.toast .ttools{position:absolute;top:9px;right:9px;display:flex;gap:2px}
.toast .ttools button{display:grid;place-items:center;width:24px;height:24px;border:0;
  background:none;color:var(--muted);cursor:pointer;border-radius:7px}
.toast .ttools button:hover{background:var(--surface-2);color:var(--text)}
.toast .ttools button:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.toast .ttools svg{width:14px;height:14px}
.toast .tbar{position:absolute;left:4px;right:0;bottom:0;height:2px;background:var(--em);opacity:.55;width:100%}
.toast.dn .tbar{background:var(--down)}
.toast.wn .tbar{background:var(--warn)}
.toast.ok .tbar{background:var(--ok)}
@media (max-width:680px){
  .toasts{top:auto;bottom:16px;left:16px;right:16px;width:auto}
  .toast{transform:translateY(8px) scale(.98)}
  .toast.leaving{transform:translateY(8px) scale(.98)}
}
@media (prefers-reduced-motion:reduce){
  .toast{transition:opacity .15s ease;transform:none}
  .toast.in-view{transform:none}
  .toast.leaving{transform:none}
  .toast .tbar{transition:none !important}
}

/* ===== Notification bell + feed (v1.00.079) ===== */
.nbell{position:relative}
.nbell .iconbtn.has-unread{border-color:var(--em);box-shadow:0 0 0 3px rgba(29,158,117,.16)}
.nbell .ncount{position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;padding:0 5px;
  border-radius:999px;background:var(--em);color:#04140e;font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:.66rem;font-weight:600;line-height:1;display:grid;place-items:center;border:2px solid var(--bg)}
.nbell .ncount[hidden]{display:none}

.ndrop{position:absolute;top:50px;right:0;width:340px;max-width:calc(100vw - 28px);
  background:var(--surface);border:1px solid var(--border);border-radius:15px;
  box-shadow:0 24px 64px rgba(0,0,0,.42);overflow:hidden;z-index:1001}
.ndrop[hidden]{display:none}
.ndrop-h{display:flex;align-items:center;justify-content:space-between;padding:13px 15px;border-bottom:1px solid var(--border)}
.ndrop-h b{font-size:.95rem}
.linkbtn{background:none;border:0;color:var(--em);font-family:inherit;font-size:.78rem;font-weight:600;cursor:pointer;padding:0}
.linkbtn:hover{text-decoration:underline}
.linkbtn:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.nlist{max-height:340px;overflow:auto}
.ndrop-f{padding:11px;text-align:center;border-top:1px solid var(--border)}
.ndrop-f a{color:var(--em);font-size:.82rem;font-weight:600;text-decoration:none}
.ndrop-f a:hover{text-decoration:underline}

.npanel{padding:0}
.nitem{display:flex;gap:11px;padding:12px 15px;border-bottom:1px solid var(--border);position:relative;text-align:left}
.nitem:last-child{border-bottom:0}
.nitem.unread{background:var(--surface-2)}
.nitem.unread::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--em)}
.nitem.read{opacity:.62}
.nitem[role="button"]{cursor:pointer}
.nitem[role="button"]:hover{background:var(--surface-2)}
.nitem[role="button"]:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.nico{flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center}
.nico svg{width:17px;height:17px}
.nico.ok{background:rgba(43,187,134,.16);color:var(--ok)}
.nico.dn{background:rgba(240,86,75,.16);color:var(--down)}
.nico.wn{background:rgba(251,191,36,.16);color:var(--warn)}
.nico.in{background:rgba(29,158,117,.16);color:var(--em)}
.nbody{min-width:0;flex:1}
.nbody .t{font-size:.88rem;font-weight:600;display:flex;align-items:center;gap:7px}
.nbody .ndot{width:7px;height:7px;border-radius:999px;background:var(--em);flex:none}
.nbody .d{font-size:.8rem;color:var(--muted);line-height:1.5;margin-top:2px}
.nbody .code{font-family:"IBM Plex Mono",ui-monospace,monospace;color:var(--down);font-size:.74rem}
.nbody .time{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.68rem;color:var(--muted);margin-top:5px}
.nlink{color:var(--text);text-decoration:none}
.nlink:hover{text-decoration:underline}
.nempty{padding:26px 16px;text-align:center;color:var(--muted);font-size:.85rem}

.pager{display:flex;align-items:center;gap:12px;justify-content:center}
.pbtn{border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:9px;
  padding:7px 14px;font-size:.82rem;font-weight:500;text-decoration:none}
.pbtn:hover{background:var(--surface-2)}
.pbtn.dis{opacity:.4;pointer-events:none}
.pinfo{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.74rem;color:var(--muted)}

@media (max-width:680px){
  .ndrop{position:fixed;top:64px;right:10px;left:10px;width:auto;max-width:none}
}