:root {
    color-scheme: dark;
    --bg: #080d13;
    --panel: rgba(17, 25, 35, 0.92);
    --panel-2: #121d29;
    --line: rgba(154, 181, 207, 0.16);
    --text: #f3f7fb;
    --muted: #8ea0b3;
    --cyan: #55d6be;
    --blue: #5f8cff;
    --red: #ff6b75;
    --amber: #ffca6b;
}

* { box-sizing: border-box; }
dialog { color: var(--text); background: var(--panel-2); border: 1px solid var(--line); border-radius: 18px; padding: 28px; width: min(420px, calc(100% - 32px)); }
dialog::backdrop { background: rgba(0,0,0,.8); backdrop-filter: blur(5px); }
dialog label { display: block; margin-top: 22px; }

body {
    margin: 0;
    min-height: 100vh;
    color: var(--text);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background:
        radial-gradient(circle at 12% -10%, rgba(77, 116, 255, 0.22), transparent 34rem),
        radial-gradient(circle at 100% 18%, rgba(43, 207, 170, 0.13), transparent 30rem),
        var(--bg);
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: 0.18;
    background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size: 32px 32px;
}

.shell { width: min(1180px, calc(100% - 32px)); margin: 0 auto; padding: 42px 0 64px; }
.topbar, .panel-heading, .actions, .connection { display: flex; align-items: center; }
.topbar { justify-content: space-between; margin-bottom: 26px; }
h1, h2, p { margin: 0; }
h1 { font-size: clamp(2.1rem, 5vw, 3.7rem); letter-spacing: -0.055em; line-height: 1; }
h2 { font-size: 1.2rem; letter-spacing: -0.02em; }
.eyebrow, .section-label { color: var(--cyan); letter-spacing: .16em; font-size: .68rem; font-weight: 800; }
.eyebrow { margin-bottom: 10px; }
.section-label { margin-bottom: 6px; }
.subtitle, .muted { color: var(--muted); }
.subtitle { margin-top: 12px; }
.connection { gap: 9px; color: var(--muted); font-size: .85rem; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 14px currentColor; }
.dot.online { color: var(--cyan); background: var(--cyan); }
.dot.offline { color: var(--red); background: var(--red); }

.hero-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 18px; margin-bottom: 18px; }
.panel { border: 1px solid var(--line); border-radius: 18px; background: var(--panel); backdrop-filter: blur(16px); box-shadow: 0 18px 60px rgba(0,0,0,.24); }
.control-panel, .status-panel, .gpu-panel { padding: 24px; }
.panel-heading { justify-content: space-between; gap: 16px; }
.badge { border: 1px solid var(--line); border-radius: 999px; padding: 7px 11px; font-size: .72rem; font-weight: 800; letter-spacing: .08em; }
.badge.start { color: var(--cyan); background: rgba(85,214,190,.1); border-color: rgba(85,214,190,.3); }
.badge.stop { color: var(--red); background: rgba(255,107,117,.09); border-color: rgba(255,107,117,.28); }
.badge.neutral { color: var(--muted); }

.form-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 25px 0 18px; }
label span { display: block; color: var(--muted); font-size: .78rem; margin: 0 0 8px 2px; }
input, select { width: 100%; border: 1px solid var(--line); border-radius: 11px; padding: 12px 13px; color: var(--text); background: #0b131d; font: inherit; outline: none; }
input:focus, select:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(95,140,255,.13); }
.form-grid.two-columns { grid-template-columns: repeat(2, 1fr); margin-top: -6px; }
.allocation-section { margin: -5px 0 18px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: rgba(7,13,19,.45); }
.allocation-help { color: var(--muted); font-size: .76rem; margin-bottom: 11px; }
.allocation-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.allocation-item { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 9px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); }
.allocation-item.selected { border-color: rgba(85,214,190,.45); }
.allocation-item input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--cyan); }
.allocation-meta { min-width: 0; }
.allocation-title { display: flex; justify-content: space-between; gap: 6px; font-size: .76rem; font-weight: 750; margin-bottom: 7px; }
.allocation-free { color: var(--muted); font-size: .64rem; font-weight: 500; }
.allocation-memory { display: flex; align-items: center; gap: 6px; }
.allocation-memory input { padding: 7px 8px; font-size: .78rem; }
.allocation-memory span { color: var(--muted); font-size: .68rem; }
.actions { gap: 10px; }
.button { border: 0; border-radius: 11px; padding: 12px 17px; color: white; font-weight: 760; cursor: pointer; transition: transform .16s, filter .16s, opacity .16s; }
.button:hover { transform: translateY(-1px); filter: brightness(1.08); }
.button:disabled { cursor: wait; opacity: .48; transform: none; }
.button.primary { background: linear-gradient(135deg, #4776ed, #665be8); }
.button.danger { background: rgba(255,107,117,.14); color: #ff8b94; border: 1px solid rgba(255,107,117,.24); }
.message { min-height: 20px; color: var(--cyan); font-size: .82rem; margin-top: 13px; }
.message.error { color: var(--red); }
.warning { color: var(--amber); font-size: .75rem; border-top: 1px solid var(--line); padding-top: 14px; margin-top: 4px; }

.metric-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 25px; }
.metric { min-height: 81px; padding: 14px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; }
.metric span { display: block; color: var(--muted); font-size: .72rem; margin-bottom: 10px; }
.metric strong { font-size: 1rem; }
.runtime-error { margin-top: 12px; padding: 11px; border-radius: 10px; color: #ff9da4; background: rgba(255,107,117,.08); font-size: .78rem; }
.hidden { display: none; }

.gpu-panel { min-height: 240px; }
.gpu-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 20px; }
.gpu-card { position: relative; overflow: hidden; padding: 16px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 13px; }
.gpu-card.held { border-color: rgba(85,214,190,.48); box-shadow: inset 0 0 0 1px rgba(85,214,190,.12); }
.gpu-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.gpu-id { font-size: 1.05rem; font-weight: 800; }
.held-tag { color: var(--cyan); font-size: .65rem; font-weight: 800; }
.gpu-name { min-height: 34px; margin: 7px 0 14px; color: var(--muted); font-size: .72rem; line-height: 1.35; }
.bar-label { display: flex; justify-content: space-between; color: var(--muted); font-size: .68rem; margin-bottom: 6px; }
.bar { height: 7px; overflow: hidden; border-radius: 999px; background: #070d13; margin-bottom: 12px; }
.bar > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--blue), var(--cyan)); }
.util { display: flex; justify-content: space-between; font-size: .76rem; }
.util span:first-child { color: var(--muted); }
.empty { grid-column: 1 / -1; padding: 50px; text-align: center; color: var(--muted); }

@media (max-width: 820px) {
    .hero-grid { grid-template-columns: 1fr; }
    .gpu-grid { grid-template-columns: repeat(2, 1fr); }
    .allocation-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
    .shell { width: min(100% - 20px, 1180px); padding-top: 24px; }
    .topbar { align-items: flex-start; gap: 18px; }
    .subtitle { display: none; }
    .form-grid, .form-grid.two-columns, .gpu-grid, .allocation-grid { grid-template-columns: 1fr; }
    .control-panel, .status-panel, .gpu-panel { padding: 18px; }
}