:root { color-scheme:dark; --bg:#0a1020; --panel:#121c31; --panel2:#17233b; --line:#263550; --text:#f4f7fb; --muted:#92a1ba; --mint:#22e7b8; --pink:#f15bb5; --red:#fb7185; --yellow:#fbbf24; }
* { box-sizing:border-box; } body { margin:0; min-height:100vh; background:var(--bg); color:var(--text); font-family:"Plus Jakarta Sans",system-ui,sans-serif; }
button,input,select { font:inherit; } button { cursor:pointer; } .admin-app { min-height:100vh; display:grid; grid-template-columns:246px minmax(0,1fr); }
.sidebar { display:flex; flex-direction:column; padding:26px 16px 18px; background:#0d1628; border-right:1px solid var(--line); }
.admin-brand { display:grid; color:#fff; text-decoration:none; font-weight:800; font-size:22px; letter-spacing:-1px; padding:0 10px 30px; } .admin-brand span { color:var(--mint); margin-left:4px; } .admin-brand small { margin-top:5px; color:var(--muted); font:500 9px "DM Mono",monospace; letter-spacing:.16em; }
.sidebar-nav { display:grid; gap:6px; } .sidebar-nav button { display:flex; align-items:center; gap:12px; width:100%; border:0; border-radius:10px; background:transparent; color:var(--muted); padding:12px; text-align:left; font-size:13px; font-weight:700; } .sidebar-nav button:hover,.sidebar-nav button.active { color:#06120f; background:var(--mint); } .sidebar-nav button b { width:18px; text-align:center; font-size:16px; }
.sidebar-footer { margin-top:auto; display:flex; align-items:center; gap:8px; padding:12px 10px 0; color:var(--muted); font:11px "DM Mono",monospace; } .live-dot { width:7px; height:7px; border-radius:50%; background:var(--mint); box-shadow:0 0 12px var(--mint); }
.workspace { min-width:0; background:radial-gradient(circle at 75% -30%,#173049 0,transparent 37%),var(--bg); }.topbar { min-height:100px; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:20px 34px; border-bottom:1px solid var(--line); }.topbar p { margin:0 0 5px; color:var(--mint); font:500 10px "DM Mono",monospace; letter-spacing:.15em; }.topbar h1 { margin:0; font-size:22px; letter-spacing:-.7px; }.top-actions { display:flex; align-items:center; gap:12px; }.ghost-button { color:var(--text); background:transparent; border:1px solid var(--line); border-radius:8px; padding:9px 12px; font-size:12px; font-weight:700; }.ghost-button:hover { border-color:var(--mint); color:var(--mint); }.identity { max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:8px 10px; border-radius:8px; color:var(--muted); background:rgba(255,255,255,.04); font-size:11px; }.mobile-menu { display:none; }
.content { padding:28px 34px 50px; }.notice { margin:18px 34px 0; padding:12px 14px; border:1px solid rgba(251,191,36,.4); border-radius:9px; color:#fde68a; background:rgba(251,191,36,.08); font-size:12px; }.loading,.empty { padding:50px 20px; color:var(--muted); text-align:center; }.kpi-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }.kpi { padding:17px; border:1px solid var(--line); border-radius:12px; background:rgba(18,28,49,.84); }.kpi small { display:block; color:var(--muted); font-size:11px; }.kpi strong { display:block; margin-top:8px; font-size:28px; letter-spacing:-1px; }.kpi .trend { margin-top:7px; color:var(--mint); font-size:10px; }
.dashboard-grid { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(260px,1fr); gap:14px; margin-top:14px; }.card { border:1px solid var(--line); border-radius:12px; background:rgba(18,28,49,.84); overflow:hidden; }.card-header { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:15px 17px; border-bottom:1px solid var(--line); }.card h2 { margin:0; font-size:13px; }.card-subtle { color:var(--muted); font:10px "DM Mono",monospace; }.chart { min-height:255px; display:flex; align-items:flex-end; gap:5px; padding:26px 17px 16px; }.bar-wrap { display:flex; flex:1; min-width:7px; height:190px; flex-direction:column; justify-content:flex-end; gap:3px; }.bar { min-height:3px; border-radius:4px 4px 0 0; background:linear-gradient(180deg,#49f0c3,var(--mint)); }.bar.official { background:var(--pink); opacity:.9; }.bar-label { margin-top:7px; color:var(--muted); font:9px "DM Mono",monospace; text-align:center; }.breakdown { display:grid; gap:0; }.breakdown-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 17px; border-bottom:1px solid rgba(38,53,80,.7); color:var(--muted); font-size:12px; }.breakdown-row:last-child { border-bottom:0; }.breakdown-row b { color:var(--text); font-family:"DM Mono",monospace; }
.toolbar { display:flex; flex-wrap:wrap; gap:9px; margin-bottom:14px; }.toolbar input,.toolbar select { min-height:36px; color:var(--text); background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:0 10px; font-size:12px; }.toolbar input { width:min(320px,100%); }.toolbar button { min-height:36px; color:#07120f; background:var(--mint); border:0; border-radius:8px; padding:0 13px; font-size:12px; font-weight:800; }
.table-card { overflow:auto; }.data-table { width:100%; min-width:860px; border-collapse:collapse; text-align:left; font-size:12px; }.data-table th { position:sticky; top:0; padding:12px 14px; color:var(--muted); background:#121c31; border-bottom:1px solid var(--line); font:500 10px "DM Mono",monospace; letter-spacing:.05em; }.data-table td { padding:13px 14px; border-bottom:1px solid rgba(38,53,80,.7); vertical-align:top; }.data-table tr:hover td { background:rgba(255,255,255,.02); }.primary { font-weight:700; }.secondary { display:block; max-width:320px; margin-top:4px; overflow:hidden; color:var(--muted); font-size:11px; text-overflow:ellipsis; white-space:nowrap; }.mono { font-family:"DM Mono",monospace; font-size:10px; }.chip { display:inline-block; margin:0 3px 3px 0; padding:3px 6px; border:1px solid var(--line); border-radius:5px; color:#cdd9ee; font:9px "DM Mono",monospace; }.chip.hidden,.chip.suspended { border-color:rgba(251,113,133,.4); color:#fda4af; }.chip.official { border-color:rgba(34,231,184,.4); color:var(--mint); }.action { border:1px solid var(--line); border-radius:6px; background:transparent; color:#dbeafe; padding:6px 8px; font-size:10px; font-weight:700; }.action.danger { color:#fda4af; border-color:rgba(251,113,133,.4); }.action:hover { border-color:var(--mint); color:var(--mint); }.pagination { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:13px 15px; color:var(--muted); font-size:11px; }.pagination div { display:flex; gap:6px; }.pagination button { border:1px solid var(--line); background:transparent; color:var(--text); border-radius:6px; padding:5px 8px; font-size:11px; }.pagination button:disabled { opacity:.4; cursor:not-allowed; }
.unauthorized { width:min(480px,calc(100% - 32px)); margin:15vh auto; padding:38px; text-align:center; border:1px solid var(--line); border-radius:18px; background:var(--panel); }.unauthorized .lock { font-size:42px; }.unauthorized h1 { margin:15px 0 8px; }.unauthorized p { color:var(--muted); line-height:1.6; font-size:13px; }.unauthorized a { display:inline-block; margin-top:12px; padding:10px 14px; border-radius:8px; background:var(--mint); color:#05120f; text-decoration:none; font-weight:800; font-size:12px; }
@media (max-width:850px) { .admin-app { grid-template-columns:1fr; }.sidebar { position:fixed; z-index:10; inset:0 auto 0 0; width:236px; transform:translateX(-102%); transition:transform .2s; }.admin-app.menu-open .sidebar { transform:translateX(0); box-shadow:30px 0 50px rgba(0,0,0,.4); }.mobile-menu { display:block; border:0; color:var(--text); background:transparent; font-size:23px; }.topbar { min-height:78px; padding:16px 18px; }.topbar h1 { font-size:18px; }.top-actions .ghost-button { display:none; }.identity { max-width:135px; }.content { padding:18px; }.notice { margin:14px 18px 0; }.kpi-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.dashboard-grid { grid-template-columns:1fr; }.chart { min-height:190px; }.bar-wrap { height:130px; } }