/* Shared finishing layer. Text accents and button fills are deliberately separate:
   a green that works behind white text does not work as text on a dark surface. */
html:root, html[data-theme="light"], html body.so-modern {
  color-scheme: light;
  --bg: #f6f7f4; --card: #ffffff; --soft: #eef1ed;
  --ink: #202923; --muted: #57635b; --line: #d3dad4;
  --forest: #245c42; --forest2: #1b4833; --focus: #246b49;
  --accent-text: #246346; --control-line: #7b897f;
  --text: var(--ink); --panel: var(--card);
  --bad: #a52f29; --danger-bg: #fff1ef;
  --so-cream: var(--bg); --so-white: var(--card); --so-paper: var(--card);
  --so-ink: var(--ink); --so-deep: var(--ink); --so-muted: var(--muted);
  --so-line: var(--line); --so-forest: var(--forest); --so-emerald: var(--accent-text);
  --so-radius: 14px; --r: 14px;
  --shadow: 0 2px 8px rgba(20, 35, 25, .05);
  --so-shadow: var(--shadow); --so-shadow-soft: var(--shadow);
}

html[data-theme="dark"], html[data-theme="dark"] body.so-modern {
  color-scheme: dark;
  --bg: #101612; --card: #19221c; --soft: #232e26;
  --ink: #eef3ee; --muted: #b5c2b8; --line: #3c4c40;
  --forest: #286447; --forest2: #23583e; --focus: #91d3a9;
  --accent-text: #96d5af; --control-line: #829b88;
  --bad: #ffb4aa; --danger-bg: #38221f;
  --shadow: 0 2px 8px rgba(0, 0, 0, .12);
}
/* Legal pages without the app's theme controller follow the device preference. */
@media (prefers-color-scheme: dark) {
  html:not([data-theme]), html:not([data-theme]) body.so-modern {
    color-scheme: dark;
    --bg: #101612; --card: #19221c; --soft: #232e26;
    --ink: #eef3ee; --muted: #b5c2b8; --line: #3c4c40;
    --forest: #286447; --forest2: #23583e; --focus: #91d3a9;
    --accent-text: #96d5af; --control-line: #829b88;
    --bad: #ffb4aa; --danger-bg: #38221f;
    --shadow: 0 2px 8px rgba(0, 0, 0, .12);
  }
}
/* The original app sets these aliases on body in dark mode, so finish them at
   the same scope rather than relying only on inherited root variables. */
html[data-theme] body.so-modern {
  --so-cream: var(--bg); --so-white: var(--card); --so-paper: var(--card);
  --so-ink: var(--ink); --so-deep: var(--ink); --so-muted: var(--muted);
  --so-line: var(--line); --so-forest: var(--forest); --so-emerald: var(--accent-text);
}

/* Quiet, opaque surfaces instead of layered glass, green glows and grid decoration. */
html body, html[data-theme] body, html body.so-modern, html[data-theme] body.so-modern { background: var(--bg); color: var(--ink); }
html body.so-modern::before,
html body.so-modern :is(.feature, .step)::before { display: none; }
html body :is(.site-header, .nav, .auth-header) {
  background: var(--bg) !important; border-bottom-color: var(--line) !important;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
html body :is(.brand, .auth-brand) { color: var(--ink); font-weight: 750; letter-spacing: -.025em; }
html body.so-modern .brand { color: var(--ink); font-weight: 750; }
html body .brand .mark { filter: none; box-shadow: none; }
html body :is(.eyebrow, .auth-kicker, .support-dialog-kicker) { color: var(--accent-text); }
html body :is(.account-link, .account-menu-status, .account-verification-icon, .account-settings summary) {
  color: var(--accent-text);
}
html body .account-menu-status.error { color: var(--bad); }
html body :is(.settings-panel, .account-dialog, .auth-page .account-dialog, .support-dialog,
  .box, .plan, .modal, .so-create-dialog, .saved-history-dialog) {
  background: var(--card); color: var(--ink); border-color: var(--line);
  border-radius: 14px; box-shadow: var(--shadow);
}
html[data-theme] body.auth-page .account-dialog { border-top: 1px solid var(--line); }
html body :is(.spotter-confirm-kicker, .saved-ebay-link) { color: var(--accent-text); }
html body :is(.profile-card, .subscription-card, .session-card, .billing-note) {
  background: var(--soft); border-radius: 10px; box-shadow: none;
}
html body :is(.page-heading h1, .panel-heading h2, .dialog-heading h2, .auth-heading,
  .so-page-heading h1, .so-report-summary h2, .so-report-section-heading h2) {
  font-weight: 700; letter-spacing: -.025em; line-height: 1.15;
}
html body :is(.button, .btn, .auth-submit, .support-form-submit) {
  border-radius: 9px !important; font-weight: 650; box-shadow: none !important;
}
html body :is(.button, .btn):hover { transform: none; }
html body :is(.button.primary, .btn.primary, .btn.lime, .auth-submit, .support-form-submit) {
  background: var(--forest) !important; border-color: var(--forest) !important; color: #fff !important;
}
html body :is(.button.primary, .btn.primary, .btn.lime, .auth-submit, .support-form-submit):hover {
  background: var(--forest2) !important;
}
html body :is(.button:not(.primary):not(.danger), .btn.light, .theme-toggle,
  .so-notification-settings-button, .so-report-all-button, .so-create-dialog-close,
  .support-dialog-close, .account-close, .close) {
  background: var(--card) !important; color: var(--ink) !important;
  border-color: var(--control-line) !important; box-shadow: none !important;
}
html[data-theme] body.so-modern .btn.light {
  background: var(--card) !important; color: var(--ink) !important;
  border-color: var(--control-line) !important;
}
html body :is(.danger, .danger-box, .form-message.error, .notice.error, .notice.err, .formerror) {
  background: var(--danger-bg); color: var(--bad);
}
html body :is(.field input, .field select, .input, .select, .auth-input,
  .account-form input[type="email"], .account-form input[type="password"], .account-form .password-field input,
  .support-form input, .support-form select, .support-form textarea,
  .so-alert-control select, .so-report-controls input) {
  background: var(--card); color: var(--ink); border-color: var(--control-line); border-radius: 9px;
}
html body :is(input, textarea)::placeholder { color: var(--muted); opacity: 1; }
html body :is(.field-help, .help, .auth-help, .auth-fine, .support-form-note) { color: var(--muted); }
html body :is(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--focus) !important; outline-offset: 3px !important;
}
html body :is(input[type="checkbox"], input[type="radio"]) { accent-color: var(--forest); }
html body legend { color: var(--ink); }
html body :is(.button, .btn, .auth-submit, .support-form-submit):disabled {
  background: var(--soft) !important; color: var(--muted) !important;
  border-color: var(--line) !important; cursor: not-allowed;
}

/* Account navigation reads as navigation, not a collection of oversized pills. */
html body .settings-tabs { background: transparent; gap: 4px; border-bottom: 1px solid var(--line); }
html[data-theme] body .settings-tabs { background: transparent; border-radius: 0; }
html body .settings-tab {
  border: 0; border-bottom: 3px solid transparent; border-radius: 0;
  background: transparent; color: var(--muted); font-weight: 650;
}
html body .settings-tab[aria-selected="true"] {
  background: transparent; color: var(--ink); border-bottom-color: var(--accent-text);
}
html body .settings-tab:hover { color: var(--ink); background: var(--soft); }
html body .notification-section {
  background: transparent; border: 0 !important; border-top: 1px solid var(--line) !important;
  border-radius: 0 !important; padding: 16px 0 0 !important; gap: 0 !important;
}
html body .notification-section legend { color: var(--ink); padding: 0 10px 0 0; font-weight: 650; }
html body .setting-toggle {
  background: transparent; border: 0; border-bottom: 1px solid var(--line);
  border-radius: 0; padding: 16px 0; gap: 16px;
}
html body .setting-toggle strong { font-weight: 650; }
html body .setting-toggle small { color: var(--muted); font-size: 14px; }
html body .setting-toggle input { flex: 0 0 22px; }
html body .notification-section .field { margin: 6px 0 12px; }
html body .field-help { font-size: 13px; }
html body .appearance-option { border-radius: 10px; background: var(--card); color: var(--ink); }
html body .appearance-option[aria-pressed="true"] {
  border-color: var(--accent-text); box-shadow: 0 0 0 1px var(--accent-text);
}
html body .appearance-option[aria-pressed="true"]::after { color: var(--accent-text); }
html body .subscription-comparison-wrap { border-radius: 10px; }
html body .subscription-comparison :is(.tier-pro, .tier-plus),
html body :is(.subscription-action.pro, .subscription-action.pro-plus) { background: var(--soft); }
html body .subscription-action.pro-plus { border-color: var(--accent-text); }
html body .subscription-tier-badge { border-radius: 6px; font-weight: 650; letter-spacing: .025em; }

/* Home, Spotters, alerts and reports use the same flat surface hierarchy. */
html body.so-modern :is(.watchinner, .feature, .step, .plan-card, .plan-card.pro,
  .dashtop, .stat, .watchcard, .so-alert-card, .so-alert-toolbar,
  .so-report-summary, .so-report-spotters, .so-mobile-story-card) {
  background: var(--card) !important; border-color: var(--line) !important;
  border-radius: 14px !important; box-shadow: var(--shadow) !important;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
html body.so-modern :is(.feature, .step, .plan-card, .watchcard, .so-alert-card):hover {
  transform: none !important; border-color: var(--control-line) !important;
  box-shadow: var(--shadow) !important;
}
html[data-theme] body.so-modern .plan-card.pro {
  background: var(--card) !important; border-color: var(--accent-text) !important;
}
/* Pausing is communicated by the status label, not by fading all card text. */
html body.so-modern .watchcard.paused { opacity: 1 !important; }
html body.so-modern :is(.statusbar, .toolbar, .spotter-list-controls, .so-report-totals > div,
  .so-app-tabs, .so-alert-view-tabs, .legal, .so-create-dialog-header,
  .manual-search-details, .criteria-advanced) {
  background: var(--soft) !important; border-color: var(--line) !important;
  border-radius: 10px !important; box-shadow: none !important;
}
html body.so-modern :is(.so-tab, .so-alert-view-tabs button) { font-weight: 650; }
html body.so-modern .so-tab:hover { background: var(--card); color: var(--ink); transform: none; }
html body.so-modern .so-tab.active { background: var(--card); color: var(--ink); box-shadow: none; }
html body.so-modern .so-alert-view-tabs button.active {
  background: var(--forest); color: #fff; box-shadow: none;
}
html body.so-modern :is(.chipbtn, .so-search-example) {
  background: var(--card) !important; color: var(--muted) !important; border-radius: 8px !important;
}
html body.so-modern :is(.featureicon, .num, .watchicon, .so-alert-image, .so-mobile-story-icon) {
  background: var(--soft) !important; color: var(--accent-text) !important; box-shadow: none !important;
}
html body.so-modern :is(.plan-check, .image-search-card-placeholder) {
  background: var(--soft) !important; color: var(--accent-text) !important;
}
html body.so-modern :is(.pill, .so-alert-spotter, .ebaybadge) {
  background: var(--soft) !important; color: var(--ink) !important;
  border-color: var(--line) !important; border-radius: 6px !important;
}
html body.so-modern :is(.so-report-spotters header, .so-report-summary .kicker, .matchprice) {
  color: var(--accent-text) !important;
}
html body.so-modern .so-report-spotters header { background: var(--soft); }
html body.so-modern .so-report-spotter-group summary:hover,
html body.so-modern .so-report-spotter-group[open] summary { background: var(--soft); }
html body.so-modern .so-report-spotter-matches { background: var(--bg); }
html body.so-modern .so-report-apply,
html body.so-modern .so-report-archive button.active { background: var(--forest); color: #fff; }
html body.so-modern .so-report-controls input { color-scheme: inherit; }
html body.so-modern :is(.so-alert-empty, .empty) {
  background: var(--card) !important; color: var(--muted); border-color: var(--control-line) !important;
}
html body.so-modern.so-v2 #searchDescription {
  background: var(--card) !important; color: var(--ink) !important;
  border: 1px solid var(--control-line) !important; border-radius: 10px !important; box-shadow: none !important;
}
html body.so-modern.so-v2 #searchDescription::placeholder { color: var(--muted) !important; }
html body.so-modern.so-v2 #searchDescription:focus {
  border-color: var(--focus) !important; box-shadow: none !important;
}
html body.so-modern :is(#reviewSearch, #createBtn) {
  background: var(--forest) !important; border-color: var(--forest) !important;
  color: #fff !important; box-shadow: none !important; border-radius: 9px !important; font-weight: 650 !important;
}
html body.so-modern :is(#reviewSearch, #createBtn):hover { background: var(--forest2) !important; transform: none; }
html body.so-modern.so-v2 :is(#imageSearch, #manualSearchDetails) {
  background: var(--soft) !important; border-color: var(--control-line) !important; border-radius: 9px !important;
}
html body.so-modern.so-v2 :is(#imageSearch, #manualSearchDetails) > summary { color: var(--ink) !important; }
html body.so-modern.so-v2 #manualSearchDetails > summary span { color: var(--muted); }
html body.so-modern :is(.hero h1, .sectiontitle) { font-weight: 700 !important; letter-spacing: -.035em !important; }
html body.so-modern :is(.watchtitle, .so-alert-title) { font-weight: 650 !important; }
html body.so-modern :is(.kicker, .so-alert-control span, .so-report-totals span) {
  font-weight: 650 !important; letter-spacing: .025em !important;
}
html body.so-modern.so-v2 #plans { background: transparent !important; }
html body.so-modern .footer { background: var(--bg) !important; color: var(--muted); }
html body :is(.page a:not(.brand):not(.skip-link), .auth-inline a, .auth-footer a) { color: var(--accent-text); }
html body .legal-footer a { color: var(--accent-text); }
html body .nav a:not(.brand):not(.btn) { color: var(--accent-text); }

@media (max-width: 520px) {
  html body .settings-panel { padding: 20px 16px; }
  html body .settings-tabs { padding: 0; }
  html body .settings-tab { padding-inline: 13px; }
}

/* One product system, from the landing page to settings and email-link results. */
html:root {
  --layout-width: 1120px; --reading-width: 760px; --form-width: 680px;
  --green: var(--forest); --green2: var(--accent-text);
}
html body { font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.55; }
html body :is(.shell, .navin, .header-inner, .auth-header, .so-info-page .wrap) { max-width: var(--layout-width); }
html body :is(.navin, .header-inner, .auth-header) { min-height: 72px; }
html body .auth-header { width: min(var(--layout-width), calc(100% - 32px)); }
html body :is(.brand img, .brand-logo, .auth-brand img) { width: 42px; height: 38px; object-fit: contain; }
html body :is(.brand, .auth-brand) { font-size: 20px; gap: 9px; line-height: 1.25; }
html body :is(.account-main, .page) { padding-top: 36px; }
html body .page { max-width: var(--reading-width); }
html body :is(.page h1, .page-heading h1, .so-page-heading h1, .sectiontitle) { font-size: clamp(28px, 3.5vw, 36px) !important; }
html body :is(.page .eyebrow, .page-heading .eyebrow) { display: none; }
html body :is(.page .summary, .page-heading p, .so-page-heading p) { font-size: 16px; }
html body :is(.page .box, .settings-panel) { box-shadow: none; }
html body .settings-panel { min-height: 0; max-width: 100%; }
html body .settings-layout { gap: 20px; }
html body :is(.panel-heading h2, .account-head h1, .account-head h2) { font-size: 25px; font-weight: 700; letter-spacing: -.025em; }
html body :is(.auth-main, .account-main) { padding-bottom: 56px; }
html body .auth-main { padding-top: 32px; }
html body .account-tabs { background: transparent; border-radius: 0; border-bottom: 1px solid var(--line); padding: 0; gap: 12px; }
html body .account-tab { border: 0; border-bottom: 3px solid transparent; border-radius: 0; background: transparent; color: var(--muted); box-shadow: none; }
html body .account-tab.active { background: transparent; color: var(--ink); border-bottom-color: var(--accent-text); }
html body :is(.account-head, .so-create-dialog-header, .spotter-confirm-header) { background: var(--card); border-bottom-color: var(--line); }
html body :is(dialog, .spotter-confirm-shell, .spotter-confirm-card) { background: var(--card); color: var(--ink); border-color: var(--line); border-radius: 14px; }
html body :is(.account-page, main.card, body > main.box) { background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 14px; box-shadow: none; }
html body .account-page { width: min(560px, calc(100% - 32px)); margin: 36px auto; padding: 28px; }
html body .account-page :is(h1, p, label) { color: var(--ink); }
html body :is(.account-page .action, .account-page button[type="submit"]) { background: var(--forest); color: #fff; border-radius: 9px; font-weight: 650; }
html body :is(.account-form, .account-page, .restrictive-fields) input:not([type="checkbox"]):not([type="radio"]) {
  background: var(--card) !important; color: var(--ink) !important;
  border: 1px solid var(--control-line) !important; border-radius: 9px; min-height: 46px;
}
html body :is(.account-help, .account-message, .account-page .legal-links, .so-create-dialog-header p) { color: var(--muted); }
html body .account-invalid, html body .field input.invalid { background: var(--danger-bg) !important; border-color: var(--bad) !important; border-left-width: 4px !important; }
html body :is(.account-message.error, .account-page .error) { background: var(--danger-bg); color: var(--bad); }
html body :is(.notice.success, .notice.ok, .form-message.success) { background: var(--soft); color: var(--accent-text); }
html body .verified-badge { background: var(--soft); color: var(--accent-text) !important; border: 1px solid var(--line); border-radius: 6px; }
html body :is(.password-toggle, .account-page .password-toggle) { background: transparent; color: var(--muted); }
html body .subscription-tier-badge { text-transform: none; }
html body .appearance-option { min-height: 108px; }
html body :is(.settings-form, .notification-form) { max-width: 720px; }

/* Working screens lead with their controls rather than a marketing hero. */
html body.so-modern :is(#dashboard, #soAlertsPage) { padding-top: 32px !important; }
html body.so-modern :is(#dashboard > .shell > .sectiontitle, #dashboard > .shell > .lead) { text-align: left !important; margin-inline: 0 !important; }
html body.so-modern .so-page-heading { justify-content: flex-start; text-align: left; margin-bottom: 22px; }
html body.so-modern .so-page-heading > div { width: 100%; }
html body.so-modern .so-page-heading :is(h1, p) { margin-inline: 0 !important; text-align: left !important; }
html body.so-modern :is(#dashboard, #soAlertsPage) .spotter-mascot-slot { float: none; clear: both; display: block; width: 76px; margin: 0 auto 12px; }
html body.so-modern .dashtop { padding: 16px 20px; }
html body.so-modern .dashtop h3 { font-size: 20px; }
html body.so-modern .dashtop p { display: none; }
html body.so-modern .stats { gap: 12px; }
html body.so-modern .stat { padding: 14px 18px; }
html body.so-modern .stat strong { font-size: 24px; }
html body.so-modern .toolbar { background: transparent !important; padding-inline: 0; }
html body.so-modern .spotter-list-controls { background: transparent !important; padding: 0 !important; border: 0 !important; }
html body.so-modern .so-alert-spotter { background: transparent !important; padding: 0; text-transform: none; font-size: 13px; font-weight: 600; color: var(--muted) !important; }
html body.so-modern .so-alert-card { padding: 16px; }
html body.so-modern .so-alert-title { font-size: 16px; line-height: 1.4; }
html body.so-modern .so-report-summary { margin-top: 24px; padding: 22px; }
html body.so-modern .so-report-timezone { display: block; margin-top: 6px; font-size: 13px; color: var(--muted); }
html body.so-modern .so-report-totals span { text-transform: none; }
html body.so-modern .so-report-archive { gap: 8px; }
html body.so-modern .watch-search-requirements { background: transparent !important; border: 0 !important; border-top: 1px solid var(--line) !important; border-radius: 0 !important; padding-inline: 0 !important; }
html body.so-modern .watch-criteria-list { gap: 6px; }
html body.so-modern .watch-saved-description { color: var(--muted); }
html body.so-modern .watch-search-requirements > summary { cursor: pointer; font-size: 14px; font-weight: 650; color: var(--ink); padding: 12px 0; }
html body.so-modern .watch-search-requirements > summary span { display: block; font-size: 13px; font-weight: 400; color: var(--muted); margin-top: 4px; }
html body.so-modern :is(.so-reveal, .so-in) { opacity: 1; transform: none; transition: none; }

/* One calm search introduction and one helpful example. */
html body[data-spotter-home] .hero { min-height: 0 !important; padding: 24px 0 32px !important; gap: 18px !important; display: flex !important; flex-direction: column !important; align-items: center !important; }
html body[data-spotter-home] .hero-copy { width: min(var(--form-width), 100%); max-width: var(--form-width); margin-inline: auto !important; display: block !important; text-align: center !important; }
html body[data-spotter-home] .hero h1 { font-size: clamp(28px, 4vw, 40px) !important; margin: 4px auto 10px !important; line-height: 1.15 !important; text-align: center !important; }
html body[data-spotter-home] .hero-copy > p { margin: 0 auto !important; max-width: 580px; color: var(--muted); text-align: center !important; }
html body[data-spotter-home] .watchbox { width: min(var(--form-width), 100%); margin-inline: auto !important; align-self: center; }
html body[data-spotter-home] .hero-copy .spotter-mascot-slot { float: none; width: 72px; margin: 0 auto 8px; }
html body[data-spotter-home] .watchinner { padding: 20px !important; }
html body[data-spotter-home] .restrictive-guidance { background: transparent; border: 0; margin: 0 0 12px; padding: 0; font-size: 20px; line-height: 1.3; color: var(--ink); }
html body[data-spotter-home] .restrictive-guidance strong { color: var(--ink); font-weight: 650; }
html body[data-spotter-home] #searchDescriptionHelp { display: none !important; }
html body[data-spotter-home] :is(#imageSearch, #manualSearchDetails):not([open]) { background: transparent !important; border-radius: 0 !important; border-bottom: 1px solid var(--line) !important; }
/* One prompt, compact reference actions, one budget and one next step. */
html body[data-spotter-home] #createForm .search-item-price-row { grid-template-columns: minmax(0, 1fr) 148px !important; gap: 16px; align-items: start; }
html body[data-spotter-home] #createForm #searchDescription { min-height: 88px !important; height: 88px; padding: 12px 14px !important; line-height: 1.45 !important; border-radius: 12px !important; }
html body[data-spotter-home] #createForm #searchDescriptionFields[data-source="description"] #restrictiveSearchGuidance { display: none; }
html body[data-spotter-home] #createForm .search-item-price-row label { min-height: 26px !important; line-height: 26px !important; margin: 0 0 12px !important; }
html body[data-spotter-home] #createForm .search-item-price-description label[for="searchDescription"] { font-size: 20px !important; font-weight: 650 !important; }
html body[data-spotter-home] #createForm .spotter-source-choice { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin: 4px 0 0; }
html body[data-spotter-home] #createForm .spotter-source-choice button { min-height: 44px; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent !important; box-shadow: none !important; color: var(--accent-text) !important; font-size: 13px; font-weight: 600; }
html body[data-spotter-home] #createForm .spotter-source-choice button[aria-pressed="true"] { background: var(--soft) !important; }
html body[data-spotter-home] #createForm .spotter-source-choice button[hidden],
html body[data-spotter-home] #imageSearch > summary[hidden] { display: none !important; }
html body[data-spotter-home] #imageSearch:not([open]) { border: 0 !important; margin: 0 !important; }
html body[data-spotter-home] #createForm .search-item-price-row > #maxPriceField { display: flex; flex-direction: column; min-width: 0; gap: 0; }
html body[data-spotter-home] #createForm .search-item-price-row > #maxPriceField > label { font-size: 14px !important; }
html body[data-spotter-home] #createForm .search-item-price-row > #maxPriceField > #maxPrice { width: 100%; min-height: 48px; padding: 10px 12px !important; font-size: 16px; }
html body[data-spotter-home] #createForm .search-item-price-row > #maxPriceField > #maxPriceHelp { margin: 8px 0 0 !important; font-size: 12px; line-height: 1.4; }
html body[data-spotter-home] #createForm .search-item-price-row.manual-only { grid-template-columns: minmax(0, 1fr) !important; }
@media (max-width: 600px) {
  html body[data-spotter-home] #createForm .search-item-price-row { grid-template-columns: minmax(0, 1fr) !important; gap: 12px; }
}
html body[data-spotter-home] #createForm #createBtn { min-height: 48px !important; padding: 12px 16px !important; margin: 16px 0 0 !important; font-size: 16px !important; }
html body[data-spotter-home] #createForm .spotter-form-legal { margin: 8px 0 4px !important; font-size: 11px !important; line-height: 1.5 !important; color: var(--muted); }
html body[data-spotter-home] #createForm #manualSearchDetails:not([open]) { border: 0 !important; margin: 0 !important; box-shadow: none !important; }
html body[data-spotter-home] #createForm #manualSearchDetails > summary { justify-content: center; gap: 8px; min-height: 44px !important; padding: 10px 0 !important; font-size: 13px !important; font-weight: 500; color: var(--accent-text) !important; }
html body[data-spotter-home] #createForm #manualSearchDetails > summary::after { font-size: 14px; }
html body[data-spotter-home] #createForm #manualSearchDetails[open] { margin: 8px 0 0 !important; }
html body[data-spotter-home] #searchReviewStatus:empty,
html body[data-spotter-home] #searchReview:empty { display: none; }
html body[data-spotter-home] #how { padding: 32px 0 40px !important; }
html body.so-modern.so-v2 :is(#how, #plans) :is(.sectiontitle, .lead, .kicker) { text-align: left !important; margin-inline: 0 !important; }
html body.so-modern.so-v2 :is(#how, #plans) .sectiontitle { font-size: clamp(28px, 3.5vw, 36px) !important; }
html body.so-modern #plans .plan-card { padding: 24px; }
html body.so-modern #plans .plan-card.pro { border-color: var(--line) !important; }
html body.so-modern #plans .plan-badge { background: var(--soft); color: var(--ink); border-radius: 6px; text-transform: none; }

/* Help and legal pages share the same palette, header, type and surfaces. */
html body.so-info-page .top { background: var(--bg); border-color: var(--line); backdrop-filter: none; padding: 0; }
html body.so-info-page .nav { min-height: 72px; }
html body.so-info-page .hero { padding: 36px 0 24px; }
html body.so-info-page h1 { font-size: clamp(28px, 4vw, 40px); max-width: 760px; line-height: 1.15; }
html body.so-info-page .lead { font-size: 16px; max-width: 720px; }
html body.so-info-page :is(.card, .step, .filter, .faq details) { border-radius: 14px; background: var(--card); border-color: var(--line); }
html body.so-info-page .content h2 { font-size: 28px; }
html body.so-info-page .faq { text-align: left; }
html body.so-info-page .final { background: var(--soft); color: var(--ink); text-align: left; padding: 24px; border: 1px solid var(--line); border-radius: 14px; }
html body.so-info-page .final p { color: var(--muted); margin-inline: 0; }
html body.so-info-page .button.primary { background: var(--forest) !important; color: #fff !important; }
html body.so-info-page .eyebrow { background: transparent; padding: 0; color: var(--accent-text); }
html body.so-info-page .secondary { background: var(--card); color: var(--ink); border-color: var(--control-line); border-radius: 9px; }
html body.so-info-page .step::before { background: var(--soft); color: var(--ink); border-radius: 6px; }
@media (max-width: 650px) {
  html body :is(.account-main, .page) { padding-top: 24px; }
  html body :is(.navin, .header-inner, .auth-header) { min-height: 64px; }
  html body :is(.brand, .auth-brand) { font-size: 18px; }
  html body :is(.brand img, .brand-logo, .auth-brand img) { width: 36px; height: 32px; }
  html body .account-page { padding: 22px; margin-top: 24px; }
  html body.so-modern :is(#dashboard, #soAlertsPage) { padding-top: 24px !important; }
  html body.so-modern :is(#dashboard, #soAlertsPage) .spotter-mascot-slot { width: 64px; margin-inline: auto; }
  html body[data-spotter-home] .hero { padding-top: 12px !important; gap: 16px !important; }
  html body[data-spotter-home] .hero h1 { font-size: clamp(25px, 6.5vw, 30px) !important; margin-bottom: 8px !important; }
  html body[data-spotter-home] .hero-copy > p { max-width: 340px; font-size: 14px !important; line-height: 1.5 !important; }
  html body[data-spotter-home] .hero-copy .spotter-mascot-slot { width: 60px; margin: 0 auto 4px; }
  html body[data-spotter-home] .watchinner { padding: 16px !important; }
  html body.so-modern .so-report-summary { padding: 18px; }
  html body.so-info-page .content h2 { font-size: 25px; }
}

html body.so-modern .watch-requirement-details > summary { cursor: pointer; padding: 12px 0; font-size: 14px; font-weight: 650; color: var(--ink); }
html body.so-modern .watch-requirement-details[open] > summary { margin-bottom: 8px; }

/* Spotter cards begin with the search itself, without a repeated brand icon. */
html body.so-modern .watchtop { grid-template-columns: minmax(0, 1fr) auto !important; }
html body.so-modern :is(.resultline, .matches) { margin-left: 0 !important; }
@media (max-width: 1100px) {
  html body.so-modern .watchtop { grid-template-columns: minmax(0, 1fr) !important; }
  html body.so-modern .watchactions { grid-column: 1 !important; }
}

/* Tier names and taglines share aligned rows in light and dark themes. */
html body.so-modern #plans .plan-card-badge { position:static; align-self:flex-start; margin-bottom:12px; }
html body.so-modern #plans .plan-card > .kicker { margin-bottom:8px !important; }
html body.so-modern #plans .plan-card h3 { font-size:26px !important; line-height:1.18; min-height:2.36em; }
html body.so-modern #plans .plan-card-subtitle { min-height:3em; }
html body.so-modern #plans .plan-card:first-child > .kicker { margin-top:38px !important; }
html body.so-modern #plans .plan-features li:nth-child(2) { min-height:4.5em; align-items:flex-start; }
@media(max-width:900px) {
  html body.so-modern #plans .plan-card h3,html body.so-modern #plans .plan-card-subtitle { min-height:0; }
  html body.so-modern #plans .plan-card:first-child > .kicker { margin-top:0 !important; }
  html body.so-modern #plans .plan-features li:nth-child(2) { min-height:0; }
}


/* Draw status and close symbols independently of font baselines. */
html body :is(.comparison-status, .plan-check, .check, .so-intent-check,
  .close, .account-close, .billing-close, .support-dialog-close, .so-create-dialog-close) {
  position: relative;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0;
  padding: 0 !important;
  font-size: 0 !important;
  line-height: 1 !important;
  vertical-align: middle;
}
html body .comparison-status > span[aria-hidden="true"] { font-size: 0 !important; }
html body :is(.comparison-status, .plan-check, .check, .so-intent-check,
  .close, .account-close, .billing-close, .support-dialog-close, .so-create-dialog-close)::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 6px;
  box-sizing: border-box;
  border: 0;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  border-radius: 0;
  background: transparent;
  transform: translate(-50%, -50%) rotate(-45deg);
}
html body :is(.comparison-status.no, .plan-check.plan-cross,
  .close, .account-close, .billing-close, .support-dialog-close, .so-create-dialog-close)::before,
html body :is(.comparison-status.no, .plan-check.plan-cross,
  .close, .account-close, .billing-close, .support-dialog-close, .so-create-dialog-close)::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 2px;
  border: 0;
  border-radius: 999px;
  background: currentColor;
  transform: translate(-50%, -50%) rotate(45deg);
}
html body :is(.comparison-status.no, .plan-check.plan-cross,
  .close, .account-close, .billing-close, .support-dialog-close, .so-create-dialog-close)::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}