/* Roundup — stylesheet. No frameworks, no external requests. */

@font-face {
  font-family: "Space Grotesk";
  src: url("../fonts/SpaceGrotesk-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("../fonts/SpaceGrotesk-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root, [data-theme="dark"] {
  --bg: #17120D;
  --bg-raise: #201912;
  --bg-hover: #2A2118;
  --line: #382C1F;
  --line-soft: #2C2318;
  --text: #F0E8DA;
  --muted: #A6997F;
  --accent: #E08A2E;
  --accent-hover: #EE9C43;
  --accent-ink: #221302;
  --up: #58B87F;
  --up-bg: rgba(88, 184, 127, .13);
  --warn: #E3AC3F;
  --warn-bg: rgba(227, 172, 63, .14);
  --down: #E25C50;
  --down-bg: rgba(226, 92, 80, .14);
  --info-bg: rgba(166, 153, 127, .14);
  --shadow: 0 18px 45px rgba(0, 0, 0, .45);
  --radius: 12px;
  --sb-top: #1D150C; --sb-bot: #150F09; --sb-line: #2E2417;
  --sb-text: #EFE6D6; --sb-mut: #B9AC96; --sb-dim: #5E5340;
  --sb-acc-bg: rgba(224, 138, 46, .16); --sb-acc-text: #F0B26B;
  color-scheme: dark;
}
[data-theme="light"] {
  --bg: #F5F1EA;
  --bg-raise: #FFFDF9;
  --bg-hover: #F0EAE0;
  --line: #E0D6C6;
  --line-soft: #EAE2D4;
  --text: #2B2419;
  --muted: #82755F;
  --accent: #C96F1A;
  --accent-hover: #B4620F;
  --accent-ink: #FFF7EC;
  --up: #2F8F5B;
  --up-bg: rgba(47, 143, 91, .12);
  --warn: #A97A14;
  --warn-bg: rgba(197, 148, 40, .16);
  --down: #C2372C;
  --down-bg: rgba(194, 55, 44, .11);
  --info-bg: rgba(130, 117, 95, .12);
  --shadow: 0 16px 40px rgba(80, 60, 30, .16);
  --sb-top: #241B10; --sb-bot: #1B1409;
  color-scheme: light;
}

/* ---- Palettes. Saddle is the base above; these re-tint surfaces + accent.
       Status colors (up / warn / down) stay identical across palettes. ---- */
[data-palette="bluebonnet"][data-theme="dark"] {
  --sb-top: #141A26; --sb-bot: #0E141E; --sb-line: #263248;
  --sb-text: #E8EDF6; --sb-mut: #93A0B6; --sb-dim: #566179;
  --sb-acc-bg: rgba(91, 141, 238, .18); --sb-acc-text: #9DBCF7;
  --bg: #10141C; --bg-raise: #171D28; --bg-hover: #1F2735;
  --line: #2B3547; --line-soft: #232C3C;
  --text: #E7ECF4; --muted: #8D9AB0;
  --accent: #5B8DEE; --accent-hover: #74A1F5; --accent-ink: #0A1526;
  --info-bg: rgba(141, 154, 176, .14);
  --shadow: 0 18px 45px rgba(4, 10, 24, .5);
}
[data-palette="bluebonnet"][data-theme="light"] {
  --sb-top: #1A2333; --sb-bot: #121A28;
  --bg: #F0F3F8; --bg-raise: #FDFEFF; --bg-hover: #E8EDF5;
  --line: #D3DCE9; --line-soft: #E1E8F2;
  --text: #1E2836; --muted: #64748B;
  --accent: #2F6BDB; --accent-hover: #2558BD; --accent-ink: #F3F7FF;
  --info-bg: rgba(100, 116, 139, .12);
  --shadow: 0 16px 40px rgba(30, 50, 90, .14);
}
[data-palette="juniper"][data-theme="dark"] {
  --sb-top: #13201D; --sb-bot: #0C1614; --sb-line: #243B35;
  --sb-text: #E7F0EE; --sb-mut: #8FA6A0; --sb-dim: #4E625D;
  --sb-acc-bg: rgba(60, 184, 172, .16); --sb-acc-text: #7FD9CF;
  --bg: #0F1514; --bg-raise: #161E1D; --bg-hover: #1E2927;
  --line: #2A3A37; --line-soft: #22302D;
  --text: #E6EFED; --muted: #8CA39E;
  --accent: #3CB8AC; --accent-hover: #55C9BE; --accent-ink: #04211E;
  --info-bg: rgba(140, 163, 158, .14);
  --shadow: 0 18px 45px rgba(0, 12, 10, .5);
}
[data-palette="juniper"][data-theme="light"] {
  --sb-top: #182823; --sb-bot: #101A17;
  --bg: #EFF4F3; --bg-raise: #FCFFFE; --bg-hover: #E6EFED;
  --line: #D0DEDA; --line-soft: #DEE9E6;
  --text: #1D2B28; --muted: #5E736E;
  --accent: #16897E; --accent-hover: #0F6F66; --accent-ink: #ECFFFC;
  --info-bg: rgba(94, 115, 110, .12);
  --shadow: 0 16px 40px rgba(20, 60, 55, .14);
}
[data-palette="verbena"][data-theme="dark"] {
  --sb-top: #1A1626; --sb-bot: #120F1C; --sb-line: #322A48;
  --sb-text: #EDE9F6; --sb-mut: #A195BC; --sb-dim: #5A5171;
  --sb-acc-bg: rgba(157, 123, 234, .18); --sb-acc-text: #C4ACF4;
  --bg: #14121A; --bg-raise: #1C1926; --bg-hover: #262232;
  --line: #342E44; --line-soft: #2A2537;
  --text: #ECE8F4; --muted: #9D93B3;
  --accent: #9D7BEA; --accent-hover: #B093F2; --accent-ink: #1B0E33;
  --info-bg: rgba(157, 147, 179, .14);
  --shadow: 0 18px 45px rgba(10, 4, 24, .5);
}
[data-palette="verbena"][data-theme="light"] {
  --sb-top: #211C30; --sb-bot: #171326;
  --bg: #F3F1F7; --bg-raise: #FEFDFF; --bg-hover: #ECE8F3;
  --line: #DBD4E8; --line-soft: #E6E0F0;
  --text: #262033; --muted: #6F6685;
  --accent: #6D4FC4; --accent-hover: #5A3FA8; --accent-ink: #F6F1FF;
  --info-bg: rgba(111, 102, 133, .12);
  --shadow: 0 16px 40px rgba(50, 30, 90, .14);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
h1, h2, h3 { font-family: "Space Grotesk", -apple-system, "Segoe UI", sans-serif; letter-spacing: -.01em; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; }
code { background: var(--info-bg); border-radius: 5px; padding: 1px 5px; font-size: .9em; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------------------------------------------------------------- shell */
.shell { display: flex; min-height: 100vh; }
.sidebar {
  width: 212px; flex-shrink: 0;
  background: linear-gradient(180deg, var(--sb-top), var(--sb-bot));
  border-right: 1px solid var(--sb-line);
  display: flex; flex-direction: column;
  padding: 18px 12px;
  position: sticky; top: 0; height: 100vh;
}
.brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 18px; text-decoration: none; }
.brand:hover { text-decoration: none; }
.brand-logo { width: 34px; height: 34px; border-radius: 9px; object-fit: cover; }
.brand-name { font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 19px; color: #F3EADB; letter-spacing: .01em; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav-item {
  display: flex; align-items: center; gap: 11px;
  color: var(--sb-mut); padding: 9px 10px; border-radius: 9px;
  font-weight: 500; transition: background .12s, color .12s;
}
.nav-item svg { width: 19px; height: 19px; }
.nav-item:hover { background: rgba(255, 255, 255, .05); color: var(--sb-text); text-decoration: none; }
.nav-item.is-active { background: var(--sb-acc-bg); color: var(--sb-acc-text); }
.sidebar-foot { margin-top: auto; padding: 10px 8px 0; border-top: 1px solid var(--sb-line); display: flex; flex-direction: column; gap: 10px; }
.theme-toggle {
  background: none; border: 1px solid var(--sb-line); color: var(--sb-mut);
  width: 34px; height: 34px; border-radius: 9px; cursor: pointer;
  display: grid; place-items: center;
}
.theme-toggle:hover { color: var(--sb-text); border-color: var(--sb-mut); }
.theme-toggle svg { width: 17px; height: 17px; }
[data-theme="dark"] .ic-sun { display: block; } [data-theme="dark"] .ic-moon { display: none; }
[data-theme="light"] .ic-sun { display: none; } [data-theme="light"] .ic-moon { display: block; }
.whoami { color: var(--sb-mut); font-size: 13px; }
.whoami-name { color: var(--sb-text); font-weight: 600; }
.linklike { background: none; border: 0; padding: 0; color: var(--sb-mut); cursor: pointer; font-size: 13px; }
.linklike:hover { color: var(--accent); text-decoration: underline; }
.version { color: var(--sb-dim); font-size: 11px; }

.main { flex: 1; min-width: 0; padding: 26px 34px 60px; max-width: 1280px; }

/* ---------------------------------------------------------------- topbar */
.topbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 18px; flex-wrap: wrap; }
.topbar h1 { margin: 0 0 6px; font-size: 26px; }
.topbar-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.search { display: flex; align-items: center; gap: 8px; background: var(--bg-raise); border: 1px solid var(--line); border-radius: 10px; padding: 7px 12px; }
.search svg { width: 15px; height: 15px; color: var(--muted); }
.search input { border: 0; background: none; color: var(--text); outline: none; width: 180px; font-size: 14px; }

/* the herd strip — one tick per site */
.herd { display: flex; gap: 4px; flex-wrap: wrap; max-width: 560px; min-height: 16px; }
.herd-tick {
  width: 7px; height: 16px; border-radius: 2px; border: 0; padding: 0; cursor: pointer;
  background: var(--info-bg); transition: transform .1s;
}
.herd-tick:hover { transform: scaleY(1.25); }
.herd-tick.t-up { background: var(--up); }
.herd-tick.t-down { background: var(--down); animation: pulse 1.6s ease-in-out infinite; }
.herd-tick.t-warn { background: var(--warn); }
.herd-tick.t-paused { background: var(--line); }
@keyframes pulse { 50% { opacity: .45; } }

.cron-warning {
  background: var(--warn-bg); border: 1px solid var(--warn); color: var(--text);
  border-radius: 10px; padding: 10px 16px; margin-bottom: 16px; font-size: 14px;
}

/* ---------------------------------------------------------------- stats */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; }
.stat { background: var(--bg-raise); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 14px 18px; }
.stat-num { font-family: "Space Grotesk", sans-serif; font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; }
.stat-label { color: var(--muted); font-size: 13px; }
.stat-down .stat-num[data-live="down"] { color: var(--down); }

.filter-row { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.chip {
  background: var(--bg-raise); border: 1px solid var(--line); color: var(--muted);
  border-radius: 999px; padding: 5px 14px; font-size: 13px; cursor: pointer; font-weight: 500;
}
.chip:hover { color: var(--text); }
.chip.is-on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

/* ---------------------------------------------------------------- table */
.table-wrap { background: var(--bg-raise); border: 1px solid var(--line-soft); border-radius: var(--radius); overflow-x: auto; }
.sites-table { width: 100%; border-collapse: collapse; min-width: 880px; }
.sites-table th {
  text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .09em;
  color: var(--muted); font-weight: 600; padding: 12px 14px; border-bottom: 1px solid var(--line);
}
.sites-table td { padding: 12px 14px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.sites-table tbody tr { cursor: pointer; transition: background .1s; }
.sites-table tbody tr:hover { background: var(--bg-hover); }
.sites-table tbody tr:last-child td { border-bottom: 0; }
.sites-table tr.row-paused { opacity: .55; }

.cell-site { display: flex; align-items: center; gap: 12px; min-width: 210px; }
.site-ico {
  width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
  background: var(--info-bg); display: grid; place-items: center;
  font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 15px; color: var(--muted);
  overflow: hidden;
}
.site-ico img { width: 100%; height: 100%; object-fit: cover; }
.cell-name { font-weight: 600; }
.cell-url { color: var(--muted); font-size: 12.5px; display: flex; gap: 8px; align-items: center; }
.cell-url a { color: var(--muted); }
.cell-url a:hover { color: var(--accent); }

.badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--info-bg); color: var(--muted);
  border-radius: 999px; padding: 3px 10px; font-size: 12.5px; font-weight: 600;
  white-space: nowrap;
}
.badge-up { background: var(--up-bg); color: var(--up); }
.badge-down { background: var(--down-bg); color: var(--down); }
.badge-warn { background: var(--warn-bg); color: var(--warn); }
.badge-accent { background: rgba(224, 138, 46, .15); color: var(--accent); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.dot-pulse { animation: pulse 1.6s infinite; }

.spark { display: block; width: 96px; height: 26px; }
.spark polyline { fill: none; stroke: var(--up); stroke-width: 1.6; opacity: .9; }
.spark .spark-fail { fill: var(--down); }
.cell-resp { display: flex; align-items: center; gap: 10px; }
.resp-ms { font-variant-numeric: tabular-nums; font-size: 13px; color: var(--muted); min-width: 52px; }

.mini { color: var(--muted); font-size: 12px; }
.icon-btn {
  background: none; border: 0; color: var(--muted); cursor: pointer;
  width: 30px; height: 30px; border-radius: 8px; font-size: 17px; line-height: 1;
  display: inline-grid; place-items: center;
}
.icon-btn:hover { background: var(--bg-hover); color: var(--text); }
.icon-btn svg { width: 16px; height: 16px; }
.icon-btn.spin svg { animation: rot .8s linear infinite; }
@keyframes rot { to { transform: rotate(360deg); } }
.col-actions { width: 90px; }
.cell-actions { display: flex; gap: 2px; justify-content: flex-end; }

.skeleton-row td { padding: 14px; }
.skeleton { height: 34px; border-radius: 8px; background: linear-gradient(90deg, var(--line-soft), var(--bg-hover), var(--line-soft)); background-size: 200% 100%; animation: shimmer 1.3s infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }

.empty { text-align: center; padding: 70px 20px; background: var(--bg-raise); border: 1px dashed var(--line); border-radius: var(--radius); }
.empty-logo { width: 64px; height: 64px; border-radius: 14px; margin-bottom: 12px; }
.empty h2 { margin: 0 0 8px; }
.empty p { color: var(--muted); margin: 0 0 20px; }

/* ---------------------------------------------------------------- buttons + forms */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  background: var(--bg-raise); color: var(--text);
  border: 1px solid var(--line); border-radius: 10px;
  padding: 9px 16px; font-size: 14px; font-weight: 600; cursor: pointer;
  transition: background .12s, border-color .12s;
}
.btn:hover { background: var(--bg-hover); text-decoration: none; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-danger { background: var(--down-bg); border-color: var(--down); color: var(--down); }
.btn-danger:hover { background: var(--down); color: #fff; }
.btn-sm { padding: 6px 12px; font-size: 13px; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .55; cursor: default; }

.field { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; font-weight: 600; }
.field em { color: var(--muted); font-weight: 400; font-style: normal; }
.field input, .field select, .field textarea {
  background: var(--bg); border: 1px solid var(--line); color: var(--text);
  border-radius: 9px; padding: 9px 12px; font-size: 14px; font-family: inherit; width: 100%;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); outline: none; }
.field input[type="file"] { padding: 7px; font-weight: 400; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px 18px; align-items: start; }
.field-full { grid-column: 1 / -1; }
.field-checks { display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.field-btn { align-self: end; }
.check { display: flex; gap: 9px; align-items: center; font-weight: 500; font-size: 14px; cursor: pointer; }
.check input { width: 16px; height: 16px; accent-color: var(--accent); }
.check em { color: var(--muted); font-style: normal; }
.code-input { letter-spacing: .35em; font-size: 20px; text-align: center; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- panels */
.panel { background: var(--bg-raise); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 22px 24px; margin-bottom: 18px; }
.panel-h { margin: 0 0 16px; font-size: 17px; display: flex; align-items: center; gap: 10px; }
.muted { color: var(--muted); }
.save-row { position: sticky; bottom: 14px; display: flex; justify-content: flex-end; }
.settings-form { max-width: 860px; }
.smtp-fields { display: contents; }
.smtp-fields[hidden] { display: none; }
.cron-box { margin-top: 18px; border-top: 1px solid var(--line-soft); padding-top: 16px; }
.cron-box h3 { margin: 0 0 4px; font-size: 15px; }
.code-block {
  background: var(--bg); border: 1px solid var(--line); border-radius: 9px;
  padding: 11px 44px 11px 13px; font-size: 12.5px; overflow-x: auto; position: relative;
  white-space: pre-wrap; word-break: break-all; cursor: copy;
}
.code-block::after { content: "copy"; position: absolute; right: 9px; top: 8px; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.code-block.copied::after { content: "copied ✓"; color: var(--up); }

/* ---------------------------------------------------------------- flash + toast */
.flash {
  border-radius: 10px; padding: 11px 40px 11px 15px; margin-bottom: 14px; font-size: 14px;
  border: 1px solid var(--line); background: var(--bg-raise); position: relative;
}
.flash-success { border-color: var(--up); background: var(--up-bg); }
.flash-error { border-color: var(--down); background: var(--down-bg); }
.flash-x { position: absolute; right: 8px; top: 6px; background: none; border: 0; color: inherit; font-size: 17px; cursor: pointer; }
.toast-stack { position: fixed; bottom: 18px; right: 18px; display: flex; flex-direction: column; gap: 9px; z-index: 90; }
.toast {
  background: var(--bg-raise); border: 1px solid var(--line); border-left: 3px solid var(--accent);
  box-shadow: var(--shadow); border-radius: 10px; padding: 11px 16px; font-size: 14px;
  max-width: 340px; animation: slide-in .18s ease-out;
}
.toast-success { border-left-color: var(--up); }
.toast-error { border-left-color: var(--down); }
@keyframes slide-in { from { transform: translateY(8px); opacity: 0; } }

/* ---------------------------------------------------------------- modal */
.modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 20px; }
.modal[hidden] { display: none; }
.modal-backdrop, .drawer-backdrop { position: absolute; inset: 0; background: rgba(10, 7, 4, .62); backdrop-filter: blur(2px); }
.modal-card {
  position: relative; background: var(--bg-raise); border: 1px solid var(--line);
  border-radius: 14px; box-shadow: var(--shadow); width: 620px; max-width: 100%;
  max-height: 92vh; overflow: auto; animation: pop .16s ease-out;
}
.modal-sm { width: 400px; }
@keyframes pop { from { transform: scale(.97); opacity: 0; } }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px 0; }
.modal-head h2 { margin: 0; font-size: 19px; }
.modal-body { padding: 18px 22px; }
.modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 0 22px 20px; }

/* ---------------------------------------------------------------- drawer */
.drawer { position: fixed; inset: 0; z-index: 55; display: grid; place-items: center; padding: 26px; }
.drawer[hidden] { display: none; }
.drawer-panel {
  position: relative; width: min(1080px, 100%); height: min(840px, 100%);
  background: var(--bg-raise); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--shadow); display: flex; flex-direction: column; overflow: hidden;
  animation: lightbox-in .18s ease-out;
}
@keyframes lightbox-in { from { transform: translateY(14px) scale(.985); opacity: 0; } }
.drawer-head { display: flex; align-items: flex-start; justify-content: space-between; padding: 20px 22px 14px; gap: 12px; }
.drawer-ident { display: flex; gap: 13px; align-items: center; min-width: 0; }
.drawer-ident .site-ico { width: 42px; height: 42px; font-size: 18px; }
.drawer-head h2 { margin: 0; font-size: 20px; overflow-wrap: anywhere; }
.drawer-links { display: flex; gap: 14px; font-size: 13px; }
.drawer-headbtns { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.tabs { display: flex; gap: 4px; padding: 0 16px; border-bottom: 1px solid var(--line-soft); }
.tab {
  background: none; border: 0; color: var(--muted); font: inherit; font-weight: 600; font-size: 14px;
  padding: 10px 12px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px;
  display: inline-flex; gap: 7px; align-items: center;
}
.tab:hover { color: var(--text); }
.tab.is-on { color: var(--accent); border-bottom-color: var(--accent); }
.tab-badge { background: var(--warn-bg); color: var(--warn); border-radius: 999px; font-size: 11px; padding: 1px 7px; }
.drawer-body { flex: 1; overflow-y: auto; padding: 20px 26px; }

/* the lightbox is wide — let the overview flow two-up on large screens */
@media (min-width: 900px) {
  #pane-overview.is-on { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 34px; align-items: start; }
  #pane-overview .uptime-pills { grid-column: 1 / -1; }
  #pane-overview .kv { grid-template-columns: 150px 1fr; }
  .hist-chart { height: 160px; }
}
.tabpane { display: none; }
.tabpane.is-on { display: block; }
.drawer-foot { display: flex; justify-content: space-between; padding: 13px 22px; border-top: 1px solid var(--line-soft); }

.kv { display: grid; grid-template-columns: 170px 1fr; gap: 7px 16px; font-size: 14px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; overflow-wrap: anywhere; }
.dw-section { margin-bottom: 22px; }
.dw-section h3 { margin: 0 0 10px; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.upd-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.upd-table th { text-align: left; color: var(--muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.upd-table td { padding: 7px 8px; border-bottom: 1px solid var(--line-soft); }
.ver-new { color: var(--warn); font-weight: 600; }
.hist-chart { width: 100%; height: 120px; display: block; margin-bottom: 8px; }
.hist-bars line.h-ok { stroke: var(--up); } .hist-bars line.h-fail { stroke: var(--down); }
.secret-box { display: flex; gap: 8px; align-items: center; }
.secret-box code { flex: 1; overflow-wrap: anywhere; padding: 9px 11px; font-size: 12px; }
.uptime-pills { display: flex; gap: 10px; margin-bottom: 16px; }
.uptime-pill { background: var(--bg); border: 1px solid var(--line-soft); border-radius: 10px; padding: 9px 14px; text-align: center; }
.uptime-pill b { display: block; font-size: 18px; font-family: "Space Grotesk", sans-serif; font-variant-numeric: tabular-nums; }
.uptime-pill span { color: var(--muted); font-size: 11.5px; }

/* ---------------------------------------------------------------- auth + install */
.auth-body { display: grid; place-items: center; min-height: 100vh; padding: 24px; background: radial-gradient(1000px 500px at 50% -10%, rgba(224, 138, 46, .1), transparent), var(--bg); }
.auth-card {
  width: 380px; max-width: 100%; background: var(--bg-raise);
  border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow);
  padding: 34px 32px; text-align: center;
}
.auth-card-wide { width: 560px; text-align: left; }
.auth-card-wide .auth-logo, .auth-card-wide .auth-title { display: block; text-align: left; }
.auth-logo { width: 56px; height: 56px; border-radius: 13px; margin: 0 auto 12px; }
.auth-card-wide .auth-logo { margin: 0 0 12px; }
.auth-title { margin: 0; font-size: 24px; }
.auth-sub { color: var(--muted); margin: 4px 0 22px; font-size: 14px; }
.auth-form { display: flex; flex-direction: column; gap: 14px; text-align: left; margin-top: 14px; }
.auth-hint { color: var(--muted); font-size: 12.5px; margin-top: 14px; }
.ins-h { font-size: 15px; margin: 22px 0 6px; }
.req-list { list-style: none; padding: 0; margin: 0; font-size: 14px; }
.req-list li { padding: 3px 0; }
.req-ok { color: var(--up); } .req-bad { color: var(--down); font-weight: 600; }
.install-warn { background: var(--warn-bg); border: 1px solid var(--warn); border-radius: 10px; padding: 12px 16px; margin: 14px 0; font-size: 14px; }

/* ---------------------------------------------------------------- 2FA */
.totp-setup { display: flex; gap: 22px; align-items: center; margin: 14px 0 18px; flex-wrap: wrap; }
.qr-box { width: 168px; height: 168px; background: #fff; border-radius: 12px; padding: 10px; display: grid; place-items: center; }
.qr-box canvas, .qr-box img { max-width: 100%; }
.totp-key { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 15px; letter-spacing: .06em; background: var(--bg); border: 1px solid var(--line); border-radius: 9px; padding: 10px 13px; cursor: copy; }
.setup-steps { color: var(--muted); font-size: 14px; padding-left: 20px; }

/* ---------------------------------------------------------------- docs */
.docs { display: grid; grid-template-columns: 210px 1fr; gap: 18px; align-items: start; }
.docs-toc { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; padding: 16px 18px; }
.docs-body .panel h2 { margin-top: 0; font-size: 19px; }
.docs-body .panel { scroll-margin-top: 16px; }
.docs-body p { line-height: 1.65; }
@media (max-width: 900px) { .docs { grid-template-columns: 1fr; } .docs-toc { position: static; } }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 780px) {
  .shell { flex-direction: column; }
  .sidebar { width: 100%; height: auto; position: static; flex-direction: row; align-items: center; padding: 10px 14px; gap: 8px; }
  .brand { padding: 0 8px 0 0; } .brand-name { display: none; }
  .nav { flex-direction: row; flex: 1; }
  .nav-item span { display: none; }
  .sidebar-foot { margin: 0; padding: 0; border: 0; flex-direction: row; align-items: center; }
  .whoami, .version { display: none; }
  .main { padding: 18px 14px 50px; }
  .drawer { padding: 0; }
  .drawer-panel { width: 100%; height: 100%; border-radius: 0; border: 0; }
  .kv { grid-template-columns: 130px 1fr; }
}

/* ---------------------------------------------------------------- view toggle */
.seg { display: inline-flex; background: var(--bg-raise); border: 1px solid var(--line); border-radius: 10px; padding: 3px; gap: 2px; }
.seg-btn {
  border: 0; background: none; color: var(--muted); cursor: pointer;
  width: 34px; height: 30px; border-radius: 8px; display: grid; place-items: center;
  transition: background .12s, color .12s;
}
.seg-btn svg { width: 16px; height: 16px; }
.seg-btn:hover { color: var(--text); }
.seg-btn.is-on { background: var(--accent); color: var(--accent-ink); }

/* list vs grid switching */
#sites-region[data-view="grid"] .table-wrap { display: none; }
#sites-region[data-view="list"] .sites-grid { display: none; }

/* ---------------------------------------------------------------- grid cards */
.sites-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.site-card {
  background: var(--bg-raise); border: 1px solid var(--line-soft); border-radius: var(--radius);
  padding: 16px; cursor: pointer; position: relative;
  transition: border-color .12s, transform .12s, box-shadow .12s;
  display: flex; flex-direction: column; gap: 12px;
}
.site-card:hover { border-color: var(--accent); transform: translateY(-1px); box-shadow: var(--shadow); }
.site-card.row-paused { opacity: .55; }
.site-card.is-skeleton { min-height: 150px; cursor: default; }
.site-card.is-skeleton:hover { border-color: var(--line-soft); transform: none; box-shadow: none; }
.card-head { display: flex; align-items: flex-start; gap: 11px; }
.card-head .site-ico { flex-shrink: 0; }
.card-title { min-width: 0; flex: 1; }
.card-name { font-weight: 600; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.card-url { font-size: 12.5px; }
.card-url a { color: var(--muted); }
.card-url a:hover { color: var(--accent); }
.card-refresh { position: absolute; top: 12px; right: 12px; }
.card-status { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.card-status .spark { width: 110px; }
.card-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: auto; }
.card-meta .mini { font-size: 12px; }

/* ---------------------------------------------------------------- density: compact */
body.density-compact { font-size: 14px; }
body.density-compact .sites-table td { padding: 7px 10px; }
body.density-compact .sites-table th { padding: 6px 10px; }
body.density-compact .site-ico { width: 26px; height: 26px; }
body.density-compact .cell-url { display: none; }
body.density-compact .stat { padding: 9px 14px; }
body.density-compact .stat-num { font-size: 22px; }
body.density-compact .site-card { padding: 12px; gap: 8px; }
body.density-compact .card-url { display: none; }
body.density-compact .main { padding-top: 18px; }
body.density-compact .topbar { margin-bottom: 12px; }
body.density-compact .stats { gap: 9px; margin-bottom: 12px; }

/* ---------------------------------------------------------------- palette swatches (settings) */
.swatches { display: flex; gap: 12px; flex-wrap: wrap; margin: 4px 0 18px; }
.swatch { display: flex; flex-direction: column; align-items: center; gap: 7px; cursor: pointer; }
.swatch input { position: absolute; opacity: 0; pointer-events: none; }
.swatch-chip {
  width: 64px; height: 44px; border-radius: 10px; border: 2px solid var(--line);
  display: grid; place-items: center; transition: border-color .12s, transform .12s;
}
.swatch:hover .swatch-chip { transform: translateY(-1px); }
.swatch input:checked + .swatch-chip { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ink); }
.swatch input:focus-visible + .swatch-chip { outline: 2px solid var(--accent); outline-offset: 2px; }
.swatch-dot { width: 18px; height: 18px; border-radius: 50%; }
.swatch-name { font-size: 12.5px; color: var(--muted); }
.swatch input:checked ~ .swatch-name { color: var(--text); font-weight: 600; }

/* ---------------------------------------------------------------- software updates */
.update-drop { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 8px; }
.update-drop .field { flex: 1; min-width: 240px; margin: 0; }
.update-note { color: var(--muted); }
.backup-list { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.backup-list li { display: flex; gap: 10px; align-items: baseline; }
.backup-list code { font-size: 12.5px; }


/* ================= additional palettes (1.5.0) ================= */
[data-palette="crimson"][data-theme="dark"] {
  --bg: #1A0A0B; --bg-raise: #290F11; --bg-hover: #371618;
  --line: #582326; --line-soft: #421A1D;
  --text: #F2E9E9; --muted: #B09698;
  --accent: #E0574F; --accent-hover: #E67872; --accent-ink: #241415;
  --info-bg: rgba(176, 150, 152, .14);
  --shadow: 0 18px 45px rgba(0, 0, 0, .5);
  --sb-top: #220C0E; --sb-bot: #170809; --sb-line: #3B1619;
  --sb-text: #F2E9E9; --sb-mut: #B09698; --sb-dim: #725A5B;
  --sb-acc-bg: rgba(224, 87, 79, .17); --sb-acc-text: #EB918C;
}
[data-palette="crimson"][data-theme="light"] {
  --bg: #F6EEEF; --bg-raise: #FDFBFC; --bg-hover: #F3E8E9;
  --line: #E6D5D6; --line-soft: #EFE1E2;
  --text: #351D1E; --muted: #806063;
  --accent: #C23A32; --accent-hover: #A2302A; --accent-ink: #FAF4F5;
  --info-bg: rgba(128, 96, 99, .12);
  --shadow: 0 16px 40px rgba(40, 40, 55, .15);
  --sb-top: #250E10; --sb-bot: #1A090B;
}
[data-palette="forest"][data-theme="dark"] {
  --bg: #0B1911; --bg-raise: #11271A; --bg-hover: #183524;
  --line: #265439; --line-soft: #1C3F2B;
  --text: #E9F2EC; --muted: #96B0A1;
  --accent: #4FB06A; --accent-hover: #6BBD82; --accent-ink: #14241B;
  --info-bg: rgba(150, 176, 161, .14);
  --shadow: 0 18px 45px rgba(0, 0, 0, .5);
  --sb-top: #0D2115; --sb-bot: #09160E; --sb-line: #183926;
  --sb-text: #E9F2EC; --sb-mut: #96B0A1; --sb-dim: #5A7264;
  --sb-acc-bg: rgba(79, 176, 106, .17); --sb-acc-text: #80C694;
}
[data-palette="forest"][data-theme="light"] {
  --bg: #EEF6F2; --bg-raise: #FBFDFC; --bg-hover: #E8F3EC;
  --line: #D5E6DC; --line-soft: #E1EFE7;
  --text: #1D3527; --muted: #60806E;
  --accent: #2E8B4E; --accent-hover: #246C3D; --accent-ink: #F4FAF7;
  --info-bg: rgba(96, 128, 110, .12);
  --shadow: 0 16px 40px rgba(40, 40, 55, .15);
  --sb-top: #0F2418; --sb-bot: #0A1911;
}
[data-palette="rose"][data-theme="dark"] {
  --bg: #1A0A11; --bg-raise: #290F1A; --bg-hover: #371624;
  --line: #582339; --line-soft: #421A2B;
  --text: #F2E9EC; --muted: #B096A1;
  --accent: #EC6FA0; --accent-hover: #F193B8; --accent-ink: #24141B;
  --info-bg: rgba(176, 150, 161, .14);
  --shadow: 0 18px 45px rgba(0, 0, 0, .5);
  --sb-top: #220C15; --sb-bot: #17080E; --sb-line: #3B1626;
  --sb-text: #F2E9EC; --sb-mut: #B096A1; --sb-dim: #725A64;
  --sb-acc-bg: rgba(236, 111, 160, .17); --sb-acc-text: #F4AECA;
}
[data-palette="rose"][data-theme="light"] {
  --bg: #F6EEF2; --bg-raise: #FDFBFC; --bg-hover: #F3E8EC;
  --line: #E6D5DC; --line-soft: #EFE1E7;
  --text: #351D27; --muted: #80606E;
  --accent: #C74E80; --accent-hover: #B3396B; --accent-ink: #FAF4F7;
  --info-bg: rgba(128, 96, 110, .12);
  --shadow: 0 16px 40px rgba(40, 40, 55, .15);
  --sb-top: #250E18; --sb-bot: #1A0910;
}
[data-palette="slate"][data-theme="dark"] {
  --bg: #0E1215; --bg-raise: #161C22; --bg-hover: #1F262D;
  --line: #323C48; --line-soft: #262D36;
  --text: #EAEDF1; --muted: #96A2B0;
  --accent: #7E97B3; --accent-hover: #98ACC2; --accent-ink: #141B24;
  --info-bg: rgba(150, 162, 176, .14);
  --shadow: 0 18px 45px rgba(0, 0, 0, .5);
  --sb-top: #12171C; --sb-bot: #0C0F13; --sb-line: #212831;
  --sb-text: #EAEDF1; --sb-mut: #96A2B0; --sb-dim: #5A6572;
  --sb-acc-bg: rgba(126, 151, 179, .17); --sb-acc-text: #ABBBCD;
}
[data-palette="slate"][data-theme="light"] {
  --bg: #F0F2F5; --bg-raise: #FCFCFD; --bg-hover: #EAEDF1;
  --line: #D7DDE4; --line-soft: #E3E8ED;
  --text: #212831; --muted: #606F80;
  --accent: #436084; --accent-hover: #354C69; --accent-ink: #F6F7F9;
  --info-bg: rgba(96, 111, 128, .12);
  --shadow: 0 16px 40px rgba(40, 40, 55, .15);
  --sb-top: #14191F; --sb-bot: #0E1216;
}
[data-palette="amber"][data-theme="dark"] {
  --bg: #1C1608; --bg-raise: #2B220D; --bg-hover: #3B2E12;
  --line: #5E4A1D; --line-soft: #463816;
  --text: #F2EFE9; --muted: #B0A896;
  --accent: #E3B341; --accent-hover: #E8C165; --accent-ink: #241F14;
  --info-bg: rgba(176, 168, 150, .14);
  --shadow: 0 18px 45px rgba(0, 0, 0, .5);
  --sb-top: #241C0A; --sb-bot: #181306; --sb-line: #3F3212;
  --sb-text: #F2EFE9; --sb-mut: #B0A896; --sb-dim: #726B5A;
  --sb-acc-bg: rgba(227, 179, 65, .17); --sb-acc-text: #ECCC7F;
}
[data-palette="amber"][data-theme="light"] {
  --bg: #F6F4EE; --bg-raise: #FDFDFB; --bg-hover: #F3EFE8;
  --line: #E6E1D5; --line-soft: #EFEBE1;
  --text: #352E1D; --muted: #807660;
  --accent: #9C6F0A; --accent-hover: #765408; --accent-ink: #FAF9F4;
  --info-bg: rgba(128, 118, 96, .12);
  --shadow: 0 16px 40px rgba(40, 40, 55, .15);
  --sb-top: #281F0B; --sb-bot: #1C1608;
}
[data-palette="graphite"][data-theme="dark"] {
  --bg: #101113; --bg-raise: #1A1B1E; --bg-hover: #242529;
  --line: #3A3C41; --line-soft: #2B2D31;
  --text: #ECEDEF; --muted: #969EB0;
  --accent: #C9CDD3; --accent-hover: #DFE2E5; --accent-ink: #141924;
  --info-bg: rgba(150, 158, 176, .14);
  --shadow: 0 18px 45px rgba(0, 0, 0, .5);
  --sb-top: #151619; --sb-bot: #0D0F11; --sb-line: #26272C;
  --sb-text: #ECEDEF; --sb-mut: #969EB0; --sb-dim: #5A6172;
  --sb-acc-bg: rgba(201, 205, 211, .17); --sb-acc-text: #F0F1F3;
}
[data-palette="graphite"][data-theme="light"] {
  --bg: #F1F2F3; --bg-raise: #FCFCFD; --bg-hover: #ECEDEF;
  --line: #DBDDE1; --line-soft: #E6E7EA;
  --text: #26272C; --muted: #606A80;
  --accent: #2C3038; --accent-hover: #1A1C21; --accent-ink: #F7F7F8;
  --info-bg: rgba(96, 106, 128, .12);
  --shadow: 0 16px 40px rgba(40, 40, 55, .15);
  --sb-top: #17191C; --sb-bot: #101114;
}

/* ---- swatch preview colors (all palettes) ---- */
.swatch-chip.pal-saddle { background: #17120D; }
.swatch-chip.pal-saddle .swatch-dot { background: #E08A2E; }
.swatch-chip.pal-bluebonnet { background: #10141C; }
.swatch-chip.pal-bluebonnet .swatch-dot { background: #5B8DEE; }
.swatch-chip.pal-juniper { background: #0F1514; }
.swatch-chip.pal-juniper .swatch-dot { background: #3CB8AC; }
.swatch-chip.pal-verbena { background: #14121A; }
.swatch-chip.pal-verbena .swatch-dot { background: #9D7BEA; }
.swatch-chip.pal-crimson { background: #1A0A0B; }
.swatch-chip.pal-crimson .swatch-dot { background: #E0574F; }
.swatch-chip.pal-forest { background: #0B1911; }
.swatch-chip.pal-forest .swatch-dot { background: #4FB06A; }
.swatch-chip.pal-rose { background: #1A0A11; }
.swatch-chip.pal-rose .swatch-dot { background: #EC6FA0; }
.swatch-chip.pal-slate { background: #0E1215; }
.swatch-chip.pal-slate .swatch-dot { background: #7E97B3; }
.swatch-chip.pal-amber { background: #1C1608; }
.swatch-chip.pal-amber .swatch-dot { background: #E3B341; }
.swatch-chip.pal-graphite { background: #101113; }
.swatch-chip.pal-graphite .swatch-dot { background: #C9CDD3; }

/* ---- utility classes (keep style-src 'self' strict — no inline styles) ---- */
body.no-scroll { overflow: hidden; }
.pre-wrap { white-space: pre-wrap; }
.empty-cell { text-align: center; padding: 28px; }
.empty-cell--grid { grid-column: 1 / -1; }
.dw-core-flash { margin-bottom: 14px; }
.dw-note-spaced { margin-top: 14px; }
.qr-fallback { display: block; color: var(--muted); font-size: 12px; text-align: center; }

/* ---- theme-aware brand mark (matches the selected palette accent) ---- */
.brand-mark { display: block; }
.brand-mark .bm-tile { fill: var(--sb-line); }
.brand-mark .bm-rope { stroke: var(--accent); opacity: .5; }
.brand-mark .bm-r    { stroke: var(--accent); }

/* ---- version freshness badges ---- */
.badge-ok { background: var(--up-bg); color: var(--up); }
.conn-warn { color: var(--warn); }

/* ---- drawer loading placeholder ---- */
.dw-loading { color: var(--muted); text-align: center; padding: 40px 0; font-size: 14px; }
.dw-loading::after { content: ''; display: inline-block; width: 14px; height: 14px; margin-left: 8px; vertical-align: -2px; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: dw-spin .7s linear infinite; }
@keyframes dw-spin { to { transform: rotate(360deg); } }