/* What the two looks share beyond the colour variables of theme.js: the page behind everything, the
   top bar and its tabs, the lift under a card, scrollbars. Loaded by every page after theme.js. */
:root {
  --page: 6 9 16;                 /* the page behind the cards */
  --glow: 56 189 248;             /* the brand blue, used as light, never as a fill */
  --glow-2: 129 140 248;
  --grid: 148 163 184;            /* the faint dot lattice, after the lattice of the mark */
  --grid-strength: .07;
  --card-lift: inset 0 1px 0 rgb(255 255 255 / .04), 0 10px 30px -18px rgb(0 0 0 / .9);
  --bar: 10 15 27;
}
html.light {
  --page: 243 245 249;
  --glow: 14 165 233;
  --glow-2: 99 102 241;
  --grid: 100 116 139;
  --grid-strength: .13;
  --card-lift: 0 1px 2px rgb(15 23 42 / .05), 0 12px 28px -20px rgb(15 23 42 / .28);
  --bar: 255 255 255;
}

html { background: rgb(var(--page)); }
body {
  background-color: rgb(var(--page));
  background-image:
    radial-gradient(ellipse 70% 42% at 18% -12%, rgb(var(--glow) / .13) 0%, transparent 62%),
    radial-gradient(ellipse 60% 38% at 88% -16%, rgb(var(--glow-2) / .12) 0%, transparent 60%),
    radial-gradient(rgb(var(--grid) / var(--grid-strength)) 1px, transparent 1.4px);
  background-size: auto, auto, 22px 22px;
  background-attachment: fixed;
  color: rgb(var(--c-slate-300));
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color 200ms ease, color 200ms ease;
}
::selection { background: rgb(var(--glow) / .3); }
.font-mono, code, td, th { font-variant-numeric: tabular-nums; }

/* White text stays white where it sits on a solid colour (a button), whatever the look. */
html.light :is(.bg-blue-600, .bg-blue-500, .bg-sky-600, .bg-sky-500, .bg-emerald-600, .bg-emerald-500, .bg-teal-600,
  .bg-green-600, .bg-red-600, .bg-rose-600, .bg-orange-600, .bg-amber-600, .bg-violet-600, .bg-indigo-600, .bg-fuchsia-500):is(.text-white, .hover\:text-white:hover) { color: #fff; }
html.light .bg-amber-500.text-white { color: #1c1917; }

/* ── Top bar ── */
.mq-bar {
  background: rgb(var(--bar) / .82);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid rgb(var(--c-slate-800));
  box-shadow: 0 1px 0 rgb(var(--glow) / .08), 0 12px 24px -22px rgb(0 0 0 / .55);
}
.mq-bar::after {            /* a hairline of brand light under the bar */
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgb(var(--glow) / .55) 22%, rgb(var(--glow-2) / .45) 60%, transparent);
}
.mq-mark { filter: drop-shadow(0 0 8px rgb(var(--glow) / .35)); }
html.light .mq-mark { filter: invert(1) hue-rotate(180deg) brightness(.35); }
.mq-word { letter-spacing: .02em; }
.mq-word b { font-weight: 700; background: linear-gradient(90deg, rgb(var(--glow)), rgb(var(--glow-2))); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mq-icon { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: .5rem; color: rgb(var(--c-slate-400)); }
.mq-icon:hover { color: rgb(var(--c-white)); background: rgb(var(--b-slate-800)); }
.mq-icon .sun { display: none; }
html.light .mq-icon .sun { display: block; }
html.light .mq-icon .moon { display: none; }

/* ── Tabs: the one you are on is a lit pill ── */
.tab-active, .tab-inactive {
  border-bottom: 0 !important; border-radius: .5rem; margin: .35rem .125rem; padding-top: .4rem !important; padding-bottom: .4rem !important;
  transition: color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}
.tab-active { color: rgb(var(--c-white)); font-weight: 600; background: rgb(var(--glow) / .13); box-shadow: inset 0 0 0 1px rgb(var(--glow) / .38), 0 0 18px -6px rgb(var(--glow) / .5); }
.tab-inactive { color: rgb(var(--c-slate-400)); }
.tab-inactive:hover { color: rgb(var(--c-slate-200)); background: rgb(var(--b-slate-800) / .7); }

/* ── Cards get a little lift off the page ── */
main :is([class*="rounded-lg"], [class*="rounded-xl"]):is([class~="bg-slate-900"], [class*="bg-slate-900/"], [class~="bg-slate-950"], [class*="bg-slate-950/"])[class*="border"] {
  box-shadow: var(--card-lift);
}
/* …and the look of 市场宏观's cards on every tab: a box of the page (a panel, not a field or a button) gets a faint
   wash of the brand blue from its top-left corner, and its hairline border a shade lighter so it reads as a card.
   A box tinted in a colour of its own (.mq-tone-*) keeps that. */
main :is(div, section, article, details, li):is([class*="rounded-lg"], [class*="rounded-xl"], [class*="rounded-2xl"]):is([class~="bg-slate-900"], [class*="bg-slate-900/"], [class~="bg-slate-950"], [class*="bg-slate-950/"])[class*="border"]:not([class*="mq-tone-"]) {
  background-image: linear-gradient(140deg, rgb(var(--glow) / .07), transparent 58%);
}
main :is(div, section, article, details, li):is([class*="rounded-lg"], [class*="rounded-xl"], [class*="rounded-2xl"]):is([class~="bg-slate-900"], [class*="bg-slate-900/"], [class~="bg-slate-950"], [class*="bg-slate-950/"]):is([class~="border-slate-800"], [class*="border-slate-800/"]) {
  border-color: rgb(var(--c-slate-700) / .75);
}
html.light main [class*="bg-slate-900/"], html.light main [class*="bg-slate-950/"] { background-color: rgb(255 255 255 / .92); }

/* ── Cards: one look for every block of the site (the look 市场宏观's 今日剧本 started). A box tinted from its corner in
   the colour of what it says (mq-tone-*: a section's own colour, or red / orange / amber as something nears),
   louder when it is to be done now (mq-glow-*), faded when it no longer stands (mq-dim); a pill for a verb or a
   direction, a chip for a number, a stat cell for a figure with its name, a bar for how near, a mark before
   the title of a group inside a section. */
.mq-card { position: relative; min-width: 0; border: 1px solid rgb(var(--c-slate-700) / .8); border-radius: 0.875rem; padding: 0.75rem 0.875rem;
  background: rgb(var(--b-slate-900)); box-shadow: var(--card-lift); transition: border-color 150ms ease, box-shadow 150ms ease; }
.mq-card-sm { border-radius: 0.75rem; padding: 0.5rem 0.75rem; box-shadow: none; }
a.mq-card:hover, button.mq-card:hover { border-color: rgb(var(--c-sky-500) / .7); }
.mq-tone-rose { border-color: rgb(var(--c-rose-500) / .6); background: linear-gradient(140deg, rgb(var(--b-rose-950) / .6), rgb(var(--b-slate-900)) 72%); }
.mq-tone-orange { border-color: rgb(var(--c-orange-400) / .7); background: linear-gradient(140deg, rgb(var(--b-orange-950) / .6), rgb(var(--b-slate-900)) 70%); }
.mq-tone-amber { border-color: rgb(var(--c-amber-500) / .5); background: linear-gradient(140deg, rgb(var(--b-amber-950) / .45), rgb(var(--b-slate-900)) 70%); }
.mq-tone-sky { border-color: rgb(var(--c-sky-700) / .55); background: linear-gradient(140deg, rgb(var(--b-sky-950) / .35), rgb(var(--b-slate-900)) 70%); }
.mq-tone-blue { border-color: rgb(var(--c-blue-500) / .4); background: linear-gradient(140deg, rgb(var(--b-blue-950) / .45), rgb(var(--b-slate-900)) 70%); }
.mq-tone-emerald { border-color: rgb(var(--c-emerald-500) / .45); background: linear-gradient(140deg, rgb(var(--b-emerald-950) / .45), rgb(var(--b-slate-900)) 75%); }
.mq-tone-teal { border-color: rgb(var(--c-teal-500) / .4); background: linear-gradient(140deg, rgb(var(--b-teal-950) / .4), rgb(var(--b-slate-900)) 72%); }
.mq-tone-violet { border-color: rgb(var(--c-violet-500) / .45); background: linear-gradient(140deg, rgb(var(--b-violet-950) / .45), rgb(var(--b-slate-900)) 72%); }
.mq-glow-rose { box-shadow: 0 0 0 1px rgb(var(--c-rose-500) / .25), 0 10px 30px -12px rgb(var(--c-rose-500) / .55); }
.mq-glow-orange { box-shadow: 0 0 0 1px rgb(var(--c-orange-400) / .2), 0 10px 28px -14px rgb(var(--c-orange-400) / .6); }
.mq-glow-emerald { box-shadow: 0 0 0 1px rgb(var(--c-emerald-400) / .2), 0 10px 28px -14px rgb(var(--c-emerald-400) / .55); }
.mq-dim { opacity: .55; filter: saturate(.3); }
.mq-pill { flex: none; padding: 0.0625rem 0.5rem; border-radius: 9999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.mq-pill-sm { font-size: 11px; border: 1px solid; }
.mq-chip { padding: 0.0625rem 0.375rem; border-radius: 0.375rem; font-family: 'IBM Plex Mono', monospace; font-weight: 600; font-variant-numeric: tabular-nums; }
.mq-stat { min-width: 0; border-radius: 0.5rem; background: rgb(var(--b-slate-950) / .6); padding: 0.375rem 0.5rem; }
.mq-group { display: flex; flex-wrap: wrap; align-items: center; gap: 0.125rem 0.5rem; margin-bottom: 0.5rem; }
.mq-group::before { content: ""; width: 0.25rem; height: 1rem; border-radius: 9999px; background: var(--mq-mark, rgb(var(--c-slate-600))); }
/* A line cut short until asked for (a card's source, a long reason): a click shows it whole and the arrow turns. */
.mq-fold { display: flex; align-items: flex-start; gap: 0.25rem; width: 100%; text-align: left; }
.mq-fold:hover { color: rgb(var(--c-slate-300)); }
.mq-fold > svg { flex: none; width: 0.875rem; height: 0.875rem; margin-top: 0.0625rem; color: rgb(var(--c-sky-400)); transition: transform 150ms ease; }
.mq-fold[aria-expanded="true"] > svg { transform: rotate(180deg); }
.mq-clamp-1, .mq-clamp-2 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.mq-clamp-1 { -webkit-line-clamp: 1; }
.mq-clamp-2 { -webkit-line-clamp: 2; }
.mq-meter { height: 5px; border-radius: 9999px; background: rgb(var(--b-slate-800)); overflow: hidden; }
.mq-meter > span { display: block; height: 100%; border-radius: inherit; transition: width 300ms ease; }
.mq-pulse { animation: mq-pulse 1.8s ease-in-out infinite; }
@keyframes mq-pulse { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .mq-pulse { animation: none; } .mq-meter > span, .mq-fold > svg { transition: none; } }

/* ── Inputs and focus ── */
:is(input, select, textarea, button, a):focus-visible { outline: 2px solid rgb(var(--glow) / .7); outline-offset: 1px; }
html.light :is(input, select, textarea) { color-scheme: light; }

/* ── Scrollbars ── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgb(var(--c-slate-700)); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: rgb(var(--c-slate-600)); }
.scrollbar-none::-webkit-scrollbar { display: none; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* the fade behind the phone's "More" button is the bar's own colour */
.mq-bar .bg-gradient-to-l { background-image: linear-gradient(to left, rgb(var(--bar)) 62%, transparent); }

/* ── 投研中心: three levels, three shapes, one accent ──
   Level 1 (which question): a segmented control, the picked one a raised key.
   Level 2 (which source): plain words on a hairline, the picked one underlined.
   Chips (今天反复被提到): small and round, in a quiet panel of their own.
   Every row runs the full width of the column, edge to edge like the cards under it, with each
   label centred in its own equal share: a row that floats in the middle of full-width cards reads
   as misplaced. */
.mq-tabs { display: flex; flex-wrap: wrap; gap: 2px; width: 100%;
  padding: 3px; border-radius: 12px; background: rgb(var(--b-slate-800) / .55); border: 1px solid rgb(var(--c-slate-800)); }
.mq-tab { flex: 1 1 0; white-space: nowrap; display: inline-flex; align-items: baseline; justify-content: center; gap: .4rem; padding: .5rem .75rem; border-radius: 9px; font-size: .875rem; font-weight: 500; line-height: 1.25rem; color: rgb(var(--c-slate-400)); transition: color 150ms ease, background-color 150ms ease, box-shadow 150ms ease; }
.mq-tab:hover { color: rgb(var(--c-slate-200)); }
.mq-tab.is-on { color: rgb(var(--c-white)); font-weight: 600; background: rgb(var(--b-slate-900)); box-shadow: 0 0 0 1px rgb(var(--c-slate-700)), 0 1px 2px rgb(0 0 0 / .25), 0 6px 14px -8px rgb(0 0 0 / .5); }
.mq-count { font-size: .72rem; font-weight: 500; font-variant-numeric: tabular-nums; color: rgb(var(--c-slate-500)); }
.mq-tab.is-on .mq-count { color: rgb(var(--c-sky-400)); }

.mq-sources { display: flex; flex-wrap: wrap; row-gap: .25rem; border-bottom: 1px solid rgb(var(--c-slate-800)); }
.mq-source { flex: 1 1 0; white-space: nowrap; position: relative; display: inline-flex; align-items: baseline; justify-content: center; gap: .35rem; padding: .5rem .5rem .6rem; margin-bottom: -1px; font-size: .8125rem; font-weight: 500; color: rgb(var(--c-slate-400)); border-bottom: 2px solid transparent; transition: color 150ms ease, border-color 150ms ease; }
.mq-source:hover { color: rgb(var(--c-slate-200)); border-bottom-color: rgb(var(--c-slate-600)); }
.mq-source.is-on { color: rgb(var(--c-white)); font-weight: 600; border-bottom-color: rgb(var(--c-sky-400)); }
.mq-source.is-on .mq-count { color: rgb(var(--c-sky-400)); }

.mq-recurring { padding: .65rem .9rem; border-radius: .75rem; border: 1px solid rgb(var(--c-slate-800)); background: rgb(var(--b-slate-900) / .6); }

/* the top bar's tabs share the full width too, each label centred in its share (on a phone they stay
   a row that scrolls from the left) */
@media (min-width: 768px) { .mq-nav > button { flex: 1 1 0; justify-content: center; text-align: center; white-space: nowrap; } }