maxim.dolgolyov/Learn_System
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(admin): командный центр дашборда в стиле дизайн-системы LearnSpace

Browse Source 
Переведён #admin-command-center с чужого «cobalt / Hanken Grotesk / JetBrains
Mono» макета на токены ls.css: палитра violet #9B5DE5 / cyan #06D6E0, шрифты
Unbounded (заголовки/числа) + Manrope (текст), карточки-стекло r=20px,
градиентные акценты (--grad-1), мягкие тени системы. HTML-структура, данные и
вся JS-логика не изменены — только стили.
This commit is contained in:
Maxim Dolgolyov
2026-06-03 20:18:22 +03:00
parent b678b2e226
commit 2f47edbc72
1 changed files with 121 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/js/dashboard-admin-center.js
+121 -115
View File
@@ -2,9 +2,10 @@
/* ════════════════════════════════════════════════════════════════
DASHBOARD · ADMIN COMMAND CENTER
Рендерит «командный центр администратора» в /dashboard для роли admin.
Дизайн — порт макета frontend/admin-dashboard-redesign.html
(cobalt accent · Hanken Grotesk · JetBrains Mono · hairline borders),
но на реальных данных GET /api/admin/overview.
Дизайн — в стиле дизайн-системы LearnSpace (/css/ls.css):
палитра violet #9B5DE5 / cyan #06D6E0, шрифты Unbounded + Manrope,
карточки-«стекло» 20px, градиентные акценты. На реальных данных
GET /api/admin/overview.
Весь CSS заскоуплен под #admin-command-center, чтобы не конфликтовать
с ls.css / dashboard.html. Деструктивные действия не выполняются
inline — кнопки ведут в соответствующие разделы /admin.
@@ -20,8 +21,8 @@
/* ── subject hue cycle (совпадает с overview.js) ──────────────── */
const SUBJ_COLORS = [
'#3558e0', '#0ea5b7', '#7c3aed', '#d97706', '#16a34a',
'#e11d48', '#4FC3F7', '#FFD54F', '#FF8A65', '#BA68C8',
'#9B5DE5', '#06D6E0', '#06D664', '#FFB347', '#F15BB5',
'#7C3AED', '#4FC3F7', '#FFD54F', '#FF8A65', '#BA68C8',
];
/* ── one-time font + CSS injection ────────────────────────────── */
@@ -30,7 +31,7 @@
const l = document.createElement('link');
l.id = 'acc-font';
l.rel = 'stylesheet';
l.href = 'https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,300..800;1,400..600&family=JetBrains+Mono:wght@400;500;600;700&display=swap';
l.href = 'https://fonts.googleapis.com/css2?family=Unbounded:wght@400;700;800&family=Manrope:wght@400;500;600;700&display=swap';
document.head.appendChild(l);
}
if (document.getElementById('acc-style')) return;
@@ -143,7 +144,7 @@
<div class="acc-num">${fmtNum(d.newSessions24h)}</div>
<div class="acc-kpi-foot">за последние сутки</div>
<svg class="acc-spark" viewBox="0 0 120 34" preserveAspectRatio="none">
<path class="acc-line" d="M ${sessSpark}" stroke="#3558e0"/>
<path class="acc-line" d="M ${sessSpark}" stroke="#9B5DE5"/>
</svg>
</div>
@@ -154,7 +155,7 @@
</div>
<div class="acc-num">${fmtNum(d.activeUsers24h)}</div>
<svg class="acc-spark" viewBox="0 0 74 26" preserveAspectRatio="none">
<path class="acc-line" d="M ${sparkPath(sp.active, 74, 26)}" stroke="#16a34a"/>
<path class="acc-line" d="M ${sparkPath(sp.active, 74, 26)}" stroke="#06D664"/>
</svg>
</div>
@@ -165,7 +166,7 @@
</div>
<div class="acc-num">${fmtNum(d.newUsers24h)}</div>
<svg class="acc-spark" viewBox="0 0 74 26" preserveAspectRatio="none">
<path class="acc-line" d="M ${sparkPath(sp.users, 74, 26)}" stroke="#0ea5b7"/>
<path class="acc-line" d="M ${sparkPath(sp.users, 74, 26)}" stroke="#06D6E0"/>
</svg>
</div>
@@ -513,20 +514,22 @@
/* ════════════════════ SCOPED CSS ════════════════════ */
const CSS = `
#admin-command-center{
--bg:#f3f4f7; --surface:#fff; --surface-2:#fafbfc; --surface-3:#f0f2f6;
--border:#e7e9ef; --border-2:#dadde5;
--tx:#181b22; --tx2:#525866; --tx3:#828997; --tx4:#aab0bb;
--acc:#3558e0; --acc-600:#2a47bd; --acc-700:#233a9c; --acc-50:#eef1fe; --acc-100:#dee5fc;
--acc-green:#16a34a; --acc-green-50:#e8f6ed; --acc-amber:#d97706; --acc-amber-50:#fdf1e2;
--acc-rose:#e11d48; --acc-rose-50:#fdeaef; --acc-cyan:#0ea5b7; --acc-cyan-50:#e4f6f8;
--acc-violet:#7c3aed; --acc-violet-50:#f1ecfe;
--acc-sh-xs:0 1px 2px rgba(18,22,31,.04);
--acc-sh-sm:0 1px 2px rgba(18,22,31,.05),0 1px 3px rgba(18,22,31,.05);
--acc-sh:0 2px 4px -1px rgba(18,22,31,.05),0 8px 20px -6px rgba(18,22,31,.10);
--acc-sh-accent:0 4px 14px -2px rgba(53,88,224,.40);
--r-sm:9px; --r:12px; --r-lg:16px;
--sans:'Hanken Grotesk',system-ui,-apple-system,sans-serif;
--mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
--surface:#fff; --surface-2:#faf8ff; --surface-3:rgba(155,93,229,.06);
--border:rgba(15,23,42,.08); --border-2:rgba(15,23,42,.16);
--tx:#0F172A; --tx2:#3D4F6B; --tx3:#56687A; --tx4:#8693A6;
--acc:#9B5DE5; --acc-600:#8a4fd0; --acc-700:#7a3bc4; --acc-50:rgba(155,93,229,.10); --acc-100:rgba(155,93,229,.22);
--acc-green:#0BA85A; --acc-green-50:rgba(6,214,100,.14); --acc-amber:#D9831A; --acc-amber-50:rgba(255,179,71,.16);
--acc-rose:#E23C8E; --acc-rose-50:rgba(241,91,181,.13); --acc-cyan:#0AA6B2; --acc-cyan-50:rgba(6,214,224,.14);
--acc-violet:#9B5DE5; --acc-violet-50:rgba(155,93,229,.12);
--grad-1:linear-gradient(135deg,#06D6E0,#9B5DE5);
--acc-sh-xs:0 2px 8px rgba(15,23,42,.04);
--acc-sh-sm:0 2px 10px rgba(15,23,42,.05);
--acc-sh:0 6px 24px rgba(15,23,42,.09);
--acc-sh-accent:0 8px 22px rgba(155,93,229,.34);
--r-sm:10px; --r:14px; --r-lg:20px;
--sans:'Manrope',system-ui,-apple-system,sans-serif;
--mono:'Manrope',system-ui,sans-serif;
--display:'Unbounded',sans-serif;
font-family:var(--sans); color:var(--tx); font-size:14px; line-height:1.5;
-webkit-font-smoothing:antialiased;
}
@@ -540,112 +543,114 @@
/* topbar */
#admin-command-center .acc-topbar{ display:flex; align-items:center; gap:14px; margin-bottom:18px; flex-wrap:wrap; }
#admin-command-center .acc-crumbs{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--tx3); }
#admin-command-center .acc-crumbs .here{ color:var(--tx); font-weight:600; }
#admin-command-center .acc-crumbs{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--tx3); font-weight:500; }
#admin-command-center .acc-crumbs .here{ color:var(--tx); font-weight:700; }
#admin-command-center .acc-crumbs .acc-ic{ stroke:var(--tx4); }
#admin-command-center .acc-clock{ font-family:var(--mono); font-size:12px; color:var(--tx3);
#admin-command-center .acc-clock{ font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:12px; color:var(--tx3);
padding-left:14px; border-left:1px solid var(--border); }
#admin-command-center .acc-clock b{ color:var(--tx2); font-weight:600; }
#admin-command-center .acc-clock b{ color:var(--tx2); font-weight:700; }
#admin-command-center .acc-tb-right{ margin-left:auto; display:flex; align-items:center; gap:8px; }
#admin-command-center .acc-tb-icon{ width:34px; height:34px; display:grid; place-items:center;
#admin-command-center .acc-tb-icon{ width:36px; height:36px; display:grid; place-items:center;
border-radius:var(--r-sm); border:1px solid var(--border); background:var(--surface);
color:var(--tx2); box-shadow:var(--acc-sh-xs); transition:border-color .14s,color .14s; }
#admin-command-center .acc-tb-icon:hover{ border-color:var(--border-2); color:var(--tx); }
#admin-command-center .acc-btn{ display:inline-flex; align-items:center; gap:7px; height:34px; padding:0 14px;
border-radius:var(--r-sm); font-size:13px; font-weight:600; border:1px solid var(--acc-600);
background:linear-gradient(180deg,#4763e6,#3558e0); color:#fff;
box-shadow:var(--acc-sh-accent),inset 0 1px 0 rgba(255,255,255,.2); transition:filter .14s,transform .12s; }
#admin-command-center .acc-btn:hover{ filter:brightness(1.06); }
color:var(--tx2); box-shadow:var(--acc-sh-xs); transition:border-color .16s,color .16s,background .16s; }
#admin-command-center .acc-tb-icon:hover{ border-color:var(--acc-100); color:var(--acc); background:var(--acc-50); }
#admin-command-center .acc-btn{ display:inline-flex; align-items:center; gap:7px; height:36px; padding:0 16px;
border-radius:var(--r-sm); font-size:13px; font-weight:700; border:none; font-family:var(--sans);
background:var(--grad-1); color:#fff;
box-shadow:var(--acc-sh-accent); transition:filter .16s,transform .12s,box-shadow .16s; }
#admin-command-center .acc-btn:hover{ filter:brightness(1.05); box-shadow:0 10px 26px rgba(155,93,229,.42); }
#admin-command-center .acc-btn:active{ transform:translateY(1px); }
#admin-command-center .acc-btn .acc-ic{ stroke:#fff; }
/* page head */
#admin-command-center .acc-page-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:20px; }
#admin-command-center .acc-kicker{ display:inline-flex; align-items:center; gap:8px; font-family:var(--mono);
font-size:11px; font-weight:500; letter-spacing:.03em; color:var(--acc); margin-bottom:9px; }
#admin-command-center .acc-page-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:22px; }
#admin-command-center .acc-kicker{ display:inline-flex; align-items:center; gap:8px; font-family:var(--sans);
font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--acc); margin-bottom:10px; }
#admin-command-center .acc-kicker .acc-ic{ stroke:var(--acc); }
#admin-command-center .acc-kicker .muted{ color:var(--tx3); }
#admin-command-center .acc-page-head h1{ font-size:30px; font-weight:800; letter-spacing:-.025em; line-height:1.05; margin:0; font-family:var(--sans); }
#admin-command-center .acc-page-head h1 span{ color:var(--acc); }
#admin-command-center .acc-sub{ margin:7px 0 0; font-size:14px; color:var(--tx2); max-width:60ch; }
#admin-command-center .acc-page-head h1{ font-family:var(--display); font-size:30px; font-weight:800; letter-spacing:-.02em; line-height:1.08; margin:0; }
#admin-command-center .acc-page-head h1 span{ background:var(--grad-1); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
#admin-command-center .acc-sub{ margin:9px 0 0; font-size:14px; color:var(--tx2); max-width:60ch; }
#admin-command-center .acc-sub b{ color:var(--tx); font-weight:700; }
/* pulse kpi */
#admin-command-center .acc-pulse{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:14px; margin-bottom:22px; }
#admin-command-center .acc-kpi{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
padding:16px 17px; box-shadow:var(--acc-sh-xs); position:relative; overflow:hidden; transition:transform .16s,box-shadow .16s,border-color .16s; }
#admin-command-center .acc-kpi:hover{ transform:translateY(-2px); box-shadow:var(--acc-sh); border-color:var(--border-2); }
#admin-command-center .acc-kpi-top{ display:flex; align-items:center; gap:9px; margin-bottom:11px; }
#admin-command-center .acc-kpi-ic{ width:30px; height:30px; border-radius:8px; display:grid; place-items:center; flex:0 0 auto; }
#admin-command-center .acc-pulse{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:16px; margin-bottom:24px; }
#admin-command-center .acc-kpi{ background:var(--surface); border:1.5px solid var(--border); border-radius:var(--r-lg);
padding:18px; box-shadow:var(--acc-sh-xs); position:relative; overflow:hidden; transition:transform .18s var(--ease-out),box-shadow .18s,border-color .18s; }
#admin-command-center .acc-kpi:hover{ transform:translateY(-3px); box-shadow:var(--acc-sh); border-color:var(--acc-100); }
#admin-command-center .acc-kpi.hero{ background:linear-gradient(180deg,rgba(155,93,229,.06),var(--surface)); border-color:rgba(155,93,229,.20); }
#admin-command-center .acc-kpi-top{ display:flex; align-items:center; gap:9px; margin-bottom:12px; }
#admin-command-center .acc-kpi-ic{ width:32px; height:32px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto; }
#admin-command-center .acc-kpi-ic.b{ background:var(--acc-50); } #admin-command-center .acc-kpi-ic.b .acc-ic{ stroke:var(--acc); }
#admin-command-center .acc-kpi-ic.c{ background:var(--acc-cyan-50); } #admin-command-center .acc-kpi-ic.c .acc-ic{ stroke:var(--acc-cyan); }
#admin-command-center .acc-kpi-ic.g{ background:var(--acc-green-50); } #admin-command-center .acc-kpi-ic.g .acc-ic{ stroke:var(--acc-green); }
#admin-command-center .acc-kpi-ic.v{ background:var(--acc-violet-50); } #admin-command-center .acc-kpi-ic.v .acc-ic{ stroke:var(--acc-violet); }
#admin-command-center .acc-lbl{ font-size:12px; font-weight:600; color:var(--tx3); }
#admin-command-center .acc-kpi-ic.v{ background:var(--acc-rose-50); } #admin-command-center .acc-kpi-ic.v .acc-ic{ stroke:var(--acc-rose); }
#admin-command-center .acc-lbl{ font-size:12px; font-weight:700; color:var(--tx3); }
#admin-command-center .acc-live{ margin-left:auto; display:inline-flex; align-items:center; gap:5px;
font-family:var(--mono); font-size:9px; font-weight:600; letter-spacing:.06em; color:var(--acc-green); }
font-family:var(--mono); font-size:9px; font-weight:700; letter-spacing:.08em; color:var(--acc-green); }
#admin-command-center .acc-dot{ width:6px; height:6px; border-radius:50%; background:var(--acc-green); position:relative; }
#admin-command-center .acc-dot::after{ content:""; position:absolute; inset:-3px; border-radius:50%;
border:1.4px solid var(--acc-green); animation:acc-ping 1.8s ease-out infinite; }
@keyframes acc-ping{ 0%{ transform:scale(.5); opacity:.85 } 100%{ transform:scale(1.8); opacity:0 } }
#admin-command-center .acc-num{ font-family:var(--mono); font-size:30px; font-weight:700; letter-spacing:-.03em;
#admin-command-center .acc-num{ font-family:var(--display); font-size:28px; font-weight:800; letter-spacing:-.02em;
line-height:1; font-variant-numeric:tabular-nums; }
#admin-command-center .acc-kpi.hero .acc-num{ font-size:38px; }
#admin-command-center .acc-kpi.hero .acc-num{ font-size:36px; }
#admin-command-center .acc-kpi-foot{ margin-top:11px; font-size:12px; color:var(--tx3); }
#admin-command-center .acc-spark{ position:absolute; right:14px; bottom:14px; width:74px; height:26px; opacity:.85; pointer-events:none; }
#admin-command-center .acc-spark{ position:absolute; right:14px; bottom:14px; width:74px; height:26px; opacity:.9; pointer-events:none; }
#admin-command-center .acc-kpi.hero .acc-spark{ width:120px; height:34px; }
#admin-command-center .acc-line{ fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
#admin-command-center .acc-line{ fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
/* main grid */
#admin-command-center .acc-grid{ display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); gap:20px; align-items:start; margin-bottom:20px; }
#admin-command-center .acc-grid{ display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); gap:20px; align-items:start; margin-bottom:24px; }
#admin-command-center .acc-col{ display:flex; flex-direction:column; gap:20px; }
#admin-command-center .acc-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--acc-sh-xs); overflow:hidden; }
#admin-command-center .acc-card-head{ display:flex; align-items:center; gap:10px; padding:14px 17px; border-bottom:1px solid var(--border); }
#admin-command-center .acc-ttl-ic{ width:28px; height:28px; border-radius:8px; display:grid; place-items:center; flex:0 0 auto; background:var(--acc-50); }
#admin-command-center .acc-card{ background:var(--surface); border:1.5px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--acc-sh-xs); overflow:hidden; transition:box-shadow .2s; }
#admin-command-center .acc-card:hover{ box-shadow:var(--acc-sh); }
#admin-command-center .acc-card-head{ display:flex; align-items:center; gap:10px; padding:15px 18px; border-bottom:1px solid var(--border); }
#admin-command-center .acc-ttl-ic{ width:30px; height:30px; border-radius:9px; display:grid; place-items:center; flex:0 0 auto; background:var(--acc-50); }
#admin-command-center .acc-ttl-ic .acc-ic{ stroke:var(--acc); }
#admin-command-center .acc-card-head h2{ font-size:15px; font-weight:700; letter-spacing:-.01em; margin:0; font-family:var(--sans); }
#admin-command-center .acc-count{ font-family:var(--mono); font-size:11px; font-weight:600; color:var(--tx2);
background:var(--surface-3); border:1px solid var(--border); border-radius:99px; padding:2px 9px; }
#admin-command-center .acc-card-head h2{ font-family:var(--display); font-size:14px; font-weight:800; letter-spacing:-.01em; margin:0; }
#admin-command-center .acc-count{ font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:11px; font-weight:700; color:var(--tx2);
background:var(--surface-3); border:1px solid var(--border); border-radius:99px; padding:3px 10px; }
#admin-command-center .acc-more{ margin-left:auto; display:inline-flex; align-items:center; gap:5px;
font-size:12.5px; font-weight:600; color:var(--tx3); cursor:pointer; transition:color .14s; }
font-size:12.5px; font-weight:700; color:var(--tx3); cursor:pointer; transition:color .14s; }
#admin-command-center .acc-more:hover{ color:var(--acc); }
/* attention */
#admin-command-center .acc-attn{ border-color:#f1d9c4; box-shadow:0 0 0 1px rgba(217,119,6,.05),var(--acc-sh-sm); }
#admin-command-center .acc-attn .acc-card-head{ background:linear-gradient(180deg,#fffaf3,var(--surface)); border-bottom-color:#f3e3d0; }
#admin-command-center .acc-attn{ border-color:rgba(255,179,71,.45); box-shadow:0 0 0 1px rgba(255,179,71,.06),var(--acc-sh-xs); }
#admin-command-center .acc-attn .acc-card-head{ background:linear-gradient(180deg,rgba(255,179,71,.08),var(--surface)); border-bottom-color:rgba(255,179,71,.28); }
#admin-command-center .acc-attn .acc-ttl-ic{ background:var(--acc-amber-50); }
#admin-command-center .acc-attn .acc-ttl-ic .acc-ic{ stroke:var(--acc-amber); }
#admin-command-center .acc-attn-tabs{ display:flex; gap:4px; padding:10px 12px 0; flex-wrap:wrap; }
#admin-command-center .acc-attn-tab{ display:inline-flex; align-items:center; gap:7px; height:30px; padding:0 12px; border:none;
background:none; border-radius:8px; font-size:12.5px; font-weight:600; color:var(--tx3); cursor:pointer; transition:background .14s,color .14s; font-family:var(--sans); }
#admin-command-center .acc-attn-tabs{ display:flex; gap:5px; padding:11px 12px 0; flex-wrap:wrap; }
#admin-command-center .acc-attn-tab{ display:inline-flex; align-items:center; gap:7px; height:32px; padding:0 13px; border:none;
background:none; border-radius:999px; font-size:12.5px; font-weight:700; color:var(--tx3); cursor:pointer; transition:background .14s,color .14s,box-shadow .14s; font-family:var(--sans); }
#admin-command-center .acc-attn-tab:hover{ background:var(--surface-3); color:var(--tx); }
#admin-command-center .acc-attn-tab.on{ background:var(--tx); color:#fff; }
#admin-command-center .acc-tag{ font-family:var(--mono); font-size:10px; font-weight:700; padding:1px 6px; border-radius:99px; background:var(--surface-3); color:var(--tx2); }
#admin-command-center .acc-attn-tab.on .acc-tag{ background:rgba(255,255,255,.16); color:#fff; }
#admin-command-center .acc-attn-tab.on{ background:var(--acc); color:#fff; box-shadow:var(--acc-sh-accent); }
#admin-command-center .acc-tag{ font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:10px; font-weight:700; padding:1px 7px; border-radius:99px; background:var(--surface-3); color:var(--tx2); }
#admin-command-center .acc-attn-tab.on .acc-tag{ background:rgba(255,255,255,.22); color:#fff; }
#admin-command-center .acc-attn-list{ padding:8px; }
#admin-command-center .acc-attn-row{ display:grid; grid-template-columns:40px minmax(0,1fr) auto; gap:12px; align-items:center;
padding:11px 10px; border-radius:var(--r); transition:background .14s; }
#admin-command-center .acc-attn-row+.acc-attn-row{ margin-top:1px; }
#admin-command-center .acc-attn-row:hover{ background:var(--surface-3); }
#admin-command-center .acc-sev{ width:40px; height:40px; border-radius:11px; display:grid; place-items:center; }
#admin-command-center .acc-sev{ width:40px; height:40px; border-radius:12px; display:grid; place-items:center; }
#admin-command-center .acc-sev.rose{ background:var(--acc-rose-50); } #admin-command-center .acc-sev.rose .acc-ic{ stroke:var(--acc-rose); }
#admin-command-center .acc-sev.amber{ background:var(--acc-amber-50); } #admin-command-center .acc-sev.amber .acc-ic{ stroke:var(--acc-amber); }
#admin-command-center .acc-attn-main{ min-width:0; }
#admin-command-center .acc-a-row1{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
#admin-command-center .acc-attn-main h4{ font-size:13.5px; font-weight:600; letter-spacing:-.01em; margin:0; font-family:var(--sans); }
#admin-command-center .acc-kind{ font-family:var(--mono); font-size:9.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; padding:2px 7px; border-radius:6px; }
#admin-command-center .acc-attn-main h4{ font-size:13.5px; font-weight:700; letter-spacing:-.01em; margin:0; font-family:var(--sans); }
#admin-command-center .acc-kind{ font-family:var(--mono); font-size:9.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:2px 7px; border-radius:6px; }
#admin-command-center .acc-kind.rose{ background:var(--acc-rose-50); color:var(--acc-rose); }
#admin-command-center .acc-kind.amber{ background:var(--acc-amber-50); color:var(--acc-amber); }
#admin-command-center .acc-attn-meta{ font-size:11.5px; color:var(--tx3); margin-top:3px; }
#admin-command-center .acc-attn-meta .acc-mono{ color:var(--tx2); }
#admin-command-center .acc-attn-act{ display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 12px; white-space:nowrap;
border:1px solid var(--border); border-radius:var(--r-sm); background:var(--surface); font-size:12px; font-weight:600; color:var(--tx2);
#admin-command-center .acc-attn-act{ display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 13px; white-space:nowrap;
border:1px solid var(--border); border-radius:var(--r-sm); background:var(--surface); font-size:12px; font-weight:700; color:var(--tx2);
box-shadow:var(--acc-sh-xs); cursor:pointer; transition:border-color .14s,color .14s,background .14s; font-family:var(--sans); }
#admin-command-center .acc-attn-act:hover{ border-color:var(--acc-600); color:var(--acc-700); background:var(--acc-50); }
#admin-command-center .acc-attn-act.solid{ background:var(--tx); color:#fff; border-color:var(--tx); }
#admin-command-center .acc-attn-act.solid:hover{ background:#000; }
#admin-command-center .acc-attn-act:hover{ border-color:var(--acc-100); color:var(--acc-700); background:var(--acc-50); }
#admin-command-center .acc-attn-act.solid{ background:var(--acc); color:#fff; border-color:var(--acc); box-shadow:var(--acc-sh-accent); }
#admin-command-center .acc-attn-act.solid:hover{ background:var(--acc-600); color:#fff; }
#admin-command-center .acc-attn-foot{ display:flex; align-items:center; justify-content:space-between; gap:12px;
padding:11px 17px; border-top:1px solid var(--border); background:var(--surface-2); font-size:12px; color:var(--tx3); }
padding:12px 18px; border-top:1px solid var(--border); background:var(--surface-2); font-size:12px; color:var(--tx3); }
#admin-command-center .acc-attn-foot b{ color:var(--tx); font-weight:700; }
#admin-command-center .acc-attn-empty{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
padding:46px 16px; text-align:center; color:var(--tx3); }
@@ -655,81 +660,82 @@
/* feed */
#admin-command-center .acc-feed{ padding:6px 8px 8px; max-height:430px; overflow-y:auto; }
#admin-command-center .acc-feed-row{ display:grid; grid-template-columns:30px minmax(0,1fr) auto; gap:11px; align-items:center; padding:9px 10px; border-radius:var(--r); transition:background .14s; }
#admin-command-center .acc-feed-row{ display:grid; grid-template-columns:32px minmax(0,1fr) auto; gap:11px; align-items:center; padding:9px 10px; border-radius:var(--r); transition:background .14s; }
#admin-command-center .acc-feed-row:hover{ background:var(--surface-3); }
#admin-command-center .acc-feed-av{ width:30px; height:30px; border-radius:50%; display:grid; place-items:center; color:#fff; font-size:11px; font-weight:700; }
#admin-command-center .acc-feed-av{ width:32px; height:32px; border-radius:50%; display:grid; place-items:center; color:#fff; font-size:11px; font-weight:700; font-family:var(--sans); }
#admin-command-center .acc-feed-main{ min-width:0; }
#admin-command-center .acc-feed-main b{ font-size:13px; font-weight:600; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#admin-command-center .acc-feed-main b{ font-size:13px; font-weight:700; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#admin-command-center .acc-f-meta{ font-size:11px; color:var(--tx3); margin-top:1px; }
#admin-command-center .acc-feed-right{ text-align:right; }
#admin-command-center .acc-feed-pct{ font-family:var(--mono); font-size:14px; font-weight:700; line-height:1; }
#admin-command-center .acc-feed-pct{ font-family:var(--display); font-size:14px; font-weight:800; line-height:1; font-variant-numeric:tabular-nums; }
#admin-command-center .acc-feed-pct.hi{ color:var(--acc-green); } #admin-command-center .acc-feed-pct.mid{ color:var(--acc-amber); } #admin-command-center .acc-feed-pct.lo{ color:var(--acc-rose); }
#admin-command-center .acc-feed-ago{ font-size:10px; color:var(--tx4); font-family:var(--mono); margin-top:2px; }
#admin-command-center .acc-feed-ago{ font-size:10px; color:var(--tx4); font-family:var(--mono); font-variant-numeric:tabular-nums; margin-top:2px; }
/* subject mini */
#admin-command-center .acc-subj-mini{ padding:13px 17px; border-top:1px solid var(--border); background:var(--surface-2); }
#admin-command-center .acc-sm-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:9px; font-size:11.5px; color:var(--tx3); font-weight:600; }
#admin-command-center .acc-sm-head b{ font-family:var(--mono); color:var(--tx2); }
#admin-command-center .acc-subj-track{ height:9px; border-radius:5px; overflow:hidden; display:flex; background:var(--border); margin-bottom:9px; }
#admin-command-center .acc-subj-mini{ padding:14px 18px; border-top:1px solid var(--border); background:var(--surface-2); }
#admin-command-center .acc-sm-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:9px; font-size:11.5px; color:var(--tx3); font-weight:700; }
#admin-command-center .acc-sm-head b{ font-family:var(--mono); font-variant-numeric:tabular-nums; color:var(--tx2); }
#admin-command-center .acc-subj-track{ height:9px; border-radius:5px; overflow:hidden; display:flex; background:var(--surface-3); margin-bottom:9px; }
#admin-command-center .acc-seg{ height:100%; transition:width .6s cubic-bezier(.22,.72,.28,1); }
#admin-command-center .acc-subj-legend{ display:flex; flex-wrap:wrap; gap:6px 13px; font-size:11px; color:var(--tx3); }
#admin-command-center .acc-subj-legend span{ display:inline-flex; align-items:center; gap:5px; }
#admin-command-center .acc-subj-legend b{ font-family:var(--mono); color:var(--tx2); font-weight:600; }
#admin-command-center .acc-subj-legend b{ font-family:var(--mono); font-variant-numeric:tabular-nums; color:var(--tx2); font-weight:700; }
#admin-command-center .acc-subj-dot{ width:7px; height:7px; border-radius:50%; }
/* section title */
#admin-command-center .acc-sec-title{ display:flex; align-items:center; gap:9px; margin:4px 0 13px;
font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--tx3); }
#admin-command-center .acc-sec-title{ display:flex; align-items:center; gap:9px; margin:6px 0 14px;
font-family:var(--sans); font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--tx3); }
#admin-command-center .acc-sec-title::before{ content:''; width:3px; height:13px; border-radius:99px; background:var(--grad-1); flex:0 0 auto; }
#admin-command-center .acc-ln{ flex:1; height:1px; background:linear-gradient(90deg,var(--border),transparent); }
/* health */
#admin-command-center .acc-health{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:24px; }
#admin-command-center .acc-hcard{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:15px 16px;
box-shadow:var(--acc-sh-xs); transition:transform .16s,box-shadow .16s,border-color .16s; }
#admin-command-center .acc-hcard:hover{ transform:translateY(-2px); box-shadow:var(--acc-sh); border-color:var(--border-2); }
#admin-command-center .acc-hcard-top{ display:flex; align-items:center; gap:9px; margin-bottom:10px; }
#admin-command-center .acc-hcard-ic{ width:28px; height:28px; border-radius:8px; display:grid; place-items:center; background:var(--surface-3); color:var(--tx2); }
#admin-command-center .acc-health{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:26px; }
#admin-command-center .acc-hcard{ background:var(--surface); border:1.5px solid var(--border); border-radius:var(--r-lg); padding:16px 17px;
box-shadow:var(--acc-sh-xs); transition:transform .18s var(--ease-out),box-shadow .18s,border-color .18s; }
#admin-command-center .acc-hcard:hover{ transform:translateY(-3px); box-shadow:var(--acc-sh); border-color:var(--acc-100); }
#admin-command-center .acc-hcard-top{ display:flex; align-items:center; gap:9px; margin-bottom:11px; }
#admin-command-center .acc-hcard-ic{ width:30px; height:30px; border-radius:9px; display:grid; place-items:center; background:var(--acc-50); color:var(--acc); }
#admin-command-center .acc-hcard-ic .acc-ic{ stroke:currentColor; }
#admin-command-center .acc-hn{ font-family:var(--mono); font-size:25px; font-weight:700; letter-spacing:-.02em; line-height:1; }
#admin-command-center .acc-hn{ font-family:var(--display); font-size:24px; font-weight:800; letter-spacing:-.02em; line-height:1; font-variant-numeric:tabular-nums; }
/* results */
#admin-command-center .acc-results{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:24px; }
#admin-command-center .acc-results{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:26px; }
#admin-command-center .acc-rtable{ width:100%; border-collapse:collapse; }
#admin-command-center .acc-rtable th{ text-align:left; font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.06em;
color:var(--tx3); font-weight:600; padding:9px 14px; border-bottom:1px solid var(--border); background:none; position:static; }
#admin-command-center .acc-rtable th{ text-align:left; font-family:var(--sans); font-size:10px; text-transform:uppercase; letter-spacing:.06em;
color:var(--tx3); font-weight:700; padding:10px 15px; border-bottom:1px solid var(--border); background:none; position:static; }
#admin-command-center .acc-rtable th.r,#admin-command-center .acc-rtable td.r{ text-align:right; }
#admin-command-center .acc-rtable td{ padding:10px 14px; font-size:13px; border-bottom:1px solid var(--border); }
#admin-command-center .acc-rtable td{ padding:11px 15px; font-size:13px; border-bottom:1px solid var(--border); }
#admin-command-center .acc-rtable tr:last-child td{ border-bottom:none; }
#admin-command-center .acc-rtable tbody tr{ transition:background .12s; }
#admin-command-center .acc-rtable tbody tr:hover{ background:var(--surface-3); }
#admin-command-center .acc-rt-user{ display:flex; align-items:center; gap:9px; font-weight:600; }
#admin-command-center .acc-rt-user{ display:flex; align-items:center; gap:9px; font-weight:700; }
#admin-command-center .acc-rt-av{ width:26px; height:26px; border-radius:50%; display:grid; place-items:center; color:#fff; font-size:10px; font-weight:700; flex:0 0 auto; }
#admin-command-center .acc-rt-subj{ color:var(--tx2); font-size:12.5px; }
#admin-command-center .acc-rt-score{ font-family:var(--mono); color:var(--tx3); font-size:12px; }
#admin-command-center .acc-rt-pct{ font-family:var(--mono); font-weight:700; font-size:13px; }
#admin-command-center .acc-rt-score{ font-family:var(--mono); font-variant-numeric:tabular-nums; color:var(--tx3); font-size:12px; }
#admin-command-center .acc-rt-pct{ font-family:var(--display); font-weight:800; font-size:13px; font-variant-numeric:tabular-nums; }
#admin-command-center .acc-rt-pct.hi{ color:var(--acc-green); } #admin-command-center .acc-rt-pct.mid{ color:var(--acc-amber); } #admin-command-center .acc-rt-pct.lo{ color:var(--acc-rose); }
/* quick */
#admin-command-center .acc-quick{ display:grid; grid-template-columns:repeat(6,1fr); gap:12px; }
#admin-command-center .acc-qbtn{ display:flex; flex-direction:column; gap:10px; padding:15px 14px; background:var(--surface);
border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--acc-sh-xs); text-align:left; cursor:pointer;
transition:transform .14s,box-shadow .14s,border-color .14s; font-family:var(--sans); }
#admin-command-center .acc-qbtn:hover{ transform:translateY(-2px); box-shadow:var(--acc-sh); border-color:var(--acc-100); }
#admin-command-center .acc-qbtn-ic{ width:34px; height:34px; border-radius:9px; display:grid; place-items:center; background:var(--acc-50); color:var(--acc); }
#admin-command-center .acc-quick{ display:grid; grid-template-columns:repeat(6,1fr); gap:14px; }
#admin-command-center .acc-qbtn{ display:flex; flex-direction:column; gap:11px; padding:16px 15px; background:var(--surface);
border:1.5px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--acc-sh-xs); text-align:left; cursor:pointer;
transition:transform .16s var(--ease-out),box-shadow .16s,border-color .16s; font-family:var(--sans); }
#admin-command-center .acc-qbtn:hover{ transform:translateY(-3px); box-shadow:var(--acc-sh); border-color:var(--acc-100); }
#admin-command-center .acc-qbtn-ic{ width:36px; height:36px; border-radius:10px; display:grid; place-items:center; background:var(--acc-50); color:var(--acc); }
#admin-command-center .acc-qbtn-ic .acc-ic{ stroke:currentColor; }
#admin-command-center .acc-qbtn b{ font-size:13px; font-weight:700; letter-spacing:-.01em; }
#admin-command-center .acc-qbtn span{ font-size:11px; color:var(--tx3); font-family:var(--mono); }
/* foot */
#admin-command-center .acc-foot{ margin-top:26px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;
#admin-command-center .acc-foot{ margin-top:28px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;
font-size:12px; color:var(--tx4); font-family:var(--mono); }
/* skeleton */
@keyframes acc-shimmer{ 0%{ background-position:-400px 0 } 100%{ background-position:400px 0 } }
#admin-command-center .acc-skel{ border-radius:var(--r-lg);
background:linear-gradient(90deg,var(--border) 25%,var(--surface) 50%,var(--border) 75%); background-size:400px 100%;
#admin-command-center .acc-skel{ border-radius:var(--r-lg); border:1.5px solid var(--border);
background:linear-gradient(90deg,var(--surface-3) 25%,var(--surface) 50%,var(--surface-3) 75%); background-size:400px 100%;
animation:acc-shimmer 1.4s infinite linear; }
#admin-command-center .acc-skel-cards{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:14px; margin-bottom:22px; }
#admin-command-center .acc-skel-cards{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:16px; margin-bottom:24px; }
#admin-command-center .acc-skel-cards .acc-skel{ height:118px; }
#admin-command-center .acc-skel-rows{ display:flex; flex-direction:column; gap:12px; }
#admin-command-center .acc-skel.row{ height:60px; }