/* AutoTrend System — members dashboard (/members) and the section pages that share its header (/scanner,
   /courses, /help). Design: design/members-dashboard/Main.dc.html. Glass: design/liquid-glass/SPEC.md §2.
   The look follows the member's clock through <html data-phase>: morning, midday and afternoon are light,
   evening and night are dark (set in the page head before the first paint; see server/pages/members.js). */

:root {
  /* light */
  --text: #12141c; --text-2: #454a5e; --text-3: #5c6176;
  --line: rgba(20,30,50,.10); --hover: rgba(20,30,50,.06); --chip: rgba(20,30,50,.06);
  --selected: rgba(20,104,200,.12); --accent: #0f5bb0;
  --up: #1468c8; --down: #f05a12; --up-text: #0f5bb0; --down-text: #b4460c;
  --sell: #dc2f3f; --sell-text: #b81f2e; /* Signal Scanner: sell signals are red, like the ATS 3 */
  /* Regular glass (bars and panels) */
  --glass: rgba(255,255,255,.60); --glass-border: rgba(255,255,255,.85);
  --glass-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 0 0 .5px rgba(20,30,50,.10), 0 14px 40px rgba(30,40,70,.14);
  --glass-blur: blur(30px) saturate(180%);
  --menu: #fcfdff; /* dropdowns: solid, no blur (a blur inside the glass header can't reach the page) */
  /* morning sky (also the look before the page script runs) */
  --sky: radial-gradient(900px 520px at 0% 0%, rgba(255,177,21,.22), transparent 70%), radial-gradient(800px 600px at 100% 8%, rgba(74,194,219,.22), transparent 70%), linear-gradient(180deg, #fcf8f2 0%, #f2f5fa 100%);
  color-scheme: light;
}
html[data-phase="midday"] {
  --sky: radial-gradient(900px 600px at 10% 0%, rgba(74,194,219,.20), transparent 70%), radial-gradient(700px 500px at 100% 100%, rgba(253,120,20,.08), transparent 70%), linear-gradient(180deg, #f3f6fb, #ebeef5);
}
html[data-phase="afternoon"] {
  --sky: radial-gradient(900px 600px at 100% 0%, rgba(252,120,40,.22), transparent 70%), radial-gradient(800px 600px at 0% 100%, rgba(8,87,178,.16), transparent 70%), linear-gradient(180deg, #e6e3ec, #d9dde8);
}
html[data-phase="evening"], html[data-phase="night"] {
  /* dark */
  --text: #eef0f7; --text-2: #c3c7d8; --text-3: #9ea3bb;
  --line: rgba(255,255,255,.10); --hover: rgba(255,255,255,.08); --chip: rgba(255,255,255,.08);
  --selected: rgba(90,184,236,.20); --accent: #7cc6f0;
  --up: #5ab8ec; --down: #ff8a3d; --up-text: #7cc6f0; --down-text: #ffa267;
  --sell: #ff5f6b; --sell-text: #ffa3ab;
  --glass: rgba(24,27,38,.52); --glass-border: rgba(255,255,255,.10);
  --glass-shadow: inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(255,255,255,.04), 0 18px 50px rgba(0,0,0,.42);
  --menu: #1c1f2c;
  color-scheme: dark;
}
html[data-phase="evening"] {
  --sky: radial-gradient(1100px 520px at 50% 115%, rgba(252,65,38,.32), transparent 70%), radial-gradient(800px 600px at 0% 0%, rgba(74,120,219,.24), transparent 70%), linear-gradient(180deg, #1d2544 0%, #151a31 55%, #2a1c2e 100%);
}
html[data-phase="night"] {
  --sky: radial-gradient(900px 600px at 15% 0%, rgba(40,90,180,.22), transparent 70%), radial-gradient(700px 500px at 100% 100%, rgba(252,65,38,.06), transparent 70%), linear-gradient(180deg, #0c0f19, #07080d);
}
/* without backdrop blur, glass needs to be nearly opaque to stay readable */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --glass: rgba(250,251,253,.96); }
  html[data-phase="evening"], html[data-phase="night"] { --glass: rgba(20,23,33,.96); }
}

* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh; padding: 12px 16px 56px;
  font: 15px -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased; color: var(--text);
  background: var(--sky); transition: background .8s ease;
}
a { color: var(--accent); }
a:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.mb-wrap { max-width: 1240px; margin: 0 auto; }
.glass {
  background: var(--glass); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}
.ic { display: block; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.ic-bold { stroke-width: 2.25; }

/* ---------------- header ---------------- */
.mb-top {
  height: 56px; border-radius: 28px; padding: 0 8px; position: relative; z-index: 20;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 4px; /* logo · menu in the middle · profile */
}
.mb-brand { grid-column: 1; justify-self: start; display: flex; align-items: center; gap: 10px; padding: 0 10px 0 2px; text-decoration: none; color: var(--text); }
.mb-logo { display: block; }
.mb-logo img { display: block; height: 32px; width: auto; }
.mb-brand .mb-logo { width: auto; height: auto; border-radius: 0; } /* not a market's round logo (.mb-logo below) */
/* the logo with white text on the evening / night looks */
.mb-logo .logo-on-dark, html[data-phase="evening"] .mb-logo .logo-on-light, html[data-phase="night"] .mb-logo .logo-on-light { display: none; }
html[data-phase="evening"] .mb-logo .logo-on-dark, html[data-phase="night"] .mb-logo .logo-on-dark { display: block; }
.mb-nav { grid-column: 2; display: flex; align-items: center; gap: 2px; }
.mb-nl {
  height: 40px; padding: 0 14px; border-radius: 20px; display: inline-flex; align-items: center;
  color: var(--text-2); font-size: 15px; font-weight: 600; text-decoration: none; transition: background .15s, color .15s;
}
.mb-nl:hover { background: var(--hover); color: var(--text); }
.mb-nl.on { color: var(--accent); background: var(--selected); }
.mb-nl:focus-visible { border-radius: 20px; }
.mb-me { grid-column: 3; justify-self: end; position: relative; display: flex; align-items: center; gap: 4px; }
/* phones: the menu button and its list of the main links */
.mb-burger { display: none; width: 40px; height: 40px; border-radius: 20px; place-items: center; border: 0; padding: 0; background: none; color: var(--text); cursor: pointer; }
.mb-burger:hover, .mb-burger[aria-expanded="true"] { background: var(--hover); }
.mb-burger:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.mb-menu.mb-navmenu { width: 260px; }
.mb-navmenu .mb-mi.on { color: var(--accent); background: var(--selected); }
.mb-navmenu .mb-mi.on .ic { color: var(--accent); }
.mb-avatar { width: 40px; height: 40px; border-radius: 20px; display: grid; place-items: center; border: 0; padding: 0; background: none; cursor: pointer; }
.mb-avatar:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.mb-avatar[aria-expanded="true"] { box-shadow: 0 0 0 3px var(--selected); }
.mb-avatar span, .mb-avatar-lg {
  width: 36px; height: 36px; border-radius: 18px; display: grid; place-items: center; font-size: 15px; font-weight: 700; color: #fff;
  background: linear-gradient(160deg, #3aa7d0, #0857b2); box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
}
.mb-avatar-lg { width: 40px; height: 40px; border-radius: 20px; flex: none; }

/* profile menu (site/menu.js) */
.mb-menu, .mb-tmenu { background: var(--menu); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); }
.mb-menu { position: absolute; right: 0; top: calc(100% + 8px); width: 290px; max-width: calc(100vw - 32px); border-radius: 22px; padding: 8px; }
.mb-menu[hidden], .mb-tmenu[hidden] { display: none; }
.mb-menu form { margin: 0; }
.mb-who { display: flex; align-items: center; gap: 12px; padding: 10px 10px 12px; margin-bottom: 6px; border-bottom: 1px solid var(--line); }
.mb-who > div { min-width: 0; }
.mb-who b { display: block; font-size: 15px; color: var(--text); }
.mb-who small { display: block; font-size: 13px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mb-mi {
  width: 100%; height: 44px; padding: 0 10px; border: 0; border-radius: 12px; background: none; cursor: pointer;
  display: flex; align-items: center; gap: 12px; font: 600 15px -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
  color: var(--text); text-align: left; text-decoration: none;
}
.mb-mi[hidden] { display: none; } /* Get the app: only where the browser can add it (site/install.js) */
.mb-mi:hover, .mb-mi[aria-expanded="true"] { background: var(--hover); }
.mb-mi:focus-visible, .mb-ti:focus-visible { outline: 3px solid var(--accent); outline-offset: -1px; }
.mb-mi .ic { color: var(--text-2); }
.mb-mi.mb-out { color: var(--text-2); }
.mb-val { margin-left: auto; font-size: 14px; font-weight: 500; color: var(--text-3); }
.mb-chev { color: var(--text-3); }
.mb-sep { height: 1px; margin: 6px 4px; background: var(--line); }
/* Theme: opens to the left of the menu (inline on phones) */
.mb-tmenu { position: absolute; right: calc(100% + 8px); width: 250px; border-radius: 18px; padding: 6px; }
.mb-ti {
  width: 100%; padding: 9px 10px; border: 0; border-radius: 11px; background: none; cursor: pointer;
  display: grid; grid-template-columns: 20px 1fr 18px; gap: 10px; align-items: center; text-align: left;
  font: 600 15px -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif; color: var(--text);
}
.mb-ti:hover { background: var(--hover); }
.mb-ti .ic { color: var(--text-2); }
.mb-ti small { display: block; font-size: 13px; font-weight: 500; color: var(--text-3); }
.mb-ti .mb-tick { color: var(--accent); visibility: hidden; }
.mb-ti[aria-checked="true"] .mb-tick { visibility: visible; }

/* ---------------- greeting ---------------- */
.mb-hero { padding: 52px 8px 30px; }
.mb-date { min-height: 18px; font-size: 15px; font-weight: 600; color: var(--text-3); font-variant-numeric: tabular-nums; }
.mb-hero h1 { margin: 8px 0 0; font-size: clamp(34px, 5vw, 54px); line-height: 1.05; font-weight: 750; letter-spacing: -1.2px; color: var(--text); }
.mb-hero p { margin: 12px 0 0; font-size: 18px; color: var(--text-2); }
/* one greeting per time of day (no flash: <html data-hello> is set before the first paint) */
.hello-morning, .hello-afternoon, .hello-evening { display: none; }
:root:not([data-hello]) .hello-morning, [data-hello="morning"] .hello-morning,
[data-hello="afternoon"] .hello-afternoon, [data-hello="evening"] .hello-evening { display: inline; }

/* ---------------- cards ---------------- */
.mb-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); gap: 20px; align-items: stretch; }
.mb-card {
  --radius: 28px; position: relative; border-radius: var(--radius); padding: 24px; display: flex; flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease;
}
.mb-card:hover { transform: translateY(-3px); }
.mb-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mb-title { display: inline-flex; align-items: center; gap: 6px; font-size: 22px; font-weight: 700; letter-spacing: -.2px; color: var(--text); text-decoration: none; }
.mb-title .ic { transition: transform .2s; }
.mb-card:hover .mb-title .ic { transform: translateX(3px); }
/* the title link covers its whole card */
.mb-stretch::after { content: ''; position: absolute; inset: 0; border-radius: var(--radius); }
.mb-stretch:focus-visible { outline: none; }
.mb-stretch:focus-visible::after { outline: 3px solid var(--accent); outline-offset: 3px; }
.mb-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase; color: var(--text-3); }
.mb-fill { flex: 1; }
.mb-foot { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-3); padding-top: 12px; border-top: 1px solid var(--line); }
.mb-foot[hidden] { display: none; }
.mb-note { margin: 0; font-size: 15px; color: var(--text-2); }
.mb-skel { display: block; border-radius: 8px; background: var(--chip); animation: mb-pulse 1.4s ease-in-out infinite; }
@keyframes mb-pulse { 50% { opacity: .45; } }

/* charts (blue card) */
.mb-charts {
  gap: 16px; min-height: 420px; overflow: hidden; color: #fff;
  background: linear-gradient(160deg, #1d86d2 0%, #0b5fb8 48%, #08479c 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 0 0 1px rgba(8,71,156,.4), 0 22px 50px rgba(8,87,178,.38);
}
.mb-mark { position: absolute; right: -40px; top: -30px; width: 220px; height: 220px; opacity: .14; pointer-events: none; }
.mb-charts .mb-title { color: #fff; font-size: 26px; }
.mb-charts .mb-eyebrow { color: rgba(255,255,255,.80); }
.mb-charts .mb-skel { background: rgba(255,255,255,.16); }
.mb-charts .mb-note { color: rgba(255,255,255,.85); margin-top: 6px; }
.mb-status { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 11px; border-radius: 14px; background: rgba(255,255,255,.16); font-size: 13px; font-weight: 650; }
.mb-status[hidden] { display: none; }
.mb-status i { width: 7px; height: 7px; border-radius: 4px; background: #7ff0c8; }
.mb-status.delayed i { background: rgba(255,255,255,.65); }
.mb-status.demo i { background: #ffb36b; }
.mb-sym { display: flex; align-items: baseline; gap: 10px; margin-top: 6px; flex-wrap: wrap; }
.mb-sym b { font-size: 20px; font-weight: 750; }
.mb-sym span { font-size: 14px; color: rgba(255,255,255,.82); }
.mb-price { display: flex; align-items: baseline; gap: 12px; margin-top: 4px; flex-wrap: wrap; }
.mb-price b { font-size: 36px; font-weight: 750; letter-spacing: -.6px; font-variant-numeric: tabular-nums; }
.mb-chg { font-size: 15px; font-weight: 650; padding: 4px 10px; border-radius: 10px; background: rgba(255,255,255,.18); font-variant-numeric: tabular-nums; }
.mb-spark { position: relative; flex: 1; min-height: 150px; display: flex; align-items: flex-end; pointer-events: none; } /* clicks go to the card's link */
.mb-spark svg { display: block; width: 100%; height: 170px; overflow: visible; }
.mb-spark path { vector-effect: non-scaling-stroke; }
.mb-spark .grid { fill: none; stroke: rgba(255,255,255,.12); stroke-width: 1; }
.mb-spark .last { fill: none; stroke: rgba(255,255,255,.55); stroke-width: 1; stroke-dasharray: 3 4; }
.mb-spark .dn-w { fill: none; stroke: #ffb36b; stroke-width: 1.25; }
.mb-spark .dn-b { fill: #ffb36b; }
.mb-spark .up-w { fill: none; stroke: #fff; stroke-width: 1.25; }
.mb-spark .up-b { fill: #fff; }
.mb-charts .mb-foot { justify-content: space-between; gap: 12px; color: rgba(255,255,255,.85); border-top-color: rgba(255,255,255,.18); }
.mb-resume { font-weight: 650; color: #fff; white-space: nowrap; }
.mb-studies span { white-space: nowrap; } /* narrow screens: wrap between the indicators, not inside a name */

/* Signal Scanner: a red-tinted card, the scanner's own colour (from the logo's orange to red) */
.mb-scan {
  gap: 14px; --accent: #c4281c; --scan-title: #b3241a; --scan-soft: rgba(232,52,38,.12); --scan-line: rgba(196,40,28,.14);
  background: radial-gradient(420px 260px at 100% 0%, rgba(252,65,38,.20), transparent 70%), radial-gradient(360px 240px at 0% 100%, rgba(255,177,21,.12), transparent 70%), linear-gradient(160deg, rgba(255,239,235,.84), rgba(255,248,246,.64));
  border-color: rgba(255,218,210,.95);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 0 0 .5px rgba(196,40,28,.18), 0 16px 42px rgba(196,40,28,.16);
}
html[data-phase="evening"] .mb-scan, html[data-phase="night"] .mb-scan {
  --accent: #ff8f80; --scan-title: #ffb3a8; --scan-soft: rgba(255,95,80,.20); --scan-line: rgba(255,140,120,.16);
  background: radial-gradient(420px 260px at 100% 0%, rgba(255,95,80,.26), transparent 70%), radial-gradient(360px 240px at 0% 100%, rgba(255,150,40,.08), transparent 70%), linear-gradient(160deg, rgba(118,26,22,.50), rgba(30,20,26,.54));
  border-color: rgba(255,140,120,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 0 0 .5px rgba(255,95,80,.20), 0 18px 50px rgba(0,0,0,.42);
}
.mb-scan .mb-title { color: var(--scan-title); }
.mb-scan .mb-foot { border-top-color: var(--scan-line); }
.mb-scan .mb-foot .ic { color: var(--accent); }
.mb-scan .mb-alert + .mb-alert { border-top-color: var(--scan-line); }
/* members without the add-on: made-up example rows, blurred, with the offer on top (the whole card still opens /scanner) */
.mb-lockwrap { position: relative; display: flex; flex-direction: column; }
.mb-scan.is-locked .mb-alerts { filter: blur(6px); opacity: .75; user-select: none; }
.mb-lock {
  position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 0 12px; text-align: center; pointer-events: none;
}
.mb-lock::before { content: ''; position: absolute; inset: 4% -4%; z-index: -1; background: radial-gradient(closest-side, rgba(255,246,244,.92), rgba(255,246,244,.55) 60%, transparent); }
html[data-phase="evening"] .mb-lock::before, html[data-phase="night"] .mb-lock::before { background: radial-gradient(closest-side, rgba(44,18,22,.92), rgba(44,18,22,.5) 60%, transparent); }
.mb-lock-ic {
  width: 48px; height: 48px; border-radius: 24px; display: grid; place-items: center; margin-bottom: 6px;
  background: var(--scan-soft); color: var(--scan-title); box-shadow: inset 0 0 0 1px var(--scan-line);
}
.mb-lock-ic svg { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.mb-lock b { font-size: 18px; font-weight: 700; letter-spacing: -.2px; color: var(--text); }
.mb-lock-text { font-size: 14px; color: var(--text-2); max-width: 30ch; }
.mb-btn.mb-btn-scan {
  margin-top: 12px; height: 40px; padding: 0 18px; border-radius: 20px; pointer-events: auto;
  background: linear-gradient(180deg, #f0533a, #c4281c); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 8px 20px rgba(196,40,28,.28);
}
.mb-new {
  height: 26px; padding: 0 10px; border-radius: 13px; display: inline-flex; align-items: center;
  font-size: 12px; font-weight: 700; letter-spacing: .4px; background: var(--scan-soft); color: var(--scan-title);
}
.mb-alerts { display: flex; flex-direction: column; margin: 0 -10px; }
.mb-alerts > .mb-note { padding: 6px 10px; }
.mb-alert { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 56px; padding: 6px 10px; border-radius: 14px; }
.mb-alert + .mb-alert { border-top: 1px solid var(--line); }
.mb-alert > div { min-width: 0; }
.mb-tri { display: block; stroke-width: 1.5; stroke-linejoin: round; }
.mb-tri.up { fill: var(--up); stroke: var(--up); }
.mb-tri.down { fill: var(--sell); stroke: var(--sell); }
.mb-alert-mkt { display: flex; align-items: center; gap: 10px; }
.mb-alert-mkt > div { min-width: 0; }
.mb-logo { display: block; flex: none; width: 30px; height: 30px; border-radius: 50%; } /* the market's logo (server/logos.js) */
.mb-alert-sym { display: flex; align-items: baseline; gap: 8px; }
.mb-alert-sym b { font-size: 15px; font-weight: 700; color: var(--text); }
.mb-tf { font-size: 12px; font-weight: 650; padding: 2px 7px; border-radius: 7px; background: var(--chip); color: var(--text-2); }
.mb-sig { font-size: 14px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mb-sig .up { font-weight: 650; color: var(--up-text); }
.mb-sig .down { font-weight: 650; color: var(--sell-text); }
.mb-ago { font-size: 13px; color: var(--text-3); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* FlipZones Scanner (members with the FlipZones add-on only): a purple-tinted card, the FlipZones colour (#C963FF, the
   logo's ZONES). Each zone keeps its colour from the chart: Daily green, Weekly blue, Monthly rose, Quarterly amber,
   Yearly slate (server/studies/flipzones.js), light and dark versions. Also used by the FlipZones Scanner page. */
:root {
  --z-D: #059669; --z-W: #2563eb; --z-M: #e11d48; --z-Q: #d97706; --z-Y: #475569;
  --fz-accent: #7e22ce; --fz-title: #7a22c9; --fz-soft: rgba(176,85,245,.14); --fz-line: rgba(126,34,206,.14); --fz-arrow: #7e22ce;
}
html[data-phase="evening"], html[data-phase="night"] {
  --z-D: #34d399; --z-W: #60a5fa; --z-M: #fb7185; --z-Q: #fbbf24; --z-Y: #e2e8f0;
  --fz-accent: #d9a8ff; --fz-title: #e3bdff; --fz-soft: rgba(201,99,255,.22); --fz-line: rgba(214,160,255,.16); --fz-arrow: #e3bdff;
}
.fz-z-D { --z: var(--z-D); } .fz-z-W { --z: var(--z-W); } .fz-z-M { --z: var(--z-M); } .fz-z-Q { --z: var(--z-Q); } .fz-z-Y { --z: var(--z-Y); }
/* the zone as a band in its colour, with an arrow from where the price came */
.fz-glyph { display: block; flex: none; }
.fz-glyph .band { fill: var(--z); }
.fz-glyph .arr { fill: none; stroke: var(--fz-arrow); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
/* the zone's name in its colour */
.fz-zone { display: inline-flex; align-items: center; gap: 6px; flex: none; font-size: 13px; font-weight: 700; padding: 3px 9px 3px 8px; border-radius: 8px;
  color: var(--text); background: color-mix(in srgb, var(--z) 14%, transparent); white-space: nowrap; }
.fz-zone::before { content: ''; width: 8px; height: 8px; border-radius: 2.5px; background: var(--z); }
.mb-fzs {
  gap: 14px; --accent: #7e22ce;
  background: radial-gradient(420px 260px at 100% 0%, rgba(201,99,255,.24), transparent 70%), radial-gradient(360px 240px at 0% 100%, rgba(255,64,220,.08), transparent 70%), linear-gradient(160deg, rgba(246,236,255,.86), rgba(251,247,255,.66));
  border-color: rgba(232,214,255,.95);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 0 0 .5px rgba(126,34,206,.18), 0 16px 42px rgba(126,34,206,.16);
}
html[data-phase="evening"] .mb-fzs, html[data-phase="night"] .mb-fzs {
  --accent: #d9a8ff;
  background: radial-gradient(420px 260px at 100% 0%, rgba(176,85,245,.30), transparent 70%), radial-gradient(360px 240px at 0% 100%, rgba(0,200,255,.06), transparent 70%), linear-gradient(160deg, rgba(70,26,110,.52), rgba(24,18,34,.56));
  border-color: rgba(214,160,255,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 0 0 .5px rgba(201,99,255,.22), 0 18px 50px rgba(0,0,0,.42);
}
.mb-fzs .mb-title { color: var(--fz-title); }
.mb-fzs .mb-new { background: var(--fz-soft); color: var(--fz-title); }
.mb-fzs .mb-foot { border-top-color: var(--fz-line); }
.mb-fzs .mb-foot .ic { color: var(--fz-accent); }
.mb-fzs .mb-alert + .mb-alert { border-top-color: var(--fz-line); }
.mb-fzs .mb-alert-sym { align-items: center; }
.mb-fzs .fz-zone { font-size: 12px; padding: 2px 7px 2px 6px; border-radius: 7px; gap: 5px; }
.mb-fzs .fz-zone::before { width: 7px; height: 7px; }
.mb-fzs .mb-sig b { font-weight: 650; color: var(--text); font-variant-numeric: tabular-nums; }

/* With the FlipZones Scanner (asked for on 14 Oct 2026): Charts, Signal Scanner and FlipZones Scanner side by side;
   below them the Training center under the first two, and Account above Help & support on the right */
.mb-cards.mb-fz { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "charts scan fz" "course course links"; }
.mb-fz > #chartCard { grid-area: charts; } .mb-fz > #scanCard { grid-area: scan; } .mb-fz > #fzCard { grid-area: fz; }
.mb-fz > #courseCard { grid-area: course; }
.mb-fz > .mb-links { grid-area: links; margin-top: 0; grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr 1fr; }
/* the wide Training center card: the course on the left, the next lesson on the right */
@media (min-width: 1021px) {
  .mb-fz > .mb-courses { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 18px 32px; align-items: start; }
  .mb-fz > .mb-courses > .mb-title { grid-column: 1 / -1; justify-self: start; }
  .mb-fz > .mb-courses > .mb-fill { display: none; }
  .mb-fz > .mb-courses > .mb-continue { grid-column: 2; grid-row: 2; align-self: start; }
  .mb-fz > .mb-courses > .mb-course { grid-column: 1; grid-row: 2; }
}
@media (max-width: 1020px) {
  .mb-cards.mb-fz { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "charts scan" "fz course" "links links"; }
  .mb-fz > .mb-links { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; }
}
@media (max-width: 700px) {
  .mb-cards.mb-fz { grid-template-columns: minmax(0, 1fr); grid-template-areas: "charts" "scan" "fz" "course" "links"; }
  .mb-fz > .mb-links { grid-template-columns: minmax(0, 1fr); }
}

/* Training center */
.mb-courses { gap: 18px; }
.mb-pct { display: flex; align-items: baseline; gap: 10px; margin-top: 8px; }
.mb-pct b { font-size: 40px; font-weight: 750; letter-spacing: -.8px; color: var(--text); font-variant-numeric: tabular-nums; }
.mb-pct span { font-size: 15px; color: var(--text-2); }
.mb-bar { height: 10px; border-radius: 5px; background: var(--chip); margin-top: 12px; overflow: hidden; }
.mb-bar i { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, #4ac2db, #0b5fb8); }
.mb-mods { display: grid; grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr)); gap: 6px; margin-top: 14px; }
.mb-mod { display: flex; flex-direction: column; gap: 6px; }
.mb-mod i { height: 6px; border-radius: 3px; background: var(--chip); }
.mb-mod.done i { background: linear-gradient(90deg, #4ac2db, #0b5fb8); }
.mb-mod.part i { background: linear-gradient(90deg, #0b5fb8 var(--p), var(--chip) var(--p)); }
.mb-mod span { font-size: 12px; font-weight: 600; color: var(--text-3); }
.mb-mod.done span, .mb-mod.part span { color: var(--text-2); }
.mb-continue { display: flex; flex-direction: column; gap: 18px; }
.mb-continue:empty { display: none; }
.mb-next { border-radius: 20px; padding: 14px; background: var(--chip); display: flex; gap: 14px; align-items: center; }
.mb-next > div:last-child { min-width: 0; }
.mb-play {
  width: 56px; height: 56px; border-radius: 16px; flex: none; display: grid; place-items: center;
  background: linear-gradient(160deg, #3aa7d0, #0857b2); box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
}
.mb-play svg { fill: #fff; }
.mb-next-title { font-size: 16px; font-weight: 650; color: var(--text); margin-top: 3px; }
.mb-next-meta { font-size: 14px; color: var(--text-3); margin-top: 2px; }
/* sits above the card's stretched title link */
.mb-lift { position: relative; z-index: 1; display: flex; }
.mb-btn {
  height: 44px; padding: 0 20px; border-radius: 22px; display: inline-flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 650; color: #fff; text-decoration: none;
  background: linear-gradient(180deg, #2a8fd6, #0b5fb8); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 8px 20px rgba(20,104,200,.30);
}
.mb-btn:hover { filter: brightness(1.06); }
.mb-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 22px; }

/* Account, Help & support */
.mb-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 20px; margin-top: 20px; }
.mb-link { --radius: 24px; padding: 18px 20px; flex-direction: row; align-items: center; gap: 16px; }
.mb-tile { width: 48px; height: 48px; border-radius: 15px; flex: none; display: grid; place-items: center; background: var(--chip); color: var(--text); }
.mb-link-text { min-width: 0; flex: 1; }
.mb-link .mb-title { font-size: 18px; }
.mb-sub { font-size: 14px; color: var(--text-2); margin-top: 2px; }

/* visitors (public pages): Log in and Sign up in place of the profile circle */
.mb-guest { gap: 6px; }
.mb-btn.mb-btn-sm { height: 40px; padding: 0 18px; border-radius: 20px; box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 6px 14px rgba(20,104,200,.24); }
@media (max-width: 480px) {
  .mb-top.mb-visitor .mb-logo img { height: 20px; }
  .mb-guest { gap: 2px; }
  .mb-guest .mb-nl { padding: 0 10px; font-size: 14px; }
  .mb-guest .mb-btn-sm { height: 36px; padding: 0 14px; font-size: 14px; }
}

/* section pages that aren't built yet */
.mb-back { padding: 0 8px; }

/* the menu button once the links no longer fit beside the logo: below 860 px, or 1040 px with five links (members
   with the FlipZones Scanner) */
@media (max-width: 860px) {
  .mb-nav { display: none; }
  .mb-burger { display: grid; }
  .mb-top { grid-template-columns: 1fr auto; }
  .mb-me { grid-column: 2; }
}
@media (max-width: 1040px) {
  .mb-top.mb-wide .mb-nav { display: none; }
  .mb-top.mb-wide .mb-burger { display: grid; }
  .mb-top.mb-wide { grid-template-columns: 1fr auto; }
  .mb-top.mb-wide .mb-me { grid-column: 2; }
}
@media (max-width: 760px) {
  .mb-nav { display: none; }
  .mb-burger { display: grid; }
  .mb-logo img { height: 26px; }
  .mb-top { padding-left: 4px; grid-template-columns: 1fr auto; }
  .mb-me { grid-column: 2; }
}
@media (max-width: 640px) {
  .mb-tmenu { position: static; width: auto; margin: 4px 0 6px; padding: 4px; box-shadow: none; border-color: transparent; background: var(--chip); }
}
@media (prefers-reduced-motion: reduce) {
  body, .mb-card, .mb-title .ic, .mb-nl { transition: none; }
  .mb-card:hover { transform: none; }
  .mb-card:hover .mb-title .ic { transform: none; }
  .mb-skel { animation: none; }
}