:root {
  --ink: #171B2B;
  --muted: #6B7280;
  --guide: #E4E8F2;
  --purple: #7C3AED;
  --purple-dark: #6423D0;
  --pill-bg: #152238;
  --pill-fg: #FFFFFF;
  --accent: #3B5FE0;
  --accent-dark: #2646C4;
  --success: #0E9F6E;
  --pink: #DB2777;
  --pink-dark: #BE185D;
  --amber: #F59E0B;
  --amber-dark: #D97706;
  --bg: #FFFFFF;
  --bg-page: #EEF0FA;
  --row-hover: #F7F8FF;
  --row-alt: #FAFBFF;
  --danger: #DC2626;
  --shadow-sm: 0 1px 3px rgba(23, 27, 43, 0.06);
  --shadow-md: 0 8px 24px rgba(23, 27, 43, 0.08);
  --shadow-lg: 0 20px 48px rgba(30, 41, 89, 0.12);
}

* { box-sizing: border-box; }

html {
  /* A soft gradient behind the card instead of flat white -- the page
     itself now reads as a floating "product" rather than a bare form. */
  background: linear-gradient(160deg, #EEF0FA 0%, #E7EAF8 45%, #EDEFFA 100%);
  min-height: 100%;
}

body {
  margin: 0;
  color: var(--ink);
  font: 14px/1.55 "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Custom, understated scrollbars (WebKit/Blink -- silently ignored
   elsewhere, so this is purely a bonus, never a problem). */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #D3D8EC; border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: #B9C0E4; background-clip: padding-box; }

.page {
  max-width: 1180px;
  margin: 36px auto 60px;
  padding: 34px 32px 56px;
  background: var(--bg);
  border-radius: 20px;
  box-shadow: var(--shadow-lg);
  position: relative;
}
/* A thin brand-gradient edge along the top of the card -- a small,
   inexpensive detail that makes the whole thing feel designed. Rounded on
   its own corners (rather than clipping the whole .page) so dropdowns like
   the candle picker are free to render past the card's edge without being
   cut off. */
.page::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 5px;
  border-radius: 20px 20px 0 0;
  background: linear-gradient(90deg, var(--purple), var(--accent), var(--success));
}

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px; margin-bottom: 18px;
  padding-bottom: 18px; border-bottom: 1px solid var(--guide);
}
.topbar h1 {
  font-size: 23px; margin: 0; color: var(--ink); font-weight: 800;
  letter-spacing: -0.02em; display: flex; align-items: center; gap: 9px;
}
.topbar h1 .brand-mark {
  display: inline-flex; width: 30px; height: 30px; border-radius: 9px;
  background: linear-gradient(135deg, var(--purple), var(--accent));
  color: #fff; align-items: center; justify-content: center;
  box-shadow: 0 4px 10px rgba(124, 58, 237, 0.35); flex: none;
}
/* A distinct, multi-color strip for the scan-wide settings (Data / Universe
   / Examples) -- separated visually from the title above and the condition
   builder below, instead of everything crowding one row. */
.toolbar {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  background: linear-gradient(120deg, #F5F3FF 0%, #EEF2FF 45%, #ECFDF5 100%);
  border: 1px solid var(--guide); border-radius: 14px;
  padding: 12px 18px; margin: 0 0 22px;
}

.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; flex: none; }
.dot-blue { background: var(--accent); }
.dot-violet { background: var(--purple); }
.dot-teal { background: var(--success); }
.dot-amber { background: var(--amber); }
.dot-pink { background: var(--pink); }

.control { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px; font-weight: 600; }
.control select {
  font: inherit; padding: 6px 10px; border: 1px solid var(--guide); border-radius: 8px;
  color: var(--ink); background: #fff; font-weight: 600; cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.control select:hover { border-color: var(--accent); }
.control select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(59, 95, 224, 0.15); }
.control-violet select:focus { border-color: var(--purple); box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15); }
.control-teal select:focus { border-color: var(--success); box-shadow: 0 0 0 3px rgba(14, 159, 110, 0.15); }

.universe-picker summary {
  cursor: pointer; font-size: 12px; color: var(--muted); list-style: none;
  border: 1px solid var(--guide); border-radius: 8px; padding: 6px 12px; font-weight: 600;
  transition: border-color .15s, color .15s;
}
.universe-picker summary:hover { border-color: var(--accent); color: var(--ink); }
.universe-picker summary::-webkit-details-marker { display: none; }
.universe-list {
  position: absolute; margin-top: 8px; background: #fff; border: 1px solid var(--guide);
  border-radius: 12px; padding: 12px; max-height: 260px; overflow-y: auto;
  columns: 3; column-gap: 14px; box-shadow: var(--shadow-md); z-index: 10;
}
.universe-list label { display: block; font-size: 12.5px; padding: 3px 0; white-space: nowrap; }
.universe-list label:hover { color: var(--accent); }

/* Card-style toolbar -- each scan-wide setting (Universe / Data Source /
   Examples) as its own bordered card with an icon + title + caption,
   instead of the plain inline controls above. Replaces the gradient strip
   look for this row specifically ("toolbar-cards" on top of ".toolbar"). */
.toolbar.toolbar-cards {
  background: none; border: none; padding: 0; margin: 0 0 20px; align-items: stretch;
}
.toolbar-card {
  flex: 1 1 220px; min-width: 200px;
  background: #fff; border: 1px solid var(--guide); border-radius: 14px;
  padding: 14px 16px; box-shadow: var(--shadow-sm);
  transition: border-color .15s, box-shadow .15s;
}
.toolbar-card:hover { box-shadow: var(--shadow-md); }
.toolbar-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.toolbar-card-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 8px; font-size: 13px; flex: none;
}
.toolbar-card-violet .toolbar-card-icon { background: #EDE9FE; }
.toolbar-card-blue .toolbar-card-icon { background: #E0E7FB; }
.toolbar-card-amber .toolbar-card-icon { background: #FEF3C7; }
.toolbar-card-title { font-weight: 800; font-size: 12.5px; color: var(--ink); }
.toolbar-card-badge {
  margin-left: auto; background: var(--danger); color: #fff; font-size: 9.5px;
  font-weight: 800; letter-spacing: .04em; padding: 2px 6px; border-radius: 999px; flex: none;
}
.toolbar-card select {
  width: 100%; font: inherit; padding: 7px 28px 7px 10px; border: 1px solid var(--guide);
  border-radius: 8px; color: var(--ink); background: #fff; font-weight: 600; cursor: pointer;
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236B7280'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center; background-size: 14px 14px;
  transition: border-color .15s, box-shadow .15s;
}
.toolbar-card select:hover { border-color: var(--accent); }
.toolbar-card select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(59, 95, 224, 0.15); }
.toolbar-card-caption {
  display: flex; align-items: center; gap: 5px;
  font-size: 11px; color: var(--muted); font-weight: 500; margin-top: 9px;
}
/* The Market Universe card's caption doubles as the <summary> that opens
   the stock picker -- override the plain pill look .universe-picker summary
   has elsewhere so it reads as a caption line, not a button, inside here. */
.toolbar-card .universe-picker { display: block; }
.toolbar-card .universe-picker summary {
  border: none; padding: 0; background: none; list-style: none;
}
.toolbar-card .universe-picker summary:hover { color: var(--accent); }

.savebar { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; flex-wrap: wrap; }
.scan-name-input {
  font: inherit; padding: 8px 12px; border: 1px solid var(--guide); border-radius: 8px; min-width: 220px;
  transition: border-color .15s, box-shadow .15s;
}
.scan-name-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(59, 95, 224, 0.15); }
.savebar select {
  font: inherit; padding: 8px 12px; border: 1px solid var(--guide); border-radius: 8px; color: var(--ink);
  background: #fff; font-weight: 500; cursor: pointer;
}

/* "Create New" and "Load a saved scan" sit side by side, so they're built
   as a matched pair -- identical shape/size/depth, distinguished only by
   color (purple = start something new, blue = pull up something existing).
   Same raised-gradient-with-hover-lift language as the app's other primary
   buttons (Run scan, the + add button), just applied to this pair too, for
   a subtle 3D feel instead of a flat fill. */
.btn-create-new, .load-scan-select {
  font: inherit; font-weight: 700; font-size: 14px; color: #fff; cursor: pointer;
  border: none; border-radius: 10px; padding: 10px 20px;
  transition: transform .12s, box-shadow .12s;
}
.btn-create-new {
  background: linear-gradient(135deg, var(--purple), var(--purple-dark));
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.35);
}
.btn-create-new:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(124, 58, 237, 0.45); }
.btn-create-new:active { transform: translateY(1px); box-shadow: 0 2px 8px rgba(124, 58, 237, 0.35); }

/* Sits where the "Strategy Rule Builder" plain-text heading used to be --
   now an actual action instead of just a label, grouped with "Load a saved
   scan" right next to it since starting fresh and loading something saved
   are the two ways into this same rule list. */
#createNewScreenerBtn { display: inline-flex; }

.load-scan-select {
  padding-right: 38px;
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background-image:
    linear-gradient(135deg, var(--accent), var(--accent-dark)),
    url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat;
  background-position: 0 0, right 14px center;
  background-size: 100% 100%, 16px 16px;
  box-shadow: 0 4px 12px rgba(59, 95, 224, 0.35);
}
.load-scan-select:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(59, 95, 224, 0.45); }
.load-scan-select:active { transform: translateY(1px); box-shadow: 0 2px 8px rgba(59, 95, 224, 0.35); }
.load-scan-select:focus { outline: none; box-shadow: 0 0 0 3px rgba(59, 95, 224, 0.25); }
.load-scan-select option { color: var(--ink); background: #fff; font-weight: 500; }
.btn-secondary {
  font: inherit; padding: 8px 14px; border: 1px solid var(--guide); border-radius: 8px;
  background: #fff; cursor: pointer; color: var(--ink); font-weight: 600;
  transition: border-color .15s, box-shadow .15s, transform .1s;
}
.btn-secondary:hover { border-color: var(--accent); box-shadow: var(--shadow-sm); }
.btn-secondary:active { transform: translateY(1px); }

.btn-save {
  font: inherit; padding: 8px 14px; border: none; border-radius: 8px; cursor: pointer;
  color: #fff; font-weight: 700; background: linear-gradient(135deg, #14B88A, var(--success));
  box-shadow: 0 3px 10px rgba(14, 159, 110, 0.35); transition: transform .1s, box-shadow .12s;
}
.btn-save:hover { box-shadow: 0 5px 14px rgba(14, 159, 110, 0.45); }
.btn-save:active { transform: translateY(1px); }
.btn-save:disabled {
  cursor: not-allowed; color: var(--muted); background: var(--row-alt);
  box-shadow: none; opacity: 0.7;
}
.btn-save:disabled:hover { box-shadow: none; }
.btn-secondary:disabled {
  cursor: not-allowed; color: var(--muted); background: var(--row-alt);
  border-color: var(--guide); opacity: 0.7;
}
.btn-secondary:disabled:hover { border-color: var(--guide); box-shadow: none; }

/* "Watch this scan" -- red/live-feeling so it reads as "this is monitoring
   something happening right now", distinct from the neutral Save/Delete
   buttons next to it. Pulses gently once a watch is active. */
.btn-watch {
  font: inherit; padding: 8px 14px; border: 1px solid var(--guide); border-radius: 8px;
  background: #fff; cursor: pointer; color: var(--ink); font-weight: 700;
  transition: border-color .15s, box-shadow .15s, background .15s, color .15s;
}
.btn-watch:hover { border-color: var(--pink); }
.btn-watch:disabled {
  cursor: not-allowed; color: var(--muted); background: var(--row-alt);
  border-color: var(--guide); opacity: 0.7;
}
.btn-watch:disabled:hover { border-color: var(--guide); }
.btn-watch.active {
  background: linear-gradient(135deg, #F43F5E, var(--pink)); color: #fff; border-color: transparent;
  box-shadow: 0 3px 12px rgba(219, 39, 119, 0.4);
  animation: watch-pulse 2.2s ease-in-out infinite;
}
@keyframes watch-pulse {
  0%, 100% { box-shadow: 0 3px 12px rgba(219, 39, 119, 0.4); }
  50% { box-shadow: 0 3px 20px rgba(219, 39, 119, 0.7); }
}

.alerts-feed {
  background: var(--row-alt); border: 1px solid var(--guide); border-radius: 14px;
  padding: 14px 16px; margin: 0 0 22px;
}
.alerts-feed-header {
  display: flex; align-items: center; justify-content: space-between;
  font-weight: 800; font-size: 13px; margin-bottom: 10px; flex-wrap: wrap; gap: 8px;
}
.alerts-feed-header-right { display: flex; align-items: center; gap: 10px; }
.alerts-feed-header-right .btn-secondary { font-size: 12px; padding: 6px 12px; font-weight: 700; }
.market-open { color: var(--success); font-weight: 700; }
.market-closed { color: var(--muted); font-weight: 700; }

/* One block per watched scan: its Pause/Resume/Remove row, with ONLY that
   scan's own matches listed directly underneath -- not one flat feed
   mixing every watched scan's matches together. */
.watch-groups { display: flex; flex-direction: column; gap: 14px; }
.watch-group { display: flex; flex-direction: column; gap: 6px; }
.watch-row {
  display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--guide);
  border-radius: 8px; padding: 6px 10px; font-size: 12.5px;
}
.watch-name { font-weight: 700; margin-right: auto; }
.watch-row .btn-secondary { padding: 4px 10px; font-size: 12px; }
.dot-muted { background: #C7CCDB; }

.watch-alerts {
  display: flex; flex-direction: column; gap: 6px; max-height: 220px;
  overflow-y: auto; padding-left: 10px;
}
.watch-alerts-empty { padding: 2px 2px 2px 0; }
.alert-item {
  background: #fff; border: 1px solid var(--guide); border-radius: 8px;
  padding: 8px 12px; font-size: 13px; animation: alert-in .25s ease-out;
}
@keyframes alert-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.create-new-row { display: flex; justify-content: flex-start; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }

.section-label {
  font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted); margin: 4px 2px 6px;
}

.rules-list {
  background: var(--row-alt);
  border: 1px solid var(--guide);
  border-radius: 14px;
  margin: 12px 0 8px;
  padding: 8px 14px;
}

/* Rule builder's main column. Used to sit alongside a candle-pattern
   sidebar (.candle-board, removed) in a flex row -- kept as its own class
   (rather than folded away) since .rules-builder-row still wraps it and
   min-width: 0 still matters for the rule rows' own wrapping behavior. */
.rules-builder-row { display: flex; align-items: flex-start; gap: 14px; }
.rules-builder-main { flex: 1; min-width: 0; }

.rule-row {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 1.5px; padding: 10px 4px; border-radius: 8px;
  font-size: 12.5px;
  box-shadow: inset 3px 0 0 transparent;
  transition: background .15s, box-shadow .15s;
}
.rule-row:not(:last-child) { border-bottom: 1px dashed var(--guide); }
.rule-row:hover { background: var(--row-hover); box-shadow: inset 3px 0 0 var(--purple); }

/* Each condition's number gets its own little gradient badge, cycling
   through the palette -- an easy visual anchor when a scan has many rows.
   A pill ("RULE 1") rather than a bare number in a circle, so it reads on
   its own without relying on position in the row. */
.row-index {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 4px 8px; border-radius: 999px; color: #fff;
  font-weight: 800; font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase;
  margin-right: 6px; flex: none;
}
.row-index.idx-violet { background: linear-gradient(135deg, var(--purple), var(--purple-dark)); }
.row-index.idx-blue   { background: linear-gradient(135deg, var(--accent), var(--accent-dark)); }
.row-index.idx-teal   { background: linear-gradient(135deg, #14B88A, var(--success)); }
.row-index.idx-amber  { background: linear-gradient(135deg, #FBBF24, var(--amber-dark)); }
.row-index.idx-pink   { background: linear-gradient(135deg, #F472B6, var(--pink)); }

/* A condition switched off via the "eye" toggle -- stays in the list
   (easy to turn back on) but visibly greyed out, and has zero effect on
   the scan (see engine.py's _active_rules). */
.rule-row.disabled { opacity: 0.45; }
.rule-row.disabled:hover { opacity: 0.65; }

/* Extra room at the bottom so a formula bracket (below) has somewhere to
   sit without nudging the row's own vertical centering. */
.rule-row.has-formula { padding-bottom: 21px; }

/* Groups every field belonging to one side of the comparison (offset,
   timeframe, field, and -- once "fx" is clicked -- the math operator plus
   its second operand) into a single unit. Keeping them as one flex item
   means a formula's fields wrap together instead of splitting mid-formula
   across two lines. */
.operand-group {
  display: inline-flex; align-items: center; flex-wrap: wrap;
  gap: 2px; position: relative;
}

/* Each field in a condition rendered as its own bordered "filter chip" box
   (dropdown chevron + white background) instead of the old inline-sentence
   look -- a uniform row of boxes, matching the toolbar's own selects. */
.plain-select, .plain-number {
  font: inherit; border: 1px solid var(--guide); background: #fff; cursor: pointer;
  padding: 6px 5px; border-radius: 8px; color: var(--ink); font-weight: 600;
  transition: border-color .15s, box-shadow .15s;
}
.plain-select {
  padding-right: 17px;
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236B7280'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 4px center; background-size: 11px 11px;
}
.plain-select:hover, .plain-number:hover { border-color: var(--accent); }
.plain-select:focus, .plain-number:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(59, 95, 224, 0.15); background: #fff;
}
/* Native up/down spin arrows eat most of the box at this width and clip
   the digit itself (a lone "0" was rendering as a stray "("); hidden so
   the full width goes to the number. */
.plain-number {
  width: 2.8em; text-align: center; font-weight: 700;
  -moz-appearance: textfield; appearance: textfield;
}
.plain-number::-webkit-outer-spin-button, .plain-number::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}

/* All field kinds now share the same neutral box styling -- the row reads
   as a clean filter bar rather than color-coded sentence fragments. Cross
   Operations (Crossed above / below) keep a touch of color so that specific
   check still stands out as a different KIND of comparison. */
.plain-select.operator.cross { color: var(--pink); border-color: #F5B9D6; }
.plain-select.anchor { font-size: 11.5px; }

/* The operator list includes some long labels ("Greater than equal to") --
   capped so ONE long pick can't blow out the whole row's width; the
   dropdown menu itself still lists every option in full. Timeframe/field
   stay uncapped -- "15 minute" and "Volume" are common enough picks that
   clipping them hurt readability more than the width was worth. */
.plain-select.operator { max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plain-select.comparetype { max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* A box still showing its own name ("Timeframe", "Field"...) rather than a
   real pick -- lighter and unbolded so an unfinished condition reads as
   obviously incomplete at a glance, not just another filled-in choice. */
.plain-select.placeholder { color: var(--muted); font-weight: 500; font-style: italic; }

/* The little period box that appears right after picking EMA, e.g. "EMA [20]" */
.plain-number.ema-period { width: 2.6em; color: var(--success); border-color: #0E9F6E66; }

/* Chartink's own [0] / [-1] / [=2] candle-offset notation -- click the
   number to pick a candle from a dropdown, Chartink-style, instead of
   typing it. Rendered as the same bordered box as the rest of the row
   (brackets hidden) so it reads as just another filter field. */
.bracket-offset { display: inline-flex; align-items: center; margin: 0; position: relative; }
.bracket-char { display: none; }
.bracket-trigger {
  font: inherit; border: 1px solid var(--guide); background: #fff; cursor: pointer;
  padding: 6px 18px 6px 6px; border-radius: 8px; color: var(--ink); font-weight: 600;
  text-align: center; min-width: 2.2em; transition: border-color .15s, box-shadow .15s;
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236B7280'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 5px center; background-size: 12px 12px;
}
.bracket-trigger:hover, .bracket-trigger.open { border-color: var(--accent); }
.bracket-trigger:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(59, 95, 224, 0.15); }

.bracket-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 60;
  background: #fff; border: 1px solid var(--guide); border-radius: 12px;
  box-shadow: var(--shadow-md); width: 200px; overflow: hidden;
  font-size: 13px; text-align: left;
}
.bracket-menu-tabs { display: flex; gap: 4px; padding: 8px 8px 0; }
.bracket-menu-tab {
  flex: 1; text-align: center; padding: 5px 0; border-radius: 6px; cursor: pointer;
  font-size: 11px; font-weight: 700; color: var(--muted); background: var(--row-alt);
  transition: background .12s, color .12s;
}
.bracket-menu-tab:hover { color: var(--ink); }
.bracket-menu-tab.active { background: var(--purple); color: #fff; }
.bracket-menu-header {
  padding: 10px 14px 4px; font-size: 10.5px; color: var(--muted); font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
}
.bracket-menu-item {
  padding: 8px 14px; cursor: pointer; color: var(--ink); font-weight: 600;
  transition: background .1s;
}
.bracket-menu-item:hover { background: var(--row-hover); }
.bracket-menu-item.selected { background: var(--purple); color: #fff; }
.bracket-menu-item.selected:hover { background: var(--purple); }
.bracket-menu-item.custom {
  border-top: 1px solid var(--guide); color: var(--muted); font-weight: 500; font-style: italic;
  margin-top: 4px;
}
.bracket-menu-item.custom:hover { background: var(--row-hover); color: var(--ink); }

/* The "ƒx" math-operation button, e.g. turning "High" into "High / Low" --
   a small vivid gradient chip so it reads as a fun extra, not a stray
   letter, matching the same "click me" energy as the rest of the toolkit. */
.formula-toggle {
  border: none; cursor: pointer; color: #fff;
  font-size: 10.5px; font-weight: 800; padding: 4px 8px; border-radius: 999px;
  margin: 0 2px; font-style: italic; line-height: 1;
  background: linear-gradient(135deg, var(--pink), var(--purple));
  box-shadow: 0 2px 8px rgba(139, 47, 194, 0.35);
  transition: transform .12s, box-shadow .12s;
}
.formula-toggle:hover { transform: translateY(-1px) scale(1.06); box-shadow: 0 4px 12px rgba(139, 47, 194, 0.5); }
.formula-toggle:active { transform: translateY(0) scale(1); }
.plain-select.mathop { color: var(--purple-dark); font-weight: 700; max-width: 40px; }
.plain-select.mathop option { color: var(--purple-dark); font-weight: 700; }
.formula-remove {
  border: none; background: none; cursor: pointer; color: var(--danger);
  opacity: 0.6; padding: 3px 3px; border-radius: 6px; margin-left: 0;
  display: inline-flex; align-items: center; transition: background .12s, opacity .12s;
}
.formula-remove:hover { opacity: 1; background: #FCEBEB; }
.formula-remove svg { display: block; }

/* The moment "fx" turns a side into a formula, draw a bracket spanning the
   full width of that side's fields -- so it's visible at a glance exactly
   where the calculation starts and ends, before the row's main comparison
   operator takes over. */
.operand-group.has-formula::after {
  content: "";
  position: absolute;
  left: 1px; right: 1px; bottom: -14px;
  height: 8px;
  border-left: 1.5px solid var(--accent);
  border-right: 1.5px solid var(--accent);
  border-bottom: 1.5px solid var(--accent);
  border-radius: 0 0 5px 5px;
  opacity: 0.8;
  pointer-events: none;
}

.value-pill {
  background: #fff; color: var(--ink); font-weight: 700; font-family: inherit;
  border: 1px solid var(--guide); border-radius: 8px; padding: 7px 6px; width: 5.6em; text-align: center;
  transition: border-color .15s, box-shadow .15s;
}
.value-pill:hover { border-color: var(--accent); }
.value-pill:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(59, 95, 224, 0.15); }

.row-icons { margin-left: 2px; display: flex; gap: 1px; }
.row-icons button {
  border: none; background: none; cursor: pointer; color: #A3ACC2;
  font-size: 14px; padding: 4px 4px; border-radius: 6px; transition: background .12s, color .12s;
}
.row-icons button:hover { color: var(--purple); background: #F1EBFC; }
.row-icons button.remove:hover { color: var(--danger); background: #FCEBEB; }
.row-icons button.toggle-disable.active { color: var(--success); }
.row-icons button.toggle-disable:hover { color: var(--success); background: #E7F8F1; }
.row-icons button svg { display: block; }

/* A quick "this condition = a green/red candle" flag, shown only when a
   condition is literally comparing one candle's Close to its own Open --
   the extreme-right position (last thing in the row) is deliberate, so it
   reads as the row's final verdict rather than another input field. */
.candle-badge {
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: 4px; padding: 4px 5px; border-radius: 6px; flex: none;
}
.candle-badge svg { display: block; }
.candle-badge.bull { color: var(--success); background: #E7F8F1; }
.candle-badge.bear { color: var(--danger); background: #FCEBEB; }

.row-actions { display: flex; gap: 12px; align-items: center; margin: 22px 0 12px; flex-wrap: wrap; }

/* How far back "Test History" (backtest) walks -- sits right above the
   action-card row so it reads as "this controls Test History", without
   needing to nest a <select> inside that button itself. Defaults to the
   shortest window (2 days) since walking a strategy's full available
   history (months, for Daily rules) is what made backtests slow and the
   results list huge -- most of the time only the last few days matter. */
.backtest-period-row { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; flex-wrap: wrap; }
.backtest-period-label { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.backtest-period-row select {
  font: inherit; padding: 6px 28px 6px 10px; border: 1px solid var(--guide); border-radius: 8px;
  color: var(--ink); background: #fff; font-weight: 600; cursor: pointer;
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236B7280'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center; background-size: 14px 14px;
  transition: border-color .15s, box-shadow .15s;
}
.backtest-period-row select:hover { border-color: var(--accent); }
.backtest-period-row select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(59, 95, 224, 0.15); }

/* Card-style action row -- Find Matches / Test History / Save Strategy /
   Update Strategy / Enable Monitoring / Clear All, each a big colored
   button with an icon, bold title and a small subtitle underneath, instead
   of plain text buttons. */
.action-cards { display: flex; gap: 11px; align-items: stretch; margin: 0 0 26px; flex-wrap: wrap; }
.action-card {
  display: flex; align-items: center; gap: 9px;
  flex: 1 1 171px; min-width: 171px;
  border: none; border-radius: 11px; padding: 11px 14px; cursor: pointer;
  text-align: left; transition: transform .12s, box-shadow .12s, opacity .12s;
  color: #fff; font: inherit;
}
.action-card:hover { transform: translateY(-1px); }
.action-card:active { transform: translateY(0); }
.action-card-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 27px; height: 27px; border-radius: 7px; font-size: 13.5px; flex: none;
  background: rgba(255, 255, 255, 0.22);
}
.action-card-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.action-card-title {
  font-weight: 800; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.action-card-subtitle {
  font-size: 9.5px; font-weight: 600; opacity: 0.85; line-height: 1.25;
}

.action-card-purple { background: linear-gradient(135deg, var(--purple), var(--purple-dark)); box-shadow: 0 4px 14px rgba(124, 58, 237, 0.35); }
.action-card-purple:hover { box-shadow: 0 6px 18px rgba(124, 58, 237, 0.45); }
.action-card-green { background: linear-gradient(135deg, #14B88A, var(--success)); box-shadow: 0 4px 14px rgba(14, 159, 110, 0.35); }
.action-card-green:hover { box-shadow: 0 6px 18px rgba(14, 159, 110, 0.45); }
.action-card-blue { background: linear-gradient(135deg, var(--accent), var(--accent-dark)); box-shadow: 0 4px 14px rgba(59, 95, 224, 0.35); }
.action-card-blue:hover { box-shadow: 0 6px 18px rgba(59, 95, 224, 0.45); }
.action-card-orange { background: linear-gradient(135deg, var(--amber), var(--amber-dark)); box-shadow: 0 4px 14px rgba(217, 119, 6, 0.4); }
.action-card-orange:hover { box-shadow: 0 6px 18px rgba(217, 119, 6, 0.5); }
.action-card-orange.active {
  background: linear-gradient(135deg, #F43F5E, var(--pink)); box-shadow: 0 3px 12px rgba(219, 39, 119, 0.4);
  animation: watch-pulse 2.2s ease-in-out infinite;
}

.action-card-outline {
  background: #fff; color: var(--ink); border: 1px solid var(--guide);
  flex: 0 1 171px; min-width: 171px; box-shadow: none;
}
.action-card-outline .action-card-icon { background: var(--row-alt); color: var(--muted); }
.action-card-outline:hover { border-color: var(--accent); box-shadow: var(--shadow-sm); }
.action-card-outline .action-card-subtitle { color: var(--muted); }

.action-card:disabled {
  cursor: not-allowed; opacity: 0.55; transform: none !important; box-shadow: none !important;
}
.action-card:disabled:hover { transform: none; box-shadow: none; border-color: var(--guide); }

@media (max-width: 900px) {
  .action-card { flex: 1 1 45%; }
}
.btn-add {
  width: 36px; height: 36px; border-radius: 10px; border: none;
  background: linear-gradient(135deg, var(--purple), var(--purple-dark)); color: #fff;
  font-size: 18px; cursor: pointer; box-shadow: 0 4px 12px rgba(124, 58, 237, 0.35);
  transition: transform .12s, box-shadow .12s;
}
.btn-add:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(124, 58, 237, 0.45); }
.btn-add:active { transform: translateY(0); }

.btn-run {
  padding: 10px 24px; border-radius: 10px; border: none;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark)); color: #fff;
  font-weight: 700; font-size: 14px; cursor: pointer;
  box-shadow: 0 4px 14px rgba(59, 95, 224, 0.35); transition: transform .12s, box-shadow .12s;
}
.btn-run:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(59, 95, 224, 0.45); }
.btn-run:active { transform: translateY(0); }

/* Run scan (cool blue, "right now") and Backtest (warm amber, "the past")
   -- a deliberate temperature split so the two actions read as different
   kinds of question at a glance, not just two buttons in a row. */
.btn-backtest {
  background: linear-gradient(135deg, var(--amber), var(--amber-dark));
  box-shadow: 0 4px 14px rgba(217, 119, 6, 0.4);
}
.btn-backtest:hover { box-shadow: 0 6px 18px rgba(217, 119, 6, 0.5); }

.results-panel { margin-top: 10px; }
.results-banner:not([hidden]) {
  font-size: 14px; padding: 12px 16px; border-radius: 10px; margin-bottom: 14px;
  font-weight: 600; display: flex; align-items: center; gap: 8px;
}
.results-banner.ok { background: #EAF7EF; color: #166534; border: 1px solid #BEEBD1; }
.results-banner.error { background: #FCEBEB; color: #991B1B; border: 1px solid #F5C6C6; }
.results-banner.info { background: #EEF1FA; color: var(--muted); border: 1px solid var(--guide); }
.results-banner.warning { background: #FEF3C7; color: var(--amber-dark); border: 1px solid #FDE68A; }

/* While a scan/backtest is running: the text row stacks above a thin,
   indeterminate progress bar -- indeterminate on purpose, since we don't
   know in advance how long a run will take (it depends on universe size
   and how far back the period picker goes), so a moving band of color
   sweeping the track reads as "still working" without pretending to know
   a percentage or an ETA. */
.results-banner.loading { flex-direction: column; align-items: stretch; gap: 10px; }
.results-banner-text { display: flex; align-items: center; gap: 8px; }
.progress-bar-thin {
  position: relative; height: 4px; border-radius: 4px; overflow: hidden;
  background: var(--guide);
}
.progress-bar-thin::before {
  content: "";
  position: absolute; top: 0; bottom: 0; left: -35%; width: 35%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--purple), var(--accent), var(--success));
  animation: progress-bar-sweep 1.3s ease-in-out infinite;
}
@keyframes progress-bar-sweep {
  0%   { left: -35%; }
  100% { left: 100%; }
}

/* Determinate variant -- used only for a "Slow (Live)" scan/backtest, where
   the server actually knows how many stocks are done vs. total (see
   /api/scan/progress) and a real fill + percentage + ETA is possible,
   instead of the indeterminate sweep above which is for Fast/Demo runs
   where there's genuinely nothing to measure. */
.progress-bar-track {
  position: relative; height: 8px; border-radius: 6px; overflow: hidden;
  background: var(--guide);
}
.progress-bar-fill {
  height: 100%; border-radius: 6px;
  background: linear-gradient(90deg, var(--purple), var(--accent));
  transition: width 0.5s ease;
}
.progress-bar-meta {
  display: flex; justify-content: space-between; font-size: 12px; font-weight: 600;
  color: var(--muted);
}

table.results-table {
  width: 100%; border-collapse: collapse; font-size: 13.5px;
  border: 1px solid var(--guide); border-radius: 12px; overflow: hidden;
}
table.results-table th, table.results-table td {
  text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--guide);
}
table.results-table th {
  color: var(--muted); font-weight: 700; font-size: 11.5px; text-transform: uppercase;
  letter-spacing: 0.04em; background: var(--row-alt);
}
table.results-table tbody tr { transition: background .12s; }
table.results-table tbody tr:nth-child(even) { background: #FCFCFF; }
table.results-table tbody tr:hover { background: #F1EFFD; }
table.results-table tbody tr:last-child td { border-bottom: none; }
table.results-table td:nth-child(3) { font-family: "SFMono-Regular", Consolas, monospace; font-weight: 700; }

/* Small colored badge wrapping the Timeframe cell in results tables -- a
   different hue per timeframe, so a scan mixing timeframes is easy to scan
   visually (pun intended) instead of everyone reading the same color. */
.tf-badge {
  display: inline-block; background: #EDE9FE; color: var(--purple-dark);
  font-weight: 700; font-size: 11.5px; padding: 3px 9px; border-radius: 999px;
}
.tf-badge.tf-5m  { background: #FCE7F3; color: var(--pink-dark); }
.tf-badge.tf-15m { background: #FEF3C7; color: var(--amber-dark); }
.tf-badge.tf-1h  { background: #E0E7FB; color: var(--accent-dark); }
.tf-badge.tf-day { background: #EDE9FE; color: var(--purple-dark); }

.hint { font-size: 12px; color: var(--muted); margin: 4px 0 14px; }
#universeWarning {
  background: #FFF7E6; color: #92650A; border: 1px solid #F5D488;
  border-radius: 8px; padding: 8px 12px; margin: 4px 0 12px; font-weight: 500;
}

/* ---------- account widget (topbar, right side) ---------- */
.account-widget { position: relative; }
#accountBtn { font-size: 12px; padding: 7px 12px; }
.account-panel {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 20;
  width: 220px; background: #fff; border: 1px solid var(--guide);
  border-radius: 12px; box-shadow: var(--shadow-lg); padding: 12px;
}
#logoutBtn { width: 100%; color: var(--danger); border-color: #F4C7C3; }
#logoutBtn:hover { border-color: var(--danger); }

/* ---------- mobile alerts bar -- now lives inside the popup, not the
   main dashboard (see .modal-overlay below) ---------- */
.mobile-alerts-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: linear-gradient(120deg, #FDF2F8 0%, #FCE7F3 100%);
  border: 1px solid #FBCFE8; border-radius: 12px;
  padding: 10px 16px; margin: 0; font-size: 12.5px;
}
.mobile-alerts-icon { font-size: 15px; }
.mobile-alerts-label { font-weight: 700; color: var(--pink-dark); }
.mobile-alerts-bar code {
  background: #fff; border: 1px solid #FBCFE8; border-radius: 6px;
  padding: 3px 8px; font-weight: 700; color: var(--pink-dark); font-size: 12.5px;
}
.mobile-alerts-bar button { padding: 5px 10px; font-size: 12px; }
.mobile-alerts-hint { flex-basis: 100%; margin: 2px 0 0; color: #9D3A6B; }

/* ---------- generic popup dialog -- used by the "Get Alerts on Mobile" modal ---------- */
.modal-overlay {
  position: fixed; inset: 0; z-index: 300; background: rgba(15, 23, 42, 0.45); padding: 16px;
}
/* Explicit [hidden] override -- a bare `display: flex` on .modal-overlay
   would otherwise tie in specificity with the browser's built-in
   `[hidden] { display: none }` rule and (depending on stylesheet order)
   can win, leaving the overlay visually covering the page -- and
   intercepting clicks -- even while "hidden" is set. */
.modal-overlay:not([hidden]) { display: flex; align-items: center; justify-content: center; }
.modal-card {
  background: var(--bg); border-radius: 16px; padding: 20px 22px;
  max-width: 480px; width: 100%; box-shadow: var(--shadow-lg);
}
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  font-weight: 800; font-size: 15px; margin-bottom: 14px; color: var(--ink);
}
.modal-close {
  background: none; border: none; font-size: 15px; cursor: pointer; color: var(--muted);
  padding: 3px 8px; border-radius: 6px; line-height: 1;
}
.modal-close:hover { background: var(--row-alt); color: var(--ink); }
.modal-actions { display: flex; align-items: center; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
.modal-actions .btn-run { padding: 8px 16px; }

/* ---------- login / signup page ---------- */
.auth-page {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, #EEF0FA 0%, #E7EAF8 45%, #EDEFFA 100%);
}
.auth-card {
  width: 100%; max-width: 380px; background: var(--bg); border-radius: 18px;
  box-shadow: var(--shadow-lg); padding: 32px 28px; margin: 20px;
}
.auth-brand {
  font-size: 21px; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 22px;
  display: flex; align-items: center; gap: 9px; color: var(--ink);
}
.auth-brand .brand-mark {
  display: inline-flex; width: 30px; height: 30px; border-radius: 9px;
  background: linear-gradient(135deg, var(--purple), var(--accent));
  color: #fff; align-items: center; justify-content: center;
  box-shadow: 0 4px 10px rgba(124, 58, 237, 0.35); flex: none;
}
.auth-tabs { display: flex; gap: 6px; margin-bottom: 20px; background: var(--row-alt); padding: 4px; border-radius: 10px; }
.auth-tab {
  flex: 1; font: inherit; font-weight: 700; padding: 8px; border: none; border-radius: 8px;
  background: transparent; color: var(--muted); cursor: pointer;
}
.auth-tab.active { background: #fff; color: var(--ink); box-shadow: var(--shadow-sm); }
.auth-field { display: block; margin-bottom: 14px; }
.auth-field span { display: block; font-size: 12px; font-weight: 700; color: var(--muted); margin-bottom: 5px; }
.auth-field input {
  width: 100%; font: inherit; padding: 10px 12px; border: 1px solid var(--guide);
  border-radius: 8px; color: var(--ink);
}
.auth-field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(59, 95, 224, 0.15); }
.auth-error {
  background: #FDECEC; color: var(--danger); border: 1px solid #F4C7C3;
  border-radius: 8px; padding: 8px 12px; margin-bottom: 14px; font-size: 13px; font-weight: 600;
}
.auth-submit { width: 100%; justify-content: center; margin-top: 4px; }
.auth-divider {
  display: flex; align-items: center; gap: 10px; margin: 18px 0;
  color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
}
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--guide); }
.btn-google {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px;
  font: inherit; font-weight: 600; font-size: 14px; padding: 10px 12px;
  border: 1px solid var(--guide); border-radius: 8px; background: #fff; color: var(--ink);
  cursor: pointer; text-decoration: none;
}
.btn-google:hover { background: var(--row-alt); }
.btn-google svg { flex: none; }

/* ---------- admin dashboard: account status badges ---------- */
.status-badge {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.02em;
}
.status-badge.status-pending  { background: #FEF3C7; color: #92650A; }
.status-badge.status-approved { background: #D1FAE5; color: #067A55; }
.status-badge.status-blocked  { background: #FDECEC; color: var(--danger); }
.status-badge.status-admin    { background: #EDE9FE; color: var(--purple-dark); }
#usersTable td { vertical-align: middle; }

.category-badge {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.02em;
}
.category-badge.category-demo    { background: #FEF3C7; color: #92650A; }
.category-badge.category-premium { background: #D1FAE5; color: #067A55; }

/* ---------- Demo tier: topbar badge + "locked feature" toast ---------- */
.demo-badge:not([hidden]) {
  display: inline-flex; align-items: center; padding: 4px 10px; margin-right: 8px;
  border-radius: 999px; background: #FEF3C7; color: #92650A;
  font-size: 11px; font-weight: 800; letter-spacing: 0.04em;
}

.premium-toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%);
  background: #1F2430; color: #fff; padding: 11px 20px; border-radius: 10px;
  font-size: 13px; font-weight: 600; box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  z-index: 300; max-width: min(420px, calc(100vw - 32px)); text-align: center;
  animation: premium-toast-in 0.18s ease-out;
}
@keyframes premium-toast-in {
  from { opacity: 0; transform: translateX(-50%) translateY(8px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
#usersTable button { font-size: 12px; padding: 6px 10px; }

/* =====================================================================
   Screener Pro app shell: sidebar + header + section content
   (index.html only -- login.html/admin.html keep the old .page card)
   ===================================================================== */

.app-shell { display: flex; min-height: 100vh; background: var(--bg-page); align-items: stretch; }

.sidebar-backdrop { display: none; }

.sidebar {
  width: 240px; flex: none; background: var(--bg); border-right: 1px solid var(--guide);
  display: flex; flex-direction: column; padding: 22px 14px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto; z-index: 40;
}
.sidebar-brand { display: flex; align-items: center; gap: 10px; padding: 0 8px 22px; }
.sidebar-brand .brand-mark {
  display: inline-flex; width: 32px; height: 32px; border-radius: 9px;
  background: linear-gradient(135deg, var(--purple), var(--accent)); color: #fff;
  align-items: center; justify-content: center; box-shadow: 0 4px 10px rgba(124, 58, 237, 0.35); flex: none;
}
.sidebar-brand-name { font-weight: 800; font-size: 15.5px; color: var(--ink); letter-spacing: -0.02em; line-height: 1.2; }
.sidebar-brand-tag { font-size: 8.5px; font-weight: 800; color: var(--muted); letter-spacing: 0.08em; margin-top: 2px; }

.sidebar-nav { display: flex; flex-direction: column; gap: 3px; }
.nav-item {
  display: flex; align-items: center; gap: 10px; text-align: left; width: 100%;
  font: inherit; font-weight: 700; font-size: 13.5px; color: var(--muted);
  background: none; border: none; border-radius: 10px; padding: 10px 12px; cursor: pointer;
  transition: background .12s, color .12s;
}
.nav-item:hover { background: var(--row-alt); color: var(--ink); }
.nav-item.active {
  background: linear-gradient(135deg, var(--purple), var(--purple-dark)); color: #fff;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
}

.sidebar-upgrade {
  margin-top: 18px; background: linear-gradient(160deg, #FFFBEB, #FEF3C7);
  border: 1px solid #FDE68A; border-radius: 14px; padding: 14px;
}
.sidebar-upgrade-title { font-weight: 800; font-size: 12.5px; color: #92650A; margin-bottom: 9px; }
.sidebar-upgrade ul { list-style: none; margin: 0 0 12px; padding: 0; font-size: 11.5px; color: #7C5A0A; display: flex; flex-direction: column; gap: 4px; }
.btn-upgrade-now {
  width: 100%; border: none; border-radius: 8px; padding: 9px; font-weight: 800; font-size: 12px;
  color: #fff; background: linear-gradient(135deg, var(--amber), var(--amber-dark)); cursor: pointer;
  transition: transform .12s, box-shadow .12s;
}
.btn-upgrade-now:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(217, 119, 6, 0.4); }

.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.app-header {
  display: flex; align-items: center; gap: 16px; padding: 14px 28px;
  background: var(--bg); border-bottom: 1px solid var(--guide); position: sticky; top: 0; z-index: 30;
}
.sidebar-toggle {
  display: none; width: 34px; height: 34px; border: 1px solid var(--guide); background: #fff;
  border-radius: 8px; cursor: pointer; font-size: 15px; flex: none; align-items: center; justify-content: center;
}
.header-search { flex: 1; max-width: 420px; }
.header-search input {
  width: 100%; font: inherit; font-size: 12.5px; padding: 8px 14px; border: 1px solid var(--guide);
  border-radius: 999px; background: var(--row-alt); color: var(--muted); cursor: not-allowed;
}
.header-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; flex: none; }
.header-icon-btn {
  font: inherit; font-weight: 700; font-size: 12.5px; color: var(--muted);
  background: none; border: none; cursor: pointer; display: inline-flex; align-items: center; gap: 4px;
  padding: 7px 10px; border-radius: 8px; position: relative; transition: background .12s, color .12s;
}
.header-icon-btn:hover { background: var(--row-alt); color: var(--ink); }
.notif-badge:not([hidden]) {
  position: absolute; top: 2px; right: 2px; background: var(--danger); color: #fff;
  font-size: 9px; font-weight: 800; min-width: 15px; height: 15px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center; padding: 0 3px; line-height: 1;
}

/* No max-width cap -- a condition row with formulas active on both sides
   can get very wide, so the builder should use every pixel the window
   actually has rather than leaving space idle on wider screens. */
.app-content { padding: 24px 28px 60px; width: 100%; margin: 0 auto; box-sizing: border-box; }
.app-section[hidden] { display: none; }

.page-title { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 20px; }
.page-title-icon {
  display: inline-flex; width: 38px; height: 38px; border-radius: 10px; flex: none;
  background: linear-gradient(135deg, var(--purple), var(--accent)); color: #fff;
  align-items: center; justify-content: center; font-size: 18px;
  box-shadow: 0 4px 10px rgba(124, 58, 237, 0.3);
}
.page-title h1 { margin: 0; font-size: 20px; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; }
.page-subtitle { font-size: 12.5px; color: var(--muted); margin-top: 2px; }

.section-card-header { display: flex; align-items: center; gap: 10px; margin: 24px 0 4px; }
.section-card-icon {
  display: inline-flex; width: 30px; height: 30px; border-radius: 8px; flex: none;
  background: var(--row-alt); border: 1px solid var(--guide); align-items: center; justify-content: center; font-size: 14px;
}
.section-card-title { font-weight: 800; font-size: 14px; color: var(--ink); }
.section-card-subtitle { font-size: 11.5px; color: var(--muted); }

.load-example-select {
  font: inherit; font-weight: 700; font-size: 13px; color: #fff; cursor: pointer;
  border: none; border-radius: 10px; padding: 10px 34px 10px 16px;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.35);
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background-image:
    linear-gradient(135deg, var(--purple), var(--purple-dark)),
    url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat;
  background-position: 0 0, right 12px center;
  background-size: 100% 100%, 16px 16px;
  transition: transform .12s, box-shadow .12s;
}
.load-example-select:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(124, 58, 237, 0.45); }
.load-example-select option { color: var(--ink); background: #fff; font-weight: 500; }

/* Sized and weighted to match the rule row's own filter chips
   (.plain-select/.plain-number: font-size 12.5px, font-weight 600, 8px
   radius) rather than standing out as a bigger, bolder control of its own --
   it's part of the same row of filters, just the one that adds another. */
.btn-add-rule {
  font: inherit; font-weight: 600; font-size: 12.5px; padding: 7px 14px; border: none; border-radius: 8px;
  color: #fff; cursor: pointer; background: linear-gradient(135deg, var(--purple), var(--purple-dark));
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.35); transition: transform .12s, box-shadow .12s;
}
.btn-add-rule:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(124, 58, 237, 0.45); }
.btn-add-rule:active { transform: translateY(1px); }

.results-section-header {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  margin: 30px 0 12px;
}
.results-section-header-left { display: flex; align-items: center; gap: 10px; }
.results-icon {
  display: inline-flex; width: 36px; height: 36px; border-radius: 9px; flex: none;
  background: var(--row-alt); border: 1px solid var(--guide); align-items: center; justify-content: center; font-size: 16px;
}
.results-title { font-weight: 800; font-size: 14.5px; color: var(--ink); }
.results-subtitle { font-size: 11.5px; color: var(--muted); }
.results-section-header-right { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--muted); }
.icon-btn {
  border: 1px solid var(--guide); background: #fff; border-radius: 8px; width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 14px;
  transition: border-color .15s, transform .3s;
}
.icon-btn:hover { border-color: var(--accent); }
.icon-btn:active { transform: rotate(180deg); }

table.results-table td:last-child { white-space: nowrap; }
.view-chart-btn {
  border: none; background: none; color: var(--accent); font-weight: 700; cursor: pointer; font-size: 12.5px;
  display: inline-flex; align-items: center; gap: 3px; padding: 2px 0;
}
.view-chart-btn:hover { text-decoration: underline; }

.pagination:not([hidden]) {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  margin-top: 14px; font-size: 12.5px; color: var(--muted);
}
.page-size-label select { font: inherit; padding: 4px 8px; border: 1px solid var(--guide); border-radius: 6px; margin: 0 4px; }
.page-controls { display: flex; align-items: center; gap: 8px; }
.page-btn {
  border: 1px solid var(--guide); background: #fff; border-radius: 6px; width: 26px; height: 26px;
  cursor: pointer; font-size: 14px; display: inline-flex; align-items: center; justify-content: center;
}
.page-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.page-current {
  min-width: 24px; height: 24px; border-radius: 6px; background: var(--purple); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px;
}

/* ---------- Saved Strategies list ---------- */
.strategies-list { display: flex; flex-direction: column; gap: 10px; }
.strategy-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  background: var(--row-alt); border: 1px solid var(--guide); border-radius: 12px; padding: 12px 16px;
}
.strategy-row-name { font-weight: 800; font-size: 13.5px; color: var(--ink); }
.strategy-row-sub { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.strategy-row-actions { display: flex; gap: 8px; flex: none; }
.strategy-row-actions .btn-secondary { font-size: 12px; padding: 6px 12px; }

/* ---------- generic info card (Backtest / Settings / Help sections) ---------- */
.info-card {
  background: var(--row-alt); border: 1px solid var(--guide); border-radius: 14px;
  padding: 18px 20px; margin-bottom: 16px; font-size: 13.5px; line-height: 1.6;
}
.settings-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 0; border-bottom: 1px solid var(--guide);
}
.settings-row:last-child { border-bottom: none; }
.settings-label { font-weight: 700; color: var(--muted); font-size: 12.5px; }

/* ---------- narrow widths: sidebar becomes an off-canvas drawer ---------- */
@media (max-width: 880px) {
  .sidebar-toggle { display: inline-flex; }
  .header-search { display: none; }
  .sidebar {
    position: fixed; left: 0; top: 0; transform: translateX(-100%);
    transition: transform .2s ease; box-shadow: var(--shadow-lg);
  }
  .app-shell.sidebar-open .sidebar { transform: translateX(0); }
  .sidebar-backdrop:not([hidden]) {
    display: block; position: fixed; inset: 0; background: rgba(15, 23, 42, 0.45); z-index: 35;
  }
  .app-content { padding: 18px 16px 48px; }
  .app-header { padding: 12px 16px; }
  .row-actions { gap: 8px; }
}