/* perc.lol — flat design layer (v1.79).
   Loaded after app.css. It restyles the shared pieces — shell, sidebar, top bar, cards, buttons,
   forms, tables — so every page picks the new look up without being rewritten. It only uses the
   theme tokens, so Light, Black, Midnight and the rest keep working, and the branding accent
   still comes from --ac. */

:root{
  --bg:#050a18;--panel:#0a1226;--panel-2:#0d0d0f;
  --line:rgba(255,255,255,.07);--line-2:rgba(255,255,255,.12);
  --ink:#ededf0;--ink-2:#d4d4da;--ink-hi:#fafafa;--dim:#a0a0aa;--mute:#85858f;--faint:#7c7c87;
  --surf:#151517;--surf-2:#050a18;--surf-3:#131315;--surf-4:#0e0e10;--top-bg:rgba(10,10,11,.88);
  --label:#b4b4be;--wash:rgba(255,255,255,.045);--wash-2:rgba(255,255,255,.08);
  --f-display:'Inter',system-ui,sans-serif;
  --r:8px;--r-lg:12px;--radius-mark:9px;
}

body{font-size:14px;line-height:1.5}
.lbl{font-family:var(--f-body);font-size:11px;font-weight:600;letter-spacing:.06em;color:var(--mute)}

/* ── shell ── */
.side{width:252px;padding:16px 12px;gap:14px;background:var(--bg);border-right:1px solid var(--line)}
.top{height:56px;padding:0 28px;gap:12px;background:var(--top-bg);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.content{padding:24px 28px 56px}
.brand{padding:2px 4px}
.mark{width:32px;height:32px;font-size:16px;border-radius:var(--radius-mark)}
.brand-name{font-family:var(--f-body);font-size:15px;font-weight:600;letter-spacing:-.01em}
.status-line{font-family:var(--f-body);font-size:11.5px}
.dot.on,.dot.bad{box-shadow:none}

.crumb{font-family:var(--f-body);font-size:12px;letter-spacing:0;text-transform:none;color:var(--mute)}
h1.title{font-family:var(--f-body);font-size:18px;font-weight:600;letter-spacing:-.015em;margin:0}
.top-actions{gap:8px}
.unsaved{font-family:var(--f-body);font-size:12px}

/* ── sidebar ── */
.side #guildSel,.side .field .inp{height:34px;font-size:13px}
.side .field>.lbl{display:none}
.nav{gap:1px}
.nav>.lbl{display:none}
.nav-btn{height:32px;padding:0 10px;gap:10px;border-radius:var(--r);font-size:13.5px;font-weight:500;color:var(--dim);position:relative}
.nav-btn svg{width:16px;height:16px;opacity:.85}
.nav-btn:hover{background:var(--wash);color:var(--ink)}
.nav-btn.active{background:var(--wash-2);border-color:transparent;color:var(--ink-hi)}
.nav-btn.active svg{opacity:1;color:var(--ac-text)}
.nav-btn.locked{opacity:.55}
.pill-count{font-family:var(--f-body);font-weight:600;font-size:11px;padding:1px 7px}
.nav-group{margin-top:6px}
.nav-group-head{height:28px;padding:0 10px;font-family:var(--f-body);font-size:11px;font-weight:600;letter-spacing:.06em;color:var(--mute);border-radius:6px}
.nav-group-head:hover{background:transparent;color:var(--ink)}
.nav-group-head .cnt{margin-left:auto;margin-right:6px;font-weight:500;letter-spacing:0;opacity:.7}
.nav-group-body{gap:1px;padding:2px 0 4px 0}
.nav-quick{margin-top:6px}
.nav-quick .nav-qlbl{display:block;padding:6px 10px 4px;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.nav-search{display:flex;align-items:center;gap:8px;width:100%;height:34px;padding:0 10px;border-radius:var(--r);border:1px solid var(--line-2);background:var(--panel-2);color:var(--mute);font-size:13px;text-align:left}
.nav-search:hover{border-color:var(--ac-edge);color:var(--ink)}
.nav-search svg{flex-shrink:0}
.nav-search span{flex:1}
kbd.k{font-family:var(--f-mono);font-size:10.5px;padding:1px 6px;border-radius:5px;border:1px solid var(--line-2);color:var(--mute);background:var(--wash)}
.me{padding:8px 10px;border-radius:var(--r);background:transparent;border:1px solid var(--line)}
.avatar{width:28px;height:28px}
.icon-btn{border-radius:var(--r)}

/* ── primitives ── */
.card{border-radius:var(--r-lg);padding:18px 20px;background:var(--panel)}
.card.flush{padding:18px 8px 8px}
.h2{font-family:var(--f-body);font-size:15px;font-weight:600;letter-spacing:-.01em}
.grid{gap:14px}
.stack{gap:14px}
.card-head{margin-bottom:12px}
.btn{height:34px;padding:0 14px;border-radius:var(--r);font-weight:500;background:var(--surf);border-color:var(--line-2)}
.btn:hover{border-color:var(--line-2);background:var(--wash-2)}
.btn.p{border-color:transparent;font-weight:600}
.btn.p:hover{filter:brightness(1.08)}
.btn.sm{height:28px;padding:0 10px;font-size:12px;border-radius:6px}
.btn.d{background:transparent}
.btn.d:hover{background:rgba(239,68,68,.1)}
.chip{height:24px;border-radius:6px;font-weight:500;font-size:11.5px}
.field>label,.field>.flabel{color:var(--label);font-size:12.5px}
.inp{height:36px;border-radius:var(--r);background:var(--bg);border-color:var(--line-2)}
.inp:focus{border-color:var(--ac);box-shadow:0 0 0 3px var(--ac-soft)}
textarea.inp{height:auto}
.seg{border-radius:var(--r);background:var(--panel-2);padding:3px}
.seg button{border-radius:6px}
.sw[aria-pressed=true]{border-color:transparent}
.t th{font-family:var(--f-body);font-size:12px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--mute);padding:0 12px 8px}
.t td{padding:11px 12px}
.t tbody tr:hover td{background:var(--wash)}
.stat{gap:8px}
.stat .v{font-family:var(--f-body);font-size:28px;font-weight:600;letter-spacing:-.025em}
.empty{padding:32px 20px}
.banner{border-radius:var(--r)}
.dialog{border-radius:14px}
.toast{border-radius:var(--r);border-color:var(--line-2)}

/* ── command palette ── */
.cmdk-bg{position:fixed;inset:0;z-index:2000;background:rgba(0,0,0,.55);display:flex;align-items:flex-start;justify-content:center;padding:12vh 16px 16px}
.cmdk{width:min(560px,100%);max-height:min(70vh,520px);display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line-2);border-radius:14px;overflow:hidden;box-shadow:0 24px 64px var(--shadow)}
.cmdk-in{display:flex;align-items:center;gap:10px;padding:0 14px;border-bottom:1px solid var(--line)}
.cmdk-in svg{flex-shrink:0;color:var(--mute)}
.cmdk-in input{flex:1;min-width:0;height:48px;background:none;border:0;outline:none;font-size:15px;color:var(--ink)}
.cmdk-list{overflow:auto;padding:6px}
.cmdk-g{padding:8px 10px 4px;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.cmdk-i{display:flex;align-items:center;gap:10px;width:100%;min-height:38px;padding:6px 10px;border-radius:8px;border:0;background:none;color:var(--ink-2);text-align:left;font-size:14px}
.cmdk-i svg{flex-shrink:0;width:16px;height:16px;color:var(--mute)}
.cmdk-i small{margin-left:auto;color:var(--mute);font-size:12px;white-space:nowrap}
.cmdk-i[aria-selected=true]{background:var(--wash-2);color:var(--ink-hi)}
.cmdk-i[aria-selected=true] svg{color:var(--ac-text)}
.cmdk-empty{padding:28px 16px;text-align:center;color:var(--mute);font-size:13px}
.cmdk-foot{display:flex;gap:14px;padding:8px 14px;border-top:1px solid var(--line);font-size:11.5px;color:var(--mute)}

/* ── overview ── */
.ov-hello{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.ov-hello h2{margin:0;font-size:22px;font-weight:600;letter-spacing:-.02em}
.ov-hello p{margin:4px 0 0;color:var(--dim);font-size:13.5px}
.ov-setup{padding:0;overflow:hidden}
.ov-setup-h{display:flex;align-items:center;gap:14px;padding:16px 20px;border-bottom:1px solid var(--line)}
.ov-bar{flex:1;max-width:220px;height:6px;border-radius:999px;background:var(--wash-2);overflow:hidden}
.ov-bar>i{display:block;height:100%;background:var(--ac);border-radius:999px;transition:width .3s}
.ov-step{display:flex;align-items:center;gap:12px;padding:12px 20px;border-top:1px solid var(--line)}
.ov-step:first-of-type{border-top:0}
.ov-step .tick{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--line-2);flex-shrink:0;display:flex;align-items:center;justify-content:center;color:transparent}
.ov-step.done .tick{background:var(--ok);border-color:var(--ok);color:#06210f}
.ov-step.done b{color:var(--mute);font-weight:500;text-decoration:line-through;text-decoration-color:var(--line-2)}
.ov-step b{font-weight:600;font-size:13.5px}
.ov-step p{margin:1px 0 0;font-size:12.5px;color:var(--dim)}
.ov-step .btn{margin-left:auto}
.ov-quick{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.ov-q{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--panel);color:var(--ink);text-align:left;width:100%}
.ov-q:hover{border-color:var(--line-2);background:var(--surf)}
.ov-q svg{flex-shrink:0;color:var(--ac-text)}
.ov-q b{display:block;font-size:13.5px;font-weight:600}
.ov-q span{display:block;font-size:12px;color:var(--mute);margin-top:1px}
.ov-cols{display:grid;grid-template-columns:340px minmax(0,1fr);gap:14px}

/* ── "on this page" jump bar for long settings pages ── */
.jump{position:sticky;top:-24px;z-index:5;display:flex;gap:6px;overflow-x:auto;margin:-24px -28px 16px;padding:10px 28px;background:var(--top-bg);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--line);scrollbar-width:none}
.jump::-webkit-scrollbar{display:none}
.jump button{flex-shrink:0;height:28px;padding:0 11px;border-radius:999px;border:1px solid var(--line-2);background:transparent;color:var(--dim);font-size:12.5px;font-weight:500}
.jump button:hover{color:var(--ink);background:var(--wash)}
.content .card{scroll-margin-top:64px}

/* ── pin button ── */
#pinBtn{width:30px;height:30px;margin-left:-4px;border-radius:6px;color:var(--mute)}
#pinBtn[aria-pressed=true]{color:var(--warn)}
#pinBtn[aria-pressed=true] svg{fill:currentColor}
#cmdkBtn .k{margin-left:2px}

@media (max-width:900px){
  .top{height:56px;padding:0 12px}
  .content{padding:16px 16px 40px;padding-bottom:calc(40px + env(safe-area-inset-bottom))}
  .jump{margin:-16px -16px 14px;padding:10px 16px;top:-16px}
  .ov-cols{grid-template-columns:1fr}
  #cmdkBtn .btn-txt,#cmdkBtn .k{display:none}
}
@media (max-width:560px){.top{height:54px}.ov-quick{grid-template-columns:1fr 1fr}}
@media (prefers-reduced-motion:reduce){.ov-bar>i{transition:none}}

/* Overview numbers stay four across on a normal laptop; they only fold on a narrow screen. */
#ovStats{grid-template-columns:repeat(4,minmax(0,1fr))}
#ovStats .card{padding:14px 16px}
#ovStats .stat .v{font-size:26px}
@media (max-width:760px){#ovStats{grid-template-columns:repeat(2,minmax(0,1fr))}}