/* MagicTrade – design system. The page backgrounds match the two logos exactly (dark mode: pure black like
   the dark logo; light mode: white like the light logo); the logos themselves are never changed.
   Accents come from the logos: lime green into gold, like "MAGIC" into "TRADE".
   Rules: aligned grids, muted second lines, pills, fact tiles, boxes with dividers; green-gold only for
   buttons, highlights, hover and attention. */

@font-face { font-family: "Inter"; src: url(../fonts/Inter.woff2) format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url(../fonts/Montserrat.woff2) format("woff2"); font-weight: 500 800; font-display: swap; }

:root {
  /* header, menus and footer (they follow the theme; each theme has its own logo) */
  --brand-bg: #000000;      /* the dark logo's background */
  --brand-bg-2: #101109;
  --brand-line: #262819;
  --brand-text: #F4F5EC;
  --brand-muted: #BFC2AD;
  --brand-dim: #8E917F;
  --brand-accent: #FAEB53;  /* the dark logo's highlight */
  --brand-on: rgba(205, 229, 52, .12);
  --grad: linear-gradient(100deg, #BED82B 0%, #DADE37 45%, #E7BE31 100%);        /* the dark logo: lime into gold */
  --grad-hover: linear-gradient(100deg, #CDE534 0%, #E6E84A 45%, #F0CB45 100%);
  --grad-word: linear-gradient(100deg, #BED82B 0%, #DADE37 45%, #E7BE31 100%);
  --on-gold: #121405;
  --btn-glow: rgba(205, 229, 52, .16);

  /* dark theme (default) */
  --bg: #000000;            /* the dark logo's background */
  --surface: #101109;
  --surface-2: #181A0F;
  --border: #2A2C1E;
  --text: #F4F5EC;
  --text-2: #C6C9B5;
  --text-3: #9EA18C;
  --gold: #E7BE31;          /* the dark logo's gold */
  --gold-hover: #FAEB53;
  --gold-line: #5C5418;
  --gold-soft: rgba(231, 190, 49, .12);
  --ok: #8FD07A; --ok-soft: rgba(143, 208, 122, .12);
  --warn: #EBA545; --warn-soft: rgba(235, 165, 69, .13);
  --err: #F0796C; --err-soft: rgba(240, 121, 108, .12);
  --shadow: 0 1px 0 rgba(240, 255, 200, .03) inset, 0 14px 34px rgba(0, 0, 0, .5);
  --focus: 0 0 0 3px rgba(205, 229, 52, .35);
  --head: "Montserrat", "Inter", system-ui, sans-serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --brand-bg: #FEFEFE;      /* the light logo's background */
  --brand-bg-2: #F4F7EA;
  --brand-line: #E1E6D0;
  --brand-text: #151A08;
  --brand-muted: #465034;
  --brand-dim: #646C51;
  --brand-accent: #4C7605;
  --brand-on: rgba(154, 195, 18, .14);
  --grad: linear-gradient(100deg, #A7C514 0%, #CFC72A 45%, #E8BC39 100%);        /* the light logo: green into gold */
  --grad-hover: linear-gradient(100deg, #B4D226 0%, #DAD23D 45%, #EFC74E 100%);
  --grad-word: linear-gradient(100deg, #5E8A07 0%, #79A10A 40%, #A87A08 100%);
  --on-gold: #151A08;
  --btn-glow: rgba(154, 195, 18, .18);
  --bg: #FEFEFE;            /* the light logo's background */
  --surface: #FFFFFF;
  --surface-2: #F4F7EA;
  --border: #E1E6D0;
  --text: #151A08;
  --text-2: #465034;
  --text-3: #646C51;
  --gold: #4C7605;          /* links and highlights: the light logo's green, darkened to read on white */
  --gold-hover: #3A5C03;
  --gold-line: #C9D99A;
  --gold-soft: rgba(154, 195, 18, .13);
  --ok: #1B6E3F; --ok-soft: rgba(35, 130, 76, .1);
  --warn: #8A5206; --warn-soft: rgba(158, 95, 8, .1);
  --err: #B83A2E; --err-soft: rgba(184, 58, 46, .09);
  --shadow: 0 12px 30px rgba(30, 40, 8, .08);
  --focus: 0 0 0 3px rgba(154, 195, 18, .4);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.6 var(--sans); }
a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--gold-hover); }
img { max-width: 100%; height: auto; }
.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.num, .tab { font-variant-numeric: tabular-nums; }
.muted { color: var(--text-2); }
.small { font-size: 13px; }
h1, h2, h3, h4 { margin: 0; line-height: 1.2; font-family: var(--head); letter-spacing: -.005em; }
.h1 { font-size: 40px; font-weight: 800; margin: 10px 0 14px; }
.h2, h2.sec { font-size: 28px; font-weight: 800; }
.h3 { font-size: 18px; font-weight: 700; }
.lead { font-size: 17px; color: var(--text-2); margin: 0 0 24px; max-width: 680px; }
.eyebrow { display: inline-block; font: 700 11.5px/1.4 var(--head); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.gold-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
:root[data-theme="light"] .gold-text { background: var(--grad-word); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Each theme shows its own logo */
.for-light { display: none !important; }
:root[data-theme="light"] .for-light { display: block !important; }
:root[data-theme="light"] .for-dark { display: none !important; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--surface); color: var(--text); padding: 8px 12px; border-radius: 8px; }
.skip:focus { left: 8px; }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 6px; }
hr { border: 0; border-top: 1px solid var(--border); margin: 24px 0; }

section { padding: 56px 0; }
section + section { border-top: 1px solid var(--border); }
section.narrow .wrap { max-width: 820px; }
.sec-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.sec-head p { margin: 6px 0 0; color: var(--text-2); }
.prose { max-width: 760px; }
.prose p, .prose li { color: var(--text-2); }
.prose h2 { font-size: 21px; margin: 30px 0 10px; color: var(--text); }
.prose h3 { font-size: 16px; margin: 22px 0 8px; color: var(--text); }
.prose strong, .prose b { color: var(--text); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 20px; border-radius: 10px; font: 700 14px/1 var(--head); letter-spacing: .01em; border: 1px solid transparent; cursor: pointer; white-space: nowrap; text-decoration: none; }
.btn-gold { background: var(--grad); color: var(--on-gold); box-shadow: 0 6px 18px var(--btn-glow); }
.btn-gold:hover { background: var(--grad-hover); color: var(--on-gold); }
.btn-line { background: transparent; color: var(--text); border-color: var(--border); }
.btn-line:hover { border-color: var(--gold-line); color: var(--gold); }
.btn-danger { background: transparent; color: var(--err); border-color: color-mix(in srgb, var(--err) 45%, transparent); }
.btn-danger:hover { background: var(--err-soft); color: var(--err); }
.btn-sm { height: 36px; padding: 0 14px; font-size: 12.5px; border-radius: 9px; }
.btn-block { width: 100%; }
.btn[disabled], .btn.is-disabled { opacity: .5; pointer-events: none; }
.linklike { background: none; border: 0; padding: 0; color: var(--gold); font: inherit; cursor: pointer; }
.linklike:hover { color: var(--gold-hover); }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* Pills */
.pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; letter-spacing: .02em; padding: 2px 9px; border-radius: 999px; background: var(--surface-2); color: var(--text-2); border: 1px solid var(--border); white-space: nowrap; line-height: 1.6; }
.pill.gold { background: var(--gold-soft); color: var(--gold); border-color: transparent; }
.pill.ok { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.pill.warn { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.pill.err { background: var(--err-soft); color: var(--err); border-color: transparent; }

/* Bars above the header */
.preview-bar, .notice-bar { text-align: center; font-size: 12.5px; padding: 6px 16px; }
.preview-bar { background: var(--brand-bg-2); color: var(--brand-muted); border-bottom: 1px solid var(--brand-line); }
.preview-bar a { color: var(--brand-accent); }
.notice-bar { background: var(--gold-soft); color: var(--text); border-bottom: 1px solid var(--gold-line); }

/* Header (follows the theme) */
.site-header { position: sticky; top: 0; z-index: 20; background: var(--brand-bg); border-bottom: 1px solid var(--brand-line); color: var(--brand-text); }
.site-header > .wrap { display: flex; align-items: center; gap: 26px; height: 72px; }
.logo { display: flex; align-items: center; gap: 8px; color: var(--brand-text); flex: none; text-decoration: none; }
.logo:hover { color: var(--brand-text); }
.logo img { height: 56px; width: auto; display: block; }   /* the logos exactly as supplied */
.logo-word { display: grid; line-height: 1; }
.logo-word b { font: 800 19px/1 var(--head); letter-spacing: .04em; text-transform: uppercase; background: var(--grad-word); -webkit-background-clip: text; background-clip: text; color: transparent; }
.logo-word small { font: 600 10.5px/1.6 var(--head); letter-spacing: .18em; text-transform: uppercase; color: var(--brand-muted); }
.nav { display: flex; gap: 22px; font-size: 14px; font-weight: 500; }
.nav a { color: var(--brand-muted); }
.nav a:hover, .nav a.on { color: var(--brand-accent); }
.head-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.site-header .btn-line, .app-top .btn-line { color: var(--brand-text); border-color: var(--brand-line); }
.site-header .btn-line:hover { color: var(--brand-accent); border-color: var(--gold-line); }
.icon-btn { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--border); background: transparent; color: var(--text-2); display: grid; place-items: center; cursor: pointer; padding: 0; }
.site-header .icon-btn, .app-top .icon-btn, .side .icon-btn { border-color: var(--brand-line); color: var(--brand-muted); }
.icon-btn:hover { color: var(--gold); border-color: var(--gold-line); }
.menu-btn { display: none; }
.mobile-menu { border-top: 1px solid var(--brand-line); background: var(--brand-bg); }
.mobile-menu .wrap { display: grid; padding-top: 10px; padding-bottom: 16px; }
.mobile-menu .wrap > a { color: var(--brand-text); padding: 11px 2px; border-bottom: 1px solid var(--brand-line); font-weight: 500; }
.mm-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.mm-actions.one { grid-template-columns: 1fr; }
.mm-theme { display: flex; align-items: center; gap: 10px; margin-top: 12px; background: none; border: 0; color: var(--brand-muted); font: inherit; padding: 8px 0; cursor: pointer; }

/* Flash messages */
.flashes { max-width: 1200px; margin: 16px auto 0; padding: 0 24px; display: grid; gap: 8px; }
.main .flashes, .auth-card .flashes { padding: 0; margin: 0 0 16px; }
.flash { border: 1px solid var(--border); border-left: 3px solid var(--gold); background: var(--surface); padding: 11px 14px; border-radius: 10px; font-size: 14px; }
.flash-ok { border-left-color: var(--ok); }
.flash-err { border-left-color: var(--err); }
.flash-info { border-left-color: var(--gold); }

/* Hero */
.hero { padding: 60px 0 44px; position: relative; overflow: hidden; border-top: 0; }
.hero::before { content: ""; position: absolute; inset: -35% -12% auto auto; width: 760px; height: 760px; background: radial-gradient(closest-side, rgba(205, 229, 52, .08), transparent 70%); pointer-events: none; }
:root[data-theme="light"] .hero::before { background: radial-gradient(closest-side, rgba(167, 197, 20, .10), transparent 70%); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .9fr); gap: 48px; align-items: center; position: relative; }
.hero h1 { font-size: 48px; line-height: 1.08; font-weight: 800; margin: 14px 0 18px; }
.hero .lead { font-size: 17px; }
.hero-note { margin-top: 18px; font-size: 13px; color: var(--text-3); display: flex; gap: 18px; flex-wrap: wrap; }
.hero-note span { display: inline-flex; gap: 6px; align-items: center; }
.hero-note .ic { color: var(--gold); }
.hero-logo { display: block; width: 100%; max-width: 480px; margin: 0 auto; }
.hero:has(.mk-hero-logo)::before { display: none; }

/* Date card */
.date-card { border: 1px solid var(--gold-line); border-radius: 16px; background: linear-gradient(180deg, var(--surface), var(--bg)); box-shadow: var(--shadow); overflow: hidden; }
.date-card header { padding: 15px 18px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.date-card header b { font: 700 12px/1.3 var(--head); letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); }
.date-line { list-style: none; margin: 0; padding: 6px 18px 4px; }
.date-line li { display: grid; grid-template-columns: 20px 104px minmax(0, 1fr); gap: 10px; align-items: start; padding: 12px 0; border-top: 1px solid var(--border); }
.date-line li:first-child { border-top: 0; }
.dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--gold); margin-top: 5px; display: block; }
.dot.full { background: var(--gold); }
.date-line .d { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.date-line .t { color: var(--text-2); font-size: 14px; }
.date-card footer { padding: 12px 18px 16px; font-size: 13px; color: var(--text-2); }

/* Fact tiles */
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.tiles.t3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tiles.t5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.tile { border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; background: var(--surface); min-width: 0; }
.tile .lbl { font: 700 11px/1.4 var(--head); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.tile .val { font: 800 28px/1.15 var(--head); margin: 6px 0 2px; font-variant-numeric: lining-nums tabular-nums; overflow-wrap: anywhere; }
.tile .val.gold { color: var(--gold); }
.tile .val.warn { color: var(--warn); }
.tile .val.err { color: var(--err); }
.tile .val.ok { color: var(--ok); }
.tile .note { font-size: 13px; color: var(--text-2); }

/* Boxes and generic aligned lists (the "Newest uploads" style) */
.box { border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.box-pad { padding: 18px 20px; }
.box-h { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0 0 10px; }
.box-h h2 { font: 700 15px/1.3 var(--head); }
.box-h a { font-size: 13px; }
.rows { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: var(--surface); }
.rows > li { display: grid; gap: 14px; align-items: center; padding: 12px 16px; border-top: 1px solid var(--border); }
.rows > li:first-child { border-top: 0; }
.rows > li:nth-child(even) { background: color-mix(in srgb, var(--surface-2) 55%, transparent); }
.rows > li.head { padding: 9px 16px; font: 700 11px/1.4 var(--head); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); background: var(--surface-2); }
.rows .m { display: grid; gap: 3px; min-width: 0; }
.rows .m b, .rows .m a.t { font-weight: 600; font-size: 14px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rows .m a.t:hover { color: var(--gold); }
.rows .m span { font-size: 12.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rows .w { display: grid; gap: 2px; padding-left: 14px; border-left: 1px solid var(--border); font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 0; }
.rows > li.head > .w { border-left-color: transparent; }
.rows .w b { font-size: 13.5px; font-weight: 600; }
.rows .w span { font-size: 12.5px; color: var(--text-3); }
.rows .act { display: flex; gap: 8px; justify-content: flex-start; }
.empty { border: 1px dashed var(--border); border-radius: 14px; padding: 26px 20px; display: grid; gap: 4px; text-align: center; color: var(--text-2); }
.empty b { color: var(--text); }

/* Tradeline list */
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.filters select, .chip { height: 38px; padding: 0 12px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--text-2); font: 500 13.5px var(--sans); }
.filters select:hover, .chip:hover { border-color: var(--gold-line); }
.chip { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.chip.on { border-color: var(--gold-line); color: var(--gold); background: var(--gold-soft); }
.filters .count { margin-left: auto; font-size: 13px; color: var(--text-3); }
.inv { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: var(--surface); }
.inv li { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.25fr) 90px 96px; gap: 16px; align-items: center; padding: 13px 18px; border-top: 1px solid var(--border); }
.inv li:first-child { border-top: 0; }
.inv li:nth-child(odd):not(.inv-head) { background: color-mix(in srgb, var(--surface-2) 55%, transparent); }
.inv li.inv-head { padding: 10px 18px; font: 700 11px/1.4 var(--head); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); background: var(--surface-2); }
.inv .c { display: grid; gap: 3px; min-width: 0; font-variant-numeric: tabular-nums; }
.inv .c b { font-weight: 600; font-size: 14.5px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inv .c span { font-size: 12.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inv .c span.soon { color: var(--warn); }
.inv .c-bank b { display: flex; gap: 8px; align-items: center; }
.inv .c-bank a { color: var(--text); }
.inv .c-bank a:hover { color: var(--gold); }
.inv .c-buy { padding-left: 16px; border-left: 1px solid var(--border); }
.inv li.inv-head .c-buy { border-left-color: transparent; }
.inv .c-price b { font: 800 16px/1.2 var(--head); }
.inv li:not(.inv-head):hover { background: var(--gold-soft); }
.inv-foot { display: flex; justify-content: space-between; gap: 16px; margin-top: 12px; font-size: 13px; color: var(--text-2); }

/* Steps and features */
.steps, .feats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.step, .feat { border: 1px solid var(--border); border-radius: 14px; padding: 20px; background: var(--surface); }
.step .n { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--gold-line); color: var(--gold); display: grid; place-items: center; font: 800 14px/1 var(--head); margin-bottom: 14px; }
.step h3, .feat h3 { font-size: 16px; font-weight: 700; margin-bottom: 6px; }
.step p, .feat p { margin: 0; color: var(--text-2); font-size: 14px; }
.feat .ic-box { width: 40px; height: 40px; border-radius: 10px; background: var(--gold-soft); color: var(--gold); display: grid; place-items: center; margin-bottom: 14px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pbox { border: 1px solid var(--border); border-radius: 16px; padding: 26px; background: linear-gradient(135deg, var(--surface), var(--bg)); display: grid; gap: 10px; align-content: start; }
.pbox h3 { font-size: 21px; font-weight: 800; }
.pbox p { margin: 0 0 4px; color: var(--text-2); }
.ticks { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; font-size: 14px; color: var(--text-2); }
.ticks li { display: grid; grid-template-columns: 18px 1fr; gap: 8px; }
.ticks li::before { content: "—"; color: var(--gold); }
.ticks.no li::before { content: "×"; color: var(--err); font-weight: 700; }

/* Questions */
.faq { border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: var(--surface); }
.faq details { border-top: 1px solid var(--border); padding: 16px 20px; }
.faq details:first-child { border-top: 0; }
.faq summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--gold); font-weight: 700; }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: 10px 0 0; color: var(--text-2); font-size: 14.5px; max-width: 860px; }

/* Readable disclosure box (never gold fine print) */
.disclose { border: 1px solid var(--border); border-left: 3px solid var(--gold); border-radius: 12px; padding: 14px 18px; background: var(--surface); font-size: 14px; color: var(--text-2); margin: 0; }
.disclose b { color: var(--text); }

/* Footer (follows the theme) */
.site-footer { background: var(--brand-bg); color: var(--brand-muted); border-top: 1px solid var(--brand-line); padding: 44px 0 28px; font-size: 13.5px; }
.site-footer .logo img { height: 64px; }
.foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1.1fr; gap: 28px; }
.foot-brand p { margin: 14px 0 0; }
.foot-brand a { color: var(--brand-accent); }
.foot-note { font-size: 12.5px; }
.foot-grid h4 { margin: 0 0 10px; font: 700 11.5px/1.4 var(--head); letter-spacing: .12em; text-transform: uppercase; color: var(--brand-text); }
.foot-grid > div:not(.foot-brand) > a { display: block; color: var(--brand-muted); padding: 3px 0; }
.foot-grid > div:not(.foot-brand) > a:hover { color: var(--brand-accent); }
.foot-disclose { margin: 28px 0 0; padding: 14px 16px; border: 1px solid var(--brand-line); border-radius: 12px; color: var(--brand-text); opacity: .86; font-size: 13.5px; }
.foot-bottom { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--brand-line); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* Forms */
.form { display: grid; gap: 14px; max-width: 560px; }
.form-wide { max-width: none; }
.field { display: grid; gap: 6px; min-width: 0; }
.field label { font-size: 13px; font-weight: 600; color: var(--text-2); }
.field input, .field select, .field textarea { width: 100%; min-height: 44px; padding: 10px 13px; font: 15px/1.4 var(--sans); color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 10px; }
.field textarea { resize: vertical; min-height: 110px; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--text-3); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--gold); box-shadow: var(--focus); }
.field .hint { margin: 0; font-size: 12.5px; color: var(--text-3); }
.field.has-error input { border-color: var(--err); }
.err-text { margin: 0; font-size: 12.5px; color: var(--err); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field-row.r3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.check { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; font-size: 14px; color: var(--text-2); cursor: pointer; }
.check input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: #9AC312; }
.form-errors { border: 1px solid color-mix(in srgb, var(--err) 40%, transparent); background: var(--err-soft); border-radius: 10px; padding: 10px 14px; font-size: 14px; color: var(--text); }
.form-errors ul { margin: 6px 0 0; padding-left: 18px; }
.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 600; }
.switch input { appearance: none; width: 44px; height: 24px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); position: relative; cursor: pointer; transition: background .15s; margin: 0; }
.switch input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--text-3); transition: transform .15s, background .15s; }
.switch input:checked { background: var(--gold-soft); border-color: var(--gold-line); }
.switch input:checked::after { transform: translateX(20px); background: var(--gold); }

/* Sign-in pages */
.auth-body { background: var(--bg); }
.auth { min-height: 100vh; display: grid; place-items: center; align-content: center; gap: 14px; padding: 28px 16px; }
.auth-card { width: 100%; max-width: 440px; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 26px 28px 28px; box-shadow: var(--shadow); }
.auth-logo { display: block; margin: 0 auto; width: 300px; max-width: 100%; }
.auth-logo img { width: 100%; height: auto; }
.auth-logo img.for-dark { display: block; }
.auth-card h1 { font-size: 23px; font-weight: 800; margin: 0 0 6px; text-align: center; }
.auth-card .sub { text-align: center; color: var(--text-2); margin: 0 0 20px; font-size: 14.5px; }
.auth-card .form { max-width: none; }
.auth-foot { margin: 0; text-align: center; font-size: 14px; color: var(--text-2); }
.auth-theme { margin: 0; }
.code-input { text-align: center; font: 700 22px/1 var(--head) !important; letter-spacing: .3em; }
.qr { display: grid; place-items: center; padding: 12px; background: #fff; border-radius: 12px; width: 220px; margin: 6px auto; }
.codes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; font: 600 14px/1.6 ui-monospace, Menlo, Consolas, monospace; padding: 12px 16px; border: 1px dashed var(--gold-line); border-radius: 10px; background: var(--surface-2); }

/* App shell (member area + admin) */
.app { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; }
.side { background: var(--brand-bg); border-right: 1px solid var(--brand-line); padding: 16px 12px; display: flex; flex-direction: column; gap: 14px; position: sticky; top: 0; height: 100vh; overflow-y: auto; color: var(--brand-text); }
.side .logo { padding: 2px 6px 6px; }
.side .logo img { height: 48px; width: auto; }
.side .logo-word b { font-size: 16px; }   /* emblem + word fit the 248px menu in both themes */
.side nav { display: grid; gap: 1px; }
.side .grp { font: 700 10.5px/1.4 var(--head); letter-spacing: .14em; text-transform: uppercase; color: var(--brand-dim); padding: 12px 10px 6px; }
.side a.it { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; color: var(--brand-muted); font-size: 14px; font-weight: 500; }
.side a.it:hover { background: var(--brand-bg-2); color: var(--brand-text); }
.side a.it.on { background: var(--brand-on); color: var(--brand-accent); }
.side a.it .badge { margin-left: auto; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: var(--brand-bg-2); color: var(--brand-muted); font-variant-numeric: tabular-nums; }
.side a.it .badge.hot { background: var(--grad); color: var(--on-gold); }
.side .who { margin-top: auto; border-top: 1px solid var(--brand-line); padding: 12px 8px 16px; font-size: 12.5px; color: var(--brand-dim); display: grid; gap: 2px; overflow-wrap: anywhere; position: sticky; bottom: -16px; background: var(--brand-bg); }
.side .who b { color: var(--brand-text); font-weight: 600; font-size: 13px; }
.side .who .linklike { color: var(--brand-accent); justify-self: start; margin-top: 6px; font-size: 13px; }
.app-main { min-width: 0; display: flex; flex-direction: column; }
.app-top { display: none; }
.main { padding: 26px 32px 44px; min-width: 0; }
.main-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.main-head h1 { font-size: 26px; font-weight: 800; }
.main-head p { margin: 4px 0 0; color: var(--text-2); font-size: 14px; }
.cols { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.stack { display: grid; gap: 18px; align-content: start; }
.kv { border: 1px solid var(--border); border-radius: 14px; background: var(--surface); overflow: hidden; margin: 0; }
.kv > div { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 12px; padding: 11px 16px; border-top: 1px solid var(--border); font-size: 14px; }
.kv > div:first-child { border-top: 0; }
.kv dt { color: var(--text-3); }
.kv dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 18px; overflow-x: auto; }
.tabs a { padding: 10px 14px; color: var(--text-2); font-weight: 600; font-size: 14px; border-bottom: 2px solid transparent; white-space: nowrap; }
.tabs a.on { color: var(--gold); border-bottom-color: var(--gold); }

/* Order tracker (member area) */
.track { border: 1px solid var(--border); border-radius: 16px; background: var(--surface); overflow: hidden; }
.steps-line { list-style: none; margin: 0; padding: 24px 20px 20px; display: grid; grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr)); }
.steps-line li { position: relative; padding-right: 10px; }
.steps-line li::before { content: ""; position: absolute; top: 8px; left: 20px; right: 0; height: 2px; background: var(--border); }
.steps-line li.done::before { background: var(--gold); }
.steps-line li:last-child::before { display: none; }
.steps-line .dot { position: relative; z-index: 1; margin: 0 0 12px; width: 18px; height: 18px; background: var(--surface); }
.steps-line li.done .dot { background: var(--gold); }
.steps-line li.now .dot { box-shadow: 0 0 0 5px var(--gold-soft); }
.steps-line li.todo .dot { border-color: var(--border); }
.steps-line b { display: block; font-size: 13.5px; font-weight: 600; }
.steps-line span { display: block; font-size: 12.5px; color: var(--text-3); font-variant-numeric: tabular-nums; margin-top: 2px; }
.steps-line li.now b { color: var(--gold); }

/* Legal documents */
.doc-meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 0 0 18px; font-size: 13px; color: var(--text-3); }
.draft-banner { border: 1px dashed var(--warn); border-left: 3px solid var(--warn); color: var(--text); background: var(--warn-soft); border-radius: 10px; padding: 10px 14px; font-size: 14px; margin: 0 0 18px; }

/* ===== Tablets ===== */
@media (max-width: 1080px) {
  .nav { display: none; }
  .menu-btn { display: grid; }
  .foot-grid { grid-template-columns: 1fr 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }
  .tiles.t5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .tiles, .tiles.t3, .steps, .feats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .two { grid-template-columns: 1fr; }
  .app { grid-template-columns: 1fr; }
  .side { position: fixed; inset: 0 auto 0 0; width: 272px; z-index: 40; transform: translateX(-100%); transition: transform .2s; }
  .side.open { transform: none; box-shadow: 0 0 40px rgba(0, 0, 0, .5); }
  .app-top { display: flex; align-items: center; gap: 12px; height: 64px; padding: 0 16px; background: var(--brand-bg); border-bottom: 1px solid var(--brand-line); position: sticky; top: 0; z-index: 30; }
  .app-top .logo img { height: 44px; }
  .cols { grid-template-columns: 1fr; }
  .inv li { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr) 80px; }
  .inv .c-add { display: none; }
}

/* ===== Phones ===== */
@media (max-width: 640px) {
  .wrap { padding: 0 16px; }
  body { font-size: 14.5px; }
  .site-header > .wrap { height: 62px; gap: 10px; }
  .logo img { height: 44px; }
  .logo-word b { font-size: 16px; }
  .hide-sm { display: none !important; }
  .flashes { padding: 0 16px; }
  .hero { padding: 34px 0 28px; }
  .hero h1, .h1 { font-size: 31px; }
  .lead, .hero .lead { font-size: 15.5px; }
  .hero .btn-row .btn { flex: 1; }
  .tiles, .tiles.t3, .tiles.t5 { gap: 10px; }
  .tiles.t3:not(.acct-tiles) > .tile:last-child { grid-column: 1 / -1; }
  .tiles.t5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile { padding: 12px 14px; }
  .tile .val { font-size: 22px; }
  section { padding: 40px 0; }
  .h2, h2.sec { font-size: 23px; }
  .sec-head { flex-direction: column; align-items: start; }
  .filters .count { margin-left: 0; width: 100%; }
  .filters select { flex: 1 1 calc(50% - 8px); min-width: 0; }
  /* tradeline rows stack: bank + price on top, facts in two columns below */
  .inv li.inv-head { display: none; }
  .inv li { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 14px; padding: 14px; }
  .inv .c-price { grid-column: 2; grid-row: 1; }
  .inv .c-buy { padding-left: 0; border-left: 0; }
  .inv .c-add { display: block; grid-column: 1 / -1; }
  .inv .c-add .btn { width: 100%; }
  .inv .c[data-l]::before { content: attr(data-l); font: 700 10.5px/1.4 var(--head); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
  .inv-foot { flex-direction: column; }
  .steps, .feats { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .main { padding: 18px 16px 32px; }
  .main-head h1 { font-size: 22px; }
  .rows > li { grid-template-columns: minmax(0, 1fr) !important; gap: 6px; }
  .rows > li.head { display: none; }
  .rows .w { padding-left: 0; border-left: 0; display: flex; gap: 8px; flex-wrap: wrap; }
  .kv > div { grid-template-columns: 1fr; gap: 2px; }
  .field-row, .field-row.r3 { grid-template-columns: 1fr; }
  .auth-card { padding: 20px 18px 22px; }
  .steps-line { grid-template-columns: 1fr; gap: 14px; }
  .steps-line li { display: grid; grid-template-columns: 30px 1fr; padding: 0; }
  .steps-line li::before { left: 8px; top: 20px; bottom: -14px; right: auto; width: 2px; height: auto; }
  .steps-line .dot { margin: 0; }
}
@media (max-width: 400px) {
  .hide-xs { display: none !important; }
  /* the smallest phones (320px): logo, theme and menu buttons still fit on one line in both themes */
  .site-header .logo img { height: 40px; }
  .site-header .logo-word b { font-size: 14px; }
  .site-header .head-actions { gap: 8px; }
}