:root { --ink:#14213d; --muted:#697386; --line:#e7eaf0; --surface:#fff; --canvas:#f5f7fb; --nav:#0d1831; --primary:#5b62e8; --primary-soft:#eef0ff; }
* { box-sizing:border-box; }
html { font-size:15px; min-height:100%; }
body { margin:0; min-height:100vh; color:var(--ink); background:var(--canvas); font-family:Inter,"Segoe UI",sans-serif; }
a { color:inherit; text-decoration:none; }
.app-shell { min-height:100vh; display:flex; }
.sidebar { width:245px; position:fixed; inset:0 auto 0 0; z-index:20; display:flex; flex-direction:column; color:#c7d0e4; background:var(--nav); }
.brand { height:78px; padding:17px 22px; display:flex; align-items:center; gap:12px; border-bottom:1px solid rgba(255,255,255,.08); color:#fff; }
.brand-mark { width:38px; height:38px; display:grid; place-items:center; border-radius:11px; background:linear-gradient(135deg,#777df1,#4c54d6); font-weight:800; font-size:20px; }
.brand strong { display:block; letter-spacing:.12em; font-size:14px; }
.brand small,.sidebar-user small { display:block; color:#7f8ba5; font-size:11px; margin-top:2px; }
.side-nav { padding:18px 12px; flex:1; overflow-y:auto; }
.nav-label { margin:18px 12px 8px; color:#64708b; font-size:10px; font-weight:700; letter-spacing:.14em; }
.side-nav a { display:flex; gap:12px; align-items:center; padding:10px 12px; margin:3px 0; border-radius:9px; font-size:13px; font-weight:600; }
.side-nav a span { width:19px; text-align:center; font-size:17px; color:#8793b1; }
.side-nav a:hover,.side-nav a.active { background:rgba(105,112,236,.18); color:#fff; }
.side-nav a.active span { color:#8e94ff; }
.sidebar-user { display:flex; align-items:center; gap:9px; padding:17px; border-top:1px solid rgba(255,255,255,.08); font-size:12px; }
.sidebar-user>div:nth-child(2) { min-width:0; flex:1; }
.sidebar-user strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.avatar { width:34px; height:34px; border-radius:50%; display:grid; place-items:center; background:#343f60; color:#fff; font-weight:700; }
.sidebar-user button { border:0; background:transparent; color:#8490ab; font-size:18px; }
.app-main { min-width:0; flex:1; margin-left:245px; }
.topbar { height:64px; padding:0 30px; display:flex; align-items:center; gap:15px; border-bottom:1px solid var(--line); background:#fff; }
.topbar-title { flex:1; color:var(--muted); font-size:13px; }
.live-dot { display:flex; align-items:center; gap:7px; color:#578071; font-size:12px; }
.live-dot span { width:8px; height:8px; border-radius:50%; background:#25bc83; box-shadow:0 0 0 4px #e0f7ef; }
.menu-button { display:none; border:0; background:transparent; font-size:21px; }
.page-content { max-width:1480px; padding:30px; margin:0 auto; }
.page-head { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:22px; }
.page-head h1 { margin:0 0 5px; font-size:25px; font-weight:750; letter-spacing:-.02em; }
.page-head p { margin:0; color:var(--muted); font-size:13px; }
.eyebrow { color:var(--primary); font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.card { border:1px solid var(--line); border-radius:13px; background:var(--surface); box-shadow:0 2px 5px rgba(22,34,63,.025); }
.card-pad { padding:22px; }
.metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:22px; }
.metric { padding:19px; }
.metric-label { color:var(--muted); font-size:12px; font-weight:600; }
.metric-value { margin:8px 0 2px; font-size:28px; font-weight:750; }
.metric-note { color:#8a94a6; font-size:11px; }
.metric-icon { float:right; width:38px; height:38px; display:grid; place-items:center; border-radius:10px; color:var(--primary); background:var(--primary-soft); font-size:19px; }
.section-grid { display:grid; grid-template-columns:2fr 1fr; gap:18px; }
.section-title { margin:0; font-size:15px; font-weight:700; }
.section-subtitle { color:var(--muted); font-size:12px; margin-top:4px; }
.quick-links { display:grid; gap:10px; margin-top:18px; }
.quick-link { display:flex; align-items:center; justify-content:space-between; padding:13px; border:1px solid var(--line); border-radius:10px; font-size:13px; font-weight:600; }
.quick-link:hover { border-color:#c9cdfb; background:#fafaff; }
.filter-card { padding:14px; margin-bottom:16px; }
.filter-row { display:grid; grid-template-columns:minmax(220px,2fr) repeat(4,minmax(125px,1fr)) auto; gap:10px; align-items:end; }
.field label { display:block; margin:0 0 5px; color:var(--muted); font-size:11px; font-weight:650; }
.form-control,.form-select { min-height:40px; border-color:#dfe3eb; border-radius:8px; font-size:13px; }
.form-control:focus,.form-select:focus { border-color:#8e94ef; box-shadow:0 0 0 3px rgba(91,98,232,.1); }
.btn { min-height:40px; border-radius:8px; font-size:13px; font-weight:650; }
.btn-primary { border-color:var(--primary); background:var(--primary); }
.btn-primary:hover { border-color:#4a51d2; background:#4a51d2; }
.btn-soft { border:1px solid #dfe2fb; background:var(--primary-soft); color:#4e56d2; }
.table-card { overflow:hidden; }
.panel-table { width:100%; margin:0; }
.panel-table th { padding:12px 15px; border-bottom:1px solid var(--line); background:#fafbfc; color:#717b8d; font-size:10px; font-weight:750; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; }
.panel-table td { padding:14px 15px; border-bottom:1px solid #edf0f4; color:#354158; font-size:12.5px; vertical-align:middle; }
.panel-table tr:last-child td { border-bottom:0; }
.panel-table tbody tr:hover { background:#fbfbfe; }
.primary-cell { color:var(--ink); font-weight:650; }
.secondary-cell { display:block; margin-top:3px; color:#8a94a6; font-size:11px; font-weight:400; }
.badge-soft { display:inline-flex; align-items:center; gap:5px; padding:4px 8px; border-radius:20px; font-size:10.5px; font-weight:700; background:#eef1f5; color:#697386; }
.badge-soft.green { background:#e8f8f2; color:#16825f; }
.badge-soft.red { background:#fdeced; color:#c53e4a; }
.badge-soft.orange { background:#fff2e5; color:#bd6a1d; }
.badge-soft.purple { background:var(--primary-soft); color:#5158cc; }
.pagination-bar { display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-top:1px solid var(--line); color:var(--muted); font-size:12px; }
.pagination-actions { display:flex; gap:6px; }
.pagination-actions a { padding:7px 11px; border:1px solid var(--line); border-radius:7px; background:#fff; }
.pagination-actions a.disabled { pointer-events:none; opacity:.45; }
.detail-grid { display:grid; grid-template-columns:minmax(0,2fr) minmax(280px,1fr); gap:18px; }
.info-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 28px; margin-top:20px; }
.info-item span { display:block; color:var(--muted); font-size:11px; margin-bottom:4px; }
.info-item strong { font-size:13px; overflow-wrap:anywhere; }
.divider { height:1px; margin:22px 0; background:var(--line); }
.timeline { margin-top:18px; }
.timeline-item { position:relative; padding:0 0 18px 22px; border-left:1px solid #dde2eb; }
.timeline-item::before { content:""; position:absolute; left:-5px; top:2px; width:9px; height:9px; border-radius:50%; background:var(--primary); box-shadow:0 0 0 3px #edeefe; }
.timeline-item:last-child { border-left-color:transparent; }
.timeline-item strong { display:block; font-size:12px; }
.timeline-item span { display:block; color:var(--muted); font-size:11px; margin-top:3px; }
.conversation { display:grid; gap:13px; margin:20px 0; }
.message { max-width:82%; padding:12px 14px; border-radius:12px 12px 12px 3px; background:#f0f2f6; font-size:13px; white-space:pre-wrap; }
.message.admin { margin-left:auto; border-radius:12px 12px 3px 12px; background:var(--primary-soft); }
.message-meta { display:flex; gap:8px; margin-bottom:6px; color:var(--muted); font-size:10px; }
.empty-state { padding:48px 20px; text-align:center; color:var(--muted); }
.empty-state strong { display:block; color:var(--ink); margin-bottom:5px; }
.alert { border:0; border-radius:10px; font-size:13px; }
.login-page { min-height:100vh; display:grid; grid-template-columns:1.15fr 1fr; background:#fff; }
.login-visual { position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; padding:50px; color:#fff; background:radial-gradient(circle at 18% 18%,#273865 0,transparent 38%),linear-gradient(145deg,#101b35,#091124); }
.login-visual::after { content:""; position:absolute; width:420px; height:420px; right:-150px; bottom:-100px; border:1px solid rgba(129,137,255,.25); border-radius:50%; box-shadow:0 0 0 70px rgba(129,137,255,.04),0 0 0 140px rgba(129,137,255,.03); }
.login-brand { display:flex; align-items:center; gap:12px; font-weight:800; letter-spacing:.12em; }
.login-visual h1 { max-width:480px; font-size:41px; line-height:1.14; letter-spacing:-.03em; }
.login-visual p { max-width:450px; color:#9faac2; line-height:1.7; }
.login-form-wrap { display:grid; place-items:center; padding:35px; }
.login-form { width:min(390px,100%); }
.login-form h2 { margin:0 0 8px; font-size:27px; }
.login-form>p { color:var(--muted); margin-bottom:28px; }
.login-form .field { margin-bottom:16px; }
.login-form .btn { width:100%; margin-top:8px; }
.validation-summary-errors { padding:11px 14px; margin-bottom:16px; border-radius:8px; background:#fdeced; color:#b73642; font-size:12px; }
.validation-summary-errors ul { margin:0; padding-left:18px; }
pre.stack { max-height:500px; padding:16px; overflow:auto; white-space:pre-wrap; background:#121a2c; color:#d8e0f0; border-radius:9px; font-size:11px; }
@media (max-width:1100px) { .metrics { grid-template-columns:repeat(2,1fr); } .filter-row { grid-template-columns:repeat(3,1fr); } }
@media (max-width:800px) { .sidebar { transform:translateX(-100%); transition:transform .2s ease; } .sidebar.open { transform:translateX(0); } .app-main { margin-left:0; } .menu-button { display:block; } .page-content { padding:20px 14px; } .detail-grid,.section-grid { grid-template-columns:1fr; } .login-page { grid-template-columns:1fr; } .login-visual { display:none; } .table-card { overflow-x:auto; } .panel-table { min-width:760px; } }
@media (max-width:560px) { .metrics { grid-template-columns:1fr; } .filter-row,.info-list { grid-template-columns:1fr; } .page-head { align-items:flex-start; flex-direction:column; } }