/* Department panel: the Panel button and drawer on every page, and the panel page itself.
   Copied to docs_site/assets/panel.css by tools/make_docs.py. */

/* ── Panel button (top left, only for department members) ── */
.panel-btn { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 13px 0 10px; border-radius: 999px; border: 1px solid var(--line-2); background: color-mix(in srgb, var(--surface) 85%, transparent); color: var(--fg); font: 600 var(--t-sm)/1 var(--body); cursor: pointer; flex: none; transition: background .2s, border-color .2s, transform .2s; }
.panel-btn:hover { background: var(--surface-2); border-color: color-mix(in srgb, var(--accent) 45%, var(--line-2)); }
.panel-btn:active { transform: scale(.97); }
.panel-btn svg { width: 18px; height: 18px; }
.panel-btn[hidden] { display: none; }
.panel-btn .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--grad); box-shadow: 0 0 10px var(--glow); }
@media (max-width: 760px) { .panel-btn span.l { display: none; } .panel-btn { padding: 0 10px; } }

/* ── drawer ── */
.pd-scrim { position: fixed; inset: 0; z-index: 60; background: rgba(5, 6, 9, .55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); opacity: 0; pointer-events: none; transition: opacity .25s; }
.pd-scrim.open { opacity: 1; pointer-events: auto; }
.pd { position: fixed; z-index: 61; top: 0; bottom: 0; left: 0; width: min(340px, 88vw); display: flex; flex-direction: column; background: color-mix(in srgb, var(--bg-2) 94%, transparent); backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3); border-right: 1px solid var(--line); box-shadow: 30px 0 80px rgba(0,0,0,.45); transform: translateX(-104%); transition: transform .32s cubic-bezier(.2,.8,.2,1); padding: max(14px, env(safe-area-inset-top, 0px)) 14px max(14px, env(safe-area-inset-bottom, 0px)); overflow-y: auto; overscroll-behavior: contain; }
.pd.open { transform: none; }
.pd-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 4px 14px; }
.pd-head b { font: 700 var(--t-lg)/1 var(--display); letter-spacing: -.01em; }
.pd-x { width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--line); background: transparent; cursor: pointer; display: grid; place-items: center; color: var(--fg-2); }
.pd-x:hover { color: var(--fg); background: var(--surface); }
.pd-me { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.pd-me img { width: 40px; height: 40px; border-radius: 50%; background: var(--surface-2); }
.pd-me div { min-width: 0; }
.pd-me b { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-me small { color: var(--fg-3); font-size: var(--t-xs); }
.pd-label { margin: 18px 6px 8px; font: 600 var(--t-xs)/1 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3); }
.pd-dept { flex: none; border-radius: var(--radius); border: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 70%, transparent); margin-bottom: 10px; overflow: hidden; }
.pd-dept > button { all: unset; box-sizing: border-box; width: 100%; display: flex; align-items: center; gap: 11px; padding: 11px 12px; cursor: pointer; }
.pd-dept > button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.pd-dept > button > span:not(.dlogo) { flex: 1; min-width: 0; }
.pd-dept > button > span > b { display: block; font-weight: 600; font-size: var(--t-sm); }
.pd-dept > button svg { width: 16px; height: 16px; color: var(--fg-3); transition: transform .25s; }
.pd-dept.open > button svg { transform: rotate(90deg); }
.pd-dept ul { list-style: none; margin: 0; padding: 0 8px 8px; display: none; }
.pd-dept.open ul { display: block; }
.pd-dept li a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; text-decoration: none; color: var(--fg-2); font-size: var(--t-sm); transition: background .15s, color .15s; }
.pd-dept li a:hover { background: var(--surface-2); color: var(--fg); }
.pd-dept li a[aria-current="page"] { color: var(--fg); background: color-mix(in srgb, var(--d1) 16%, var(--surface-2)); box-shadow: inset 3px 0 0 var(--d1); }
.pd-dept li a svg { width: 17px; height: 17px; flex: none; color: var(--d1); }
.pd-dept li a em { margin-left: auto; font-style: normal; font: 600 11px/1 var(--mono); padding: 3px 6px; border-radius: 6px; background: var(--surface-2); color: var(--fg-2); }
.pd-foot { margin-top: auto; padding-top: 16px; display: flex; gap: 8px; }
.pd-foot a, .pd-foot button { flex: 1; text-align: center; padding: 9px; border-radius: 10px; border: 1px solid var(--line); background: transparent; color: var(--fg-2); font-size: var(--t-sm); text-decoration: none; cursor: pointer; }
.pd-foot a:hover, .pd-foot button:hover { color: var(--fg); background: var(--surface); }
.signin-link { display: inline-flex; align-items: center; gap: 6px; }
.signin-link[hidden] { display: none; }
.signin-link svg { width: 15px; height: 15px; }

/* ── panel page ── */
/* Spawn requests extend the existing department panel; no shell/theme overrides. */
.spawn-summary { display:flex; flex-wrap:wrap; gap:14px 28px; margin-bottom:14px; font-size:var(--t-sm); }
.spawn-summary b { font-variant-numeric:tabular-nums; font-size:var(--t-md); margin-right:5px; }
.spawn-overdue, .spawn-countdown.overdue { color:#ff6b6b; }
.spawn-toolbar { display:grid; grid-template-columns:minmax(180px,220px) minmax(0,1fr) auto; gap:12px; align-items:end; margin:18px 0 14px; }
.spawn-toolbar .field { margin:0; }
.spawn-toolbar .field select,.spawn-toolbar .field input,.spawn-toolbar .btn { height:44px; min-height:44px; box-sizing:border-box; }
.spawn-toolbar .field select { width:100%; appearance:none; -webkit-appearance:none; padding-right:42px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%239e9da8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-position:right 14px center; background-repeat:no-repeat; background-size:16px; }
.spawn-toolbar .btn { font-size:var(--t-sm); padding:10px 16px; justify-content:center; }
#spawnRefresh { min-width:112px; }
.spawn-search { flex:1; min-width:200px; }
.spawn-search > div { display:flex; gap:8px; align-items:stretch; }
.spawn-search input { min-width:0; flex:1; width:100%; }
.spawn-info { margin-bottom:14px; }
.spawn-list { display:grid; grid-template-columns:minmax(0,1fr); gap:14px; align-items:start; }
.spawn-request { overflow:hidden; }
.spawn-top { display:flex; gap:12px; justify-content:space-between; align-items:start; }
.spawn-top > div { min-width:0; }
.spawn-request .spawn-top h3, .spawn-top h3 { margin:0 0 2px; overflow-wrap:anywhere; line-height:1.3; }
.spawn-top small,.spawn-foot small,.spawn-meta small,.spawn-credit { color:var(--fg-3); font-size:var(--t-xs); }
.spawn-team { display:grid; gap:16px; padding:14px 0; }
.spawn-mon { display:grid; grid-template-columns:108px minmax(0,1fr); align-items:center; gap:18px; min-width:0; max-width:100%; }
.spawn-mon + .spawn-mon { padding-top:14px; border-top:1px solid var(--line); }
.spawn-overview { display:grid; grid-template-columns:minmax(180px,.9fr) minmax(0,1.5fr); align-items:center; gap:22px; min-width:0; }
.spawn-identity { min-width:0; }
.spawn-identity > small { margin:5px 0 0 4px; }
.spawn-build { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; align-items:start; min-width:0; }
.spawn-build > div { min-width:0; font-size:15px; line-height:1.5; overflow-wrap:anywhere; }
.spawn-build > div > small { display:block; font-size:11px; color:var(--fg-3); margin-bottom:5px; }
.spawn-mon b { font-size:var(--t-sm); overflow-wrap:anywhere; }
.spawn-mon small { display:block; color:var(--fg-2); font-size:var(--t-xs); line-height:1.35; }
.spawn-name { display:flex; flex-wrap:wrap; align-items:center; gap:2px 4px; line-height:1.3; --name-nudge:-1px; }
/* Raise the icons and tag to the name's visual centre (measured on the rendered glyphs). */
.spawn-detail-mon .spawn-name { --name-nudge:-1.5px; }
.spawn-detail-mon .spawn-untradable { top:.2px; }
.spawn-species { min-width:0; font:750 22px/1.25 var(--display); overflow-wrap:anywhere; }
.spawn-box { position:relative; display:inline-grid; place-items:center; width:64px; height:56px; flex:none; isolation:isolate; }
.spawn-box > .spawn-sprite { position:relative; z-index:1; width:76px; height:63px; margin:0; }
.spawn-ball { position:absolute; display:grid; place-items:center; width:64px; height:64px; opacity:.5; pointer-events:none; }
.spawn-ball .spawn-sprite.item { width:64px; height:64px; }
.spawn-frame { width:108px; height:112px; flex:none; display:grid; place-items:center; overflow:hidden; }
.spawn-sprite.frame { width:auto; height:auto; max-width:104px; max-height:104px; image-rendering:auto; }
.spawn-sprite.frame.box { transform:translateY(-14%); }
.spawn-line { display:flex; flex-wrap:wrap; align-items:center; gap:2px 12px; margin-top:2px; }
.spawn-stats { display:flex !important; gap:10px; font:600 11px/1.35 var(--mono) !important; margin-top:4px; }
.spawn-stats .up { color:#6fcf8e; } .spawn-stats .down { color:#e88a8a; }
.spawn-sprite { width:68px; height:56px; object-fit:contain; image-rendering:pixelated; flex:none; vertical-align:middle; }
.spawn-sprite.item { width:24px; height:24px; }
.spawn-held { display:flex; gap:6px; align-items:center; font-size:15px; line-height:1.4; overflow-wrap:anywhere; }
.spawn-nature { display:inline-flex; align-items:center; gap:6px; font-size:15px; line-height:1.4; color:var(--fg-2); }
.spawn-nature .spawn-sprite.item,.spawn-held .spawn-sprite.item { width:28px; height:28px; flex:0 0 28px; transform:none; filter:none; }
.spawn-shiny { color:#f6c453; font-size:var(--t-xs); font-weight:500; }
.spawn-traits { display:inline-flex; flex-wrap:wrap; gap:3px; align-items:center; margin-left:2px; }
.spawn-trait { transform:translateY(calc(1px + var(--name-nudge, 0px))); width:18px; height:18px; object-fit:contain; display:block; }
.spawn-untradable { display:inline !important; font-size:var(--t-xs) !important; font-weight:600; color:#f08c8c !important; text-shadow:0 0 6px rgba(240,120,120,.45); margin-left:4px; position:relative; top:.7px; }
.spawn-meta { display:flex; flex-wrap:wrap; gap:8px 26px; padding-top:10px; border-top:1px solid var(--line); }
.spawn-meta > div { display:flex; flex-wrap:wrap; align-items:baseline; gap:3px 8px; min-width:0; }
.spawn-meta b,.spawn-meta strong,.spawn-meta small { overflow-wrap:anywhere; }
.spawn-meta small { margin:0; font-size:11px; }
.spawn-who { white-space:normal; min-width:0; overflow-wrap:anywhere; }
.spawn-rank { width:18px; height:18px; object-fit:contain; vertical-align:-3.5px; margin-right:5px; }
.spawn-gender { font-weight:700; }
.spawn-gender.m { color:#7fb2ff; text-shadow:0 0 6px rgba(110,160,255,.5); }
.spawn-gender.f { color:#ff8fc8; text-shadow:0 0 6px rgba(255,130,190,.5); }
.spawn-meta b,.spawn-meta strong { font-size:13px; }
.spawn-countdown { font-variant-numeric:tabular-nums; }
.spawn-reason { white-space:pre-wrap; overflow-wrap:anywhere; font-size:var(--t-sm); color:var(--fg-2); }
.spawn-request .spawn-reason { margin:8px 0 0; font-size:13px; line-height:1.5; }
.spawn-request { padding:16px 20px; }
.spawn-foot { display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between; align-items:center; margin-top:10px; }
.spawn-foot .btn svg { width:14px; height:14px; }
.spawn-foot .btn { min-height:36px; padding:8px 12px; font-size:12px; }
.spawn-foot small { font-size:11px; }
.spawn-pagination { display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin:16px 0; }
#spawnUpdated { margin-left:auto; color:var(--fg-3); }
.spawn-credit a { color:inherit; }
.spawn-detail-mon { display:grid; gap:12px; min-width:0; }
.spawn-detail-mon > div { min-width:0; }
.spawn-detail-header { display:grid; grid-template-columns:120px minmax(0,1fr); align-items:center; gap:22px; }
.spawn-detail-header > div { min-width:0; }
.spawn-detail-header .spawn-frame { width:120px; height:120px; }
.spawn-detail-header .spawn-sprite.frame { max-width:116px; max-height:116px; }
.spawn-detail-header .spawn-species { font-size:26px; }
.spawn-detail-layout { display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); align-items:start; gap:26px; }
.spawn-detail-layout > div { min-width:0; }
.spawn-detail-layout .spawn-build { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 22px; }
.spawn-detail-layout .spawn-overview-ability { grid-column:1/-1; }
.spawn-detail-mon + .spawn-detail-mon { border-top:1px solid var(--line); padding-top:22px; }
.spawn-detail-mon h3 { margin:4px 0; overflow-wrap:anywhere; }
.spawn-detail-mon p { margin:5px 0; font-size:var(--t-sm); color:var(--fg-2); overflow-wrap:anywhere; }
.spawn-copy { margin-top:16px; }
.spawn-moves { list-style:none; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px 16px; margin:14px 0 2px; padding:0; }
.spawn-moves li { display:flex; align-items:center; gap:7px; min-width:0; color:var(--t, var(--fg-2)); font-weight:600; font-size:var(--t-sm); text-shadow:0 0 8px color-mix(in srgb, var(--t, transparent) 45%, transparent); }
.spawn-moves li span { overflow-wrap:anywhere; }
.spawn-moves img, .spawn-moves i { flex:none; width:16px; height:16px; filter:drop-shadow(0 0 4px color-mix(in srgb, var(--t, transparent) 40%, transparent)); }
.spawn-moves i { border-radius:50%; background:var(--surface-2); }
.spawn-stat-grid { display:grid; grid-template-columns:auto repeat(6, minmax(0, 1fr)); gap:6px; align-items:center; margin:4px 0; width:100%; font:500 14px/1 var(--mono); text-align:center; }
.spawn-stat-grid .h { color:var(--fg-3); font-size:12px; letter-spacing:.02em; padding-bottom:5px; }
.spawn-stat-grid .h.up { color:#6fcf8e; }
.spawn-stat-grid .h.down { color:#e88a8a; }
.spawn-stat-grid .l { color:var(--fg-3); font-size:11px; text-align:left; padding-right:6px; }
.spawn-stat-grid .v { position:relative; padding:11px 0; border-radius:7px; background:var(--surface-2); color:var(--fg-2); overflow:hidden; }
.spawn-stat-grid .v.zero { color:var(--fg-3); }
.spawn-stat-grid .v.ev { color:var(--fg); font-weight:700; }
.spawn-stat-grid .v.ev::after { content:""; position:absolute; left:0; bottom:0; height:2px; width:calc(var(--fill) * 100%); background:var(--accent, #7aa2ff); }
.spawn-stat-grid .v.max { color:#f2cf63; font-weight:700; }
.spawn-stat-grid .v.mid { color:var(--fg); }
.spawn-stat-grid .v.none { color:#e88a8a; }
.spawn-detail-mon .spawn-line .spawn-stats { margin:0; }
[data-spawn-request] section > div > small { display:block; color:var(--fg-3); font-size:var(--t-xs); }
.spawn-export,.spawn-history { margin:18px 0; font-size:var(--t-sm); }
.spawn-export summary,.spawn-history summary { cursor:pointer; padding:8px 0; }
.spawn-export pre { white-space:pre-wrap; overflow-wrap:anywhere; max-height:320px; overflow:auto; padding:12px; background:var(--surface-2); border-radius:10px; font-size:12px; }
.spawn-confirm { display:flex; gap:10px; align-items:start; margin:15px 0 12px; font-size:var(--t-sm); line-height:1.5; cursor:pointer; }
.spawn-confirm input { width:18px; height:18px; margin-top:2px; flex:none; }
#spawnReject,#spawnExtend,#spawnDelete { margin-top:24px; padding-top:12px; border-top:1px solid var(--line); }
#spawnReject .btn,#spawnExtend .btn { margin-top:10px; }
.spawn-history li { margin:6px 0; overflow-wrap:anywhere; }
.sheet:has(.spawn-detail-team) { width:min(1060px,calc(100vw - 48px)); max-height:calc(100dvh - 40px); padding:24px; overflow-x:hidden; overscroll-behavior:contain; scrollbar-gutter:stable; }
.sheet:has(.spawn-detail-team) .spawn-sheet-reason { font:400 14px/1.65 var(--mono); color:var(--fg-2); white-space:pre-wrap; overflow-wrap:anywhere; margin:14px 0 6px; }
.sheet:has(.spawn-detail-team) .spawn-sheet-requester { font-size:12px; color:var(--fg-3); margin:0 0 18px; overflow-wrap:anywhere; }
.sheet:has(.spawn-detail-team) .btn { font-size:12px; min-height:34px; padding:8px 12px; max-width:100%; white-space:normal; line-height:1.35; }
.sheet:has(.spawn-detail-team) textarea { min-height:86px; }
body:has(.sheet.open .spawn-detail-team) { overflow:hidden; }
@media(max-width:1000px) { .spawn-overview { grid-template-columns:1fr; gap:10px; } }
@media(max-width:760px) {
  .spawn-toolbar { grid-template-columns:minmax(0,1fr) auto; }
  .spawn-search { grid-column:1/-1; order:3; min-width:0; }
  .spawn-detail-layout { grid-template-columns:minmax(0,1fr); gap:18px; }
}
@media(max-width:800px) { .spawn-list { grid-template-columns:minmax(0,1fr); } }
@media(max-width:600px) {
  .spawn-toolbar { gap:10px; }
  .spawn-search { order:3; flex-basis:100%; }
  .spawn-toolbar select,.spawn-toolbar input,.spawn-toolbar .btn,.spawn-foot .btn { min-height:44px; }
  .spawn-top { flex-wrap:wrap; }
  .spawn-request { padding:14px 16px; }
  .spawn-team { gap:12px; padding:10px 0; }
  .spawn-mon { grid-template-columns:72px minmax(0,1fr); gap:10px; }
  .spawn-mon .spawn-frame { width:72px; height:76px; }
  .spawn-mon .spawn-sprite.frame { max-width:70px; max-height:70px; }
  .spawn-species { font-size:17px; }
  .spawn-box { width:40px; height:34px; }
  .spawn-box > .spawn-sprite { width:40px; height:33px; }
  .spawn-ball,.spawn-ball .spawn-sprite.item { width:36px; height:36px; }
  .spawn-build { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .spawn-mon .spawn-overview-ability { display:none; }
  .spawn-build > div > small { font-size:12px; margin-bottom:2px; }
  .spawn-nature,.spawn-held { font-size:14px; }
  .spawn-summary { gap:12px 18px; }
  .spawn-meta { gap:8px 20px; }
  .spawn-meta > div { flex:1; flex-direction:column; gap:2px; }
  .spawn-meta small { font-size:12px; }
  .spawn-detail-header { grid-template-columns:76px minmax(0,1fr); gap:10px; }
  .spawn-detail-header .spawn-frame { width:76px; height:80px; }
  .spawn-detail-header .spawn-sprite.frame { max-width:76px; max-height:76px; }
  .spawn-detail-header .spawn-species { font-size:21px; }
  .spawn-stat-grid { gap:4px; font-size:13px; }
  .spawn-stat-grid .h { font-size:11px; }
  .spawn-stat-grid .v { padding:9px 0; }
  .sheet:has(.spawn-detail-team) { width:calc(100vw - 20px); padding:16px; max-height:calc(100dvh - 28px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)); }
  .sheet:has(.spawn-detail-team) .btn { min-height:44px; }
  #spawnUpdated { margin-left:0; flex-basis:100%; }
}
.pn { padding-block: 28px 70px; min-height: 70vh; }
.pn-head { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.pn-head h1 { margin: 0; font: 800 clamp(1.5rem, 3.4vw, 2.1rem)/1.1 var(--display); letter-spacing: -.02em; }
.pn-head p { margin: 4px 0 0; color: var(--fg-2); font-size: var(--t-sm); }
.pn-head .grow { flex: 1; min-width: 200px; }
.pn-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 22px; }
.pn-tabs a { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); text-decoration: none; color: var(--fg-2); font: 600 var(--t-sm)/1 var(--body); background: color-mix(in srgb, var(--surface) 70%, transparent); }
.pn-tabs a:hover { color: var(--fg); }
.pn-tabs a[aria-current="page"] { color: #fff; border-color: transparent; background: linear-gradient(120deg, var(--d1), var(--d2)); text-shadow: 0 1px 2px rgba(0,0,0,.35); }


.grid { display: grid; gap: 14px; }
.grid.stats { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin-bottom: 14px; }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid.three { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.card { border-radius: var(--radius); border: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 82%, transparent); padding: 18px; min-width: 0; }
.card h2, .card h3 { margin: 0 0 12px; font: 700 var(--t-md)/1.2 var(--display); }
.card h2 small, .card h3 small { font: 500 var(--t-xs)/1 var(--body); color: var(--fg-3); margin-left: 6px; }
.stat b { display: block; font: 800 2rem/1 var(--display); letter-spacing: -.02em; margin: 6px 0 4px; }
.stat span { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--fg-3); font-weight: 600; }
.stat small { display: block; color: var(--fg-2); font-size: var(--t-sm); }
.meter { height: 9px; border-radius: 99px; background: var(--surface-2); overflow: hidden; margin-top: 10px; position: relative; }
.meter i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: linear-gradient(90deg, var(--d1), var(--d2)); transition: width .8s cubic-bezier(.2,.8,.2,1); }
.meter.bonus i { background: linear-gradient(90deg, #f6c453, #ff9f43); }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 999px; font: 600 12px/1 var(--body); background: var(--surface-2); color: var(--fg-2); white-space: nowrap; }
.chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.chip.good { color: #5fd38d; background: rgba(95, 211, 141, .12); }
.chip.warn { color: #f6c453; background: rgba(246, 196, 83, .12); }
.chip.bad { color: #ff6b6b; background: rgba(255, 107, 107, .12); }
.chip.info { color: #8ab4ff; background: rgba(138, 180, 255, .12); }
.chip.mute { color: var(--fg-3); }
.list { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; gap: 12px; padding: 11px 2px; border-top: 1px solid var(--line); min-width: 0; }
.row:first-child { border-top: 0; }
.row .main { flex: 1; min-width: 0; }
.row .main b { display: block; font-weight: 600; font-size: var(--t-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .main small { color: var(--fg-3); font-size: var(--t-xs); }
.row .num { font: 600 var(--t-sm)/1 var(--mono); color: var(--fg-2); }
.row img.av { width: 30px; height: 30px; border-radius: 50%; background: var(--surface-2); flex: none; }
.row.click { cursor: pointer; border-radius: 10px; padding-inline: 8px; margin-inline: -8px; transition: background .15s; }
.row.click:hover { background: var(--surface-2); }
.empty { color: var(--fg-3); font-size: var(--t-sm); padding: 18px 0; text-align: center; }
.types { display: flex; flex-wrap: wrap; gap: 8px; }

/* forms */
.form { display: grid; gap: 14px; max-width: 760px; }
.form .two { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
@media (max-width: 620px) { .form .two { grid-template-columns: 1fr; } }
.field label { display: block; font: 600 var(--t-sm)/1 var(--body); margin-bottom: 7px; }
.field label small { font-weight: 400; color: var(--fg-3); margin-left: 4px; }
.field input, .field textarea, .field select { width: 100%; padding: 11px 13px; border-radius: 11px; border: 1px solid var(--line-2); background: var(--bg-2); color: var(--fg); font: 400 var(--t-md)/1.4 var(--body); transition: border-color .2s, box-shadow .2s; }
.field textarea { min-height: 120px; resize: vertical; font-family: var(--mono); font-size: var(--t-sm); }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--d1); box-shadow: 0 0 0 3px color-mix(in srgb, var(--d1) 25%, transparent); }
.field .hint { margin-top: 6px; font-size: var(--t-xs); color: var(--fg-3); }
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg button { padding: 9px 14px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--bg-2); cursor: pointer; font: 600 var(--t-sm)/1 var(--body); color: var(--fg-2); transition: all .15s; }
.seg button:hover { color: var(--fg); }
.seg button[aria-pressed="true"] { color: #fff; border-color: transparent; background: linear-gradient(120deg, var(--d1), var(--d2)); text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 18px; border-radius: 11px; border: 1px solid var(--line-2); background: var(--surface-2); color: var(--fg); font: 600 var(--t-sm)/1 var(--body); cursor: pointer; text-decoration: none; transition: transform .15s, filter .15s, background .15s; }
.btn:hover { filter: brightness(1.1); }
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .5; cursor: not-allowed; filter: none; }
.btn.primary { border-color: transparent; color: #fff; background: linear-gradient(120deg, var(--d1), var(--d2)); text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.btn.good { border-color: transparent; background: #2f9e62; color: #fff; }
.btn.bad { border-color: transparent; background: #c94848; color: #fff; }
.btn.ghost { background: transparent; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.note { padding: 12px 14px; border-radius: 12px; font-size: var(--t-sm); border: 1px solid var(--line); background: var(--surface-2); color: var(--fg-2); }
.note.good { border-color: rgba(95, 211, 141, .35); background: rgba(95, 211, 141, .08); color: #bdf0d1; }
.note.bad { border-color: rgba(255, 107, 107, .35); background: rgba(255, 107, 107, .08); color: #ffc9c9; }
.note.warn { border-color: rgba(246, 196, 83, .35); background: rgba(246, 196, 83, .08); color: #fbe3a8; }
.note { white-space: pre-line; }
.fix { display: grid; gap: 8px; }
.fix label { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--bg-2); border: 1px solid var(--line); font-size: var(--t-sm); flex-wrap: wrap; }
.fix code { font-family: var(--mono); }
.fix .arrow { color: var(--fg-3); }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tags button[aria-pressed="true"] { color: #fff; border-color: transparent; background: linear-gradient(120deg, var(--d1), var(--d2)); }
.tags button.sug { border-style: dashed; border-color: var(--d1); }

/* sign-in screen */
.gate { max-width: 520px; margin: 6vh auto; text-align: center; padding: 34px 26px; }
.gate img.logo { width: 76px; height: 76px; border-radius: 50%; margin-bottom: 14px; box-shadow: 0 0 0 4px var(--surface-2), 0 18px 50px -12px var(--glow); }
.gate h1 { margin: 0 0 8px; font: 800 1.8rem/1.15 var(--display); }
.gate p { color: var(--fg-2); margin: 0 0 22px; }
.btn.discord { background: #5865f2; border-color: transparent; color: #fff; padding: 13px 22px; font-size: var(--t-md); }
.btn.discord svg { width: 22px; height: 22px; }

/* report detail sheet */
.sheet-scrim { position: fixed; inset: 0; z-index: 50; background: rgba(5, 6, 9, .6); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); display: none; }
.sheet-scrim.open { display: block; }
.sheet { position: fixed; z-index: 51; top: 50%; left: 50%; width: min(720px, calc(100vw - 24px)); max-height: calc(100dvh - 40px); overflow-y: auto; transform: translate(-50%, -48%); opacity: 0; pointer-events: none; transition: opacity .2s, transform .25s; border-radius: 18px; border: 1px solid var(--line-2); background: var(--bg-2); padding: 22px; box-shadow: 0 40px 120px rgba(0,0,0,.6); }
.sheet.open { opacity: 1; transform: translate(-50%, -50%); pointer-events: auto; }
.sheet h2 { margin: 0 0 6px; font: 700 var(--t-lg)/1.25 var(--display); padding-right: 40px; }
.spawn-sheet-department { margin:0 0 10px; font-size:var(--t-sm); color:var(--fg-2); }
.spawn-approved { overflow-wrap:anywhere; }
.sheet .meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; color: var(--fg-3); font-size: var(--t-sm); margin-bottom: 14px; }
.sheet .desc { white-space: pre-wrap; padding: 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); font-size: var(--t-sm); max-height: 260px; overflow-y: auto; margin-bottom: 18px; word-break: break-word; }
.sheet .pd-x { position: absolute; top: 16px; right: 16px; }
.sheet section { margin-top: 16px; }
.sheet section > b { display: block; font-size: var(--t-sm); margin-bottom: 8px; }

.toast { position: fixed; z-index: 70; left: 50%; bottom: max(22px, env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 30px); opacity: 0; padding: 12px 18px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line-2); box-shadow: 0 18px 50px rgba(0,0,0,.5); font-size: var(--t-sm); transition: all .3s; pointer-events: none; max-width: calc(100vw - 32px); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.skel { border-radius: 10px; background: linear-gradient(90deg, var(--surface) 0%, var(--surface-2) 50%, var(--surface) 100%); background-size: 200% 100%; animation: skel 1.2s linear infinite; }
@keyframes skel { to { background-position: -200% 0; } }
table.roster { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
table.roster th { text-align: left; font: 600 var(--t-xs)/1 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); padding: 0 8px 10px; }
table.roster td { padding: 10px 8px; border-top: 1px solid var(--line); vertical-align: middle; }
table.roster .who { display: flex; align-items: center; gap: 10px; font-weight: 600; white-space: nowrap; }
table.roster .who img { width: 28px; height: 28px; border-radius: 50%; background: var(--surface-2); }
table.roster .meter { margin: 0; min-width: 90px; }
.scroll-x { overflow-x: auto; }
@media (max-width: 620px) {
  .grid.stats { grid-template-columns: 1fr 1fr; gap: 10px; }
  .grid.stats .card { padding: 14px; }
  .stat b { font-size: 1.6rem; }
  .row > .chip:first-child { min-width: 0; }
  .list .row > .num { display: none; }
}

/* ── wk_ emojis, LP, severities ── */
img.wk { width: 18px; height: 18px; flex: none; vertical-align: -4px; margin-right: 6px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); }
img.wk.xs { width: 14px; height: 14px; margin-right: 4px; vertical-align: -2px; }
.card h2 img.wk, .stat > span img.wk { width: 20px; height: 20px; margin-right: 8px; vertical-align: -4px; }
.stat > span { display: inline-flex; align-items: center; }
.of { display: inline; font-size: 1rem; color: var(--fg-3); font-weight: 600; }
.dim { color: var(--fg-3); }
.lp { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; vertical-align: middle; }
.lp img { width: 1.05em; height: 1.05em; }
.stat .lp img { width: 26px; height: 26px; }
.stat small .lp img { width: 15px; height: 15px; }
.sev { --sc: #8d9ab5; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 4px 10px 4px 6px; min-width: 96px; border-radius: 999px; font: 700 12px/1 var(--body); white-space: nowrap; color: color-mix(in srgb, var(--sc) 80%, #fff); background: color-mix(in srgb, var(--sc) 15%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sc) 40%, transparent); }
.sev img { width: 16px; height: 16px; }
.row .main small .sev { min-width: 0; padding: 2px 8px 2px 4px; font-size: 11px; vertical-align: 1px; }
.row .main small .sev img { width: 13px; height: 13px; }
.row .main small { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 4px; }
.tchip { display: inline-flex; align-items: center; gap: 0; padding: 7px 12px 7px 9px; border-radius: 10px; font-size: var(--t-sm); color: var(--fg-2); background: color-mix(in srgb, var(--d1) 9%, var(--surface-2)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--d1) 18%, transparent); white-space: nowrap; }
.tchip b { color: var(--fg); margin-right: 5px; font-family: var(--mono); }
.row > .tchip:first-child { min-width: 118px; }
.mini-types { display: flex; gap: 8px; flex-wrap: wrap; }
.mini-types span { display: inline-flex; align-items: center; font: 600 var(--t-sm)/1 var(--mono); }
.mini-types img.wk { margin-right: 3px; width: 16px; height: 16px; }

/* ── people and ranks ── */
.gt { background: linear-gradient(110deg, var(--rg)); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.who-by { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; min-width: 0; }
.who-by .av { width: 20px; height: 20px; border-radius: 50%; background: var(--surface-2); flex: none; }
.who-by .ri { width: 18px; height: 18px; flex: none; }
.who-by b { font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.who-by.big .av { width: 30px; height: 30px; }
.who-by.big .ri { width: 22px; height: 22px; }
.who-by.big b { font-size: var(--t-md); }
table.roster .who-by .av { width: 28px; height: 28px; }
table.roster .who-by b { font-size: var(--t-sm); }
.rk { display: inline-flex; align-items: center; gap: 7px; font: 800 var(--t-sm)/1 var(--body); white-space: nowrap; }
.rk img { width: 20px; height: 20px; margin: 0; filter: drop-shadow(0 0 6px rgba(255,255,255,.15)); }
.rk.big { font-size: var(--t-md); }
.rk.big img { width: 28px; height: 28px; }
.pn-rank { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.pn-rank small { font: 600 var(--t-xs)/1 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3); }

/* ── department icons: no tile, a soft glow, and a glimmer on hover ── */
.dlogo { position: relative; display: inline-grid; place-items: center; width: 40px; height: 40px; flex: none; isolation:isolate; transition: transform .35s cubic-bezier(.2,.9,.3,1.4); }
/* A bounded radial glow avoids filtered-image tiles flashing during mobile scroll. */
.dlogo::before { content: ""; position: absolute; inset: -32%; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--d1) 28%, transparent), color-mix(in srgb, var(--d2) 12%, transparent) 42%, transparent 72%); opacity: .7; transition: opacity .35s; z-index: 0; pointer-events:none; }
.dlogo img { position: relative; width: 100%; height: 100%; z-index: 1; }
.dlogo::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.85) 50%, transparent 65%) -150% 0 / 250% 100% no-repeat; opacity: 0; }
.dlogo.lg { width: 64px; height: 64px; }
.dlogo:hover, .pd-dept > button:hover .dlogo { transform: scale(1.1); }
.dlogo:hover::before, .pd-dept > button:hover .dlogo::before { opacity: 1; }
.dlogo:hover::after, .pd-dept > button:hover .dlogo::after { opacity: 1; animation: glimmer .9s ease-out; }
/* Touch scrolling must not create a masked shimmer layer or sticky hover animation. */
@media (hover:none), (pointer:coarse) {
  .dlogo, .dlogo:hover, .pd-dept > button:hover .dlogo { transform:none; transition:none; }
  .dlogo::before, .dlogo:hover::before, .pd-dept > button:hover .dlogo::before { opacity:.7; transition:none; }
  .dlogo::after { content:none; animation:none; }
}
@keyframes glimmer { from { background-position: -150% 0; } to { background-position: 250% 0; } }
.dname { background: linear-gradient(110deg, var(--d1), var(--d2)); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.pn-head h1.dname { padding-bottom: .08em; }
.pd-dept > button > span:not(.dlogo) { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.pd-dept > button .rk { font-size: 12px; }
.pd-dept > button .rk img { width: 16px; height: 16px; }
.pd-empty { margin: 16px 6px; color: var(--fg-3); font-size: var(--t-sm); }
.pd-me small { display: inline-flex; align-items: center; }
.pd-dept li a img.wk { margin-right: 0; }

/* ── gradients start at the border edge, so nothing bleeds in at the sides ── */
.pn-tabs a, .seg button, .btn, .tags button, .panel-btn, .signin-btn, .rk, .meter i { background-origin: border-box; }
.pn-tabs a { display: inline-flex; align-items: center; }
.pn-tabs a img.wk { width: 17px; height: 17px; }
.btn img.wk { margin-right: 0; }
.btn.sm { padding: 7px 11px; }
.seg button { display: inline-flex; align-items: center; }

/* ── top-left sign-in ── */

/* ── severity buttons and tags, with descriptions on hover ── */
.seg.sevs button { --sc: #8d9ab5; gap: 7px; position: relative; border-color: color-mix(in srgb, var(--sc) 45%, var(--line-2)); color: color-mix(in srgb, var(--sc) 75%, #fff); }
.seg.sevs button img { width: 18px; height: 18px; }
.seg.sevs button em { font-style: normal; opacity: .75; font-size: 12px; }
.seg.sevs button em .lp img { width: 14px; height: 14px; }
.seg.sevs button:hover { background: color-mix(in srgb, var(--sc) 12%, var(--bg-2)); }
.seg.sevs button[aria-pressed="true"] { color: #fff; background: linear-gradient(120deg, color-mix(in srgb, var(--sc) 85%, #000), var(--sc)); text-shadow: 0 1px 2px rgba(0,0,0,.45); }
.tags button { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px 7px 9px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--bg-2); cursor: pointer; font-size: 13px; color: var(--fg-2); transition: border-color .15s, color .15s; }
.tags button:hover { color: var(--fg); border-color: color-mix(in srgb, var(--d1) 50%, var(--line-2)); }
.tags .te { font-size: 15px; line-height: 1; }
.tip { position: absolute; left: 50%; bottom: calc(100% + 10px); width: max-content; max-width: 280px; transform: translate(-50%, 6px); padding: 10px 12px; border-radius: 12px; background: #0f1014; border: 1px solid var(--line-2); box-shadow: 0 18px 40px rgba(0,0,0,.55); color: var(--fg-2); font: 400 12.5px/1.45 var(--body); text-align: left; white-space: normal; text-shadow: none; opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s; z-index: 5; }
.tip b { display: block; color: var(--fg); font-weight: 700; margin-bottom: 3px; }
.tip::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: #0f1014; }
.tip { display: none; }
.sheet { overflow-x: hidden; }
.sheet-top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: var(--t-sm); }
.sheet .meta .by { display: inline-flex; align-items: center; gap: 8px; color: var(--fg-2); }
.sheet section > b { display: flex; align-items: center; }

/* ── Big event: a living gold gradient with drifting stars ── */
.field label.big-toggle, .big-toggle { display: inline-flex; margin: 0; font-weight: 400; align-items: center; gap: 12px; cursor: pointer; min-height: 44px; user-select: none; }
.big-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.big-toggle .track { display: block; position: relative; width: 58px; height: 30px; flex: none; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--line-2); overflow: hidden; transition: border-color .3s, box-shadow .3s; }
.big-toggle .knob { display: block; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--fg-2); box-shadow: 0 2px 6px rgba(0,0,0,.4); transition: transform .3s cubic-bezier(.3,1.4,.5,1), background .3s; z-index: 2; }
.big-toggle .stars { display: block; position: absolute; inset: 0; opacity: 0; transition: opacity .3s; }
.big-toggle .stars i { position: absolute; left: -10px; width: 6px; height: 6px; background: #fff; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); opacity: 0; animation: star 2.6s linear infinite; animation-delay: calc(var(--i) * -.29s); }
.big-toggle .txt { font: 700 var(--t-md)/1 var(--display); color: var(--fg-2); }
.big-toggle input:checked + .track { border-color: transparent; background: linear-gradient(100deg, #ffcf3f, #ff9a1f, #ffe680, #ffb02e, #ffcf3f); background-size: 300% 100%; animation: gold 3s linear infinite; box-shadow: 0 0 18px -4px #ffb02e; }
.big-toggle input:checked + .track .knob { transform: translateX(28px); background: #fff; }
.big-toggle input:checked + .track .stars { opacity: 1; }
.big-toggle input:checked ~ .txt { background: linear-gradient(100deg, #ffcf3f, #ff9a1f, #ffe680, #ffb02e, #ffcf3f); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; animation: gold 3s linear infinite; }
.big-toggle input:focus-visible + .track { outline: 2px solid #ffcf3f; outline-offset: 2px; }
@keyframes gold { to { background-position: 300% 0; } }
@keyframes star { 0% { transform: translateX(0) scale(.6); opacity: 0; } 15% { opacity: .55; } 70% { opacity: .4; } 100% { transform: translateX(74px) scale(1); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .big-toggle .stars { display: none; } .big-toggle input:checked + .track, .big-toggle input:checked ~ .txt { animation: none; } .dlogo:hover::after { animation: none; } }

/* ── overview tables and profiles ── */
table.roster tr.x { cursor: pointer; transition: background .15s; }
table.roster tr.x:hover, table.roster tr.x[aria-expanded="true"] { background: color-mix(in srgb, var(--d1) 7%, transparent); }
table.roster tr.x:focus-visible { outline: 2px solid var(--d1); outline-offset: -2px; }
table.roster tr.more td { border-top: 0; padding: 0 8px 14px; }
.prof { border-radius: 14px; padding: 16px; background: color-mix(in srgb, var(--bg-2) 80%, transparent); border: 1px solid var(--line); }
.prof-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.kvs { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin-bottom: 12px; }
.kv { padding: 10px 12px; border-radius: 11px; background: var(--surface); border: 1px solid var(--line); min-width: 0; }
.kv small { display: block; font: 600 11px/1.2 var(--body); letter-spacing: .06em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 5px; }
.kv b { font-weight: 600; font-size: var(--t-sm); white-space: normal; }
.hbar { display: grid; grid-template-columns: minmax(90px, 34%) 1fr auto; align-items: center; gap: 10px; padding: 6px 0; font-size: var(--t-sm); text-transform: capitalize; }
.hbar > span { display: flex; align-items: center; min-width: 0; color: var(--fg-2); white-space: nowrap; overflow: hidden; text-transform: none; }
.hbar .meter { margin: 0; }
.hbar b { font: 600 var(--t-sm)/1 var(--mono); }
.grid.tagbars { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 24px; }
.card .hint { margin-top: 10px; font-size: var(--t-xs); color: var(--fg-3); }
@media (max-width: 620px) {
  .pn-rank { align-items: flex-start; }
  .dlogo.lg { width: 50px; height: 50px; }
  .row > .tchip:first-child { min-width: 0; }
}
.stat b small.of { display: inline; font-size: 1rem; color: var(--fg-3); }
/* dark rank gradients (Director, Deputy) stay readable on the dark surfaces */
.rk .gt, .who-by .gt { background-image: linear-gradient(90deg, var(--rg)); }
.rk.dk .gt, .who-by.dk .gt { filter: brightness(1.45) saturate(1.1); }
.st { display: inline-flex; align-items: center; gap: 7px; font: 700 var(--t-sm)/1 var(--body); white-space: nowrap; color: var(--fg); }
.st img { width: 20px; height: 20px; }
.st.big { font-size: var(--t-md); }
.st.big img { width: 26px; height: 26px; }
/* last so no later `background` shorthand resets the origin (that tiled the gradient into the border ring) */
.pn-tabs a[aria-current="page"], .seg button[aria-pressed="true"], .seg.sevs button[aria-pressed="true"], .btn.primary, .tags button[aria-pressed="true"], .big-toggle input:checked + .track { border-color: transparent; background-origin: border-box; background-clip: border-box; box-shadow: none; }
.st b { color: var(--fg); }
.ftip { position: fixed; z-index: 90; left: 0; top: 0; width: max-content; max-width: min(280px, calc(100vw - 16px)); padding: 10px 12px; border-radius: 12px; background: #0f1014; border: 1px solid var(--line-2); box-shadow: 0 18px 40px rgba(0,0,0,.55); color: var(--fg-2); font: 400 12.5px/1.45 var(--body); text-align: left; opacity: 0; pointer-events: none; transform: translateY(6px); transition: opacity .15s, transform .15s; }
.ftip.on { opacity: 1; transform: none; }
.ftip b { display: block; color: var(--fg); font-weight: 700; margin-bottom: 3px; }
/* the pointer is a turned square that carries the pill's own outline on its two outer sides */
.ftip::after { content: ""; position: absolute; top: calc(100% - 5px); left: var(--ax, 50%); width: 10px; height: 10px; background: #0f1014; border: 1px solid var(--line-2); border-top: 0; border-left: 0; border-bottom-right-radius: 2px; transform: translateX(-50%) rotate(45deg); }
.ftip.below::after { top: -6px; border: 1px solid var(--line-2); border-right: 0; border-bottom: 0; border-radius: 2px 0 0 0; }
.hbar .te { flex: none; margin-right: 6px; font-size: 15px; line-height: 1; }
.mq { display: block; min-width: 0; overflow: hidden; font-style: normal; }
.mq i { display: inline-block; font-style: normal; white-space: nowrap; }
.mq.run { -webkit-mask: linear-gradient(90deg, #000 85%, transparent); mask: linear-gradient(90deg, #000 85%, transparent); }
.mq.run i { animation: mq 7s ease-in-out infinite; }
.hbar:hover .mq.run { -webkit-mask: none; mask: none; }
@keyframes mq { 0%, 18% { transform: none; } 55%, 72% { transform: translateX(var(--dx)); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .mq.run i { animation: none; } }
/* gradient names: room for glyphs that overhang the text box, so none get clipped */
.gt { display: inline-block; line-height: 1.25; padding: 0 .14em .08em 0; margin-right: -.14em; }
/* "Login with Discord": lifts and catches a sweep of light on hover; its description floats like the tag tips */
.signin-btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 9px; height: 38px; padding: 0 16px 0 13px; border-radius: 12px; background: #5865f2; color: #fff; text-decoration: none; font: 700 var(--t-sm)/1 var(--body); white-space: nowrap; flex: none; transition: transform .2s cubic-bezier(.3,1.4,.5,1), background .2s, box-shadow .2s; }
.signin-btn img, .signin-btn svg { width: 20px; height: 20px; flex: none; transition: transform .3s cubic-bezier(.3,1.4,.5,1); }
.signin-btn::before { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent); transform: skewX(-18deg); transition: left .55s ease; pointer-events: none; }
.signin-btn:hover, .signin-btn:focus-visible { background: #4752c4; transform: translateY(-2px); box-shadow: 0 8px 22px -10px rgba(0,0,0,.7); }
.signin-btn:hover::before, .signin-btn:focus-visible::before { left: 120%; }
.signin-btn:hover img, .signin-btn:hover svg { transform: rotate(-10deg) scale(1.12); }
.signin-btn:active { transform: translateY(0) scale(.97); }
.signin-btn[hidden] { display: none; }
@media (max-width: 420px) { .signin-btn { padding: 0 12px 0 10px; gap: 7px; font-size: 12.5px; } }
/* Members card: one rank per line with its emoji */
.stat small .rl { display: flex; align-items: center; gap: 6px; line-height: 1.5; text-transform: none; letter-spacing: 0; font-size: var(--t-sm); font-weight: 400; color: var(--fg-2); }
.stat small .rl img { width: 16px; height: 16px; object-fit: contain; }
.stat small .rl b { font-weight: 600; color: var(--fg); }
/* me card: Discord nameplate behind it, avatar decoration over the avatar */
.pd-me { position: relative; overflow: hidden; flex: none; isolation: isolate; -webkit-mask-image: -webkit-radial-gradient(white, black); }
.pd-me.rp { transform: translateZ(0); }
.pd-me .np-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: right center; z-index: 0; pointer-events: none; border-radius: 0; background: none; -webkit-mask-image: linear-gradient(90deg, transparent 8%, rgba(0,0,0,.45) 42%, #000 85%); mask-image: linear-gradient(90deg, transparent 8%, rgba(0,0,0,.45) 42%, #000 85%); }
.pd-me.np { background: linear-gradient(90deg, #0c0c0e 0%, #0c0c0e 35%, #050506 100%); border-color: rgba(255,255,255,.09); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 10px 28px -12px rgba(0,0,0,.8); padding: 8px 14px; }
.pd-me.np > :not(.np-bg) { position: relative; z-index: 1; }
.pd-me.np b, .pd-me.np small { color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .55); }
.pd-me.np::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.04); background: linear-gradient(180deg, rgba(255,255,255,.035), transparent 45%); }
.pd-me .av-wrap { position: relative; display: block; flex: none; width: 40px; height: 40px; }
.pd-me .av-wrap .av { position: absolute; inset: 0; box-shadow: 0 0 0 1px rgba(255,255,255,.07); display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: 50%; }
.pd-me .av-wrap .deco { position: absolute; left: 50%; top: 50%; display: block; width: 120%; height: 120%; max-width: none; transform: translate(-50%, -50%); border-radius: 0; background: none; pointer-events: none; }
/* member profiles: keep the open profile inside the screen instead of the wide table */
.scroll-x { container-type: inline-size; }
.prof { position: sticky; left: 8px; box-sizing: border-box; max-width: calc(100cqw - 16px); }
@media (max-width: 620px) {
  .kvs { grid-template-columns: 1fr; }
  .types { flex-direction: column; align-items: stretch; }
  .types .tchip { white-space: normal; }
  .prof-head { flex-direction: column; align-items: flex-start; }
  .prof .list .row { flex-wrap: wrap; }
}
/* me card: the Pochita Root icon glows and breathes; hovering the card scales it with the department icons' glimmer */
.pd-me .root-ic { position: relative; display: inline-grid; place-items: center; width: 24px; height: 24px; margin-right: 10px; flex: none; transition: transform .35s cubic-bezier(.2,.9,.3,1.4); }
.pd-me .root-ic img.wk { position: relative; z-index: 1; width: 100%; height: 100%; margin: 0; border-radius: 0; background: none; animation: root-pulse 2.6s ease-in-out infinite; }
.pd-me .root-ic::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.95) 50%, transparent 65%) -150% 0 / 250% 100% no-repeat; opacity: 0; }
.pd-me:hover .root-ic { transform: scale(1.25); }
.pd-me .root-ic::after { opacity: 1; animation: root-shine 3s ease-in-out infinite; }
.pd-me:hover .root-ic::after { animation: glimmer .9s ease-out, root-shine 3s ease-in-out .9s infinite; }
@keyframes root-shine { 0%, 60% { background-position: -150% 0; } 85%, 100% { background-position: 250% 0; } }
@keyframes root-pulse { 0%, 100% { filter: drop-shadow(0 0 1px rgba(255,255,255,.1)); } 50% { filter: drop-shadow(0 0 2px rgba(255,255,255,.2)); } }
@media (prefers-reduced-motion: reduce) { .pd-me .root-ic img.wk, .pd-me .root-ic::after, .pd-me:hover .root-ic::after { animation: none; } }
/* the Pochita Root text on the me card in the Pochita gradient, lifted so it reads on dark nameplates */
.pd-me .root-t { position: relative; display: inline-block; isolation: isolate; font-size: 14.5px; font-weight: 600; text-shadow: none; }
.pd-me .root-t .gt { position: relative; z-index: 1; background-image: linear-gradient(90deg, var(--g1) 0%, var(--g2) 30%, #fff 50%, var(--g2) 70%, var(--g1) 100%); background-size: 200% 100%; text-shadow: none; animation: root-flow 3s linear infinite; }
.pd-me .root-t::before { content: attr(data-t); position: absolute; left: 0; top: 0; z-index: 0; padding: 0 .14em .08em 0; line-height: 1.25; white-space: nowrap; color: transparent; -webkit-text-fill-color: transparent; background-image: linear-gradient(90deg, var(--g1), var(--g2), var(--g1)); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; filter: blur(4px) brightness(2.2); opacity: .3; pointer-events: none; animation: root-flow 3s linear infinite, root-glow 2.6s ease-in-out infinite; }
@keyframes root-flow { from { background-position: 200% 0; } to { background-position: 0% 0; } }
@keyframes root-glow { 0%, 100% { opacity: .2; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .pd-me .root-t .gt, .pd-me .root-t::before { animation: none; } }

/* the signed-in user's Discord display name style; plain white name when they have none */
.pd-me b.ns { font-size: 1.35em; line-height: 1.15; padding: 1px 2px 0 0; }
.pd-me.np small { line-height: 1.2; }
.pd-me > div { display: flex; flex-direction: column; justify-content: center; align-self: center; gap: 1px; }
.pd-me small { display: flex; align-items: center; line-height: 1; }
/* a department member's rank line: the CommunityDepartments emoji and its red gradient, still (only Pochita Root moves) */
.pd-me .dm-ic { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 9px; flex: none; }
.pd-me .dm-ic img.wk { width: 100%; height: 100%; margin: 0; border-radius: 0; background: none; }
.pd-me .dm-t { font-size: 14.5px; font-weight: 600; }
.pd-me > div.nr { transform: translateY(-3.5px); }  /* the text's ink sits low in its box: lift it so it lines up with the avatar centre */
.pd-me .dm-t .gt { background-image: linear-gradient(90deg, #ff7575, #c23c33); text-shadow: none; }
.pd-me b.ns-solid { color: var(--n1); }
.pd-me b.ns-grad, .pd-me b.ns-prism, .pd-me b.ns-toon { background: linear-gradient(90deg, var(--nc)); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 0 1px rgba(255,255,255,.35)) drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
.pd-me b.ns-toon { background: linear-gradient(180deg, color-mix(in srgb, var(--n1) 70%, #fff), var(--n1)); -webkit-background-clip: text; background-clip: text; -webkit-text-stroke: .6px color-mix(in srgb, var(--n1) 55%, #000); }
.pd-me b.ns-prism { background-size: 200% 100%; animation: ns-prism 3s linear infinite; }
.pd-me b.ns-neon { color: color-mix(in srgb, var(--n1) 35%, #fff); text-shadow: 0 0 4px var(--n1), 0 0 10px var(--n1); }
.pd-me b.ns-pop { color: var(--n1); text-shadow: 2px 2px 0 color-mix(in srgb, var(--n1) 45%, #000); }
@keyframes ns-prism { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .pd-me b.ns-prism { animation: none; } }

/* ── Pochita panel (tools/panel_pochita.js): server settings and the Owner Console ── */
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pd-pc .dlogo.pc img { border-radius: 30%; object-fit: cover; }
/* Pochita's picture has no logo shape to mask the glimmer with, so clip it to the same rounded square */
.pd-pc .dlogo.pc::after { -webkit-mask: none; mask: none; border-radius: 30%; overflow: hidden; }
.pd-pc > button > span > small { color: var(--fg-3); font-size: var(--t-xs); }
.pc-root .pn-head { align-items: center; }
.pc-logo { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 18px; background: var(--grad-soft); border: 1px solid var(--line); flex: none; }
.pc-logo img.wk { width: 40px; height: 40px; margin: 0; }
.pc-h1 { margin: 0; font: 800 clamp(1.5rem, 3.4vw, 2.1rem)/1.1 var(--display); letter-spacing: -.02em; overflow-wrap: anywhere; }
.pc-head p code, .pc-p code, .pc-adv code { font: 500 .85em/1 var(--mono); padding: 2px 5px; border-radius: 5px; background: var(--surface-2); }
.pc-switch { width: min(280px, 100%); }
.gicon { width: 36px; height: 36px; border-radius: 12px; flex: none; object-fit: cover; background: var(--surface-2); }
.gicon.md { width: 46px; height: 46px; border-radius: 14px; }
.gicon.lg { width: 64px; height: 64px; border-radius: 18px; box-shadow: 0 14px 40px -14px var(--glow); }
.gicon.ini { display: inline-grid; place-items: center; font: 700 13px/1 var(--display); color: var(--fg); background: linear-gradient(135deg, color-mix(in srgb, var(--d1) 40%, var(--surface-2)), var(--surface-2)); border: 1px solid var(--line-2); }
.gicon.md.ini { font-size: 15px; }
.gicon.lg.ini { font-size: 22px; }
.pc-p { color: var(--fg-2); font-size: var(--t-sm); margin: 0 0 12px; line-height: 1.55; }
.pc-p.dim { color: var(--fg-3); }
.bad-t { color: #ff8a8a; }
.pc-fresh { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: -8px 0 14px; color: var(--fg-3); font-size: var(--t-xs); }
.pc-fresh > span { display: inline-flex; align-items: center; }
.btn.sm { padding: 7px 12px; font-size: var(--t-xs); border-radius: 9px; }
.btn.sm img.wk { width: 15px; height: 15px; margin-right: 0; }
.pc-tabs { margin-top: -6px; }
.pc-tabs a { display: inline-flex; align-items: center; }
.pc-tabs a img.wk { width: 16px; height: 16px; }
@media (max-width: 620px) {
  .pc-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding-inline: 16px; }
  .pc-tabs::-webkit-scrollbar { display: none; }
  .pc-tabs a { white-space: nowrap; flex: none; }
  .pc-switch { width: 100%; }
}

/* server rows and cards */
.pc-srow { text-decoration: none; color: inherit; }
.pc-srow svg { color: var(--fg-3); flex: none; }
.pc-tools { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.pc-tools .field { margin: 0; }
.pc-search { flex: 1; min-width: 200px; }
.pc-tools select { min-width: 150px; }
.pc-sec { margin-bottom: 24px; }
.pc-sec > h2 { display: flex; align-items: center; margin: 0 0 12px; font: 700 var(--t-md)/1.2 var(--display); }
.pc-sec > h2 small { margin-left: 8px; font: 600 var(--t-xs)/1 var(--mono); padding: 3px 7px; border-radius: 6px; background: var(--surface-2); color: var(--fg-2); }
.pc-ggrid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.pc-gcard { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: var(--radius); border: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 82%, transparent); min-width: 0; transition: border-color .2s, transform .2s; }
.pc-gcard:hover { border-color: var(--line-2); transform: translateY(-1px); }
.pc-gcard[hidden] { display: none; }
.pc-gcard .main { flex: 1; min-width: 0; }
.pc-gcard .main b { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-gcard .main small { color: var(--fg-3); font-size: var(--t-xs); }
.pc-gcard .btn { flex: none; }

/* switches */
.sw { position: relative; display: inline-block; width: 40px; height: 24px; flex: none; }
.sw input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.sw input:disabled { cursor: not-allowed; }
.sw i { position: absolute; inset: 0; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--line-2); transition: background .2s, border-color .2s; }
.sw i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--fg-3); transition: transform .2s cubic-bezier(.2,.9,.3,1.2), background .2s; }
.sw input:checked + i { background: linear-gradient(120deg, var(--d1), var(--d2)) border-box; border-color: transparent; }
.sw input:checked + i::after { transform: translateX(16px); background: #fff; }
.sw input:focus-visible + i { outline: 2px solid var(--accent); outline-offset: 2px; }
.sw input:disabled + i { opacity: .45; }
.pc-mods { display: grid; gap: 4px; }
.pc-mod { display: flex; align-items: flex-start; gap: 12px; padding: 10px 8px; border-radius: 10px; cursor: pointer; }
.pc-mod:hover { background: var(--surface-2); }
.pc-mod b { display: block; font-size: var(--t-sm); font-weight: 600; }
.pc-mod small { display: block; margin-top: 2px; color: var(--fg-3); font-size: var(--t-xs); line-height: 1.45; }
.pc-mod.off b { color: var(--fg-3); }

/* the unsaved-changes bar */
.pc-save { position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; padding: 12px 0 max(12px, env(safe-area-inset-bottom, 0px)); background: color-mix(in srgb, var(--bg-2) 92%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--line-2); box-shadow: 0 -16px 40px -20px rgba(0,0,0,.7); animation: pc-up .25s ease-out; }
.pc-save[hidden] { display: none; }
.pc-save .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pc-save .wrap > span { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-sm); }
.pc-save small { color: var(--fg-3); }
.pc-save .dot { width: 8px; height: 8px; border-radius: 50%; background: #f6c453; box-shadow: 0 0 10px rgba(246,196,83,.6); }
@keyframes pc-up { from { transform: translateY(100%); } }
.pc-root { padding-bottom: 110px; }

/* searchable dropdowns */
.cbx { position: relative; min-width: 0; }
.cbx-in { position: relative; display: flex; align-items: center; }
.cbx-in input { width: 100%; padding: 10px 36px 10px 12px; border-radius: 11px; border: 1px solid var(--line-2); background: var(--bg-2); color: var(--fg); font: 400 var(--t-sm)/1.4 var(--body); transition: border-color .2s, box-shadow .2s; }
.cbx-in input:focus { outline: none; border-color: var(--d1); box-shadow: 0 0 0 3px color-mix(in srgb, var(--d1) 25%, transparent); }
.cbx-tg { position: absolute; right: 6px; width: 26px; height: 26px; display: grid; place-items: center; border: 0; background: none; color: var(--fg-3); cursor: pointer; }
.cbx-tg svg { width: 15px; height: 15px; transform: rotate(90deg); transition: transform .2s; }
.cbx.open .cbx-tg svg { transform: rotate(-90deg); }
.cbx-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.cbx-chips[hidden] { display: none; }
.cbx-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 4px 4px 4px 9px; border-radius: 8px; font: 600 12px/1.2 var(--body); background: var(--surface-2); border: 1px solid var(--line-2); color: var(--fg); }
.cbx-chip.ro { padding-right: 9px; }
.cbx-chip.bad { border-color: rgba(255,107,107,.45); }
.cbx-chip button { width: 20px; height: 20px; display: grid; place-items: center; border: 0; border-radius: 6px; background: none; color: var(--fg-3); cursor: pointer; flex: none; }
.cbx-chip button:hover { background: var(--line); color: var(--fg); }
.cbx-chip button svg { width: 12px; height: 12px; }
.cbx .dot, .cbx-list .dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.cbx-list { position: fixed; z-index: 90; list-style: none; margin: 0; padding: 6px; overflow-y: auto; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line-2); box-shadow: 0 24px 60px -18px rgba(0,0,0,.8); overscroll-behavior: contain; }
.cbx-list li[role="option"] { display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: 8px; cursor: pointer; font-size: var(--t-sm); color: var(--fg-2); }
.cbx-list li .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg); }
.cbx-list li small { color: var(--fg-3); font-size: 11px; white-space: nowrap; }
.cbx-list li em { font-style: normal; font-size: 11px; color: #f6c453; white-space: nowrap; }
.cbx-list li.act, .cbx-list li[role="option"]:hover { background: var(--surface-2); }
.cbx-list li[aria-selected="true"] { background: color-mix(in srgb, var(--d1) 16%, var(--surface-2)); box-shadow: inset 3px 0 0 var(--d1); }
.cbx-list li[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.cbx-list li.bad .t { color: #ffb0b0; }
.cbx-g { padding: 10px 10px 4px; font: 600 10px/1 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3); }
.cbx-empty { padding: 14px 10px; color: var(--fg-3); font-size: var(--t-sm); }

/* roles and levels */
.pc-how { margin-bottom: 14px; }
.pc-how summary, .pc-faq summary { cursor: pointer; font-weight: 600; font-size: var(--t-sm); display: flex; align-items: center; list-style: none; }
.pc-how summary::-webkit-details-marker, .pc-faq summary::-webkit-details-marker { display: none; }
.pc-how summary::after, .pc-faq summary::after { content: "+"; margin-left: auto; color: var(--fg-3); font: 600 18px/1 var(--mono); }
.pc-how[open] summary::after, .pc-faq[open] summary::after { content: "–"; }
.pc-how ol { margin: 12px 0; padding-left: 22px; color: var(--fg-2); font-size: var(--t-sm); line-height: 1.6; }
.pc-stale { margin-bottom: 14px; border-color: rgba(246,196,83,.35); }
.row.gone { opacity: .5; text-decoration: line-through; }
.pc-levels { display: flex; flex-direction: column; }
.pc-level { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 16px; padding: 14px 2px; border-top: 1px solid var(--line); align-items: start; }
.pc-level:first-child { border-top: 0; }
.pc-lv { display: flex; gap: 12px; align-items: flex-start; min-width: 0; }
.pc-lv b { display: block; font-size: var(--t-sm); }
.pc-lv small { color: var(--fg-3); font-size: var(--t-xs); line-height: 1.6; }
.pc-lv small code { font: 500 11px/1 var(--mono); padding: 2px 5px; border-radius: 5px; background: var(--surface-2); color: var(--fg-2); }
.pc-badge { display: inline-grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 10px; font: 800 15px/1 var(--display); color: #fff; background: linear-gradient(135deg, var(--d1), var(--d2)); text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.pc-badge.sm { width: 28px; height: 28px; font-size: 13px; border-radius: 8px; }
.pc-level.ro .pc-badge { opacity: .55; }
.pc-lr { min-width: 0; }
.pc-lerr { color: #ff8a8a; font-size: var(--t-xs); margin-top: 4px; }
.pc-lerr:empty { display: none; }
.pc-none { display: block; margin-top: 6px; font-size: var(--t-xs); }
@media (max-width: 720px) { .pc-level { grid-template-columns: 1fr; gap: 10px; } }

/* logging */
.pc-cats { padding: 6px 18px; }
.pc-cat { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(200px, 300px); gap: 14px; align-items: start; padding: 16px 0; border-top: 1px solid var(--line); }
.pc-cat:first-child { border-top: 0; }
.pc-cat .pc-sw { margin-top: 2px; }
.pc-ci b { display: block; font-size: var(--t-sm); }
.pc-ci > small { color: var(--fg-3); font-size: var(--t-xs); }
.pc-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; margin-top: 8px; font-size: var(--t-xs); color: var(--fg-2); }
.pc-meta > span { display: inline-flex; align-items: center; }
.pc-adv { margin-top: 8px; font-size: var(--t-xs); color: #ffc9c9; padding: 8px 10px; border-radius: 9px; background: rgba(255,107,107,.08); border: 1px solid rgba(255,107,107,.25); }
.pc-cd { display: flex; flex-direction: column; gap: 8px; align-items: stretch; min-width: 0; }
.pc-cd .btn { align-self: flex-end; }
.pc-cat:not(.on) .pc-ci b { color: var(--fg-2); }
@media (max-width: 720px) {
  .pc-cats { padding: 4px 14px; }
  .pc-cat { grid-template-columns: auto minmax(0, 1fr); }
  .pc-cd { grid-column: 1 / -1; }
  .pc-cd .btn { align-self: flex-start; }
}

/* webhooks */
.pc-hooks { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.pc-hook .pc-hh { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.pc-hook .pc-hh b { font: 700 var(--t-md)/1.2 var(--display); overflow-wrap: anywhere; }
.pc-hook .pc-hh .dim { font-size: var(--t-xs); width: 100%; }
.pc-cats-mini { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.pc-cats-mini .tchip { padding: 5px 9px; font-size: var(--t-xs); }
.pc-hook .note { margin-bottom: 12px; font-size: var(--t-xs); }
.pc-hook .kvs { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* checks */
.pc-check { align-items: flex-start; }
.pc-check .main b { white-space: normal; }
.pc-check .main small { display: block; line-height: 1.5; margin-top: 2px; }
.pc-ck { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: none; background: var(--surface-2); }
.pc-ck img.wk { margin: 0; }
.pc-check.bad .pc-ck { background: rgba(255,107,107,.14); }
.pc-check.warn .pc-ck { background: rgba(246,196,83,.14); }
.pc-check.ok .pc-ck { background: rgba(95,211,141,.14); }
.pc-check .btn { flex: none; }
.pc-faq { padding: 12px 0; border-top: 1px solid var(--line); }
.pc-faq:first-of-type { border-top: 0; }
.pc-faq p { margin: 10px 0 0; color: var(--fg-2); font-size: var(--t-sm); line-height: 1.55; }
.pc-wait { animation: pc-blink 1.4s ease-in-out infinite; }
@keyframes pc-blink { 50% { opacity: .55; } }

/* dialog */
.pc-modal-wrap { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: 16px; background: rgba(5, 6, 9, .6); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: pc-fade .15s ease-out; }
.pc-modal { width: min(480px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; padding: 22px; border-radius: 18px; background: var(--bg-2); border: 1px solid var(--line-2); box-shadow: 0 30px 80px -20px rgba(0,0,0,.8); }
.pc-modal h2 { margin: 0 0 10px; font: 700 var(--t-lg)/1.25 var(--display); }
.pc-modal .actions { justify-content: flex-end; margin-top: 18px; }
.pc-warn { margin: 0; padding-left: 20px; color: #fbe3a8; font-size: var(--t-sm); line-height: 1.55; }
.pc-warn li + li { margin-top: 6px; }
@keyframes pc-fade { from { opacity: 0; } }

/* Owner Console */
.pc-owner .pc-logo { background: linear-gradient(135deg, #2a2a31, #111114); }
.pc-table tr.x { cursor: pointer; }
.pc-table tr.x:hover td { background: var(--surface-2); }
.pc-table tr.x:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.pc-table td.num { font: 600 var(--t-sm)/1 var(--mono); color: var(--fg-2); white-space: nowrap; }
.pc-table td.dim { white-space: nowrap; }
.pc-sn { display: flex; align-items: center; gap: 10px; min-width: 200px; }
.pc-sn b { display: block; font-weight: 600; }
.pc-sn small { color: var(--fg-3); font: 500 11px/1.3 var(--mono); }
.pc-sn .gicon { width: 30px; height: 30px; border-radius: 9px; }
.pc-pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 14px; font-size: var(--t-sm); color: var(--fg-2); }
.pc-sections { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.pc-perms { display: flex; flex-wrap: wrap; gap: 6px; }
.pc-spark { display: flex; align-items: flex-end; gap: 2px; height: 70px; padding: 6px 0; margin-bottom: 6px; }
.pc-spark i { flex: 1; min-width: 2px; height: max(3px, var(--h)); border-radius: 3px 3px 0 0; background: linear-gradient(to top, #ff6b6b var(--f), var(--d1) var(--f)); opacity: .85; }
.pc-spark i:hover { opacity: 1; }
.pc-pre { margin: 10px 0 0; padding: 12px; border-radius: 10px; background: var(--bg-2); border: 1px solid var(--line); font: 500 12px/1.5 var(--mono); color: var(--fg-2); overflow-x: auto; max-height: 260px; }
.pc-err .actions { margin-top: 10px; }
@media (max-width: 620px) {
  .pc-hook .kvs { grid-template-columns: 1fr 1fr 1fr; }
  .pc-gcard { flex-wrap: wrap; }
  .pc-gcard .main { flex-basis: calc(100% - 60px); }
  .pc-gcard .btn, .pc-gcard .chip { margin-left: 58px; }
  .pc-fresh { margin-top: -10px; }
}
@media (prefers-reduced-motion: reduce) {
  .pc-save, .pc-modal-wrap, .pc-wait { animation: none; }
  .sw i::after, .pc-gcard { transition: none; }
}