:root{--accent:#a8ff3e;--accent-dim:#7fcc20;--accent-muted:#4a8010;--accent-glow:#a8ff3e1f;--accent-border:#a8ff3e40;--bg-base:#050810;--bg-surface:#0d1220;--bg-elevated:#111827;--bg-overlay:#1a2235;--bg-hover:#ffffff08;--border-subtle:#1e2a3a;--border-strong:#2a3a50;--border-accent:#a8ff3e40;--text-primary:#f0f4ff;--text-secondary:#6b7fa3;--text-muted:#3a4a63;--text-inverse:#050810;--status-online:#a8ff3e;--status-attention:#ffb340;--status-offline:#ff4b6e;--status-unknown:#3a4a63;--status-pending:#60a5fa;--status-online-bg:#a8ff3e14;--status-attention-bg:#ffb34014;--status-offline-bg:#ff4b6e14;--status-pending-bg:#60a5fa14;--rail-width:64px;--topbar-height:56px;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--radius-xl:16px;--shadow-sm:0 1px 3px #0006;--shadow-md:0 4px 16px #00000080;--shadow-lg:0 12px 40px #0009;--shadow-accent:0 0 24px #a8ff3e26;--font-display:"Space Grotesk", system-ui, sans-serif;--font-body:"DM Sans", system-ui, sans-serif;--font-mono:"JetBrains Mono", "Fira Code", monospace}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;height:100%}body{font-family:var(--font-body);background-color:var(--bg-base);color:var(--text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;flex-direction:column;min-height:100dvh;line-height:1.6;display:flex;overflow-x:hidden}#__next,main{flex:1}img,video{max-width:100%;display:block}input,button,textarea,select{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}.app-shell{width:100%;min-height:100dvh;display:flex}.nav-rail{width:var(--rail-width);min-width:var(--rail-width);background:var(--bg-elevated);border-right:1px solid var(--border-subtle);z-index:200;flex-direction:column;align-items:center;gap:2px;height:100dvh;padding:12px 0 16px;display:flex;position:sticky;top:0}.app-content{background:var(--bg-base);flex-direction:column;flex:1;min-width:0;display:flex}.top-bar{height:var(--topbar-height);background:var(--bg-elevated);border-bottom:1px solid var(--border-subtle);z-index:100;flex-shrink:0;justify-content:space-between;align-items:center;padding:0 24px;display:flex;position:sticky;top:0}.page-content{flex:1;padding:24px;overflow-y:auto}.rail-logo{border-radius:var(--radius-md);background:var(--accent);flex-shrink:0;justify-content:center;align-items:center;width:40px;height:40px;margin-bottom:16px;display:flex}.rail-item{border-radius:var(--radius-md);width:44px;height:44px;color:var(--text-muted);cursor:pointer;background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;text-decoration:none;transition:color .15s,background .15s;display:flex;position:relative}.rail-item:hover{color:var(--text-secondary);background:var(--bg-hover)}.rail-item.active{color:var(--accent);background:var(--accent-glow)}.rail-item.active:before{content:"";background:var(--accent);border-radius:0 3px 3px 0;width:3px;height:24px;position:absolute;top:50%;left:-1px;transform:translateY(-50%)}.rail-tooltip{background:var(--bg-overlay);border:1px solid var(--border-strong);color:var(--text-primary);border-radius:var(--radius-sm);white-space:nowrap;pointer-events:none;opacity:0;z-index:999;box-shadow:var(--shadow-md);padding:6px 10px;font-size:12px;font-weight:500;transition:opacity .1s;position:absolute;top:50%;left:calc(100% + 12px);transform:translateY(-50%)}.rail-item:hover .rail-tooltip{opacity:1}.rail-divider{background:var(--border-subtle);width:32px;height:1px;margin:6px 0}.rail-spacer{flex:1}.card{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);position:relative;overflow:hidden}.card-sm{border-radius:var(--radius-md)}.card-xl{border-radius:var(--radius-xl)}.card-accent{border-color:var(--accent-border)}.card-hover{transition:border-color .2s,transform .2s,box-shadow .2s}.card-hover:hover{border-color:var(--border-strong);box-shadow:var(--shadow-md);transform:translateY(-1px)}.badge{border-radius:var(--radius-sm);font-size:11px;font-weight:600;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.05em;white-space:nowrap;align-items:center;gap:5px;padding:3px 8px;display:inline-flex}.badge-online{color:var(--status-online);background:var(--status-online-bg);border:1px solid #a8ff3e33}.badge-attention{color:var(--status-attention);background:var(--status-attention-bg);border:1px solid #ffb34033}.badge-offline{color:var(--status-offline);background:var(--status-offline-bg);border:1px solid #ff4b6e33}.badge-pending{color:var(--status-pending);background:var(--status-pending-bg);border:1px solid #60a5fa33}.badge-neutral{color:var(--text-secondary);background:var(--bg-overlay);border:1px solid var(--border-subtle)}.status-dot{border-radius:50%;flex-shrink:0;width:6px;height:6px}.status-dot.online{background:var(--status-online);box-shadow:0 0 6px var(--status-online)}.status-dot.offline{background:var(--status-offline)}.status-dot.attention{background:var(--status-attention)}.status-dot.pulse{animation:2s ease-in-out infinite dot-pulse}@keyframes dot-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.8)}}.font-display{font-family:var(--font-display)}.font-mono{font-family:var(--font-mono)}.text-xs{font-size:11px;line-height:1.4}.text-sm{font-size:13px;line-height:1.5}.text-base{font-size:15px;line-height:1.6}.text-lg{font-size:18px;line-height:1.4}.text-xl{font-size:22px;line-height:1.3}.text-2xl{font-size:28px;line-height:1.2}.text-3xl{font-size:36px;line-height:1.1}.text-label{letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);font-size:10px;font-weight:600;font-family:var(--font-mono)}.text-primary{color:var(--text-primary)}.text-secondary{color:var(--text-secondary)}.text-muted{color:var(--text-muted)}.text-accent{color:var(--accent)}.btn{border-radius:var(--radius-md);cursor:pointer;white-space:nowrap;height:36px;font-size:13px;font-weight:600;font-family:var(--font-body);border:none;justify-content:center;align-items:center;gap:8px;padding:0 16px;text-decoration:none;transition:all .15s;display:inline-flex}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-accent{background:var(--accent);color:var(--text-inverse)}.btn-accent:hover:not(:disabled){background:var(--accent-dim);box-shadow:var(--shadow-accent)}.btn-ghost{color:var(--text-secondary);border:1px solid var(--border-subtle);background:0 0}.btn-ghost:hover:not(:disabled){background:var(--bg-hover);color:var(--text-primary);border-color:var(--border-strong)}.btn-danger{color:var(--status-offline);background:#ff4b6e1f;border:1px solid #ff4b6e33}.btn-danger:hover:not(:disabled){background:#ff4b6e33}.btn-sm{height:30px;padding:0 12px;font-size:12px}.btn-lg{height:48px;padding:0 24px;font-size:15px}.input-field{background:var(--bg-elevated);border:1px solid var(--border-subtle);border-radius:var(--radius-md);height:40px;color:var(--text-primary);font-size:14px;font-family:var(--font-body);-webkit-appearance:none;outline:none;width:100%;padding:0 14px;transition:border-color .15s}.input-field::placeholder{color:var(--text-muted)}.input-field:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-glow)}.input-field:invalid{border-color:var(--status-offline)}select.input-field{cursor:pointer}textarea.input-field{resize:vertical;height:auto;min-height:80px;padding:12px 14px}.input-label{letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);font-size:11px;font-weight:600;font-family:var(--font-mono);margin-bottom:6px;display:block}.form-group{flex-direction:column;gap:6px;display:flex}.data-table{border-collapse:collapse;width:100%}.data-table th{letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);font-size:10px;font-weight:600;font-family:var(--font-mono);text-align:left;border-bottom:1px solid var(--border-subtle);padding:10px 14px}.data-table td{color:var(--text-primary);border-bottom:1px solid #1e2a3a80;padding:12px 14px;font-size:13px}.data-table tr:last-child td{border-bottom:none}.data-table tbody tr{transition:background .1s}.data-table tbody tr:hover{background:var(--bg-hover)}.metric-tile{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);flex-direction:column;gap:8px;min-width:0;padding:16px 20px;display:flex}.metric-value{font-family:var(--font-display);letter-spacing:-.03em;color:var(--text-primary);font-size:32px;font-weight:700;line-height:1}.metric-value.accent{color:var(--accent)}.metric-value.attention{color:var(--status-attention)}.metric-value.danger{color:var(--status-offline)}.reservoir-card{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);color:inherit;cursor:pointer;flex-direction:column;gap:16px;padding:20px;text-decoration:none;transition:all .2s;display:flex;position:relative}.reservoir-card:hover{border-color:var(--border-strong);box-shadow:var(--shadow-md);transform:translateY(-2px)}.reservoir-card.online{border-left:3px solid var(--status-online)}.reservoir-card.attention{border-left:3px solid var(--status-attention)}.reservoir-card.offline{border-left:3px solid var(--status-offline)}.level-bar-track{background:var(--bg-overlay);border-radius:2px;width:100%;height:4px;overflow:hidden}.level-bar-fill{border-radius:2px;height:100%;transition:width .8s cubic-bezier(.4,0,.2,1)}.skeleton{background:linear-gradient(90deg, var(--bg-overlay) 25%, var(--bg-elevated) 50%, var(--bg-overlay) 75%);border-radius:var(--radius-sm);background-size:200% 100%;animation:1.5s infinite skeleton-shimmer}@keyframes skeleton-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.animate-spin{animation:.7s linear infinite spin}.alert{border-radius:var(--radius-md);align-items:flex-start;gap:12px;padding:12px 16px;font-size:13px;line-height:1.5;display:flex}.alert-error{color:#ff8fa3;background:#ff4b6e14;border:1px solid #ff4b6e33}.alert-warning{color:#ffd08a;background:#ffb34014;border:1px solid #ffb34033}.alert-info{color:#93c5fd;background:#60a5fa14;border:1px solid #60a5fa33}.alert-success{background:var(--accent-glow);border:1px solid var(--accent-border);color:var(--accent)}.empty-state{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:12px;padding:64px 32px;display:flex}.divider{background:var(--border-subtle);width:100%;height:1px}::-webkit-scrollbar{width:4px;height:4px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:2px}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}@media (max-width:768px){.nav-rail{display:none}.mobile-bottom-nav{display:flex}.page-content{padding:16px 16px 80px}.top-bar{padding:0 16px}}@media (min-width:769px){.mobile-bottom-nav{display:none}}.mobile-bottom-nav{background:var(--bg-elevated);border-top:1px solid var(--border-subtle);z-index:200;justify-content:space-around;align-items:center;gap:4px;height:64px;padding:0 8px;position:fixed;bottom:0;left:0;right:0}.mobile-nav-item{height:100%;color:var(--text-muted);background:0 0;border:none;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:4px;min-width:48px;padding:8px 4px;text-decoration:none;transition:color .15s;display:flex}.mobile-nav-item.active{color:var(--accent)}.mobile-nav-label{letter-spacing:.04em;text-transform:uppercase;font-size:9px;font-weight:600;font-family:var(--font-mono)}@keyframes fade-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes slide-in-left{0%{opacity:0;transform:translate(-16px)}to{opacity:1;transform:translate(0)}}@keyframes pulse-glow{0%,to{box-shadow:0 0 8px var(--accent-glow)}50%{box-shadow:0 0 16px #a8ff3e40}}.anim-fade-in{animation:.25s forwards fade-in}.anim-slide-left{animation:.2s forwards slide-in-left}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.gap-1{gap:4px}.gap-2{gap:8px}.gap-3{gap:12px}.gap-4{gap:16px}.gap-6{gap:24px}.gap-8{gap:32px}.w-full{width:100%}.min-w-0{min-width:0}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.grid{display:grid}.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-auto{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}.grid-auto-sm{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}@media (max-width:640px){.grid-2,.grid-3{grid-template-columns:1fr}}.glass-card{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg)}.mini-stat-box{background:var(--bg-elevated);border:1px solid var(--border-subtle);border-radius:var(--radius-md);align-items:center;gap:10px;display:flex}.nav-item{border-radius:var(--radius-md);color:var(--text-secondary);cursor:pointer;background:0 0;border:none;align-items:center;gap:12px;padding:10px 12px;font-size:14px;font-weight:500;text-decoration:none;transition:all .15s;display:flex}.nav-item:hover{background:var(--bg-hover);color:var(--text-primary)}.nav-item.active{background:var(--accent-glow);color:var(--accent)}