:root {
  --bg: #07111e;
  --bg-soft: #0d2238;
  --panel: rgba(255, 255, 255, 0.08);
  --panel-soft: rgba(255, 255, 255, 0.10);
  --line: rgba(150, 205, 233, 0.16);
  --text: #f4fbff;
  --muted: #b5cedd;
  --accent: #34b7c8;
  --primary: #1d70b8;
  --success: #36c171;
  --warning: #f3a53c;
  --danger: #d15555;
  --node-point: rgba(52, 183, 200, 0.42);
  --node-line: rgba(52, 183, 200, 0.16);
  --theme-bg-start: #07111e;
  --theme-bg-mid: #09203a;
  --theme-bg-end: #0d2a42;
  --theme-bg-glow: rgba(52, 183, 200, 0.18);
  --console-width: min(94vw, 1400px);
  --settings-width: min(90vw, 400px);
  --radius: clamp(1vw, 1.4vw, 2vw);
  --inner-radius: clamp(0.8vw, 1.1vw, 1.5vw);
  --panel-edge: 0.08vw solid rgba(255, 255, 255, 0.14);
  --inner-edge: 0.08vw solid rgba(255, 255, 255, 0.12);
  --soft-shadow: 0 2.6vh 5.6vh rgba(0, 0, 0, 0.28);
}

:root[data-theme='light'] {
  --theme-bg-start: #dfe7ef;
  --theme-bg-mid: #cfd9e4;
  --theme-bg-end: #bfcad6;
  --theme-bg-glow: rgba(255, 255, 255, 0.28);
}

:root[data-theme='dark'] {
  --theme-bg-start: #111318;
  --theme-bg-mid: #1a1d24;
  --theme-bg-end: #232832;
  --theme-bg-glow: rgba(255, 255, 255, 0.08);
}

:root[data-theme='blue-glass'] {
  --theme-bg-start: #081a27;
  --theme-bg-mid: #0d3042;
  --theme-bg-end: #14465b;
  --theme-bg-glow: rgba(114, 218, 255, 0.16);
}

:root[data-theme='crimson'] {
  --theme-bg-start: #22020c;
  --theme-bg-mid: #3b0714;
  --theme-bg-end: #5d0f1f;
  --theme-bg-glow: rgba(210, 44, 79, 0.16);
}

:root[data-theme='pink'] {
  --theme-bg-start: #2b1721;
  --theme-bg-mid: #4a2537;
  --theme-bg-end: #6b3850;
  --theme-bg-glow: rgba(239, 177, 206, 0.16);
}

:root[data-theme='rose-dark'] {
  --theme-bg-start: #180912;
  --theme-bg-mid: #31111f;
  --theme-bg-end: #4a1c31;
  --theme-bg-glow: rgba(192, 95, 136, 0.14);
}

:root[data-theme='rainbow'] {
  --theme-bg-start: #1d1638;
  --theme-bg-mid: #0e3a57;
  --theme-bg-end: #40204c;
  --theme-bg-glow: rgba(255, 204, 102, 0.16);
}

:root[data-theme='neon-dark'] {
  --theme-bg-start: #04181d;
  --theme-bg-mid: #0b2435;
  --theme-bg-end: #1f1140;
  --theme-bg-glow: rgba(98, 255, 223, 0.16);
}

:root[data-theme='forest'] {
  --theme-bg-start: #07160b;
  --theme-bg-mid: #11311a;
  --theme-bg-end: #194826;
  --theme-bg-glow: rgba(90, 185, 105, 0.16);
}

:root[data-theme='ocean'] {
  --theme-bg-start: #07111e;
  --theme-bg-mid: #09203a;
  --theme-bg-end: #0d2a42;
  --theme-bg-glow: rgba(52, 183, 200, 0.18);
}

:root[data-theme='sand'] {
  --theme-bg-start: #241d14;
  --theme-bg-mid: #493c28;
  --theme-bg-end: #726043;
  --theme-bg-glow: rgba(219, 190, 125, 0.14);
}

:root[data-theme='midnight'] {
  --theme-bg-start: #050814;
  --theme-bg-mid: #0b1530;
  --theme-bg-end: #12224d;
  --theme-bg-glow: rgba(71, 120, 255, 0.16);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  color: var(--text);
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  background:
    radial-gradient(circle at top right, var(--theme-bg-glow), transparent 34%),
    linear-gradient(135deg, var(--theme-bg-start), var(--theme-bg-mid) 52%, var(--theme-bg-end));
}

body {
  min-height: 100svh;
  overflow-x: hidden;
  overflow-y: auto;
}

.console-body {
  min-height: 100svh;
  overflow-x: hidden;
  overflow-y: auto;
}

.site-header {
  --text: #182338;
  --muted: #5c6d82;
  --primary-dark: #134a7d;
  color: var(--text);
}

.settings-body {
  overflow: auto;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select {
  font: inherit;
}

h1,
h2,
p {
  margin: 0;
}

.app-shell,
.settings-shell {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: clamp(1.1vh, 2.4vh, 2.8vh) 2.5%;
  overflow: visible;
}

.console-body .app-shell {
  height: auto;
  min-height: calc(100svh - var(--header-offset-height, 76px));
  overflow: visible;
}

.settings-shell {
  align-items: center;
  padding-top: 2.8vh;
  padding-bottom: 2.8vh;
}

.node-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.72;
}

.console-wrap,
.settings-panel {
  position: relative;
  z-index: 1;
}

.console-wrap {
  width: 100%;
  max-width: 100%;
  height: auto;
  min-height: 0;
  display: flex;
  align-items: stretch;
  justify-content: center;
}

.service-console-panel,
.settings-panel {
  width: var(--console-width);
  max-width: 100%;
  max-height: none;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border: var(--panel-edge);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: var(--soft-shadow);
  backdrop-filter: blur(1vw);
  -webkit-backdrop-filter: blur(1vw);
}

.service-console-panel {
  height: auto;
  overflow: visible;
}

.settings-panel {
  width: var(--settings-width);
  max-height: none;
}

.settings-modal[hidden] {
  display: none;
}

.settings-modal {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 3vw, 2.5rem);
}

.settings-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 18, 31, 0.58);
  backdrop-filter: blur(0.55rem);
  -webkit-backdrop-filter: blur(0.55rem);
}

.settings-modal-frame {
  position: relative;
  z-index: 1;
  width: min(92vw, 420px);
  height: min(82vh, 320px);
  border: var(--panel-edge);
  border-radius: var(--radius);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: var(--soft-shadow);
}

.settings-modal-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.settings-modal-open {
  overflow: hidden;
}

.panel-top,
.card-head {
  display: flex;
  align-items: center;
  gap: clamp(1.2%, 1.8vw, 2.8%);
  padding: clamp(0.75em, 1.6vh, 1.1em) 1.35em;
  border-bottom: 0.08vw solid rgba(255, 255, 255, 0.10);
  flex: 0 0 auto;
}

.panel-heading,
.card-head > div:first-child {
  display: flex;
  flex-direction: column;
  gap: 0.6vh;
  min-width: 0;
}

.panel-heading span,
.settings-panel h1 {
  font-weight: 800;
}

.panel-heading span {
  font-size: clamp(1.45em, 1.25vw, 2.15em);
  line-height: 1.05;
}

.panel-heading small,
.inline-note,
.site-meta,
.site-error,
.footer-copy,
label,
.card-kicker,
.site-list-label,
.site-index,
.site-empty-copy,
.timer-pill,
.status-badge,
.github-link,
.btn {
  color: var(--muted);
  font-size: clamp(0.82em, 0.54vw, 1em);
  line-height: 1.45;
}

.card-kicker {
  color: #9cc8db;
  font-weight: 800;
  letter-spacing: clamp(0.08em, 0.16vw, 0.18em);
  text-transform: uppercase;
}

.settings-panel h1 {
  font-size: clamp(1.7em, 1.45vw, 2.4em);
  line-height: 1.02;
}

.pulse-dot,
.status-dot {
  width: clamp(0.85em, 1vw, 1.15em);
  height: clamp(0.85em, 1vw, 1.15em);
  min-width: clamp(0.85em, 1vw, 1.15em);
  min-height: clamp(0.85em, 1vw, 1.15em);
  border-radius: 50%;
  background: var(--danger);
  box-shadow: 0 0 0 clamp(0.45em, 0.72vw, 0.8em) rgba(209, 85, 85, 0.16);
  flex: 0 0 auto;
}

.pulse-dot.is-online,
.status-dot.is-up {
  background: var(--success);
  box-shadow: 0 0 0 clamp(0.45em, 0.72vw, 0.8em) rgba(54, 193, 113, 0.16);
}

.pulse-dot.is-warning,
.status-dot.is-degraded,
.status-badge.is-degraded {
  background: var(--warning);
  box-shadow: 0 0 0 clamp(0.45em, 0.72vw, 0.8em) rgba(243, 165, 60, 0.16);
}

.pulse-dot.is-offline,
.status-dot.is-down,
.status-badge.is-down {
  background: var(--danger);
  box-shadow: 0 0 0 clamp(0.45em, 0.72vw, 0.8em) rgba(209, 85, 85, 0.16);
}

.console-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(1.4%, 2vw, 3%);
  padding: clamp(0.55em, 1.4vh, 1em) 1.35em;
  flex: 0 0 auto;
  flex-wrap: wrap;
}

.toolbar-group {
  display: flex;
  align-items: center;
  gap: 0.65em;
  flex-wrap: wrap;
}

.toolbar-group-right {
  flex: 0 0 auto;
  justify-content: flex-end;
  align-items: center;
  gap: 0.65em;
  flex-wrap: nowrap;
  white-space: nowrap;
}

.timer-pill,
.status-badge,
.github-link,
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(2.1em, 2.1vw + 0.5em, 2.8em);
  padding: 0 clamp(0.9em, 1.2vw, 1.4em);
  border-radius: 999vw;
  border: 0.08vw solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.08);
  color: #dcecf6;
  font-weight: 800;
  line-height: 1;
}

.btn,
.settings-gear {
  cursor: pointer;
}

.btn.primary {
  color: #fff;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  border-color: transparent;
}

.btn.secondary {
  background: rgba(255, 255, 255, 0.08);
}

.timer-pill {
  color: #fff;
}

.timer-pill-muted {
  color: var(--muted);
}

.status-badge {
  min-width: 0;
}

.status-badge.is-up {
  background: rgba(54, 193, 113, 0.16);
  border-color: rgba(54, 193, 113, 0.32);
  color: #effff5;
}

.status-badge.is-paused {
  color: #d4e3ec;
}

.settings-form {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 1.1em 1.2em;
  border: var(--inner-edge);
  border-radius: var(--inner-radius);
  background: rgba(255, 255, 255, 0.06);
}

.settings-form {
  grid-template-columns: 100%;
}

label {
  display: grid;
  gap: 0.8vh;
  color: #dff4fc;
  font-weight: 700;
}

input,
select {
  width: 100%;
  min-height: clamp(2.7em, 2.4vw + 0.4em, 3.3em);
  padding: 0 4%;
  color: #182338;
  background: rgba(255, 255, 255, 0.94);
  border: 0.08vw solid rgba(29, 112, 184, 0.22);
  border-radius: clamp(0.55vw, 0.9vw, 1.1vw);
}

input:focus,
select:focus {
  outline: 0.18vw solid rgba(52, 183, 200, 0.34);
}

.inline-actions {
  display: flex;
  align-items: center;
  gap: clamp(0.9%, 1.2vw, 1.8%);
  flex-wrap: wrap;
}

.sites-panel {
  flex: 0 0 auto;
  min-height: 0;
  overflow: visible;
  margin: 0 1.35em 1.35em;
  padding: clamp(0.65em, 1.45vh, 1em) 1.05em;
  border: var(--inner-edge);
  border-radius: var(--inner-radius);
  background: rgba(255, 255, 255, 0.06);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: auto repeat(3, minmax(7.5em, auto));
  gap: clamp(0.6em, 1.35vh, 1.4em) 2%;
  align-content: stretch;
}

.site-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1.2%, 2vw, 3%);
  padding-bottom: clamp(0.25em, 0.8vh, 0.55em);
  grid-column: 1 / -1;
  min-height: 0;
}

.site-list-label {
  color: #fff;
  font-weight: 800;
}

.site-widget {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: center;
  gap: clamp(0.5em, 0.95vh, 1.1em) 1.2em;
  padding: clamp(0.58em, 1.15vh, 1.08em);
  border: 0.08vw solid rgba(255, 255, 255, 0.10);
  border-radius: calc(var(--inner-radius) * 0.9);
  background: rgba(255, 255, 255, 0.03);
  min-width: 0;
  min-height: 0;
  overflow: visible;
}

.site-widget:last-child {
  padding-bottom: clamp(0.58em, 1.15vh, 1.08em);
}

.site-widget-left {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(0.2em, 0.55vh, 0.6vh);
}

.site-title-line {
  display: flex;
  align-items: baseline;
  gap: clamp(0.6%, 1vw, 1.4%);
  min-width: 0;
}

.site-index {
  color: #9cc8db;
  font-weight: 800;
  flex: 0 0 auto;
}

.site-url {
  color: #ffffff;
  font-size: clamp(0.98em, 0.72vw, 1.22em);
  font-weight: 800;
  line-height: 1.2;
  word-break: break-word;
}

.site-meta-block {
  display: flex;
  flex-direction: column;
  gap: clamp(0.12em, 0.4vh, 0.4vh);
}

.site-meta-strong {
  color: #dfeff8;
}

.site-error {
  color: #d7e6f0;
  max-width: 100%;
}

.site-widget-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: clamp(0.5em, 0.8vw, 0.9em);
  align-self: center;
}

.site-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 22vh;
  color: var(--muted);
  grid-column: 1 / -1;
}

.console-footer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1.2%, 2vw, 3%);
  padding: 0 1.35em clamp(0.65em, 1.45vh, 1.35em);
  flex: 0 0 auto;
  flex-wrap: wrap;
}

.footer-side {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.9em;
  flex-wrap: wrap;
}

.footer-copy-right {
  text-align: right;
}

.github-link {
  gap: clamp(0.5em, 0.8vw, 0.9em);
  padding-inline: clamp(0.9em, 1.2vw, 1.4em);
}

.github-link svg,
.settings-console-btn svg {
  width: clamp(0.95em, 1vw, 1.25em);
  height: clamp(0.95em, 1vw, 1.25em);
}

.settings-console-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(2.8em, 2.6vw + 0.8em, 3.4em);
  min-width: clamp(2.8em, 2.6vw + 0.8em, 3.4em);
  height: clamp(2.8em, 2.6vw + 0.8em, 3.4em);
  border: 0.08vw solid rgba(255, 255, 255, 0.18);
  border-radius: 999vw;
  background: linear-gradient(135deg, rgba(29, 112, 184, 0.9), rgba(52, 183, 200, 0.9));
  color: #fff;
  box-shadow: 0 1.4vh 3.2vh rgba(3, 10, 22, 0.24);
}

.settings-console-btn svg {
  width: clamp(1.1em, 1.2vw, 1.35em);
  height: clamp(1.1em, 1.2vw, 1.35em);
}

@media (max-width: 1280px) {
  :root {
    --console-width: min(96vw, 1240px);
    --settings-width: min(92vw, 400px);
  }
}

@media (max-width: 980px) {
  :root {
    --console-width: 94vw;
    --settings-width: 94vw;
    --radius: clamp(1.8vw, 2.2vw, 2.8vw);
    --inner-radius: clamp(1.3vw, 1.7vw, 2.2vw);
  }

  .app-shell,
  .settings-shell {
    padding-bottom: 10vh;
  }

  .console-body .app-shell {
    padding-bottom: 2.8vh;
  }

  .site-widget-right {
    justify-content: flex-end;
  }

  .footer-side {
    margin-left: 0;
    justify-content: flex-start;
  }

  .footer-copy-right {
    text-align: left;
  }
}

@media (max-height: 850px) and (min-width: 701px) {
  .console-body .app-shell {
    padding-top: 1.2vh;
    padding-bottom: 1.2vh;
  }

  .panel-top {
    padding: 0.65em 1em;
  }

  .panel-heading span {
    font-size: clamp(1.12em, 1vw, 1.45em);
  }

  .console-toolbar {
    padding: 0.45em 1em;
  }

  .timer-pill,
  .status-badge,
  .github-link,
  .btn {
    min-height: 2em;
    padding-inline: 0.8em;
  }

  .sites-panel {
    margin: 0 1em 0.75em;
    padding: 0.6em;
    gap: 0.55em 1.5%;
  }

  .site-list-head {
    padding-bottom: 0.15em;
  }

  .site-widget {
    padding: 0.5em 0.65em;
    gap: 0.42em 0.8em;
  }

  .site-url {
    font-size: clamp(0.86em, 0.68vw, 1.02em);
  }

  .site-meta,
  .site-error {
    font-size: 0.76em;
    line-height: 1.25;
  }

  .console-footer-bar {
    padding: 0 1em 0.55em;
  }

  .settings-console-btn {
    width: 2.6em;
    min-width: 2.6em;
    height: 2.6em;
  }
}

@media (max-height: 700px) and (min-width: 701px) {
  .site-meta,
  .site-error {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .site-meta {
    white-space: nowrap;
  }

  .site-error {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }
}


@media (max-width: 860px) {
  .console-toolbar {
    gap: 0.9em;
    align-items: center;
  }

  .toolbar-group-right {
    margin-left: auto;
  }
}

@media (max-width: 700px) {
  :root {
    --console-width: 100%;
    --settings-width: 94%;
    --radius: 3vw;
    --inner-radius: 2.2vw;
  }

  .console-body nav {
    display: flex;
    width: 100%;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: clamp(0.1em, 0.9vw, 0.35em);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .console-body nav::-webkit-scrollbar {
    display: none;
  }

  .console-body nav a {
    flex: 0 0 auto;
    padding-inline: clamp(0.32em, 1.45vw, 0.55em);
    font-size: clamp(0.78rem, 2.55vw, 0.9rem);
    white-space: nowrap;
  }

  .console-body {
    height: auto;
    min-height: 100svh;
    max-width: 100vw;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .console-body .site-header,
  .console-body .nav-wrap,
  .console-body nav {
    max-width: 100%;
    min-width: 0;
  }

  .console-body .app-shell {
    width: 100%;
    max-width: 100vw;
    height: auto;
    min-height: calc(100svh - var(--header-offset-height, 76px));
    overflow: visible;
    padding-inline: max(10px, env(safe-area-inset-left));
  }

  .console-wrap,
  .service-console-panel {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: auto;
  }

  .service-console-panel {
    overflow: visible;
  }

  .panel-heading span {
    font-size: clamp(1.35em, 4vw, 1.9em);
  }

  .panel-heading small,
  .inline-note,
  .site-meta,
  .site-error,
  .footer-copy,
  label,
  .card-kicker,
  .site-list-label,
  .site-index,
  .site-empty-copy,
  .timer-pill,
  .status-badge,
  .github-link,
  .btn {
    font-size: clamp(0.86em, 2vw, 0.98em);
  }

  .site-url,
  .settings-panel h1 {
    font-size: clamp(1em, 2.6vw, 1.18em);
  }

  .sites-panel {
    width: auto;
    max-width: 100%;
    min-width: 0;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    margin-inline: 0.75em;
    overflow: visible;
    padding: 0.85em;
    gap: 0.9em;
  }

  .site-widget {
    max-width: 100%;
    min-width: 0;
    grid-template-columns: 1fr;
    align-items: flex-start;
    padding: 1em;
  }

  .site-title-line {
    max-width: 100%;
    min-width: 0;
    align-items: flex-start;
  }

  .site-url,
  .site-meta,
  .site-error {
    display: block;
    max-width: calc(100vw - 96px);
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .console-toolbar,
  .console-footer-bar,
  .inline-actions,
  .site-list-head {
    align-items: flex-start;
  }

  .console-toolbar {
    justify-content: flex-start;
  }

  .site-list-head {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0.25em;
  }

  .toolbar-group-right {
    width: 100%;
    margin-left: 0;
    justify-content: flex-start;
    flex-wrap: wrap;
    white-space: normal;
  }

  .console-footer-bar {
    flex-direction: column;
  }

  .site-widget,
  .site-widget-right {
    gap: 0.8em;
  }

  .site-widget-right {
    width: 100%;
    justify-content: flex-start;
    align-self: flex-start;
    flex-wrap: wrap;
  }

  .footer-side {
    width: 100%;
    justify-content: flex-start;
  }

  .settings-console-btn {
    width: 3.1em;
    min-width: 3.1em;
    height: 3.1em;
  }
}

@media (max-width: 700px) {
  .site-widget-left,
  .site-title-line,
  .site-url,
  .site-meta,
  .site-error {
    max-width: min(100%, 19rem);
  }
}