/*
 * 天機風險推演陣 v3.4.0 · C PREVIEW
 * Desktop-first cultivation instrument skin.
 * All selectors are scoped to variant C so A / B remain unchanged.
 */

html[data-variant="c"] {
  --x-ink-950: #061014;
  --x-ink-900: #0a181d;
  --x-ink-850: #10242a;
  --x-jade-800: #173b40;
  --x-jade-700: #29595a;
  --x-jade-500: #79c9b9;
  --x-jade-300: #c2e5dc;
  --x-gold-700: #8e6325;
  --x-gold-500: #d7b45f;
  --x-gold-300: #f3dda0;
  --x-gold-100: #fff2c8;
  --x-cinnabar: #a94737;
  --x-danger: #e27b75;
  --x-panel: rgba(12, 39, 43, .46);
  --x-panel-deep: rgba(7, 27, 32, .63);
  --x-line: rgba(220, 185, 96, .46);
  --x-line-soft: rgba(220, 185, 96, .19);
  --x-text: #f2ead2;
  --x-muted: #a7b5a6;
  --x-dim: #718176;
  --acc: #d7b45f;
  --green: #79c9b9;
  --amber: #d9b65e;
  --red: #e27b75;
  --txt: #f2ead2;
  --x-serif: "Songti TC", "STSong", "Noto Serif TC", "PMingLiU", serif;
  --x-panel-shadow: 0 18px 55px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 239, 188, .06);
  --x-layer-scene: 2;
  --x-layer-panel: 10;
  --x-layer-content: 20;
  --x-layer-control: 30;
  --x-layer-popover: 40;
  overflow-x: clip;
}

/* ───────────────────────────── Stage / atmosphere ───────────────────────── */

html[data-variant="c"] body {
  min-width: 320px;
  overflow-x: clip;
  background:
    linear-gradient(180deg, rgba(183, 205, 210, .035) 0%, rgba(23, 45, 51, .045) 36%, rgba(5, 17, 23, .15) 100%),
    url("../assets/cultivation-bg-clean-v2.png") right top / 108% auto fixed no-repeat,
    #102228;
}

html[data-variant="c"] body::before {
  opacity: .55;
  mix-blend-mode: screen;
  background-image:
    linear-gradient(180deg, rgba(192, 211, 215, .12), rgba(116, 154, 162, .045) 58%, transparent 82%),
    radial-gradient(circle at 62.7% 17%, rgba(255, 248, 218, .16), transparent 16%),
    repeating-radial-gradient(circle at 62.7% 17%, transparent 0 73px, rgba(239, 220, 163, .026) 74px 75px),
    linear-gradient(rgba(229, 218, 178, .015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(229, 218, 178, .015) 1px, transparent 1px);
  background-size: auto, auto, 240px 240px, 38px 38px, 38px 38px;
}

html[data-variant="c"] body::after {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  bottom: -10%;
  pointer-events: none;
  z-index: 0;
  height: 46%;
  opacity: .48;
  filter: blur(27px);
  background:
    radial-gradient(ellipse at 5% 74%, rgba(232, 242, 237, .2), transparent 30%),
    radial-gradient(ellipse at 39% 84%, rgba(180, 211, 216, .15), transparent 33%),
    radial-gradient(ellipse at 78% 71%, rgba(245, 234, 207, .15), transparent 34%);
  animation: xian-mist-drift 11s ease-in-out infinite alternate;
}

@keyframes xian-mist-drift {
  from { transform: translate3d(-1.2%, 1.5%, 0) scale(1); }
  to { transform: translate3d(1.6%, -1.4%, 0) scale(1.035); }
}

html[data-variant="c"] #app {
  position: relative;
  isolation: isolate;
  max-width: 1920px;
  min-height: 100dvh;
  height: auto;
  margin: 0 auto;
  padding: 0 28px 24px 142px;
}

html[data-variant="c"] #app::before {
  content: "";
  position: fixed;
  pointer-events: none;
  inset: 5px 7px 0;
  z-index: 1;
  opacity: .22;
  background: url("../assets/xianxia-v3.4/corner-frame.webp") center top / 100% 100vh no-repeat;
  filter: saturate(.88) contrast(1.04) drop-shadow(0 0 8px rgba(224, 193, 111, .08));
}

html[data-variant="c"] .c-portal-aura {
  position: absolute;
  inset: 0 0 auto;
  height: 460px;
  z-index: 0;
  display: block;
  pointer-events: none;
  background:
    radial-gradient(circle at 62.7% 15.2%, rgba(255, 251, 230, .17) 0 2.5%, rgba(245, 225, 174, .065) 7%, transparent 18%),
    repeating-radial-gradient(circle at 62.7% 15.2%, transparent 0 50px, rgba(248, 232, 190, .025) 51px 52px, transparent 53px 72px);
  mix-blend-mode: screen;
  animation: xian-portal-breathe 8.5s ease-in-out infinite;
}

@keyframes xian-portal-breathe {
  0%, 100% { opacity: .56; transform: scale(1); }
  50% { opacity: .9; transform: scale(1.012); }
}

/* ─────────────────────────────── Identity rail ──────────────────────────── */

html[data-variant="c"] .c-identity-rail {
  position: absolute;
  top: 27px;
  left: 42px;
  z-index: 30;
  width: 50px;
  min-height: 329px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 58px 5px 13px;
  border: 1px solid rgba(231, 205, 137, .56);
  border-radius: 25px 25px 3px 3px;
  color: var(--x-gold-300);
  background:
    linear-gradient(180deg, rgba(38, 62, 66, .54), rgba(12, 34, 39, .36)),
    radial-gradient(circle at 50% 2%, rgba(249, 225, 158, .08), transparent 28%);
  box-shadow:
    inset 0 0 0 3px rgba(242, 212, 130, .035),
    inset 0 -35px 45px rgba(0, 0, 0, .18),
    0 19px 48px rgba(0, 0, 0, .25);
  backdrop-filter: blur(7px) saturate(96%);
}

html[data-variant="c"] .c-identity-rail::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(244, 216, 136, .7), transparent);
  box-shadow: 0 0 8px rgba(242, 209, 117, .28);
}

html[data-variant="c"] .c-identity-rail::after { bottom: 39px; }

html[data-variant="c"] .c-identity-rail::before {
  content: "⚒";
  position: absolute;
  top: 7px;
  left: 50%;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  transform: translateX(-50%);
  border: 1px solid rgba(238, 210, 137, .68);
  border-radius: 50%;
  color: #ead49a;
  background: radial-gradient(circle, rgba(60, 87, 87, .55), rgba(7, 29, 34, .74));
  box-shadow: inset 0 0 0 3px rgba(234, 208, 137, .035), 0 0 13px rgba(232, 207, 142, .08);
  font: 17px/1 var(--x-serif);
  text-shadow: 0 0 8px rgba(239, 214, 147, .2);
}

html[data-variant="c"] .c-rail-seal {
  display: none;
}

html[data-variant="c"] .c-rail-name {
  flex: 1;
  writing-mode: vertical-rl;
  text-orientation: upright;
  color: #efd994;
  font: 720 12px/1.08 var(--x-serif);
  letter-spacing: .1em;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .72), 0 0 15px rgba(236, 208, 126, .23);
}

html[data-variant="c"] .c-rail-name::after { display: none; }

html[data-variant="c"] .c-rail-red-seal {
  width: 20px;
  padding: 2px 1px;
  border: 1px solid rgba(190, 69, 49, .82);
  color: #d9654d;
  background: rgba(92, 24, 18, .16);
  writing-mode: vertical-rl;
  text-orientation: upright;
  font: 720 8px/1 var(--x-serif);
  letter-spacing: .05em;
  box-shadow: inset 0 0 7px rgba(205, 70, 50, .12), 0 0 9px rgba(205, 70, 50, .08);
}

html[data-variant="c"] .c-rail-version {
  top: calc(100% + 10px);
  left: -12px;
  padding: 3px 7px;
  border-color: rgba(225, 191, 100, .5);
  color: #d7b663;
  background: rgba(8, 29, 34, .72);
  box-shadow: inset 0 1px 0 rgba(255, 235, 177, .05), 0 8px 24px rgba(0, 0, 0, .2);
  backdrop-filter: blur(8px);
  letter-spacing: .08em;
}

/* Side inscriptions are calligraphy in the landscape layer, not boxed cards. */
html[data-variant="c"] .c-side-verse {
  position: absolute;
  z-index: 17;
  top: 430px;
  display: flex;
  width: auto;
  align-items: flex-start;
  gap: 2px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  writing-mode: horizontal-tb;
  color: rgba(247, 220, 145, .91);
  text-shadow:
    0 2px 1px rgba(0, 0, 0, .76),
    0 0 16px rgba(236, 203, 113, .27),
    0 0 2px rgba(255, 245, 205, .45);
  backdrop-filter: none;
  pointer-events: none;
}

html[data-variant="c"] .c-side-verse > span {
  display: block;
  writing-mode: vertical-rl;
  text-orientation: upright;
  font: 720 22px/1.1 "Kaiti TC", "STKaiti", "KaiTi", var(--x-serif);
  letter-spacing: .12em;
}

html[data-variant="c"] .c-side-verse > span + span { margin-top: 74px; }
html[data-variant="c"] .c-side-verse > i {
  align-self: flex-end;
  margin: 153px 0 0 2px;
  padding: 3px 2px;
  border: 1px solid rgba(190, 69, 49, .76);
  color: #ca5842;
  background: rgba(80, 19, 15, .12);
  writing-mode: vertical-rl;
  font: 700 8px/1 var(--x-serif);
  font-style: normal;
}

html[data-variant="c"] .c-side-verse::after { display: none; }
html[data-variant="c"] .c-side-left { display: flex; left: 35px; top: 445px; }
html[data-variant="c"] .c-side-right { right: 28px; top: 520px; }

/* Page-scoped scene decoration. It may show through glass panels, never cover data. */
html[data-variant="c"] .c-cultivator {
  position: absolute;
  top: 725px;
  left: -38px;
  z-index: var(--x-layer-scene);
  display: block;
  width: clamp(205px, 12vw, 230px);
  max-width: 230px;
  height: auto;
  opacity: .88;
  pointer-events: none;
  filter: saturate(.78) brightness(.9) contrast(.96) drop-shadow(9px 14px 18px rgba(3, 16, 20, .36));
}

/* ─────────────────────────────── Hero / ticker ─────────────────────────── */

html[data-variant="c"] .hdr {
  position: absolute;
  z-index: 34;
  top: 29px;
  right: 5px;
  width: auto;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

html[data-variant="c"] .hdr::before,
html[data-variant="c"] .hdr::after,
html[data-variant="c"] .hdr-main { display: none; }

html[data-variant="c"] .hdr-ticker {
  position: relative;
  min-width: 240px;
  min-height: 57px;
  justify-content: center;
  gap: 8px;
  padding: 9px 23px;
  border: 1px solid rgba(146, 210, 202, .4);
  border-radius: 999px;
  background:
    radial-gradient(circle at 12% 50%, rgba(167, 229, 219, .12), transparent 29%),
    linear-gradient(180deg, rgba(54, 80, 83, .52), rgba(12, 39, 45, .62));
  box-shadow:
    inset 0 0 0 2px rgba(214, 255, 239, .035),
    inset 0 0 25px rgba(133, 215, 203, .035),
    0 0 22px rgba(94, 186, 178, .08),
    0 12px 30px rgba(0, 0, 0, .2);
  backdrop-filter: blur(9px) saturate(98%);
}

html[data-variant="c"] .hdr-ticker::before,
html[data-variant="c"] .hdr-ticker::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 18px;
  height: 26px;
  transform: translateY(-50%);
  opacity: .66;
}

html[data-variant="c"] .hdr-ticker::before {
  left: -8px;
  border-left: 1px solid rgba(151, 214, 205, .62);
  border-top: 1px solid rgba(151, 214, 205, .62);
  border-bottom: 1px solid rgba(151, 214, 205, .62);
  border-radius: 13px 0 0 13px;
}

html[data-variant="c"] .hdr-ticker::after {
  right: -8px;
  border-right: 1px solid rgba(151, 214, 205, .62);
  border-top: 1px solid rgba(151, 214, 205, .62);
  border-bottom: 1px solid rgba(151, 214, 205, .62);
  border-radius: 0 13px 13px 0;
}

html[data-variant="c"] .c-ticker-gem {
  width: 14px;
  height: 14px;
  border-color: rgba(225, 255, 244, .92);
  box-shadow: 0 0 14px rgba(126, 235, 207, .82), inset 0 0 0 2px rgba(8, 54, 50, .38);
  animation: xian-gem-pulse 3.6s ease-in-out infinite;
}

@keyframes xian-gem-pulse {
  0%, 100% { filter: brightness(.92); box-shadow: 0 0 9px rgba(126, 235, 207, .55); }
  50% { filter: brightness(1.16); box-shadow: 0 0 18px rgba(126, 235, 207, .92); }
}

html[data-variant="c"] .c-ticker-label {
  display: inline;
  margin-right: 1px;
  color: #b9c9c5;
  font: 650 9px/1 var(--x-serif);
  letter-spacing: .12em;
  white-space: nowrap;
}
html[data-variant="c"] .idx-val {
  color: #f2dfaa;
  font-family: var(--x-serif);
  font-size: 31px;
  font-weight: 650;
  letter-spacing: .035em;
  text-shadow: 0 0 19px rgba(240, 216, 151, .2);
}
html[data-variant="c"] .c-ticker-unit { color: #b7d2cb; font: 680 10px/1 var(--x-serif); letter-spacing: .1em; }

html[data-variant="c"] .b-intro {
  position: relative;
  z-index: 2;
  min-height: 230px;
  height: 230px;
  flex: 0 0 230px;
  margin: 0;
  padding: 20px 12px 44px;
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

html[data-variant="c"] .b-intro::before,
html[data-variant="c"] .b-intro::after { display: none; }

html[data-variant="c"] .b-intro > div:first-child {
  position: relative;
  width: min(650px, 53vw);
  margin-left: clamp(52px, 9.6vw, 170px);
}

html[data-variant="c"] .b-kicker {
  position: relative;
  z-index: 1;
  width: max-content;
  min-width: 255px;
  margin: 0 auto -13px;
  padding: 7px 31px;
  color: #e0c778;
  background: url("../assets/xianxia-v3.4/title-plaque.webp") center / 100% 100% no-repeat;
  font: 700 9px/1 var(--x-serif);
  letter-spacing: .18em;
  text-align: center;
  text-shadow: 0 1px 9px rgba(0, 0, 0, .78);
}

html[data-variant="c"] .b-kicker-default { display: none; }
html[data-variant="c"] .c-kicker-copy { display: inline; }
html[data-variant="c"] .b-title { display: none; }

html[data-variant="c"] .c-title-art {
  position: absolute;
  z-index: 0;
  top: 1px;
  left: 50%;
  display: block;
  width: min(515px, 42vw);
  height: auto;
  transform: translateX(-50%);
  opacity: .055;
  filter: grayscale(.45) sepia(.12) saturate(.32) contrast(.72) brightness(1.05);
}

html[data-variant="c"] .c-title-calligraphy {
  position: relative;
  z-index: 1;
  width: min(550px, 46vw);
  display: block;
  margin: 13px auto 0;
  color: #dfcca4;
  font: 520 clamp(44px, 4.35vw, 68px)/.94 "Kaiti TC", "STKaiti", "KaiTi", var(--x-serif);
  letter-spacing: .025em;
  text-shadow:
    0 1px 0 rgba(255, 248, 222, .34),
    0 4px 12px rgba(11, 26, 29, .7),
    0 0 24px rgba(239, 216, 161, .11);
  transform: rotate(-.35deg);
}
html[data-variant="c"] .c-title-calligraphy > span { display: block; white-space: nowrap; }
html[data-variant="c"] .c-title-calligraphy > span:first-child { text-align: left; }
html[data-variant="c"] .c-title-calligraphy > span:last-child { margin-top: 2px; text-align: right; }

html[data-variant="c"] .b-copy { display: none; }
html[data-variant="c"] .c-hero-copy {
  display: block;
  margin-top: 4px;
  color: #c0cdca;
  text-align: center;
  font: 610 11px/1.5 var(--x-serif);
  letter-spacing: .14em;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .9);
}

html[data-variant="c"] .b-actions {
  position: absolute;
  z-index: 3;
  top: 135px;
  right: -16px;
  display: flex;
  gap: 10px;
}

html[data-variant="c"] .b-action {
  position: relative;
  min-width: 110px;
  min-height: 42px;
  padding: 9px 16px;
  border: 1px solid rgba(231, 205, 138, .48);
  border-radius: 0;
  color: #d9c99c;
  background:
    linear-gradient(180deg, rgba(67, 86, 87, .48), rgba(16, 41, 46, .62)),
    radial-gradient(circle at 50% 0, rgba(243, 222, 161, .07), transparent 58%);
  box-shadow: inset 0 0 0 1px rgba(245, 218, 140, .035), 0 9px 24px rgba(0, 0, 0, .2);
  font: 700 11px/1 var(--x-serif);
  letter-spacing: .06em;
  backdrop-filter: blur(7px) saturate(96%);
  clip-path: polygon(7px 0, calc(100% - 7px) 0, 100% 7px, 100% calc(100% - 7px), calc(100% - 7px) 100%, 7px 100%, 0 calc(100% - 7px), 0 7px);
}

html[data-variant="c"] .b-action::after {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(244, 222, 164, .09);
  pointer-events: none;
}

html[data-variant="c"] .b-action::before,
html[data-variant="c"] .b-action.feedback-primary::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 13px;
  width: 24px;
  height: 1px;
  display: block;
  background: linear-gradient(90deg, transparent, rgba(255, 239, 195, .9), transparent);
  pointer-events: none;
}

html[data-variant="c"] .b-action:hover,
html[data-variant="c"] .b-action.active {
  border-color: #edd083;
  color: #f6dea0;
  background: linear-gradient(180deg, rgba(42, 75, 78, .8), rgba(9, 32, 38, .9));
  box-shadow: 0 0 19px rgba(226, 196, 119, .13), inset 0 1px 0 rgba(255, 239, 188, .11);
}

/* Skin switch stays inside the existing jade action system, with quieter weight. */
html[data-variant="c"] .variant-switch-action {
  border-color: rgba(220, 203, 158, .36);
  color: #c7c3ad;
  background:
    linear-gradient(180deg, rgba(50, 69, 72, .36), rgba(13, 35, 40, .54)),
    radial-gradient(circle at 50% 0, rgba(243, 222, 161, .045), transparent 58%);
}

html[data-variant="c"] .variant-switch-action:hover,
html[data-variant="c"] .variant-switch-action:focus-visible {
  border-color: rgba(237, 208, 131, .72);
  color: #f0d99f;
  background: linear-gradient(180deg, rgba(42, 75, 78, .72), rgba(9, 32, 38, .84));
}

/* Deep jade seal button: conspicuous, but not bright green or Bootstrap-like. */
html[data-variant="c"] .b-action.feedback-primary {
  min-width: 145px;
  border-color: rgba(234, 206, 128, .76);
  color: #f2d995;
  background:
    radial-gradient(circle at 22% 50%, rgba(128, 211, 193, .08), transparent 24%),
    linear-gradient(180deg, rgba(52, 91, 91, .64), rgba(10, 41, 47, .76));
  box-shadow:
    inset 0 1px 0 rgba(220, 255, 238, .09),
    inset 0 0 18px rgba(93, 187, 158, .055),
    0 0 0 1px rgba(46, 100, 82, .34),
    0 10px 26px rgba(0, 0, 0, .24);
  font-weight: 780;
}

html[data-variant="c"] .b-action.feedback-primary::before { display: block; }
html[data-variant="c"] .b-action.feedback-primary:hover {
  border-color: #f7dda0;
  color: #fff0c3;
  background: linear-gradient(180deg, rgba(35, 86, 83, .9), rgba(7, 38, 43, .96));
  box-shadow: 0 0 24px rgba(108, 207, 177, .16), inset 0 0 16px rgba(122, 223, 193, .06);
}

html[data-variant="c"] .feedback-gem {
  display: inline-block;
  margin-right: 5px;
  color: #8dd6c0;
  text-shadow: 0 0 8px rgba(117, 222, 191, .7);
}

html[data-variant="c"] .b-action-new {
  margin-left: 7px;
  padding: 2px 4px;
  border: 1px solid rgba(141, 219, 196, .38);
  border-radius: 2px;
  color: #b8e4d7;
  background: rgba(103, 202, 174, .1);
  font: 760 6px/1 var(--mono);
  letter-spacing: .08em;
}

html[data-variant="c"] .c-currency-notice {
  display: flex;
  align-items: center;
  position: absolute;
  left: clamp(68px, 12vw, 205px);
  bottom: 2px;
  width: max-content;
  max-width: min(690px, 58vw);
  min-height: 26px;
  margin: 0;
  padding: 3px 9px 3px 6px;
  gap: 9px;
  border: 1px solid rgba(227, 194, 104, .58);
  border-radius: 3px 12px 12px 3px;
  color: #f3e6c0;
  background:
    linear-gradient(90deg, rgba(86, 67, 33, .68), rgba(19, 50, 53, .65) 34%, rgba(8, 31, 36, .64));
  box-shadow: inset 0 1px 0 rgba(255, 237, 176, .15), 0 8px 28px rgba(0, 0, 0, .2);
  backdrop-filter: blur(8px) saturate(120%);
  font: 650 9.5px/1.15 var(--x-serif);
  letter-spacing: .025em;
}

html[data-variant="c"] .c-notice-seal {
  padding: 5px 8px;
  border-color: rgba(249, 222, 145, .66);
  color: #2b1905;
  background: linear-gradient(180deg, #f0d889, #b68131);
  box-shadow: inset 0 1px 0 rgba(255, 248, 208, .55);
}
html[data-variant="c"] .c-notice-main { color: #ffe6a1; }
html[data-variant="c"] .c-notice-detail { color: #d0d8d3; }

/* ───────────────────────────── Instrument dashboard ────────────────────── */

html[data-variant="c"] .c-dashboard {
  position: relative;
  z-index: var(--x-layer-panel);
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(480px, .88fr);
  grid-template-areas:
    "inputs summary"
    "decision summary";
  gap: 8px 12px;
  margin: 0;
}

/* Selector and three input plaques are independent, per ref_10. */
html[data-variant="c"] .c-input-zone {
  grid-area: inputs;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

html[data-variant="c"] .c-input-zone::before { display: none; }

html[data-variant="c"] .mode-bar {
  display: block;
  padding: 0 0 5px;
  border: 0;
  background: transparent;
}
html[data-variant="c"] .mode-lbl { display: none; }
html[data-variant="c"] .mode-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  overflow: hidden;
  border: 1px solid rgba(204, 177, 105, .38);
  border-radius: 4px;
  background: rgba(9, 34, 39, .4);
  box-shadow: var(--x-panel-shadow);
  backdrop-filter: blur(6px) saturate(96%);
}
html[data-variant="c"] .mode-tab {
  min-height: 34px;
  height: 34px;
  padding-top: 0;
  padding-bottom: 0;
  border-right: 1px solid rgba(204, 177, 105, .2);
  color: #b7c2bd;
  background: rgba(8, 31, 36, .2);
  font: 760 12px/1 var(--x-serif);
  letter-spacing: .12em;
}
html[data-variant="c"] .mode-tab:last-child { border-right: 0; }
html[data-variant="c"] .mode-tab sub {
  margin-left: 6px;
  color: #75867c;
  font: 600 7px/1 var(--x-serif);
  letter-spacing: .03em;
}
html[data-variant="c"] .mode-tab.active {
  color: #ffe6a3;
  background:
    linear-gradient(90deg, rgba(61, 109, 106, .37), rgba(155, 121, 55, .16), rgba(58, 101, 101, .33));
  box-shadow: inset 0 -2px 0 #d6b45d, inset 0 1px 0 rgba(255, 238, 182, .09);
  text-shadow: 0 0 14px rgba(230, 201, 118, .2);
}

html[data-variant="c"] .params,
html[data-variant="c"] .params.show-advanced {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 0;
  border: 0;
  background: transparent;
}
html[data-variant="c"] .params.show-advanced { grid-template-columns: repeat(4, minmax(0, 1fr)); }

html[data-variant="c"] .p,
html[data-variant="c"] .p.primary,
html[data-variant="c"] .p.coffee {
  position: relative;
  min-height: 57px;
  overflow: hidden;
  padding: 6px 9px;
  border: 1px solid rgba(205, 174, 94, .45);
  border-radius: 4px;
  background:
    linear-gradient(145deg, rgba(58, 82, 86, .3), rgba(12, 38, 44, .38)),
    radial-gradient(circle at 82% 8%, rgba(239, 218, 158, .07), transparent 35%);
  box-shadow: var(--x-panel-shadow);
  backdrop-filter: blur(5px) saturate(96%);
}
html[data-variant="c"] .p.primary {
  border-color: rgba(227, 193, 103, .63);
  box-shadow: inset 0 1px 0 rgba(249, 222, 150, .12), var(--x-panel-shadow);
}
html[data-variant="c"] .p.coffee {
  border-color: rgba(190, 108, 91, .52);
  background: linear-gradient(145deg, rgba(80, 75, 70, .3), rgba(31, 42, 45, .4));
  box-shadow: inset 0 1px 0 rgba(219, 133, 110, .12), var(--x-panel-shadow);
}

html[data-variant="c"] .p::before,
html[data-variant="c"] .p::after {
  content: "";
  position: absolute;
  width: 13px;
  height: 13px;
  opacity: .46;
  pointer-events: none;
}
html[data-variant="c"] .p::before {
  top: 4px;
  left: 4px;
  border-top: 1px solid #e0bf68;
  border-left: 1px solid #e0bf68;
}
html[data-variant="c"] .p::after {
  right: 4px;
  bottom: 4px;
  border-right: 1px solid #e0bf68;
  border-bottom: 1px solid #e0bf68;
}

html[data-variant="c"] .p-lbl {
  position: relative;
  z-index: 1;
  min-height: 15px;
  margin-bottom: 2px;
  color: #b9a76f;
  font: 720 9px/1.3 var(--x-serif);
  letter-spacing: .06em;
}
html[data-variant="c"] .p.primary .p-lbl { color: #dfc373; }
html[data-variant="c"] .p.coffee .p-lbl { color: #c98a79; }
html[data-variant="c"] .p-row {
  position: relative;
  z-index: 1;
  padding: 3px 8px;
  border: 1px solid rgba(215, 185, 105, .31);
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(37, 63, 66, .28), rgba(8, 28, 33, .5));
  box-shadow: inset 0 1px 0 rgba(237, 226, 190, .025), inset 0 0 13px rgba(0, 0, 0, .09);
}
html[data-variant="c"] .p-row:focus-within {
  border-color: #dec274;
  box-shadow: 0 0 0 2px rgba(222, 194, 116, .08), inset 0 0 15px rgba(209, 177, 92, .04);
}
html[data-variant="c"] .p-in,
html[data-variant="c"] .p.primary .p-in,
html[data-variant="c"] .p.coffee .p-in {
  color: #f1e7c9;
  font-size: 16px;
  line-height: 1.15;
  text-shadow: 0 0 12px rgba(226, 196, 119, .1);
}
html[data-variant="c"] .p-unit { color: #819188; font-size: 8px; }

/* Help text is rendered in a viewport-level popover so frosted cards cannot clip it. */
html[data-variant="c"] .tip {
  position: relative;
  z-index: 3;
  width: 18px;
  height: 18px;
  margin: 0 0 0 4px;
  padding: 0;
  border-color: rgba(219, 180, 77, .72);
  color: #e4c26b;
  background: rgba(21, 48, 51, .64);
  font: 760 10px/16px var(--mono);
  cursor: pointer;
  touch-action: manipulation;
}
html[data-variant="c"] .tip.help-link {
  width: auto;
  height: auto;
  min-height: 19px;
  margin: 0;
  padding: 2px 6px;
  border-radius: 999px;
  font: 680 8px/1.2 var(--x-serif);
  white-space: nowrap;
}
html[data-variant="c"] .tip.help-link.table-glossary {
  min-height: 26px;
  padding: 4px 9px;
  font-size: 8.5px;
}
html[data-variant="c"] .action-help-group > .action-tip {
  top: 50%;
  right: 8px;
  width: 17px;
  height: 17px;
  margin: 0;
  transform: translateY(-50%);
}
html[data-variant="c"] .action-help-group > .b-action.has-help { padding-right: 31px; }
html[data-variant="c"] .tip::before,
html[data-variant="c"] .tip::after { display: none !important; }
html[data-variant="c"] .tip:hover,
html[data-variant="c"] .tip:focus-visible,
html[data-variant="c"] .tip.is-open {
  border-color: #f0d48e;
  color: #fff0bd;
  background: rgba(43, 72, 72, .82);
  box-shadow: 0 0 14px rgba(229, 196, 113, .24), inset 0 0 8px rgba(238, 211, 143, .08);
}

html[data-variant="c"] .help-popover {
  --help-arrow-left: 50%;
  position: fixed;
  z-index: 3500;
  width: max-content;
  max-width: min(430px, calc(100vw - 24px));
  padding: 10px 13px;
  border: 1px solid rgba(231, 204, 134, .68);
  border-radius: 3px;
  color: #f0e7ca;
  background:
    linear-gradient(145deg, rgba(50, 73, 75, .95), rgba(8, 32, 37, .97)),
    radial-gradient(circle at 85% 8%, rgba(236, 215, 160, .1), transparent 42%);
  box-shadow:
    inset 0 0 0 1px rgba(246, 225, 167, .055),
    0 14px 36px rgba(0, 0, 0, .42),
    0 0 21px rgba(139, 197, 181, .06);
  backdrop-filter: blur(12px) saturate(96%);
  font: 650 11px/1.65 var(--x-serif);
  letter-spacing: .035em;
  pointer-events: none;
  text-align: left;
}
html[data-variant="c"] .help-popover-title {
  display: block;
  margin-bottom: 5px;
  color: #f0d58c;
  font: 760 11.5px/1.35 var(--x-serif);
  letter-spacing: .07em;
}
html[data-variant="c"] .help-popover-body {
  display: block;
  color: #d5ddd7;
  white-space: pre-line;
}
html[data-variant="c"] .help-popover.has-glossary {
  width: min(660px, calc(100vw - 24px));
  max-width: min(660px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  max-height: calc(100dvh - 24px);
  padding: 14px;
  overflow-y: auto;
  overscroll-behavior: contain;
  pointer-events: auto;
}
html[data-variant="c"] .help-popover.has-glossary::before { display: none; }
html[data-variant="c"] .help-glossary-item {
  border-color: rgba(231, 204, 134, .2);
  background: linear-gradient(90deg, rgba(225, 196, 118, .055), rgba(30, 64, 64, .12));
}
html[data-variant="c"] .help-glossary-item dt,
html[data-variant="c"] .help-glossary-note strong { color: #f0d58c; }
html[data-variant="c"] .help-glossary-item dt::before {
  border-color: rgba(231, 204, 134, .38);
  color: #ebce83;
  background: rgba(18, 49, 50, .72);
  box-shadow: inset 0 0 8px rgba(231, 204, 134, .06);
}
html[data-variant="c"] .help-glossary-alias { color: #91b7ac; }
html[data-variant="c"] .help-glossary-item dd { color: #d5ddd7; }
html[data-variant="c"] .help-glossary-formula { color: #a9c7bd; }
html[data-variant="c"] .help-glossary-note {
  border-top-color: rgba(231, 204, 134, .22);
  color: #aebfba;
}
html[data-variant="c"] .help-popover::before {
  content: "";
  position: absolute;
  left: var(--help-arrow-left);
  bottom: -6px;
  width: 10px;
  height: 10px;
  transform: translateX(-50%) rotate(45deg);
  border-right: 1px solid rgba(231, 204, 134, .68);
  border-bottom: 1px solid rgba(231, 204, 134, .68);
  background: rgba(9, 33, 38, .97);
}
html[data-variant="c"] .help-popover[data-placement="bottom"]::before {
  top: -6px;
  bottom: auto;
  border: 0;
  border-top: 1px solid rgba(231, 204, 134, .68);
  border-left: 1px solid rgba(231, 204, 134, .68);
}
html[data-variant="c"] .help-popover.hidden { display: none; }

html[data-variant="c"] .hint-bar {
  min-height: 24px;
  margin: 4px 0 0;
  padding: 3px 8px;
  border: 1px solid rgba(125, 158, 130, .24);
  border-radius: 4px;
  color: #7e8d80;
  background: rgba(8, 29, 34, .48);
  box-shadow: inset 0 1px 0 rgba(225, 241, 217, .025);
  backdrop-filter: blur(8px);
}
html[data-variant="c"] .data-status { margin-left: auto; flex-wrap: wrap; }
html[data-variant="c"] .validation-status { color: #e28b83; }
html[data-variant="c"] .model-help { color: #b9b28e; }
html[data-variant="c"] .summ-help { top: 4px; right: 14px; }
html[data-variant="c"] .dc-help { vertical-align: -3px; }
html[data-variant="c"] .dc-na,
html[data-variant="c"] .liq-na { color: #a9aaa0 !important; font-size: 8.5px; white-space: nowrap; }

/* ───────────────────────────── Jade result instruments ─────────────────── */

html[data-variant="c"] .summ,
html[data-variant="c"] .decision-wrap,
html[data-variant="c"] .b-tablebar {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(218, 181, 91, .5);
  border-radius: 5px;
  background:
    linear-gradient(145deg, rgba(31, 64, 67, .36), rgba(7, 30, 35, .46)),
    radial-gradient(circle at 50% 0, rgba(235, 215, 158, .065), transparent 47%);
  box-shadow: var(--x-panel-shadow), inset 0 0 35px rgba(96, 164, 136, .045);
  backdrop-filter: blur(6px) saturate(100%);
}

html[data-variant="c"] .summ {
  grid-area: summary;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-content: stretch;
  gap: 1px;
  min-width: 0;
  height: 216px;
  min-height: 216px;
  align-self: start;
  padding: 27px 7px 7px;
}
html[data-variant="c"] .summ::before {
  content: "靈石福運・參悟天機";
  position: absolute;
  inset: 0 10px auto;
  height: 27px;
  display: flex;
  align-items: center;
  padding-left: 8px;
  border-bottom: 1px solid rgba(204, 167, 80, .18);
  color: #dfc476;
  background: url("../assets/xianxia-v3.4/small-divider.webp") right center / auto 38px no-repeat;
  font: 740 9px/1 var(--x-serif);
  letter-spacing: .13em;
  pointer-events: none;
}
html[data-variant="c"] .summ .s {
  min-width: 0;
  min-height: 67px;
  padding: 8px 8px;
  border: 1px solid rgba(140, 130, 88, .25);
  border-radius: 2px;
  background: rgba(12, 34, 38, .2);
  box-shadow: inset 0 0 17px rgba(68, 129, 108, .025);
}
html[data-variant="c"] .summ .s:nth-child(1) { grid-column: span 5; }
html[data-variant="c"] .summ .s:nth-child(2) { grid-column: span 3; }
html[data-variant="c"] .summ .s:nth-child(3) { grid-column: span 4; }
html[data-variant="c"] .summ .s:nth-child(n+4) { grid-column: span 3; }
html[data-variant="c"] .summ .s:nth-child(n+4) {
  min-height: 61px;
  border-color: rgba(200, 169, 89, .26);
  background: rgba(25, 38, 39, .19);
}
html[data-variant="c"] .s-lbl {
  color: #879387;
  font: 650 8px/1.45 var(--x-serif);
  letter-spacing: .04em;
}
html[data-variant="c"] .s-val { margin-top: 4px; font-size: 14px; }
html[data-variant="c"] .s-sel { font-size: 8px; }

html[data-variant="c"] .decision-wrap {
  grid-area: decision;
  min-height: 110px;
  margin: 0;
  padding: 27px 8px 6px;
  container-type: inline-size;
}
html[data-variant="c"] .decision-wrap::before {
  content: "天機契約風險總覽";
  position: absolute;
  inset: 0 10px auto;
  height: 27px;
  display: flex;
  align-items: center;
  padding-left: 8px;
  border-bottom: 1px solid rgba(204, 167, 80, .2);
  color: #dfc476;
  background: url("../assets/xianxia-v3.4/mid-divider.webp") center bottom / 100% 18px no-repeat;
  font: 740 9px/1 var(--x-serif);
  letter-spacing: .13em;
}
html[data-variant="c"] .decision-grid {
  grid-template-columns: minmax(60px, .72fr) minmax(65px, .78fr) minmax(68px, .82fr) minmax(100px, 1.18fr) minmax(132px, 1.7fr) minmax(78px, .92fr) minmax(82px, 1fr);
  gap: 0;
  height: 100%;
}
html[data-variant="c"] .decision-grid > div {
  min-width: 0;
  padding: 4px 6px;
  border-right: 1px solid rgba(141, 123, 72, .24);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
html[data-variant="c"] .decision-grid > div:last-child { border-right: 0; }
html[data-variant="c"] .dc-lbl { color: #98a5a1; line-height: 1.28; white-space: normal; }
html[data-variant="c"] .dc-val {
  display: flex;
  align-items: baseline;
  gap: 3px;
  margin-top: 3px;
  color: #f2e8ce;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
html[data-variant="c"] .dc-number { flex: 0 0 auto; }
html[data-variant="c"] .dc-unit {
  flex: 0 0 auto;
  color: currentColor;
  opacity: .74;
  font-size: .72em;
  letter-spacing: .01em;
}
html[data-variant="c"] .decision-hint {
  min-height: 65px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: #91a19f;
  font-family: var(--x-serif);
  letter-spacing: .07em;
}
html[data-variant="c"] .decision-hint::before {
  content: "";
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  opacity: .14;
  background: url("../assets/xianxia-v3.4/seal.webp") center / contain no-repeat;
  filter: grayscale(.22) saturate(.48) brightness(1.15);
}

@container (max-width: 590px) {
  html[data-variant="c"] .decision-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  html[data-variant="c"] .decision-grid > div {
    min-height: 43px;
    border-bottom: 1px solid rgba(141, 123, 72, .18);
  }
}

/* 6–12 second gold circulation on the main instrument borders. */
html[data-variant="c"] .summ::after,
html[data-variant="c"] .decision-wrap::after,
html[data-variant="c"] .b-tablebar::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 3;
  padding: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(110deg,
    transparent 0 17%,
    rgba(255, 236, 169, .1) 24%,
    rgba(245, 207, 107, .75) 31%,
    rgba(255, 244, 202, .16) 37%,
    transparent 44% 100%);
  background-size: 330% 100%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: xian-border-flow 9s linear infinite;
}

@keyframes xian-border-flow {
  from { background-position: 155% 0; }
  to { background-position: -155% 0; }
}

/* ─────────────────────────────── Risk scroll ───────────────────────────── */

html[data-variant="c"] .b-tablebar {
  z-index: var(--x-layer-panel);
  min-height: 45px;
  margin: 12px 0 0;
  padding: 17px 15px 7px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  background:
    linear-gradient(90deg, rgba(24, 62, 65, .54), rgba(67, 57, 38, .45), rgba(17, 53, 59, .54));
}
html[data-variant="c"] .b-tablebar::before {
  content: "";
  position: absolute;
  inset: -4px 10% auto;
  height: 26px;
  opacity: .72;
  background: url("../assets/xianxia-v3.4/mid-divider.webp") center / 100% 100% no-repeat;
  pointer-events: none;
}
html[data-variant="c"] .b-table-title,
html[data-variant="c"] .b-table-meta { position: relative; z-index: 4; }
html[data-variant="c"] .b-table-title-default { display: none; }
html[data-variant="c"] .c-table-title { display: inline; }
html[data-variant="c"] .b-table-title {
  color: #e6ce83;
  font: 750 10px/1 var(--x-serif);
  letter-spacing: .14em;
}

html[data-variant="c"] .twrap {
  position: relative;
  z-index: var(--x-layer-panel);
  height: clamp(430px, calc(100vh - 570px), 560px);
  min-height: 430px;
  margin: 0;
  overflow: auto;
  border: 1px solid rgba(218, 181, 91, .55);
  border-top: 0;
  border-radius: 0 0 5px 5px;
  background:
    linear-gradient(rgba(15, 42, 46, .46), rgba(7, 29, 35, .56)),
    radial-gradient(ellipse at 50% 0, rgba(227, 213, 171, .04), transparent 47%);
  box-shadow:
    0 24px 58px rgba(0, 0, 0, .25),
    inset 0 0 48px rgba(88, 151, 126, .04),
    inset 0 -1px 0 rgba(244, 211, 119, .22);
  backdrop-filter: blur(7px) saturate(103%);
  scrollbar-color: rgba(210, 179, 95, .55) rgba(3, 24, 22, .46);
  scrollbar-width: thin;
}
html[data-variant="c"] .twrap::-webkit-scrollbar { width: 8px; height: 8px; }
html[data-variant="c"] .twrap::-webkit-scrollbar-track { background: rgba(3, 24, 22, .5); }
html[data-variant="c"] .twrap::-webkit-scrollbar-thumb {
  border: 2px solid rgba(3, 24, 22, .65);
  border-radius: 999px;
  background: linear-gradient(#d4b463, #80652e);
}

html[data-variant="c"] thead {
  background: rgba(17, 45, 50, .86);
  box-shadow: 0 1px 0 rgba(221, 187, 98, .42), 0 8px 20px rgba(0, 0, 0, .25);
}
html[data-variant="c"] th {
  height: 36px;
  padding: 7px 12px;
  border-bottom-color: rgba(214, 181, 95, .4);
  color: #bbb79c;
  background: rgba(21, 50, 54, .52);
  font: 680 8px/1.2 var(--x-serif);
  letter-spacing: .06em;
}
html[data-variant="c"] td {
  height: 29px;
  padding: 4px 12px;
  border-bottom-color: rgba(86, 103, 82, .28);
  color: #d7d7ca;
  background: rgba(8, 28, 33, .08);
  font-size: 10.5px;
  line-height: 1.2;
}
html[data-variant="c"] tbody tr:nth-child(even) td { background: rgba(222, 224, 212, .018); }
html[data-variant="c"] tbody tr:hover td { background: rgba(124, 175, 169, .07) !important; }
html[data-variant="c"] tr.closed td { opacity: .42; }

html[data-variant="c"] thead th:nth-child(1),
html[data-variant="c"] thead th:nth-child(2),
html[data-variant="c"] tbody td:nth-child(1),
html[data-variant="c"] tbody td:nth-child(2) { background: rgba(217, 196, 139, .035); }
html[data-variant="c"] thead th:nth-child(1),
html[data-variant="c"] tbody td:nth-child(1) { border-left-color: #cba654; }

html[data-variant="c"] tbody tr.pinned td {
  position: relative;
  height: 48px;
  color: #eee8d9;
  background:
    linear-gradient(90deg, transparent 0 39%, rgba(255, 244, 205, .34) 48%, transparent 58%) 0 0 / 330% 1px no-repeat,
    linear-gradient(90deg, transparent 0 39%, rgba(255, 241, 195, .27) 48%, transparent 58%) 0 100% / 330% 1px no-repeat,
    linear-gradient(100deg, rgba(223, 217, 190, .032), rgba(225, 213, 177, .085) 48%, rgba(151, 169, 164, .042)) !important;
  box-shadow:
    inset 0 1px 0 rgba(235, 213, 154, .48),
    inset 0 -1px 0 rgba(235, 213, 154, .42),
    0 0 16px rgba(222, 184, 84, .025) !important;
  font-size: 11.5px;
  text-shadow: 0 0 13px rgba(238, 204, 115, .12);
  animation: xian-row-lock 8s ease-in-out infinite;
}
html[data-variant="c"] tbody tr.pinned td:first-child {
  border-left: 1px solid rgba(227, 200, 135, .72);
  color: #f0cc6c;
  font-size: 17px;
}
html[data-variant="c"] tbody tr.pinned td:first-child::after {
  content: "★";
  margin-left: 2px;
  color: #f6d16f;
  font-size: 10px;
  text-shadow: 0 0 10px rgba(248, 208, 100, .68);
}
html[data-variant="c"] tbody tr.pinned td:first-child::before {
  content: "⌜";
  position: absolute;
  top: 0;
  left: 3px;
  color: rgba(255, 230, 151, .74);
  font-size: 10px;
}
html[data-variant="c"] tbody tr.pinned td:last-child {
  border-right: 1px solid rgba(227, 200, 135, .72);
}
html[data-variant="c"] tbody tr.pinned td:last-child::after {
  content: "⌟";
  position: absolute;
  right: 3px;
  bottom: 0;
  color: rgba(255, 230, 151, .74);
  font-size: 10px;
}

@keyframes xian-row-lock {
  0%, 100% { background-position: 130% 0, 130% 100%, 0 0; filter: brightness(.99); }
  50% { background-position: -30% 0, -30% 100%, 0 0; filter: brightness(1.025); }
}

html[data-variant="c"] .foot {
  position: relative;
  z-index: var(--x-layer-panel);
  margin: 8px 0 0;
  border-color: rgba(123, 145, 114, .3);
  background: rgba(7, 27, 32, .58);
}

/* The golden composition leaves a scenic right gutter for the vertical motto. */
@media (min-width: 1451px) {
  html[data-variant="c"] .b-tablebar,
  html[data-variant="c"] .twrap,
  html[data-variant="c"] .foot {
    margin-right: clamp(120px, 8vw, 190px);
  }
}

/* Golden-reference proportions on a true wide desktop canvas. */
@media (min-width: 1701px) {
  html[data-variant="c"] .c-identity-rail {
    left: 0;
    width: 70px;
    min-height: 430px;
    padding-top: 70px;
    border-radius: 32px 32px 3px 3px;
  }
  html[data-variant="c"] .c-identity-rail::before {
    width: 48px;
    height: 48px;
    font-size: 20px;
  }
  html[data-variant="c"] .c-rail-name { font-size: 14px; }
  html[data-variant="c"] .c-side-verse > span { font-size: 26px; }
  html[data-variant="c"] .c-side-verse > span + span { margin-top: 100px; }
  html[data-variant="c"] .c-side-left { top: 555px; left: 4px; }
  html[data-variant="c"] .c-side-right {
    top: 670px;
    right: clamp(-40px, calc((1920px - 100vw) / 2 + 24px), 28px);
  }

  html[data-variant="c"] .hdr {
    top: 28px;
    right: clamp(-44px, calc((1920px - 100vw) / 2 + 5px), 5px);
  }
  html[data-variant="c"] .hdr-ticker {
    min-width: 325px;
    min-height: 64px;
    gap: 11px;
    padding: 10px 29px;
  }
  html[data-variant="c"] .c-ticker-label { font-size: 10px; }
  html[data-variant="c"] .c-ticker-gem { width: 16px; height: 16px; }
  html[data-variant="c"] .idx-val { font-size: 39px; line-height: 1.35; }
  html[data-variant="c"] .c-ticker-unit { font-size: 11px; }

  html[data-variant="c"] .b-intro {
    min-height: 290px;
    height: 290px;
    flex-basis: 290px;
    padding-top: 50px;
  }
  html[data-variant="c"] .b-intro > div:first-child {
    width: min(700px, 50vw);
    margin-left: clamp(120px, 11vw, 210px);
    top: 20px;
  }
  html[data-variant="c"] .b-kicker { min-width: 300px; font-size: 10px; }
  html[data-variant="c"] .c-title-art { width: min(610px, 42vw); }
  html[data-variant="c"] .c-title-calligraphy {
    width: min(650px, 43vw);
    font-size: clamp(78px, 4.7vw, 94px);
  }
  html[data-variant="c"] .c-hero-copy { margin-top: 7px; font-size: 12px; }
  html[data-variant="c"] .c-currency-notice {
    right: clamp(-55px, calc((1920px - 100vw) / 2), 0px);
    bottom: 8px;
    left: auto;
  }
  html[data-variant="c"] .b-actions {
    top: 180px;
    right: clamp(-62px, calc((1920px - 100vw) / 2 - 16px), -16px);
    gap: 13px;
  }
  html[data-variant="c"] .b-action { min-width: 148px; min-height: 48px; font-size: 12px; }
  html[data-variant="c"] .b-action.feedback-primary { min-width: 188px; }

  html[data-variant="c"] .c-dashboard {
    row-gap: 11px;
    margin-right: 60px;
    margin-left: clamp(-20px, calc((1920px - 100vw) / 2), 0px);
  }

  html[data-variant="c"] .mode-tab { min-height: 42px; }
  html[data-variant="c"] .p,
  html[data-variant="c"] .p.primary,
  html[data-variant="c"] .p.coffee { min-height: 82px; padding: 11px 12px; }
  html[data-variant="c"] .p-row { padding-top: 7px; padding-bottom: 7px; }
  html[data-variant="c"] .p-in,
  html[data-variant="c"] .p.primary .p-in,
  html[data-variant="c"] .p.coffee .p-in { font-size: 20px; }
  html[data-variant="c"] .summ { height: 310px; min-height: 310px; margin-top: -10px; }
  html[data-variant="c"] .summ .s { min-height: 91px; padding: 12px 11px; }
  html[data-variant="c"] .summ .s:nth-child(n+4) { min-height: 84px; }
  html[data-variant="c"] .s-lbl { font-size: 9px; }
  html[data-variant="c"] .s-val { font-size: 17px; }
  html[data-variant="c"] .decision-wrap { min-height: 132px; }
  html[data-variant="c"] .b-tablebar { min-height: 55px; margin-top: 6px; padding-top: 21px; }
  html[data-variant="c"] .b-table-title { font-size: 12px; }
  html[data-variant="c"] td { height: 32px; font-size: 11.5px; }
  html[data-variant="c"] tbody tr.pinned td { height: 56px; font-size: 13px; }
  html[data-variant="c"] .b-tablebar,
  html[data-variant="c"] .twrap,
  html[data-variant="c"] .foot {
    margin-right: 212px;
    margin-left: clamp(-20px, calc((1920px - 100vw) / 2), 0px);
  }
  html[data-variant="c"] .c-cultivator {
    top: 730px;
    left: clamp(-56px, calc((1920px - 100vw) / 2), 0px);
    width: clamp(215px, 10.8vw, 230px);
    max-width: 230px;
  }
}

/* Modals must remain above the foreground character layer. */
html[data-variant="c"] .sheet-overlay,
html[data-variant="c"] .hist-overlay { z-index: 1000; }

/* Keyboard affordances stay clear on the decorative skin. */
html[data-variant="c"] button:focus-visible,
html[data-variant="c"] a:focus-visible,
html[data-variant="c"] input:focus-visible,
html[data-variant="c"] textarea:focus-visible {
  outline: 2px solid rgba(247, 217, 137, .86);
  outline-offset: 2px;
}

/* ───────────────────────────── Responsive fallback ─────────────────────── */

@media (max-width: 1450px) {
  html[data-variant="c"] #app { padding-right: 28px; padding-left: 125px; }
  html[data-variant="c"] .c-side-left { left: 20px; }
  /* At this width the right verse would sit on top of the last table column. */
  html[data-variant="c"] .c-side-right { display: none; }
  html[data-variant="c"] .c-side-verse > span { font-size: 17px; }
  html[data-variant="c"] .c-dashboard { grid-template-columns: minmax(0, 1fr) minmax(455px, .9fr); }
  html[data-variant="c"] .summ .s { padding-right: 7px; padding-left: 7px; }
  html[data-variant="c"] .b-actions { gap: 5px; }
  html[data-variant="c"] .b-action {
    min-width: 80px;
    padding-right: 8px;
    padding-left: 8px;
    font-size: 10.5px;
    white-space: nowrap;
  }
  html[data-variant="c"] .b-action.feedback-primary { min-width: 116px; }
}

@media (max-width: 1250px) {
  html[data-variant="c"] #app { padding: 0 20px 18px; }
  html[data-variant="c"] .c-identity-rail,
  html[data-variant="c"] .c-side-verse,
  html[data-variant="c"] .c-cultivator { display: none; }
  html[data-variant="c"] .hdr { right: 22px; }
  html[data-variant="c"] .b-intro > div:first-child { margin-left: 5vw; }
  html[data-variant="c"] .c-currency-notice { left: 5vw; }
  html[data-variant="c"] .c-dashboard {
    grid-template-columns: 1fr;
    grid-template-areas: "inputs" "summary" "decision";
  }
  html[data-variant="c"] .summ { height: auto; min-height: 0; }
}

@media (max-width: 700px) {
  html[data-variant="c"] body {
    background-attachment: scroll;
    background-position: 58% top;
  }
  html[data-variant="c"] #app { padding: 0 12px 16px; }
  html[data-variant="c"] #app::before,
  html[data-variant="c"] .c-portal-aura { display: none; }
  html[data-variant="c"] .hdr {
    position: relative;
    top: auto;
    right: auto;
    justify-content: flex-end;
    min-height: 52px;
    padding-top: 8px;
  }
  html[data-variant="c"] .hdr-ticker { min-width: 0; min-height: 43px; padding: 6px 12px; }
  html[data-variant="c"] .idx-val { font-size: 20px; }
  html[data-variant="c"] .b-intro { display: block; min-height: 0; padding: 15px 0 10px; }
  html[data-variant="c"] .b-intro { height: auto; flex: 0 0 auto; }
  html[data-variant="c"] .b-intro > div:first-child { width: 100%; margin: 0; }
  html[data-variant="c"] .c-title-art { width: 100%; max-width: 560px; }
  html[data-variant="c"] .b-kicker { margin-bottom: -8px; }
  html[data-variant="c"] .c-hero-copy { margin-top: -3px; }
  html[data-variant="c"] .b-actions { position: static; margin: 14px 0 9px; }
  html[data-variant="c"] .b-action { flex: 1; min-width: 0; padding: 8px 7px; }
  html[data-variant="c"] .c-currency-notice {
    position: static;
    width: 100%;
    max-width: none;
    margin: 0;
    border-radius: 4px;
    flex-wrap: wrap;
  }
  html[data-variant="c"] .c-notice-detail { flex-basis: 100%; }
  html[data-variant="c"] .mode-bar { overflow-x: visible; }
  html[data-variant="c"] .mode-tabs { width: 100%; min-width: 0; }
  html[data-variant="c"] .mode-tab { min-width: 0; padding-right: 4px; padding-left: 4px; }
  html[data-variant="c"] .mode-tab sub { display: block; margin: 4px 0 0; white-space: nowrap; }
  html[data-variant="c"] .params,
  html[data-variant="c"] .params.show-advanced { grid-template-columns: 1fr; }
  html[data-variant="c"] .summ { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: 30px; }
  html[data-variant="c"] .summ .s:nth-child(n) { grid-column: auto; min-height: 72px; }
  html[data-variant="c"] .summ .s:first-child { grid-column: span 2; }
  html[data-variant="c"] .decision-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-variant="c"] .decision-grid > div { border-bottom: 1px solid rgba(141, 123, 72, .2); }
  html[data-variant="c"] .b-tablebar { margin-top: 10px; }
  html[data-variant="c"] .twrap { height: 430px; min-height: 430px; }
  html[data-variant="c"] .twrap thead th:nth-child(-n+2) { background: rgba(19, 47, 51, .94); }
  html[data-variant="c"] .twrap tbody td:nth-child(-n+2) { background: rgba(15, 42, 46, .94); }
  html[data-variant="c"] .twrap tbody tr.pinned td:nth-child(-n+2) {
    background:
      linear-gradient(90deg, transparent 0 39%, rgba(255, 244, 205, .25) 48%, transparent 58%) 0 0 / 330% 1px no-repeat,
      linear-gradient(90deg, transparent 0 39%, rgba(255, 241, 195, .2) 48%, transparent 58%) 0 100% / 330% 1px no-repeat,
      linear-gradient(rgba(32, 61, 62, .97), rgba(18, 45, 49, .97)) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-variant="c"] *,
  html[data-variant="c"] *::before,
  html[data-variant="c"] *::after {
    scroll-behavior: auto !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}