:root {
  color-scheme: dark;
  --bg0: #08101d;
  --bg1: #0d1726;
  --bg2: #111d2e;
  --bg3: #172438;
  --bg4: #213149;
  --surface: rgba(17, 29, 46, .86);
  --border: rgba(148, 163, 184, .12);
  --border2: rgba(148, 163, 184, .22);
  --accent: #14b8a6;
  --accent2: #5eead4;
  --accent-dim: rgba(20, 184, 166, .12);
  --green: #34d399;
  --green-dim: rgba(52, 211, 153, .11);
  --red: #fb7185;
  --red-dim: rgba(251, 113, 133, .11);
  --amber: #fbbf24;
  --amber-dim: rgba(251, 191, 36, .11);
  --blue: #60a5fa;
  --blue-dim: rgba(96, 165, 250, .11);
  --text0: #f8fafc;
  --text1: #b8c5d6;
  --text2: #718198;
  --sidebar-w: 264px;
  --font: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --shadow: 0 18px 50px rgba(2, 8, 23, .2);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--bg0); scroll-behavior: smooth; }
body { min-height: 100vh; background: radial-gradient(circle at 65% -20%, rgba(20,184,166,.09), transparent 35%), var(--bg0); color: var(--text0); font-family: var(--font); font-size: 14px; line-height: 1.5; }
button, input, select, textarea { font: inherit; }
a { color: inherit; }
::selection { background: rgba(20,184,166,.3); color: #fff; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #2a3a52; border: 2px solid transparent; border-radius: 20px; background-clip: padding-box; }

.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 100; display: flex; width: var(--sidebar-w); flex-direction: column; overflow: hidden; border-right: 1px solid var(--border); background: rgba(9, 18, 31, .96); box-shadow: 10px 0 35px rgba(2,8,23,.12); backdrop-filter: blur(18px); }
.sidebar-logo { display: flex; min-height: 78px; align-items: center; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--border); }
.logo-icon { display: grid; width: 38px; height: 38px; flex: 0 0 auto; place-items: center; border: 1px solid rgba(94,234,212,.3); border-radius: 11px; background: linear-gradient(145deg, #19c3b0, #0d9488); box-shadow: 0 10px 24px rgba(20,184,166,.18); color: #042f2e; font-size: 17px; font-weight: 900; }
.logo-text { color: var(--text0); font-size: 15px; font-weight: 750; letter-spacing: -.01em; }
.logo-caption { margin-top: 1px; color: var(--text2); font-size: 10px; font-weight: 650; letter-spacing: .09em; text-transform: uppercase; }
.sidebar-close { display: none; margin-left: auto; border: 0; background: transparent; color: var(--text1); font-size: 25px; cursor: pointer; }
.sidebar > div:nth-child(2) { scrollbar-gutter: stable; }
.sidebar-section { padding: 18px 12px 0; }
.sidebar-section-label { padding: 0 10px; margin-bottom: 7px; color: #53657c; font-size: 10px; font-weight: 750; letter-spacing: .13em; text-transform: uppercase; }
.nav-item { position: relative; display: flex; align-items: center; gap: 11px; min-height: 42px; padding: 9px 11px; margin-bottom: 3px; border: 1px solid transparent; border-radius: 10px; color: #8fa0b7; font-size: 13px; font-weight: 600; text-decoration: none; transition: .16s ease; }
.nav-item:hover { border-color: var(--border); background: rgba(255,255,255,.035); color: var(--text0); transform: translateX(2px); }
.nav-item.active { border-color: rgba(20,184,166,.18); background: linear-gradient(90deg, rgba(20,184,166,.16), rgba(20,184,166,.05)); color: var(--accent2); }
.nav-item.active::before { position: absolute; inset: 9px auto 9px -13px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); content: ""; }
.nav-icon { width: 18px; height: 18px; flex: 0 0 auto; opacity: .8; }
.nav-item.active .nav-icon { opacity: 1; }
.nav-badge { margin-left: auto; padding: 2px 7px; border-radius: 99px; background: var(--red); color: #fff; font: 700 10px var(--mono); }
.nav-badge.green { background: var(--green); color: #022c22; }
.nav-badge.amber { background: var(--amber); color: #422006; }
.sidebar-bottom { margin-top: auto; padding: 14px; border-top: 1px solid var(--border); }
.user-card { display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--border); border-radius: 12px; background: rgba(255,255,255,.025); }
.user-avatar { display: grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; border: 1px solid rgba(20,184,166,.28); border-radius: 10px; background: var(--accent-dim); color: var(--accent2); font-size: 11px; font-weight: 800; }
.user-copy { min-width: 0; flex: 1; }
.user-name { overflow: hidden; color: var(--text0); font-size: 12px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.user-grade { color: var(--text2); font: 10px var(--mono); }
.online-dot { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px var(--green-dim); }
.sidebar-backdrop { display: none; }

.main { min-height: 100vh; margin-left: var(--sidebar-w); }
.topbar { position: sticky; top: 0; z-index: 50; display: flex; height: 68px; align-items: center; gap: 16px; padding: 0 clamp(20px, 3vw, 42px); border-bottom: 1px solid var(--border); background: rgba(8,16,29,.78); backdrop-filter: blur(18px); }
.topbar-copy { min-width:0; flex:1; }
.topbar-eyebrow { margin-bottom:1px; color:var(--text2); font-size:9px; font-weight:750; letter-spacing:.1em; text-transform:uppercase; }
.topbar-title { min-width: 0; font-size: 14px; font-weight: 750; letter-spacing: -.01em; }
.topbar-status { display: flex; align-items: center; gap: 7px; color: var(--text2); font-size: 11px; font-weight: 600; }
.topbar-status span { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px var(--green-dim); }
.menu-toggle { display: none; width: 38px; height: 38px; place-items: center; border: 1px solid var(--border); border-radius: 10px; background: var(--bg2); color: var(--text1); cursor: pointer; }
.menu-toggle svg { width: 19px; height: 19px; }
.page { width: 100%; max-width: 1680px; margin: 0 auto; padding: clamp(22px, 3vw, 42px); animation: page-in .28s ease both; }
@keyframes page-in { from { opacity: 0; transform: translateY(5px); } }

.section-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 22px; }
.section-title { color: var(--text0); font-size: clamp(21px, 2vw, 28px); font-weight: 760; letter-spacing: -.035em; }
.section-sub { margin-top: 4px; color: var(--text2); font-size: 13px; }
.page-kicker { margin-bottom:5px; color:var(--accent2); font-size:10px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.header-counter { display:flex; align-items:center; gap:11px; padding:9px 12px; border:1px solid var(--border); border-radius:11px; background:rgba(17,29,46,.7); }.header-counter strong { font:750 20px var(--mono); }.header-counter span { max-width:55px; color:var(--text2); font-size:9px; line-height:1.25; text-transform:uppercase; }
.command-hero { position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:30px; align-items:center; overflow:hidden; margin-bottom:34px; padding:32px; border:1px solid rgba(94,234,212,.16); border-radius:20px; background:linear-gradient(120deg,rgba(20,184,166,.13),rgba(17,29,46,.82) 50%,rgba(17,29,46,.96)); box-shadow:var(--shadow); }
.command-hero::after { position:absolute; right:-90px; top:-160px; width:330px; height:330px; border:1px solid rgba(94,234,212,.11); border-radius:50%; box-shadow:0 0 0 42px rgba(20,184,166,.025),0 0 0 84px rgba(20,184,166,.018); content:""; pointer-events:none; }
.command-hero-copy { position:relative; z-index:1; }
.command-kicker { display:flex; align-items:center; gap:8px; margin-bottom:12px; color:var(--accent2); font-size:10px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.command-kicker span { width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 0 4px var(--green-dim); }
.command-hero h1 { max-width:700px; font-size:clamp(25px,3vw,39px); font-weight:780; letter-spacing:-.05em; line-height:1.08; }
.command-hero p { margin-top:12px; color:var(--text1); font-size:13px; }
.command-actions { position:relative; z-index:1; display:grid; min-width:225px; gap:8px; }
.quick-action { display:flex; align-items:center; gap:11px; padding:10px 12px; border:1px solid var(--border); border-radius:11px; background:rgba(8,16,29,.54); text-decoration:none; transition:.15s; }
.quick-action:hover { border-color:var(--border2); transform:translateX(-3px); background:var(--bg3); }
.quick-action > span { display:grid; width:32px; height:32px; place-items:center; border-radius:9px; background:var(--bg4); color:var(--accent2); font-weight:800; }
.quick-action strong,.quick-action small { display:block; }.quick-action strong { font-size:12px; }.quick-action small { margin-top:1px; color:var(--text2); font-size:10px; }
.quick-action.primary { border-color:rgba(20,184,166,.25); background:var(--accent-dim); }.quick-action.primary > span { background:var(--accent); color:#033532; }
.section-label-row { display:flex; align-items:center; justify-content:space-between; margin:0 2px 12px; }.section-label-row span { font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }.section-label-row small { color:var(--text2); font-size:10px; }
.stat-icon { position:absolute; top:18px; right:18px; color:rgba(148,163,184,.28); font:700 10px var(--mono); }
.card-kicker { margin-bottom:2px; color:var(--text2); font-size:9px; font-weight:750; letter-spacing:.09em; text-transform:uppercase; }
.live-pill { display:flex; align-items:center; gap:6px; padding:4px 8px; border:1px solid rgba(52,211,153,.16); border-radius:99px; background:var(--green-dim); color:var(--green); font-size:9px; font-weight:750; }.live-pill i { width:5px; height:5px; border-radius:50%; background:currentColor; }
.text-link { color:var(--accent2); font-size:10px; font-weight:650; text-decoration:none; }
.card { overflow: hidden; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); box-shadow: 0 1px 0 rgba(255,255,255,.02); backdrop-filter: blur(8px); }
.card-header { display: flex; min-height: 56px; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.card-title { color: var(--text0); font-size: 13px; font-weight: 720; }
.card-body { padding: 18px; }
.data-panel-head { display:flex; align-items:center; justify-content:space-between; padding:13px 16px; border-bottom:1px solid var(--border); background:rgba(8,16,29,.25); }.data-panel-head strong,.data-panel-head span { display:block; }.data-panel-head strong { font-size:12px; }.data-panel-head span { color:var(--text2); font-size:10px; }.density-control { color:var(--text2); font-size:10px; }
.stats-row { gap:10px !important; margin-bottom:24px !important; }
.mini-stat { position:relative; overflow:hidden; min-height:88px; padding:17px 18px !important; border-radius:13px !important; background:linear-gradient(145deg,rgba(23,36,56,.9),rgba(13,23,38,.9)) !important; }
.mini-stat::after { position:absolute; right:-17px; bottom:-25px; width:70px; height:70px; border:1px solid var(--border); border-radius:50%; content:""; }
.mini-stat-val { font-size:24px !important; letter-spacing:-.04em; }.mini-stat-label { margin-top:5px !important; font-size:10px !important; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.work-queue { display:grid; gap:9px; }
.work-queue .ticket-row,.work-queue .report-row { position:relative; border:1px solid var(--border); border-radius:13px; background:rgba(17,29,46,.72); box-shadow:0 5px 18px rgba(2,8,23,.08); }
.work-queue .ticket-row { padding:16px 18px; }.work-queue .report-row { padding:16px; }
.work-queue .ticket-row:hover,.work-queue .report-row:hover { border-color:rgba(20,184,166,.25); background:var(--bg3); transform:translateY(-1px); }
.work-queue .ticket-id { display:grid; min-width:40px; height:32px; place-items:center; border:1px solid var(--border); border-radius:8px; background:var(--bg2); }

.btn { display: inline-flex; min-height: 38px; align-items: center; justify-content: center; gap: 7px; padding: 8px 14px; border: 1px solid transparent; border-radius: 9px; font-size: 12px; font-weight: 700; line-height: 1; text-decoration: none; cursor: pointer; transition: .15s ease; }
.btn:hover { transform: translateY(-1px); }
.btn-primary { border-color: rgba(94,234,212,.18); background: linear-gradient(180deg, #20c8b5, #0f9f92); box-shadow: 0 8px 20px rgba(20,184,166,.13); color: #032d2b; }
.btn-primary:hover { filter: brightness(1.07); }
.btn-ghost { border-color: var(--border); background: rgba(255,255,255,.025); color: var(--text1); }
.btn-ghost:hover { border-color: var(--border2); background: var(--bg3); color: var(--text0); }
.btn-danger { border-color: rgba(251,113,133,.2); background: var(--red-dim); color: var(--red); }
.btn-danger:hover { background: rgba(251,113,133,.17); }
.logout-btn { min-height: 36px; }

.filters-row, .filter-bar { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.filters-row { margin-bottom: 18px; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: rgba(17,29,46,.62); }
.search-input, .filter-select, input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="date"], input[type="datetime-local"], textarea, select { min-height: 40px; border: 1px solid var(--border2); border-radius: 9px; outline: none; background: #0c1727; color: var(--text0); font-size: 13px; transition: .15s ease; }
.search-input, input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="date"], input[type="datetime-local"], textarea { padding: 9px 12px; }
.filter-select, select { padding: 8px 34px 8px 11px; }
.search-input { min-width: 220px; flex: 1; }
textarea { resize: vertical; line-height: 1.55; }
.search-input:focus, .filter-select:focus, input:focus, textarea:focus, select:focus { border-color: rgba(20,184,166,.7); box-shadow: 0 0 0 3px rgba(20,184,166,.09); }
input::placeholder, textarea::placeholder { color: #53657c; }
label { color: var(--text2); font-size: 11px; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }
.page > div[style*="max-width:600px"],.page > div[style*="max-width:700px"] { max-width:780px !important; margin:0 auto; }
.page > div[style*="max-width:600px"] > div[style*="background:var(--bg2)"],.page > div[style*="max-width:700px"] > div[style*="background:var(--bg2)"] { padding:30px !important; border-radius:17px !important; box-shadow:var(--shadow); }

table { width: 100%; border-collapse: collapse; font-size: 13px; }
thead th { padding: 11px 14px; border-bottom: 1px solid var(--border); background: rgba(8,16,29,.3); color: var(--text2); font-size: 10px; font-weight: 750; letter-spacing: .09em; text-align: left; text-transform: uppercase; white-space: nowrap; }
tbody tr { border-bottom: 1px solid var(--border); transition: background .12s; }
tbody tr:last-child { border-bottom: 0; }
tbody tr:hover { background: rgba(255,255,255,.025); }
tbody td { padding: 13px 14px; color: var(--text1); vertical-align: middle; }
.player-cell { display: flex; align-items: center; gap: 10px; }
.player-skin { display: grid; width: 32px; height: 32px; flex: 0 0 auto; place-items: center; border: 1px solid var(--border); border-radius: 9px; background: linear-gradient(145deg, var(--bg4), var(--bg3)); font-size: 14px; }
.player-name { color: var(--text0); font-size: 12px; font-weight: 700; }
.player-uuid { color: var(--text2); font: 10px var(--mono); }
.badge { display: inline-flex; align-items: center; padding: 3px 8px; border: 1px solid; border-radius: 99px; font: 700 10px var(--mono); letter-spacing: .01em; }
.badge-red { border-color: rgba(251,113,133,.2); background: var(--red-dim); color: var(--red); }
.badge-green { border-color: rgba(52,211,153,.2); background: var(--green-dim); color: var(--green); }
.badge-amber { border-color: rgba(251,191,36,.2); background: var(--amber-dim); color: var(--amber); }
.badge-blue { border-color: rgba(96,165,250,.2); background: var(--blue-dim); color: var(--blue); }
.badge-purple { border-color: rgba(20,184,166,.2); background: var(--accent-dim); color: var(--accent2); }
.badge-gray { border-color: var(--border); background: rgba(255,255,255,.035); color: var(--text1); }

.stat-card { min-height: 132px; border-radius: 14px !important; padding: 21px !important; background: linear-gradient(145deg, rgba(23,36,56,.95), rgba(13,23,38,.92)) !important; box-shadow: var(--shadow); }
.stat-card::before { inset: 0 auto 0 0 !important; width: 3px !important; height: auto !important; }
.stat-label { margin-bottom: 16px !important; color: var(--text2) !important; font-size: 10px !important; font-weight: 750 !important; }
.stat-value { font-size: 31px !important; letter-spacing: -.05em; }
.progress-bar { height: 7px !important; border: 0 !important; background: var(--bg4) !important; }
.resource-pill { background: rgba(255,255,255,.025) !important; }

.lia-launcher { position: fixed; right: 24px; bottom: 24px; z-index: 900; display: grid; width: 52px; height: 52px; place-items: center; border: 1px solid rgba(94,234,212,.3); border-radius: 15px; background: linear-gradient(145deg, #20c8b5, #0f9388); box-shadow: 0 18px 45px rgba(2,8,23,.45); color: #033532; cursor: pointer; transition: .15s; }
.lia-launcher:hover { transform: translateY(-2px) scale(1.02); }
.lia-launcher svg { width: 23px; height: 23px; }
.lia-drawer { position: fixed; right: 24px; bottom: 88px; z-index: 901; display: none; width: min(430px, calc(100vw - 32px)); height: min(650px, calc(100vh - 116px)); flex-direction: column; overflow: hidden; border: 1px solid var(--border2); border-radius: 17px; background: rgba(13,23,38,.98); box-shadow: 0 28px 80px rgba(2,8,23,.55); backdrop-filter: blur(20px); }
.lia-drawer.open { display: flex; animation: drawer-in .18s ease both; }
@keyframes drawer-in { from { opacity: 0; transform: translateY(8px) scale(.98); } }
.lia-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 17px; border-bottom: 1px solid var(--border); background: rgba(8,16,29,.5); }
.lia-title { font-size: 13px; font-weight: 800; }
.lia-subtitle, .lia-meta { color: var(--text2); font: 9px var(--mono); }
.lia-close { display: grid; width: 31px; height: 31px; place-items: center; border: 1px solid var(--border); border-radius: 9px; background: var(--bg3); color: var(--text1); cursor: pointer; }
.lia-body { display: flex; flex: 1; flex-direction: column; gap: 12px; overflow-y: auto; padding: 15px; }
.lia-empty { max-width: 290px; margin: auto; color: var(--text2); font-size: 12px; line-height: 1.7; text-align: center; }
.lia-empty-mark { display: grid; width: 44px; height: 44px; margin: 0 auto 12px; place-items: center; border: 1px solid rgba(20,184,166,.25); border-radius: 13px; background: var(--accent-dim); color: var(--accent2); font-weight: 800; }
.lia-msg { display: flex; max-width: 88%; flex-direction: column; gap: 4px; }
.lia-msg.user { align-self: flex-end; align-items: flex-end; }
.lia-msg.assistant { align-self: flex-start; }
.lia-bubble { padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg3); color: var(--text0); font-size: 12px; line-height: 1.55; word-break: break-word; }
.lia-msg.user .lia-bubble { border-color: rgba(20,184,166,.25); border-bottom-right-radius: 4px; background: var(--accent-dim); }
.lia-msg.assistant .lia-bubble { border-bottom-left-radius: 4px; }
.lia-context { display: flex; justify-content: space-between; gap: 10px; padding: 9px 13px; border-top: 1px solid var(--border); background: rgba(8,16,29,.5); color: var(--text2); font: 9px var(--mono); }
.lia-input { display: grid; grid-template-columns: 1fr 40px; gap: 8px; padding: 12px; border-top: 1px solid var(--border); background: rgba(8,16,29,.5); }
.lia-input textarea { min-height: 40px; max-height: 110px; resize: none; }
.lia-send { display: grid; width: 40px; height: 40px; place-items: center; border: 0; border-radius: 10px; background: var(--accent); color: #033532; cursor: pointer; }
.lia-send:disabled { opacity: .45; }
.lia-send svg { width: 17px; height: 17px; }
.lia-pending { padding: 11px 12px; border: 1px solid rgba(251,191,36,.25); border-radius: 12px; background: var(--amber-dim); color: var(--text1); font-size: 12px; }
.lia-pending-title { margin-bottom: 5px; color: var(--amber); font-weight: 800; }
.lia-pending button { margin-top: 9px; padding: 7px 10px; border: 0; border-radius: 8px; background: var(--amber); color: #422006; font-size: 11px; font-weight: 800; cursor: pointer; }

@media (max-width: 1200px) {
  .grid-5 { grid-template-columns: repeat(3, 1fr) !important; }
  .grid-2 { grid-template-columns: 1fr !important; }
  .board { grid-template-columns: repeat(5, minmax(260px, 1fr)) !important; padding-bottom: 8px; }
}
@media (max-width: 900px) {
  .sidebar { transform: translateX(-102%); transition: transform .2s ease; }
  .sidebar.open { transform: translateX(0); }
  .sidebar-backdrop { position: fixed; inset: 0; z-index: 90; background: rgba(2,8,23,.65); backdrop-filter: blur(3px); }
  .sidebar-backdrop.open { display: block; }
  .sidebar-close { display: block; }
  .main { margin-left: 0; }
  .menu-toggle { display: grid; }
  .topbar { padding-inline: 18px; }
  .topbar-status { display: none; }
  .page { padding: 24px 18px 34px; }
  body.nav-open { overflow: hidden; }
  .command-hero { grid-template-columns:1fr; }.command-actions { grid-template-columns:repeat(3,1fr); }.quick-action { min-width:0; }
  .grid-5 { grid-template-columns: repeat(2, 1fr) !important; }
  .page > div[style*="grid-template-columns:2fr 1fr"] { grid-template-columns: 1fr !important; }
}
@media (max-width: 640px) {
  .topbar { height: 60px; }
  .logout-btn span { display: none; }
  .logout-btn { width: 38px; padding: 0; }
  .section-header { align-items: flex-start; flex-direction: column; }
  .header-counter { width:100%; }.ticket-meta { display:none !important; }.work-queue .report-row { align-items:flex-start; }
  .command-hero { padding:24px 20px; }.command-actions { grid-template-columns:1fr; }.quick-action:hover { transform:none; }
  .filters-row { align-items: stretch; }
  .filters-row > * { width: 100%; }
  .search-input { min-width: 0; }
  .grid-5 { grid-template-columns: 1fr !important; }
  .stat-card { min-height: 116px; }
  .card { overflow-x: auto; }
  table { min-width: 680px; }
  .lia-launcher { right: 16px; bottom: 16px; }
  .lia-drawer { right: 16px; bottom: 78px; height: min(600px, calc(100vh - 96px)); }
}