:root {
  color-scheme: light;
  --ink: #262522;
  --muted: #77736c;
  --faint: #a39f98;
  --canvas: #f6f7f8;
  --surface: #ffffff;
  --surface-2: #f1f2f3;
  --line: #dedfe1;
  --sidebar: #222321;
  --sidebar-soft: #2e302d;
  --sidebar-ink: #f4f2eb;
  --cedar: #a85e3b;
  --cedar-deep: #7c4029;
  --green: #39745a;
  --amber: #a46c20;
  --red: #a04a43;
  --blue: #4d668f;
  --plum: #71526f;
  --shadow: 0 1px 1px rgba(38,37,34,.04), 0 14px 35px rgba(38,37,34,.06);
  --glass-bg: rgba(255,255,255,.54);
  --glass-border: rgba(255,255,255,.74);
  --ease: cubic-bezier(.34,1.56,.64,1);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #eeece5;
  --muted: #aaa69f;
  --faint: #807d77;
  --canvas: #191a18;
  --surface: #222320;
  --surface-2: #2b2c28;
  --line: #383a35;
  --sidebar: #111210;
  --sidebar-soft: #22231f;
  --shadow: 0 14px 35px rgba(0,0,0,.2);
  --glass-bg: rgba(61,62,57,.62);
  --glass-border: rgba(255,255,255,.12);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--canvas); color: var(--ink); font-family: "DM Sans", sans-serif; font-size: 15px; -webkit-font-smoothing: antialiased; }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }

.prototype-note { height: 28px; display: grid; place-items: center; background: #9a5437; color: #fff8ef; font-size: 11px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.app-shell { min-height: calc(100vh - 28px); display: grid; grid-template-columns: 260px minmax(0,1fr); }
.sidebar { position: sticky; top: 0; height: calc(100vh - 28px); padding: 25px 18px 18px; background: var(--sidebar); color: var(--sidebar-ink); display: flex; flex-direction: column; z-index: 20; }
.brand { display: flex; align-items: center; gap: 12px; padding: 0 10px 22px; color: inherit; text-decoration: none; font: 600 23px/1 "DM Sans", sans-serif; letter-spacing: -.03em; }
.brand img { width: 36px; height: 36px; object-fit: contain; }
.server-switcher { width: 100%; border: 1px solid rgba(255,255,255,.09); background: rgba(255,255,255,.055); color: inherit; border-radius: 13px; padding: 10px; display: flex; align-items: center; gap: 10px; cursor: pointer; text-align: left; transition: background .2s; }
.server-switcher:hover { background: rgba(255,255,255,.09); }
.server-avatar, .profile-avatar { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 10px; display: grid; place-items: center; background: #915638; color: white; font-weight: 700; }
.server-avatar.violet { background: #685482; }.server-avatar.green { background: #47705b; }
.server-copy, .profile > span:nth-child(2) { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.server-copy strong, .profile strong { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.server-copy small, .profile small { margin-top: 2px; color: #999c95; font-size: 11px; }
.server-switcher svg { width: 18px; fill: none; stroke: #a8aaa4; stroke-width: 2; }
.server-menu { position: absolute; top: 116px; left: 18px; right: 18px; padding: 7px; border-radius: 13px; background: #353733; box-shadow: 0 15px 40px rgba(0,0,0,.35); z-index: 5; }
.server-menu button { width: 100%; display: flex; gap: 10px; align-items: center; border: 0; border-radius: 9px; padding: 8px; background: transparent; color: #fff; cursor: pointer; text-align: left; }
.server-menu button:hover { background: rgba(255,255,255,.08); }
.main-nav { overflow-y: auto; margin: 18px -5px 0; padding: 0 5px; }
.nav-label { margin: 20px 10px 7px; color: #777a73; font-size: 10px; line-height: 1; letter-spacing: .13em; text-transform: uppercase; font-weight: 700; }
.main-nav a { min-height: 39px; margin: 2px 0; padding: 0 10px; border-radius: 9px; color: #aeb0a9; text-decoration: none; display: flex; align-items: center; gap: 11px; font-size: 13px; font-weight: 500; transition: background .15s,color .15s,transform .2s var(--ease); }
.main-nav a:hover { color: #fff; background: rgba(255,255,255,.05); transform: translateX(2px); }
.main-nav a.active { color: #fff; background: #3a342f; box-shadow: inset 3px 0 #b76a44; }
.nav-icon { width: 20px; color: #8d9188; font-size: 17px; text-align: center; }
.main-nav a.active .nav-icon { color: #dda47e; }
.nav-count { margin-left: auto; min-width: 21px; padding: 2px 6px; border-radius: 99px; background: #a75c3a; color: white; font-size: 10px; text-align: center; }
.sidebar-foot { margin-top: auto; padding-top: 15px; border-top: 1px solid rgba(255,255,255,.07); }
.sidebar-close,.sidebar-backdrop{display:none}
.bot-health { display: flex; align-items: center; gap: 9px; margin: 0 8px 13px; }
.bot-health > span { width: 8px; height: 8px; border-radius: 50%; background: #62a97e; box-shadow: 0 0 0 4px rgba(98,169,126,.11); }
.bot-health div { display: flex; flex-direction: column; }.bot-health strong { font-size: 11px; }.bot-health small { margin-top: 2px; color: #7f827b; font-size: 10px; }
.profile { width: 100%; border: 0; border-radius: 11px; background: transparent; color: inherit; padding: 8px; display: flex; align-items: center; gap: 9px; text-align: left; cursor: pointer; }.profile:hover { background: rgba(255,255,255,.05); }.profile-avatar { border-radius: 50%; background: #555c70; }.more { color: #767972; letter-spacing: 2px; }

.workspace { min-width: 0; }
.topbar { position: sticky; top: 0; height: 70px; padding: 0 clamp(22px,4vw,55px); display: flex; align-items: center; justify-content: space-between; background: color-mix(in srgb,var(--canvas) 88%,transparent); backdrop-filter: blur(18px) saturate(1.2); border-bottom: 1px solid color-mix(in srgb,var(--line) 75%,transparent); z-index: 10; }
.breadcrumbs { display: flex; align-items: center; gap: 10px; font-size: 13px; }.breadcrumbs span { color: var(--muted); }.breadcrumbs b { color: var(--faint); font-weight: 400; }.breadcrumbs strong { font-weight: 600; }
.topbar-actions { display: flex; align-items: center; gap: 9px; }
.search { width: 220px; height: 38px; padding: 0 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--muted); display: flex; align-items: center; gap: 8px; cursor: pointer; text-align: left; }.search span:nth-child(2) { flex: 1; }.search kbd { border: 1px solid var(--line); border-radius: 5px; padding: 2px 5px; color: var(--faint); background: var(--surface-2); font-size: 10px; }
.icon-button,.mobile-menu { width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); cursor: pointer; }.mobile-menu { display: none; }
.glass-button { position: relative; min-height: 39px; padding: 0 17px; border: 1px solid var(--glass-border); border-radius: 999px; background: var(--glass-bg); color: var(--ink); box-shadow: 0 7px 20px rgba(40,39,36,.1), inset 0 1px 0 rgba(255,255,255,.8), inset 0 -1px 0 rgba(0,0,0,.05); backdrop-filter: blur(14px) saturate(1.4); font-weight: 700; cursor: pointer; transition: transform .35s var(--ease), box-shadow .35s var(--ease); overflow: hidden; }
.glass-button::after { content:""; position:absolute; inset:0; background:linear-gradient(115deg,transparent 20%,rgba(255,255,255,.55) 48%,transparent 70%); transform:translateX(-130%); transition:transform .6s; }
.glass-button:hover { transform: translateY(-2px) scale(1.015); box-shadow: 0 11px 28px rgba(40,39,36,.15), inset 0 1px 0 #fff; }.glass-button:hover::after { transform: translateX(130%); }.glass-button:active { transform: scale(.97); }

main { max-width: 1480px; margin: 0 auto; padding: 42px clamp(22px,4vw,55px) 70px; }
.page { display: none; animation: page-in .35s ease both; }.page.active { display: block; }@keyframes page-in { from { opacity:0; transform:translateY(6px); } }
.page-heading { min-height: 82px; margin-bottom: 24px; display: flex; align-items: flex-start; justify-content: space-between; gap: 25px; }.page-heading h1 { margin: 4px 0 5px; font: 700 36px/1.1 "DM Sans",sans-serif; letter-spacing: -.035em; }.page-heading p:not(.eyebrow) { margin: 0; color: var(--muted); max-width: 630px; }
.overview-heading { position: relative; overflow: hidden; min-height: 145px; padding: 24px 180px 24px 28px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow); align-items: center; }.overview-heading h1 { font-size: 42px; }.overview-heading img { position: absolute; right: 20px; bottom: -33px; width: 155px; height: 155px; object-fit: contain; }
.eyebrow { margin: 0 0 6px; color: var(--cedar); font-size: 10px; line-height: 1; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.heading-actions { display: flex; gap: 9px; }
.quiet-button,.text-button { border: 1px solid var(--line); border-radius: 999px; background: var(--surface); padding: 10px 15px; color: var(--ink); cursor: pointer; font-size: 12px; font-weight: 700; }.quiet-button:hover { border-color: var(--cedar); }.quiet-button.small { padding: 7px 11px; }.text-button { border: 0; background: transparent; padding: 5px; color: var(--cedar); }
.metric-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; }
.metric,.card { border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); }
.metric { min-height: 143px; padding: 18px 19px; overflow: hidden; }.metric-top { display:flex; align-items:center; justify-content:space-between; color:var(--muted); font-size:11px; }.metric-top em { color: var(--faint); font-size: 9px; font-style: normal; }.metric-top em.up { color: var(--green); }.metric > strong { display:block; margin:12px 0 9px; font:700 28px/1 "DM Sans",sans-serif; letter-spacing:-.04em; }.metric-detail { color: var(--muted); font-size: 10px; display:flex; align-items:center; gap:6px; }
.spark-bars { height: 33px; display:flex; align-items:end; gap:4px; }.spark-bars i { flex:1; height:30%; border-radius:3px 3px 0 0; background:#d7b39f; }.spark-bars i:nth-child(2){height:50%}.spark-bars i:nth-child(3){height:43%}.spark-bars i:nth-child(4){height:70%}.spark-bars i:nth-child(5){height:57%}.spark-bars i:nth-child(6){height:85%}.spark-bars i:nth-child(7){height:68%}.spark-bars i:nth-child(8){height:94%}.spark-bars i:nth-child(9){height:80%}.spark-bars i:nth-child(10){height:100%;background:var(--cedar)}
.avatars { display:flex; }.avatars b { width:19px;height:19px;margin-right:-4px;border:2px solid var(--surface);border-radius:50%;display:grid;place-items:center;background:#6d778d;color:#fff;font-size:7px; }.avatars b:nth-child(2){background:#8e644f}.avatars b:nth-child(3){background:#5c7866}.tiny-dot{width:6px;height:6px;border-radius:50%;background:var(--muted)}.tiny-dot.amber{background:var(--amber)}.tiny-dot.green{background:var(--green)}
.overview-grid { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(310px,.75fr); gap:14px; margin-top:14px; }.card { padding: 20px; }.card-header { display:flex;align-items:flex-start;justify-content:space-between;gap:15px;margin-bottom:17px}.card-header h2,.section-heading h2,.card > h2 { margin:0;font:600 18px/1.2 "DM Sans",sans-serif; letter-spacing:-.02em; }.card-header select { border:1px solid var(--line);border-radius:6px;background:var(--surface-2);padding:7px 10px;color:var(--muted);font-size:10px; }
.chart { height:255px; display:flex; gap:11px; }.chart-y { width:25px;display:flex;flex-direction:column;justify-content:space-between;padding:3px 0 27px;color:var(--faint);font-size:9px}.chart-area{position:relative;flex:1}.gridlines{position:absolute;inset:0 0 27px;background:repeating-linear-gradient(to bottom,transparent 0,transparent calc(33.333% - 1px),var(--line) 33.333%)}.chart svg{position:absolute;inset:0 0 27px;width:100%;height:calc(100% - 27px);overflow:visible}.chart-line{fill:none;stroke:var(--cedar);stroke-width:3;vector-effect:non-scaling-stroke}.chart-fill{fill:color-mix(in srgb,var(--cedar) 11%,transparent)}.chart-days{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;color:var(--faint);font-size:9px}
.inbox-item { display:flex;align-items:center;gap:11px;padding:13px 0;border-top:1px solid var(--line)}.inbox-icon{width:32px;height:32px;flex:0 0 32px;border-radius:9px;display:grid;place-items:center;background:var(--surface-2);color:var(--cedar)}.inbox-icon.shield{color:var(--red)}.inbox-icon.join{color:var(--green)}.inbox-item div{min-width:0;flex:1}.inbox-item strong{font-size:12px}.inbox-item p{margin:3px 0 0;color:var(--muted);font-size:10px}.status-chip { display:inline-flex;align-items:center;justify-content:center;padding:4px 8px;border-radius:99px;background:var(--surface-2);color:var(--muted);font-size:9px;font-style:normal;font-weight:700}.status-chip.green{background:color-mix(in srgb,var(--green) 12%,transparent);color:var(--green)}.status-chip.amber{background:color-mix(in srgb,var(--amber) 12%,transparent);color:var(--amber)}
.section-heading { margin:32px 0 13px;display:flex;align-items:end;justify-content:space-between}.feature-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.feature-card{min-height:85px;padding:15px;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink);box-shadow:var(--shadow);display:flex;align-items:center;gap:11px;text-align:left;cursor:pointer;transition:transform .25s var(--ease),border-color .2s}.feature-card:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--cedar) 55%,var(--line))}.feature-icon{width:37px;height:37px;flex:0 0 37px;border-radius:10px;display:grid;place-items:center;background:color-mix(in srgb,var(--cedar) 11%,transparent);color:var(--cedar);font-size:18px}.feature-icon.red{background:color-mix(in srgb,var(--red) 11%,transparent);color:var(--red)}.feature-icon.blue{background:color-mix(in srgb,var(--blue) 11%,transparent);color:var(--blue)}.feature-icon.plum{background:color-mix(in srgb,var(--plum) 11%,transparent);color:var(--plum)}.feature-card > span:nth-child(2){min-width:0;display:flex;flex:1;flex-direction:column}.feature-card strong{font-size:12px}.feature-card small{margin-top:3px;color:var(--muted);font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.feature-card i.enabled{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px color-mix(in srgb,var(--green) 10%,transparent)}

.split-layout { display:grid;grid-template-columns:minmax(0,1.3fr) minmax(320px,.7fr);gap:16px;align-items:start}.settings-column{display:grid;gap:16px}.settings-card{padding:25px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-bottom:15px}label>span{display:block;margin-bottom:7px;color:var(--muted);font-size:11px;font-weight:600}select,.mock-search{width:100%;height:42px;border:1px solid var(--line);border-radius:9px;background:var(--surface-2);color:var(--ink);padding:0 12px;outline:none}.toggle-row{min-height:62px;display:flex;align-items:center;gap:15px;border-top:1px solid var(--line);cursor:pointer}.toggle-row>span{margin:0;flex:1;display:flex;flex-direction:column;color:var(--ink)}.toggle-row strong{font-size:12px}.toggle-row small{margin-top:3px;color:var(--muted);font-size:10px}.toggle-row input{position:absolute;opacity:0}.toggle-row i{position:relative;width:36px;height:21px;border-radius:99px;background:var(--line);transition:.2s}.toggle-row i::after{content:"";position:absolute;left:3px;top:3px;width:15px;height:15px;border-radius:50%;background:white;box-shadow:0 1px 4px rgba(0,0,0,.2);transition:.25s var(--ease)}.toggle-row input:checked+i{background:var(--green)}.toggle-row input:checked+i::after{transform:translateX(15px)}
.category-list{border:1px solid var(--line);border-radius:12px;overflow:hidden}.category-row{min-height:67px;padding:10px 13px;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--line)}.category-row:last-child{border-bottom:0}.category-emoji{width:36px;height:36px;border-radius:9px;background:var(--surface-2);display:grid;place-items:center}.category-row div{display:flex;flex:1;flex-direction:column}.category-row strong{font-size:12px}.category-row small{margin-top:3px;color:var(--muted);font-size:10px}.category-row button{border:0;background:transparent;color:var(--faint);cursor:pointer}.queue{position:sticky;top:90px}.live-indicator{color:var(--green);font-size:10px;font-weight:700}.live-indicator i{display:inline-block;width:6px;height:6px;margin-right:5px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px color-mix(in srgb,var(--green) 10%,transparent)}.ticket-row{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:11px;align-items:center;padding:14px 0;border-top:1px solid var(--line)}.ticket-row.priority{margin:0 -10px;padding:14px 10px;border-radius:10px;background:color-mix(in srgb,var(--amber) 7%,transparent);border-top-color:transparent}.ticket-number{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:var(--surface-2);font:16px "Instrument Serif",serif}.ticket-row div:nth-child(2){min-width:0}.ticket-row strong{display:block;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ticket-row p{margin:3px 0 0;color:var(--muted);font-size:9px}.avatar-chip{width:27px;height:27px;border-radius:50%;display:grid;place-items:center;background:#7d5d50;color:#fff;font-size:8px;font-weight:700}.avatar-chip.blue,.profile-avatar.blue{background:#596c8e}.avatar-chip.green{background:#557961}
.moderation-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(300px,.7fr);gap:16px}.safety-score{margin:20px 0 9px}.safety-score strong{font:62px/1 "Instrument Serif",serif;color:var(--green)}.safety-score span{color:var(--muted)}.safety-copy{color:var(--muted);font-size:11px;line-height:1.6}.rule-stat{display:flex;justify-content:space-between;padding:12px 0;border-top:1px solid var(--line);font-size:11px}.rule-stat span{color:var(--muted)}
.placeholder-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:18px;align-items:stretch}.placeholder-layout>img{width:100%;height:315px;object-fit:contain;border:1px solid var(--line);border-radius:16px;background:var(--surface)}.mock-search{display:flex;align-items:center;margin:20px 0;color:var(--faint);font-size:11px}.member-row{display:flex;align-items:center;gap:11px;padding:12px 0;border-top:1px solid var(--line)}.member-row>div{display:flex;flex:1;flex-direction:column}.member-row strong{font-size:12px}.member-row small{color:var(--muted);font-size:10px}.reward-row{display:flex;align-items:center;gap:12px;padding:14px 0;border-top:1px solid var(--line)}.reward-row>b{width:37px;height:37px;display:grid;place-items:center;border-radius:50%;background:var(--surface-2);color:var(--cedar)}.reward-row>span{display:flex;flex-direction:column}.reward-row small{color:var(--muted);font-size:10px}.table-card{padding:0;overflow:hidden}.command-row{min-height:61px;padding:0 22px;display:grid;grid-template-columns:180px 1fr 60px;align-items:center;border-top:1px solid var(--line);font-size:11px}.command-row.head{min-height:42px;border-top:0;background:var(--surface-2);color:var(--muted);font-size:9px;text-transform:uppercase;letter-spacing:.1em}.command-row span{color:var(--muted)}.retention-number{margin:25px 0 5px;font:64px/1 "Instrument Serif",serif;color:var(--green)}

.command-palette{position:fixed;inset:0;z-index:100;display:grid;place-items:start center;padding-top:14vh}.palette-backdrop{position:absolute;inset:0;border:0;background:rgba(16,17,15,.55);backdrop-filter:blur(4px)}.palette-dialog{position:relative;width:min(590px,calc(100vw - 30px));padding:10px;border:1px solid rgba(255,255,255,.2);border-radius:17px;background:var(--surface);box-shadow:0 30px 80px rgba(0,0,0,.3)}.palette-input{height:52px;display:flex;align-items:center;gap:10px;padding:0 12px;border-bottom:1px solid var(--line)}.palette-input input{flex:1;border:0;outline:0;background:transparent;color:var(--ink);font-size:16px}.palette-results{padding:7px 0}.palette-results button{width:100%;padding:10px;border:0;border-radius:10px;background:transparent;color:var(--ink);display:grid;grid-template-columns:30px 1fr auto;align-items:center;gap:9px;text-align:left;cursor:pointer}.palette-results button:hover{background:var(--surface-2)}.palette-results button>span:nth-child(2){display:flex;flex-direction:column}.palette-results small{margin-top:3px;color:var(--muted);font-size:10px}.palette-results kbd{color:var(--faint)}.palette-dialog>p{margin:5px 10px;color:var(--faint);font-size:9px}.toast{position:fixed;right:25px;bottom:25px;z-index:110;padding:12px 17px;border:1px solid var(--glass-border);border-radius:999px;background:var(--glass-bg);box-shadow:var(--shadow);backdrop-filter:blur(15px);font-size:11px;font-weight:700;opacity:0;transform:translateY(15px);pointer-events:none;transition:.3s var(--ease)}.toast.show{opacity:1;transform:none}
[hidden]{display:none!important}

/* Overview: intentionally flatter and denser than the configuration pages. */
.overview-page { max-width: 900px; }
.overview-page .compact-heading { min-height: auto; margin-bottom: 48px; align-items: center; }
.overview-page .compact-heading h1 { margin: 0 0 6px; font-size: 27px; letter-spacing: -.025em; }
.overview-page .compact-heading p { display: block; font-size: 12px; }
.inline-status { display: inline-flex; align-items: center; gap: 6px; padding-left: 12px; border-left: 1px solid var(--line); color: var(--green); }
.inline-status i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.updated-at { align-self: center; color: var(--faint); font-size: 10px; }

.summary-strip { display: grid; grid-template-columns: repeat(4, 1fr); }
.summary-strip > div { position: relative; min-height: 64px; padding: 0 28px; border-right: 1px solid var(--line); display: flex; flex-direction: column; justify-content: center; }
.summary-strip > div:first-child { padding-left: 0; }
.summary-strip > div:last-child { border-right: 0; }
.summary-strip span { color: var(--muted); font-size: 10px; font-weight: 500; }
.summary-strip strong { margin-top: 8px; font-size: 21px; line-height: 1; letter-spacing: -.035em; }
.summary-strip small { align-self: end; color: var(--faint); font-size: 9px; }
.summary-strip .summary-alert { box-shadow: inset 3px 0 var(--cedar); }
.summary-strip .summary-alert small { color: var(--cedar); font-weight: 600; }

.operations-grid { display: grid; grid-template-columns: minmax(0, 1fr) 285px; gap: 24px; margin-top: 30px; }
.lower-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; margin-top: 30px; }
.flat-section, .status-panel { min-width: 0; }
.section-bar { min-height: 43px; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--line); }
.section-bar h2 { margin: 0 0 4px; font-size: 14px; line-height: 1.2; letter-spacing: -.01em; }
.section-bar p { margin: 0 0 12px; color: var(--muted); font-size: 10px; }
.section-bar select { height: 30px; border: 1px solid var(--line); border-radius: 5px; padding: 0 9px; background: var(--surface); color: var(--muted); font-size: 10px; }

.overview-page .attention-section { margin-top: 68px; }
.attention-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.attention-heading h2 { margin: 0; font-size: 14px; }
.attention-list, .event-list { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.attention-row, .event-row { width: 100%; min-height: 62px; padding: 10px 8px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); display: grid; grid-template-columns: 30px minmax(0, 1fr) auto 35px; align-items: center; gap: 11px; text-align: left; }
button.attention-row { cursor: pointer; }
.attention-row:hover { background: color-mix(in srgb, var(--surface-2) 65%, transparent); }
.attention-row:last-child, .event-row:last-child { border-bottom: 0; }
.attention-row.urgent { background: color-mix(in srgb, var(--amber) 5%, transparent); box-shadow: inset 2px 0 var(--amber); }
.attention-row div, .event-row div { min-width: 0; }
.attention-row strong, .event-row strong { display: block; overflow: hidden; font-size: 11px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.attention-row p, .event-row p { margin: 3px 0 0; overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.attention-row time, .event-row time { color: var(--faint); font-size: 9px; text-align: right; }
.event-mark { width: 26px; height: 26px; border: 1px solid var(--line); border-radius: 5px; display: grid; place-items: center; color: var(--cedar); font-size: 12px; }
.event-mark.mod { color: var(--red); }.event-mark.member { color: var(--green); }.event-mark.config { color: var(--blue); }

.status-panel { border-left: 1px solid var(--line); padding-left: 24px; }
.status-list { margin: 4px 0 0; }
.status-list div { min-height: 39px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.status-list dt { color: var(--muted); font-size: 10px; }.status-list dd { margin: 0; font-size: 10px; font-weight: 600; }
.status-list dd i { display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--green); }
.status-link, .list-footer { min-height: 36px; padding: 0; border: 0; background: transparent; color: var(--cedar); font-size: 10px; font-weight: 600; cursor: pointer; }
.event-row { grid-template-columns: 30px minmax(0, 1fr) 45px; padding-left: 0; padding-right: 0; }
.list-footer { width: 100%; text-align: left; }

.workload-section { border-left: 1px solid var(--line); padding-left: 24px; }
.workload-row { min-height: 46px; display: grid; grid-template-columns: 105px minmax(50px, 1fr) 45px; align-items: center; gap: 10px; border-bottom: 1px solid var(--line); font-size: 10px; }
.workload-row > span { color: var(--muted); }.workload-row > strong { text-align: right; font-size: 11px; }
.workload-row > div { height: 4px; background: var(--surface-2); }.workload-row i { display: block; height: 100%; background: var(--cedar); }
.workload-note { margin: 12px 0 0; color: var(--faint); font-size: 9px; line-height: 1.5; }

/* Content chrome stays practical; glass is reserved for primary actions. */
.card, .metric { border-radius: 8px; box-shadow: none; }
.settings-card, .queue, .moderation-grid > .card, .placeholder-layout > .card, .table-card { box-shadow: none; }
.quiet-button { border-radius: 6px; }
.ticket-number { border-radius: 6px; font-family: "DM Sans", sans-serif; font-size: 12px; font-weight: 600; }
.safety-score strong, .retention-number { font-family: "DM Sans", sans-serif; font-weight: 700; letter-spacing: -.05em; }
.overview-page .attention-row { min-height: 67px; padding: 12px 0; grid-template-columns: minmax(0, 1fr) 40px; gap: 20px; }
.overview-page .attention-row:hover { background: transparent; }
.overview-page .attention-row strong { font-size: 11px; }
.overview-page .attention-row p { margin-top: 4px; }

@media(max-width:1100px){.metric-grid,.feature-grid{grid-template-columns:repeat(2,1fr)}.overview-grid,.split-layout{grid-template-columns:1fr}.queue{position:static}.placeholder-layout{grid-template-columns:1fr 260px}}
@media(max-width:780px){body.sidebar-open{overflow:hidden}.app-shell{grid-template-columns:1fr}.sidebar{position:fixed;top:28px;left:0;width:min(300px,86vw);height:calc(100dvh - 28px);overflow:hidden;transform:translateX(-105%);transition:transform .3s ease;box-shadow:20px 0 50px rgba(0,0,0,.25)}.sidebar.open{transform:none}.sidebar .main-nav{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y;padding-bottom:18px}.sidebar-close{position:absolute;top:18px;right:14px;z-index:3;width:36px;height:36px;border:0;border-radius:8px;background:rgba(255,255,255,.07);color:#d7d9d3;display:grid;place-items:center;font-size:25px;line-height:1;cursor:pointer}.sidebar-backdrop{position:fixed;inset:28px 0 0;z-index:15;border:0;background:rgba(15,16,14,.48);display:block;backdrop-filter:blur(2px);touch-action:manipulation}.mobile-menu{display:block}.breadcrumbs{position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap}.breadcrumbs span,.breadcrumbs b{display:none}.search{width:38px;flex:0 0 38px;padding:0;justify-content:center}.search>span:first-child{font-size:18px}.search span:nth-child(2),.search kbd{display:none}.topbar{padding:0 14px}.topbar-actions{margin-left:auto;gap:8px}.topbar-actions .glass-button{display:none}.icon-button,.mobile-menu{flex:0 0 38px}.workspace{min-width:0}main{padding:28px 16px 55px}.page-heading{min-height:0}.page-heading h1{font-size:38px}.overview-heading{padding-right:115px}.overview-heading img{right:-15px;width:130px}.moderation-grid,.placeholder-layout{grid-template-columns:1fr}.placeholder-layout>img{height:230px}.heading-actions{flex-direction:column}.form-grid{grid-template-columns:1fr}.prototype-note{font-size:9px}}
@media(max-width:520px){.metric-grid,.feature-grid{grid-template-columns:1fr}.overview-grid{display:block}.attention-card{margin-top:14px}.overview-heading{padding:22px 90px 22px 20px}.overview-heading h1{font-size:34px}.overview-heading img{right:-35px}.chart{height:210px}.card{padding:18px}.command-row{grid-template-columns:95px 1fr 35px;padding:0 12px}.page-heading{display:block}.heading-actions{margin-top:16px;align-items:flex-start}.placeholder-layout>img{display:none}}
@media(max-width:1050px){.operations-grid,.lower-grid{grid-template-columns:1fr}.status-panel,.workload-section{border-left:0;padding-left:0}.summary-strip{grid-template-columns:repeat(2,1fr)}.summary-strip>div:nth-child(2){border-right:0}.summary-strip>div:nth-child(-n+2){border-bottom:1px solid var(--line)}}
@media(max-width:780px){.overview-page .compact-heading{display:flex}.overview-page .heading-actions{margin:0;flex-direction:row}.summary-strip{grid-template-columns:1fr 1fr}.operations-grid,.lower-grid{margin-top:24px;gap:24px}}
@media(max-width:520px){.overview-page .compact-heading{display:block}.overview-page .heading-actions{margin-top:12px}.summary-strip{grid-template-columns:1fr}.summary-strip>div,.summary-strip>div:first-child{min-height:78px;padding:18px 0;border-right:0;border-bottom:1px solid var(--line)}.summary-strip>div:last-child{border-bottom:0}.attention-row{grid-template-columns:28px minmax(0,1fr) auto}.attention-row time{display:none}.attention-row .status-chip{font-size:8px}.workload-row{grid-template-columns:95px 1fr 38px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
.placeholder-layout:has(> article:only-child){grid-template-columns:minmax(0,760px)}