:root {
  --bg: #0b1120; --surface: #141d2f; --surface-hover: #1a2540; --surface-alt: #111827;
  --border: #1e2d45; --border-light: #2a3f5f;
  --text: #e2e8f0; --text-dim: #8892a8; --text-muted: #4a5568;
  --accent: #3b82f6; --accent-glow: rgba(59,130,246,0.15);
  --green: #22c55e; --yellow: #eab308; --red: #ef4444; --orange: #f97316; --cyan: #06b6d4;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; -webkit-font-smoothing: antialiased; }

/* Login */
.login-screen { min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:1rem; }
.login-box { width:100%; max-width:320px; text-align:center; }
.login-logo { font-size:2.5rem; margin-bottom:.75rem; }
.login-title { font-size:1.25rem; font-weight:700; margin-bottom:.25rem; }
.login-title span { color: var(--accent); }
.login-subtitle { font-size:.75rem; color:var(--text-dim); margin-bottom:2rem; }
.pin-dots { display:flex; justify-content:center; gap:.75rem; margin-bottom:1.5rem; }
.pin-dot { width:14px;height:14px;border-radius:50%;border:2px solid var(--border-light);transition:all .2s; }
.pin-dot.filled { background:var(--accent);border-color:var(--accent);transform:scale(1.15); }
.pin-error { color:var(--red);font-size:.75rem;margin-bottom:1rem;font-weight:500;min-height:1.2em; }
.numpad { display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;margin-bottom:1rem; }
.numpad button { height:56px;border-radius:1rem;font-size:1.35rem;font-weight:600;border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer;transition:all .15s; }
.numpad button:active { transform:scale(.95);background:var(--surface-hover); }
.numpad button.empty { border:none;background:transparent;cursor:default; }
.numpad button.del { border:none;background:transparent;color:var(--text-dim);font-size:1.1rem; }
.numpad-hint { font-size:.65rem;color:var(--text-muted); }
@keyframes shake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-8px)} 40%{transform:translateX(8px)} 60%{transform:translateX(-5px)} 80%{transform:translateX(5px)} }
.shake { animation:shake .4s ease-in-out; }

/* Dashboard */
.dashboard { max-width:960px; margin:0 auto; padding:1.25rem 1rem 3rem; }
.header { display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem; }
.header-left h1 { font-size:1.35rem;font-weight:800;letter-spacing:-.02em; }
.header-left h1 span { color:var(--accent); }
.header-meta { font-size:.7rem;color:var(--text-dim);margin-top:.2rem; }
.header-right { display:flex;gap:.5rem; }
.btn-sm { background:transparent;border:1px solid var(--border);color:var(--text-dim);padding:.4rem .75rem;border-radius:.5rem;font-size:.75rem;cursor:pointer;transition:all .15s; }
.btn-sm:hover { border-color:var(--border-light);color:var(--text); }

/* Status Banner */
.status-banner { border-radius:.85rem;padding:.6rem 1rem;margin-bottom:1rem;display:flex;align-items:center;gap:.5rem;font-size:.8rem;font-weight:600; }
.status-banner.ok { background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.2);color:var(--green); }
.status-banner.warning { background:rgba(234,179,8,.08);border:1px solid rgba(234,179,8,.2);color:var(--yellow); }
.status-banner.critical { background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.2);color:var(--red); }
.status-banner .alerts { font-weight:400;font-size:.75rem;opacity:.85;margin-left:.5rem; }

/* Metrics */
.metrics-grid { display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem;margin-bottom:1rem; }
@media(min-width:640px) { .metrics-grid { grid-template-columns:repeat(4,1fr); } }
.metric-card { background:var(--surface);border:1px solid var(--border);border-radius:1rem;padding:1rem;text-align:center; }
.metric-label { font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);margin-bottom:.5rem; }
.gauge-ring { position:relative;width:72px;height:72px;margin:0 auto .5rem; }
.gauge-ring svg { width:100%;height:100%;transform:rotate(-90deg); }
.gauge-ring .track { fill:none;stroke:var(--border);stroke-width:6; }
.gauge-ring .fill { fill:none;stroke-width:6;stroke-linecap:round;transition:stroke-dashoffset .6s ease,stroke .3s; }
.gauge-value { position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:1.1rem;font-weight:800; }
.metric-detail { font-size:.7rem;color:var(--text-dim); }

/* Charts */
.charts-grid { display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-bottom:1rem; }
@media(max-width:639px) { .charts-grid { grid-template-columns:1fr; } }
.chart-card { background:var(--surface);border:1px solid var(--border);border-radius:1rem;padding:.85rem 1rem; }
.chart-title { font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);margin-bottom:.5rem;display:flex;align-items:center;justify-content:space-between; }
.chart-title .val { color:var(--text);font-size:.85rem;font-weight:700;text-transform:none;letter-spacing:0; }
.sparkline { width:100%;height:50px; }
.sparkline polyline { fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round; }
.sparkline .area { stroke:none;opacity:.1; }

/* Info bars */
.info-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;margin-bottom:1rem; }
@media(max-width:480px) { .info-grid { grid-template-columns:1fr; } }
.info-card { background:var(--surface);border:1px solid var(--border);border-radius:.85rem;padding:.75rem;text-align:center; }
.info-label { font-size:.6rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em; }
.info-value { font-size:1rem;font-weight:700;margin-top:.2rem; }

/* Section */
.section { margin-bottom:1.25rem; }
.section-header { display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem; }
.section-title { font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-dim); }

/* Containers */
.container-list { display:flex;flex-direction:column;gap:.5rem; }
.container-card { background:var(--surface);border:1px solid var(--border);border-radius:.85rem;padding:.75rem 1rem;transition:border-color .15s; }
.container-card:hover { border-color:var(--border-light); }
.container-top { display:flex;align-items:center;gap:.75rem; }
.container-dot { width:10px;height:10px;border-radius:50%;flex-shrink:0; }
.container-dot.running { background:var(--green);box-shadow:0 0 6px rgba(34,197,94,.4); }
.container-dot.exited { background:var(--red); }
.container-dot.other { background:var(--text-muted); }
.container-info { flex:1;min-width:0; }
.container-name { font-size:.9rem;font-weight:600; }
.container-meta { font-size:.7rem;color:var(--text-dim);margin-top:.15rem; }
.container-actions { display:flex;gap:.35rem;flex-shrink:0; }
.container-actions button { width:32px;height:32px;border-radius:.5rem;border:1px solid var(--border);background:transparent;color:var(--text-dim);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.85rem;transition:all .15s; }
.container-actions button:hover { border-color:var(--border-light);color:var(--text);background:var(--surface-hover); }
.container-actions button:disabled { opacity:.3;cursor:default; }
/* Resource bar */
.container-resources { display:flex;gap:.75rem;margin-top:.5rem;padding-top:.5rem;border-top:1px solid var(--border); }
.res-bar { flex:1; }
.res-bar-label { font-size:.6rem;color:var(--text-muted);display:flex;justify-content:space-between;margin-bottom:.2rem; }
.res-bar-track { height:4px;background:var(--border);border-radius:2px;overflow:hidden; }
.res-bar-fill { height:100%;border-radius:2px;transition:width .5s ease; }

/* Links */
.links-grid { display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem; }
@media(min-width:640px) { .links-grid { grid-template-columns:repeat(3,1fr); } }
.link-card { display:block;background:var(--surface);border:1px solid var(--border);border-radius:1rem;padding:1.25rem 1rem;text-decoration:none;color:inherit;transition:all .2s;text-align:center; }
.link-card:hover { border-color:var(--accent);transform:translateY(-2px);box-shadow:0 4px 20px var(--accent-glow); }
.link-icon { font-size:1.75rem;margin-bottom:.5rem; }
.link-name { font-size:.9rem;font-weight:700; }
.link-desc { font-size:.7rem;color:var(--text-dim);margin-top:.2rem; }

/* Processes */
.proc-table { width:100%;font-size:.75rem;border-collapse:collapse; }
.proc-table th { text-align:left;color:var(--text-muted);font-size:.6rem;text-transform:uppercase;letter-spacing:.05em;padding:.4rem .5rem;border-bottom:1px solid var(--border); }
.proc-table td { padding:.4rem .5rem;border-bottom:1px solid var(--border);color:var(--text-dim); }
.proc-table td:first-child { color:var(--text);font-weight:500; }
.proc-table .num { text-align:right;font-family:monospace; }

/* Modal */
.modal-overlay { position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:100;display:flex;align-items:center;justify-content:center;padding:1rem; }
.modal { background:var(--surface);border:1px solid var(--border);border-radius:1rem;width:100%;max-width:700px;max-height:85vh;display:flex;flex-direction:column; }
.modal-header { display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem;border-bottom:1px solid var(--border); }
.modal-header h3 { font-size:1rem;font-weight:700; }
.modal-close { background:none;border:none;color:var(--text-dim);font-size:1.2rem;cursor:pointer;padding:.25rem; }
.modal-close:hover { color:var(--text); }
.modal-body { flex:1;overflow-y:auto;padding:1rem 1.25rem; }
.log-output { font-family:'SF Mono',Monaco,Consolas,monospace;font-size:.7rem;line-height:1.6;color:var(--text-dim);white-space:pre-wrap;word-break:break-all; }
.modal-footer { padding:.75rem 1.25rem;border-top:1px solid var(--border);display:flex;gap:.5rem; }

/* Deploy */
.deploy-output { font-family:monospace;font-size:.7rem;background:var(--bg);border:1px solid var(--border);border-radius:.5rem;padding:.75rem;max-height:200px;overflow-y:auto;white-space:pre-wrap;color:var(--text-dim);margin-top:.75rem; }

/* Footer */
.footer { text-align:center;font-size:.65rem;color:var(--text-muted);margin-top:2rem; }
.loading { display:flex;align-items:center;justify-content:center;min-height:100vh; }
.spinner { width:32px;height:32px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes fadeIn { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
.fade-in { animation:fadeIn .4s ease-out; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.5} }
.pulse { animation:pulse 2s ease-in-out infinite; }