/* ========================================================================
   Tilorah Trade Journal — Retro theme
   Dark = neutral dark grey. Light = aged parchment / sepia.
   Win = retro teal, Lose = dusty rose. No orange.
   Last updated: 2026-06-18
   ======================================================================== */

:root {
  --ink: #e0ddd6;
  --muted: #8a8578;
  --line: #3a3630;
  --surface: #2a2825;
  --soft: #2a2825;
  --screen: #1a1917;
  --screen-2: #222120;
  --green: #5cb8a0;
  --lime: #5cb8a0;
  --red: #c47a8a;
  --blue: #8a8578;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.12);

  --font-display: var(--font-body);
  --font-body: 'Inter', 'IBM Plex Sans Thai', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

* {
  box-sizing: border-box;
  /* Disable double-tap-to-zoom everywhere (empty space, panels, calendar cells) —
     it was only on <button>, so double-tapping anywhere else zoomed the iPad app
     in/out. `manipulation` still allows pinch-zoom + scrolling, and any element
     that sets its own touch-action (higher specificity than `*`) overrides this. */
  touch-action: manipulation;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  color: var(--ink);
  background: #1a1917;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button {
  touch-action: manipulation;
}

input,
textarea,
select {
  font-size: 16px;
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--ink);
  background: var(--soft);
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 600;
  text-transform: uppercase;
  box-shadow: none;
  transition: background 220ms cubic-bezier(0.32, 0.72, 0, 1);
}

button:hover {
  background: #2e2e2e;
}

button.primary {
  color: #121212;
  background: var(--lime);
}

button.primary:hover {
  background: #82ceb6;
}

input,
textarea,
select {
  width: 100%;
  min-height: 44px;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--ink);
  background: var(--screen);
  outline: none;
  font-family: var(--font-body);
  transition: border-color 220ms cubic-bezier(0.32, 0.72, 0, 1);
}

/* Checkboxes and radios must not inherit the full-width text-field box styling
   above (width:100% / min-height:44px / padding / background). Without this
   reset the onboarding "load sample trades" checkbox rendered as a full-width
   white box that pushed its label outside the card. The Win/Lose result radios
   are unaffected — they're opacity:0/absolute, styled via their sibling span. */
input[type="checkbox"],
input[type="radio"] {
  width: auto;
  min-height: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
  accent-color: var(--green);
}

textarea {
  resize: vertical;
}

input::placeholder,
textarea::placeholder {
  color: #777;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(92, 184, 160, 0.16);
}

/* The Time field is <input type=datetime-local>; with the generic input
   background (var(--screen) = page cream in light mode) it blends into the page
   and looks washed-out next to the crisp BUY/SELL buttons — most visibly on iOS,
   which paints its native pill. Give it the elevated surface the buttons use
   (var(--soft)) so it reads as a clean, intentional field. The body.light-
   qualified selector beats `body.light input { background: var(--screen) }`. */
input[type="datetime-local"],
body.light input[type="datetime-local"] {
  background: var(--soft);
  text-align: center;
  font-weight: 600;
  /* Contain the control inside the card. datetime-local has an intrinsic min-width
     on iOS WKWebView that overflowed the card's right edge on narrow phones (6.3"
     iPhone 17 Pro; the wider Pro Max masked it). width:100% + border-box pins it to
     the field width on every platform. NOTE: this has regressed repeatedly because
     prior fixes (e.g. 88d119c) were dropped in cross-machine rebases — keep it ON
     the core selector, not a separate patch block, so it survives history churn. */
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
@supports (-webkit-touch-callout: none) {
  /* iOS only: remove the native pill chrome (its intrinsic width is what overflows)
     and let the centered value fill the field; desktop/Android keep native chrome. */
  input[type="datetime-local"] {
    -webkit-appearance: none;
    appearance: none;
  }
  input[type="datetime-local"]::-webkit-date-and-time-value {
    margin: 0;
    width: 100%;
    text-align: center;
  }
}

@supports (-webkit-touch-callout: none) {
  /* iOS only: drop the native pill chrome (its intrinsic width is what
     overflows) and let the centered value fill the field. */
  input[type="datetime-local"] {
    -webkit-appearance: none;
    appearance: none;
  }
  input[type="datetime-local"]::-webkit-date-and-time-value {
    margin: 0;
    width: 100%;
    text-align: center;
  }
}

h1,
h2,
h3,
p {
  overflow-wrap: anywhere;
  letter-spacing: 0;
  margin: 0;
}

h1 {
  font-family: var(--font-display);
  font-size: clamp(24px, 3.6vw, 40px);
  font-weight: 500;
  letter-spacing: -0.015em;
  font-variation-settings: 'opsz' 96;
  text-transform: none;
}

h2 {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.8vw, 30px);
  font-weight: 500;
  letter-spacing: -0.01em;
  font-variation-settings: 'opsz' 48;
}

h3 {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 600;
}

.app {
  width: min(980px, calc(100% - 20px));
  margin: 0 auto;
  padding: 18px 0 40px;
  /* iOS viewport-fit=cover draws content under the status bar / Dynamic Island.
     Without this the topbar (title + stats) renders behind the clock. */
  padding-top: calc(18px + env(safe-area-inset-top, 0px));
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  padding-bottom: max(40px, env(safe-area-inset-bottom));
}

.topbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--soft);
  box-shadow: var(--shadow);
}

.topbar-copy {
  display: grid;
  gap: 4px;
}

.eyebrow {
  margin: 0;
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.status-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  width: min(100%, 540px);
  flex: 1 1 auto;
}

.status-strip div,
.panel {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--soft);
  box-shadow: var(--shadow);
}

.status-strip div {
  min-height: 82px;
  padding: 14px;
  background: var(--screen);
  overflow: hidden;
}

.status-strip strong.is-negative { color: var(--red); }
.status-strip strong.is-positive { color: var(--green); }
.status-strip strong {
  display: block;
  color: var(--green);
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.status-strip span {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 13px;
}

.autosave {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 34px;
  margin: 0 0 14px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  background: var(--soft);
  font-size: 13px;
  font-weight: 600;
}

.backup-reminder {
  color: var(--muted);
  font-weight: 400;
  font-size: 12px;
}

.dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--green);
}

.workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  width: min(920px, 100%);
  margin: 0 auto;
}

.panel {
  padding: 16px;
}

.list-panel {
  display: grid;
  gap: 14px;
}

.phone-shell {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
}

.phone-status,
.phone-top,
.bottom-dock {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.phone-status {
  padding: 2px 0 8px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
}

.phone-status-icons {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
}

.phone-icon,
.battery {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
}

.battery {
  min-width: 34px;
  padding: 0 6px;
  border: 1px solid rgba(224, 221, 214, 0.22);
  border-radius: 999px;
  font-size: 12px;
}

.icon-button {
  width: 58px;
  min-height: 58px;
  padding: 0;
  border-radius: 999px;
  color: var(--ink);
  background: var(--soft);
  text-transform: none;
}

.icon-button:hover {
  background: #2e2e2e;
}

.mode-tabs {
  display: inline-flex;
  flex: 1 1 auto;
  align-items: center;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--screen);
}

.mode-tab {
  flex: 1 1 0;
  min-height: 42px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  color: var(--ink);
  background: transparent;
  box-shadow: none;
  text-transform: none;
  font-weight: 500;
}

.mode-tab.active {
  background: var(--soft);
}

.mode-tab:hover {
  background: #2e2e2e;
}

.field {
  display: grid;
  gap: 8px;
  margin-bottom: 16px;
}

.field.two {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
}

label {
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.quick-pairs,
.actions,
.list-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.quick-pairs button {
  min-height: 34px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
}

.result-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.result-toggle label {
  position: relative;
  min-width: 0;
}

.result-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.result-toggle span {
  display: grid;
  place-items: center;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--muted);
  background: var(--screen);
}

.result-toggle input:checked + span {
  color: #faf7ec;
  border-color: var(--green);
  background: var(--green);
}

.list-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 12px;
}

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

.list-actions input[type="search"] {
  width: 160px;
}

.list-actions select {
  width: 100px;
}

.calendar-panel {
  display: grid;
  gap: 14px;
}

.calendar-head,
.calendar-detail-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
}

.calendar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.calendar-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.calendar-summary .summary-chip {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--screen);
}

.calendar-summary strong {
  display: block;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.calendar-summary span {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: 12px;
}

.calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.calendar-weekdays span {
  padding: 0 4px;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}

.calendar-day {
  appearance: none;
  text-align: left;
  text-transform: none;
  display: grid;
  gap: 6px;
  min-height: 120px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--screen-2);
  cursor: pointer;
}

.calendar-day.gain {
  background: #1a302c;
}

.calendar-day.loss {
  background: #30202a;
}

.calendar-day.flat {
  background: var(--screen-2);
}

.calendar-day.blank {
  cursor: default;
  opacity: 0.35;
  background: transparent;
}

.calendar-day.selected {
  border-color: var(--ink);
  box-shadow: 0 0 0 2px rgba(224, 221, 214, 0.14);
}

/* Today: green ring on the cell + green day number. Renders well at any
   size unlike the previous 28x28 white circle which broke layout on
   mobile cells (~50px squares). When the user also taps today, .selected
   stacks on top — green border stays, brighter shadow appears. */
.calendar-day.today {
  border-color: var(--green);
  box-shadow: 0 0 0 1px var(--green) inset;
}

.calendar-day.today .calendar-day-num {
  color: var(--green);
  font-weight: 700;
}

.calendar-day.today.selected {
  box-shadow: 0 0 0 1px var(--green) inset, 0 0 0 2px rgba(95, 219, 177, 0.25);
}

.calendar-day-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.calendar-day-num {
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 700;
}

.calendar-day-count {
  color: var(--muted);
  font-size: 12px;
}

.calendar-day-net {
  color: var(--green);
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.calendar-day-net.loss {
  color: var(--red);
}

.calendar-day-net.flat {
  color: var(--muted);
}

.calendar-day-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.calendar-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 6px;
  border-radius: 999px;
  color: #121212;
  background: var(--green);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
}

.calendar-badge.loss {
  background: var(--red);
}

.calendar-badge.muted {
  color: var(--ink);
  background: var(--muted);
}

.calendar-detail {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--soft);
}

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

.calendar-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 8px;
  border-radius: 999px;
  color: #121212;
  background: var(--lime);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
}

.calendar-chip.loss {
  background: var(--red);
  color: #faf7ec;
}

.calendar-chip.muted {
  background: var(--muted);
}

.calendar-trades {
  display: grid;
  gap: 8px;
}

.calendar-trade {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--screen);
}

.calendar-trade strong {
  display: block;
  color: var(--ink);
  font-family: var(--font-mono);
}

.calendar-trade span {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.calendar-trade-profit {
  color: var(--green);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.calendar-trade-profit.loss {
  color: var(--red);
}

.calendar-trade-action-btn {
  background: var(--soft);
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 11px;
  font-family: var(--font-body);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.calendar-trade-action-btn:active {
  background: var(--line);
  color: var(--ink);
}
.calendar-trade-action-btn.delete {
  color: var(--red);
  border-color: color-mix(in srgb, var(--red) 30%, transparent);
}
.calendar-trade-action-btn.delete:active {
  background: color-mix(in srgb, var(--red) 15%, transparent);
}

.import-box {
  display: grid;
  gap: 12px;
  margin-bottom: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--soft);
}

.import-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.import-controls select {
  width: auto;
  min-width: 140px;
}

.import-controls button,
.import-controls .file-button {
  width: auto;
}

.import-box p {
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
}


.file-button {
  display: inline-grid;
  place-items: center;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--ink);
  background: var(--soft);
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 600;
}

.file-button input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.import-status {
  grid-column: 1 / -1;
  color: var(--muted);
}

.import-lock[hidden],
.import-controls[hidden],
#importSubtitle[hidden],
.import-status[hidden] {
  display: none !important;
}

.import-box[data-access="locked"] {
  gap: 10px;
  border-color: color-mix(in srgb, var(--green) 38%, var(--line));
  background: color-mix(in srgb, var(--green) 5%, var(--soft));
}

.import-box[data-access="locked"] .import-heading {
  display: none;
}

.import-lock {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.import-lock-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.import-lock-copy strong {
  color: var(--ink);
  font-size: 14px;
  font-weight: 650;
}

.import-lock-copy span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

#importViewPlans {
  width: auto;
  min-width: 104px;
  min-height: 44px;
  flex: 0 0 auto;
  color: #fff;
  background: var(--green);
}

.chart {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  height: 50px;
  margin-bottom: 14px;
}

.bar {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--screen);
}

.bar::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--value, 0%);
  transition: width 180ms ease;
}

.bar.win::before {
  background: rgba(90, 156, 131, 0.28);
}

.bar.lose::before {
  background: rgba(205, 119, 102, 0.28);
}

.bar span {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  height: 100%;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
}

.analysis-box {
  display: grid;
  gap: 12px;
  margin-bottom: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--screen);
}

.analysis-head,
.equity-head,
.image-import-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
}

.analysis-box h3 {
  margin-top: 0;
  color: var(--ink);
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.metric {
  min-height: 78px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--soft);
}

.metric strong {
  display: block;
  color: var(--green);
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.metric span {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: 12px;
}

.equity-box {
  display: grid;
  gap: 8px;
}

.equity-head strong,
.image-import-head strong {
  color: var(--ink);
}

.equity-head span,
.analysis-note,
.image-import-head span {
  color: var(--muted);
  font-size: 13px;
}

#equityChart {
  width: 100%;
  min-height: 160px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--screen);
}

.analysis-images {
  display: grid;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.image-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.image-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--soft);
}

.image-card img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.image-card footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px;
  color: var(--muted);
  font-size: 12px;
}

.image-card button {
  min-height: 30px;
  padding: 4px 8px;
  font-size: 11px;
}

.history-feed {
  display: grid;
  gap: 10px;
}

.trade-card {
  position: relative;
  display: grid;
  gap: 8px;
  padding: 14px 14px 12px 16px;
  border: 1px solid var(--line);
  border-left-width: 5px;
  border-radius: 16px;
  background: var(--screen-2);
}

.trade-card.win {
  border-left-color: var(--green);
}

.trade-card.lose {
  border-left-color: var(--red);
}

.trade-card-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

.trade-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
}

.trade-line strong {
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 28px;
  line-height: 1;
}

.side {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  line-height: 1;
}

.side.buy {
  color: var(--green);
}

.side.sell {
  color: var(--red);
}

.lot {
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 600;
}

.trade-subline {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
  color: var(--muted);
  font-size: 14px;
}

.trade-profit {
  min-width: 88px;
  color: var(--green);
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-align: right;
}

.trade-profit.lose {
  color: var(--red);
}

.trade-note {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.trade-card .row-actions {
  justify-content: flex-start;
}

.trade-card .row-actions button {
  min-height: 30px;
  padding: 6px 8px;
  font-size: 11px;
}

/* ========================================================================
   Bottom nav — floating pill
   ======================================================================== */

.bottom-dock {
  position: sticky;
  bottom: 12px;
  z-index: 2;
  margin-top: 10px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(18, 18, 18, 0.88);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
}

.dock-item {
  display: grid;
  place-items: center;
  gap: 4px;
  min-width: 0;
  min-height: 64px;
  padding: 8px 12px;
  border: 0;
  border-radius: 16px;
  color: var(--muted);
  background: transparent;
  box-shadow: none;
  text-transform: none;
  font-size: 12px;
  font-weight: 500;
}

.dock-item:hover {
  background: rgba(224, 221, 214, 0.05);
}

.dock-item.active {
  color: var(--ink);
  background: var(--soft);
}

.dock-icon {
  font-size: 22px;
  line-height: 1;
}

.empty {
  display: none;
  margin: 16px 0 0;
  color: var(--muted);
  text-align: center;
}

.empty.show {
  display: block;
}

/* ========================================================================
   Route nav — floating pill
   ======================================================================== */

.route-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 5px;
  background: rgba(18, 18, 18, 0.88);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: 0 6px 24px -8px rgba(42, 38, 34, 0.4);
  position: fixed;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translate3d(-50%, 0, 0);
  z-index: 50;
  width: auto;
  max-width: calc(100% - 32px);
  transition: opacity 180ms ease;
}

.app {
  padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px));
}

html {
  scroll-padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px));
}

input,
select,
textarea,
button {
  scroll-margin-bottom: calc(112px + env(safe-area-inset-bottom, 0px));
}

.route-nav.hidden-keyboard {
  opacity: 0;
  pointer-events: none;
  transform: translate3d(-50%, 20px, 0);
}

.route-nav a {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  min-height: 44px;
  min-width: 44px;
  border-radius: 999px;
  color: var(--muted);
  text-decoration: none;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  transition: all 220ms cubic-bezier(0.32, 0.72, 0, 1);
  white-space: nowrap;
}

.route-nav a .nav-label {
  display: none;
}

.nav-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  pointer-events: none;
}

.theme-toggle .nav-icon,
.clear-cache-btn .nav-icon {
  width: 18px;
  height: 18px;
}

.theme-toggle .icon-sun {
  display: none;
}
body.light .theme-toggle .icon-moon {
  display: none;
}
body.light .theme-toggle .icon-sun {
  display: inline-block;
}

.route-nav a:hover {
  color: var(--ink);
}

.route-nav a[data-active="true"] {
  color: var(--ink);
  background: var(--soft);
  padding: 8px 14px;
}

.route-nav a[data-active="true"] .nav-label {
  display: inline;
}

.route {
  display: none;
}

.route[data-active="true"] {
  display: flex;
  flex-direction: column;
}

/* ========================================================================
   Day drawer
   ======================================================================== */

.day-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(18, 18, 18, 0.5);
}

.day-drawer-backdrop[hidden] {
  display: none;
}

.day-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  display: grid;
  gap: 14px;
  align-content: start;
  width: clamp(320px, 40vw, 480px);
  padding: 20px;
  /* The drawer is its own fixed, top:0 scroll container, so it does not inherit
     .app's top inset — it needs the safe-area top itself or the close (X) button
     lands under the status bar / Dynamic Island and becomes untappable on iOS. */
  padding-top: calc(20px + env(safe-area-inset-top, 0px));
  padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  background: var(--surface);
  border-left: 1px solid var(--line);
  box-shadow: 0 -8px 32px -12px rgba(42, 38, 34, 0.12);
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(100%);
  transition: transform 220ms cubic-bezier(0.32, 0.72, 0, 1);
}

.day-drawer[aria-hidden="false"] {
  transform: translateX(0);
}

.day-drawer-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

.day-drawer-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(18px, 2.6vw, 24px);
  text-transform: none;
}

.day-drawer-close {
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border-radius: 999px;
  font-size: 20px;
  line-height: 1;
}

.day-drawer-nav {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.day-drawer-nav button {
  flex: 1;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 8px;
  background: var(--surface-raised, var(--surface));
  border: 1px solid var(--line);
  cursor: pointer;
}

.day-drawer-nav button:first-child {
  text-align: left;
}

.day-drawer-nav button:last-child {
  text-align: right;
}

.day-drawer-actions {
  display: grid;
}

.day-drawer-actions .primary {
  width: 100%;
}

/* ========================================================================
   Backup banner
   ======================================================================== */

.direction-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.direction-toggle .dir-btn {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--soft);
  color: var(--muted);
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.direction-toggle .dir-btn.active.dir-buy {
  border-color: #4f86ff;
  background: rgba(79, 134, 255, 0.16);
  color: var(--text);
}
.direction-toggle .dir-btn.active.dir-sell {
  border-color: var(--red);
  background: rgba(196, 122, 138, 0.18);
  color: var(--text);
}

.import-warning {
  grid-column: 1 / -1;
  margin: 8px 0 0;
  padding: 10px 14px;
  border: 1px solid #caa45a;
  border-radius: 12px;
  background: rgba(216, 166, 87, 0.10);
  color: var(--text);
  font-size: 0.9em;
  line-height: 1.4;
}

.import-warning-text { margin: 0; }
.import-warning-text:empty { display: none; }

.import-warning-report {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.import-warning-q { opacity: 0.85; }

.import-warning-btn {
  padding: 6px 12px;
  border: 1px solid #caa45a;
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.92em;
  cursor: pointer;
}

.import-warning-btn:hover { background: rgba(216, 166, 87, 0.18); }
.import-warning-btn-bug { border-color: var(--green); }
.import-warning-btn-bug:hover { background: rgba(90, 156, 131, 0.14); }

.backup-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  padding: 10px 14px;
  border: 1px solid var(--green);
  border-radius: 12px;
  background: rgba(90, 156, 131, 0.08);
}

.backup-banner-copy strong {
  display: block;
  color: var(--green);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.backup-banner-copy span {
  display: block;
  margin-top: 4px;
  color: var(--ink);
  font-size: 13px;
}

.backup-banner-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.backup-banner-actions button {
  min-height: 34px;
  padding: 6px 12px;
  font-size: 12px;
}

body.light .backup-banner {
  background: rgba(61, 129, 104, 0.1);
  border-color: var(--green);
}

body.light .backup-banner-copy strong {
  color: var(--green);
}

@media (max-width: 620px) {
  .backup-banner {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .backup-banner-actions {
    justify-content: stretch;
  }
  .backup-banner-actions button {
    flex: 1 1 0;
  }
}

/* ========================================================================
   Theme toggle & clear cache
   ======================================================================== */

.theme-toggle,
.clear-cache-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 44px;
  min-height: 44px;
  padding: 8px 10px;
  border-radius: 999px;
  border: none;
  color: var(--muted);
  background: transparent;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
  transition: all 220ms cubic-bezier(0.32, 0.72, 0, 1);
  white-space: nowrap;
}

.theme-toggle:hover,
.clear-cache-btn:hover {
  color: var(--ink);
}

.nav-divider {
  width: 1px;
  height: 20px;
  background: var(--line);
  margin: 0 2px;
  flex-shrink: 0;
}

/* Security panel — sign-out-from-all-devices + delete account.
   Each row pairs a copy block (label + hint) on the left with a single
   action button on the right. Danger variant uses red border + button. */
.security-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  margin-top: 16px;
}
.security-row-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.security-row-copy strong { font: 600 14px/1.3 var(--font-body); color: var(--ink); }
.security-row-copy span { font: 500 12px/1.4 var(--font-body); color: var(--muted); }
.security-row > button,
.account-signed-out > button {
  min-width: 148px;
  min-height: 44px;
  white-space: nowrap;
}
.security-row--danger { border-top-color: rgba(220, 53, 69, 0.25); }
.security-row--danger .security-row-copy strong { color: var(--red); }
.security-row--danger { margin-top: 22px; padding-top: 18px; }
button.danger {
  border-color: var(--red);
  color: var(--red);
  background: transparent;
  font-weight: 600;
}
button.danger:hover { background: rgba(220, 53, 69, 0.08); }
button.danger:disabled { opacity: 0.55; cursor: not-allowed; }

/* Two-step confirm modal — only used by delete-account today, but the
   shape is generic for any "type DELETE to confirm" flow. */
.confirm-modal[hidden] { display: none !important; }
.confirm-modal {
  position: fixed;
  inset: 0;
  z-index: 250;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 20px;
  background: rgba(0, 0, 0, 0.45);
}
.confirm-modal-card {
  width: min(420px, 100%);
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 28px 24px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
}
.confirm-modal-card h2 {
  margin: 0;
  font: 700 20px/1.2 var(--font-display);
  color: var(--ink);
}
.confirm-modal-card p {
  margin: 0;
  font: 500 13px/1.5 var(--font-body);
  color: var(--muted);
}
.confirm-modal-card input {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft);
  color: var(--ink);
  font: 600 14px/1 var(--font-mono, var(--font-body));
  letter-spacing: 0.04em;
}
.confirm-modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
.billing-success-card {
  align-items: center;
  width: min(430px, 100%);
  padding: 32px 26px 26px;
  text-align: center;
}
.billing-success-mark {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--green);
  color: var(--surface);
  font: 700 32px/1 var(--font-body);
}
.billing-success-card h2 {
  font: 600 22px/1.25 var(--font-body);
  letter-spacing: 0;
}
.billing-success-card p {
  max-width: 32ch;
  font-size: 15px;
  color: var(--ink);
}
.billing-success-card .confirm-modal-actions {
  width: 100%;
  justify-content: center;
}
.billing-success-card .confirm-modal-actions button {
  min-width: 150px;
  min-height: 44px;
}
.billing-success-delayed-actions {
  flex-wrap: wrap;
}
.billing-success-delayed-actions[hidden] {
  display: none !important;
}
.billing-success-delayed-actions button {
  flex: 1 1 160px;
  min-height: 44px;
}
.billing-success-continue-actions {
  margin-top: -4px;
}
body.modal-open { overflow: hidden; }

button:disabled { opacity: 0.5; cursor: not-allowed; }

/* Share card ("show off") — top-bar entry button, preset picker + share modal */
.topbar-share {
  flex: 0 0 auto;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--screen);
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.topbar-share svg { width: 20px; height: 20px; }
.topbar-share:hover:not(:disabled) { border-color: var(--lime); color: var(--lime); }
.topbar-share:disabled { opacity: 0.4; cursor: not-allowed; }
.share-modal-card { width: min(540px, 100%); gap: 14px; }
.share-preview {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--line);
}
.share-preview canvas { display: block; width: 100%; height: auto; }
.share-presets {
  display: flex;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
}
.share-preset {
  min-height: 30px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink);
}
.share-preset.is-active {
  color: #121212;
  background: var(--lime);
  border-color: var(--lime);
}
.share-windows {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}
.share-pill {
  min-height: 28px;
  padding: 4px 11px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink);
}
.share-pill.is-active {
  color: #121212;
  background: var(--lime);
  border-color: var(--lime);
}
.share-actions { flex-wrap: wrap; }

/* Pair Ranking panel — a leaderboard table for which pairs are actually
   making money. Lives below Setup scorecards in the Backtest route. */
.pair-ranking-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pair-ranking-row {
  display: grid;
  grid-template-columns: 28px 1.4fr repeat(4, 1fr);
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--soft);
}
.pair-ranking-rank {
  font: 700 18px/1 var(--font-display);
  color: var(--muted);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.pair-ranking-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pair-ranking-main strong { font: 600 15px/1.2 var(--font-body); color: var(--ink); }
.pair-ranking-meta { font: 500 11px/1 var(--font-body); color: var(--muted); }
.pair-ranking-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0; /* allow flex/grid children to shrink instead of pushing the column wider */
}
.prc-label {
  font: 500 10px/1.2 var(--font-body);
  color: var(--muted);
  text-transform: uppercase; /* no-op on Thai glyphs, intentional for EN */
  letter-spacing: 0.04em;
  white-space: normal;
  word-break: break-word;
}
.prc-val { font: 600 14px/1.1 var(--font-body); color: var(--ink); font-variant-numeric: tabular-nums; }
.prc-val.gain { color: var(--green); }
.prc-val.loss { color: var(--red); }
@media (max-width: 720px) {
  /* Two-row layout with each cell on its own line — Thai labels ("เฉลี่ยชนะ / แพ้",
     "อัตราชนะ") were colliding with adjacent cells in the previous 2-column grid. */
  .pair-ranking-row {
    grid-template-columns: 24px 1fr;
    grid-auto-rows: auto;
    gap: 8px 10px;
    padding: 10px 12px;
  }
  .pair-ranking-rank { grid-row: 1 / span 2; align-self: start; padding-top: 2px; }
  .pair-ranking-main { grid-column: 2; }
  .pair-ranking-cell {
    grid-column: 2;
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
  }
  .prc-label {
    /* On mobile the label sits inline with the value; stop forcing uppercase
       since Thai doesn't transform anyway and keep weight light. */
    text-transform: none;
    letter-spacing: 0;
    font-size: 11px;
    flex: 1 1 auto;
    min-width: 0;
  }
  .prc-val { font-size: 13px; flex: 0 0 auto; }
}

/* Time-of-Day chart — 24 vertical bars showing net P/L per hour-of-day in
   the user's local timezone. Above-axis (green) = profit, below-axis (red) =
   loss. Hours with zero trades stay empty so the user can see where they
   simply weren't active vs. where they actively lost money. */
.time-of-day-chart {
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  gap: 2px;
  align-items: stretch;
  padding: 8px 0 0;
  min-height: 180px;
}
.tod-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.tod-bar-wrap {
  width: 100%;
  height: 140px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.tod-bar {
  width: 70%;
  min-height: 1px;
  border-radius: 3px 3px 0 0;
  transition: opacity 0.15s;
}
.tod-bar-pos { background: var(--green); }
.tod-bar-neg { background: var(--red); }
.tod-col:hover .tod-bar { opacity: 0.75; }
.tod-hour {
  font: 500 9px/1 var(--font-mono, var(--font-body));
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.time-of-day-tz {
  font: 500 11px/1 var(--font-body);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 720px) {
  .time-of-day-chart { gap: 1px; min-height: 140px; }
  .tod-bar-wrap { height: 100px; }
  .tod-hour { font-size: 8px; }
  /* On narrow screens, only show every 4th hour label so they don't collide. */
  .tod-col:nth-child(4n+2) .tod-hour,
  .tod-col:nth-child(4n+3) .tod-hour,
  .tod-col:nth-child(4n+4) .tod-hour { visibility: hidden; }
}

/* Sync diagnostics — small info block inside Settings → Data so the user
   can see queue depth + last error without opening DevTools. Polled while
   Settings is the active route. */
.sync-diagnostics {
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--soft);
  display: grid;
  gap: 6px;
}
.sync-diag-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
  font: 500 12px/1.4 var(--font-body);
}
.sync-diag-label { color: var(--muted); }
.sync-diag-value { color: var(--ink); font-variant-numeric: tabular-nums; }
.sync-diag-err { color: var(--red); word-break: break-word; text-align: right; }

/* Language toggle — small EN/TH pill that sits in the route nav next to the
   theme toggle. Visual language matches .clear-cache-btn but compact. */
.lang-toggle {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
  margin: 0 2px;
  flex-shrink: 0;
}
.lang-toggle button {
  border: 0;
  background: transparent;
  color: var(--muted);
  font: 600 12px/1 var(--font-body);
  letter-spacing: 0.04em;
  padding: 6px 10px;
  min-width: 32px;
  cursor: pointer;
}
.lang-toggle button + button {
  border-left: 1px solid var(--line);
}
.lang-toggle button:hover {
  color: var(--ink);
}
.lang-toggle button.active {
  background: var(--soft);
  color: var(--ink);
}
@media (max-width: 640px) {
  .lang-toggle button {
    padding: 5px 8px;
    font-size: 11px;
    min-width: 28px;
  }
}

/* Settings page variant — roomier than the topbar pill since it sits in a
   form field row, not next to icon buttons. */
.settings-lang-toggle {
  align-self: flex-start;
  margin-top: 6px;
}
.settings-lang-toggle button {
  padding: 10px 18px;
  font-size: 14px;
  min-width: 100px;
  letter-spacing: 0;
}
@media (max-width: 640px) {
  .settings-lang-toggle button {
    padding: 9px 14px;
    font-size: 13px;
    min-width: 84px;
  }
}

/* ========================================================================
   History table
   ======================================================================== */

.history-table {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 16px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  background: var(--screen-2);
  box-shadow: var(--shadow);
}

.history-table thead th {
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--soft);
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.history-table tbody td {
  padding: 7px 12px;
  border-bottom: 1px solid rgba(58, 52, 45, 0.4);
  vertical-align: middle;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.35;
}

.history-table tbody tr:last-child td {
  border-bottom: 0;
}

.history-table tbody tr:hover td {
  background: rgba(224, 221, 214, 0.03);
}

.history-row.win {
  box-shadow: inset 4px 0 0 var(--green);
}

.history-row.lose {
  box-shadow: inset 4px 0 0 var(--red);
}

.history-cell-time {
  white-space: nowrap;
  color: var(--muted);
}

.history-cell-pair {
  color: var(--green);
  font-family: var(--font-mono);
  font-weight: 600;
}

.history-cell-setup,
.history-cell-lot {
  color: var(--ink);
  font-family: var(--font-mono);
  font-weight: 600;
}

.history-cell-result {
  width: 78px;
}

.history-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  min-height: 22px;
  padding: 1px 9px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  text-transform: capitalize;
}

.history-pill.win {
  color: #121212;
  background: var(--green);
}

.history-pill.lose {
  color: #faf7ec;
  background: var(--red);
}

.history-cell-note {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.history-cell-actions {
  white-space: nowrap;
  text-align: right;
}

.history-cell-actions button {
  min-height: 30px;
  margin-left: 6px;
  padding: 4px 10px;
  font-size: 11px;
}

.history-table-wrap {
  width: 100%;
  max-height: min(60vh, 520px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 16px;
}

.history-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
}

/* ========================================================================
   Quick pairs
   ======================================================================== */

.quick-pair-item {
  display: inline-flex;
  align-items: stretch;
  gap: 0;
}

.quick-pair-item > button[data-pair] {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.quick-pair-remove {
  min-width: 28px;
  min-height: 34px;
  padding: 0 8px;
  border-left: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  color: var(--red);
  background: rgba(205, 119, 102, 0.08);
  font-size: 14px;
}

.quick-pair-remove:hover {
  background: rgba(205, 119, 102, 0.18);
}

.add-pair-btn {
  min-height: 34px;
  padding: 6px 10px;
  border-style: dashed;
  border-radius: 999px;
  color: var(--green);
  background: transparent;
  font-size: 12px;
}

.add-pair-btn:hover {
  background: rgba(90, 156, 131, 0.08);
}

/* ========================================================================
   LIGHT MODE — Retro aged parchment / sepia
   ======================================================================== */

body.light {
  --ink: #2c2a25;
  /* Keep helper/body copy readable on parchment: 4.74:1 against --screen. */
  --muted: #6f6a5f;
  --line: #e0dbd0;
  --surface: #fff;
  --soft: #fff;
  --screen: #f5f0e6;
  --screen-2: #eae5db;
  --green: #2d6b4f;
  --lime: #2d6b4f;
  --red: #b84040;
  --blue: #8a8578;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

body.light {
  background: #f5f0e6;
}

body.light button {
  background: var(--screen-2);
}

body.light button:hover {
  background: var(--soft);
}

body.light button.primary {
  color: #f5f0e6;
  background: #2d6b4f;
}

body.light button.primary:hover {
  background: #245a42;
}

body.light input,
body.light textarea,
body.light select {
  background: var(--screen);
  color: var(--ink);
}

body.light input::placeholder,
body.light textarea::placeholder {
  color: #9a8e7c;
}

body.light .topbar,
body.light .panel,
body.light .status-strip div {
  background: var(--screen);
}

body.light .status-strip strong {
  color: var(--green);
}
body.light .status-strip strong.is-negative { color: var(--red); }
body.light .status-strip strong.is-positive { color: var(--green); }

body.light .status-strip span,
body.light .calendar-summary span,
body.light .equity-head span,
body.light .analysis-note,
body.light .image-import-head span,
body.light .trade-subline,
body.light .trade-note,
body.light .history-cell-note,
body.light .history-cell-time {
  color: var(--muted);
}

body.light .calendar-day,
body.light .calendar-day.flat {
  background: #eae5db;
  border-color: transparent;
}

body.light .calendar-day.gain {
  background: #d4e8dc;
  border-color: transparent;
}

body.light .calendar-day.loss {
  background: #f0d4d4;
  border-color: transparent;
}

body.light .calendar-day.selected {
  border-color: var(--ink);
  box-shadow: 0 0 0 2px rgba(42, 38, 34, 0.12);
}

body.light .calendar-day-num,
body.light .day-drawer-head h2,
body.light .calendar-trade strong,
body.light .equity-head strong,
body.light .image-import-head strong,
body.light .trade-line strong,
body.light .lot,
body.light .history-cell-setup,
body.light .history-cell-lot {
  color: var(--ink);
}

body.light .calendar-day-count,
body.light .calendar-trade span {
  color: var(--muted);
}

body.light .calendar-trade,
body.light .trade-card {
  background: var(--screen);
}

body.light .calendar-badge {
  color: #fff;
  background: #2d6b4f;
}

body.light .calendar-badge.loss {
  color: #fff;
  background: #b84040;
}

body.light .calendar-chip {
  color: #faf7ec;
  background: var(--green);
}

body.light .calendar-chip.loss {
  color: #faf7ec;
  background: var(--red);
}

body.light .day-drawer {
  background: var(--surface);
  border-left-color: var(--line);
}

body.light .day-drawer-backdrop {
  background: rgba(42, 38, 34, 0.3);
}

body.light .route-nav {
  background: rgba(245, 240, 230, 0.92);
  border-color: var(--line);
  box-shadow: 0 2px 12px -4px rgba(42, 38, 34, 0.12);
}

body.light .autosave {
  background: var(--screen);
  color: var(--ink);
}

body.light .dot {
  background: var(--green);
}

body.light .route-nav a {
  color: var(--muted);
}

body.light .route-nav a:hover {
  color: var(--ink);
}

body.light .route-nav a[data-active="true"] {
  background: #2c2a25;
  color: #f5f0e6;
}

body.light .result-toggle input:checked + span {
  color: #faf7ec;
  border-color: var(--green);
  background: var(--green);
}

body.light .history-table thead th {
  background: var(--soft);
  color: var(--muted);
}

body.light .history-table tbody td {
  border-bottom-color: rgba(226, 218, 194, 0.6);
}

body.light .history-table tbody tr:hover td {
  background: rgba(42, 38, 34, 0.025);
}

body.light .history-pill.win {
  color: #faf7ec;
  background: var(--green);
}

body.light .history-pill.lose {
  color: #faf7ec;
  background: var(--red);
}

body.light .metric strong {
  color: var(--green);
}

body.light .metric span {
  color: var(--muted);
}

body.light .metric {
  background: var(--screen);
}

body.light .analysis-box {
  background: var(--screen);
}

body.light .bar.win::before {
  background: rgba(61, 129, 104, 0.2);
}

body.light .bar.lose::before {
  background: rgba(184, 80, 62, 0.2);
}

body.light .quick-pair-remove {
  color: var(--red);
  background: rgba(184, 80, 62, 0.08);
}

body.light .quick-pair-remove:hover {
  background: rgba(184, 80, 62, 0.18);
}

body.light .add-pair-btn {
  color: var(--green);
}

body.light .add-pair-btn:hover {
  background: rgba(61, 129, 104, 0.08);
}

/* ========================================================================
   Update banner
   ======================================================================== */

.update-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding: 10px 14px;
  border: 1px solid var(--green);
  border-radius: 12px;
  background: rgba(92, 184, 160, 0.1);
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
}

.update-banner span {
  flex: 1;
}

.update-banner button {
  min-height: 34px;
  padding: 6px 12px;
  font-size: 12px;
  flex-shrink: 0;
}

body.light .update-banner {
  background: rgba(58, 138, 114, 0.1);
}

/* ========================================================================
   RESPONSIVE
   ======================================================================== */

@media (max-width: 980px) {
  .topbar,
  .list-head,
  .import-box,
  .analysis-head,
  .equity-head,
  .image-import-head {
    align-items: stretch;
    flex-direction: column;
  }

  .workspace {
    width: 100%;
  }
}

@media (max-width: 620px) {
  .app {
    width: min(100% - 14px, 980px);
    /* Keep the iOS status-bar / Dynamic Island clearance on phones. The base
       .app rule adds env(safe-area-inset-top); a flat 12px here was clobbering
       it, so the topbar rendered under the clock on every screen. */
    padding-top: calc(12px + env(safe-area-inset-top, 0px));
  }

  .native-android .app {
    padding-top: max(44px, calc(12px + env(safe-area-inset-top, 0px)));
  }

  .field.two,
  .image-grid {
    grid-template-columns: 1fr;
  }

  .calendar-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .calendar-summary .summary-chip {
    padding: 8px;
  }

  .calendar-summary strong {
    font-size: 14px;
  }

  .calendar-summary span {
    margin-top: 2px;
    font-size: 10px;
  }

  .calendar-head {
    gap: 6px;
    padding: 0;
  }

  .calendar-head h2 {
    font-size: 16px;
  }

  .calendar-head .eyebrow {
    font-size: 10px;
  }

  .calendar-actions {
    gap: 6px;
  }

  .calendar-actions button {
    min-height: 32px;
    padding: 6px 10px;
    font-size: 11px;
  }

  .import-box {
    padding: 10px;
    gap: 8px;
  }

  .import-box h3 {
    font-size: 14px;
  }

  .import-box p,
  .import-status {
    font-size: 11px;
  }

  .import-controls {
    gap: 6px;
  }

  .import-lock {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
  }

  #importViewPlans {
    width: 100%;
  }

  .backup-reminder {
    display: none;
  }

  .import-controls select,
  .import-controls button,
  .import-controls .file-button {
    min-height: 36px;
    padding: 6px 8px;
    font-size: 12px;
  }

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

  .metric {
    min-height: 0;
    padding: 8px;
  }

  .metric strong {
    font-size: 16px;
  }

  .metric span {
    margin-top: 4px;
    font-size: 11px;
  }

  .analysis-head {
    align-items: stretch;
  }

  #copyAnalysisButton {
    align-self: flex-start;
    min-height: 32px;
    padding: 4px 12px;
    font-size: 12px;
  }

  .topbar {
    padding: 10px 12px;
    gap: 8px;
    margin-bottom: 10px;
  }

  .topbar-copy h1 {
    font-size: 18px;
  }

  .topbar-copy .eyebrow {
    font-size: 10px;
  }

  .topbar-share {
    width: 40px;
    height: 40px;
  }

  .status-strip {
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    width: 100%;
  }

  .status-strip div {
    min-height: 0;
    padding: 8px 6px;
  }

  .status-strip strong {
    font-size: 16px;
  }

  .status-strip span {
    margin-top: 2px;
    font-size: 10px;
  }

  .calendar-head,
  .calendar-detail-head,
  .trade-card-head {
    flex-direction: column;
    align-items: stretch;
  }

  .trade-line strong,
  .side {
    font-size: 24px;
  }

  .lot {
    font-size: 22px;
  }

  .trade-profit {
    min-width: 0;
    text-align: left;
    font-size: 28px;
  }

  .calendar-grid {
    gap: 4px;
  }

  .calendar-day {
    min-height: 0;
    aspect-ratio: 1;
    padding: 4px 2px;
    gap: 2px;
    text-align: center;
    align-content: center;
    justify-items: center;
    overflow: hidden;
    border-radius: 10px;
  }

  .calendar-day-head {
    flex-direction: row;
    align-items: baseline;
    justify-content: center;
    gap: 2px;
  }

  .calendar-day-num {
    font-size: 14px;
  }

  /* Keep the trade-count chip visible on mobile (per user request:
     "เพิ่มจำนวนไม้ต่อวัน"). Compact format e.g. "17t" sits beside the
     day number — no count rendered for empty days. */
  .calendar-day-count {
    display: inline;
    font-size: 9px;
    font-weight: 600;
    color: var(--green);
    margin-left: 2px;
    letter-spacing: 0.02em;
  }

  /* W/L pill badges still hidden on phone — the count + net P/L is enough. */
  .calendar-day-badges {
    display: none;
  }

  .calendar-day-net {
    font-size: 10px;
    font-weight: 700;
    width: 100%;
    white-space: nowrap;
  }

  .calendar-weekdays {
    gap: 4px;
    font-size: 10px;
  }

  .calendar-weekdays span {
    text-align: center;
    padding: 0;
  }

  .day-drawer {
    width: 100%;
  }

  .route-nav {
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    max-width: calc(100% - 20px);
    /* With 5 routes + 3 utility buttons + the active route's label, the row
       overflows on a 390px viewport (especially with Thai labels). Let it
       scroll instead of clipping into adjacent buttons. -webkit-overflow-
       scrolling keeps it inertial on iOS. */
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
  }
  .route-nav::-webkit-scrollbar { display: none; } /* Chrome / Safari */

  .route-nav a {
    padding: 7px 8px;
    font-size: 11px;
    flex-shrink: 0;
  }

  /* Active route on mobile: keep the label visible but constrain its width
     so a long Thai word like "ปฏิทิน" doesn't push the next icon under it.
     The 80px ceiling is wider than every label in the dictionary, so the
     label always fits in full; the rule just stops accidental growth. */
  .route-nav a[data-active="true"] {
    padding: 7px 12px;
  }
  .route-nav a[data-active="true"] .nav-label {
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .theme-toggle,
  .clear-cache-btn {
    min-width: 44px;
    min-height: 44px;
    padding: 6px 8px;
    font-size: 14px;
    flex-shrink: 0;
  }
  .nav-divider { flex-shrink: 0; }

  .history-table thead th,
  .history-table tbody td {
    padding: 8px 5px;
    font-size: 12px;
  }
  .history-table tbody td:first-child {
    padding-right: 8px;
  }

  .history-cell-setup,
  .history-cell-lot,
  .history-table thead th:nth-child(3),
  .history-table thead th:nth-child(4) {
    display: none;
  }

  .history-cell-actions {
    white-space: normal;
    text-align: center;
  }

  .history-cell-actions button {
    margin: 1px;
    padding: 2px 5px;
    font-size: 9px;
    min-height: 24px;
    display: block;
    width: 100%;
  }

  .history-cell-time {
    font-size: 11px;
    white-space: normal;
    min-width: 62px;
    max-width: 78px;
    line-height: 1.3;
  }

  .history-cell-note {
    max-width: none;
    white-space: normal;
    word-break: normal;
    overflow-wrap: break-word;
    font-size: 11px;
    min-width: 90px;
  }

  .quick-pairs {
    gap: 6px;
  }
}

/* Auth screen */
/* First-run language picker — fullscreen blocking splash above auth screen.
   Only shown when no preference exists in localStorage. */
.lang-picker[hidden] { display: none !important; }
.lang-picker {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 20px;
  background: var(--screen);
  overflow-y: auto;
}
.lang-picker-card {
  position: relative;
  width: min(440px, 100%);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 24px;
  padding: 36px 28px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
}
.lang-picker-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  border-radius: 999px;
  transition: background 0.15s, color 0.15s;
}
.lang-picker-close:hover {
  background: var(--soft);
  color: var(--ink);
}
.lang-picker-logo {
  margin: 0;
  text-align: center;
  font: 700 28px/1.1 var(--font-display);
  letter-spacing: -0.01em;
}
.lang-picker-logo span { color: var(--green); }
.lang-picker-title {
  margin: 0;
  text-align: center;
  font: 500 15px/1.4 var(--font-body);
  color: var(--muted);
}
.lang-picker-actions {
  display: grid;
  gap: 12px;
}
.lang-picker-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 16px 20px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--soft);
  color: var(--ink);
  font-family: var(--font-body);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.05s;
}
.lang-picker-btn:hover {
  border-color: var(--ink);
}
.lang-picker-btn:active { transform: translateY(1px); }
.lang-picker-btn strong {
  font-size: 18px;
  font-weight: 700;
}
.lang-picker-btn span {
  font-size: 13px;
  color: var(--muted);
}
body.lang-picker-open { overflow: hidden; }

.auth-screen[hidden] { display: none !important; }
.auth-screen {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 20px;
  background: var(--screen);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.auth-brand { text-align: center; margin-bottom: 32px; }
.auth-logo {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.auth-logo span { color: var(--green); }
.auth-tagline { color: var(--muted); font-size: 13px; margin-top: 6px; }
.auth-card {
  width: 100%;
  max-width: 340px;
  padding: 24px 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
}
.auth-tabs {
  display: flex;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 20px;
}
.auth-tab {
  flex: 1;
  padding: 10px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  background: var(--screen);
  color: var(--muted);
  border: 0;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  min-height: 40px;
  border-radius: 0;
}
.auth-tab.active { background: var(--soft); color: var(--ink); }
.auth-card label { margin-bottom: 6px; }
.auth-card input[type="email"],
.auth-card input[type="password"] { margin-bottom: 16px; }
.auth-card .primary { width: 100%; margin-bottom: 0; }
.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0;
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}
.auth-google {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px;
  font-size: 14px;
  font-weight: 600;
  text-transform: none;
}

/* Google-only auth card (Supabase email rate limit on free tier — see
   improvement-plan #8). Email/password fallback markup remains in the DOM
   but hidden so existing accounts still work and we can flip it on later
   when custom SMTP is wired. */
.auth-card--google-only .auth-prompt {
  text-align: center;
  color: var(--muted);
  font-size: 14px;
  margin-bottom: 18px;
  line-height: 1.5;
}
.auth-card--google-only .auth-google {
  padding: 14px;
  font-size: 15px;
  font-weight: 700;
  background: var(--green);
  color: #052018;
  border-color: var(--green);
}
.auth-card--google-only .auth-google:hover {
  background: #6fe6bd;
}
.auth-apple {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px;
  font-size: 15px;
  font-weight: 700;
  text-transform: none;
  margin-top: 10px;
  background: #ffffff;
  color: #000000;
  border-color: #ffffff;
}
.auth-apple:hover {
  background: #e8e8e8;
}
body.light .auth-apple {
  background: #000000;
  color: #ffffff;
  border-color: #000000;
}
body.light .auth-apple:hover {
  background: #222222;
}
/* Light theme's --green is a dark forest green, so the near-black text tuned for
   the bright dark-theme green drops to ~2.8:1. Use white for AA (~6:1) on the
   light-theme CTA. */
body.light .auth-card--google-only .auth-google {
  color: #ffffff;
}
.auth-card--google-only .auth-error {
  margin-top: 10px;
}
.auth-card--google-only .auth-fallback[hidden] { display: none; }
.auth-error {
  margin-top: 12px;
  color: var(--red);
  font-size: 13px;
  text-align: center;
  min-height: 18px;
}
.auth-demo {
  text-align: center;
  margin-top: 20px;
}
.auth-demo-link {
  display: inline-block;
  padding: 10px 28px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: color .15s, border-color .15s;
}
.auth-demo-link:hover {
  color: var(--green);
  border-color: var(--green);
}
.auth-footer {
  margin-top: 24px;
  color: var(--muted);
  font-size: 11px;
  text-align: center;
}
.auth-footer a { color: var(--green); text-decoration: none; }
body.light .auth-screen { background: #f0e8d0; }

.paywall-screen[hidden] { display: none !important; }
.paywall-screen {
  position: fixed; inset: 0; z-index: 101; /* above app, like .auth-screen (100) */
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 24px 20px; background: var(--screen); overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.paywall-inner { width: 100%; max-width: 420px; text-align: center; }
.paywall-lede { color: var(--muted); margin: 4px 0 18px; }
.paywall-plans { display: grid; gap: 14px; }
.paywall-note { color: var(--muted); font-size: 0.85rem; min-height: 1em; margin-top: 12px; }
.paywall-legal { margin-top: 16px; font-size: 0.72rem; line-height: 1.5; color: var(--muted); }
.paywall-legal a { color: var(--green); }
.paywall-links { display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center; margin-top: 18px; }
.paywall-links button { background: none; border: 0; color: var(--green); font: inherit; cursor: pointer; padding: 4px; }
.paywall-redeem { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; margin-top: 16px; }
.paywall-redeem[hidden] { display: none !important; } /* native store builds hide the redeem box (App Store 3.1.1); flex would otherwise defeat [hidden] */
#settingsRedeemField[hidden] { display: none !important; } /* same 3.1.1 gate for the Settings redeem box on native */
.paywall-redeem-label { flex-basis: 100%; color: var(--muted); font-size: 0.85rem; }
.paywall-redeem input { flex: 1 1 160px; min-width: 0; max-width: 220px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); font: inherit; text-align: center; }
.paywall-redeem #pwRedeemStatus { flex-basis: 100%; margin-top: 6px; }
.trial-banner[hidden] { display: none !important; }
.trial-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 12px; padding: 8px 14px; background: var(--screen-2);
  border: 1px solid var(--line); border-radius: 10px;
  color: var(--ink); font-size: 0.85rem;
}
.trial-banner button { min-height: 44px; background: var(--green); color: var(--screen); border: 0; border-radius: 8px; padding: 4px 12px; font: inherit; font-weight: 600; cursor: pointer; }
/* body.light button is more specific than the shared trial CTA rule above;
   keep the light-mode CTA on the green action surface with readable text. */
body.light .trial-banner button { background: var(--green); color: var(--screen); }

/* Setup tag chips */
.pro-badge {
  font-size: 0.6em;
  background: rgba(155, 89, 182, 0.2);
  color: #c39bd3;
  padding: 1px 6px;
  border-radius: 6px;
  vertical-align: middle;
  margin-left: 4px;
}

.priority-badge {
  font-size: 0.65em;
  background: rgba(46, 204, 113, 0.15);
  color: #2ecc71;
  padding: 1px 6px;
  border-radius: 6px;
  vertical-align: middle;
  margin-left: 4px;
  font-weight: 600;
}

.grand-badge {
  font-size: 0.6em;
  background: rgba(241, 196, 15, 0.18);
  color: #f1c40f;
  padding: 1px 6px;
  border-radius: 6px;
  vertical-align: middle;
  margin-left: 4px;
  font-weight: 600;
  letter-spacing: 0.3px;
}

/* Weekly digest (Grand) - simple, readable coaching card. */
#weeklyDigestBtn { min-height: 44px; }
#weeklyDigestResult { margin-top: 12px; }
.digest-message { color: #9aa4b2; font-size: 0.9em; margin: 8px 0; }
.digest-headline { font-size: 1.05em; font-weight: 600; margin: 4px 0 10px; }
.digest-heading { font-size: 0.95em; margin: 12px 0 4px; }
.digest-points { margin: 0 0 6px 1.1em; padding: 0; line-height: 1.5; }
.digest-points li { margin: 2px 0; }
.digest-result .ai-panel { max-height: 60vh; overflow-y: auto; }

.setup-tag-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.setup-tag-chip {
  padding: 4px 12px;
  border-radius: 16px;
  font-size: 0.82rem;
  cursor: pointer;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  transition: background 0.15s, border-color 0.15s;
}

.setup-tag-chip:hover {
  border-color: var(--green);
}

.setup-tag-chip.selected {
  background: var(--green);
  color: var(--screen);
  border-color: var(--green);
}

.setup-tag-chip.add-custom {
  color: var(--muted);
  opacity: 0.7;
}

/* Per-trade image slots */
.trade-image-slots {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.image-slot {
  width: 100px;
  height: 75px;
  border: 2px dashed var(--line);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.15s;
}

.image-slot:hover {
  border-color: var(--green);
}

.image-slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slot-placeholder {
  font-size: 0.75rem;
  color: var(--muted);
  text-align: center;
}

/* Setup scorecards */
.scorecards-panel {
  margin-top: 1rem;
}

.scorecards-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 1rem;
}

.scorecards-filters {
  display: flex;
  gap: 6px;
}

.scorecards-filters select {
  font-size: 0.8rem;
}

.scorecards-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 640px) {
  .scorecards-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.scorecard {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px;
  cursor: pointer;
  transition: border-color 0.15s;
}

.scorecard:hover {
  border-color: var(--green);
}

.scorecard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.scorecard-tag {
  font-weight: 600;
  font-size: 1rem;
}

.scorecard-count {
  font-size: 0.8rem;
  color: var(--muted);
}

.scorecard-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px 12px;
  font-size: 0.8rem;
  margin-bottom: 8px;
}

.scorecard-metric strong {
  display: block;
  font-size: 0.95rem;
}

.scorecard-metric span {
  color: var(--muted);
  font-size: 0.7rem;
}

.scorecard-insight {
  font-size: 0.78rem;
  color: var(--muted);
  font-style: italic;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.scorecard-expanded {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  display: none;
}

.scorecard.open .scorecard-expanded {
  display: block;
}

.scorecard-trade-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  font-size: 0.78rem;
}

.scorecard-trade-row img {
  width: 40px;
  height: 30px;
  object-fit: cover;
  border-radius: 4px;
  margin-left: 8px;
}

/* Multi-account (Pro+) — used by Portfolios view + Settings → Accounts.
   Card body reuses .scorecard primitives; these classes only add the
   currency badge, broker subtitle, and per-card sparkline well. */
.currency-chip {
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.account-broker {
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.account-spark {
  margin-top: 6px;
}

.account-spark svg {
  display: block;
  width: 100%;
  height: 36px;
}

.account-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.account-row:last-child {
  border-bottom: none;
}

.account-row-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.account-row-actions button {
  font-size: 0.75rem;
  padding: 6px 10px;
  min-height: 32px;
}

.account-filter-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}

.account-filter-strip label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.account-filter-strip select {
  flex: 1;
  min-height: 36px;
  padding: 6px 10px;
  font-size: 13px;
}

/* Redeem code & settings */
.tier-status {
  margin-top: 12px;
}

.ai-usage-status {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: 8px 0 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--screen);
  overflow: hidden;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.2;
}

.ai-usage-cell {
  min-width: 0;
  padding: 8px 10px;
}

.ai-usage-cell + .ai-usage-cell {
  border-left: 1px solid var(--line);
}

.ai-usage-label {
  display: block;
  color: var(--muted);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ai-usage-value {
  display: block;
  margin-top: 3px;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.86rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  white-space: nowrap;
}

.ai-usage-state {
  grid-column: 1 / -1;
  padding: 8px 10px;
  color: var(--muted);
}

.ai-usage-note {
  grid-column: 1 / -1;
  padding: 8px 10px;
  border-top: 1px solid var(--line);
  color: var(--muted);
}

.ai-usage-status[data-state="refreshing"] .ai-usage-cell,
.ai-usage-status[data-state="unavailable"] .ai-usage-cell,
.ai-usage-status[data-state="upgrade"] .ai-usage-cell {
  display: none;
}

.tier-badge {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--screen);
}

.tier-badge strong {
  display: block;
  font-size: 1.1rem;
  margin-bottom: 4px;
}

.tier-badge span {
  font-size: 0.82rem;
  color: var(--muted);
}

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

.redeem-row input {
  flex: 1;
}

.redeem-row button {
  flex-shrink: 0;
  min-width: 90px;
  white-space: nowrap;
}

.account-signed-out {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  margin-top: 16px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}
.account-signed-out[hidden],
#accountSignedIn[hidden] {
  display: none !important;
}

/* Keep the two sign-out scopes in one compact card while preserving each
   action's existing id/status hook for auth.js and app.js. */
.security-actions-card {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: color-mix(in srgb, var(--surface) 72%, transparent);
}
.security-action {
  min-width: 0;
  padding: 12px 10px;
}
.security-action + .security-action {
  border-left: 1px solid var(--line);
}
.security-action .security-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.security-action .security-row-copy {
  gap: 0;
}
.security-action .security-row-copy strong {
  font-size: 12px;
  line-height: 1.2;
  white-space: nowrap;
}
.security-action .security-row-copy span {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.security-action .security-row > button {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding-inline: 4px;
  font-size: 10px;
  white-space: nowrap;
}
.security-action .redeem-status {
  margin: 6px 0 0;
  min-height: 1.2em;
}
.security-action .redeem-status:empty {
  display: none;
}

@media (max-width: 560px) {
  .redeem-row {
    flex-direction: column;
    align-items: stretch;
  }

  .redeem-row input,
  .redeem-row button {
    width: 100%;
    min-height: 44px;
  }

  .security-row,
  .account-signed-out {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .security-row > button,
  .account-signed-out > button {
    width: 100%;
  }
}

.redeem-status {
  font-size: 0.82rem;
  margin-top: 6px;
  min-height: 1.2em;
}

/* Non-blocking in-place confirmation (replaces window.confirm) */
.confirm-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel, #161a22);
}

.confirm-inline-text {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-line;
}

.confirm-inline button {
  flex-shrink: 0;
  font-size: 13px;
  padding: 6px 14px;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--ink);
}

.confirm-inline-ok {
  background: var(--red);
  color: #fff;
  border-color: var(--red) !important;
}

.confirm-inline-cancel {
  background: transparent;
}

/* Armed two-tap delete state */
.calendar-trade-action-btn.delete.arm-confirm,
.quick-pair-remove.arm-confirm,
.history-row button[data-action="delete"].arm-delete {
  background: var(--red);
  color: #fff;
}

/* Per-trade AI notice (non-blocking, auto-clears) */
.card-notice {
  color: var(--red);
  font-size: 13px;
  margin: 4px 0 0;
}

.subscription-panel {
  gap: 18px;
}

.subscription-lede {
  margin-top: 8px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

.subscription-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px;
  border: 1px solid rgba(92, 184, 160, 0.25);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(92, 184, 160, 0.12), rgba(155, 89, 182, 0.08));
}

.subscription-hero-copy {
  display: grid;
  gap: 5px;
}

.subscription-hero-copy strong {
  color: var(--ink);
  font: 600 16px/1.2 var(--font-display);
}

.subscription-hero-copy span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.subscription-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.subscription-link-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-body);
  text-decoration: none;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease;
}

.subscription-link-btn:hover {
  border-color: var(--green);
  background: rgba(92, 184, 160, 0.08);
}

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

.subscription-card {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--screen);
}

/* The cards are forced to equal height, and the card grid's align-content
   stretches its auto rows — which grows the CTA button's row (and the button
   with it) in whichever plan has the shorter feature list. That made the
   Standard "Current plan" button 5px taller than Grand's. Pin the CTA to its
   natural height so both plan buttons match regardless of feature-list length. */
.subscription-card > .primary {
  align-self: start;
}

.subscription-card--standard {
  box-shadow: inset 0 0 0 1px rgba(92, 184, 160, 0.12);
}

.subscription-card--grand {
  box-shadow: inset 0 0 0 1px rgba(155, 89, 182, 0.12);
}

.subscription-card-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 10px;
}

.subscription-card-head h4 {
  margin: 0 0 4px;
  color: var(--ink);
  font: 600 18px/1.1 var(--font-display);
}

.subscription-card-copy {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.subscription-badge {
  flex-shrink: 0;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(92, 184, 160, 0.14);
  color: var(--green);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.subscription-badge--grand {
  background: rgba(155, 89, 182, 0.14);
  color: #c39bd3;
}

.subscription-price {
  margin: 0;
  color: var(--ink);
  font: 600 18px/1.15 var(--font-mono);
}

.subscription-features {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.subscription-features li {
  position: relative;
  padding-left: 16px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.subscription-features li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--green);
}

.subscription-note,
.subscription-channel-note {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.subscription-channel-note {
  margin-top: -2px;
}

body.light .subscription-hero {
  background: linear-gradient(135deg, rgba(92, 184, 160, 0.12), rgba(155, 89, 182, 0.05));
}

body.light .subscription-link-btn {
  background: rgba(255, 255, 255, 0.45);
}

@media (max-width: 760px) {
  .subscription-hero {
    flex-direction: column;
    align-items: stretch;
  }

  .subscription-links {
    justify-content: stretch;
  }

  .subscription-link-btn {
    flex: 1 1 0;
  }

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

@media (max-width: 560px) {
  /* Keep the installed/mobile action rhythm tappable without inflating dense
     data rows elsewhere in the app. */
  .route[data-route="settings"] button {
    min-height: 44px;
  }

  /* The page heading already names the purchase area; the lede repeats the
     hero/card story on narrow screens. Keep the hero, plans, prices, features,
     restore control and channel/legal notes intact. */
  .subscription-lede {
    display: none;
  }

  .subscription-hero {
    gap: 10px;
    padding: 12px;
  }

  /* The reload utility is recoverable from the OS/app refresh path. Keeping
     the four routes, share, and theme controls visible prevents a horizontal
     nav scroller at phone widths. */
  .route-nav .clear-cache-btn {
    display: none;
  }
  .route-nav {
    overflow-x: hidden;
  }
}

@media (max-width: 340px) {
  /* At 320px, retain every route/action control but drop only the active text
     label; the topbar title still identifies the current route. */
  .route-nav a[data-active="true"] .nav-label {
    display: none;
  }
}

/* AI analysis panel */
.ai-panel {
  padding: 12px;
  background: rgba(155, 89, 182, 0.08);
  border-left: 3px solid #9b59b6;
  border-radius: 0 8px 8px 0;
  margin-top: 8px;
}
.ai-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.ai-panel-label {
  color: #9b59b6;
  font-weight: 600;
  font-size: 0.85rem;
}
.ai-panel-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.ai-upload-btn {
  background: transparent;
  color: #9b59b6;
  border: 1px solid rgba(155, 89, 182, 0.5);
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  min-height: 34px;
  transition: 180ms ease;
}
.ai-upload-btn:hover {
  background: rgba(155, 89, 182, 0.1);
  border-color: #9b59b6;
}
.ai-upload-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
body.light .ai-upload-btn {
  color: #6e2e87;
  border-color: rgba(124, 58, 150, 0.55);
}
body.light .ai-upload-btn:hover {
  background: rgba(124, 58, 150, 0.1);
  border-color: #7c3a96;
}
.ai-analyze-btn {
  background: #9b59b6;
  color: #ffffff;
  border: none;
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  min-height: 34px;
  text-transform: none;
  box-shadow: 0 2px 8px -2px rgba(155, 89, 182, 0.4);
  transition: 180ms ease;
}
.ai-analyze-btn:hover {
  background: #8a47a5;
  box-shadow: 0 3px 12px -2px rgba(155, 89, 182, 0.55);
  transform: translateY(-1px);
}
.ai-analyze-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* Light-mode-specific overrides for the AI panel — the original
   rgba(...0.05) tint vanished on the cream background. Stronger tint +
   visible border so the panel has presence in both themes. The button
   gets a darker purple in light mode so the white text contrasts cleanly
   against the cream surrounding. */
body.light .ai-panel {
  background: rgba(155, 89, 182, 0.12);
  border-left-color: #7c3a96;
  border: 1px solid rgba(155, 89, 182, 0.25);
  border-left: 3px solid #7c3a96;
}
body.light .ai-panel-label {
  color: #6e2e87;
}
body.light .ai-analyze-btn {
  background: #7c3a96;
  box-shadow: 0 2px 8px -2px rgba(124, 58, 150, 0.5);
}
body.light .ai-analyze-btn:hover {
  background: #6a3082;
}
body.light .ai-confidence {
  color: #5a2a72;
  font-weight: 600;
}
body.light .ai-result-description {
  color: var(--ink);
}
.ai-result-description {
  font-size: 0.82rem;
  color: var(--muted);
  margin-bottom: 8px;
}
.ai-confidence {
  font-size: 0.75rem;
  color: var(--muted);
}
.ai-suggestion {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.ai-accept-btn {
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 0.8rem;
  cursor: pointer;
  border: none;
  background: var(--green);
  color: var(--screen);
  min-height: 32px;
  text-transform: none;
}

.extras-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.extras-actions button {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 9px 14px;
  border-radius: 10px;
  cursor: pointer;
  transition: 180ms ease;
}
.extras-actions button:hover {
  border-color: rgba(95, 219, 177, 0.4);
  color: var(--green);
}

/* ========================================================================
   Onboarding overlay — fires once on first sign-in for new users
   ======================================================================== */

.onboarding-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(10, 10, 10, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: onboarding-fade-in 240ms ease;
}
.onboarding-overlay[hidden] { display: none !important; }
@keyframes onboarding-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.onboarding-card {
  width: min(440px, 100%);
  background: var(--surface, #141414);
  border: 1px solid rgba(95, 219, 177, 0.3);
  border-radius: 20px;
  padding: 32px 28px;
  box-shadow: 0 20px 80px -16px rgba(0, 0, 0, 0.7);
  text-align: center;
}

.onboarding-progress {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-bottom: 24px;
}
.onboarding-progress span {
  width: 24px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  transition: background 220ms ease;
}
.onboarding-progress span.active {
  background: var(--green);
}

.onboarding-step {
  animation: onboarding-step-in 280ms ease;
}
.onboarding-step[hidden] { display: none !important; }
@keyframes onboarding-step-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.onboarding-icon {
  font-size: 48px;
  margin-bottom: 8px;
}

.onboarding-step h2 {
  font-family: var(--font-display, var(--font-body));
  font-weight: 600;
  font-size: 22px;
  margin: 12px 0 10px;
  line-height: 1.2;
}

.onboarding-step p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
  margin: 0 auto;
  max-width: 340px;
}

.onboarding-mini-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 16px auto 12px;
  max-width: 340px;
}
.onboarding-mini-stats > div {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.onboarding-mini-stats strong {
  font-family: var(--font-display, var(--font-body));
  font-weight: 600;
  font-size: 18px;
  line-height: 1.1;
}
.onboarding-mini-stats strong.green { color: var(--green); }
.onboarding-mini-stats span {
  font-size: 10px;
  color: var(--muted);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.onboarding-mini-cal {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin: 0 auto 14px;
  max-width: 280px;
  padding: 12px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.onboarding-mini-cal .cal-cell {
  aspect-ratio: 1;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.05);
}
.onboarding-mini-cal .cal-cell.gain { background: rgba(95, 219, 177, 0.55); }
.onboarding-mini-cal .cal-cell.gain.lg { background: var(--green); }
.onboarding-mini-cal .cal-cell.loss { background: rgba(240, 138, 138, 0.45); }
.onboarding-mini-cal .cal-cell.loss.lg { background: var(--red, #f08a8a); }

.onboarding-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 18px auto 0;
  max-width: 340px;
  padding: 12px 14px;
  background: rgba(95, 219, 177, 0.06);
  border: 1px solid rgba(95, 219, 177, 0.2);
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
}
.onboarding-checkbox input { margin-top: 2px; flex-shrink: 0; accent-color: var(--green); }
.onboarding-checkbox span { font-size: 13px; color: var(--ink); line-height: 1.5; }

/* Niche-feature visual: screenshot → extracted */
.onboarding-flow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px auto 14px;
  max-width: 380px;
}
.onboarding-flow-card {
  flex: 1;
  padding: 10px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--line);
  border-radius: 10px;
  min-width: 0;
  text-align: left;
}
.onboarding-flow-card.extracted {
  border-color: rgba(95, 219, 177, 0.35);
  background: rgba(95, 219, 177, 0.08);
}
.ofc-tag {
  display: block;
  font-size: 9px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}
.ofc-tag.green { color: var(--green); }
.ofc-row {
  font-size: 10px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  color: var(--ink);
  padding: 2px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ofc-row.mono { color: var(--green); font-weight: 600; }
.ofc-row em { font-style: normal; font-weight: 600; }
.ofc-row em.gain { color: var(--green); }
.ofc-row em.loss { color: var(--red, #f08a8a); }
.onboarding-flow-arrow {
  font-size: 24px;
  color: var(--green);
  font-weight: 600;
  flex-shrink: 0;
}

/* Niche-feature visual: AI analysis result */
.onboarding-analysis {
  margin: 18px auto 14px;
  max-width: 360px;
  padding: 14px 16px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(95, 219, 177, 0.25);
  border-radius: 12px;
  text-align: left;
}
.oa-pattern {
  font-family: var(--font-display, var(--font-body));
  font-weight: 600;
  font-size: 18px;
  color: var(--green);
  margin-bottom: 10px;
}
.oa-confidence {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.oa-confidence .bar {
  flex: 1;
  height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  overflow: hidden;
}
.oa-confidence .bar > span {
  display: block;
  height: 100%;
  background: var(--green);
  border-radius: 999px;
}
.oa-confidence strong {
  font-size: 13px;
  font-weight: 700;
}
.oa-desc {
  font-size: 12px !important;
  color: var(--ink) !important;
  font-style: italic;
  line-height: 1.5 !important;
  max-width: none !important;
  margin: 0 0 10px !important;
}
.oa-tag {
  font-size: 11px;
  color: var(--muted);
}
.oa-tag code {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  background: rgba(95, 219, 177, 0.15);
  color: var(--green);
  padding: 2px 8px;
  border-radius: 6px;
  font-weight: 600;
}

/* Pricing tier tag (small line under niche feature blurb) */
.onboarding-tier {
  font-size: 11px !important;
  color: var(--muted) !important;
  margin-top: 10px !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.onboarding-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 28px;
  gap: 12px;
}

.onboarding-skip {
  background: transparent;
  border: 0;
  color: var(--muted);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 10px 14px;
  border-radius: 8px;
  transition: 180ms ease;
}
.onboarding-skip:hover { color: var(--ink); }

.onboarding-next {
  background: var(--green);
  color: #052018;
  border: 0;
  border-radius: 10px;
  padding: 12px 22px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: 180ms ease;
  flex: 1;
  max-width: 200px;
}
.onboarding-next:hover { background: #6fe6bd; }

/* AI disclaimer + info blocks */
.ai-disclaimer {
  margin-top: 10px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--muted);
  padding: 8px 10px;
  border: 1px dashed rgba(231, 195, 118, 0.3);
  background: rgba(231, 195, 118, 0.05);
  border-radius: 8px;
}
.ai-info-block {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  margin-top: 10px;
  font-size: 13px;
}
.ai-info-block summary {
  cursor: pointer;
  font-weight: 600;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ai-info-block summary::-webkit-details-marker { display: none; }
.ai-info-block summary::after {
  content: "+";
  font-size: 18px;
  color: var(--green);
  transition: transform 180ms ease;
}
.ai-info-block[open] summary::after { transform: rotate(45deg); }
.ai-info-block p {
  margin-top: 10px;
  color: var(--muted);
  line-height: 1.6;
  font-size: 12px;
}
.ai-info-block p strong { color: var(--ink); }

/* ========================================================================
   Win-streak toast — fires on 3+ consecutive wins, suggests sharing
   ======================================================================== */

.win-streak-toast {
  position: fixed;
  left: 50%;
  bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%) translateY(20px);
  z-index: 200;
  display: none;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  width: min(420px, calc(100% - 32px));
  background: linear-gradient(135deg, var(--surface) 0%, rgba(95, 219, 177, 0.12) 100%);
  border: 1px solid rgba(95, 219, 177, 0.4);
  border-radius: 14px;
  box-shadow: 0 10px 40px -8px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 240ms ease, transform 240ms ease;
}
.win-streak-toast.show {
  display: flex;
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.win-streak-toast .ws-icon {
  font-size: 28px;
  flex-shrink: 0;
}
.win-streak-toast .ws-body {
  flex: 1;
  min-width: 0;
}
.win-streak-toast .ws-body strong {
  display: block;
  font-size: 14px;
  color: var(--green);
  margin-bottom: 2px;
}
.win-streak-toast .ws-body p {
  font-size: 12px;
  color: var(--muted);
  margin: 0;
  line-height: 1.45;
}
.win-streak-toast .ws-code {
  display: inline-block;
  margin-top: 6px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  color: var(--green);
  background: rgba(95, 219, 177, 0.1);
  padding: 2px 8px;
  border-radius: 6px;
  letter-spacing: 0.04em;
}
.win-streak-toast .ws-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-shrink: 0;
}
.win-streak-toast .ws-share {
  background: var(--green);
  color: #052018;
  border: 0;
  border-radius: 8px;
  padding: 8px 14px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.win-streak-toast .ws-share:hover { background: #6fe6bd; }
.win-streak-toast .ws-dismiss {
  background: transparent;
  border: 0;
  color: var(--muted);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
}
.win-streak-toast .ws-dismiss:hover { color: var(--ink); }

/* ========================================================================
   Welcome panel — first-time / empty state CTA above calendar
   ======================================================================== */

.welcome-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  background: linear-gradient(180deg, var(--surface) 0%, rgba(95, 219, 177, 0.06) 100%);
  border: 1px solid rgba(95, 219, 177, 0.2);
  margin-bottom: 16px;
}
.welcome-panel[hidden] { display: none !important; }
.welcome-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  margin-top: 4px;
}
.welcome-blurb {
  color: var(--muted);
  font-size: 13px;
  margin-top: 6px;
  line-height: 1.6;
}
.welcome-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.welcome-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: 180ms ease;
}
.welcome-btn:hover {
  border-color: rgba(95, 219, 177, 0.4);
  color: var(--green);
  text-decoration: none;
}
.welcome-btn.primary {
  background: var(--green);
  color: #052018;
  border-color: var(--green);
}
.welcome-btn.primary:hover {
  background: #6fe6bd;
  color: #052018;
}

.empty-cta {
  text-align: center;
  padding: 32px 20px;
}
.empty-cta .empty-text {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 4px;
}
.empty-cta .empty-hint {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 18px;
  opacity: 0.7;
}
.empty-actions {
  display: inline-flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

/* ========================================================================
   Landscape (short-height) tweaks — phone-rotated experience
   Fires on devices in landscape orientation with limited vertical space
   (iPhone SE/13/14/15 landscape ~390-450px height after URL bar).
   Goal: reclaim vertical pixels for content without changing iPad layout.
   ======================================================================== */

@media (orientation: landscape) and (max-height: 500px) {
  .auth-screen {
    justify-content: flex-start;
    padding: 12px 20px;
  }
  .auth-brand { margin-bottom: 12px; }
  .auth-tagline { display: none; }
  .auth-card { padding: 16px 18px; }
  .auth-tabs { margin-bottom: 12px; }
  .auth-card input[type="email"],
  .auth-card input[type="password"] { margin-bottom: 10px; }
  .auth-divider { margin: 10px 0; }
  .auth-footer { margin-top: 12px; }

  .topbar {
    padding: 6px 12px;
    margin-bottom: 6px;
  }
  .topbar-copy h1 { font-size: 16px; }
  .topbar-copy .eyebrow { font-size: 9px; }
  .status-strip div { padding: 4px 6px; }
  .status-strip strong { font-size: 14px; }
  .status-strip span { font-size: 9px; }

  .autosave { padding: 4px 10px; font-size: 11px; }

  .calendar-day-num { font-size: 12px; }
}