:root{
  --bg:#040814;
  --panel:#0c1630;
  --panel-2:#0f1b38;
  --glass:rgba(13,25,54,.72);
  --glass-2:rgba(13,25,54,.52);
  --stroke:rgba(129,179,255,.18);
  --text:#ecf4ff;
  --muted:#9fb2d8;
  --cyan:#31dcff;
  --cyan-2:#5ca2ff;
  --violet:#8d7cff;
  --green:#54f3ba;
  --amber:#ffba6a;
  --danger:#ff6d8f;
  --shadow:0 18px 48px rgba(0,0,0,.34),0 0 42px rgba(54,143,255,.14);
  --radius:26px;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Inter,Segoe UI,Tahoma,sans-serif;background:radial-gradient(circle at top,#0b1942 0%,#050a18 34%,#030610 100%);color:var(--text)}
body{overflow-x:hidden}
button,input,select{font:inherit}
button{cursor:pointer}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}
[hidden]{display:none!important}

.bg-grid,.ambient{position:fixed;inset:0;pointer-events:none}
.bg-grid{background:
  linear-gradient(rgba(95,133,255,.06) 1px,transparent 1px),
  linear-gradient(90deg,rgba(95,133,255,.06) 1px,transparent 1px);
  background-size:60px 60px;mask-image:radial-gradient(circle at 50% 30%,#000 30%,transparent 95%);opacity:.4}
.ambient{filter:blur(90px);opacity:.55}
.ambient-a{background:radial-gradient(circle at 20% 20%,rgba(37,195,255,.33),transparent 35%)}
.ambient-b{background:radial-gradient(circle at 80% 10%,rgba(115,76,255,.24),transparent 28%)}
.ambient-c{background:radial-gradient(circle at 40% 90%,rgba(0,92,255,.20),transparent 36%)}

.glass,.glass-soft{position:relative;background:linear-gradient(180deg,rgba(15,29,63,.75),rgba(9,19,41,.78));border:1px solid var(--stroke);box-shadow:var(--shadow);backdrop-filter:blur(20px)}
.glass{border-radius:var(--radius)}
.glass-soft{border-radius:22px;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.025));border:1px solid rgba(255,255,255,.08)}

.login-screen{min-height:100vh;display:grid;place-items:center;padding:34px;position:relative;z-index:2}
.login-panel{width:min(1060px,100%);display:grid;grid-template-columns:minmax(280px,420px) minmax(320px,520px);gap:30px;align-items:center;padding:34px}
.login-brand{display:grid;place-items:center;padding:22px}
.login-brand img{width:min(100%,390px);filter:drop-shadow(0 0 45px rgba(49,220,255,.22))}
.login-card{display:flex;flex-direction:column;gap:14px;padding:34px;background:linear-gradient(180deg,rgba(6,13,27,.28),rgba(6,13,27,.14));border:1px solid rgba(255,255,255,.07);border-radius:22px}
.login-card h1{margin:0;font-size:clamp(30px,4vw,48px);line-height:1.15}
.login-card h1 span,.hero h1 span{color:#71d5ff;text-shadow:0 0 22px rgba(49,220,255,.65)}
.login-card label,.settings-form label,.form-grid label{display:flex;flex-direction:column;gap:8px;color:#cfe0ff;font-size:14px}
.login-card input,.settings-form input,.form-grid input,.form-grid select,#log-search,#log-filter,#monitor-target{width:100%;padding:14px 16px;background:rgba(4,9,20,.72);color:var(--text);border:1px solid rgba(102,156,255,.18);border-radius:14px;outline:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.02)}
.login-card input:focus,.settings-form input:focus,.form-grid input:focus,.form-grid select:focus,#log-search:focus,#log-filter:focus,#monitor-target:focus{border-color:rgba(49,220,255,.6);box-shadow:0 0 0 4px rgba(49,220,255,.12)}

.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.24em;color:#8eb8ff;text-transform:uppercase}
.eyebrow-dot{width:8px;height:8px;border-radius:999px;background:var(--cyan);box-shadow:0 0 18px var(--cyan)}
.muted{color:var(--muted);line-height:1.8}
.error-text{min-height:20px;color:#ff8ea7;font-size:13px}

.app-shell{display:grid;grid-template-columns:320px 1fr;gap:24px;padding:24px;min-height:100vh;position:relative;z-index:2}
.sidebar{position:sticky;top:24px;height:calc(100vh - 48px);padding:20px;display:flex;flex-direction:column;overflow:hidden}
.sidebar-glow{position:absolute;inset:auto -30% -20% auto;width:220px;height:220px;background:radial-gradient(circle,rgba(49,220,255,.18),transparent 65%);filter:blur(10px)}
.brand{display:flex;gap:14px;align-items:center;margin-bottom:18px}
.brand-image{width:72px;height:72px;border-radius:20px;object-fit:cover;box-shadow:0 0 24px rgba(49,220,255,.25)}
.brand-copy strong{display:block;font-size:18px;letter-spacing:.04em}
.brand-copy small{display:block;color:#86a8db;letter-spacing:.12em}
.brand-copy small span{color:#71d5ff}
.side-label{font-size:11px;letter-spacing:.24em;color:#6f87b5;margin:18px 0 10px}
.nav-stack{display:flex;flex-direction:column;gap:9px}
.nav-link{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:16px;background:transparent;border:1px solid transparent;color:#d9e6ff;transition:.24s ease;text-align:right}
.nav-link:hover,.nav-link.active{background:linear-gradient(180deg,rgba(16,73,140,.38),rgba(12,42,86,.34));border-color:rgba(70,164,255,.34);box-shadow:0 0 28px rgba(48,145,255,.15)}
.nav-icon{display:grid;place-items:center;width:24px;height:24px;font-size:16px;color:#82d7ff}
.nav-chevron{margin-inline-start:auto;color:#8eb8ff}
.sidebar-bottom{margin-top:auto;padding:14px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.connection-state{display:flex;gap:10px;align-items:center}
.connection-state small,.sidebar-version{color:#8da5cf}
.pulse-dot{width:11px;height:11px;border-radius:999px;background:#4dffc0;box-shadow:0 0 18px #4dffc0;animation:pulse 1.6s infinite}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.72);opacity:.6}}
.logout,.icon-btn{display:grid;place-items:center;border:none;background:rgba(255,255,255,.06);color:#fff;border-radius:14px;width:42px;height:42px}
.sidebar-version{font-size:12px;text-align:center;padding-top:12px}

.workspace{min-width:0}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:10px 6px 22px}
.breadcrumbs{display:flex;align-items:center;gap:10px;color:#b4c8eb}
.dim{opacity:.5}
.mobile-menu{display:none;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);color:#fff;border-radius:12px;padding:10px 12px}
.top-actions{display:flex;align-items:center;gap:12px}
.mini-status{display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;background:rgba(255,255,255,.05);font-size:12px;color:#a9c2eb}
.mini-status i{width:8px;height:8px;border-radius:999px;background:#44f0af;box-shadow:0 0 16px #44f0af}
.clock{padding:10px 14px;border-radius:999px;background:rgba(255,255,255,.05);font-variant-numeric:tabular-nums}
.avatar{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#41d2ff,#5c79ff);font-weight:800;box-shadow:0 0 24px rgba(69,177,255,.35)}

.content{display:flex;flex-direction:column;gap:24px}
.page-head,.section-title{display:flex;justify-content:space-between;align-items:end;gap:16px;margin-bottom:16px}
.page-head h1,.section-title h2,.panel-heading h3,.resource-card h3{margin:0}
.hero{padding:26px;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.5fr minmax(250px,.9fr);gap:24px;align-items:center}
.hero h1{font-size:clamp(34px,4vw,56px);margin:8px 0 12px}
.hero p{max-width:760px;color:#b2c4e5;line-height:2;margin:0 0 18px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.hero-visual{padding:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;min-height:260px}
.hero-visual img{max-width:260px;filter:drop-shadow(0 0 30px rgba(49,220,255,.26))}
.hero-badges{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.hero-badges span{padding:7px 12px;border-radius:999px;background:rgba(255,255,255,.06);font-size:11px;letter-spacing:.18em;color:#9fd3ff}

.btn{border:none;border-radius:16px;padding:12px 16px;color:#eaf4ff;transition:.22s ease;display:inline-flex;align-items:center;gap:8px;justify-content:center}
.btn.primary{background:linear-gradient(135deg,#39d0ff,#5c82ff);box-shadow:0 10px 28px rgba(76,142,255,.32)}
.btn.ghost{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08)}
.btn.small{padding:9px 12px;border-radius:12px;font-size:13px}
.btn.danger{color:#ff9fb0;border-color:rgba(255,120,140,.22)}
.btn:hover{transform:translateY(-1px)}
.btn.full{width:100%}

.stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.stat{padding:18px;min-height:154px;display:flex;flex-direction:column;justify-content:space-between}
.stat-top{display:flex;align-items:center;justify-content:space-between;gap:14px}
.stat-top small{color:#8ea9d8}
.stat-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;background:rgba(255,255,255,.06);font-size:18px}
.stat-icon.cyan{color:var(--cyan)} .stat-icon.violet{color:var(--violet)} .stat-icon.green{color:var(--green)} .stat-icon.amber{color:var(--amber)}
.stat-value{font-size:44px;font-weight:800;line-height:1;margin-top:22px}
.stat-foot{font-size:12px;color:#8fa8cf;display:flex;justify-content:flex-end;align-items:center;gap:6px}
.signal{font-size:10px}.cyan-text{color:var(--cyan)}.violet-text{color:var(--violet)}.green-text{color:var(--green)}.amber-text{color:var(--amber)}

.dash-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(320px,.8fr);gap:20px}
.panel{padding:20px}
.panel-heading{display:flex;justify-content:space-between;align-items:start;gap:12px;margin-bottom:18px}
.live-badge{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:rgba(95,255,194,.08);color:#8cf4c7;font-size:12px}
.live-badge i{width:8px;height:8px;border-radius:999px;background:#64ffc5;box-shadow:0 0 14px #64ffc5}
.mini-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:18px}
.mini-metrics div,.detail-metrics div{padding:14px;border-radius:18px;background:rgba(255,255,255,.03)}
.mini-metrics span,.detail-metrics small{display:block;color:#89a3ce;font-size:12px;margin-bottom:6px}
.mini-metrics strong,.detail-metrics strong{font-size:24px}
.chart-wrap{height:230px;padding:8px 0}
.chart-wrap svg{width:100%;height:100%}
.chart-line{fill:none;stroke:#2ff1ff;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 14px rgba(47,241,255,.85))}
.chart-area{fill:url(#chart-fill)}
.chart-labels{display:flex;justify-content:space-between;color:#8ca7d4;font-size:12px}
.actions-panel .panel-icon{color:#8fdfff;font-size:20px}
.quick-action{width:100%;display:flex;align-items:center;gap:14px;padding:18px;margin-top:12px;border:none;border-radius:18px;background:rgba(255,255,255,.04);color:var(--text);text-align:right}
.quick-action b{margin-inline-start:auto;color:#93d8ff}
.quick-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:14px;background:rgba(255,255,255,.08)}
.quick-icon.cyan{color:var(--cyan)} .quick-icon.violet{color:var(--violet)} .quick-icon.green{color:var(--green)}

.resource-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
.resource-card{padding:18px}
.resource-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:16px}
.resource-card small{color:#8ba7d2}
.status{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:8px 12px;background:rgba(255,255,255,.06);color:#adc2e4;font-size:12px;text-transform:capitalize}
.status.online,.status.active,.status.issued{background:rgba(84,243,186,.12);color:#92f4ca}
.status.offline,.status.failed,.status.error{background:rgba(255,109,143,.12);color:#ffa5bb}
.detail-line{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.06);color:#a9bddc}
.detail-line:last-of-type{border-bottom:none}
.detail-line b{color:#eef5ff;font-weight:600;text-align:left}
.card-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.table-panel{overflow:hidden}
.table-scroll{overflow:auto}
.table-scroll table{width:100%;border-collapse:collapse;min-width:760px}
.table-scroll th,.table-scroll td{padding:15px 14px;border-bottom:1px solid rgba(255,255,255,.07);text-align:right}
.table-scroll thead th{font-size:12px;letter-spacing:.08em;color:#85a3d0}
.not-available{text-align:center;color:#98aed0}
.notice{display:flex;gap:10px;align-items:center;padding:14px 16px;border-radius:18px;background:rgba(255,186,106,.08);border:1px solid rgba(255,186,106,.16);color:#ffcf94;margin-bottom:16px}
.metric-bars{display:flex;flex-direction:column;gap:16px}
.metric-row{display:flex;flex-direction:column;gap:10px}
.metric-label{display:flex;justify-content:space-between;gap:12px;color:#cfe0ff}
.track{height:14px;border-radius:999px;background:rgba(255,255,255,.06);overflow:hidden}
.track-fill{height:100%;width:0;border-radius:999px;transition:width .3s ease}
.cyan-fill{background:linear-gradient(90deg,#23d8ff,#68c5ff)}
.violet-fill{background:linear-gradient(90deg,#6d7bff,#9b74ff)}
.green-fill{background:linear-gradient(90deg,#3dffbd,#83ffc8)}
.detail-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:18px 0}
.log-list{display:flex;flex-direction:column;gap:10px}
.filter-row{display:flex;gap:12px;margin-bottom:16px}
.log-line{display:grid;grid-template-columns:180px 88px 100px 1fr;gap:12px;align-items:start;padding:14px 16px;border-radius:16px;background:rgba(255,255,255,.04);font-size:14px}
.log-line time, .log-line code{color:#8da6ce}
.severity{display:inline-flex;justify-content:center;align-items:center;padding:8px 10px;border-radius:999px;background:rgba(255,255,255,.06);text-transform:uppercase;font-size:12px}
.severity.info{color:#8edbff}.severity.error{color:#ff9eb6}.severity.warn{color:#ffd58e}
.empty{min-height:180px;display:grid;place-items:center;text-align:center;padding:28px;color:#a7bbdb;gap:8px}
.empty-icon{font-size:38px;color:#76d8ff}
.settings-panel{display:grid;grid-template-columns:320px 1fr;gap:18px;align-items:start}
.settings-brand{padding:16px;display:flex;align-items:center;gap:14px}
.settings-brand img{width:96px;height:96px;border-radius:20px;object-fit:cover}
.settings-brand strong{display:block;font-size:22px}
.settings-form{display:grid;gap:14px}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.form-grid label select{margin-top:8px}
.modal{position:fixed;inset:0;background:rgba(2,4,10,.66);display:grid;place-items:center;padding:24px;z-index:30}
.modal-card{width:min(760px,100%);padding:24px;position:relative}
.close-btn{position:absolute;top:18px;left:18px}
.modal-actions{display:flex;justify-content:flex-start;gap:12px;margin-top:18px}
.toasts{position:fixed;left:20px;bottom:20px;display:flex;flex-direction:column;gap:10px;z-index:50;max-width:min(420px,92vw)}
.toast{padding:14px 16px;border-radius:16px;background:rgba(8,18,40,.88);border:1px solid rgba(255,255,255,.08);box-shadow:var(--shadow)}
.toast.good{border-color:rgba(84,243,186,.18)}.toast.bad{border-color:rgba(255,109,143,.18)}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}

@media (max-width:1200px){
  .app-shell{grid-template-columns:280px 1fr}
  .stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dash-grid,.hero-grid,.settings-panel,.login-panel{grid-template-columns:1fr}
  .hero-visual{order:-1}
}
@media (max-width:860px){
  .app-shell{grid-template-columns:1fr;padding:16px}
  .sidebar{position:fixed;top:16px;right:16px;bottom:16px;width:min(310px,90vw);transform:translateX(calc(100% + 24px));transition:transform .25s ease;z-index:25}
  .sidebar.open{transform:translateX(0)}
  .mobile-menu{display:inline-grid}
  .topbar{padding-top:6px}
  .stat-grid,.mini-metrics,.detail-metrics,.form-grid{grid-template-columns:1fr}
  .filter-row{flex-direction:column}
  .log-line{grid-template-columns:1fr}
  .login-screen{padding:18px}
  .login-card{padding:24px}
}