:root{--bg-canvas:#0b0e14;--bg-surface:#12151c;--bg-surface-hover:#171b24;--bg-elevated:#1a1e28;--bg-input:#10131a;--border-subtle:#1f2430;--border-default:#2a3040;--border-strong:#3a4258;--text-primary:#e7e9ee;--text-secondary:#9aa3b5;--text-muted:#6b7385;--text-on-accent:#f6f8ff;--accent:#5b8cff;--accent-hover:#4577f0;--accent-soft-bg:rgba(91,140,255,.12);--accent-soft-border:rgba(91,140,255,.28);--success:#34d399;--success-bg:rgba(52,211,153,.12);--success-border:rgba(52,211,153,.28);--warning:#f0b429;--warning-bg:rgba(240,180,41,.12);--warning-border:rgba(240,180,41,.28);--danger:#f16565;--danger-bg:hsla(0,83%,67%,.12);--danger-border:hsla(0,83%,67%,.28);--critical:#ff3b3b;--critical-bg:rgba(255,59,59,.16);--critical-border:rgba(255,59,59,.4);--info:#6aa9ff;--info-bg:rgba(106,169,255,.12);--info-border:rgba(106,169,255,.28);--neutral-bg:rgba(154,163,181,.12);--neutral-border:rgba(154,163,181,.24);--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--radius-sm:6px;--radius-md:8px;--radius-lg:12px;--shadow-sm:0 1px 2px rgba(0,0,0,.4);--shadow-md:0 4px 16px rgba(0,0,0,.45);--shadow-lg:0 12px 32px rgba(0,0,0,.5);--sidebar-width:248px;--sidebar-width-collapsed:68px;--topbar-height:56px;--font-sans:-apple-system,"Inter","Segoe UI",Roboto,Helvetica,Arial,sans-serif}*{box-sizing:border-box}body,html{height:100%}body{margin:0;font-family:var(--font-sans);background:var(--bg-canvas);color:var(--text-primary);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--radius-sm)}.app-shell{display:flex;min-height:100vh}.sidebar{width:var(--sidebar-width);background:var(--bg-surface);border-right:1px solid var(--border-subtle);display:flex;flex-direction:column;flex-shrink:0;transition:width .18s ease;position:-webkit-sticky;position:sticky;top:0;height:100vh;overflow:hidden}.sidebar.collapsed{width:var(--sidebar-width-collapsed)}.sidebar-brand{gap:var(--space-3);height:var(--topbar-height);padding:0 var(--space-4);border-bottom:1px solid var(--border-subtle);white-space:nowrap;overflow:hidden}.sidebar-brand,.sidebar-brand-mark{display:flex;align-items:center;flex-shrink:0}.sidebar-brand-mark{width:28px;height:28px;border-radius:var(--radius-sm);background:var(--accent);color:var(--text-on-accent);justify-content:center;font-weight:700;font-size:13px}.sidebar-brand-name{font-weight:600;font-size:14px;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis}.sidebar-nav{flex:1 1;overflow-y:auto;padding:var(--space-3) var(--space-2);display:flex;flex-direction:column;gap:2px}.sidebar-nav a{display:flex;align-items:center;gap:var(--space-3);padding:9px var(--space-3);border-radius:var(--radius-sm);color:var(--text-secondary);font-size:13.5px;font-weight:500;white-space:nowrap;overflow:hidden}.sidebar-nav a svg{flex-shrink:0;opacity:.9}.sidebar-nav a:hover{background:var(--bg-surface-hover);color:var(--text-primary)}.sidebar-nav a.active{background:var(--accent-soft-bg);color:var(--accent);font-weight:600}.sidebar-nav a.active svg{opacity:1}.sidebar-nav .label{overflow:hidden;text-overflow:ellipsis}.sidebar.collapsed .sidebar-brand-name,.sidebar.collapsed .sidebar-nav .label{display:none}.sidebar.collapsed .sidebar-nav a{justify-content:center;padding:9px}.sidebar-collapse-btn{display:flex;align-items:center;justify-content:center;gap:var(--space-2);margin:var(--space-2);padding:8px;border-radius:var(--radius-sm);color:var(--text-muted);cursor:pointer;font-size:12.5px;background:none;border:none;border-top:1px solid var(--border-subtle)}.sidebar-collapse-btn:hover{background:var(--bg-surface-hover);color:var(--text-secondary)}.shell-body{flex:1 1;display:flex;flex-direction:column;min-width:0}.topbar{height:var(--topbar-height);border-bottom:1px solid var(--border-subtle);background:var(--bg-canvas);display:flex;align-items:center;justify-content:space-between;padding:0 var(--space-6);flex-shrink:0;position:-webkit-sticky;position:sticky;top:0;z-index:10}.topbar-breadcrumb{font-size:13.5px;color:var(--text-secondary);font-weight:500}.topbar-breadcrumb strong{color:var(--text-primary);font-weight:600}.topbar-user{gap:var(--space-3);position:relative}.topbar-user,.topbar-user-btn{display:flex;align-items:center}.topbar-user-btn{gap:var(--space-2);padding:6px 10px 6px 6px;border-radius:var(--radius-md);cursor:pointer;background:none;border:1px solid transparent;color:var(--text-primary);font-size:13px}.topbar-user-btn:hover{background:var(--bg-surface);border-color:var(--border-subtle)}.topbar-user-avatar{width:26px;height:26px;border-radius:50%;background:var(--accent-soft-bg);color:var(--accent);display:flex;align-items:center;justify-content:center;flex-shrink:0}.topbar-user-menu{position:absolute;top:calc(100% + 6px);right:0;background:var(--bg-elevated);border:1px solid var(--border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);min-width:200px;padding:var(--space-2);z-index:30}.topbar-user-menu-item{display:flex;align-items:center;gap:var(--space-2);padding:8px 10px;border-radius:var(--radius-sm);font-size:13px;color:var(--text-secondary);cursor:pointer}.topbar-user-menu-item:hover{background:var(--bg-surface-hover);color:var(--text-primary)}.topbar-user-menu-item.danger{color:var(--danger)}.topbar-user-menu-divider{height:1px;background:var(--border-subtle);margin:var(--space-2) 4px}.main{flex:1 1;padding:var(--space-6) var(--space-8);max-width:1280px;width:100%}.main h1{font-size:21px;letter-spacing:-.01em;margin:0 0 4px}.main h1,.main h2{font-weight:650;color:var(--text-primary)}.main h2{font-size:15px;margin:var(--space-6) 0 var(--space-3)}.main .subtitle{color:var(--text-secondary);margin-bottom:var(--space-6);font-size:13.5px}.page-header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-4);margin-bottom:var(--space-6)}.page-header-actions{display:flex;gap:var(--space-2);flex-shrink:0}.card{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:var(--space-5);box-shadow:var(--shadow-sm);margin-bottom:var(--space-5)}.card-tight{padding:var(--space-4)}.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));grid-gap:var(--space-4);gap:var(--space-4)}.stat-card{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:var(--space-4) var(--space-5)}.stat-card .stat-label{font-size:12.5px;color:var(--text-muted);font-weight:500;margin-bottom:6px}.stat-card .stat-value{font-size:26px;font-weight:650;color:var(--text-primary);letter-spacing:-.02em}table{width:100%;border-collapse:collapse;font-size:13.5px}td,th{text-align:left;padding:11px var(--space-3);border-bottom:1px solid var(--border-subtle)}th{color:var(--text-muted);font-weight:600;font-size:11.5px;text-transform:uppercase;letter-spacing:.03em}tbody tr:hover{background:var(--bg-surface-hover)}tbody tr:last-child td{border-bottom:none}.table-toolbar{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-4);flex-wrap:wrap}.table-search{position:relative;flex:1 1;min-width:200px;max-width:320px}.table-search svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--text-muted)}.table-search input{width:100%;padding-left:32px}.table-pagination{display:flex;align-items:center;gap:var(--space-3);margin-top:var(--space-4);font-size:13px;color:var(--text-secondary)}.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:var(--radius-sm);font-size:12px;font-weight:600;border:1px solid transparent;white-space:nowrap}.badge.gray{background:var(--neutral-bg);color:var(--text-secondary);border-color:var(--neutral-border)}.badge.green{background:var(--success-bg);color:var(--success);border-color:var(--success-border)}.badge.yellow{background:var(--warning-bg);color:var(--warning);border-color:var(--warning-border)}.badge.red{background:var(--danger-bg);color:var(--danger);border-color:var(--danger-border)}.badge.blue{background:var(--info-bg);color:var(--info);border-color:var(--info-border)}.badge.critical{background:var(--critical-bg);color:var(--critical);border-color:var(--critical-border);font-weight:700}.badge.accent{background:var(--accent-soft-bg);color:var(--accent);border-color:var(--accent-soft-border)}.badge-dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0}form.inline-form{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-bottom:var(--space-4)}label{display:block;font-size:12.5px;font-weight:500;color:var(--text-secondary);margin-bottom:6px}input,select,textarea{padding:9px 11px;border:1px solid var(--border-default);border-radius:var(--radius-md);font-size:13.5px;font-family:inherit;background:var(--bg-input);color:var(--text-primary)}input::placeholder,textarea::placeholder{color:var(--text-muted)}input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft-bg)}button,select{cursor:pointer}button{padding:8px 16px;border-radius:var(--radius-md);border:1px solid transparent;background:var(--accent);color:var(--text-on-accent);font-size:13.5px;font-weight:600;font-family:inherit;transition:background .12s ease,opacity .12s ease;display:inline-flex;align-items:center;gap:6px}button:hover{background:var(--accent-hover)}button:disabled{opacity:.45;cursor:not-allowed}button.secondary{background:var(--bg-elevated);color:var(--text-primary);border-color:var(--border-default)}button.secondary:hover{background:var(--bg-surface-hover);border-color:var(--border-strong)}button.danger{background:var(--danger);color:#1a0000}button.danger:hover{opacity:.88;background:var(--danger)}button.ghost{background:none;color:var(--text-secondary);border-color:transparent}button.ghost:hover{background:var(--bg-surface-hover);color:var(--text-primary)}button.icon-btn{padding:7px}.modal-overlay{position:fixed;inset:0;background:rgba(6,8,12,.65);display:flex;align-items:center;justify-content:center;z-index:100;padding:var(--space-4)}.modal{background:var(--bg-elevated);border:1px solid var(--border-default);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);width:100%;max-width:480px;padding:var(--space-6)}.modal h2{margin-top:0}.drawer-overlay{position:fixed;inset:0;background:rgba(6,8,12,.55);z-index:100}.drawer{position:fixed;top:0;right:0;height:100vh;width:420px;max-width:92vw;background:var(--bg-elevated);border-left:1px solid var(--border-default);box-shadow:var(--shadow-lg);padding:var(--space-6);overflow-y:auto;z-index:101}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-3);color:var(--text-muted);padding:var(--space-10) var(--space-4);text-align:center}.empty-state svg{opacity:.5}.empty-state-title{font-size:14px;font-weight:600;color:var(--text-secondary)}.empty-state-desc{font-size:13px;max-width:320px}.loading-spinner{display:inline-block;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(1turn)}}.error-text{color:var(--danger);background:var(--danger-bg);border:1px solid var(--danger-border);border-radius:var(--radius-md)}.error-text,.success-text{display:flex;align-items:center;gap:var(--space-2);padding:10px 14px;font-size:13.5px;margin:var(--space-3) 0}.success-text{color:var(--success);background:var(--success-bg);border:1px solid var(--success-border);border-radius:var(--radius-md)}.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 20% 20%,rgba(91,140,255,.08),transparent 40%),var(--bg-canvas)}.login-card{background:var(--bg-surface);border:1px solid var(--border-subtle);padding:var(--space-8);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);width:380px}.login-card-mark{width:40px;height:40px;border-radius:var(--radius-md);background:var(--accent);color:var(--text-on-accent);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:17px;margin-bottom:var(--space-5)}.login-card h1{font-size:19px;margin-bottom:4px}.login-card .subtitle{color:var(--text-secondary);font-size:13.5px;margin-bottom:var(--space-6)}.login-card label{margin-top:var(--space-3)}.login-card input{width:100%}.login-card button{width:100%;justify-content:center;margin-top:var(--space-6);padding:10px}.media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));grid-gap:var(--space-4);gap:var(--space-4)}.media-tile{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-md);overflow:hidden}.media-tile-thumb{aspect-ratio:1;background:var(--bg-input);display:flex;align-items:center;justify-content:center;color:var(--text-muted)}.media-tile-body{padding:var(--space-3)}.media-tile-name{font-size:12.5px;font-weight:500;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:6px}@media (max-width:1024px){.sidebar{position:fixed;z-index:50;transform:translateX(-100%)}.sidebar.mobile-open{transform:translateX(0)}.main{padding:var(--space-4)}.topbar{padding:0 var(--space-4)}}@media (max-width:640px){.stat-grid{grid-template-columns:1fr 1fr}table{font-size:12.5px}}