:root {
  color-scheme: dark;
  --bg: #09090d;
  --panel: rgba(19, 18, 25, .88);
  --panel-2: rgba(27, 25, 35, .84);
  --border: rgba(255,255,255,.075);
  --text: #f4f2f7;
  --muted: #908b9b;
  --accent: #9d7cff;
  --accent-2: #7653e6;
  --good: #78dba9;
  --warn: #f0bd70;
  --bad: #ed7a88;
  --shadow: 0 24px 80px rgba(0,0,0,.38);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body { padding: 0 0 calc(92px + env(safe-area-inset-bottom)); background:
  radial-gradient(800px 440px at 95% -10%, rgba(111,72,212,.18), transparent 60%),
  radial-gradient(620px 420px at -10% 35%, rgba(85,55,157,.10), transparent 65%),
  var(--bg); }
button, select, input { font: inherit; }
button { color: inherit; }
.noise { position: fixed; inset: 0; pointer-events:none; opacity:.035; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E"); }
.shell { width: min(900px, 100%); margin: 0 auto; padding: 22px 16px 32px; position: relative; }
.topbar { display:flex; justify-content:space-between; gap:16px; align-items:flex-start; margin-bottom:22px; }
.eyebrow { color: var(--muted); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; }
h1, h2, p { margin-top:0; }
h1 { font-size: clamp(25px, 7vw, 38px); margin: 5px 0 0; letter-spacing:-.045em; font-weight:700; }
h2 { font-size: 24px; letter-spacing:-.035em; margin:5px 0 0; }
.host-lamp { border:1px solid var(--border); padding:8px 10px; border-radius:999px; color:var(--muted); font-size:12px; background:rgba(255,255,255,.025); white-space:nowrap; }
.host-lamp span { display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--good); box-shadow:0 0 14px var(--good); margin-right:6px; }
.card { border:1px solid var(--border); background:linear-gradient(145deg, rgba(29,27,37,.94), rgba(15,14,20,.88)); border-radius:22px; box-shadow:var(--shadow); }
.hero { min-height:156px; padding:20px; margin-bottom:24px; }
.hero-top { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; }
.hostname { font-size:22px; font-weight:700; letter-spacing:-.03em; }
.uptime { color:var(--muted); font-size:12px; margin-top:4px; }
.metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:22px; }
.metric { padding:11px; border-radius:14px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.045); }
.metric small { display:block; color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.1em; }
.metric b { display:block; margin-top:5px; font-size:16px; }
.section-head { display:flex; justify-content:space-between; align-items:center; gap:12px; margin: 8px 2px 12px; }
.section-head.stacked { align-items:flex-end; }
.ghost-btn, .select { border:1px solid var(--border); background:rgba(255,255,255,.035); border-radius:12px; padding:9px 12px; color:var(--muted); }
.ghost-btn:active { transform:scale(.98); }
.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:12px; }
.stat { border:1px solid var(--border); background:rgba(255,255,255,.025); border-radius:14px; padding:12px; }
.stat b { display:block; font-size:20px; }
.stat small { color:var(--muted); font-size:10px; text-transform:uppercase; }
.project-list { display:grid; gap:10px; }
.project-card { width:100%; text-align:left; border:1px solid var(--border); background:var(--panel); border-radius:18px; padding:15px; cursor:pointer; box-shadow:0 8px 24px rgba(0,0,0,.16); }
.project-card:active { transform:scale(.993); }
.project-top { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
.project-name { font-weight:700; font-size:16px; }
.project-desc { color:var(--muted); font-size:12px; margin-top:4px; line-height:1.45; }
.badge { border-radius:999px; padding:5px 8px; font-size:9px; text-transform:uppercase; letter-spacing:.08em; border:1px solid var(--border); color:var(--muted); white-space:nowrap; }
.badge.active { color:var(--good); border-color:rgba(120,219,169,.22); background:rgba(120,219,169,.07); }
.badge.development, .badge.prototype { color:#c0a8ff; border-color:rgba(157,124,255,.25); background:rgba(157,124,255,.08); }
.badge.rewrite, .badge.broken { color:var(--bad); border-color:rgba(237,122,136,.23); background:rgba(237,122,136,.07); }
.badge.frozen { color:#9eabc5; }
.badge.idea, .badge.archived { color:#817b8c; }
.progress-line { height:5px; background:rgba(255,255,255,.055); border-radius:99px; overflow:hidden; margin-top:14px; }
.progress-line > span { display:block; height:100%; width:0; background:linear-gradient(90deg,var(--accent-2),var(--accent)); border-radius:99px; }
.project-meta { display:flex; justify-content:space-between; margin-top:8px; color:var(--muted); font-size:10px; }
.view { display:none; }
.view.active { display:block; animation:fade .18s ease; }
@keyframes fade { from { opacity:.3; transform:translateY(4px); } }
.bottom-nav { position:fixed; left:50%; transform:translateX(-50%); bottom:calc(10px + env(safe-area-inset-bottom)); z-index:20; width:min(520px,calc(100% - 20px)); display:grid; grid-template-columns:repeat(4,1fr); padding:7px; border:1px solid var(--border); border-radius:20px; background:rgba(13,12,18,.90); backdrop-filter:blur(22px); box-shadow:0 20px 55px rgba(0,0,0,.45); }
.nav-btn { border:0; background:transparent; border-radius:14px; padding:8px 4px; color:var(--muted); }
.nav-btn span { display:block; font-size:18px; line-height:18px; }
.nav-btn small { display:block; margin-top:5px; font-size:9px; letter-spacing:.04em; }
.nav-btn.active { color:#e5dcff; background:rgba(157,124,255,.11); }
.metrics-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin:16px 0; }
.metric-big { border:1px solid var(--border); border-radius:17px; background:var(--panel); padding:15px; }
.metric-big small { color:var(--muted); text-transform:uppercase; font-size:10px; letter-spacing:.1em; }
.metric-big b { display:block; margin-top:8px; font-size:19px; }
.service-list { display:grid; gap:10px; }
.service { display:flex; gap:12px; justify-content:space-between; align-items:center; padding:14px; border:1px solid var(--border); border-radius:17px; background:var(--panel); }
.service-name { display:flex; align-items:center; gap:9px; font-weight:650; }
.lamp { width:8px; height:8px; border-radius:50%; background:var(--bad); }
.lamp.active { background:var(--good); box-shadow:0 0 12px rgba(120,219,169,.6); }
.actions { display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.action-btn { border:1px solid var(--border); background:rgba(255,255,255,.035); padding:7px 9px; border-radius:10px; color:var(--muted); font-size:11px; }
.deploy-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:20px; }
.deploy-card { border:1px solid var(--border); background:var(--panel); border-radius:18px; padding:18px 14px; text-align:left; min-height:135px; }
.deploy-card:active { transform:scale(.985); }
.deploy-icon { font-size:24px; display:block; margin-bottom:20px; }
.deploy-card b, .deploy-card small { display:block; }
.deploy-card small { color:var(--muted); margin-top:4px; }
.terminal { white-space:pre-wrap; word-break:break-word; border:1px solid var(--border); background:#07070a; color:#aaa4b4; border-radius:16px; padding:14px; font:11px/1.55 "SFMono-Regular", Consolas, monospace; margin-top:12px; max-height:45vh; overflow:auto; }
.muted { color:var(--muted); font-size:13px; line-height:1.55; }
.notice { border:1px solid rgba(237,122,136,.25); color:#ffadb7; background:rgba(237,122,136,.07); padding:14px; border-radius:16px; margin-bottom:14px; }
.hidden { display:none !important; }
.dialog { width:min(650px,calc(100% - 20px)); max-height:88vh; border:1px solid var(--border); border-radius:22px; padding:0; background:#111016; color:var(--text); box-shadow:var(--shadow); }
.dialog::backdrop { background:rgba(0,0,0,.72); backdrop-filter:blur(7px); }
.dialog-head { position:sticky; top:0; background:rgba(17,16,22,.94); backdrop-filter:blur(15px); display:flex; justify-content:space-between; align-items:flex-start; padding:18px; border-bottom:1px solid var(--border); z-index:2; }
.close-btn { border:1px solid var(--border); background:rgba(255,255,255,.04); width:34px; height:34px; border-radius:12px; font-size:20px; }
#dialogBody { padding:18px; }
.project-editor { display:grid; grid-template-columns:1fr 110px; gap:10px; margin-bottom:16px; }
.project-editor input, .project-editor select, .task-input { width:100%; border:1px solid var(--border); background:rgba(255,255,255,.035); border-radius:12px; color:var(--text); padding:10px; }
.task-row { display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid rgba(255,255,255,.045); }
.task-row label { flex:1; font-size:13px; }
.task-add { display:flex; gap:8px; margin-top:12px; }
.primary-btn { border:0; border-radius:12px; background:linear-gradient(135deg,var(--accent-2),var(--accent)); padding:10px 13px; font-weight:700; }
.logs-dialog { min-height:60vh; }
.logs { margin:0 14px 14px; max-height:65vh; }
.skeleton { color:var(--muted); }
@media (min-width:700px) { .project-list { grid-template-columns:repeat(2,1fr); } .metrics-grid { grid-template-columns:repeat(4,1fr); } }