/* ---------------------------------------------------------------------
   Design tokens — see CLAUDE.md / design brief. Keep colors here only;
   the ring, teal, purple and coral each carry one meaning and only one.

   Light values live on bare :root. Dark mode is a token swap, not an
   inversion: solid-fill tokens used with white text on top (--teal,
   --purple, --coral-strong) stay close to their light values — mid-tone
   saturated colors already read as vibrant against a dark surround, and
   drastically brightening them would break white-text contrast on the
   buttons/badges that use them. The "text/border on a tinted pastel
   surface" tokens (--teal-dark, --coral, --success, --warning) are the
   ones that actually need to invert to a BRIGHT variant in dark mode,
   since their light-mode values are dark colors chosen for a pale bg and
   would be unreadable on a dark one. --coral carries both roles in light
   mode (pastel text AND the solid danger-button fill); dark mode splits
   that into --coral (bright, text/border role) and --coral-strong (stays
   dark, solid-fill-with-white-text role) so neither job is compromised.
--------------------------------------------------------------------- */
:root {
  --bg: #F1EFE8;
  --card: #FFFFFF;
  --card-border: #E8E4D9;
  --card-border-hover: #D8D3C4;

  --teal: #1D9E75;
  --teal-dark: #17835F;
  --teal-tint: #E3F3EC;
  --teal-tint-hover: #D8EDE3;
  --teal-glow: rgba(29, 158, 117, 0.28);

  --purple: #7F77DD;
  --purple-tint: #ECEBFA;

  --coral: #993C1D;
  --coral-bg: #FAECE7;
  --coral-bg-hover: #F5DCD1;
  --coral-strong: #993C1D;
  --coral-strong-hover: #7D3116;

  --success: #0F6E56;
  --success-bg: #E3F3EC;
  --success-strong: #0F6E56;

  --warning: #854F0B;
  --warning-bg: #FBF0DD;
  --warning-strong: #854F0B;

  --text-primary: #2C2C2A;
  --text-secondary: #5F5E5A;
  --text-muted: #888780;
  --text-on-accent: #FFFFFF;

  --ring-track: #E8E4D9;

  --overlay-scrim: rgba(44, 44, 42, 0.45);
  --photo-scrim: rgba(28, 26, 22, 0.65);
  --knob-color: #FFFFFF;
  --knob-shadow: 0 1px 2px rgba(44, 44, 42, 0.25);

  --radius: 12px;
  --radius-lg: 20px;
  --shadow-card: 0 1px 2px rgba(44, 44, 42, 0.04), 0 4px 16px rgba(44, 44, 42, 0.06);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #171613;
    --card: #221F1B;
    --card-border: #3A362F;
    --card-border-hover: #4A453C;

    --teal-dark: #6BE6BE;
    --teal-tint: #15332B;
    --teal-tint-hover: #1E4A3E;
    --teal-glow: rgba(29, 158, 117, 0.4);

    --purple-tint: #27234A;

    --coral: #FF9269;
    --coral-bg: #3D2317;
    --coral-bg-hover: #4F2C1D;
    --coral-strong: #B8451F;
    --coral-strong-hover: #D65530;

    --success: #4FE3B0;
    --success-bg: #15352C;

    --warning: #F5B44E;
    --warning-bg: #3B2C10;

    --text-primary: #EDE9E1;
    --text-secondary: #B6B1A5;
    --text-muted: #8C8874;

    --ring-track: #3A362F;

    --overlay-scrim: rgba(0, 0, 0, 0.6);
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 20px rgba(0, 0, 0, 0.35);
  }
}

:root[data-theme="dark"] {
  --bg: #171613;
  --card: #221F1B;
  --card-border: #3A362F;
  --card-border-hover: #4A453C;

  --teal-dark: #6BE6BE;
  --teal-tint: #15332B;
  --teal-tint-hover: #1E4A3E;
  --teal-glow: rgba(29, 158, 117, 0.4);

  --purple-tint: #27234A;

  --coral: #FF9269;
  --coral-bg: #3D2317;
  --coral-bg-hover: #4F2C1D;
  --coral-strong: #B8451F;
  --coral-strong-hover: #D65530;

  --success: #4FE3B0;
  --success-bg: #15352C;

  --warning: #F5B44E;
  --warning-bg: #3B2C10;

  --text-primary: #EDE9E1;
  --text-secondary: #B6B1A5;
  --text-muted: #8C8874;

  --ring-track: #3A362F;

  --overlay-scrim: rgba(0, 0, 0, 0.6);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 20px rgba(0, 0, 0, 0.35);
}

html, body { transition: background-color 0.2s ease, color 0.2s ease; }
.card { transition: background-color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; }

* { box-sizing: border-box; }

.hidden { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text-primary);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

button {
  font-family: inherit;
}

.app {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  max-width: 560px;
  margin: 0 auto;
  padding-bottom: env(safe-area-inset-bottom, 0);
}

/* ---------- Top bar ---------- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 8px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
}

.brand-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--teal);
  flex-shrink: 0;
}

.brand-name {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Wraps Clerk's mounted UserButton — sizing/clipping only, since Clerk's
   own component renders its own avatar image/initials and background. */
.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
/* ---------- Content ---------- */
.content {
  flex: 1;
  padding: 8px 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

/* ---------- Hero / ring ---------- */
.hero {
  padding: 24px 20px 20px;
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.ring-wrap {
  position: relative;
  width: 176px;
  height: 176px;
}

.ring {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.ring-track {
  fill: none;
  stroke: var(--ring-track);
  stroke-width: 12;
}

.ring-progress {
  fill: none;
  stroke: var(--teal);
  stroke-width: 12;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.ring-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.ring-value {
  font-size: 44px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

.ring-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.hero-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.level-badge {
  background: var(--purple);
  color: var(--text-on-accent);
  font-size: 13px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 999px;
  white-space: nowrap;
}

.streak {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
}
.streak .flame { font-size: 14px; line-height: 1; }
.streak b { color: var(--text-primary); }

.xp-bar-wrap {
  width: 100%;
}

.xp-bar {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: var(--purple-tint);
  overflow: hidden;
}

.xp-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--purple);
  width: 0%;
  transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.xp-caption {
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
}

/* ---------- Stats row ---------- */
.stats-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.stat-card {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stat-label {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 600;
}

.stat-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
}

.stat-link {
  align-self: flex-start;
  font-size: 11px;
  font-weight: 700;
  color: var(--teal-dark);
  background: none;
  border: none;
  padding: 0;
  margin-top: 2px;
  cursor: pointer;
}
.stat-link:hover { text-decoration: underline; }

/* ---------- Filter chips ---------- */
.filters {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}
.filters::-webkit-scrollbar { display: none; }

.chip {
  flex-shrink: 0;
  border: 1px solid var(--card-border);
  background: var(--card);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.chip:hover { border-color: var(--card-border-hover); }

.chip.active {
  background: var(--teal);
  border-color: var(--teal);
  color: var(--text-on-accent);
}

.chip.chip-add {
  color: var(--teal-dark);
  font-weight: 700;
}

/* ---------- Trade list toolbar (select mode) ---------- */
.list-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

.list-toolbar-count {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-right: auto;
}

.select-toggle-btn {
  font-size: 13px;
  font-weight: 700;
  color: var(--teal-dark);
  background: none;
  border: none;
  padding: 4px 2px;
  cursor: pointer;
}
.select-toggle-btn:hover { text-decoration: underline; }

/* ---------- Trade list ---------- */
.trade-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.trade-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  cursor: pointer;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.trade-row:active {
  transform: scale(0.99);
}

.trade-row.selected {
  box-shadow: var(--shadow-card), inset 0 0 0 2px var(--teal);
}

.trade-checkbox {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--card-border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--text-on-accent);
  transition: background 0.15s ease, border-color 0.15s ease;
}
.trade-checkbox svg { width: 12px; height: 12px; }
.trade-checkbox.checked {
  background: var(--teal);
  border-color: var(--teal);
}

.trade-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.trade-icon svg { width: 18px; height: 18px; }

.trade-icon.success { background: var(--success-bg); color: var(--success); }
.trade-icon.warning { background: var(--warning-bg); color: var(--warning); }
.trade-icon.offplan { background: var(--coral-bg); color: var(--coral); }
.trade-icon.neutral { background: var(--bg); color: var(--text-muted); }

.trade-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.trade-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.trade-title .dir {
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: capitalize;
}

.trade-sub {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 6px;
}

.trade-sub .rules-ok { color: var(--success); font-weight: 700; }
.trade-sub .rules-bad { color: var(--warning); font-weight: 700; }
.trade-sub .rules-offplan { color: var(--coral); font-weight: 700; }
.trade-sub .rules-origin-tag { color: var(--text-muted); font-weight: 700; }

.trade-r {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
}

.trade-r-primary {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-primary);
  white-space: nowrap;
}

.trade-r-usd {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}

/* ---------- Empty states ---------- */
.empty-state {
  padding: 40px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--text-secondary);
}

.empty-state .empty-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--teal-tint);
  color: var(--teal-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}
.empty-state .empty-icon svg { width: 22px; height: 22px; }

.empty-state h3 {
  margin: 0;
  font-size: 15px;
  color: var(--text-primary);
}

.empty-state p {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
  max-width: 280px;
}

/* ---------- CTA ---------- */
.cta-wrap {
  position: sticky;
  bottom: 0;
  padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0));
  background: linear-gradient(to top, var(--bg) 60%, transparent);
}

.cta-button {
  width: 100%;
  background: var(--teal);
  color: var(--text-on-accent);
  border: none;
  border-radius: var(--radius);
  padding: 15px 18px;
  font-size: 15px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: 0 4px 14px var(--teal-glow);
  transition: background 0.15s ease, transform 0.15s ease;
}

.cta-button svg { width: 18px; height: 18px; }

.cta-button:hover { background: var(--teal-dark); }
.cta-button:active { transform: scale(0.98); }
.cta-button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}
.cta-button:disabled:hover { background: var(--teal); }

/* ---------- Log trade screen ---------- */
.icon-button {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--teal-tint);
  color: var(--teal-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s ease;
}
.icon-button svg { width: 18px; height: 18px; }
.icon-button:hover { background: var(--teal-tint-hover); }

.topbar-title {
  flex: 1;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}

.topbar-spacer {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}

.field-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 18px;
}

.field-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}

.field-optional {
  font-weight: 500;
  color: var(--text-muted);
}

.text-input {
  width: 100%;
  font-family: inherit;
  font-size: 14px;
  padding: 12px 14px;
  border-radius: var(--radius);
  border: 1.5px solid var(--card-border);
  background: var(--card);
  color: var(--text-primary);
  outline: none;
  transition: border-color 0.15s ease;
}
.text-input:focus { border-color: var(--teal); }

.textarea-input {
  resize: vertical;
  min-height: 96px;
  line-height: 1.5;
  font-family: inherit;
}

.dropzone {
  position: relative;
  border-radius: var(--radius-lg);
  border: 2px dashed var(--card-border);
  background: var(--card);
  min-height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.dropzone.dragging {
  border-color: var(--teal);
  background: var(--teal-tint);
}

.dropzone-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 32px 20px;
  color: var(--text-secondary);
  cursor: pointer;
  width: 100%;
}

.dropzone-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--teal-tint);
  color: var(--teal-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}
.dropzone-icon svg { width: 20px; height: 20px; }

.dropzone-title { font-size: 14px; font-weight: 700; color: var(--text-primary); margin: 0; }
.dropzone-hint { font-size: 12px; color: var(--text-muted); margin: 0; }

.dropzone-preview {
  position: relative;
  width: 100%;
}

.dropzone-preview img {
  display: block;
  width: 100%;
  max-height: 320px;
  object-fit: contain;
  background: var(--bg);
}

.dropzone-remove {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--photo-scrim);
  color: var(--text-on-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.dropzone-remove svg { width: 16px; height: 16px; }

.strategy-picker {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.strategy-option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  text-align: left;
  padding: 12px 14px;
  border-radius: var(--radius);
  border: 1.5px solid var(--card-border);
  background: var(--card);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.strategy-option-name { font-size: 14px; font-weight: 700; color: var(--text-primary); }
.strategy-option-hint { font-size: 12px; color: var(--text-muted); }

.strategy-option.active {
  border-color: var(--teal);
  background: var(--teal-tint);
}
.strategy-option.active .strategy-option-name { color: var(--teal-dark); }

.strategy-option.offplan-option.active {
  border-color: var(--coral);
  background: var(--coral-bg);
}
.strategy-option.offplan-option.active .strategy-option-name { color: var(--coral); }

.error-banner {
  background: var(--coral-bg);
  color: var(--coral);
  font-size: 13px;
  font-weight: 600;
  padding: 12px 14px;
  border-radius: var(--radius);
  margin-bottom: 14px;
}

.secondary-button {
  width: 100%;
  background: var(--card);
  color: var(--text-primary);
  border: 1.5px solid var(--card-border);
  border-radius: var(--radius);
  padding: 14px 18px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.secondary-button:hover { border-color: var(--card-border-hover); }

/* ---------- Auth gate (Clerk sign-in/up mount) ---------- */
.auth-mount {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 0;
}

/* ---------- Loading state ---------- */
.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 4px;
  padding: 80px 24px;
}

.spinner {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 3px solid var(--teal-tint);
  border-top-color: var(--teal);
  animation: spin 0.8s linear infinite;
  margin-bottom: 12px;
}

@keyframes spin { to { transform: rotate(360deg); } }

.loading-title { font-size: 15px; font-weight: 700; color: var(--text-primary); margin: 0; }
.loading-hint { font-size: 13px; color: var(--text-muted); margin: 0; max-width: 260px; }

/* ---------- Result state ---------- */
.result-state {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.result-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.result-title { font-size: 18px; font-weight: 800; color: var(--text-primary); }
.result-title .dir {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: capitalize;
  margin-left: 6px;
}
.result-sub { font-size: 13px; color: var(--text-muted); margin-top: 2px; }

.result-figures {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.result-r { font-size: 30px; font-weight: 800; color: var(--text-primary); }
.result-usd { font-size: 15px; font-weight: 700; color: var(--text-muted); }

.offplan-banner {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: var(--coral-bg);
  color: var(--coral);
  padding: 14px;
  border-radius: var(--radius);
}
.offplan-banner-icon { flex-shrink: 0; width: 20px; height: 20px; }
.offplan-banner p { margin: 0; font-size: 13px; font-weight: 600; line-height: 1.4; }

.fact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 12px;
  padding: 14px 16px;
  background: var(--card);
  border-radius: var(--radius);
  border: 1px solid var(--card-border);
}

.fact-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.fact-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.fact-value {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}

.text-link {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--teal-dark);
  background: none;
  border: none;
  padding: 6px 0;
  cursor: pointer;
}
.text-link:hover { text-decoration: underline; }

.rule-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rule-tile {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--radius);
}
.rule-tile.pass { background: var(--success-bg); }
.rule-tile.fail { background: var(--warning-bg); }

.rule-tile-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--text-on-accent);
  margin-top: 1px;
}
.rule-tile.pass .rule-tile-icon { background: var(--success-strong); }
.rule-tile.fail .rule-tile-icon { background: var(--warning-strong); }
.rule-tile-icon svg { width: 12px; height: 12px; }

.rule-tile-text { font-size: 13px; font-weight: 600; color: var(--text-primary); line-height: 1.4; }

.xp-earned-badge {
  align-self: flex-start;
  background: var(--purple);
  color: var(--text-on-accent);
  font-size: 13px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 999px;
}

.offplan-origin-tag {
  align-self: flex-start;
  background: var(--bg);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--card-border);
}

.coach-note { padding: 14px 16px; }
.coach-note-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}
.coach-note p { margin: 0; font-size: 13px; color: var(--text-primary); line-height: 1.5; }

.suggested-rule-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
}
.suggested-rule-item {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  background: var(--bg);
  border-radius: var(--radius);
  padding: 8px 12px;
}

#setupSuggestionCard .cta-button { margin-top: 12px; }

.result-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}

/* ---------- Trade detail screen ---------- */
.detail-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.section-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}

.section-hint {
  font-size: 12px;
  color: var(--text-muted);
  margin: 4px 0 4px;
}

.field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 12px;
  margin-top: 10px;
}

.field-grid .field-block { margin-bottom: 0; }
.field-grid .field-block--full { grid-column: 1 / -1; }

select.text-input {
  appearance: none;
  -webkit-appearance: none;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%235F5E5A" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>');
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  padding-right: 36px;
}

.readonly-value {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-secondary);
  padding: 12px 14px;
  border-radius: var(--radius);
  border: 1.5px solid transparent;
  background: var(--bg);
}

.save-confirm {
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--success);
  padding: 4px 0 0;
}

.context-readout {
  padding: 14px 16px;
}
.context-readout .coach-note-label { margin-bottom: 6px; }
.context-readout p {
  margin: 0;
  font-size: 13px;
  color: var(--text-primary);
  line-height: 1.5;
  white-space: pre-wrap;
}

/* ---------- Strategy screen ---------- */
.strategy-form {
  display: flex;
  flex-direction: column;
}

.segmented {
  display: flex;
  gap: 8px;
}

.segment-btn {
  flex: 1;
  text-align: center;
  padding: 10px 12px;
  border-radius: var(--radius);
  border: 1.5px solid var(--card-border);
  background: var(--card);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.segment-btn:hover { border-color: var(--card-border-hover); }
.segment-btn.active {
  border-color: var(--teal);
  background: var(--teal-tint);
  color: var(--teal-dark);
}

.rule-examples {
  background: var(--teal-tint);
  color: var(--teal-dark);
  font-size: 12px;
  line-height: 1.5;
  padding: 10px 12px;
  border-radius: var(--radius);
  margin-bottom: 10px;
}

.rule-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}

.rule-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.rule-row .rule-input { flex: 1; }

.rule-remove-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--coral-bg);
  color: var(--coral);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s ease;
}
.rule-remove-btn svg { width: 14px; height: 14px; }
.rule-remove-btn:hover { background: var(--coral-bg-hover); }

.add-rule-btn {
  width: 100%;
  background: var(--card);
  color: var(--teal-dark);
  border: 1.5px dashed var(--card-border);
  border-radius: var(--radius);
  padding: 12px 14px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.add-rule-btn:hover { border-color: var(--teal); background: var(--teal-tint); }

/* ---------- Strategy picker: edit + add-new affordances ---------- */
.strategy-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.strategy-row .strategy-option { flex: 1; }

.strategy-edit-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--bg);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s ease, color 0.15s ease;
}
.strategy-edit-btn svg { width: 15px; height: 15px; }
.strategy-edit-btn:hover { background: var(--teal-tint); color: var(--teal-dark); }

.strategy-add-btn {
  width: 100%;
  text-align: center;
  background: var(--card);
  color: var(--teal-dark);
  border: 1.5px dashed var(--card-border);
  border-radius: var(--radius);
  padding: 12px 14px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.strategy-add-btn:hover { border-color: var(--teal); background: var(--teal-tint); }

/* ---------- Manage-strategies chip + view ---------- */
.chip-manage-btn { flex-shrink: 0; }

.manage-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.manage-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  transition: opacity 0.15s ease;
}
.manage-row.inactive { opacity: 0.55; }

.manage-row-main { flex: 1; min-width: 0; }
.manage-row-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.manage-row-hint { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

.toggle-switch {
  width: 42px;
  height: 24px;
  border-radius: 999px;
  border: none;
  background: var(--card-border);
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  transition: background 0.15s ease;
}
.toggle-switch.on { background: var(--teal); }

.toggle-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--knob-color);
  box-shadow: var(--knob-shadow);
  transition: left 0.15s ease;
}
.toggle-switch.on .toggle-knob { left: 21px; }

/* ---------- Danger / delete affordances ---------- */
.icon-button-danger { background: var(--coral-bg); color: var(--coral); }
.icon-button-danger:hover { background: var(--coral-bg-hover); }

.danger-link {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--coral);
  background: none;
  border: none;
  padding: 14px 0 0;
  cursor: pointer;
}
.danger-link:hover { text-decoration: underline; }

.danger-button {
  width: 100%;
  background: var(--coral-strong);
  color: var(--text-on-accent);
  border: none;
  border-radius: var(--radius);
  padding: 14px 18px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
.danger-button:hover { background: var(--coral-strong-hover); }
.danger-button:active { transform: scale(0.98); }
.danger-button:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---------- Confirm modal ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--overlay-scrim);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 16px;
  z-index: 100;
}

.modal-card {
  width: 100%;
  max-width: 400px;
  padding: 22px 20px 20px;
  border-radius: var(--radius-lg);
}

.modal-title {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 800;
  color: var(--text-primary);
}

.modal-message {
  margin: 0;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.modal-actions {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}
.modal-actions .secondary-button,
.modal-actions .danger-button {
  width: auto;
  flex: 1;
}

@media (min-width: 480px) {
  .modal-overlay { align-items: center; }
}

/* ---------- Example-strategy badge ---------- */
.example-badge {
  display: inline-block;
  background: var(--warning-bg);
  color: var(--warning);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

.example-badge-inline {
  display: inline-block;
  background: var(--warning-bg);
  color: var(--warning);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 2px 7px;
  border-radius: 999px;
  margin-left: 6px;
  vertical-align: middle;
}

/* ---------- Read-only strategy-detail screen ---------- */
.strategy-detail-header {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.strategy-detail-name {
  font-size: 20px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.strategy-detail-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.direction-badge {
  display: inline-block;
  background: var(--bg);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--card-border);
}

.rule-tile.neutral { background: var(--bg); }

.manage-row-main { cursor: pointer; }

/* ---------- Responsive polish ---------- */
@media (min-width: 480px) {
  .ring-wrap { width: 192px; height: 192px; }
  .ring-value { font-size: 48px; }
}

@media (min-width: 640px) {
  .app { padding-top: 12px; }
  .content { padding: 12px 20px 32px; }
}