/* ════════════════════════════════════════════════════════════
   ReefCMD Desktop App — desktop_app.css
   ────────────────────────────────────────────────────────────
   Mirrors mobile_app.css patterns. All classes are .rcd-*.
   Single source of truth for desktop styling.

   Layout: persistent left sidebar + max-width content column.
   Tokens come from theme.css (--surface, --text, --cyan, etc.)

   See DESKTOP_STYLE_GUIDE.md for usage.
   ════════════════════════════════════════════════════════════ */


/* ─── Reset / base ────────────────────────────────────────── */
.rcd-shell *,
.rcd-shell *::before,
.rcd-shell *::after { box-sizing: border-box; }

.rcd-shell {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: var(--deep);
  color: var(--text);
  min-height: 100vh;
}


/* ════════════════════════════════════════════════════════════
   LAYOUT — Sidebar + Content column
   ════════════════════════════════════════════════════════════ */

.rcd-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 100vh;
}

@media (max-width: 1199px) {
  .rcd-layout { grid-template-columns: 64px 1fr; }
  .rcd-sb-label { display: none; }
  .rcd-sb-logo-text { display: none; }
  .rcd-sb-tank { display: none; }
  .rcd-sb-section-title { display: none; }
  .rcd-sb { padding: 18px 8px; }
  .rcd-sb-item { justify-content: center; padding: 11px 0; }
  .rcd-sb-divider { margin: 12px 4px; }
  .rcd-sb-logo { justify-content: center; padding: 10px 0 18px; }
  .rcd-sb-logo-img { width: 40px; height: 40px; }
}

/* ─── Mobile drawer controls (hidden at wide viewports) ───── */
.rcd-hamburger {
  display: none;
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 800;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 9px;
  cursor: pointer;
  color: var(--text);
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.rcd-hamburger:hover { background: var(--hover); }

.rcd-sb-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 899;
  backdrop-filter: blur(2px);
}
.rcd-sb-backdrop.rcd-sb--open { display: block; }

@media (max-width: 767px) {
  /* Layout: sidebar removed from grid flow */
  .rcd-layout { grid-template-columns: 1fr; }

  /* Sidebar: fixed overlay drawer, slides in from left */
  .rcd-sb {
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    width: 260px;
    z-index: 900;
    transform: translateX(-100%);
    transition: transform 0.25s cubic-bezier(0.4,0,0.2,1);
    padding: 20px 14px;
    box-shadow: 4px 0 32px rgba(0,0,0,0.5);
  }
  .rcd-sb.rcd-sb--open { transform: translateX(0); }

  /* Restore full labels inside drawer (override icon-only from 1199px breakpoint) */
  .rcd-sb-label        { display: block; }
  .rcd-sb-logo-text    { display: block; }
  .rcd-sb-tank         { display: flex; }
  .rcd-sb-section-title{ display: block; }
  .rcd-sb-item         { justify-content: flex-start; padding: 10px 12px; }
  .rcd-sb-logo         { justify-content: flex-start; padding: 6px 8px 14px; }
  .rcd-sb-logo-img     { width: 32px; height: 32px; }

  /* Main content: full width + top clearance for hamburger */
  .rcd-main { padding: 60px 20px 60px; }

  /* Show hamburger */
  .rcd-hamburger { display: flex; }
}


/* ─── Sidebar ─────────────────────────────────────────────── */
.rcd-sb {
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: 20px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

/* Logo block at top */
.rcd-sb-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px 14px;
  text-decoration: none;
  color: var(--text);
}
.rcd-sb-logo-img {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  object-fit: contain;
}
.rcd-sb-logo-text {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.3px;
}
.rcd-sb-logo-text .rcd-accent { color: var(--cyan); }

/* Active tank pill below logo */
.rcd-sb-tank {
  margin: 4px 4px 14px;
  padding: 9px 10px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--text);
  transition: border-color 0.12s;
}
.rcd-sb-tank:hover { border-color: var(--border-bright); }
.rcd-sb-tank-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.rcd-sb-tank-name {
  font-size: 13px;
  font-weight: 600;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rcd-sb-tank-arrow {
  color: var(--muted);
  font-size: 12px;
  flex-shrink: 0;
}

/* Sidebar dropdown variant — same outer pill, native <select> styled to look
   like the pill's text. Caret is the browser's own (consistent with the rest
   of the rcd-select usage). */
.rcd-sb-tank-picker { padding-right: 6px; cursor: pointer; }
.rcd-sb-tank-picker:hover { border-color: var(--border-bright); }
.rcd-sb-tank-select {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 0 2px 0 0;
  cursor: pointer;
  outline: none;
  appearance: auto;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  /* color-scheme tells the browser to render the native option list using
     the matching system palette — dark popup on dark theme, light on light.
     Without this the popup can render white-on-white in dark mode. */
  color-scheme: light dark;
}
.rcd-sb-tank-select:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; border-radius: 4px; }
/* Reef-themed option list. Most browsers honor these for native <option>;
   Firefox + Chromium on desktop render them, Safari falls back to OS chrome
   but the color-scheme above keeps it readable there. */
.rcd-sb-tank-select option {
  background: var(--panel);
  color: var(--text);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  padding: 6px 10px;
}
.rcd-sb-tank-select option:checked {
  background: var(--cyan-dim, rgba(0, 200, 255, 0.15));
  color: var(--cyan);
  font-weight: 600;
}

/* Section title */
.rcd-sb-section-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
  padding: 14px 8px 6px;
}

/* Nav item */
.rcd-sb-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--text2);
  font-size: 14px;
  font-weight: 500;
  transition: background 0.12s, color 0.12s;
}
.rcd-sb-item:hover {
  background: var(--hover);
  color: var(--text);
}
.rcd-sb-item.rcd-sb-active {
  background: var(--cyan-dim);
  color: var(--cyan);
  font-weight: 600;
}
.rcd-sb-icon {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.rcd-sb-icon svg { width: 100%; height: 100%; }
.rcd-sb-label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rcd-sb-badge {
  font-size: 10px;
  font-weight: 700;
  background: var(--cyan);
  color: #fff;
  padding: 2px 6px;
  border-radius: 10px;
  flex-shrink: 0;
}
[data-theme="dark"] .rcd-sb-badge { color: #0F1417; }

.rcd-sb-divider {
  height: 1px;
  background: var(--border);
  margin: 10px 8px;
}

/* Sidebar footer (theme/logout) */
.rcd-sb-footer {
  margin-top: auto;
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}


/* ─── Main content column ─────────────────────────────────── */
.rcd-main {
  padding: 28px 36px 60px;
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  overflow-x: hidden;
}

/* Page header — title row + actions */
.rcd-page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.rcd-page-title {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.4px;
  color: var(--text);
  margin: 0;
}
.rcd-page-subtitle {
  font-size: 13px;
  color: var(--muted);
  margin-top: 2px;
}
.rcd-page-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Footer */
.rcd-footer {
  margin-top: 50px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  text-align: center;
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.5px;
}
.rcd-footer a {
  color: var(--muted);
  text-decoration: none;
  margin: 0 8px;
}
.rcd-footer a:hover { color: var(--cyan); }


/* ════════════════════════════════════════════════════════════
   UTILITY SYSTEM (mirrors .rcm-* from mobile)
   ════════════════════════════════════════════════════════════ */

/* TEXT — sizes (slightly larger than mobile because desktop) */
.rcd-t-xs    { font-size: 11px; }
.rcd-t-sm    { font-size: 13px; }
.rcd-t-base  { font-size: 15px; }
.rcd-t-md    { font-size: 16px; }
.rcd-t-lg    { font-size: 18px; }
.rcd-t-xl    { font-size: 22px; }
.rcd-t-2xl   { font-size: 28px; }
.rcd-t-3xl   { font-size: 36px; }
.rcd-t-4xl   { font-size: 48px; }

.rcd-w-400   { font-weight: 400; }
.rcd-w-500   { font-weight: 500; }
.rcd-w-600   { font-weight: 600; }
.rcd-w-700   { font-weight: 700; }
.rcd-w-800   { font-weight: 800; }

.rcd-c-text  { color: var(--text); }
.rcd-c-text2 { color: var(--text2); }
.rcd-c-muted { color: var(--muted); }
.rcd-c-cyan  { color: var(--cyan); }
.rcd-c-green { color: #4CAF50; }
.rcd-c-amber { color: #FF8F00; }
.rcd-c-red   { color: #F44336; }
[data-theme="dark"] .rcd-c-green { color: #66BB6A; }
[data-theme="dark"] .rcd-c-amber { color: #FFCA28; }
[data-theme="dark"] .rcd-c-red   { color: #EF5350; }

.rcd-italic   { font-style: italic; }
.rcd-mono     { font-family: 'JetBrains Mono', 'DM Mono', monospace; }
.rcd-upper    { text-transform: uppercase; letter-spacing: 0.7px; }
.rcd-center   { text-align: center; }
.rcd-right    { text-align: right; }
.rcd-line-tight  { line-height: 1.3; }
.rcd-line-base   { line-height: 1.5; }
.rcd-line-loose  { line-height: 1.7; }
.rcd-truncate {
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}

/* BACKGROUND */
.rcd-bg-surface { background: var(--surface); }
.rcd-bg-panel   { background: var(--panel); }
.rcd-bg-dim     { background: var(--dim); }
.rcd-bg-cyan-dim { background: var(--cyan-dim); }

/* BORDER + RADIUS */
.rcd-bd       { border: 1px solid var(--border); }
.rcd-bd-t     { border-top: 1px solid var(--border); }
.rcd-bd-b     { border-bottom: 1px solid var(--border); }

.rcd-r-sm     { border-radius: 8px; }
.rcd-r        { border-radius: 12px; }
.rcd-r-lg     { border-radius: 16px; }
.rcd-r-xl     { border-radius: 20px; }
.rcd-r-full   { border-radius: 999px; }

.rcd-shadow {
  box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 14px rgba(0,0,0,0.05);
}
[data-theme="dark"] .rcd-shadow {
  box-shadow: none;
  border: 1px solid rgba(255,255,255,0.07);
}

/* SPACING — padding */
.rcd-p-0   { padding: 0; }
.rcd-p-2   { padding: 6px; }
.rcd-p-3   { padding: 10px; }
.rcd-p-4   { padding: 14px; }
.rcd-p-5   { padding: 18px; }
.rcd-p-6   { padding: 22px; }
.rcd-p-7   { padding: 28px; }
.rcd-px-3  { padding-left: 10px; padding-right: 10px; }
.rcd-px-4  { padding-left: 14px; padding-right: 14px; }
.rcd-px-5  { padding-left: 18px; padding-right: 18px; }
.rcd-py-2  { padding-top: 6px; padding-bottom: 6px; }
.rcd-py-3  { padding-top: 10px; padding-bottom: 10px; }
.rcd-py-4  { padding-top: 14px; padding-bottom: 14px; }

/* SPACING — margin */
.rcd-mb-0  { margin-bottom: 0; }
.rcd-mb-1  { margin-bottom: 4px; }
.rcd-mb-2  { margin-bottom: 8px; }
.rcd-mb-3  { margin-bottom: 12px; }
.rcd-mb-4  { margin-bottom: 16px; }
.rcd-mb-5  { margin-bottom: 20px; }
.rcd-mb-6  { margin-bottom: 24px; }
.rcd-mb-8  { margin-bottom: 32px; }
.rcd-mt-1  { margin-top: 4px; }
.rcd-mt-2  { margin-top: 8px; }
.rcd-mt-3  { margin-top: 12px; }
.rcd-mt-4  { margin-top: 16px; }
.rcd-mt-6  { margin-top: 24px; }

/* FLEX / GRID */
.rcd-flex      { display: flex; }
.rcd-iflex     { display: inline-flex; }
.rcd-fcol      { flex-direction: column; }
.rcd-aic       { align-items: center; }
.rcd-aib       { align-items: baseline; }
.rcd-jcc       { justify-content: center; }
.rcd-jbet      { justify-content: space-between; }
.rcd-jstart    { justify-content: flex-start; }
.rcd-jend      { justify-content: flex-end; }
.rcd-fwrap     { flex-wrap: wrap; }
.rcd-flex-1    { flex: 1; min-width: 0; }
.rcd-fshrink-0 { flex-shrink: 0; }

.rcd-gap-1     { gap: 4px; }
.rcd-gap-2     { gap: 8px; }
.rcd-gap-3     { gap: 12px; }
.rcd-gap-4     { gap: 16px; }
.rcd-gap-5     { gap: 20px; }

.rcd-grid-2    { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.rcd-grid-3    { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.rcd-grid-4    { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.rcd-grid-5    { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }

@media (max-width: 1099px) {
  .rcd-grid-4 { grid-template-columns: 1fr 1fr 1fr; }
  .rcd-grid-5 { grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 899px) {
  .rcd-grid-3 { grid-template-columns: 1fr 1fr; }
  .rcd-grid-4 { grid-template-columns: 1fr 1fr; }
  .rcd-grid-5 { grid-template-columns: 1fr 1fr; }
}

/* ─── Log parameter grid (desktop overrides) ──────────────── */
.log-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
}
.log-field {
  min-width: 0;
  box-sizing: border-box;
}
.log-field .rcd-input { font-size: 18px; padding: 10px 12px; }
.log-field .rcd-label { font-size: 11px; }
.log-field .rcd-note  { font-size: 10px; }

/* DISPLAY */
.rcd-block     { display: block; }
.rcd-iblock    { display: inline-block; }
.rcd-hidden    { display: none; }


/* ════════════════════════════════════════════════════════════
   COMPONENTS
   ════════════════════════════════════════════════════════════ */

/* ─── Card ─────────────────────────────────────────────────── */
.rcd-card {
  background: var(--surface);
  border-radius: 16px;
  padding: 18px 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 14px rgba(0,0,0,0.05);
  margin-bottom: 16px;
}
[data-theme="dark"] .rcd-card {
  box-shadow: none;
  border: 1px solid rgba(255,255,255,0.07);
}
.rcd-card-pad-lg { padding: 24px 28px; }
.rcd-card-pad-sm { padding: 12px 14px; }
.rcd-card-tight  { margin-bottom: 10px; }
.rcd-card-flat   { box-shadow: none; border: 1px solid var(--border); }
.rcd-card-table  { padding: 0; overflow: hidden; }
[data-theme="dark"] .rcd-card-flat { border-color: rgba(255,255,255,0.07); }


/* ─── Section title (label ABOVE cards) ───────────────────── */
/* Canonical pattern is title-OUTSIDE: a small uppercase muted label sits
   above the card, the card's surface starts below. See handlers/log.py
   ("Log a New Reading", "Recent Readings") and handlers/dashboard.py
   _build_ts_card for examples. */
.rcd-section-title {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}

/* (Removed: the "title accidentally inside card" auto-correct guard.
   Several legitimate pages — /support, /privacy, /disclaimer, /resources —
   use `.rcd-section-title` as the in-card heading on each block, which is
   the *intended* pattern, not a mistake. The guard was hoisting those
   titles out via negative margin and breaking the layout. Place section
   titles outside cards where you want the "title above, card below" look
   and inside cards where you want a labelled section — the same class
   works in both spots without remediation.) */


/* ─── Form label ──────────────────────────────────────────── */
.rcd-label {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--muted);
}


/* ─── Note (italic explainer) ─────────────────────────────── */
.rcd-note {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  color: var(--text2);
  line-height: 1.55;
}


/* ─── Divider ─────────────────────────────────────────────── */
.rcd-divider {
  height: 1px;
  background: var(--border);
  margin: 16px 0;
}


/* ─── Buttons ─────────────────────────────────────────────── */
.rcd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 10px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.08s, background 0.12s, border-color 0.12s;
}
.rcd-btn:hover { border-color: var(--border-bright); }
.rcd-btn:active { transform: translateY(1px); }
.rcd-btn-primary {
  background: var(--cyan);
  border-color: var(--cyan);
  color: #fff;
  box-shadow: 0 4px 14px rgba(8,145,178,0.22);
}
.rcd-btn-primary:hover { filter: brightness(1.05); }
[data-theme="dark"] .rcd-btn-primary { color: #0F1417; }
.rcd-btn-danger {
  background: transparent;
  color: #F44336;
  border-color: rgba(244,67,54,0.40);
}
.rcd-btn-danger:hover { background: rgba(244,67,54,0.06); }
.rcd-btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--cyan);
}
.rcd-btn-ghost:hover { background: var(--cyan-dim); }
.rcd-btn-sm { padding: 7px 12px; font-size: 13px; }
.rcd-btn-lg { padding: 13px 22px; font-size: 15px; }
.rcd-btn-full { width: 100%; }
.rcd-btn-link {
  background: none;
  border: none;
  padding: 2px 4px;
  color: var(--muted);
  font-size: 12px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}


/* ─── Badges (status chips) ───────────────────────────────── */
.rcd-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 14px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2px;
  border: 1px solid;
}
.rcd-badge-good   { background: rgba(76,175,80,0.10);  border-color: rgba(76,175,80,0.35);  color: #2E7D32; }
.rcd-badge-warn   { background: rgba(255,143,0,0.12);  border-color: rgba(255,143,0,0.40);  color: #B87000; }
.rcd-badge-danger { background: rgba(244,67,54,0.10);  border-color: rgba(244,67,54,0.40);  color: #C62828; }
.rcd-badge-info   { background: rgba(33,150,243,0.10); border-color: rgba(33,150,243,0.35); color: #1565C0; }
.rcd-badge-muted  { background: var(--dim); border-color: var(--border); color: var(--muted); }
[data-theme="dark"] .rcd-badge-good   { color: #66BB6A; }
[data-theme="dark"] .rcd-badge-warn   { color: #FFCA28; }
[data-theme="dark"] .rcd-badge-danger { color: #EF5350; }
[data-theme="dark"] .rcd-badge-info   { color: #42A5F5; }


/* ─── Status dots ─────────────────────────────────────────── */
.rcd-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  display: inline-block;
}
.rcd-dot-green { background: #4CAF50; }
.rcd-dot-amber { background: #FFC107; }
.rcd-dot-red   { background: #F44336; }
.rcd-dot-grey  { background: var(--muted); opacity: 0.4; }


/* ─── Inputs ──────────────────────────────────────────────── */
.rcd-input {
  width: 100%;
  padding: 11px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  color: var(--text);
  outline: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.rcd-input:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px var(--cyan-dim);
}
.rcd-input::placeholder { color: var(--muted); }
.rcd-textarea {
  min-height: 80px;
  resize: vertical;
  line-height: 1.5;
}
.rcd-select {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237A8A96' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}


/* ─── Modal ───────────────────────────────────────────────── */
/* Show/hide is driven by inline display:flex/none from JS so the open/close
   helpers throughout the codebase keep working. The .rcd-modal class only
   handles styling. */
.rcd-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 16px;
  -webkit-tap-highlight-color: transparent;
}
.rcd-modal-panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 24px 26px;
  width: min(500px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}
.rcd-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}
.rcd-modal-title {
  font-family: 'BebasNeue', 'Impact', 'Arial Narrow', sans-serif;
  font-size: 22px;
  letter-spacing: 2px;
  color: var(--cyan);
  line-height: 1;
}
.rcd-modal-close {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
  transition: color 0.15s;
}
.rcd-modal-close:hover { color: var(--text); }
.rcd-modal-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.rcd-modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 8px;
}


/* ─── Tabs (used on Settings page etc.) ───────────────────── */
.rcd-tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
  overflow-x: auto;
  scrollbar-width: none;
}
.rcd-tabs::-webkit-scrollbar { display: none; }

.rcd-tab {
  padding: 11px 16px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.12s, border-color 0.12s;
  white-space: nowrap;
  cursor: pointer;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
}
.rcd-tab:hover { color: var(--text2); }
.rcd-tab-active {
  color: var(--cyan);
  border-bottom-color: var(--cyan);
}


/* ─── Filter pills (used on Library, History range) ───────── */
.rcd-pills {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px;
  background: var(--panel);
  border-radius: 10px;
  border: 1px solid var(--border);
}
.rcd-pill {
  padding: 5px 11px;
  border-radius: 7px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.rcd-pill:hover { color: var(--text); }
.rcd-pill-active {
  background: var(--surface);
  color: var(--cyan);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
[data-theme="dark"] .rcd-pill-active {
  box-shadow: none;
  background: var(--cyan-dim);
}


/* ─── Two-column layout (list + detail) ───────────────────── */
.rcd-split {
  display: grid;
  grid-template-columns: minmax(280px, 380px) 1fr;
  gap: 20px;
}
@media (max-width: 999px) {
  .rcd-split { grid-template-columns: 1fr; }
}


/* ─── Tables ──────────────────────────────────────────────── */
.rcd-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
}
.rcd-table thead th {
  text-align: left;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--muted);
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}
.rcd-table tbody td {
  padding: 12px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}
.rcd-table tbody tr:last-child td { border-bottom: none; }
.rcd-table tbody tr:hover td { background: var(--hover); }


/* ─── Avatar / circle icons ───────────────────────────────── */
.rcd-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--cyan-dim);
  color: var(--cyan);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}
.rcd-avatar-lg { width: 48px; height: 48px; font-size: 18px; }


/* ─── Animal detail photo (circle) ───────────────────────── */
.rcd-an-photo-wrap {
  position: relative;
  width: 260px;
  height: 180px;
  margin: 0 auto 10px;
  border-radius: 9999px;
  overflow: hidden;
  background: var(--dim);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 16px rgba(0,0,0,0.10);
}
[data-theme="dark"] .rcd-an-photo-wrap {
  box-shadow: none;
  border: 1px solid rgba(255,255,255,0.07);
}
.rcd-an-photo-bg {
  position: absolute;
  top: -20px; right: -20px; bottom: -20px; left: -20px;
  background-size: cover;
  background-position: center;
  filter: blur(14px);
  opacity: 0;
  transition: opacity .3s;
}
.rcd-an-photo {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity .3s;
}
.rcd-an-photo-credit {
  display: block;
  text-align: center;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 9px;
  color: var(--muted);
  text-decoration: none;
  margin-bottom: 10px;
  letter-spacing: 0.3px;
}
.rcd-an-photo-credit:hover { color: var(--cyan); }


/* ─── Flash messages ──────────────────────────────────────── */
.rcd-flash {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 14px;
  margin-bottom: 16px;
}
.rcd-flash-info    { background: rgba(33,150,243,0.10); color: #1565C0; border: 1px solid rgba(33,150,243,0.30); }
.rcd-flash-success { background: rgba(76,175,80,0.10);  color: #2E7D32; border: 1px solid rgba(76,175,80,0.30); }
.rcd-flash-error   { background: rgba(244,67,54,0.10);  color: #C62828; border: 1px solid rgba(244,67,54,0.30); }
.rcd-flash-close {
  background: none; border: none; cursor: pointer;
  font-size: 18px; line-height: 1;
  color: inherit; opacity: 0.6;
}
.rcd-flash-close:hover { opacity: 1; }


/* ─── Table compact + group header ───────────────────────── */
.rcd-table-compact tbody td { padding: 8px 12px; }
.rcd-table-group td {
  font-family: 'JetBrains Mono', 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--cyan);
  background: rgba(0,200,255,0.03);
  border-bottom: 1px solid var(--border) !important;
  padding: 7px 12px !important;
}
.rcd-table-group:hover td { background: rgba(0,200,255,0.03) !important; }

/* ─── Table text link (animal names) ─────────────────────── */
.rcd-tbl-link { color: var(--text); text-decoration: none; font-weight: 500; }
.rcd-tbl-link:hover { color: var(--cyan); }

/* ─── Badge xs (tight variant for table cells) ───────────── */
.rcd-badge-xs { padding: 2px 6px !important; font-size: 9px !important; }

/* ─── Qty stepper ─────────────────────────────────────────── */
.rcd-stepper { display: inline-flex; align-items: center; }
.rcd-stepper-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  font-size: 14px; font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  padding: 0;
  transition: background 0.1s;
}
.rcd-stepper-btn:first-child { border-radius: 4px 0 0 4px; border-right: none; }
.rcd-stepper-btn:last-child  { border-radius: 0 4px 4px 0; border-left: none; }
.rcd-stepper-btn:hover { background: var(--hover); }
[data-theme="dark"] .rcd-stepper-btn { background: var(--panel); }
.rcd-stepper-val {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 28px; height: 22px; padding: 0 6px;
  background: var(--cyan); color: #fff;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  font-size: 11px; font-weight: 700;
}
[data-theme="dark"] .rcd-stepper-val { color: #0F1417; }

/* ─── Alert column variant ────────────────────────────────── */
.rcd-alert-col { flex-direction: column; align-items: flex-start; gap: 4px; }

/* ─── Padding-top utilities ──────────────────────────────── */
.rcd-pt-2 { padding-top: 6px; }
.rcd-pt-3 { padding-top: 10px; }
.rcd-pt-4 { padding-top: 14px; }

/* ─── Dot size modifier ──────────────────────────────────── */
.rcd-dot-sm { width: 6px !important; height: 6px !important; }

/* ─── 2-col layout (tablet / dashboard sidebar) ──────────── */
.rcd-2col {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 24px;
  align-items: start;
}
@media (max-width: 1000px) {
  .rcd-2col { grid-template-columns: 1fr; }
}

/* ─── Alert rows ──────────────────────────────────────────── */
.rcd-alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 8px;
  border-left: 3px solid transparent;
}
.rcd-alert-warn    { background: rgba(255,143,0,0.07);  border-left-color: var(--amber); color: var(--text2); }
.rcd-alert-danger  { background: rgba(244,67,54,0.07);  border-left-color: var(--red);   color: var(--text2); }
.rcd-alert-info    { background: rgba(33,150,243,0.07); border-left-color: var(--cyan);  color: var(--text2); }
.rcd-alert-success { background: rgba(3,105,161,0.07); border-left-color: var(--ocean); color: var(--text2); }
.rcd-fix-btn {
  flex-shrink: 0;
  align-self: center;
  font-size: 11px;
  font-family: 'JetBrains Mono', 'DM Mono', monospace;
  color: var(--cyan);
  text-decoration: none;
  padding: 3px 8px;
  border: 1px solid rgba(0,200,255,0.30);
  border-radius: 5px;
  white-space: nowrap;
}
.rcd-fix-btn:hover { background: var(--cyan-dim); }

/* Fix expander — neutralize <button> chrome so the toggle matches the link, + the how-to-fix panel */
button.rcd-fix-btn, button.mob-dash-fix { background: transparent; cursor: pointer; }
.rcd-fix-guide {
  display: none;
  margin: 4px 0 10px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-left: 3px solid var(--cyan);
}
.rcd-fix-guide.open { display: block; }
.rcd-fix-guide-title { font-weight: 700; font-size: 13px; margin-bottom: 6px; color: var(--text); }
.rcd-fix-steps { margin: 0 0 8px; padding-left: 18px; font-size: 13px; color: var(--text2); line-height: 1.5; }
.rcd-fix-steps li { margin-bottom: 3px; }
.rcd-fix-go { display: inline-block; font-size: 12px; color: var(--cyan); text-decoration: none; font-weight: 600; }

/* ─── Param cards (dashboard) ─────────────────────────────── */
.rcd-pcrd-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  gap: 12px;
}
.rcd-pcrd {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s;
}
.rcd-pcrd:hover { border-color: var(--border-bright); }
[data-theme="dark"] .rcd-pcrd { background: var(--panel); }
.rcd-pc-lbl {
  font-size: 9px;
  font-family: 'JetBrains Mono', 'DM Mono', monospace;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--muted);
  margin-bottom: 4px;
}
.rcd-pc-val {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.1;
}
.rcd-pc-unit {
  font-size: 10px;
  color: var(--muted);
  font-family: 'JetBrains Mono', 'DM Mono', monospace;
  margin-left: 2px;
}
.rcd-pc-status {
  display: flex;
  align-items: center;
  gap: 5px;
}
.rcd-pc-status-lbl {
  font-family: 'JetBrains Mono', 'DM Mono', monospace;
  font-size: 10px;
}
.rcd-pc-bar {
  height: 3px;
  background: var(--dim);
  border-radius: 99px;
  overflow: hidden;
  margin-bottom: 5px;
}
.rcd-pc-fill {
  height: 100%;
  border-radius: 99px;
}
.rcd-pc-range {
  font-size: 9px;
  font-family: 'JetBrains Mono', 'DM Mono', monospace;
  color: var(--muted);
  margin-top: 4px;
}


/* ════════════════════════════════════════════════════════════
   Maintenance Schedule (desktop)
   ════════════════════════════════════════════════════════════ */
.rcd-maint-section-title {
  font-family: 'JetBrains Mono', 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--muted);
  border-left: 3px solid var(--cyan);
  padding-left: 10px;
  margin: 18px 0 10px;
}
.rcd-maint-section-title:first-child { margin-top: 0; }

.rcd-maint-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

/* Row is flex (not grid) so the status column doesn't get its own
   fixed track that the long-form text used to overflow. Status has
   flex-shrink:0 + max-width so it neither shrinks nor expands; long
   phrases wrap to a second line instead of bleeding into the label.
   Label uses min-width:0 + ellipsis so a long task name truncates
   rather than pushing the status off-screen. */
.rcd-maint-row {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.12s;
  border-left: 2px solid transparent;
  margin-left: -2px;
}
.rcd-maint-row:hover { background: var(--cyan-dim); }
.rcd-maint-row.is-overdue { border-left-color: var(--amber); }
.rcd-maint-row.is-checked .rcd-maint-label { opacity: 0.85; }

.rcd-maint-checkbox {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 22px;
  font-size: 16px;
  line-height: 1;
}

.rcd-maint-label {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  color: var(--text);
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rcd-maint-date {
  flex-shrink: 0;
  max-width: 120px;
  text-align: right;
  white-space: normal;
  line-height: 1.2;
  font-family: 'JetBrains Mono', 'DM Mono', monospace;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  letter-spacing: 0.2px;
}
.rcd-maint-row.is-checked .rcd-maint-date { color: var(--ocean); opacity: 0.78; }
.rcd-maint-row.is-overdue .rcd-maint-date { color: var(--amber); }

/* Target Parameters card grid */
.rcd-target-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 10px;
}
.rcd-target-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  background: var(--surface);
  transition: border-color 0.12s;
}
.rcd-target-card-label {
  font-family: 'JetBrains Mono', 'DM Mono', monospace;
  font-size: 9px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}
.rcd-target-card-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.2px;
}
.rcd-target-card.in-range { border-color: var(--ocean); }
.rcd-target-card.warn     { border-color: var(--amber); }
.rcd-target-card.danger   { border-color: var(--red); }
/* ─── My Tank — collapsible bubble cards (desktop) ──────────── */
.rcd-tank-collapsible summary {
  list-style: none;
  display: flex; align-items: baseline; justify-content: space-between;
  cursor: pointer; user-select: none;
  gap: 10px;
}
.rcd-tank-collapsible summary::-webkit-details-marker { display: none; }
.rcd-tank-collapsible[open] summary { margin-bottom: 12px; }
.rcd-tank-collapsible summary::after {
  content: '\25BE'; color: var(--text);
  font-size: 22px; font-weight: 900; line-height: 1;
  opacity: 0.85;
  transition: transform 0.15s;
  flex-shrink: 0;
}
.rcd-tank-collapsible:not([open]) summary::after { transform: rotate(-90deg); }
/* ─── /history Charts page header — grid layout ─────────────── */
.rcd-charts-header {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "title   share"
    "eyebrow pills";
  column-gap: 16px;
  row-gap: 4px;
  align-items: end;
  margin-bottom: 4px;
}
.rcd-charts-header > .rcd-page-title { grid-area: title; align-self: start; }
.rcd-charts-share                     { grid-area: share; justify-self: end; align-self: start; }
.rcd-charts-eyebrow                   { grid-area: eyebrow; align-self: end; display: flex; align-items: baseline; gap: 0; }
.rcd-charts-pills                     { grid-area: pills; justify-self: end; }
@media (max-width: 640px) {
  .rcd-charts-header {
    grid-template-areas:
      "title   share"
      "eyebrow eyebrow"
      "pills   pills";
  }
  .rcd-charts-pills {
    justify-self: stretch;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }
}

.rcd-tank-collapsible summary > strong {
  font-size: 18px; font-weight: 700; letter-spacing: 0.2px;
  color: var(--text);
}

.rcd-target-card-range {
  font-family: 'JetBrains Mono', 'DM Mono', monospace;
  font-size: 9px;
  color: var(--muted);
  margin-top: 2px;
  letter-spacing: 0.2px;
}
.rcd-target-card-value-muted { color: var(--muted); }

@media (max-width: 768px) {
  .rcd-target-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ════════════════════════════════════════════════════════════
   Demo sidebar CTA (Phase 6 of demo arch — only when is_demo)
   Lives in the sidebar nav under Subscription. Cyan gradient
   picks it out from regular sidebar items.
   ════════════════════════════════════════════════════════════ */
.rcd-sb-demo {
  background: linear-gradient(95deg, #7dd3fc 0%, #a5e8ff 50%, #99e8e6 100%) !important;
  color: #0c4a6e !important;
  font-weight: 700 !important;
  margin-top: 4px;
  box-shadow: 0 2px 6px rgba(56, 189, 248, 0.18);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.rcd-sb-demo:hover {
  transform: translateX(2px);
  box-shadow: 0 4px 10px rgba(56, 189, 248, 0.30);
  color: #0c4a6e !important;
}
.rcd-sb-demo .rcd-sb-icon { color: #0c4a6e; }
.rcd-sb-demo .rcd-sb-label { color: #0c4a6e; letter-spacing: 0.2px; }

/* ════════════════════════════════════════════════════════════
   Charts page (history.py) — added 2026-05-10 during rcd-* cleanup
   ════════════════════════════════════════════════════════════ */

/* Section title margin overrides (defined late so they win specificity ties) */
.rcd-st-flush { margin-bottom: 0; }
.rcd-st-tight { margin-bottom: 7px; }

/* Gap utility extension (32px, matches rcd-mb-8) */
.rcd-gap-8 { gap: 32px; }

/* Snap-card grid for individual parameter trends */
.rcd-snap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}

/* Mini chart canvas wrap (90px tall) */
.rcd-snap-canvas-wrap {
  position: relative;
  height: 90px;
}

/* Master chart wrap (320px tall) */
.rcd-master-chart-wrap {
  position: relative;
  height: 320px;
}
.rcd-master-chart-inner {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.rcd-master-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 6px 0 14px;
}

/* Empty/error states for chart canvases */
.rcd-chart-empty-fill {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--muted);
  font-family: 'JetBrains Mono', 'DM Mono', monospace;
  font-size: 10px;
}
.rcd-chart-empty-pad {
  color: var(--muted);
  font-family: 'JetBrains Mono', 'DM Mono', monospace;
  font-size: 10px;
  text-align: center;
  padding: 20px;
}

/* Chart modal — wider variant of rcd-modal-panel */
.rcd-chart-modal-panel {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--border-bright);
  border-radius: 12px;
  padding: 24px;
  width: 95vw;
  max-width: 700px;
}
.rcd-chart-modal-close {
  position: absolute;
  top: 10px;
  right: 14px;
  background: none;
  border: none;
  color: var(--text);
  font-size: 22px;
  cursor: pointer;
}
.rcd-chart-modal-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--cyan);
  margin-bottom: 16px;
  font-family: 'JetBrains Mono', 'DM Mono', monospace;
  letter-spacing: 1px;
}
.rcd-chart-modal-canvas-wrap {
  position: relative;
  height: 260px;
}

/* Inline svg-in-button alignment (used for share icons) */
.rcd-svg-block { display: block; }

/* Section title margin override for inline-row contexts (flush) */

/* Notes cell in tables — narrow, muted, smallest text */
.rcd-cell-notes {
  max-width: 120px;
  font-size: 10px;
}

/* Parameter-ranges table layout */
.rcd-table-scroll { overflow-x: auto; }
.rcd-table-min-700 { min-width: 700px; }
.rcd-cell-name { min-width: 100px; }
.rcd-cell-nowrap { white-space: nowrap; }
.rcd-cell-notes-w {
  max-width: 340px;
  line-height: 1.5;
}
.rcd-rec-emoji {
  font-size: 15px;
  margin-right: 6px;
}

/* ════════════════════════════════════════════════════════════
   Settings: Aquariums tab redesign — added 2026-05-10
   ════════════════════════════════════════════════════════════ */

/* Segmented tab control (replaces underline tabs on /settings) */
.rcd-seg {
  display: inline-flex;
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}
.rcd-seg-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border-radius: 999px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.12s, background 0.12s;
}
.rcd-seg-item:hover { color: var(--text); }
.rcd-seg-item-active {
  background: var(--cyan-dim);
  color: var(--ocean);
  font-weight: 600;
}
.rcd-seg-item-active:hover { color: var(--ocean); }

/* Settings page header — title + subtitle + counter on the right */
.rcd-settings-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 18px;
  gap: 16px;
}
.rcd-settings-title {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 22px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: 0;
}
.rcd-settings-sub {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  color: var(--muted);
  margin-top: 2px;
}
.rcd-settings-counter {
  font-family: 'JetBrains Mono', 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.6px;
  color: var(--muted);
  white-space: nowrap;
  padding-top: 6px;
}

/* Status banner inside the Aquariums card */
.rcd-status-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 10px;
  margin-bottom: 16px;
}
.rcd-status-banner-active {
  background: var(--cyan-dim);
  color: var(--ocean);
}
.rcd-status-banner-inactive {
  background: var(--dim);
  color: var(--text2);
}
.rcd-status-banner-icon {
  font-size: 22px;
  line-height: 1;
}
.rcd-status-banner-body { flex: 1; min-width: 0; }
.rcd-status-banner-title {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 600;
  font-size: 14px;
}
.rcd-status-banner-sub {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}

/* Editing-label small uppercase */
.rcd-editing-label {
  display: block;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 6px;
}

/* + Add new aquarium option color (on the <option>) */
.rcd-select-add-option { color: var(--ocean); font-weight: 600; }

/* Toast (top of card, dismissible w/ Undo) */
.rcd-toast {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-radius: 10px;
  background: var(--cyan-dim);
  color: var(--ocean);
  border: 0.5px solid var(--ocean);
  margin-bottom: 14px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  animation: rcdToastIn 0.18s ease-out;
}
.rcd-toast-body { flex: 1; min-width: 0; }
.rcd-toast-undo {
  background: transparent;
  border: 0.5px solid var(--ocean);
  color: var(--ocean);
  padding: 5px 12px;
  border-radius: 6px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.rcd-toast-undo:hover { background: var(--ocean); color: var(--surface); }
@keyframes rcdToastIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Modal warning icon (used by unsaved-changes confirm) */
.rcd-modal-warn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(245, 158, 11, 0.14);
  color: var(--amber);
  font-size: 22px;
  flex-shrink: 0;
}

/* Helper text under disabled actions */
.rcd-helper-text {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  color: var(--muted);
  font-style: italic;
  margin-top: 6px;
}

/* Aquariums action row (Save | Duplicate left, Delete right, top border) */
.rcd-aq-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 0.5px solid var(--border);
  padding-top: 14px;
  margin-top: 16px;
  gap: 8px;
}
.rcd-aq-actions-left { display: flex; gap: 8px; }

/* ════════════════════════════════════════════════════════════
   Settings: Tank setup tab redesign — added 2026-05-11
   ════════════════════════════════════════════════════════════ */

/* Layout helpers used by the Tank setup form */
.rcd-jc-sb { justify-content: space-between; }

/* Dimensions card */
.rcd-dim-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 600px) {
  .rcd-dim-grid { grid-template-columns: 1fr; }
}
.rcd-dim-field { display: flex; flex-direction: column; gap: 4px; }
.rcd-dim-field .rcd-label { margin-bottom: 0; }

.rcd-volume-calc {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--dim);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  color: var(--muted);
}
.rcd-volume-calc-arrow {
  font-size: 14px;
  color: var(--muted);
  font-weight: 600;
}
.rcd-volume-calc-text { flex: 1; min-width: 0; }
.rcd-volume-calc-ready {
  background: var(--cyan-dim);
  color: var(--ocean);
}
.rcd-volume-calc-ready .rcd-volume-calc-arrow { color: var(--ocean); }

.rcd-dim-override { margin-top: 14px; }

/* Water-type tiles */
.rcd-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
.rcd-tile {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 14px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  cursor: pointer;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  transition: border-color 0.12s, background 0.12s, color 0.12s, box-shadow 0.12s;
  user-select: none;
}
.rcd-tile:hover {
  border-color: var(--border-bright, var(--ocean));
  background: var(--dim);
}
.rcd-tile input[type=radio] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}
.rcd-tile-label { line-height: 1.3; }
.rcd-tile-active {
  border-color: var(--ocean);
  background: var(--cyan-dim);
  color: var(--ocean);
  box-shadow: 0 0 0 1px var(--ocean) inset;
}
.rcd-tile-active:hover { background: var(--cyan-dim); }

/* Parameter target pills */
.rcd-target-pill-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
}
.rcd-target-pill {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  padding: 10px 12px;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.rcd-target-pill-open {
  border-color: var(--ocean);
  box-shadow: 0 0 0 1px var(--ocean) inset;
  grid-column: 1 / -1;
}
.rcd-target-pill-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--text);
  text-align: left;
}
.rcd-target-pill-name {
  font-size: 13px;
  font-weight: 600;
  flex-shrink: 0;
}
.rcd-target-pill-range {
  font-family: 'JetBrains Mono', 'DM Mono', monospace;
  font-size: 12px;
  color: var(--muted);
  flex: 1;
  min-width: 0;
}
.rcd-target-pill-chev {
  font-size: 13px;
  color: var(--muted);
  opacity: 0.7;
  margin-left: 4px;
}
.rcd-target-pill:hover .rcd-target-pill-chev { opacity: 1; color: var(--ocean); }
.rcd-target-pill-open .rcd-target-pill-chev { color: var(--ocean); opacity: 1; }

.rcd-target-badge {
  font-family: 'JetBrains Mono', 'DM Mono', monospace;
  font-size: 8px;
  letter-spacing: 0.4px;
  padding: 1px 5px;
  border-radius: 4px;
  white-space: nowrap;
}
.rcd-target-badge-custom {
  color: var(--cyan);
  background: rgba(0, 200, 255, 0.10);
  border: 1px solid rgba(0, 200, 255, 0.30);
}
.rcd-target-badge-tt {
  color: var(--amber);
  background: rgba(255, 179, 71, 0.10);
  border: 1px solid rgba(255, 179, 71, 0.30);
}

.rcd-target-pill-editor {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 0.5px solid var(--border);
}
.rcd-target-pill-field { display: flex; flex-direction: column; gap: 4px; }
.rcd-target-pill-field-label {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--muted);
}
.rcd-target-pill-field .rcd-input {
  width: 90px;
  padding: 6px 10px;
  font-size: 13px;
  text-align: right;
}
.rcd-target-pill-unit {
  font-family: 'JetBrains Mono', 'DM Mono', monospace;
  font-size: 11px;
  color: var(--muted);
  padding-bottom: 8px;
}
.rcd-target-pill-reset,
.rcd-target-pill-done {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  background: transparent;
  border: 0.5px solid var(--border);
  color: var(--text);
  margin-bottom: 0;
}
.rcd-target-pill-reset:hover { border-color: var(--amber); color: var(--amber); }
.rcd-target-pill-done {
  background: var(--ocean);
  color: var(--surface);
  border-color: var(--ocean);
  margin-left: auto;
}
.rcd-target-pill-done:hover { filter: brightness(1.05); }

.rcd-target-pill-meta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 8px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.2px;
}
.rcd-target-pill-tol { color: var(--muted); }
.rcd-target-pill-ocean { color: var(--cyan); }


/* ════════════════════════════════════════════════════════════
   Settings: Roadmap tab redesign — added 2026-05-11
   ════════════════════════════════════════════════════════════ */

.rcd-roadmap-wrap { max-width: 720px; }

.rcd-roadmap-intro {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text2);
  margin-bottom: 28px;
  max-width: 560px;
}

/* Phase section */
.rcd-roadmap-phase { margin-bottom: 28px; }
.rcd-roadmap-phase:last-of-type { margin-bottom: 16px; }

.rcd-roadmap-phase-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.rcd-roadmap-phase-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--muted);
}
.rcd-roadmap-phase-dot-now {
  background: var(--cyan);
  box-shadow: 0 0 0 4px var(--cyan-dim);
}
.rcd-roadmap-phase-dot-research {
  background: var(--amber);
  box-shadow: 0 0 0 4px rgba(217,119,6,0.10);
}
[data-theme="dark"] .rcd-roadmap-phase-dot-research {
  box-shadow: 0 0 0 4px rgba(255,222,0,0.10);
}
.rcd-roadmap-phase-dot-vision {
  background: var(--muted);
  opacity: 0.7;
}
.rcd-roadmap-phase-dot-done {
  background: var(--green);
  box-shadow: 0 0 0 4px rgba(22,163,74,0.12);
}

.rcd-roadmap-phase-label {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--text2);
  white-space: nowrap;
}
.rcd-roadmap-phase-count {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--muted);
}
.rcd-roadmap-phase-rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, var(--border), transparent);
}

/* Item card */
.rcd-roadmap-item {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  padding: 18px 20px;
  margin-bottom: 10px;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
.rcd-roadmap-item:last-child { margin-bottom: 0; }
.rcd-roadmap-item:hover {
  border-color: var(--border-bright);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.06);
}
[data-theme="dark"] .rcd-roadmap-item:hover {
  box-shadow: 0 4px 14px rgba(0,0,0,0.30);
}
.rcd-roadmap-item-personal {
  border-left: 3px solid var(--ocean);
}

.rcd-roadmap-item-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--cyan);
  margin-bottom: 8px;
}
.rcd-roadmap-item-icon { font-size: 17px; line-height: 1; }
.rcd-roadmap-item-body {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.6;
  color: var(--fg);
}
.rcd-roadmap-item-sig {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
}
.rcd-roadmap-item-sig a { color: var(--cyan); }

/* Feedback footer */
.rcd-roadmap-feedback {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.rcd-roadmap-feedback-label {
  font-family: Consolas, monospace;
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.3px;
}
.rcd-roadmap-feedback-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: Consolas, monospace;
  font-size: 10px;
  color: var(--cyan);
  text-decoration: underline;
}
.rcd-roadmap-feedback-btn:hover { color: var(--ocean); }


/* ════════════════════════════════════════════════════════════
   Settings: Account tab — added 2026-05-11
   ════════════════════════════════════════════════════════════ */

.rcd-account-wrap { display: flex; flex-direction: column; }

.rcd-account-subtitle {
  font-family: Consolas, monospace;
  font-size: 11px;
  letter-spacing: 1.5px;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 12px;
}

.rcd-account-divider {
  height: 1px;
  background: var(--border);
  margin: 22px 0 20px;
}

.rcd-account-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 28px;
}
.rcd-account-info-label {
  font-family: Consolas, monospace;
  font-size: 10px;
  letter-spacing: 1.5px;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.rcd-account-info-val {
  font-size: 15px;
  color: var(--text);
  word-break: break-all;
}

.rcd-account-pw-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px 18px;
}
.rcd-account-pw-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 18px;
}

.rcd-account-pref-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.rcd-account-theme-pick {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 3px;
  background: var(--surface);
}
.rcd-account-theme-btn {
  background: none;
  border: none;
  padding: 8px 18px;
  border-radius: 7px;
  font-family: Consolas, monospace;
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.rcd-account-theme-btn:hover { color: var(--text); }
.rcd-account-theme-btn-active {
  background: var(--cyan-dim);
  color: var(--cyan);
}

.rcd-account-export-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 24px;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 18px;
  background: var(--surface);
  margin-bottom: 16px;
}
.rcd-account-export-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0;
  font-family: Consolas, monospace;
  font-size: 12px;
}
.rcd-account-export-k { color: var(--muted); }
.rcd-account-export-v { color: var(--text); font-weight: 500; }
.rcd-account-export-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.rcd-account-export-size {
  font-family: 'BebasNeue', 'Impact', sans-serif;
  font-size: 26px;
  color: var(--cyan);
  line-height: 1;
  margin-bottom: 2px;
}

.rcd-account-danger { border-color: rgba(239, 83, 80, 0.30); }
.rcd-account-danger-title { color: var(--red); }
.rcd-account-danger-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
}
.rcd-account-danger-row:last-child { border-bottom: none; padding-bottom: 4px; }
.rcd-account-danger-row:first-of-type { padding-top: 4px; }
.rcd-account-danger-row-title {
  font-size: 14px;
  color: var(--text);
  font-weight: 500;
  margin-bottom: 4px;
}

@media (max-width: 720px) {
  .rcd-account-info-grid,
  .rcd-account-pw-grid { grid-template-columns: 1fr; }
  .rcd-account-pw-foot,
  .rcd-account-pref-row,
  .rcd-account-export-foot,
  .rcd-account-danger-row { flex-direction: column; align-items: stretch; }
}


/* ════════════════════════════════════════════════════════════
   END
   ════════════════════════════════════════════════════════════ */