:root {
  color-scheme: light;
  --bg: #f3f7f9;
  --panel: #ffffff;
  --panel-2: #f8fbfc;
  --line: rgba(25, 65, 80, .13);
  --text: #102832;
  --muted: #607681;
  --cyan: #087f7c;
  --green: #138a59;
  --amber: #a56800;
  --red: #c74747;
  --shadow: 0 18px 55px rgba(24, 61, 76, .10);
}
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #071019;
  --panel: #0d1924;
  --panel-2: #111f2c;
  --line: rgba(148, 180, 199, .16);
  --text: #eef7fb;
  --muted: #8ea5b5;
  --cyan: #3fd6d0;
  --green: #5de0a0;
  --amber: #ffc766;
  --red: #ff7272;
  --shadow: 0 22px 70px rgba(0, 0, 0, .28);
}
* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
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 85% -10%, rgba(14,164,157,.13), transparent 35rem),
    linear-gradient(180deg, #fbfdfe 0, var(--bg) 38rem);
}
html[data-theme="dark"] body {
  background:
    radial-gradient(circle at 85% -10%, rgba(63,214,208,.13), transparent 35rem),
    linear-gradient(180deg, #08131d 0, var(--bg) 38rem);
}
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
.topbar {
  height: 74px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 clamp(20px, 4vw, 64px); border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.84); backdrop-filter: blur(18px); position: sticky; top: 0; z-index: 10;
}
.brand, .login-brand { display: flex; align-items: center; gap: 12px; }
.brand-mark {
  width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--cyan), #2781ff); color: #041117; font-weight: 900;
  box-shadow: 0 0 24px rgba(63,214,208,.25);
}
.brand-mark.large { width: 48px; height: 48px; border-radius: 14px; font-size: 22px; }
.brand span:last-child { display: grid; }
.brand small { color: var(--muted); font-size: 10px; letter-spacing: .08em; margin-top: 2px; }
nav { display: flex; align-items: center; gap: 24px; color: var(--muted); font-size: 14px; }
nav a:hover, .link-button:hover { color: var(--cyan); }
nav form { margin: 0; }
.link-button { color: var(--muted); background: none; border: 0; cursor: pointer; padding: 0; }
.theme-toggle { white-space: nowrap; }
.theme-toggle-floating {
  position: fixed; top: 20px; right: 22px; z-index: 20;
  color: var(--text); background: rgba(255,255,255,.88); border: 1px solid var(--line);
  border-radius: 999px; padding: 9px 13px; cursor: pointer; box-shadow: var(--shadow);
}
html[data-theme="dark"] .topbar { background: rgba(7,16,25,.83); }
html[data-theme="dark"] .theme-toggle-floating { background: rgba(13,25,36,.9); }
.shell { width: min(1440px, calc(100% - 40px)); margin: 0 auto; padding: 42px 0 70px; }
.hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; margin-bottom: 30px; }
.hero h1, .page-head h1 { margin: 4px 0 10px; font-size: clamp(30px, 4vw, 48px); letter-spacing: -.04em; }
.hero p:not(.eyebrow), .page-head p:not(.eyebrow), .narrow-panel > p { color: var(--muted); margin: 0; }
.eyebrow { margin: 0; font-size: 11px; font-weight: 800; color: var(--cyan); letter-spacing: .16em; }
.hero-status { min-width: 220px; display: flex; align-items: center; gap: 12px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.74); }
html[data-theme="dark"] .hero-status { background: rgba(13,25,36,.7); }
.hero-status div { display: grid; }
.hero-status small { color: var(--muted); margin-top: 3px; }
.pulse-dot, .status-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; background: var(--muted); }
.pulse-dot { width: 13px; height: 13px; box-shadow: 0 0 0 6px rgba(93,224,160,.08); }
.ok { --badge: var(--green); }
.bad { --badge: var(--red); }
.warn { --badge: var(--amber); }
.pulse-dot.ok, .status-dot.ok { background: var(--green); }
.pulse-dot.bad, .status-dot.bad { background: var(--red); }
.metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
.metric-card, .panel {
  border: 1px solid var(--line); background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(247,251,252,.98));
  border-radius: 18px; box-shadow: var(--shadow);
}
.metric-card { min-height: 138px; padding: 22px; display: flex; flex-direction: column; justify-content: space-between; }
.metric-card.accent { background: linear-gradient(145deg, rgba(224,249,247,.98), rgba(241,252,252,.98)); }
html[data-theme="dark"] .metric-card,
html[data-theme="dark"] .panel { background: linear-gradient(145deg, rgba(17,31,44,.95), rgba(10,22,32,.97)); }
html[data-theme="dark"] .metric-card.accent { background: linear-gradient(145deg, rgba(21,62,68,.95), rgba(10,32,39,.97)); }
.metric-card span, .metric-card small { color: var(--muted); }
.metric-card strong { font-size: clamp(24px, 3vw, 36px); letter-spacing: -.04em; }
.metric-card small { font-size: 12px; }
.dashboard-grid { display: grid; grid-template-columns: 1.25fr .75fr; align-items: start; gap: 18px; margin-bottom: 18px; }
.panel { padding: 24px; margin-bottom: 18px; }
.panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 22px; }
.panel-head h2 { margin: 4px 0 0; font-size: 20px; }
.badge {
  display: inline-flex; align-items: center; width: max-content; padding: 6px 9px; border-radius: 999px;
  background: color-mix(in srgb, var(--badge, var(--cyan)) 12%, transparent);
  color: var(--badge, var(--cyan)); border: 1px solid color-mix(in srgb, var(--badge, var(--cyan)) 25%, transparent);
  font-size: 11px; font-weight: 750; white-space: nowrap;
}
.badge.muted { --badge: var(--muted); }
.ping-reading { display: flex; align-items: baseline; gap: 8px; margin: 8px 0 20px; }
.ping-reading strong { font-size: clamp(48px, 8vw, 82px); letter-spacing: -.07em; }
.ping-reading span { color: var(--cyan); font-weight: 700; }
.ping-reading small { color: var(--muted); margin-left: auto; }
#pingChart { width: 100%; height: 130px; display: block; }
.ping-scale { display: flex; justify-content: space-between; color: var(--muted); font-size: 11px; margin-top: 8px; }
.machine-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.machine-form .wide { grid-column: 1 / -1; }
.deploy-log-panel { padding: 24px; }
.deploy-log-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.deploy-log-head h3 { margin: 4px 0 0; font-size: 20px; }
.deploy-log-context { color: var(--muted); font-size: 11px; margin: 12px 0 8px; }
.deploy-log-console {
  height: 280px; overflow: auto; border: 1px solid var(--line); border-radius: 12px;
  padding: 12px; background: #f5f9fa; color: #29414b;
  font: 11px/1.6 "SFMono-Regular", Consolas, monospace; scroll-behavior: smooth;
}
html[data-theme="dark"] .deploy-log-console { background: #061018; color: #bed0da; }
.deploy-log-line {
  display: grid; grid-template-columns: 68px 54px minmax(76px, auto) 1fr;
  gap: 8px; padding: 5px 0; border-bottom: 1px dashed var(--line);
}
.deploy-log-time, .deploy-log-machine { color: var(--muted); }
.deploy-log-level { font-weight: 800; text-transform: uppercase; }
.deploy-log-level.success { color: var(--green); }
.deploy-log-level.error { color: var(--red); }
.deploy-log-level.info { color: var(--cyan); }
.deploy-log-message { overflow-wrap: anywhere; }
.deploy-log-empty { color: var(--muted); padding: 20px 4px; text-align: center; }
.deploy-log-foot { margin: 8px 0 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.row-actions { display: flex; align-items: center; gap: 7px; }
.row-actions form { margin: 0; }
label { display: grid; gap: 7px; color: var(--muted); font-size: 12px; font-weight: 700; }
input {
  width: 100%; border: 1px solid var(--line); background: #ffffff; color: var(--text);
  border-radius: 10px; padding: 12px 13px; outline: none;
}
html[data-theme="dark"] input { background: #08131d; }
input:focus { border-color: rgba(63,214,208,.65); box-shadow: 0 0 0 3px rgba(63,214,208,.08); }
.primary-button, .secondary-button, .small-button {
  border: 0; border-radius: 10px; padding: 12px 16px; cursor: pointer; font-weight: 800;
}
.primary-button { background: linear-gradient(135deg, var(--cyan), #46b7ff); color: #04131b; }
.secondary-button, .small-button { color: var(--text); border: 1px solid var(--line); background: rgba(20,83,101,.035); }
html[data-theme="dark"] .secondary-button,
html[data-theme="dark"] .small-button { background: rgba(255,255,255,.035); }
.small-button { padding: 7px 10px; font-size: 11px; white-space: nowrap; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { color: var(--muted); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; text-align: left; padding: 0 12px 12px; }
td { border-top: 1px solid var(--line); padding: 14px 12px; vertical-align: middle; }
td:first-child { display: grid; gap: 4px; }
td small { color: var(--muted); }
.mono { font-family: "SFMono-Regular", Consolas, monospace; }
.compact { max-width: 170px; overflow: hidden; text-overflow: ellipsis; }
.error-row td { color: var(--red); background: rgba(255,114,114,.04); font-size: 12px; }
.pool-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.pool-node { border: 1px solid var(--line); border-radius: 12px; padding: 14px; display: grid; gap: 8px; background: rgba(239,247,249,.72); }
html[data-theme="dark"] .pool-node { background: rgba(5,14,22,.35); }
.pool-node.selected { border-color: rgba(63,214,208,.55); background: rgba(63,214,208,.07); }
.pool-node div { display: flex; align-items: center; gap: 8px; }
.pool-node > span { font-size: 22px; font-weight: 800; }
.pool-node small { color: var(--muted); }
.flash, .password-warning { padding: 13px 16px; border-radius: 11px; margin-bottom: 16px; border: 1px solid var(--line); }
.flash.success { color: var(--green); background: rgba(93,224,160,.08); }
.flash.error { color: var(--red); background: rgba(255,114,114,.08); }
.password-warning { color: var(--amber); background: rgba(255,199,102,.07); }
.password-warning a { text-decoration: underline; margin-left: 4px; }
.login-body { display: grid; place-items: center; }
.login-shell { width: min(440px, calc(100% - 32px)); }
.login-card { border: 1px solid var(--line); background: rgba(255,255,255,.94); border-radius: 22px; padding: 34px; box-shadow: var(--shadow); }
html[data-theme="dark"] .login-card { background: rgba(13,25,36,.94); }
.login-brand h1 { font-size: 34px; margin: 0; letter-spacing: -.04em; }
.login-copy, .login-foot { color: var(--muted); }
.login-copy { margin: 24px 0; line-height: 1.6; }
.login-foot { text-align: center; font-size: 11px; margin: 18px 0 0; }
.stack-form { display: grid; gap: 15px; margin-top: 22px; }
.page-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 28px; gap: 20px; }
.users-grid { grid-template-columns: 1fr 1fr; }
.user-list { display: grid; }
.user-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 14px 0; border-top: 1px solid var(--line); }
.avatar { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; background: rgba(63,214,208,.12); color: var(--cyan); font-weight: 900; }
.user-row div { display: grid; gap: 3px; }
.user-row small { color: var(--muted); }
.narrow-panel { max-width: 560px; margin: 30px auto; }
.narrow-panel h1 { margin-bottom: 8px; }
@media (max-width: 980px) {
  .metric-grid { grid-template-columns: 1fr 1fr; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .pool-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .shell { width: min(100% - 24px, 1440px); padding-top: 26px; }
  .topbar { height: 64px; padding: 0 14px; }
  .brand small { display: none; }
  nav { gap: 13px; }
  .hero, .page-head { align-items: flex-start; flex-direction: column; }
  .hero-status { width: 100%; }
  .metric-grid, .pool-grid { grid-template-columns: 1fr 1fr; }
  .metric-card { min-height: 122px; }
  .panel { padding: 18px; border-radius: 15px; }
  .machine-form { grid-template-columns: 1fr; }
  .machine-form .wide { grid-column: auto; }
  .deploy-log-line { grid-template-columns: 60px 48px 1fr; }
  .deploy-log-machine { display: none; }
  .ping-reading small { display: none; }
}
@media (max-width: 430px) {
  .metric-grid, .pool-grid { grid-template-columns: 1fr; }
  nav a:first-child { display: none; }
  .login-card { padding: 26px 22px; }
}