:root { --lv-sidebar: #101827; --lv-accent: #0f8b8d; --lv-ink: #172033; --lv-line: #dde5ef; }
body { background: #f4f7fb; color: var(--lv-ink); }
.app-shell { min-height: 100vh; display: flex; }
.sidebar { width: 270px; background: linear-gradient(180deg, #0b1220 0%, #142033 100%); color: #fff; flex-shrink: 0; box-shadow: inset -1px 0 0 rgba(255,255,255,.08); }
.sidebar a { color: rgba(255,255,255,.76); text-decoration: none; display: block; padding: .6rem .9rem; border-radius: .45rem; font-weight: 500; }
.sidebar a:hover, .sidebar a.active { color: #fff; background: rgba(15,139,141,.22); }
.content { flex: 1; min-width: 0; }
.topbar { background: rgba(255,255,255,.9); border-bottom: 1px solid var(--lv-line); backdrop-filter: blur(12px); }
.topbar-subtitle { font-size: .78rem; color: #667085; margin-top: -.2rem; }
.metric { border-left: 4px solid var(--lv-accent); box-shadow: 0 14px 34px rgba(16,24,40,.06); }
.table-card { background: rgba(255,255,255,.96); border: 1px solid #e4eaf2; border-radius: .75rem; box-shadow: 0 16px 40px rgba(16,24,40,.06); }
.table-card h2, .table-card h3 { letter-spacing: 0; }
.form-control, .form-select { border-color: #d7e0ea; background-color: #fbfdff; }
.form-control:focus, .form-select:focus { border-color: var(--lv-accent); box-shadow: 0 0 0 .2rem rgba(15,139,141,.14); }
.form-check-input:checked { background-color: var(--lv-accent); border-color: var(--lv-accent); }
.btn, .card, .modal-content { border-radius: .5rem; }
.btn-primary { background: linear-gradient(135deg, #0f8b8d, #1565d8); border: 0; }
.btn-outline-secondary { border-color: #cbd5e1; color: #475467; }
.badge.text-bg-light { background: #f8fbff !important; color: #344054 !important; }
.table { --bs-table-hover-bg: #f8fbff; }
@media (max-width: 900px) { .app-shell { display: block; } .sidebar { width: 100%; } }

.login-screen {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(360px, 520px) 1fr;
  background:
    radial-gradient(circle at 80% 20%, rgba(15, 139, 141, .22), transparent 28rem),
    linear-gradient(135deg, #07111f 0%, #101827 45%, #f5f7fb 45%, #f5f7fb 100%);
}
.login-panel { padding: clamp(2rem, 5vw, 5rem); color: #fff; display: flex; flex-direction: column; justify-content: center; }
.login-brand { display: flex; gap: 1rem; align-items: center; margin-bottom: 2rem; }
.login-mark { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 12px; background: #0f8b8d; font-weight: 800; letter-spacing: 0; }
.login-brand h1 { font-size: 1.45rem; margin: 0; letter-spacing: 0; }
.login-brand p { color: rgba(255,255,255,.68); margin: .2rem 0 0; }
.login-card { background: rgba(255,255,255,.96); color: #132033; border: 1px solid rgba(255,255,255,.55); border-radius: 14px; padding: 2rem; box-shadow: 0 24px 80px rgba(3, 8, 20, .36); }
.login-card h2 { font-size: 2rem; margin: 0; letter-spacing: 0; }
.eyebrow { color: #0f8b8d; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; margin-bottom: .25rem; }
.login-card .form-control { border-color: #d7dee9; background: #fbfcfe; }
.login-card .form-control:focus { border-color: #0f8b8d; box-shadow: 0 0 0 .25rem rgba(15,139,141,.16); }
.login-card .btn-primary { background: #0f8b8d; border-color: #0f8b8d; }
.login-visual { position: relative; overflow: hidden; display: grid; place-items: center; padding: 4rem; }
.login-visual::before { content: ""; position: absolute; inset: 10%; background-image: linear-gradient(rgba(19,32,51,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(19,32,51,.08) 1px, transparent 1px); background-size: 32px 32px; mask-image: radial-gradient(circle, #000 30%, transparent 72%); }
.signal-grid { position: absolute; width: min(540px, 70vw); aspect-ratio: 1; border: 1px solid rgba(15,139,141,.25); border-radius: 24px; transform: rotate(-8deg); }
.signal-grid::before, .signal-grid::after { content: ""; position: absolute; inset: 22%; border: 1px solid rgba(15,139,141,.22); border-radius: 20px; }
.signal-grid::after { inset: 39%; }
.node { position: absolute; width: 14px; height: 14px; border-radius: 50%; background: #132033; box-shadow: 0 0 0 7px rgba(19,32,51,.08); }
.node.active { background: #0f8b8d; box-shadow: 0 0 0 8px rgba(15,139,141,.16); }
.node:nth-child(1) { top: 16%; left: 24%; }
.node:nth-child(2) { top: 22%; right: 20%; }
.node:nth-child(3) { top: 50%; left: 15%; }
.node:nth-child(4) { top: 54%; right: 18%; }
.node:nth-child(5) { bottom: 18%; left: 34%; }
.node:nth-child(6) { bottom: 24%; right: 31%; }
.terminal-window { position: relative; width: min(520px, 90%); background: #0b1220; color: #d6f6f4; border-radius: 12px; box-shadow: 0 28px 80px rgba(19,32,51,.28); border: 1px solid rgba(255,255,255,.08); overflow: hidden; }
.terminal-top { height: 38px; display: flex; align-items: center; gap: 8px; padding: 0 14px; background: #111827; }
.terminal-top span { width: 10px; height: 10px; border-radius: 50%; background: #64748b; }
.terminal-top span:first-child { background: #ef4444; }
.terminal-top span:nth-child(2) { background: #f59e0b; }
.terminal-top span:nth-child(3) { background: #10b981; }
.terminal-window pre { margin: 0; padding: 1.5rem; font-size: .95rem; white-space: pre-wrap; }
@media (max-width: 900px) {
  .login-screen { display: block; background: #07111f; }
  .login-visual { display: none; }
  .login-panel { min-height: 100vh; }
}