/* Astro dashboard skin (2026-10-16). Built on County Control's dashboard (cc-skin.css v3) so
   every PCD sign-in and dashboard reads as one family: graphite ground, filled cards with 10px
   corners, a sidebar with the server switcher on top, Inter for words and JetBrains Mono only
   for commands and ids. Astro's blue is the one accent: the primary action, the current page and
   switches that are on. No glows, gradients or glass. Colour otherwise only where it means
   something: ok, warning and danger. */

@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('fonts/inter-var.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 100 800; font-display: swap; src: url('fonts/jetbrains-mono-var.woff2') format('woff2'); }

:root{
  color-scheme:dark;
  --bg:#0f0f11; --bg-2:#141417; --bg-3:#1a1a1e; --side:#121215;
  --ink:#ececef; --ink-2:#a8a8b0; --ink-3:#85858e;
  --rule:#26262b; --rule-2:#202024; --line-strong:#3a3a41;
  --brand:#ececef; --brand-2:#ffffff; --on-brand:#0f0f11;
  --ok:#3ecf8e; --warn:#f5b740; --bad:#ff6b6b;
  --radius:10px; --radius-sm:7px; --radius-lg:12px;
  --ease:cubic-bezier(.16,1,.3,1); --spring:cubic-bezier(.2,.9,.25,1);
  --shadow:0 1px 2px rgba(0,0,0,.3);
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  /* names the old inline markup still uses */
  --text:var(--ink); --muted:var(--ink-2); --accent:var(--brand); --good:var(--ok);
  --line:var(--rule); --surface:var(--bg-2); --surface-2:var(--bg-3);
}
/* rem layout with a root that grows with the screen, so 1440p and 4K keep 1080p's proportions */
html{font-size:clamp(15px,.32vw + 10.5px,22px);background:var(--bg);accent-color:var(--brand);scrollbar-color:#2c2c31 var(--bg)}
*{box-sizing:border-box}
/* The hidden attribute has to win over inline display:flex, which several rows use. */
[hidden]{display:none!important}
body{margin:0;min-height:100vh;min-height:100dvh;background:var(--bg);color:var(--ink);font:400 1rem/1.55 var(--sans);
  font-optical-sizing:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-feature-settings:'cv11','ss01'}
::selection{background:rgba(255,255,255,.2);color:var(--ink)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:#2c2c31;border:3px solid var(--bg);border-radius:10px}
:focus-visible{outline:2px solid #e4e4e7;outline-offset:2px;border-radius:6px}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;font-weight:650}
h1{font-size:1.5rem;letter-spacing:-.025em;line-height:1.15}
h2{font-size:1rem;letter-spacing:-.01em}
.muted{color:var(--ink-2)}
.small{font-size:.8125rem}
code,kbd,.mono{font-family:var(--mono);font-size:.875em}
a.inline,.banner a,.sub a,.small a{text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:3px}

/* ---------------------------------------------------------------- buttons */
button{font:inherit;color:inherit}
.btn,button.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;border-radius:var(--radius-sm);min-height:36px;padding:0 14px;
  font:500 .875rem/1 var(--sans);background:var(--bg-3);border:1px solid var(--line-strong);color:var(--ink);
  transition:background-color .15s var(--ease),border-color .15s var(--ease),color .15s var(--ease),opacity .15s var(--ease),transform .1s ease-out}
.btn:hover{background:#232328;border-color:#4a4a52}
.btn:active{transform:scale(.97)}
.btn.primary{background:var(--brand);border-color:var(--brand);color:var(--on-brand);font-weight:600}
.btn.primary:hover{background:var(--brand-2);border-color:var(--brand-2)}
.btn.ghost{background:transparent;border-color:transparent;color:var(--ink-2)}
.btn.ghost:hover{background:#1f1f24;color:var(--ink)}
.btn.sm,.btn.small{min-height:32px;padding:0 12px;font-size:.8125rem}
.btn.danger{color:#fca5a5;border-color:rgba(239,68,68,.45);background:rgba(239,68,68,.08)}
.btn[disabled]{opacity:.4;cursor:default}
.linkbtn{background:none;border:0;padding:0;cursor:pointer;font:inherit;font-size:.8125rem;color:var(--ink-2);text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:3px}
.linkbtn:hover{color:var(--ink)}

/* ---------------------------------------------------------------- forms */
input[type=text],input[type=number],input:not([type]),select,textarea{font:inherit;font-size:.875rem;color:var(--ink);background:#1c1c20;
  border:1px solid var(--line-strong);border-radius:var(--radius-sm);min-height:38px;padding:8px 11px;outline:none;
  transition:border-color .15s var(--ease),box-shadow .15s var(--ease)}
textarea{line-height:1.5;resize:vertical}
:is(input,select,textarea):hover{border-color:#4a4a52}
:is(input,select,textarea):focus{border-color:#71717a;box-shadow:0 0 0 3px rgba(255,255,255,.06)}
input[aria-invalid="true"]{border-color:rgba(255,107,107,.55)}
input[type=color]{width:38px;height:38px;padding:3px;border-radius:var(--radius-sm);border:1px solid var(--line-strong);background:#1c1c20;cursor:pointer}
input::placeholder,textarea::placeholder{color:var(--ink-3)}
select{appearance:none;padding-right:30px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2385858e' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center}
.fieldmsg{margin:6px 0 0;font-size:.8125rem;color:var(--bad)}

.toggle{position:relative;width:38px;height:22px;flex:none;border-radius:999px;background:#3a3a41;border:0;padding:0;cursor:pointer;transition:background-color .2s var(--ease)}
.toggle::after{content:'';position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:999px;background:#d4d4d8;
  transition:transform .34s var(--spring),background-color .2s var(--ease)}
.toggle.on{background:var(--brand)}
.toggle.on::after{transform:translateX(16px);background:var(--on-brand)}

/* type-to-search picker */
.combo{position:relative;width:100%;min-width:13rem}
.combo-in{width:100%;padding-right:54px!important}
.combo-x{position:absolute;right:28px;top:50%;transform:translateY(-50%);width:20px;height:20px;border-radius:var(--radius-sm);border:0;background:transparent;color:var(--ink-3);cursor:pointer;padding:0;line-height:1}
.combo-x:hover{color:var(--ink)}
.combo-x[hidden]{display:none}
.combo-caret{position:absolute;right:13px;top:50%;width:6px;height:6px;border-right:1.5px solid var(--ink-3);border-bottom:1.5px solid var(--ink-3);transform:translateY(-70%) rotate(45deg);pointer-events:none}
.combo-list{position:absolute;right:0;top:calc(100% + 6px);z-index:50;width:max(100%,min(22rem,calc(100vw - 32px)));max-height:18rem;overflow:auto;
  border-radius:var(--radius);border:1px solid var(--line-strong);background:#18181c;box-shadow:0 18px 40px -16px rgba(0,0,0,.8);padding:4px;
  transform-origin:top center;transition:opacity .16s var(--ease),transform .22s var(--spring),display .22s allow-discrete,overlay .22s allow-discrete}
.combo-list[hidden]{display:none!important;opacity:0;transform:translateY(-4px) scaleY(.97)}
@starting-style{.combo-list:not([hidden]){opacity:0;transform:translateY(-4px) scaleY(.97)}}
.combo-group{padding:8px 10px 4px;font-size:.75rem;font-weight:500;color:var(--ink-3)}
.combo-opt{padding:8px 10px;border-radius:var(--radius-sm);cursor:pointer;font-size:.875rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.combo-opt.active{background:#26262b}
.combo-opt:active{background:#2e2e34}
.combo-opt.none{color:var(--ink-3)}
.combo-opt[aria-selected="true"]{font-weight:600}
.combo-empty{padding:14px;text-align:center;color:var(--ink-3);font-size:.8125rem}
.combo.multi{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:4px 54px 4px 6px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:#1c1c20;min-height:38px}
.combo.multi:hover{border-color:#4a4a52}
.combo.multi:focus-within{border-color:#71717a;box-shadow:0 0 0 3px rgba(255,255,255,.06)}
.combo.multi .combo-in{flex:1;width:auto;min-width:7rem;min-height:0;padding:5px 4px!important;border:0;background:none;box-shadow:none}
.combo-tags{display:contents}
.tag-pill,.tag{display:inline-flex;align-items:center;gap:4px;font-size:.8125rem;padding:2px 4px 2px 10px;border-radius:999px;background:#232328;border:1px solid var(--line-strong)}
.tag-x,.tag button{background:none;border:0;color:var(--ink-3);padding:2px 6px;line-height:1;border-radius:999px;cursor:pointer;font-size:.75rem}
.tag-x:hover,.tag button:hover{color:var(--bad)}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}

/* ---------------------------------------------------------------- sign-in
   A real sign-in page, same as County Control's: the action on the left, the product on the right. */
.signin{position:fixed;inset:0;display:grid;grid-template-columns:minmax(0,1fr);background:var(--bg)}
@media (min-width:960px){.signin{grid-template-columns:minmax(420px,5fr) 7fr}}
.signin-form{display:flex;flex-direction:column;padding:clamp(24px,4vw,56px);min-height:100%;overflow:auto}
.signin-brand{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:16px;align-self:flex-start}
.signin-body{margin:auto 0;max-width:400px;padding:48px 0}
.signin-body h1{font-size:clamp(28px,2.4vw,38px);line-height:1.15;letter-spacing:-.02em;font-weight:700;margin:0 0 12px}
.signin-lede{color:#a1a1aa;font-size:15.5px;line-height:1.6;margin:0 0 28px}
.signin-discord{display:flex;align-items:center;justify-content:center;gap:10px;height:48px;border-radius:8px;background:#5865f2;color:#fff;font-weight:600;font-size:15px;transition:background-color .15s}
.signin-discord:hover{background:#4752c4}
.signin-discord:focus-visible{outline:2px solid #fff;outline-offset:3px}
.signin-fine{margin:16px 0 0;font-size:13px;line-height:1.5;color:#71717a}
.signin-foot{display:flex;flex-wrap:wrap;gap:6px 20px;font-size:13px}
.signin-foot a{color:#a1a1aa}
.signin-foot a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.signin-side{display:none}
@media (min-width:960px){
  .signin-side{display:flex;flex-direction:column;justify-content:center;gap:28px;padding:clamp(32px,4vw,72px);background:var(--bg-2);border-left:1px solid var(--rule);overflow:hidden}
}
.signin-shot{max-width:36rem}
.signin-points{list-style:none;margin:0;padding:0;display:grid;gap:10px;color:#c4c4ca;font-size:14.5px}
.signin-points li{display:flex;gap:10px;align-items:baseline}
.signin-points li::before{content:'';flex:none;width:6px;height:6px;border-radius:50%;background:var(--ink-3);transform:translateY(-2px)}
@media (min-width:2200px){.signin{zoom:1.3}}

/* a Discord message built in HTML, with made-up names, standing in for a screenshot */
.discord{background:#313338;color:#dbdee1;border-radius:var(--radius-lg);padding:18px 18px 20px;font:400 14.5px/1.4 "gg sans","Noto Sans",var(--sans);
  border:1px solid #1e1f22;box-shadow:0 24px 60px -20px rgba(0,0,0,.7)}
.discord + .discord{margin-top:14px}
.dmsg{display:flex;gap:14px}
.dmsg > .av{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:#0b0b0c;border:1px solid #2c2c31}
.dmsg > .av img{width:55%;height:auto}
.dname{font-weight:600;color:#f2f3f5}
.dname .tag{background:#5865f2;color:#fff;font-size:10px;font-weight:600;padding:1px 4px;border-radius:3px;margin-left:4px;vertical-align:1px;border:0}
.dname time{color:#949ba4;font-size:12px;font-weight:400;margin-left:6px}
.embed{margin-top:6px;background:#2b2d31;border-left:4px solid var(--embed,#5865f2);border-radius:4px;padding:11px 14px 13px;max-width:30rem}
.embed .et{font-weight:600;color:#f2f3f5;margin-bottom:5px}
.embed .ed{color:#dbdee1;font-size:14px}
.embed .ef{display:grid;grid-template-columns:repeat(auto-fit,minmax(7.5rem,1fr));gap:9px 14px;margin-top:9px}
.embed .ef div{font-size:13.5px}
.embed .ef b{display:block;color:#f2f3f5;font-weight:600;font-size:12.5px}
.embed .ef .wide{grid-column:1/-1}
.embed .foot{margin-top:9px;font-size:11.5px;color:#949ba4}
.embed .muted{color:#949ba4}
.discord .mention{background:rgba(88,101,242,.3);color:#c9cdfb;border-radius:3px;padding:0 2px;font-weight:500}

/* ---------------------------------------------------------------- home: servers as rows in one card */
.wrap{max-width:66rem;margin:0 auto;padding:22px clamp(16px,4vw,44px) 120px}
.topline{display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--rule);padding-bottom:14px;margin-bottom:8px}
.brand{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:1rem;letter-spacing:-.01em}
.brand .mark,.signin-brand .mark{width:28px;height:28px;display:grid;place-items:center;border-radius:8px;background:#0b0b0c;border:1px solid #2c2c31}
.brand .mark img,.signin-brand .mark img{width:60%;height:auto}
.topline .grow{flex:1}
.me{display:flex;align-items:center;gap:10px;font-size:.875rem;color:var(--ink-2)}
.me img,.me .ph{flex:none;display:block;width:28px;height:28px;border-radius:50%;background:var(--bg-3)}
.home-hero{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-end;justify-content:space-between;margin:26px 0 30px}
.home-hello h1{font-size:clamp(1.75rem,3vw,2.25rem);font-weight:700;letter-spacing:-.025em;line-height:1.1;margin:0 0 6px}
.home-hello p{margin:0;color:var(--ink-2)}
.home-stats{display:flex;gap:10px;flex-wrap:wrap}
.hstat{border:1px solid var(--rule);background:var(--bg-2);min-width:7.5rem;padding:14px 16px;border-radius:var(--radius);box-shadow:var(--shadow);display:flex;flex-direction:column}
.hstat b{font-size:1.375rem;font-weight:650;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.hstat span{font-size:.8125rem;font-weight:500;color:var(--ink-3)}
.hstat.warn b{color:var(--warn)}
.sgroup{margin:0 0 26px}
.sgroup-head{display:flex;align-items:baseline;gap:10px;margin:0 2px 10px}
.sgroup-head h2{font-size:.875rem;font-weight:600;color:var(--ink-2)}
.sgroup-head span{font-size:.8125rem;color:var(--ink-3)}
.srows{border:1px solid var(--rule);border-radius:var(--radius);background:var(--bg-2);overflow:hidden;box-shadow:var(--shadow)}
.srow{display:flex;align-items:center;gap:14px;width:100%;padding:14px 16px;border:0;border-top:1px solid var(--rule);background:transparent;text-align:left;cursor:pointer;color:inherit;font:inherit;transition:background-color .2s var(--ease)}
.srow:first-child{border-top:0}
.srow:hover{background:var(--bg-3)}
.srow:active{background:#202025;transition-duration:.1s}
.srow .icon{flex:none;border-radius:var(--radius-sm);display:grid;place-items:center;background:var(--bg-3);color:var(--ink-2);font-weight:600;object-fit:cover}
.srow-main{flex:1;min-width:0;display:flex;flex-direction:column}
.srow-main b{font-size:.9375rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.srow-main small{color:var(--ink-3);font-size:.8125rem}
.srow-go{flex:none;color:var(--ink);background:var(--bg-3);border:1px solid var(--line-strong);padding:7px 12px;border-radius:var(--radius-sm);font-weight:500;font-size:.8125rem;transition:border-color .15s var(--ease)}
.srow:hover .srow-go{border-color:#4a4a52}
.srow-go.add{color:var(--ink-2)}
.srows .more{display:block;width:100%;padding:12px 16px;border:0;border-top:1px solid var(--rule);background:transparent;color:var(--ink-2);font-size:.8125rem;cursor:pointer;text-align:left}
.srows .more:hover{color:var(--ink);background:var(--bg-3)}
.addlist-search{width:100%;max-width:22rem;margin:0 0 10px}
.empty{border-radius:var(--radius);border:1px dashed var(--line-strong);color:var(--ink-2);padding:22px 24px;font-size:.9375rem}

/* ---------------------------------------------------------------- shell: sidebar, server switch, nav */
.shell{display:grid;grid-template-columns:15.5rem minmax(0,1fr);min-height:100vh}
.side{position:sticky;top:0;height:100vh;padding:14px 10px;border-right:1px solid var(--rule);background:var(--side);display:flex;flex-direction:column;gap:2px;overflow-y:auto}
.side-brand{display:flex;align-items:center;gap:10px;padding:4px 6px 14px;font-weight:700}
.switch{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border-radius:var(--radius);border:1px solid var(--rule);background:var(--bg-2);text-align:left;margin-bottom:14px;cursor:pointer;
  transition:border-color .2s var(--ease),background-color .2s var(--ease),transform .2s var(--spring)}
.switch:hover{background:var(--bg-3);border-color:var(--line-strong)}
.switch:active{transform:scale(.98);transition-duration:.1s}
.switch .icon{flex:none;border-radius:var(--radius-sm);display:grid;place-items:center;background:var(--bg-3);font-weight:600;font-size:.8125rem}
.switch .t{min-width:0;flex:1;display:block}
.switch .n{display:block;font-weight:600;font-size:.875rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.switch .s{display:block;font-size:.75rem;color:var(--ink-3)}
.navgroup{display:block;padding:12px 10px 4px;font-size:.75rem;font-weight:500;color:var(--ink-3)}
.navgroup:first-of-type{padding-top:0}
.nav{display:flex;align-items:center;gap:10px;width:100%;border-radius:var(--radius-sm);border:0;padding:8px 10px;color:var(--ink-2);font:500 .875rem/1.2 var(--sans);background:none;text-align:left;cursor:pointer;
  transition:color .15s var(--ease),background-color .15s var(--ease)}
.nav svg{flex:none;color:var(--ink-3);transition:color .15s var(--ease)}
.nav:hover{color:var(--ink);background:#1b1b1f}
.nav:active{background:#26262b;transition-duration:.1s}
.nav[aria-current="page"]{color:var(--ink);background:#202025;box-shadow:inset 2px 0 0 var(--brand);font-weight:600}
.nav[aria-current="page"] svg{color:var(--ink)}
.side .foot{margin-top:auto;padding-top:12px;border-top:1px solid var(--rule);display:flex;align-items:center;gap:10px}
.side .foot .me{flex:1;min-width:0;overflow:hidden}
.side .foot .me .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.main{padding:32px clamp(16px,4vw,44px) 140px;max-width:66rem;width:100%;min-width:0}
.page-head{margin-bottom:24px}
.page-head h1{font-size:clamp(1.625rem,2.4vw,2rem);font-weight:700;letter-spacing:-.025em;line-height:1.1;margin:0}
.page-head p{color:var(--ink-2);font-size:.9375rem;line-height:1.55;margin:6px 0 0;max-width:62ch}

/* ---------------------------------------------------------------- cards and rows */
.cols{display:grid;gap:16px;align-items:start}
.card{border-radius:var(--radius);box-shadow:var(--shadow);background:var(--bg-2);border:1px solid var(--rule);padding:22px 24px;min-width:0}
/* Each card fades in, and an animated element becomes its own layer, so later cards paint over
   earlier ones. The card holding an open picker is lifted so its list sits on top. */
.card{position:relative}
.card:focus-within{z-index:5}
.card > h2{font-size:1rem;font-weight:650;letter-spacing:-.01em}
.card > .sub{margin:4px 0 6px;color:var(--ink-2);font-size:.875rem;line-height:1.5}
.row{display:flex;align-items:center;gap:16px;padding:16px 0;border-top:1px solid var(--rule)}
.card > h2 + .row,.card > .sub + .row,.card > .row:first-child{border-top:0}
.row .label{flex:1;min-width:0}
.row .label b{display:block;font-weight:600;font-size:.875rem;color:var(--ink)}
.row .label .small{display:block;color:var(--ink-2);font-size:.84375rem;line-height:1.5;margin-top:2px}
.row .control{flex:0 0 auto;max-width:100%}
.row.stack{display:block}
.row.stack .control{margin-top:10px}
.row.stack .combo{min-width:0}
.rung{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:12px 0;border-top:1px solid var(--rule)}
.ruledrawer{margin:-4px 0 12px;padding:12px 14px;border-radius:var(--radius-sm);background:var(--bg-3);border:1px solid var(--rule)}
.ruledrawer .row{padding:8px 0;border-top:0}
.topic-box{background:var(--bg-3);border:1px solid var(--rule);border-radius:var(--radius);padding:14px;margin-bottom:10px}
.topic-box-row{display:flex;gap:10px;align-items:center}
.topic-box-row .topic-name{flex:1;font-weight:600;min-width:0}
.topic-box .topic-desc{width:100%;margin-top:8px;min-width:0}
.topic-remove{flex:none;width:36px;padding:0}
.topic-overrides{display:flex;gap:8px;flex-wrap:wrap;margin-top:9px}
.topic-overrides .combo{flex:1 1 200px}
.topic-add{width:100%;border-style:dashed;color:var(--ink-2)}
.usage-bar{width:100%;height:6px;border-radius:999px;background:#26262b;overflow:hidden}
.usage-fill{height:100%;border-radius:999px;background:var(--brand)}
.usage-fill.hot{background:var(--warn)}

/* overview tiles */
.stat-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));margin-bottom:16px}
.stat-card{border:1px solid var(--rule);background:var(--bg-2);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px 18px;text-align:left;font:inherit;color:inherit}
button.stat-card{cursor:pointer;transition:border-color .15s var(--ease),transform .1s ease-out}
button.stat-card:hover{border-color:var(--line-strong)}
button.stat-card:active{transform:scale(.99)}
.stat-label{font-size:.8125rem;font-weight:500;color:var(--ink-3)}
.stat-num{font-size:1.5rem;font-weight:650;letter-spacing:-.02em;font-variant-numeric:tabular-nums;margin-top:4px;order:2}
.stat-card{display:flex;flex-direction:column}
.stat-card .stat-label{order:1}
.stat-num.attn{color:var(--warn)}
.feed .row{align-items:flex-start}
.feed .act{display:inline-block;font-size:.75rem;font-weight:600;padding:2px 8px;border-radius:999px;background:#202025;border:1px solid var(--line-strong);color:var(--ink-2);margin-right:6px}

/* banners, pills */
.banner{border-radius:var(--radius);border:1px solid var(--rule);background:var(--bg-2);padding:12px 16px;margin-bottom:16px;font-size:.875rem;line-height:1.5}
.banner.warn{border-color:rgba(245,183,64,.35);background:rgba(245,183,64,.07)}
.banner.bad{border-color:rgba(255,107,107,.35);background:rgba(255,107,107,.07)}
.banner.ok{border-color:rgba(62,207,142,.35);background:rgba(62,207,142,.07)}
.pill{display:inline-block;font-size:.75rem;padding:2px 8px;border-radius:999px;background:#202025;border:1px solid var(--line-strong);color:var(--ink-2)}

/* ---------------------------------------------------------------- save bar, toast */
.savebar{position:fixed;left:50%;bottom:20px;z-index:50;display:flex;align-items:center;gap:14px;padding:10px 10px 10px 18px;max-width:calc(100vw - 24px);
  border-radius:var(--radius-lg);background:#18181c;border:1px solid var(--line-strong);box-shadow:0 18px 40px -16px rgba(0,0,0,.85);
  transform:translate(-50%,calc(100% + 30px));opacity:0;pointer-events:none;
  transition:transform .34s var(--spring),opacity .2s var(--ease),border-color .2s var(--ease)}
.savebar.show{transform:translate(-50%,0);opacity:1;pointer-events:auto}
.savebar b{font-size:.875rem}
.savebar .small{color:var(--ink-2)}
.savebar .small.bad{color:var(--bad)}
.savebar.done{border-color:rgba(62,207,142,.45)}
.savebar.bad{border-color:rgba(255,107,107,.45)}
.toast{position:fixed;right:20px;top:20px;z-index:60;max-width:min(26rem,calc(100vw - 32px));border-radius:var(--radius);background:#18181c;border:1px solid var(--line-strong);
  box-shadow:0 18px 40px -16px rgba(0,0,0,.85);padding:11px 15px;font-size:.875rem;
  opacity:0;transform:translateY(-8px);transition:opacity .22s var(--ease),transform .34s var(--spring)}
.toast.show{opacity:1;transform:none}
.toast.bad{border-color:rgba(255,107,107,.45)}

/* ---------------------------------------------------------------- loading */
.boot{max-width:40rem;margin:0 auto;padding:80px 20px}
.pcd-skel{display:grid;gap:12px}
.pcd-skel .sk{display:block;height:14px;border-radius:var(--radius-sm);background:var(--bg-3);animation:skel 1.4s ease-in-out infinite}
.pcd-skel .sk.t{height:28px;width:45%}
.pcd-skel .sk.s{width:65%}
.pcd-skel .sk-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.pcd-skel .sk-row .sk{height:64px}
.pcd-skel .sk.card{height:180px}
@keyframes skel{50%{opacity:.5}}

/* first paint of a page fades in once; re-renders of the same page do not replay it */
.reveal{animation:rise .3s var(--ease) both}
.settled .reveal{animation:none}
@keyframes rise{from{opacity:0;transform:translateY(6px)}}

/* ---------------------------------------------------------------- small screens */
@media (max-width:860px){
  .shell{grid-template-columns:1fr}
  .side{position:static;height:auto;flex-direction:row;flex-wrap:nowrap;overflow-x:auto;gap:4px;padding:10px 12px;border-right:0;border-bottom:1px solid var(--rule);align-items:center}
  .side-brand,.navgroup,.side .foot{display:none}
  .switch{width:auto;flex:none;margin:0 6px 0 0}
  .switch .s{display:none}
  .nav{width:auto;flex:none;white-space:nowrap}
  .nav[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--brand)}
  .main{padding-top:22px}
  .row{flex-wrap:wrap}
  .row .control{width:100%}
  .row .control .combo{min-width:0}
  .home-hero{align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important}
  .btn:active,.switch:active,button.stat-card:active{transform:none}
  .savebar,.toast{transition:opacity .18s ease!important}
  .savebar{transform:translate(-50%,0)}
  .toast{transform:none}
}
@media (prefers-contrast:more){
  :root{--ink-2:var(--ink);--ink-3:var(--ink);--rule:rgba(255,255,255,.3);--line-strong:rgba(255,255,255,.5)}
}

/* ---------------------------------------------------------------- overview feature grid
   Circle opens its dashboard on every plugin at once. One tile per feature, its state on the
   right, the whole tile a link to its page. */
.feature-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(13rem,1fr));gap:8px;margin-top:14px}
.feature{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:var(--radius-sm);border:1px solid var(--rule);
  background:var(--bg-3);color:var(--ink);font:500 .875rem/1.2 var(--sans);text-align:left;cursor:pointer;
  transition:border-color .15s var(--ease),background-color .15s var(--ease)}
.feature:hover{border-color:var(--line-strong);background:#1e1e23}
.feature:active{background:#232328}
.feature svg{flex:none;color:var(--ink-3)}
.feature .f-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.feature .f-state{flex:none;font-size:.75rem;color:var(--ink-3)}
.feature .f-state.on{color:var(--ok)}
.soon{display:inline-block;margin-left:8px;padding:1px 8px;border-radius:999px;border:1px solid var(--line-strong);
  font-size:.6875rem;font-weight:600;color:var(--ink-2);vertical-align:1px}
.feature .f-state.soon-state{color:var(--ink-2)}