:root {
  --void: #060713;
  --mesh-a: #16255e;
  --mesh-b: #3a1264;
  --mesh-c: #0d385a;
  --surface: rgba(17, 20, 38, 0.72);
  --surface-2: rgba(255, 255, 255, 0.04);
  --surface-3: rgba(255, 255, 255, 0.07);
  --border: rgba(255, 255, 255, 0.09);
  --border-hi: rgba(255, 255, 255, 0.18);
  --bg: var(--void);
  --text: #f5f6fb;
  --text-dim: #9aa1c2;
  --text-faint: #5b6188;
  --accent: #8b6bff;
  --accent-soft: rgba(139, 107, 255, 0.16);
  --green: #22e6a0;
  --green-soft: rgba(34, 230, 160, 0.14);
  --red: #ff3f6c;
  --red-soft: rgba(255, 63, 108, 0.14);
  --amber: #ffb648;
  --amber-soft: rgba(255, 182, 72, 0.14);
  --gold: #d9ae3e; /* matches logo-mark.png's metallic gold */
  --radius: 14px;
  --gap: 12px;
  --font-display: "Unbounded", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }

html {
  background: var(--void);
}

body {
  margin: 0;
  padding: 0;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  position: relative;
  /* No background here: .mesh is a fixed-position descendant painted
     behind body's own box, so an opaque body background would hide it
     everywhere except the margins outside body's own column. */
}

/* .page wraps everything but .mesh/#topbar on every authenticated page
   — see #topbar's sidebar rules below for the fixed-width column it
   clears. Capped (not full-bleed) so content stays readable on an
   ultrawide monitor even though there's much more room than the old
   720px centered column. */
.page {
  margin-left: 240px;
  max-width: 1200px;
  padding: 24px 32px 40px;
  /* A soft dark wash over just the content column, so headings and muted
     text stay legible while the lighter page-wide scrim lets the bull
     show through in the margins. Kept low-opacity and edge-faded so it
     doesn't read as a hard panel. */
  background:
    linear-gradient(90deg, rgba(4, 6, 14, 0) 0%, rgba(4, 6, 14, 0.34) 12%, rgba(4, 6, 14, 0.34) 88%, rgba(4, 6, 14, 0) 100%);
}

/* ---------- Trading wallpaper background ---------- */
.mesh {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background-color: #070913;
  /* Bull / candlestick photo (web/bg-trading.jpg) under a heavy dark
     scrim: the source image is bright, so this keeps the dark-theme UI
     legible while the bull stays faintly visible where the scrim is
     lightest (centred a little low, roughly over the bull). */
  background-image:
    radial-gradient(ellipse 120% 105% at 58% 62%, rgba(6, 9, 20, 0.55) 0%, rgba(3, 4, 12, 0.82) 100%),
    url("bg-trading.jpg");
  background-position: center center, center center;
  background-size: cover, cover;
  background-repeat: no-repeat, no-repeat;
}
.mesh::before,
.mesh::after {
  display: none;
}

a { color: var(--accent); text-decoration: none; }
a:active { opacity: 0.7; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}

h1, h2, h3 { margin: 0 0 8px; font-weight: 600; font-family: var(--font-display); text-wrap: balance; }
h1 { font-size: 1.2rem; font-weight: 600; }
h2 { color: var(--gold); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.72rem; font-weight: 600; margin-top: 22px; }

.collapsible-heading {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
}
.collapse-chevron {
  display: inline-block;
  font-size: 0.85rem;
  color: var(--text-dim);
  transition: transform 0.15s ease;
}
.collapsible-heading.collapsed .collapse-chevron { transform: rotate(-90deg); }
.collapse-hidden { display: none; }
p { margin: 0 0 8px; }

/* #topbar is a persistent left sidebar on desktop — the id/element is
   shared with the old horizontal top bar (every page already mounts
   into it via renderTopbar in app.js), only the layout changed. See the
   mobile media query near the bottom of this file for the horizontal
   fallback below 860px. */
.topbar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 240px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px 16px;
  background: var(--surface);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-right: 1px solid var(--border);
  overflow-y: auto;
  z-index: 10;
}

.topbar nav { display: flex; flex-direction: column; gap: 3px; margin-top: 24px; }
.topbar nav a { font-size: 0.88rem; color: var(--text-dim); padding: 8px 12px; border-radius: 8px; transition: all 0.15s ease; }
.topbar nav a:hover { color: var(--text); background: var(--surface-2); }
.topbar nav a.active { color: var(--text); font-weight: 600; background: var(--accent-soft); }

/* Pinned to the bottom of the sidebar */
.sidebar-bottom {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 14px;
}

.sidebar-panic-wrap {
  margin-bottom: 2px;
}

/* Sleek, refined, compact panic button placed lower down */
button.danger.sidebar-panic-btn {
  width: 100%;
  min-height: 32px;
  padding: 6px 10px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  background: linear-gradient(135deg, rgba(255, 63, 108, 0.1) 0%, rgba(200, 20, 60, 0.05) 100%);
  color: #ff597e;
  border: 1px solid rgba(255, 63, 108, 0.28);
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: 0 2px 8px -2px rgba(255, 63, 108, 0.15);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
button.danger.sidebar-panic-btn:hover {
  background: linear-gradient(135deg, rgba(255, 63, 108, 0.22) 0%, rgba(220, 25, 70, 0.12) 100%);
  border-color: rgba(255, 63, 108, 0.58);
  color: #ffffff;
  box-shadow: 0 4px 16px -2px rgba(255, 63, 108, 0.35);
  transform: translateY(-1px);
}
button.danger.sidebar-panic-btn:active {
  transform: scale(0.98);
}
.panic-icon {
  font-size: 0.85rem;
  line-height: 1;
}

.sidebar-user {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 0.8rem;
}
.sidebar-user a { color: var(--text-dim); }
.sidebar-user a:hover { color: var(--text); }

.brand {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.01em;
  display: flex;
  align-items: center;
  gap: 8px;
}
.brand img { display: block; filter: drop-shadow(0 0 10px var(--accent-soft)); }

.brand-lockup { display: block; max-width: 100%; height: auto; }

.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-faint);
  margin-right: 6px;
}
.status-dot.ok { background: var(--green); box-shadow: 0 0 0 3px var(--green-soft); animation: statusPulse 2.4s ease-in-out infinite; }
.status-dot.bad { background: var(--red); box-shadow: 0 0 0 3px var(--red-soft); }
@keyframes statusPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}
@media (prefers-reduced-motion: reduce) {
  .status-dot.ok { animation: none; }
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  margin-bottom: var(--gap);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.04) inset, 0 20px 40px -30px rgba(0, 0, 0, 0.8);
}

.row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.row + .row { margin-top: 6px; }

.muted { color: var(--text-dim); }
.mono { font-variant-numeric: tabular-nums; font-family: var(--font-mono); }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  background: var(--surface-3);
  color: var(--text-dim);
  border: 1px solid var(--border);
}
.pill.PENDING { color: #b9a5ff; border-color: rgba(139, 107, 255, 0.28); background: rgba(139, 107, 255, 0.1); }
.pill.ENTERING, .pill.RUNNING, .pill.COMPLETE {
  color: #22e6a0;
  border-color: rgba(34, 230, 160, 0.3);
  background: rgba(34, 230, 160, 0.1);
}
.pill.RUNNING::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #22e6a0;
  box-shadow: 0 0 6px #22e6a0;
}
.pill.EXITING { color: var(--amber); border-color: var(--amber); background: var(--amber-soft); }
.pill.CLOSED { color: #9299b8; border-color: rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.04); }
.pill.ERROR, .pill.REJECTED { color: var(--red); border-color: var(--red); background: var(--red-soft); }
.pill.CANCELLED { color: var(--amber); border-color: var(--amber); background: var(--amber-soft); }
.pill.OPEN { color: var(--amber); border-color: var(--amber); background: var(--amber-soft); }

.ticker-value { font-size: 1.05rem; font-weight: 700; transition: color 0.3s ease; }
.ticker-right { display: flex; align-items: baseline; gap: 10px; }
.ticker-pcr { font-size: 0.78rem; }
.ticker-change { font-size: 0.78rem; min-width: 3.5em; text-align: right; }

.pnl-pos { color: var(--green); }
.pnl-neg { color: var(--red); }

button, .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--surface-3);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 0.92rem;
  font-weight: 600;
  font-family: var(--font-body);
  cursor: pointer;
  -webkit-appearance: none;
  min-height: 40px;
  transition: border-color 0.15s ease, background 0.15s ease;
}
button:hover, .btn:hover { border-color: var(--border-hi); }
button:active, .btn:active { transform: scale(0.98); }
button:disabled { opacity: 0.5; cursor: default; }

button.primary, .btn.primary { background: var(--accent); border-color: var(--accent); color: #0a0a14; box-shadow: 0 8px 24px -10px var(--accent-soft); }
button.primary:hover, .btn.primary:hover { background: #9c80ff; border-color: #9c80ff; color: #0a0a14; }
button.danger { background: var(--red); border-color: var(--red); color: #fff; }
button.ghost { background: transparent; }
button.small { padding: 6px 10px; font-size: 0.82rem; min-height: 32px; }
button.block, .btn.block { width: 100%; }

.btn-row { display: flex; gap: 8px; flex-wrap: wrap; }

/* Tab strip (Strategies page: My Strategies | All Strategies). */
.tabs { display: flex; gap: 4px; margin: 2px 0 20px; border-bottom: 1px solid var(--border); }
.tabs .tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 9px 16px;
  color: var(--text-dim);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
}
.tabs .tab:hover { color: var(--text); border-color: transparent; transform: none; }
.tabs .tab.active { color: var(--text); border-bottom-color: var(--accent); }

label {
  display: block;
  font-size: 0.82rem;
  color: var(--text-dim);
  margin: 12px 0 4px;
}
label:first-child { margin-top: 0; }

input[type="text"], input[type="password"], input[type="number"], input[type="time"], input[type="file"],
select, textarea {
  width: 100%;
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 10px;
  font-size: 0.95rem;
  font-family: inherit;
  /* Without this, the browser's own default text-field chrome shows
     through underneath — on WebKit/Blink that's a subtle inner
     highlight/gradient that reads as a glassy "mirror" box against a
     dark background instead of the flat surface every other control
     here uses. */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  box-shadow: none;
}
textarea { resize: vertical; }

/* select loses its native dropdown arrow once appearance is reset above
   — replace it with a plain chevron so it still reads as a dropdown. */
select {
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%239aa1c2' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 10px 6px;
  cursor: pointer;
}

.field-row { display: flex; gap: 8px; }
.field-row > div { flex: 1; }

.checkbox-row { display: flex; align-items: center; gap: 6px; }
.checkbox-row input {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  /* Without an explicit accent-color, an unstyled checkbox falls back to
     the OS's own native rendering — on iOS/mobile dark mode that's a
     dim, low-contrast "chrome/mirror" fill that's easy to miss entirely.
     Themeing it via accent-color (supported everywhere this app targets)
     fixes that on every checkbox in the app, not just this one. */
  accent-color: var(--accent);
  cursor: pointer;
}

/* A checkbox worth calling out above the rest of a form — currently just
   the signal-strategy-form's "Candle stop-loss" toggle, which changes
   real risk behavior and is easy to skim past as a plain unhighlighted
   row. Amber/yellow (not the app's usual violet accent) so it visually
   reads as "notice this," not just another field. */
.checkbox-row.checkbox-highlight {
  background: rgba(255, 224, 92, 0.22);
  border: 1px solid rgba(255, 224, 92, 0.55);
  border-radius: 8px;
  padding: 10px 12px;
  margin: 6px 0;
}
.checkbox-row.checkbox-highlight input { accent-color: #ffe05c; }

.weekdays { display: flex; gap: 6px; flex-wrap: wrap; }
.weekdays label {
  margin: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  cursor: pointer;
  user-select: none;
  color: var(--text-dim);
  font-size: 0.85rem;
}
.weekdays input { display: none; }
.weekdays input:checked + span { color: var(--text); }
.weekdays label:has(input:checked) { border-color: var(--accent); color: var(--text); background: var(--accent-soft); }

/* Deploy-strategy picker: one card per strategy instead of a wrapped row
   of text chips. The real checkbox stays visible (not hidden like
   .weekdays') and is pinned to the top-right corner via absolute
   positioning so selection reads as a distinct action from the card's
   own click-to-toggle behavior. */
.strategy-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.strategy-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 36px 12px 14px;
  cursor: pointer;
  user-select: none;
  background: var(--surface-2);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.strategy-card:hover { border-color: var(--border-hi); }
.strategy-card:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.strategy-card input { position: absolute; top: 12px; right: 12px; width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
.strategy-card-title { font-size: 0.92rem; padding-right: 4px; }
.strategy-card-tag { align-self: flex-start; font-size: 0.68rem; text-transform: uppercase; }
.strategy-card-status {
  position: absolute;
  top: 14px;
  right: 38px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-faint);
}
.strategy-card-status.active { background: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }

.leg-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  margin-bottom: 10px;
  /* Match .card's actual solid-card treatment — var(--surface-2) (a
     near-transparent white wash meant for input fields, not card
     backgrounds) plus no blur let the background photo show straight
     through, reading as a washed-out/"transparent" box next to the
     Strategy/Schedule/Risk Management cards above it. */
  background: var(--surface);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.04) inset, 0 20px 40px -30px rgba(0, 0, 0, 0.8);
}
.leg-card .row { margin-bottom: 4px; }

.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.calendar-weekday { text-align: center; font-size: 0.72rem; color: var(--text-dim); padding-bottom: 4px; text-transform: uppercase; letter-spacing: 0.03em; }
.calendar-cell {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 8px;
  min-height: 52px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--surface-2);
}
.calendar-cell[data-date] { cursor: pointer; }
.calendar-cell[data-date]:hover { border-color: var(--border-hi); }
.calendar-cell.empty { background: transparent; border-color: transparent; }
.calendar-cell.empty .calendar-day { color: var(--text-faint); }
.calendar-day { font-size: 0.78rem; color: var(--text-dim); }
.calendar-cell .mono { font-size: 0.82rem; }

/* Compact inline controls for the signal builder's condition rows —
   operands and comparators sit on one line rather than stacking as
   full-width fields like the rest of the app's forms. */
.operand-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.operand-row select, .operand-row input { width: auto; }
.operand { display: flex; align-items: center; gap: 6px; }
.operand select { min-width: 132px; }
.operand input { min-width: 64px; }
.operand-comparator { min-width: 150px; font-family: var(--font-mono); }
.condition-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 4px; }
.condition-label.long { color: var(--green); }
.condition-label.short { color: var(--red); }

.error-box {
  background: var(--red-soft);
  border: 1px solid var(--red);
  color: #ffb2c2;
  border-radius: 8px;
  padding: 10px;
  font-size: 0.85rem;
  margin-top: 8px;
  white-space: pre-wrap;
}

.success-box {
  background: var(--green-soft);
  border: 1px solid var(--green);
  color: #adf5da;
  border-radius: 8px;
  padding: 10px;
  font-size: 0.85rem;
  margin-top: 8px;
}

.empty { color: var(--text-faint); text-align: center; padding: 24px 0; font-size: 0.9rem; }

/* Shared hover tooltip (see app.js's showTooltip/hideTooltip) — used
   instead of the native title attribute, which is too slow/easy to miss
   for content worth actually reading (e.g. a strategy card's summary). */
#app-tooltip {
  position: fixed;
  z-index: 1000;
  max-width: 320px;
  background: var(--surface);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border-hi);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 0.8rem;
  color: var(--text-dim);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.1s ease;
}
#app-tooltip.visible { opacity: 1; }

/* A handful of distinct, independent h2+card sections side by side —
   each pair wrapped in a <section> so the heading travels with its card
   as one grid item (bare siblings otherwise, not grouped). */
.section-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; align-items: start; }
.section-grid > section > h2 { margin-top: 0; }

/* Many same-shape cards generated in bulk by JS (strategy lists, user
   lists) — grid the existing container directly. */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }

/* Strategy Tiles (Strategies page) */
.strategy-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  background: linear-gradient(160deg, rgba(20, 24, 46, 0.75) 0%, rgba(10, 12, 26, 0.82) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 16px 18px;
  gap: 8px;
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  box-shadow: 0 4px 20px -6px rgba(0, 0, 0, 0.6), inset 0 1px 0 0 rgba(255, 255, 255, 0.06);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease, box-shadow 0.2s ease;
}
.strategy-tile:hover {
  transform: translateY(-2px);
  border-color: rgba(139, 107, 255, 0.35);
  box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.7), 0 0 20px -4px rgba(139, 107, 255, 0.16), inset 0 1px 0 0 rgba(255, 255, 255, 0.1);
}
.strategy-tile-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 2px;
}
.strategy-tile-title {
  font-size: 0.94rem;
  font-weight: 600;
  color: #f5f6fc;
  line-height: 1.35;
  letter-spacing: -0.01em;
}
.strategy-tile-badges {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.strategy-tile-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.75rem;
}
.strategy-tag {
  font-size: 0.72rem;
  font-weight: 500;
  color: #9aa2c8;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  padding: 2px 7px;
  border-radius: 5px;
  letter-spacing: 0.02em;
}
.strategy-time {
  font-size: 0.73rem;
  font-weight: 500;
  color: #c8cef0;
  background: rgba(139, 107, 255, 0.08);
  border: 1px solid rgba(139, 107, 255, 0.18);
  padding: 2px 7px;
  border-radius: 5px;
}
.strategy-tile-details {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.72rem;
  color: #6e769c;
}
.strategy-subtag {
  font-size: 0.72rem;
  color: #7b83aa;
}
.strategy-tile-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.strategy-tile-actions .btn,
.strategy-tile-actions button {
  min-height: 28px;
  padding: 4px 10px;
  font-size: 0.76rem;
  font-weight: 500;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #cfd4ec;
  transition: all 0.15s ease;
}
.strategy-tile-actions .btn:hover,
.strategy-tile-actions button:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}
.strategy-tile-actions button.danger {
  background: rgba(255, 63, 108, 0.08);
  border: 1px solid rgba(255, 63, 108, 0.24);
  color: #ff6084;
}
.strategy-tile-actions button.danger:hover {
  background: rgba(255, 63, 108, 0.22);
  border-color: rgba(255, 63, 108, 0.55);
  color: #ffffff;
  box-shadow: 0 0 12px rgba(255, 63, 108, 0.25);
}

/* Compact single-line deployment log (the dashboard's "Today" list) —
   one bordered .card holding several .dep-row entries, each row clickable
   through to its full order log instead of a separate button. */
.dep-section-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 18px 0 8px;
}
.dep-section-label:first-child { margin-top: 0; }

.dep-list { padding: 0; }
.dep-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-top: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.15s ease;
}
.dep-row:first-child { border-top: none; }
.dep-row:hover { background: rgba(255, 255, 255, 0.03); }
.dep-row:focus-visible { outline-offset: -2px; }

.dep-row-main {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  flex: 1;
}
.dep-row-main strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.92rem;
}
.dep-row-main .muted { font-size: 0.78rem; white-space: nowrap; }

.dep-row-stats {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}
.dep-row-stats .mono { font-size: 0.88rem; min-width: 3.5em; text-align: right; }

.dep-row-actions { display: flex; gap: 6px; }
.dep-row-actions button { min-height: 30px; padding: 5px 9px; font-size: 0.78rem; }

@media (max-width: 480px) {
  .dep-row { flex-wrap: wrap; }
  .dep-row-main { width: 100%; }
}

table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
th, td { text-align: left; padding: 7px 4px; border-bottom: 1px solid var(--border); }
th { color: var(--text-faint); font-weight: 600; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; }
td.mono, th.mono { font-family: var(--font-mono); }

.spec-json {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px;
  font-size: 0.8rem;
  font-family: var(--font-mono);
  overflow-x: auto;
  white-space: pre;
}

/* Below this width the fixed left sidebar (#topbar) reverts to today's
   original horizontal top bar — same markup (renderTopbar in app.js
   doesn't branch on viewport at all), just re-flowed. */
@media (max-width: 860px) {
  .topbar {
    position: static;
    width: auto;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px 16px;
    border-right: none;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
    gap: 8px;
  }
  .topbar nav { flex-direction: row; gap: 16px; margin-top: 0; }
  .topbar nav a { padding: 0; border-radius: 0; background: none !important; }
  .sidebar-bottom { margin-top: 0; flex-direction: row; align-items: center; gap: 10px; padding-top: 0; }
  .sidebar-panic-wrap { margin: 0; }
  .sidebar-user { margin-top: 0; flex-direction: row; align-items: center; gap: 10px; padding-top: 0; border-top: none; }
  button.danger.sidebar-panic-btn { width: auto; margin-bottom: 0; min-height: 28px; padding: 4px 8px; }

  .page { margin-left: 0; padding: 12px; }
}