/* =============================================================================
   x-tools.css · Aurelia tools (Agent B): Gold Saver, exchange, HUID, sizes, gifts
   Uses site.css tokens so every html[data-part] theme applies.
   ============================================================================= */
.xt { --vel-a: #0c1230; --vel-b: #03050d; }
html[data-part="evening"] .xt { --vel-a: #2a1324; --vel-b: #0b0509; }

/* ------------------------------------------------------------ hero */
.xt-hero { padding: clamp(28px, 4.5vw, 64px) 0 clamp(18px, 2.6vw, 30px); }
.xt-hero-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(20px, 4vw, 56px); align-items: center; }
.xt-hero h1 { font-size: clamp(2.4rem, 5.2vw, 4.6rem); max-width: 13ch; }
.xt-hero .lede { margin-top: 18px; }
.xt-orb { width: clamp(150px, 18vw, 230px); height: auto; display: block; }
.xt-orb-r1, .xt-orb-r2, .xt-orb-dots { transform-origin: 110px 110px; }
.xt-orb-r1 { animation: xtSpin 40s linear infinite; }
.xt-orb-r2 { animation: xtSpin 60s linear infinite reverse; }
.xt-orb-dots { animation: xtSpin 24s linear infinite; }
@keyframes xtSpin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------ tool switcher */
.xt-switch { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; padding: 6px; border-radius: 26px; isolation: isolate;
  background: color-mix(in srgb, var(--card) 72%, transparent); border: 1px solid var(--line); box-shadow: var(--shadow-sm); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  scroll-margin-top: calc(var(--head-h) + 12px); --ix: 0; }
.xt-glow { position: absolute; z-index: -1; top: 6px; bottom: 6px; left: 6px; width: calc((100% - 12px - 24px) / 5); border-radius: 20px;
  transform: translateX(calc(var(--ix) * (100% + 6px))); transition: transform .55s var(--ease-out);
  background: linear-gradient(135deg, color-mix(in srgb, var(--gold-hi) 55%, var(--card)), color-mix(in srgb, var(--gold) 30%, var(--card)));
  box-shadow: 0 10px 30px -14px color-mix(in srgb, var(--gold) 90%, transparent), inset 0 1px 0 rgba(255, 255, 255, .5); }
.xt-glow::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--prism); background-size: 200% 200%; animation: jw-prism 5s linear infinite;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: .8; }
.xt-tab { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 12px 14px; border: 0; border-radius: 20px; background: transparent; text-align: left; color: var(--ink2); transition: color .25s; }
.xt-tab > i { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; font-size: 1.15rem; color: var(--gold-text);
  background: color-mix(in srgb, var(--gold) 12%, transparent); border: 1px solid color-mix(in srgb, var(--gold) 26%, transparent); transition: transform .4s var(--ease), background .3s; }
.xt-tab span { display: grid; min-width: 0; line-height: 1.25; }
.xt-tab b { font-weight: 550; font-size: .95rem; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xt-tab small { font-family: var(--mono); font-size: .66rem; color: var(--mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xt-tab:hover > i { transform: rotate(-8deg) scale(1.06); }
.xt-tab[aria-selected="true"] > i { background: linear-gradient(135deg, var(--gold-hi), var(--gold)); color: #1a1306; border-color: transparent; }
.xt-tab[aria-selected="true"] small { color: var(--ink2); }
.xt-tab:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }

/* ------------------------------------------------------------ panels */
.xt-panel { padding-top: clamp(28px, 4vw, 52px); padding-bottom: clamp(40px, 6vw, 80px); outline: none; }
.xt-panel.xt-enter { animation: xtIn .6s var(--ease-out); }
@keyframes xtIn { from { opacity: 0; transform: translateY(14px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
.xt-ph { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(16px, 4vw, 56px); align-items: end; margin-bottom: clamp(20px, 3vw, 36px); }
.xt-ph h2 { font-size: clamp(1.9rem, 3.8vw, 3.1rem); }
.xt-ph > p { color: var(--mut); margin: 0; max-width: 52ch; }
.xt-err { color: var(--bad); font-size: .86rem; margin: 0; min-height: 1.2em; }
.xt-form { display: grid; gap: 14px; margin-top: 20px; }
.xt-form-h h3 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin-bottom: 6px; }
.xt-form-h p { margin: 0; }
.xt-form .kick { margin-bottom: 6px; }
.xt-fgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.xt-formhost { margin-top: 8px; scroll-margin-top: calc(var(--head-h) + 16px); }
.xt-radios { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.xt-radios legend { width: 100%; font-family: var(--mono); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--mut); margin-bottom: 6px; }
.xt-radios label { position: relative; cursor: pointer; }
.xt-radios input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.xt-radios span { display: inline-flex; align-items: center; min-height: 42px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line2); background: var(--card); font-size: .9rem; }
.xt-radios input:checked + span { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.xt-radios input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
.xt-done { display: flex; gap: 20px; align-items: flex-start; margin-top: 20px; animation: xtIn .6s var(--ease-out); }
.xt-done .seal { flex: none; font-size: 1.8rem; }
.xt-done h3 { margin-bottom: 8px; }
.xt-note { padding: 10px 14px; border-radius: 12px; background: color-mix(in srgb, var(--gold) 10%, transparent); font-size: .9rem; }
.xt-dl { display: grid; gap: 8px; margin: 16px 0; }
.xt-dl div { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 8px; border-bottom: 1px dashed var(--line); font-size: .92rem; flex-wrap: wrap; }
.xt-dl dt { color: var(--mut); }
.xt-dl dd { margin: 0; text-align: right; }
.xt-dl small { color: var(--mut); font-family: var(--sans); }
.xt-steps { list-style: none; margin: 10px 0 14px; padding: 0; display: grid; gap: 10px; }
.xt-steps li { display: flex; gap: 12px; align-items: flex-start; font-size: .92rem; color: var(--ink2); }
.xt-steps li > p { margin: 0; min-width: 0; }
.xt-steps li > span { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-family: var(--mono); font-size: .72rem; border: 1px solid color-mix(in srgb, var(--gold) 50%, transparent); color: var(--gold-text); }

/* ------------------------------------------------------------ 1 · Gold Saver */
.xt-saver-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(16px, 2.6vw, 32px); align-items: stretch; }
.xt-saver-ctl { display: grid; gap: 18px; align-content: start; }
.xt-saver-ctl .kick { margin: 0; }
.xt-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.xt-plan { position: relative; display: grid; gap: 1px; text-align: left; padding: 14px 16px; border-radius: 18px; border: 1px solid var(--line2); background: var(--card); overflow: hidden; transition: border-color .2s, box-shadow .25s, transform .25s var(--ease); }
.xt-plan b { font-family: var(--serif); font-size: 1.6rem; font-weight: 500; line-height: 1.1; }
.xt-plan small { font-family: var(--mono); font-size: .66rem; color: var(--mut); letter-spacing: .08em; text-transform: uppercase; }
.xt-plan span { font-size: .8rem; color: var(--ink2); margin-top: 4px; }
.xt-plan:hover { border-color: var(--gold); transform: translateY(-1px); }
.xt-plan[aria-pressed="true"] { border-color: var(--gold); background: linear-gradient(160deg, color-mix(in srgb, var(--gold) 18%, var(--card)), var(--card) 70%); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 22%, transparent); }
.xt-plan[aria-pressed="true"]::after { content: "\F26E"; font-family: "bootstrap-icons"; position: absolute; top: 10px; right: 12px; color: var(--gold-text); }
.xt-start { display: grid; gap: 8px; }
.xt-start .lbl, .xt-month label { font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--mut); }
.xt-start .seg { flex-wrap: wrap; border-radius: 22px; }
.xt-month { display: grid; gap: 4px; }
.xt-month label { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.xt-month output { color: var(--ink); text-transform: none; letter-spacing: 0; }
.xt input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: transparent; cursor: pointer; }
.xt input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 99px; background: linear-gradient(90deg, var(--gold-lo), var(--gold), var(--gold-hi)); }
.xt input[type="range"]::-moz-range-track { height: 4px; border-radius: 99px; background: linear-gradient(90deg, var(--gold-lo), var(--gold), var(--gold-hi)); }
.xt input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -9px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, var(--gold-hi) 40%, var(--gold)); border: 1px solid var(--gold-lo); box-shadow: 0 2px 10px -2px color-mix(in srgb, var(--gold) 80%, transparent); }
.xt input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, var(--gold-hi) 40%, var(--gold)); border: 1px solid var(--gold-lo); }
.xt input[type="range"]:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 8px; }

.xt-saver-out { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(14px, 2vw, 24px); align-items: stretch; padding: clamp(18px, 2.4vw, 28px); border-radius: var(--r-lg);
  background: radial-gradient(120% 100% at 30% 0%, var(--vel-a), var(--vel-b) 75%); color: #efe6d2; box-shadow: var(--shadow); position: relative; overflow: hidden; }
.xt-saver-out .kick { color: #f1d796; }
.xt-vault { display: grid; justify-items: center; align-content: end; gap: 10px; }
.xt-vault-in { position: relative; width: min(100%, 170px); height: 230px; border-radius: 20px 20px 26px 26px; border: 1px solid rgba(236, 204, 140, .3);
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .01)); overflow: hidden; }
.xt-vault-glass { position: absolute; inset: 0; background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .14) 42%, transparent 52%); pointer-events: none; }
.xt-coins { position: absolute; left: 50%; bottom: 10px; width: 110px; transform: translateX(-50%); display: flex; flex-direction: column-reverse; align-items: center; }
.xt-coin { display: block; width: 104px; height: 15px; margin-top: -2px; border-radius: 50%; opacity: .12; transform: translateY(-30px) scale(.9);
  background: linear-gradient(180deg, #fff2c4, #e6b84f 40%, #8a5f17 85%); box-shadow: 0 2px 0 #6d4a10, inset 0 -2px 3px rgba(0, 0, 0, .25);
  transition: opacity .45s var(--ease), transform .55s var(--ease-out); transition-delay: calc(var(--i) * 30ms); }
.xt-coin.on { opacity: 1; transform: none; }
.xt-coin.gift { background: linear-gradient(180deg, #ffffff, #ffd9ec 30%, #c9a0ff 60%, #8a5f17 95%); }
.xt-vault-cap { font-size: .74rem; color: #f6dfa4; letter-spacing: .06em; }
.xt-saver-nums { display: grid; align-content: center; gap: 4px; min-width: 0; }
.xt-big { display: grid; gap: 2px; }
.xt-big .kick { margin: 0; font-size: .64rem; }
.xt-big b { font-size: clamp(2.4rem, 4.6vw, 3.6rem); line-height: 1; font-weight: 500; color: #fff6dc; }
.xt-big small { color: rgba(239, 230, 210, .72); font-size: .9rem; }
.xt-big small b { font-size: inherit; color: #f6dfa4; font-family: var(--sans); }
.xt-saver-out .xt-dl div { border-bottom-color: rgba(236, 204, 140, .16); font-size: .86rem; }
.xt-saver-out .xt-dl dt { color: rgba(239, 230, 210, .62); }
.xt-saver-out .xt-dl small { color: rgba(239, 230, 210, .55); }
.xt-saver-out .btn.ghost { color: #efe6d2; border-color: rgba(236, 204, 140, .35); background: rgba(255, 255, 255, .04); }
.xt-timeline { list-style: none; margin: 20px 0 0; padding: 18px 6px 6px; display: grid; grid-template-columns: repeat(13, minmax(0, 1fr)); gap: 4px; position: relative; }
.xt-timeline::before { content: ""; position: absolute; left: 3%; right: 3%; top: 30px; height: 2px; background: var(--line2); }
.xt-timeline li { position: relative; display: grid; justify-items: center; gap: 2px; text-align: center; min-width: 0; font-size: .74rem; color: var(--mut); }
.xt-timeline li > i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line2); background: var(--card); font-size: .78rem; z-index: 1; transition: all .35s var(--ease); }
.xt-timeline li.on > i { background: linear-gradient(135deg, var(--gold-hi), var(--gold)); border-color: transparent; color: #1a1306; box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 18%, transparent); }
.xt-timeline li b { font-family: var(--mono); font-size: .7rem; color: var(--ink); font-weight: 500; }
.xt-timeline li span { white-space: nowrap; }
.xt-timeline li small { font-size: .64rem; }
.xt-timeline li.gift b, .xt-timeline li.mature b { color: var(--gold-text); }
.xt-terms { margin-top: 16px; max-width: 90ch; }

/* ------------------------------------------------------------ 2 · Exchange */
.xt-ex-rates { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 14px; font-size: .78rem; }
.xt-ex-rates span { display: inline-flex; gap: 8px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); }
.xt-ex-rates b { color: var(--gold-text); font-weight: 500; }
.xt-ex-rates em { font-style: normal; color: var(--ink); }
.xt-ex-rates small { color: var(--mut); font-size: .7rem; }
.xt-ex { padding: clamp(14px, 2vw, 22px); }
.xt-ex-rows { display: grid; gap: 10px; }
.xt-exrow { display: grid; grid-template-columns: 30px minmax(0, 1fr) minmax(0, .8fr) minmax(0, 1fr) minmax(0, .8fr) minmax(0, 1.1fr) 44px; gap: 10px; align-items: end; padding: 12px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); animation: xtIn .4s var(--ease-out); }
.xt-exno { align-self: center; font-size: .78rem; color: var(--gold-text); }
.xt-exrow .field input, .xt-exrow .field select { min-height: 44px; }
.xt-exrow .field > label { font-size: .66rem; }
.xt-exval { display: grid; gap: 3px; align-self: center; min-width: 0; }
.xt-exval b { font-size: 1.05rem; font-weight: 500; }
.xt-exval small { color: var(--mut); font-size: .7rem; }
.xt-assay { height: 6px; border-radius: 99px; background: color-mix(in srgb, var(--mut) 20%, transparent); overflow: hidden; }
.xt-assay i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--gold-lo), var(--gold), var(--gold-hi)); transition: width .5s var(--ease); }
.xt-assay i.unk { background: repeating-linear-gradient(90deg, var(--gold) 0 6px, transparent 6px 10px); opacity: .6; }
.xt-exdel { align-self: center; }
.xt-ex-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 14px; }
.xt-ex-total { display: grid; justify-items: end; text-align: right; gap: 2px; }
.xt-ex-total .kick { margin: 0; font-size: .64rem; }
.xt-ex-total b { font-size: clamp(2rem, 3.6vw, 2.8rem); font-weight: 500; line-height: 1; }
.xt-ex-total small { color: var(--mut); font-size: .72rem; }
.xt-ex-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(16px, 2.6vw, 32px); margin-top: 22px; align-items: start; }
.xt-process { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: p; }
.xt-process li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--line); background: color-mix(in srgb, var(--card) 70%, transparent); font-size: .9rem; }
.xt-process i { color: var(--gold-text); font-size: 1.1rem; }
.xt-ex-use .kick { margin-bottom: 10px; }
.xt-use { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.xt-usecard { display: grid; gap: 8px; padding: 12px; text-decoration: none; color: var(--ink); }
.xt-usecard img, .xt-usecard svg { width: 100%; max-width: 120px; margin: 0 auto; display: block; }
.xt-usecard span { display: grid; gap: 3px; min-width: 0; }
.xt-usecard b { font-weight: 550; font-size: .88rem; }
.xt-usecard small { color: var(--mut); font-size: .72rem; }
.xt-cover { height: 5px; border-radius: 99px; background: var(--line2); overflow: hidden; display: block !important; }
.xt-cover i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold-hi)); }

/* ------------------------------------------------------------ 3 · HUID */
.xt-huid-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(16px, 2.6vw, 32px); align-items: start; }
.xt-huid-box { display: grid; gap: 14px; position: relative; overflow: hidden; }
.xt-huid-stage { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.xt-laser { position: absolute; left: 0; right: 0; top: -10%; height: 3px; opacity: 0; background: linear-gradient(90deg, transparent, #7fe0ff, #fff, #7fe0ff, transparent); box-shadow: 0 0 18px 4px rgba(127, 224, 255, .5); }
.xt-huid-stage.scan .xt-laser { animation: xtLaser .9s var(--ease) 1; }
@keyframes xtLaser { 0% { top: 0; opacity: 1; } 100% { top: 100%; opacity: .2; } }
.xt-huid-lbl { font-family: var(--mono); font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--mut); }
.xt-huid-in { position: relative; width: min(100%, 420px); }
.xt-cells { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; pointer-events: none; }
.xt-cells span { display: grid; place-items: center; aspect-ratio: 4 / 5; border-radius: 14px; border: 1px solid var(--line2); background: var(--card); font-size: clamp(1.4rem, 3vw, 2rem); color: var(--ink); transition: border-color .2s, box-shadow .2s, transform .2s; }
.xt-cells span.on { border-color: color-mix(in srgb, var(--gold) 60%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--gold) 10%, var(--card)), var(--card)); }
.xt-cells.focus span.cur { border-color: var(--gold); box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 22%, transparent); }
.xt-cells.focus span.cur::after { content: ""; width: 2px; height: 46%; background: var(--gold); animation: xtBlink 1s steps(2) infinite; }
@keyframes xtBlink { 50% { opacity: 0; } }
.xt-huid-in input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; font-size: 16px; cursor: text; }
.xt-try { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.xt-try .fine { width: 100%; margin: 0; }
.xt-huid-out { margin-top: 16px; }
.xt-scanning { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: .8rem; color: var(--mut); padding: 12px 0; }
.xt-hres { display: grid; gap: 18px; animation: xtIn .5s var(--ease-out); }
.xt-hres.hit { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; }
.xt-hres.miss { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
.xt-hres.miss > i { font-size: 1.8rem; color: var(--gold-text); }
.xt-hres h3 { margin-bottom: 8px; }
.xt-hres-img { display: grid; place-items: center; padding: 14px; aspect-ratio: 1; }
.xt-hres-img img, .xt-hres-img svg { position: relative; z-index: 1; width: 100%; height: auto; }
.xt-hres-body .row { margin-bottom: 10px; }
.xt-hm { display: block; width: 100%; max-width: 360px; height: auto; color: var(--gold-text); margin: 6px 0; }
.xt-anatomy, .xt-bis { margin-bottom: 14px; }
.xt-hm-demo { padding: 14px; border-radius: 16px; background: radial-gradient(120% 120% at 50% 0%, var(--vel-a), var(--vel-b)); color: #f1d796; margin-bottom: 14px; }
.xt-hm-demo .xt-hm { color: #f1d796; max-width: none; margin: 0; }
.xt-marks { margin: 0; padding-left: 20px; display: grid; gap: 10px; }
.xt-marks li::marker { color: var(--gold-text); font-family: var(--mono); }
.xt-marks b { display: block; font-weight: 550; }
.xt-marks span { color: var(--mut); font-size: .9rem; }

/* ------------------------------------------------------------ 4 · Size */
.xt-smodes { margin-bottom: 16px; }
.xt-size-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(16px, 2.6vw, 28px); align-items: start; }
.xt-cal, .xt-measure { display: grid; gap: 12px; }
.xt-cal .kick, .xt-measure .kick { margin: 0; }
.xt-cal p, .xt-measure p { margin: 0; }
.xt-card-wrap { display: grid; place-items: center; min-height: 230px; padding: 4px; overflow: hidden; }
.xt-card { position: relative; border-radius: 3.18mm; border-radius: 12px; border: 2px dashed var(--gold); display: grid; place-items: end start; padding: 10px 12px; max-width: none;
  background: linear-gradient(135deg, color-mix(in srgb, var(--gold) 10%, transparent), transparent 60%); transition: width .08s linear, height .08s linear; }
.xt-card span { font-size: .66rem; color: var(--mut); }
.xt-chip { position: absolute; top: 28%; left: 10%; width: 12%; aspect-ratio: 4 / 3; border-radius: 4px; border: 1px solid color-mix(in srgb, var(--gold) 60%, transparent); }
.xt-card.portrait .xt-chip { top: 10%; left: 28%; width: 20%; transform: rotate(90deg); }
.xt-cal-ctl { display: flex; align-items: center; gap: 10px; }
.xt-cal-ctl input { flex: 1; min-width: 0; }
.xt-circle-box { position: relative; display: grid; place-items: center; height: 250px; overflow: hidden; border-radius: 18px; background: radial-gradient(circle, color-mix(in srgb, var(--gold) 8%, transparent), transparent 70%); }
.xt-circle-box.big { height: 300px; }
.xt-circle { position: relative; flex: none; border-radius: 50%; border: 2px solid var(--gold); box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 25%, transparent), inset 0 0 30px color-mix(in srgb, var(--gold) 14%, transparent); transition: width .1s linear, height .1s linear; }
.xt-circle i { position: absolute; inset: 0; margin: auto; width: 100%; height: 1px; background: repeating-linear-gradient(90deg, var(--gold) 0 4px, transparent 4px 8px); opacity: .7; }
.xt-circle::after { content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: var(--gold); }
.xt-read { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.xt-read b { font-size: 1.8rem; font-weight: 500; }
.xt-read span { color: var(--mut); font-size: .82rem; }
.xt-measure .btn { justify-self: start; }
.xt-bsizes { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.xt-bs { display: grid; justify-items: center; gap: 1px; padding: 8px 4px; border-radius: 14px; border: 1px solid var(--line2); background: var(--card); min-width: 0; }
.xt-bs b { font-family: var(--serif); font-size: 1.15rem; font-weight: 500; }
.xt-bs span, .xt-bs small { font-size: .62rem; color: var(--mut); }
.xt-bs[aria-pressed="true"] { border-color: var(--gold); background: linear-gradient(180deg, color-mix(in srgb, var(--gold) 16%, var(--card)), var(--card)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 20%, transparent); }
.xt-size-more { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(16px, 2.6vw, 28px); margin-top: clamp(16px, 2.6vw, 28px); align-items: start; }
.xt-read-sm { margin: 10px 0 0; font-size: .92rem; min-height: 1.4em; }
.xt-rtable { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.xt-rtable button { display: grid; justify-items: center; gap: 0; padding: 7px 2px; border-radius: 12px; border: 1px solid var(--line); background: color-mix(in srgb, var(--card) 70%, transparent); min-width: 0; line-height: 1.25; }
.xt-rtable b { font-family: var(--serif); font-size: 1.05rem; font-weight: 500; }
.xt-rtable span { font-size: .66rem; color: var(--ink2); }
.xt-rtable small { font-size: .6rem; color: var(--mut); }
.xt-rtable button.on { border-color: var(--gold); background: linear-gradient(180deg, color-mix(in srgb, var(--gold) 18%, var(--card)), var(--card)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 20%, transparent); }
.xt-rtable button:hover { border-color: var(--gold); }

/* ------------------------------------------------------------ 5 · Gift finder */
.xt-gift { padding: clamp(18px, 3vw, 36px); min-height: 360px; }
.xt-gq { animation: xtIn .45s var(--ease-out); }
.xt-gq h3 { font-size: clamp(1.6rem, 3vw, 2.4rem); margin-bottom: 18px; }
.xt-gq h3:focus, #xt-gres-h:focus { outline: none; }
.xt-gprog { display: flex; gap: 6px; margin-bottom: 16px; }
.xt-gprog i { flex: 1; height: 4px; border-radius: 99px; background: var(--line2); transition: background .3s; }
.xt-gprog i.done { background: var(--gold); }
.xt-gprog i.cur { background: linear-gradient(90deg, var(--gold), var(--line2)); }
.xt-gopts { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.xt-gopt { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 16px; border-radius: 18px; border: 1px solid var(--line2); background: var(--card); text-align: left; font-size: .98rem; font-weight: 500; transition: transform .25s var(--ease), border-color .2s, box-shadow .25s; }
.xt-gopt i { font-size: 1.3rem; color: var(--gold-text); }
.xt-gopt:hover { transform: translateY(-2px); border-color: var(--gold); box-shadow: var(--shadow-sm); }
.xt-gopt[aria-pressed="true"] { border-color: var(--gold); background: linear-gradient(160deg, color-mix(in srgb, var(--gold) 18%, var(--card)), var(--card)); }
.xt-gnav { margin-top: 18px; }
.xt-gres-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.xt-gres-h h3 { font-size: clamp(1.4rem, 2.6vw, 2rem); margin-bottom: 10px; }
.xt-gsum { gap: 6px; }
.xt-gsum .chip { min-height: 30px; font-size: .78rem; cursor: default; }
.xt-gres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.xt-gcard { display: grid; grid-template-rows: auto 1fr; padding: 0; overflow: hidden; }
.xt-gimg { display: grid; place-items: center; aspect-ratio: 4 / 3; border-radius: 0; padding: 10px; }
.xt-gimg img, .xt-gimg svg { position: relative; z-index: 1; width: auto; max-width: 70%; max-height: 100%; height: auto; }
.xt-gbody { display: grid; gap: 4px; padding: 14px 16px 16px; align-content: start; }
.xt-gbody .mono { font-size: .68rem; letter-spacing: .06em; }
.xt-gbody h4 { font-size: 1.2rem; }
.xt-gprice { font-size: 1.15rem; font-weight: 500; }
.xt-why { display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0 8px; }
.xt-wish[aria-pressed="true"] i { color: #d4566c; }
.xt-gfoot { margin-top: 18px; }
.xt-ph { scroll-margin-top: calc(var(--head-h) + 90px); }

/* ------------------------------------------------------------ cross links */
.xt-also { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.xt-also-c { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--ink); }
.xt-also-c > i:first-child { font-size: 1.5rem; color: var(--gold-text); }
.xt-also-c span { display: grid; flex: 1; min-width: 0; }
.xt-also-c b { font-weight: 550; }
.xt-also-c small { color: var(--mut); font-size: .82rem; }
.xt-ph-icon { display: none; }
.xt-ph img { max-width: 100%; }

/* ------------------------------------------------------------ responsive */
@media (max-width: 1180px) {
  .xt-tab { flex-direction: column; text-align: center; gap: 6px; padding: 10px 6px; }
  .xt-tab span { justify-items: center; }
  .xt-exrow { grid-template-columns: 26px repeat(2, minmax(0, 1fr)) repeat(2, minmax(0, 1fr)) 44px; }
  .xt-exval { grid-column: 2 / -2; grid-row: 2; }
  .xt-exdel { grid-column: -2; grid-row: 1; }
}
@media (max-width: 980px) {
  .xt-ph, .xt-saver-grid, .xt-ex-grid, .xt-huid-grid, .xt-size-grid, .xt-size-more { grid-template-columns: minmax(0, 1fr); }
  .xt-timeline { grid-template-columns: repeat(7, minmax(0, 1fr)); row-gap: 14px; }
  .xt-timeline::before { display: none; }
  .xt-gres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .xt-also { grid-template-columns: minmax(0, 1fr); }
  .xt-fgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .xt-hero-in { grid-template-columns: minmax(0, 1fr); }
  .xt-hero-orb { display: none; }
  .xt-switch { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: 22px; }
  .xt-switch::-webkit-scrollbar { display: none; }
  .xt-glow { display: none; }
  .xt-tab { flex: 0 0 auto; width: 128px; scroll-snap-align: start; }
  .xt-tab b { white-space: normal; font-size: .86rem; }
  .xt-tab[aria-selected="true"] { background: linear-gradient(135deg, color-mix(in srgb, var(--gold-hi) 55%, var(--card)), color-mix(in srgb, var(--gold) 30%, var(--card))); }
  .xt-tab small { white-space: normal; font-size: .6rem; }
  .xt-saver-out { grid-template-columns: minmax(0, 1fr); }
  .xt-vault-in { height: 170px; }
  .xt-timeline { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .xt-exrow { grid-template-columns: repeat(2, minmax(0, 1fr)); position: relative; padding-top: 50px; }
  .xt-circle-box { height: 200px; }
  .xt-exno { position: absolute; top: 10px; left: 14px; }
  .xt-exval { grid-column: 1 / -1; grid-row: auto; }
  .xt-exdel { position: absolute; top: 2px; right: 2px; }
  .xt-ex-total { justify-items: start; text-align: left; }
  .xt-use { grid-template-columns: minmax(0, 1fr); }
  .xt-usecard { grid-template-columns: 90px minmax(0, 1fr); align-items: center; }
  .xt-hres.hit { grid-template-columns: minmax(0, 1fr); }
  .xt-hres-img { max-width: 240px; }
  .xt-rtable { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .xt-bsizes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .xt-gres { grid-template-columns: minmax(0, 1fr); }
  .xt-fgrid { grid-template-columns: minmax(0, 1fr); }
  .xt-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .xt-plan b { font-size: 1.3rem; }
  .xt-done { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  .xt-orb-r1, .xt-orb-r2, .xt-orb-dots, .xt-glow::after { animation: none !important; }
  .xt-laser { display: none; }
}