:root {
  --bg: #eef2f7;
  --bg-soft: #f9fbff;
  --surface: rgba(255, 255, 255, 0.94);
  --surface-2: #f4f8ff;
  --ink: #1b2534;
  --ink-soft: #5b6b82;
  --line: #d6e0ef;
  --brand: #0c5d8f;
  --brand-2: #1187b8;
  --ok: #1f8f6a;
  --warn: #c98022;
  --danger: #c94242;
  --radius-card: 16px;
  --radius-control: 12px;
  --shadow: 0 14px 36px rgba(14, 35, 61, 0.08);
  --font-body: "Manrope", "Segoe UI", sans-serif;
  --font-head: "Space Grotesk", "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  font-family: var(--font-body);
  color: var(--ink);
  background:
    radial-gradient(1200px 620px at -8% -10%, rgba(12, 93, 143, 0.22), transparent 62%),
    radial-gradient(1000px 520px at 105% -12%, rgba(17, 135, 184, 0.18), transparent 66%),
    linear-gradient(180deg, #f9fcff 0%, var(--bg) 100%);
  min-height: 100vh;
}

body.theme-corporate {
  --bg: #edf2f8;
  --bg-soft: #f8fbff;
  --surface: rgba(255, 255, 255, 0.95);
  --surface-2: #f2f7ff;
  --ink: #1d2738;
  --ink-soft: #5a6980;
  --line: #d7e2f0;
  --brand: #0b5b8c;
  --brand-2: #1589ba;
  --shadow: 0 14px 30px rgba(13, 41, 72, 0.08);
  --font-body: "Manrope", "Segoe UI", sans-serif;
  --font-head: "Space Grotesk", "Segoe UI", sans-serif;
}

body.theme-playful {
  --bg: #fff2f3;
  --bg-soft: #fffafb;
  --surface: rgba(255, 255, 255, 0.94);
  --surface-2: #fff5eb;
  --ink: #3d2c36;
  --ink-soft: #7f6371;
  --line: #f1cedd;
  --brand: #ff5f8d;
  --brand-2: #ff9648;
  --ok: #2aaf71;
  --warn: #f3a302;
  --danger: #df3f7b;
  --radius-card: 24px;
  --radius-control: 16px;
  --shadow: 0 18px 38px rgba(255, 95, 141, 0.16);
  --font-body: "Baloo 2", "Manrope", sans-serif;
  --font-head: "Baloo 2", "Sora", sans-serif;
  background:
    radial-gradient(900px 520px at -12% -14%, rgba(255, 95, 141, 0.28), transparent 62%),
    radial-gradient(800px 420px at 110% -14%, rgba(255, 150, 72, 0.24), transparent 62%),
    linear-gradient(180deg, #fff9fb 0%, #ffe8ef 100%);
}

body.theme-neon {
  --bg: #070c18;
  --bg-soft: #0d1322;
  --surface: rgba(16, 27, 48, 0.9);
  --surface-2: #162543;
  --ink: #eaf7ff;
  --ink-soft: #9fc0da;
  --line: #2c4267;
  --brand: #00d6ff;
  --brand-2: #7f5bff;
  --ok: #1bf3a4;
  --warn: #f7d158;
  --danger: #ff4d8c;
  --radius-card: 14px;
  --radius-control: 10px;
  --shadow: 0 0 0 rgba(0, 0, 0, 0), 0 0 22px rgba(0, 214, 255, 0.16);
  --font-body: "Sora", "Manrope", sans-serif;
  --font-head: "Space Grotesk", "Sora", sans-serif;
  background:
    radial-gradient(1400px 760px at -10% -10%, rgba(0, 214, 255, 0.2), transparent 62%),
    radial-gradient(1200px 720px at 110% -10%, rgba(127, 91, 255, 0.23), transparent 64%),
    linear-gradient(180deg, #090f1d 0%, var(--bg) 100%);
}

body.theme-neon,
body.theme-neon .card,
body.theme-neon .card-body {
  color: var(--ink);
}

body.theme-neon .h1,
body.theme-neon .h2,
body.theme-neon .h3,
body.theme-neon .h4,
body.theme-neon .h5,
body.theme-neon .h6,
body.theme-neon h1,
body.theme-neon h2,
body.theme-neon h3,
body.theme-neon h4,
body.theme-neon h5,
body.theme-neon h6,
body.theme-neon strong,
body.theme-neon .form-label,
body.theme-neon .form-check-label,
body.theme-neon .table {
  color: var(--ink) !important;
}

body.theme-neon .text-secondary,
body.theme-neon .small,
body.theme-neon .text-muted {
  color: var(--ink-soft) !important;
}

body.theme-neon .table {
  --bs-table-color: var(--ink);
  --bs-table-bg: transparent;
  --bs-table-border-color: color-mix(in srgb, var(--line) 85%, transparent);
  --bs-table-striped-color: var(--ink);
  --bs-table-hover-color: var(--ink);
  color: var(--ink) !important;
}

body.theme-neon .table > :not(caption) > * > * {
  color: var(--ink) !important;
  border-bottom-color: color-mix(in srgb, var(--line) 88%, transparent);
}

body.theme-neon .table th,
body.theme-neon .table td,
body.theme-neon .table tbody tr,
body.theme-neon .table a {
  color: var(--ink) !important;
}

body.theme-neon .table td .text-secondary,
body.theme-neon .table td.small,
body.theme-neon .table .small.text-secondary {
  color: var(--ink-soft) !important;
}

body.theme-neon .form-select,
body.theme-neon .form-select option {
  color: var(--ink) !important;
  background: var(--bg-soft) !important;
}

body.theme-neon hr {
  border-color: color-mix(in srgb, var(--line) 78%, transparent);
  opacity: 1;
}

body.theme-neon .btn-outline-primary {
  color: #a6ebff;
  border-color: color-mix(in srgb, var(--brand) 58%, var(--line));
}

body.theme-neon .btn-outline-primary:hover {
  color: #071225;
  background: color-mix(in srgb, var(--brand) 72%, white);
}

body.theme-neon .btn-outline-secondary {
  color: #dbeeff;
  border-color: color-mix(in srgb, var(--line) 78%, var(--ink-soft));
}

body.theme-neon .btn-outline-secondary:hover {
  color: #091223;
  background: color-mix(in srgb, var(--line) 66%, white);
}

body.theme-neon .btn-outline-danger {
  color: #ff9fbd;
  border-color: color-mix(in srgb, var(--danger) 64%, var(--line));
}

body.theme-neon .btn-outline-warning {
  color: #ffe39c;
  border-color: color-mix(in srgb, var(--warn) 64%, var(--line));
}

body.theme-neon .btn-outline-success {
  color: #a8ffd9;
  border-color: color-mix(in srgb, var(--ok) 62%, var(--line));
}

body.theme-mono {
  --bg: #e9eaec;
  --bg-soft: #f4f5f6;
  --surface: rgba(249, 249, 249, 0.94);
  --surface-2: #f0f1f2;
  --ink: #111111;
  --ink-soft: #5b5b5b;
  --line: #cfcfcf;
  --brand: #232323;
  --brand-2: #4f4f4f;
  --ok: #232323;
  --warn: #545454;
  --danger: #111111;
  --radius-card: 8px;
  --radius-control: 6px;
  --shadow: 0 9px 16px rgba(30, 30, 30, 0.12);
  --font-body: "IBM Plex Mono", "Consolas", monospace;
  --font-head: "IBM Plex Mono", "Consolas", monospace;
  background:
    linear-gradient(0deg, rgba(0, 0, 0, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.03) 1px, transparent 1px),
    linear-gradient(180deg, #f6f6f6 0%, #e6e7e8 100%);
  background-size: 24px 24px, 24px 24px, 100% 100%;
}

body.theme-sunrise {
  --bg: #fff3df;
  --bg-soft: #fff8ed;
  --surface: rgba(255, 255, 255, 0.93);
  --surface-2: #fff1dc;
  --ink: #3b2415;
  --ink-soft: #87684d;
  --line: #f0d2a8;
  --brand: #c7682b;
  --brand-2: #ed9d41;
  --ok: #49834c;
  --warn: #c17a00;
  --danger: #b03d37;
  --radius-card: 20px;
  --radius-control: 14px;
  --shadow: 0 14px 28px rgba(199, 104, 43, 0.16);
  --font-body: "Sora", "Manrope", sans-serif;
  --font-head: "Space Grotesk", "Sora", sans-serif;
  background:
    radial-gradient(1200px 650px at -10% -8%, rgba(255, 177, 102, 0.32), transparent 62%),
    radial-gradient(1050px 540px at 110% -10%, rgba(244, 113, 65, 0.28), transparent 64%),
    linear-gradient(180deg, #fffaf1 0%, #ffeacd 100%);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-head);
  color: var(--ink);
  letter-spacing: -0.02em;
}

p,
label,
small,
.text-secondary {
  color: var(--ink-soft) !important;
}

.app-shell {
  max-width: 1700px;
}

.card {
  border-radius: var(--radius-card);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  backdrop-filter: blur(6px);
}

.hero {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(140deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02)),
    var(--surface);
}

.hero::after {
  content: "";
  position: absolute;
  width: 360px;
  height: 360px;
  right: -130px;
  top: -170px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0));
  pointer-events: none;
}

.badge-soft {
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: color-mix(in srgb, var(--brand) 16%, white);
  color: var(--brand);
}

.hero-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(170px, 1fr));
  gap: 10px;
  align-items: end;
}

.hero-stat-card {
  border: 1px solid var(--line);
  border-radius: calc(var(--radius-control) + 2px);
  background: var(--surface-2);
  padding: 10px 12px;
}

.hero-stat-card.is-running {
  border-color: color-mix(in srgb, var(--ok) 55%, var(--line));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ok) 40%, transparent);
}

.hero-stat-card.is-idle {
  border-color: color-mix(in srgb, var(--line) 88%, var(--ink-soft));
}

.hero-stat-label {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: 6px;
}

.hero-stat-value {
  margin-top: 4px;
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--ink);
}

.hero-logout {
  display: flex;
  align-items: stretch;
}

.hero-logout .btn {
  min-height: 100%;
}

.side-nav {
  position: sticky;
  top: 16px;
}

.menu-btn {
  margin: 0.25rem 0;
  border-radius: var(--radius-control);
  font-weight: 800;
  border: 1px solid var(--line);
}

.menu-with-state {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.menu-btn.btn-light {
  background: var(--surface-2);
  color: var(--ink);
}

.menu-btn.btn-light:hover {
  filter: brightness(0.98);
}

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

.menu-state-badge {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  border-radius: 999px;
  padding: 2px 8px;
  border: 1px solid transparent;
  white-space: nowrap;
}

.menu-state-badge.running {
  background: color-mix(in srgb, var(--ok) 26%, transparent);
  color: var(--ok);
  border-color: color-mix(in srgb, var(--ok) 42%, transparent);
}

.menu-state-badge.stopped {
  background: color-mix(in srgb, var(--ink-soft) 16%, transparent);
  color: var(--ink-soft);
  border-color: color-mix(in srgb, var(--ink-soft) 28%, transparent);
}

.status-card {
  border-radius: calc(var(--radius-control) + 2px);
  border: 1px solid var(--line);
  background: var(--surface-2);
  padding: 14px;
}

.status-label {
  font-weight: 900;
  color: var(--ink);
  margin-bottom: 8px;
}

.status-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.theme-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.theme-form {
  margin: 0;
}

.theme-card {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius-control) + 2px);
  background: var(--surface-2);
  padding: 14px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  text-align: left;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.theme-card:hover {
  transform: translateY(-2px);
}

.theme-card.active {
  border-color: color-mix(in srgb, var(--brand) 58%, var(--line));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 24%, transparent);
}

.theme-card-name {
  font-weight: 900;
  color: var(--ink);
}

.theme-card-key {
  font-size: 0.78rem;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.theme-card-corporate {
  background: linear-gradient(135deg, #eef5ff, #f8fcff);
}

.theme-card-playful {
  background: linear-gradient(135deg, #ffeaf2, #fff3dd);
}

.theme-card-neon {
  background: linear-gradient(135deg, #0f1831, #1a1f40);
}

.theme-card-neon .theme-card-name,
.theme-card-neon .theme-card-key {
  color: #d8f2ff;
}

body.theme-neon .theme-card:not(.theme-card-neon) .theme-card-name {
  color: #355271;
}

body.theme-neon .theme-card:not(.theme-card-neon) .theme-card-key {
  color: #6484a5;
}

.theme-card-mono {
  background: linear-gradient(135deg, #ececec, #f8f8f8);
}

.theme-card-sunrise {
  background: linear-gradient(135deg, #ffe4c1, #fff2dd);
}

.login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.login-wrap {
  width: 100%;
  max-width: 560px;
}

.login-card {
  border-radius: var(--radius-card);
}

.alert-info {
  border-radius: var(--radius-control);
  border: 1px solid color-mix(in srgb, var(--brand) 35%, var(--line));
  background: color-mix(in srgb, var(--brand) 8%, white);
  color: var(--ink);
}

body.theme-neon .alert-info {
  border-color: color-mix(in srgb, var(--brand) 62%, var(--line));
  background: color-mix(in srgb, var(--brand) 14%, var(--bg-soft));
  color: #def4ff !important;
}

body.theme-neon .alert-info * {
  color: #def4ff !important;
}

.btn {
  border-radius: var(--radius-control);
  font-weight: 800;
  position: relative;
  transition: transform 0.16s ease, filter 0.2s ease, box-shadow 0.2s ease;
}

.btn.btn-press {
  animation: btnPress 0.24s ease;
}

@keyframes btnPress {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.965);
  }
  100% {
    transform: scale(1);
  }
}

.btn.is-loading {
  filter: saturate(0.88);
  pointer-events: none;
}

.btn-primary {
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  border: none;
}

.btn-success {
  background: linear-gradient(135deg, var(--ok), color-mix(in srgb, var(--ok) 84%, black));
  border: none;
}

.btn-outline-danger,
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-warning,
.btn-outline-success {
  border-width: 1px;
}

.form-control,
.form-select {
  border-radius: var(--radius-control);
  border-color: color-mix(in srgb, var(--line) 88%, #ffffff);
  background: var(--bg-soft);
  color: var(--ink);
}

.form-control::placeholder {
  color: color-mix(in srgb, var(--ink-soft) 82%, white);
}

.form-control:focus,
.form-select:focus {
  border-color: color-mix(in srgb, var(--brand) 64%, white);
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--brand) 18%, transparent);
}

.table {
  --bs-table-bg: transparent;
}

.table thead th {
  background: var(--surface-2);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.table td {
  border-color: color-mix(in srgb, var(--line) 85%, transparent);
}

.table td,
.table th {
  white-space: nowrap;
}

.table td:nth-child(2),
.table th:nth-child(2) {
  white-space: normal;
  min-width: 260px;
}

.image-preview-box img {
  max-width: 280px;
  max-height: 280px;
  object-fit: cover;
  border-radius: var(--radius-control);
  border: 1px solid var(--line);
}

.border.rounded,
.border.rounded.p-3 {
  border-color: var(--line) !important;
  border-radius: var(--radius-control) !important;
  background: color-mix(in srgb, var(--surface-2) 92%, white);
}

@media (max-width: 1400px) {
  .hero-stats {
    grid-template-columns: repeat(2, minmax(170px, 1fr));
  }
}

@media (max-width: 992px) {
  .side-nav {
    position: static;
  }

  .status-meta {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 768px) {
  .hero-stats {
    grid-template-columns: 1fr;
    width: 100%;
  }

  .theme-grid {
    grid-template-columns: 1fr;
  }
}