/* Strata: design system v2 (README.md "视觉规则").
   Monumental product, real material, quiet type. Mobile first; desktop from 960 px.
   No glows, no pills, no boxed card grids, no numbered section rules.
   No yellow / gold / orange / amber anywhere, warnings included. */

:root {
  --bg: #000;
  --graphite: #0a0b0c;
  --surface: #0f1112;
  --surface-2: #16191b;
  --line: #1c1f21;
  --line-2: #2c3033;
  --label: #6f746f;
  --text-2: #a9ada7;
  --text: #eceee8;

  --glacier: #7fb2e5;
  --titanium: #d3d9e0;
  --steel: #8fb3cf;
  --celadon: #6fbfa8;
  --error: #e5838f;

  --display: "PingFang SC", "Helvetica Neue", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  --sans: "Helvetica Neue", "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  --mono: "SF Mono", "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  --metal: url(/static/img/texture/brushed-ti.webp);
  --pad: 24px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
html, body { background: var(--bg); color: var(--text); font: 15px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
body { min-height: 100vh; overflow-x: hidden; }
/* Film grain over everything: the black reads as a surface, not a void */
body::after { content: ""; position: fixed; inset: 0; pointer-events: none; background: url(/static/img/texture/grain.webp); opacity: .5; mix-blend-mode: screen; z-index: 50; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
picture { display: contents; }
source { display: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 1px solid var(--glacier); outline-offset: 3px; }
[hidden] { display: none !important; }
p { text-wrap: pretty; }   /* no single character left alone on the last line */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--pad); }
.narrow { max-width: 600px; }
.mono { font-family: var(--mono); letter-spacing: .02em; }
.label { font: 500 10.5px/1.3 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--label); }
.muted { color: var(--text-2); }
.dim { color: var(--label); }
.small { font-size: 13px; }
.tiny { font-size: 12px; }
.accent { color: var(--glacier); }
.accent:hover { text-decoration: underline; text-underline-offset: 3px; }
.ok { color: var(--celadon); }
.err { color: var(--error); }
.info { color: var(--steel); }
.center { text-align: center; }
.row { display: flex; align-items: center; gap: 10px; }
.between { justify-content: space-between; }
.wrapflex { flex-wrap: wrap; }
.mt4 { margin-top: 4px; } .mt8 { margin-top: 8px; } .mt12 { margin-top: 12px; } .mt16 { margin-top: 16px; } .mt20 { margin-top: 20px; } .mt24 { margin-top: 24px; } .mt32 { margin-top: 32px; } .mt40 { margin-top: 40px; } .mt56 { margin-top: 56px; }

h1 { font: 200 38px/1.12 var(--display); letter-spacing: -.02em; }
h1.page-title { margin-top: 24px; }
h3 { font-size: 15px; font-weight: 500; }

/* --- Top bar: transparent, no rule --- */
.topbar { height: 60px; display: flex; align-items: center; justify-content: space-between; padding: 0 var(--pad); position: relative; z-index: 20; max-width: 1440px; margin: 0 auto; }
.topbar.over { position: absolute; left: 0; right: 0; top: 0; }
.wordmark { font: 400 13px/1 var(--sans); letter-spacing: .58em; color: var(--titanium); }
.topbar .right { display: flex; gap: 22px; align-items: center; font-size: 12px; color: var(--text-2); }
.lang { font: 400 11px var(--sans); letter-spacing: .14em; color: var(--text-2); }
.lang b { color: var(--text); font-weight: 400; }
.burger { width: 28px; height: 28px; display: grid; place-items: center; }
.burger i { display: block; width: 20px; height: 7px; border-top: 1px solid var(--text); border-bottom: 1px solid var(--text); }
.nav { display: none; }
.back { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-2); letter-spacing: .04em; }
.back::before { content: ""; width: 16px; height: 1px; background: currentColor; }
.ordertag { font: 400 12px var(--mono); color: var(--label); }

/* Mobile menu: full-screen sheet */
.menu { position: fixed; inset: 0; background: #000; z-index: 40; padding: 0 var(--pad) 40px; display: flex; flex-direction: column; }
.menu .topbar { padding: 0; width: 100%; }
.menu nav { display: grid; margin-top: 28px; border-top: 1px solid var(--line); }
.menu nav a { padding: 18px 0; border-bottom: 1px solid var(--line); font: 300 22px/1.2 var(--display); display: flex; justify-content: space-between; }
.menu nav a::after { content: "→"; color: var(--label); font-size: 16px; }
.menu .close { font-size: 13px; color: var(--text-2); letter-spacing: .06em; }

/* --- Section head: a caption over a large light headline --- */
.sec-head { margin: 64px 0 22px; }
.sec-head .no { display: block; font: 500 10.5px/1.3 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--label); margin-bottom: 10px; }
.sec-head h2 { font: 300 26px/1.25 var(--display); letter-spacing: -.005em; }

/* --- Buttons: square-cut; primary is a light brushed-titanium plate --- */
.btn { display: flex; align-items: center; justify-content: center; gap: 10px; height: 54px; border-radius: 2px; font: 500 14px var(--sans); letter-spacing: .06em; border: 0; width: 100%; cursor: pointer; padding: 0 20px; text-align: center; transition: filter .15s; }
.btn-primary { color: #0b0c0d; background: var(--metal) center / 520px auto, linear-gradient(180deg, #e6eaee, #b9c0c7); background-blend-mode: overlay, normal; box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(0,0,0,.25); }
.btn-primary:hover { filter: brightness(1.06); }
.btn-ghost { background: transparent; border: 1px solid var(--line-2); color: var(--text); }
.btn-ghost:hover { border-color: var(--label); }
.btn-sm { height: 40px; padding: 0 18px; width: auto; font-size: 12.5px; display: inline-flex; }
.btn[disabled], .btn.is-disabled { background: var(--surface-2); color: var(--label); box-shadow: none; cursor: not-allowed; filter: none; }
.btn.is-busy { opacity: .7; pointer-events: none; }
.ext::after { content: "↗"; font-weight: 300; opacity: .6; }
.link { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; letter-spacing: .06em; color: var(--text); padding-bottom: 6px; border-bottom: 1px solid var(--line-2); cursor: pointer; }
.link::after { content: "→"; color: var(--text-2); }
.link.ext::after { content: "↗"; }
.link:hover { border-bottom-color: var(--text-2); }
.links { display: flex; gap: 24px; flex-wrap: wrap; }

/* --- Text tabs --- */
.chips { display: flex; gap: 22px; overflow-x: auto; border-bottom: 1px solid var(--line); scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; padding: 0 0 12px; font-size: 13px; color: var(--label); white-space: nowrap; cursor: pointer; }
.chip.on, .chip[aria-pressed="true"], .chip[aria-selected="true"] { color: var(--text); box-shadow: inset 0 -1px 0 var(--text); }
.chip b { font: 400 10px var(--mono); margin-left: 4px; vertical-align: 4px; opacity: .7; }
.chips.wrapped { flex-wrap: wrap; row-gap: 14px; overflow: visible; }
.tag.new { color: var(--glacier); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; }

/* --- Gallery: image floats on black, quiet meta --- */
/* Cards show the dial alone, not a watch: no model is the default, and the
   face is the product. A hairline bezel keeps it from floating. */
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 44px 18px; }
.card { display: block; }
.card .img { aspect-ratio: 1; display: grid; place-items: center; }
.card .img img { width: 88%; height: auto; border-radius: 50%; box-shadow: 0 0 0 1px #1a1d20, 0 0 0 6px #060708, 0 0 0 7px #22262a; transition: transform .5s ease, box-shadow .5s ease; }
.card:hover .img img { transform: scale(1.025); box-shadow: 0 0 0 1px #1a1d20, 0 0 0 6px #060708, 0 0 0 7px #3a4045; }
.card .meta { padding-top: 16px; }
.card .name { font: 400 15px var(--sans); letter-spacing: .02em; display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; }
.card .name b, .card .name small { font-weight: 400; white-space: nowrap; }   /* the English name drops to its own line, never mid-word */
.card .name small { font: 400 10.5px/1.6 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--label); }
.card .line { font-size: 12px; color: var(--label); margin-top: 1px; }
.card .price { font: 400 12px var(--sans); color: var(--text-2); margin-top: 8px; display: flex; justify-content: space-between; letter-spacing: .02em; }
.card .price em { font-style: normal; color: var(--text); }
.toolbar { display: flex; justify-content: space-between; margin: 14px 0 26px; font-size: 12px; color: var(--label); letter-spacing: .04em; }
.toolbar select { background: transparent; border: 0; color: var(--label); font-size: 12px; letter-spacing: .04em; }

/* --- Steps --- */
.steps { display: grid; }
.step { display: grid; grid-template-columns: 40px 1fr; gap: 8px; padding: 20px 0; border-top: 1px solid var(--line); }
.step:last-child { border-bottom: 1px solid var(--line); }
.step .n { font: 300 22px/1 var(--display); color: var(--label); }
.step h3 { font-size: 15px; font-weight: 500; }
.step p { font-size: 13px; color: var(--text-2); margin-top: 4px; }

/* --- Forms: underline only --- */
.field { margin-top: 26px; display: block; }
.field > .label { display: flex; justify-content: space-between; margin-bottom: 4px; }
.field > .label a { color: var(--text-2); letter-spacing: .04em; text-transform: none; font-weight: 400; font-size: 12px; border-bottom: 1px solid var(--line-2); }
.input { width: 100%; height: 50px; border: 0; border-bottom: 1px solid var(--line-2); padding: 0; font-size: 17px; color: var(--text); background: transparent; border-radius: 0; outline: 0; -webkit-appearance: none; appearance: none; }
.input::placeholder { color: #4b4f4b; }
.input:focus { border-bottom-color: var(--titanium); }
.input.mono { font-family: var(--mono); letter-spacing: .08em; }
.input.is-invalid { border-bottom-color: rgba(229,131,143,.7); }
select.input { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236f746f'/%3E%3C/svg%3E") right 2px center no-repeat; padding-right: 20px; }
select.input option { background: #111; color: var(--text); }
textarea.input { height: 140px; padding: 14px 0; display: block; resize: vertical; line-height: 1.6; font-size: 15px; }
.help { font-size: 12.5px; margin-top: 10px; color: var(--text-2); display: flex; gap: 8px; line-height: 1.55; }
.help .dot { flex: none; width: 4px; height: 4px; border-radius: 50%; margin-top: 7px; background: currentColor; }
.help b { color: var(--text); font-weight: 500; }
.formerr { margin-top: 14px; font-size: 13px; color: var(--error); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* Device code: a machined plate, engraved digits on dark brushed metal */
.dcode { height: 76px; border-radius: 3px; display: flex; align-items: center; padding: 0 20px; gap: 10px; position: relative;
  background: var(--metal) center / 700px auto, #121416; background-blend-mode: soft-light;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 0 0 0 1px #24282b, inset 0 10px 18px rgba(0,0,0,.45); transition: box-shadow .15s; }
.dcode input { flex: 1; min-width: 0; height: 100%; background: transparent; border: 0; outline: 0; font: 400 28px/1 var(--mono); letter-spacing: .14em; color: var(--text); text-transform: uppercase; text-shadow: 0 1px 0 rgba(0,0,0,.8); }
.dcode input::placeholder { color: #3c403e; letter-spacing: .08em; text-transform: none; font-size: 20px; }
.dcode .count { margin-left: auto; font: 400 11px var(--mono); color: var(--label); white-space: nowrap; }
.dcode:focus-within { box-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 0 0 0 1px #5d6670, inset 0 10px 18px rgba(0,0,0,.45); }
.dcode.valid { box-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 0 0 0 1px rgba(111,191,168,.45), inset 0 10px 18px rgba(0,0,0,.45); }
.dcode.invalid { box-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 0 0 0 1px rgba(229,131,143,.45), inset 0 10px 18px rgba(0,0,0,.45); }
.dcode.info { box-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 0 0 0 1px rgba(143,179,207,.45), inset 0 10px 18px rgba(0,0,0,.45); }
.badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; letter-spacing: .08em; }
.badge.info { color: var(--steel); }

/* Notes: plain text with a short lead rule, no tinted box */
.note { position: relative; padding-left: 22px; font-size: 13px; color: var(--text-2); }
.note::before { content: ""; position: absolute; left: 0; top: .78em; width: 12px; height: 1px; background: var(--steel); }
.note.ok::before { background: var(--celadon); }
.note.err::before { background: var(--error); }
.note b { color: var(--text); font-weight: 500; }

/* Option rows (radio) */
.opt { display: flex; align-items: center; gap: 14px; min-height: 58px; border-bottom: 1px solid var(--line); font-size: 14px; cursor: pointer; padding: 8px 0; }
.opt input { position: absolute; opacity: 0; pointer-events: none; }
.opt .r { width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--line-2); flex: none; }
.opt input:checked + .r { border: 1px solid var(--titanium); box-shadow: inset 0 0 0 4px #000, inset 0 0 0 8px var(--titanium); }
.opt input:focus-visible + .r { outline: 1px solid var(--glacier); outline-offset: 3px; }
.opt .sub { margin-left: auto; font-size: 12px; color: var(--label); text-align: right; }
.opts { border-top: 1px solid var(--line); }

/* Checkbox */
.check { display: flex; gap: 12px; font-size: 12.5px; color: var(--text-2); margin-top: 22px; line-height: 1.6; cursor: pointer; }
.check input { position: absolute; opacity: 0; pointer-events: none; }
.check .box { flex: none; width: 16px; height: 16px; border-radius: 2px; border: 1px solid var(--label); position: relative; margin-top: 3px; }
.check input:checked + .box { border-color: var(--titanium); background: var(--titanium); }
.check input:checked + .box::after { content: ""; position: absolute; left: 4.5px; top: 1px; width: 4px; height: 9px; border: solid #000; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.check input:focus-visible + .box { outline: 1px solid var(--glacier); outline-offset: 3px; }
.check a { color: var(--text); border-bottom: 1px solid var(--line-2); }
.check b { color: var(--text); font-weight: 500; }

/* Sticky pay bar */
.paybar { position: sticky; bottom: 0; padding: 16px var(--pad) calc(20px + env(safe-area-inset-bottom)); background: linear-gradient(transparent, #000 22%); display: flex; align-items: center; gap: 18px; z-index: 10; margin: 24px calc(var(--pad) * -1) 0; }
.paybar .sum { flex: none; }
.paybar .sum b { font: 300 24px var(--display); }

/* Product row */
.prow { display: flex; align-items: center; gap: 16px; padding: 4px 0 16px; border-bottom: 1px solid var(--line); }
.prow .th { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; flex: none; background: #000; }
.prow .th img { width: 100%; height: 100%; object-fit: cover; }
.prow .t { flex: 1; min-width: 0; }
.prow .t div:first-child { font-size: 16px; }
.prow .t div + div { font-size: 11.5px; color: var(--label); }
.prow select { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

/* Unlock code: engraved on a titanium plate */
.codebox { position: relative; padding: 42px 0 30px; text-align: center; border-radius: 3px;
  background: var(--metal) center / 760px auto, #15181a; background-blend-mode: soft-light;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), inset 0 0 0 1px #262a2d, 0 30px 60px -30px rgba(0,0,0,.9); }
.codebox .label { position: absolute; left: 18px; top: 14px; }
.codebox .face { position: absolute; right: 16px; top: 12px; font-size: 11px; color: var(--label); letter-spacing: .1em; }
.ucode { display: flex; justify-content: center; user-select: all; -webkit-user-select: all; }
.ucode span { font: 400 30px/1 var(--mono); letter-spacing: .14em; padding: 0 10px; color: var(--text); text-shadow: 0 1px 0 rgba(0,0,0,.9), 0 -1px 0 rgba(255,255,255,.04); }
.ucode span + span { border-left: 1px solid rgba(255,255,255,.08); }

/* Guide steps */
.gstep { display: grid; grid-template-columns: 34px 1fr 56px; gap: 10px; align-items: start; padding: 18px 0; border-top: 1px solid var(--line); }
.gstep:last-of-type { border-bottom: 1px solid var(--line); }
.gstep .n { font: 300 20px/1 var(--display); color: var(--label); }
.gstep p { font-size: 14px; }
.gstep p b { font-weight: 500; }
.gstep p small { display: block; color: var(--label); font-size: 12px; margin-top: 3px; }
.phone { width: 56px; height: 84px; border-radius: 9px; border: 1px solid var(--line-2); padding: 9px 7px; display: grid; gap: 5px; align-content: start; }
.phone i { display: block; height: 4px; background: var(--line-2); }
.phone i.hl { background: var(--titanium); }
.phone i.w6 { width: 60%; } .phone i.w4 { width: 40%; } .phone i.w8 { width: 80%; }
.phone i.box { height: 14px; background: transparent; border: 1px solid var(--titanium); }
.phone.round { border-radius: 50%; height: 56px; display: grid; place-items: center; padding: 0; color: var(--celadon); font-size: 12px; }

/* Accordion (details) */
.acc { border-top: 1px solid var(--line); }
.acc:last-of-type { border-bottom: 1px solid var(--line); }
.acc summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 0; font-size: 15px; cursor: pointer; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: ""; flex: none; width: 10px; height: 10px; background: linear-gradient(var(--text-2), var(--text-2)) center / 10px 1px no-repeat, linear-gradient(var(--text-2), var(--text-2)) center / 1px 10px no-repeat; }
.acc[open] summary::after { background: linear-gradient(var(--text), var(--text)) center / 10px 1px no-repeat; }
.acc .a { padding: 0 0 22px; font-size: 13.5px; color: var(--text-2); max-width: 36em; }

/* Metal plate panel (custom entry, quick fixes) */
.plate { padding: 30px 24px 32px; border-radius: 3px; background: var(--metal) 30% 40% / 900px auto, #131618; background-blend-mode: soft-light; box-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 0 0 0 1px #24282b; }
.plate h3 { font: 300 24px/1.3 var(--display); margin-top: 12px; }
.plate p { color: var(--text-2); font-size: 13.5px; margin: 10px 0 22px; }

/* Waiting state */
.spin { width: 72px; height: 72px; border-radius: 50%; margin: 0 auto; border: 1px solid var(--line-2); border-top-color: var(--titanium); animation: spin 1.4s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation-duration: 6s; } .card .img img { transition: none; } }
.rows .row { justify-content: space-between; padding: 13px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
.rows .row:last-child { border-bottom: 1px solid var(--line); }
.rows .row > span:first-child { color: var(--label); }
.flow { display: grid; grid-template-columns: repeat(3, 1fr); }
.flow div { padding-top: 12px; border-top: 1px solid var(--line-2); font-size: 12px; color: var(--label); }
.flow div.done { border-top-color: var(--celadon); color: var(--text-2); }
.flow div.now { border-top-color: var(--titanium); color: var(--text); }
.flow b { display: block; font: 300 18px/1 var(--display); margin-bottom: 6px; }
.amount { font: 200 52px/1 var(--display); letter-spacing: -.02em; margin-top: 14px; }
.memo { display: flex; align-items: flex-end; justify-content: space-between; margin-top: 30px; padding-bottom: 14px; border-bottom: 1px solid var(--line-2); }
.memo b { font: 400 22px var(--mono); letter-spacing: .1em; display: block; margin-top: 6px; }
.or { display: flex; align-items: center; gap: 14px; margin: 36px 0 22px; font-size: 12px; color: var(--label); letter-spacing: .08em; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.qr { background: #eceee8; padding: 10px; border-radius: 2px; width: 140px; flex: none; }
.qr svg, .qr img { width: 100%; height: auto; display: block; }
.qr.lg { width: 220px; margin: 30px auto 0; padding: 14px; }
.qrwrap { display: grid; grid-template-columns: 140px 1fr; gap: 18px; align-items: center; }
.timeline { margin-top: 30px; }
.tl { display: grid; grid-template-columns: 22px 1fr; gap: 12px; position: relative; padding-bottom: 18px; }
.tl::before { content: ""; position: absolute; left: 10px; top: 20px; bottom: 0; width: 1px; background: var(--line-2); }
.tl:last-child::before { display: none; }
.tl .d { width: 21px; height: 21px; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; font-size: 11px; background: #000; position: relative; }
.tl.done .d { border-color: var(--celadon); color: var(--celadon); }
.tl.now .d { border-color: var(--titanium); }
.tl.now .d::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--titanium); }
.tl p { font-size: 14px; } .tl small { display: block; font-size: 12px; color: var(--label); }
.divider { margin: 48px calc(var(--pad) * -1) 0; padding: 12px var(--pad); background: var(--graphite); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.kv { display: grid; grid-template-columns: 110px 1fr; gap: 10px 12px; font-size: 13.5px; }
.kv dt { color: var(--label); } .kv dd { color: var(--text); }

/* Uploads */
.uploads { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.up { aspect-ratio: 1; border-radius: 2px; border: 1px dashed var(--line-2); display: grid; place-items: center; color: var(--label); font-size: 22px; overflow: hidden; position: relative; cursor: pointer; }
.up img { width: 100%; height: 100%; object-fit: cover; }
.up .x { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%; background: rgba(0,0,0,.75); font-size: 11px; display: grid; place-items: center; color: var(--text); }
.up input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

/* Footer */
.footer { margin-top: 96px; border-top: 1px solid var(--line); font-size: 12px; color: var(--label); }
.footer .wrap { padding-top: 36px; padding-bottom: 48px; }
.footer .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; margin: 22px 0 28px; color: var(--text-2); font-size: 13px; }
.footer .cols a:hover, .footer .contact a:hover { color: var(--text); }
.footer .contact { display: flex; flex-wrap: wrap; gap: 18px; color: var(--text-2); margin-bottom: 22px; font-size: 12.5px; }

/* Toast */
.toast { position: fixed; left: 50%; bottom: 32px; transform: translateX(-50%); background: #1c1f22; border: 1px solid var(--line-2); padding: 10px 18px; font-size: 13px; border-radius: 2px; z-index: 60; }

/* Dialog: contact-to-buy while online payment is closed */
.dlg { margin: auto; background: var(--graphite); color: var(--text); border: 1px solid var(--line-2); border-radius: 2px; padding: 30px 26px 26px; width: min(460px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow-y: auto; }
.dlg::backdrop { background: rgba(0, 0, 0, .74); backdrop-filter: blur(6px); }
.dlg h2 { font: 300 24px/1.25 var(--display); }
.dlg .x { position: absolute; top: 18px; right: 22px; font-size: 12px; letter-spacing: .06em; color: var(--text-2); cursor: pointer; }
.dlg .x:hover { color: var(--text); }
.dlg-card { border: 1px solid var(--line); aspect-ratio: 1080 / 1500; background: #000; }
.dlg-card img { display: block; width: 100%; height: 100%; }
.dlg .ch:last-child { border-bottom: 0; }

/* --- Home --- */
.hero { position: relative; height: 640px; overflow: hidden; }
.hero .watch { position: absolute; left: 50%; top: -40px; width: 560px; transform: translateX(-50%); }
.hero .watch img { width: 100%; }
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 360px; background: linear-gradient(transparent, rgba(0,0,0,.9) 45%, #000 70%); }
.hero .copy { position: absolute; left: var(--pad); right: var(--pad); bottom: 6px; z-index: 2; }
.hero h1 { font-size: 64px; line-height: 1; letter-spacing: -.035em; font-weight: 200; }
.hero .sub { color: var(--text-2); font-size: 14.5px; margin-top: 16px; max-width: 30em; }
.hero .cap { display: none; }
.caption { display: flex; justify-content: space-between; }
.quick { margin-top: 36px; }
.quick form { display: flex; margin-top: 12px; }
.quick .dcode { flex: 1; border-radius: 3px 0 0 3px; height: 64px; }
.quick .dcode input { font-size: 20px; letter-spacing: .12em; }
.quick .dcode input::placeholder { font-size: 16px; }
.quick .go { width: 64px; height: 64px; border-radius: 0 3px 3px 0; padding: 0; font-size: 18px; flex: none; }
.feature { display: block; margin: 0 calc(var(--pad) * -1); position: relative; }
.feature img { width: 100%; }
.feature .over { position: absolute; left: var(--pad); right: var(--pad); bottom: 22px; display: flex; justify-content: space-between; align-items: flex-end; z-index: 2; }
.feature .over h3 { font: 200 34px/1 var(--display); letter-spacing: -.02em; }
.feature::after { content: ""; position: absolute; inset: auto 0 0 0; height: 160px; background: linear-gradient(transparent, rgba(0,0,0,.85)); }
.macro { margin: 72px calc(var(--pad) * -1) 0; position: relative; height: 420px; overflow: hidden; }
.macro img { position: absolute; width: 640px; max-width: none; left: 70px; top: -110px; }
.macro::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #000 14%, rgba(0,0,0,.55) 40%, transparent 70%), linear-gradient(#000, transparent 16%, transparent 78%, #000); }
.macro .txt { position: absolute; left: var(--pad); bottom: 34px; width: 210px; z-index: 2; }
.macro .txt p { font: 300 21px/1.4 var(--display); }
.custom { margin-top: 72px; }

/* --- Detail --- */
/* On phones the two detail columns stack; give them the page margin (desktop: .detail pads itself). */
.detail > div { padding-inline: var(--pad); }
.viewer { position: relative; height: 560px; overflow: hidden; }
.viewer .watch { position: absolute; left: 50%; top: -10px; width: 470px; transform: translateX(-50%); }
.viewer .watch img { width: 100%; }
.viewer .watch.flat { top: 60px; width: 380px; }
.viewer::after { content: ""; position: absolute; inset: auto 0 0 0; height: 200px; background: linear-gradient(transparent, #000 80%); }
.views { position: relative; z-index: 2; margin-top: -54px; }
.title h1 { font-size: 56px; line-height: 1; font-weight: 200; letter-spacing: -.03em; }
.pricebar { display: flex; justify-content: space-between; align-items: baseline; margin-top: 22px; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pricebar b { font: 300 26px var(--display); }
.stores { display: flex; gap: 26px; margin-top: 22px; flex-wrap: wrap; }
.stores .off { font-size: 13px; color: var(--label); }
.dmacro { margin: 72px calc(var(--pad) * -1) 0; position: relative; height: 470px; overflow: hidden; }
.dmacro img { position: absolute; width: 560px; max-width: none; right: -190px; top: -40px; }
.dmacro::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #000 12%, rgba(0,0,0,.6) 46%, transparent 76%), linear-gradient(#000, transparent 14%, transparent 80%, #000); }
.dmacro dl { position: absolute; left: var(--pad); top: 70px; z-index: 2; width: 190px; display: grid; gap: 26px; }
.dmacro dt { font: 200 34px/1 var(--display); }
.dmacro dd { font-size: 12px; color: var(--text-2); margin-top: 6px; }
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.compare ul { list-style: none; margin-top: 14px; font-size: 13.5px; color: var(--text-2); display: grid; gap: 10px; }
.compare .u ul { color: var(--text); }
.devices { font-size: 14px; color: var(--text-2); line-height: 2; columns: 2; column-gap: 24px; }
.statement { font: 300 22px/1.45 var(--display); }
.statement em { font-style: normal; color: var(--titanium); border-bottom: 1px solid var(--line-2); }

/* --- Purchase --- */
.progress { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 18px; }
.progress i { height: 2px; background: var(--line-2); }
.progress i.on { background: var(--titanium); }
.blk { margin-top: 30px; }
.blk > .head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.blk > .head .no { font: 300 18px/1 var(--display); color: var(--label); width: 22px; }
.blk > .head h3 { font-size: 15px; }
.blk > .head .aside { margin-left: auto; font-size: 12px; color: var(--text-2); }
.where { display: grid; grid-template-columns: 76px 1fr; gap: 16px; align-items: center; margin-top: 18px; }
.mini-watch { width: 76px; height: 76px; border-radius: 50%; background: #000; border: 5px solid #2a2c2e; box-shadow: 0 0 0 1px #3a3d40; display: grid; place-items: center; text-align: center; }
.mini-watch b { font: 600 17px/1 var(--sans); }
.mini-watch small { display: block; font: 500 7.5px/1 var(--mono); color: var(--glacier); letter-spacing: .04em; margin-top: 5px; }
.summary { margin-top: 26px; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.summary .row { font-size: 13px; color: var(--text-2); margin: 4px 0; }
.summary .row span + span { color: var(--text); }

/* --- Help --- */
.topics { display: grid; margin-top: 28px; border-top: 1px solid var(--line); }
.topic { padding: 18px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 34px 1fr auto; align-items: baseline; }
.topic::after { content: "→"; color: var(--label); grid-column: 3; grid-row: 1 / span 2; align-self: center; }
.topic .ic { font: 300 18px/1 var(--display); color: var(--label); grid-row: 1 / span 2; }
.topic b { font-size: 15px; font-weight: 400; }
.topic span:not(.ic) { font-size: 12px; color: var(--label); grid-column: 2; }
.topic.hot b { color: var(--titanium); }
.check-step { display: grid; grid-template-columns: 26px 1fr; gap: 12px; padding: 16px 0; border-top: 1px solid var(--line); }
.check-step:last-of-type { border-bottom: 1px solid var(--line); }
.check-step .n { font: 300 20px/1 var(--display); color: var(--label); }
.check-step b { font-size: 15px; font-weight: 500; }
.check-step p { font-size: 13px; color: var(--text-2); margin-top: 4px; }
.compare-codes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.compare-codes div { padding: 10px; border-radius: 2px; background: var(--surface); border: 1px solid var(--line); }
.compare-codes .mono { font-size: 14px; display: block; margin-top: 4px; }
.lookalike { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.lookalike span { font: 500 15px var(--mono); padding: 4px 10px; border-radius: 2px; background: var(--surface-2); }
.prose { font-size: 14.5px; color: var(--text-2); max-width: 40em; }
.prose h2 { font: 300 22px/1.3 var(--display); color: var(--text); margin: 40px 0 12px; }
.prose p, .prose ul { margin-top: 12px; }
.prose ul { padding-left: 0; list-style: none; }
.prose li { padding-left: 22px; position: relative; margin-top: 8px; }
.prose li::before { content: ""; position: absolute; left: 0; top: .8em; width: 12px; height: 1px; background: var(--line-2); }
.prose b, .prose strong { color: var(--text); font-weight: 500; }
.prose a { color: var(--glacier); }
.prose .pending { color: var(--steel); }

/* --- Recover --- */
.order { padding: 16px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 48px 1fr; gap: 14px; }
.order img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; object-position: 50% 48%; }
.order .code { font: 500 18px var(--mono); letter-spacing: .1em; margin-top: 8px; user-select: all; -webkit-user-select: all; }
.order .acts { display: flex; gap: 14px; margin-top: 8px; font-size: 13px; flex-wrap: wrap; }

/* --- Contact --- */
.ch { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; align-items: center; padding: 22px 0; border-bottom: 1px solid var(--line); }
.ch:first-of-type { border-top: 1px solid var(--line); }
.ch .v { grid-column: 1; font: 300 19px var(--display); word-break: break-all; }
.ch .v.mono { font: 400 16px var(--mono); letter-spacing: .04em; }
.ch .a { grid-column: 2; grid-row: 1 / span 2; }
.ch.wx { grid-template-columns: 1fr 112px; }
.ch.wx .qr { width: 112px; padding: 8px; grid-column: 2; grid-row: 1 / span 3; }
.tip li { list-style: none; font-size: 13.5px; color: var(--text-2); padding: 8px 0 8px 22px; position: relative; }
.tip li::before { content: ""; position: absolute; left: 0; top: 1.15em; width: 12px; height: 1px; background: var(--line-2); }

/* --- Feedback --- */
.quickfix { margin: 18px 0 6px; padding: 18px 18px 20px; border-radius: 2px; background: var(--metal) center / 760px auto, #121416; background-blend-mode: soft-light; box-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 0 0 0 1px #24282b; }
.quickfix ol { list-style: none; margin-top: 10px; display: grid; gap: 8px; counter-reset: q; }
.quickfix li { font-size: 13px; color: var(--text-2); padding-left: 24px; position: relative; counter-increment: q; }
.quickfix li::before { content: counter(q); position: absolute; left: 0; top: -1px; font: 300 15px var(--display); color: var(--label); }
.quickfix b { color: var(--text); font-weight: 500; }
.done h2 { font: 200 30px/1.2 var(--display); }
.ticket { font: 400 20px var(--mono); letter-spacing: .08em; margin-top: 10px; }

/* --- Desktop --- */
@media (min-width: 960px) {
  :root { --pad: 48px; }
  .topbar { height: 84px; }
  .wordmark { font-size: 14px; }
  .burger { display: none; }
  .nav { display: flex; gap: 34px; font-size: 13px; letter-spacing: .06em; color: var(--text-2); }
  .nav a:hover, .nav a.on { color: var(--text); }
  .topbar .right { gap: 30px; }
  h1 { font-size: 52px; }
  .sec-head { margin: 120px 0 34px; }
  .sec-head h2 { font-size: 44px; font-weight: 200; letter-spacing: -.02em; }
  .grid { grid-template-columns: repeat(4, 1fr); gap: 72px 40px; }
  .card .name { font-size: 17px; } .card .line, .card .price { font-size: 13px; }
  .footer .cols { grid-template-columns: repeat(3, auto); gap: 12px 48px; margin: 0; justify-content: start; }
  .footer .wrap { display: grid; grid-template-columns: 1fr 2fr; gap: 24px 48px; }
  .footer .legal { grid-column: 1 / -1; }

  .hero { height: 900px; max-width: 1440px; margin: 0 auto; }
  .hero .watch { left: auto; right: -40px; top: -150px; width: 860px; transform: none; }
  .hero::after { inset: 0; height: auto; background: linear-gradient(90deg, #000 30%, rgba(0,0,0,.55) 50%, transparent 66%), linear-gradient(rgba(0,0,0,.85), transparent 16%, transparent 70%, #000); }
  .hero .copy { left: 120px; right: auto; top: 230px; bottom: auto; width: 560px; }
  .hero h1 { font-size: 168px; line-height: .9; font-weight: 100; letter-spacing: -.05em; margin-left: -8px; }
  .hero .sub { font-size: 18px; margin-top: 34px; max-width: 470px; }
  .hero .caption { display: none; }
  .hero .cap { display: block; position: absolute; right: 120px; bottom: 70px; z-index: 2; text-align: right; }
  .quick { margin-top: 48px; max-width: 470px; }
  .quick .dcode { height: 68px; } .quick .go { width: 150px; height: 68px; font-size: 14px; }
  .home-top { display: none; }
  .feature-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; align-items: start; }
  .feature { margin: 0; }
  .feature-grid .home-grid { grid-template-columns: 1fr 1fr; gap: 40px 28px; margin-top: 0; }
  .macro { height: 760px; margin: 140px 0 0; }
  .macro img { width: 1180px; left: 470px; top: -220px; }
  .macro::after { background: linear-gradient(90deg, #000 30%, rgba(0,0,0,.6) 48%, transparent 70%), linear-gradient(#000, transparent 18%, transparent 80%, #000); }
  .macro .txt { left: 0; top: 250px; bottom: auto; width: 420px; }
  .macro .txt p { font: 200 44px/1.25 var(--display); letter-spacing: -.01em; }
  .steps.three { grid-template-columns: repeat(3, 1fr); gap: 48px; }
  .steps.three .step { display: block; border-bottom: 0; border-top: 1px solid var(--line-2); padding-top: 26px; }
  .steps.three .n { font: 100 64px/1 var(--display); }
  .steps.three h3 { font-size: 18px; font-weight: 400; margin-top: 22px; }
  .steps.three p { font-size: 14px; margin-top: 8px; }
  .plates { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 120px; }
  .plates .plate { padding: 44px 44px 46px; }
  .plates .plate h3 { font-size: 32px; font-weight: 200; }
  .custom { margin-top: 0; }
  .faq { display: grid; grid-template-columns: 1fr 2fr; gap: 48px; }
  .faq .sec-head { margin-top: 0; }

  .detail { display: grid; grid-template-columns: 1.2fr 1fr; gap: 64px; align-items: start; max-width: 1200px; margin: 0 auto; padding: 0 var(--pad); }
  .detail .viewer { height: 720px; margin-top: 40px; }
  .detail .viewer .watch { width: 640px; top: -20px; }
  .detail .viewer .watch.flat { width: 470px; top: 90px; }
  .detail .side { padding-top: 140px; position: sticky; top: 0; }
  .detail > div { padding-inline: 0; }
  .detail .views { margin-top: -70px; }
  .dmacro { height: 620px; margin: 120px 0 0; }
  .dmacro img { width: 900px; right: -80px; top: -120px; }
  .dmacro dl { left: 0; top: 140px; width: 280px; }
  .dmacro dt { font-size: 56px; }
  .detail-more { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; }
  .detail-more .sec-head { margin-top: 0; }
  .grid.related { grid-template-columns: repeat(4, 1fr); }
  .paybar.mobile-only { display: none; }

  .buy-layout { display: grid; grid-template-columns: 1fr 420px; gap: 80px; align-items: start; }
  .buy-aside { position: sticky; top: 40px; padding-top: 80px; }
  .buy-aside .paybar { position: static; margin: 0; padding: 24px 0 0; background: none; }
  .pagecols { display: grid; grid-template-columns: minmax(0, 600px) 1fr; gap: 96px; }
}
@media (max-width: 959px) { .desktop-only { display: none !important; } }
@media (min-width: 960px) { .mobile-only { display: none !important; } }
@media (max-width: 380px) { .ucode span { font-size: 25px; padding: 0 6px; } .dcode input { font-size: 24px; } }
.chip:has(input:checked), .chip.on { color: var(--text); box-shadow: inset 0 -1px 0 var(--text); }
.chip:has(input:focus-visible) { outline: 1px solid var(--glacier); outline-offset: 3px; }
.help.ok { color: var(--celadon); } .help.err { color: var(--error); } .help.info { color: var(--steel); }
.help.ok b, .help.err b, .help.info b { color: inherit; }

/* --- accounts (PHASE1.md 1, 2) --- */
.auth { padding-bottom: 80px; }
.auth-alt { margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--line); display: grid; gap: 16px; justify-items: start; }
.field > .label .hint { text-transform: none; letter-spacing: .02em; font-weight: 400; font-size: 12px; }
.field > .label .hint.ok { color: var(--celadon); } .field > .label .hint.err { color: var(--error); }
.code-input { font-size: 26px; letter-spacing: .4em; }
.link[disabled] { color: var(--label); border-bottom-color: transparent; cursor: default; }
.link[disabled]::after { content: none; }
.account { padding-bottom: 96px; }
.acct-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; padding-bottom: 28px; border-bottom: 1px solid var(--line); margin-top: 24px; }
.acct-head h1 { margin-top: 8px; }
.acct-sec { margin-top: 48px; }
.acct-sec > .label { padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.watchrow { padding: 16px 0; border-bottom: 1px solid var(--line); }
.watchrow .wname { font: 300 18px var(--display); }
.watchrow .wname .input { height: 40px; font-size: 16px; }
.watchrow .acts { display: flex; gap: 16px; margin-top: 8px; font-size: 13px; }
.watchrow .acts .dim { color: var(--label); }
.orow { display: grid; grid-template-columns: 7.5em 1fr auto auto; gap: 14px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
@media (max-width: 520px) { .orow { grid-template-columns: 1fr auto; } .orow > :nth-child(3) { display: none; } }
.topbar .acct { font-size: 13px; color: var(--text-2); letter-spacing: .02em; border-bottom: 1px solid var(--line-2); padding-bottom: 3px; }
.topbar .acct:hover, .topbar .acct.on { color: var(--text); }

/* --- back office (PHASE1.md 4) --- */
.admin { padding-bottom: 96px; max-width: 1200px; }
.anav { display: grid; gap: 14px; padding: 28px 0 18px; border-bottom: 1px solid var(--line); }
.anav nav { display: flex; flex-wrap: wrap; gap: 26px; font-size: 14px; }
.anav nav a { color: var(--text-2); padding-bottom: 4px; border-bottom: 1px solid transparent; }
.anav nav a.on { color: var(--text); border-color: var(--text-2); }
.anav .asearch .input { height: 44px; font-size: 15px; max-width: 420px; }
@media (min-width: 900px) { .anav { grid-template-columns: auto 1fr 360px; align-items: center; } }
.aflash { margin-top: 18px; padding: 12px 16px; font-size: 14px; border-left: 2px solid var(--celadon); background: rgba(111,191,168,.06); }
.aflash.err { border-color: var(--error); background: rgba(229,131,143,.06); color: var(--error); }
.astats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 28px; }
@media (min-width: 900px) { .astats { grid-template-columns: repeat(7, 1fr); } }
.astats > div { background: #000; padding: 16px 14px 18px; font-size: 12px; color: var(--text-2); }
.astats b { display: block; font: 200 32px/1.1 var(--display); color: var(--text); margin-bottom: 6px; }
.ahead { font: 300 24px var(--display); margin-top: 48px; }
.ahead .dim { font-size: 16px; }
.queue { margin-top: 20px; border-top: 1px solid var(--line); }
.qitem { display: grid; grid-template-columns: 56px 1fr; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); align-items: center; }
@media (min-width: 760px) { .qitem { grid-template-columns: 56px 1fr auto; } }
.qimg img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.qimg.big img { width: 96px; height: 96px; }
.qid { display: flex; gap: 12px; align-items: baseline; font-size: 16px; }
.qid a { font-size: 18px; letter-spacing: .06em; }
.qacts { display: flex; gap: 18px; align-items: center; grid-column: 1 / -1; }
@media (min-width: 760px) { .qacts { grid-column: auto; } }
.st { font-size: 12px; letter-spacing: .04em; color: var(--text-2); }
.st-pending, .st-awaiting_review { color: var(--steel); }
.st-needs_attention, .st-disputed { color: var(--error); }
.st-issued { color: var(--celadon); }
.atable { margin-top: 20px; border-top: 1px solid var(--line); font-size: 13.5px; }
.atable .ah, .atable .ar { display: grid; grid-template-columns: 8em 1.4fr 1.4fr 7em 7em 5em; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.atable.users .ah, .atable.users .ar { grid-template-columns: 1fr 1.5fr 7em 7em 7em; }
.atable .ah { font-size: 11px; letter-spacing: .12em; color: var(--label); }
.atable .ar:hover { background: rgba(255,255,255,.02); }
.atable .ar > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 760px) { .atable .ah { display: none; } .atable .ar, .atable.users .ar { grid-template-columns: 1fr auto; } .atable .ar > span:nth-child(n+3):not(:last-child) { display: none; } }
.aempty { padding: 24px 0; }
.aorder { display: flex; gap: 24px; align-items: center; margin-top: 32px; }
.aorder h1 { font-size: 30px; letter-spacing: .06em; }
.admin .spec { margin-top: 28px; }
.admin .spec th { width: 7em; }
.aacts { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; margin-top: 28px; }
.aacts form.inline { display: flex; gap: 14px; align-items: center; }
.aacts form.inline .input { height: 40px; width: 210px; font-size: 14px; }
.events { margin-top: 14px; font-size: 13px; display: grid; gap: 8px; color: var(--text-2); }
.events b { color: var(--text); font-weight: 400; }
.inline-search { margin-top: 16px; max-width: 360px; }
.inbox { margin-top: 20px; border-top: 1px solid var(--line); }
.iitem { padding: 18px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.topbar .acct.admin-link { color: var(--steel); }
@media (max-width: 899px) { .astats > div:last-child:nth-child(odd) { grid-column: span 2; } }
.aorder h1 { white-space: nowrap; font-size: clamp(22px, 6vw, 30px); }
.admin .spec th { text-align: left; }

/* ===================================================================
   v3: blueprint + instrument (mockups/v3, HOME_DIRECTIONS.md).
   A 12-column drawing grid behind everything; Bedrock pulled apart into
   its layers; hairlines and mono annotations. Class names that the v2
   pages already use (hero, note, step, chip, spec, faq, price) are
   renamed here: vhero, anote, vstep, vchip, vspec, vfaq, vprice.
   =================================================================== */
:root { --col: calc((100vw - 2 * var(--pad)) / 4); }
@media (min-width: 960px) { :root { --pad: 56px; --col: calc((100vw - 2 * var(--pad)) / 12); } }
body { background: #000 linear-gradient(to right, rgba(236,238,232,.035) 1px, transparent 1px) var(--pad) 0 / var(--col) 100% fixed; }

.vwrap { padding: 0 var(--pad); max-width: 1440px; margin: 0 auto; }
.btn-inline { width: auto; display: inline-flex; padding: 0 30px; height: 52px; }
.mlabel { font: 500 10.5px/1.3 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--label); }

/* --- hero: the exploded dial --- */
.vhero { min-height: 100svh; display: grid; align-content: end; padding-top: 64px; position: relative; overflow: hidden; }
.vhero-copy { position: relative; z-index: 3; padding: 0 var(--pad) 28px; max-width: 760px; }
.vhero h1 { font: 200 clamp(46px, 6vw, 92px)/1.06 var(--display); letter-spacing: -.01em; margin-top: 18px; white-space: nowrap; }
.vhero .lead { margin-top: 22px; font-size: 15px; color: var(--text-2); max-width: 480px; }
.vhero .acts { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 28px; align-items: center; }
.vspecs { position: relative; z-index: 3; display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--line); margin: 0 var(--pad); }
.vspecs div { padding: 16px 0 22px; font: 400 12px/1.5 var(--sans); color: var(--text-2); }
.vspecs b { display: block; font: 200 30px/1.1 var(--display); color: var(--text); margin-bottom: 6px; }
@media (min-width: 960px) {
  .vhero { align-content: center; grid-template-rows: 1fr auto; }
  .vhero-copy { align-self: center; padding-bottom: 0; }
  .vspecs { grid-template-columns: repeat(4, 1fr); }
}
.stage { position: relative; height: 62svh; margin-top: 64px; perspective: 1700px; }
@media (min-width: 960px) { .stage { position: absolute; right: calc(var(--pad) - 6vw); top: 50%; transform: translateY(-54%); width: min(62vw, 900px); height: min(62vw, 900px); margin: 0; } }
.stack { position: absolute; left: 50%; top: 50%; width: min(80vw, 640px); aspect-ratio: 1; margin: calc(min(80vw, 640px) / -2) 0 0 calc(min(80vw, 640px) / -2); transform-style: preserve-3d; transition: transform 1.8s cubic-bezier(.65, 0, .2, 1); }
@media (min-width: 960px) { .stack { width: 600px; margin: -300px 0 0 -300px; } }
.layer { position: absolute; inset: 0; transition: transform 1.8s cubic-bezier(.65, 0, .2, 1); }
.layer svg { width: 100%; height: 100%; overflow: visible; display: block; }
.stage.exploded .stack { transform: translateY(20%) rotateX(64deg) rotateZ(-36deg) scale(.66); }
.stage.exploded .layer { transform: translateZ(calc(var(--z) * 66px)); }
.stage .pin { position: absolute; left: 4%; top: 50%; width: 1px; height: 1px; }
.stage .pin.r { left: 96%; }
.callouts { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.callouts svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.callouts .ctag { position: absolute; transform: translateY(-50%); white-space: nowrap; opacity: 0; transition: opacity .6s; }
.callouts .ctag b { display: block; font: 400 13px var(--sans); color: var(--text); }
.callouts .ctag span { font: 400 10.5px var(--mono); letter-spacing: .14em; color: var(--label); text-transform: uppercase; }
.callouts .ctag .sub { letter-spacing: .04em; text-transform: none; }
.callouts line { stroke: var(--line-2); stroke-width: 1; opacity: 0; transition: opacity .6s; }
.stage.exploded.settled .callouts .ctag, .stage.exploded.settled .callouts line { opacity: 1; }
@media (max-width: 959px) {
  .stage.exploded .stack { transform: translate(-24%, 14%) rotateX(64deg) rotateZ(-36deg) scale(.62); }
  /* phone: the Chinese name and what the layer does; the L-number line goes */
  .callouts .ctag { white-space: normal; }
  .callouts .ctag span:first-child { display: none; }
  .callouts .ctag b { font-size: 12.5px; }
  .callouts .ctag .sub { display: block; margin-top: 2px; font: 400 11px/1.4 var(--sans); letter-spacing: .02em; }
}
.hero-dots { margin-top: 28px; display: flex; align-items: center; gap: 18px; }
.hero-dots .label { min-width: 3.5em; color: var(--text-2); }
.dots { display: flex; gap: 10px; flex-wrap: wrap; }
.dot-sw { width: 18px; height: 18px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0,0,0,.4); outline: 1px solid transparent; outline-offset: 3px; transition: outline-color .3s, transform .3s; }
.dot-sw:hover { transform: scale(1.12); }
.dot-sw.on { outline-color: var(--text-2); }

/* --- sections --- */
.vsec { padding: 120px var(--pad); border-top: 1px solid var(--line); position: relative; max-width: 1440px; margin: 0 auto; }
@media (min-width: 960px) { .vsec { padding: 160px var(--pad); } }
.vhead { display: grid; gap: 18px; max-width: 760px; }
.vhead h2 { font: 200 clamp(34px, 4.6vw, 64px)/1.08 var(--display); }
.vhead p { color: var(--text-2); max-width: 520px; }

/* --- Bedrock: swatches --- */
.pface { width: 100%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: #000; }
.pface svg { display: block; width: 100%; height: 100%; }
.palette { display: grid; gap: 48px; align-items: center; }
@media (min-width: 960px) { .palette { grid-template-columns: 6fr 5fr; gap: calc(var(--col) * .8); } }
.palette-face { position: relative; max-width: 620px; width: 100%; justify-self: center; }
.palette-face::after { content: ""; position: absolute; inset: -18px; border: 1px solid var(--line-2); border-radius: 50%; pointer-events: none; }
.ptitle { font: 200 clamp(34px, 4.4vw, 60px)/1.08 var(--display); margin-top: 14px; }
.swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 32px; }
.sw { background: #000; padding: 16px 12px 14px; display: grid; gap: 12px; text-align: left; transition: background .3s; position: relative; }
.sw:hover { background: #0b0d0e; }
.sw.on { background: #101315; }
.sw.on::after { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--steel); }
.ramp { display: flex; gap: 3px; }
.ramp i { width: 14px; height: 14px; display: block; }
.ramp.sm i { width: 10px; height: 10px; }
.sw .nm { font: 400 14px var(--sans); color: var(--text-2); }
.sw.on .nm { color: var(--text); }
.sw .nm small { margin-left: 6px; font-size: 11px; color: var(--label); }
@media (max-width: 520px) { .swatches { grid-template-columns: repeat(2, 1fr); } }
.pnow { margin-top: 22px; display: flex; align-items: center; gap: 12px; font-size: 15px; }
.buyrow { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between; }
.vprice { font: 200 44px/1 var(--display); }
.vprice small { display: block; font: 400 12px var(--sans); color: var(--label); margin-top: 8px; }
.soonmark { font: 400 11px var(--mono); letter-spacing: .14em; color: var(--steel); text-transform: uppercase; }
.tiny-note { margin-top: 22px; font-size: 13px; color: var(--label); max-width: 480px; line-height: 1.7; }

/* --- live stage --- */
.live { display: grid; gap: 48px; margin-top: 64px; }
@media (min-width: 960px) { .live { grid-template-columns: 7fr 5fr; align-items: center; gap: 0; } .live-side { padding-left: calc(var(--col) * .6); } }
.live-view { position: relative; aspect-ratio: 906 / 1000; overflow: hidden; }
.live-view::before { content: ""; position: absolute; inset: 8% 10% 0; background: radial-gradient(closest-side, rgba(143,179,207,.10), transparent 70%); }
.live-view img { position: absolute; left: 50%; top: 52%; height: 112%; width: auto; max-width: none; transform: translate(-50%, -50%); transition: opacity .7s; }
.live-view img.out { opacity: 0; }
.live-meta { position: absolute; left: 0; bottom: 0; right: 0; display: flex; justify-content: space-between; font: 400 11px var(--mono); letter-spacing: .14em; color: var(--label); text-transform: uppercase; }
.live-meta { gap: 16px; white-space: nowrap; padding-top: 36px; background: linear-gradient(transparent, #000 70%); }   /* reads over the strap */
.live-meta > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.live-meta .rec { display: inline-flex; flex: none; gap: 8px; align-items: center; color: var(--text-2); }
@media (max-width: 520px) { .live-meta { font-size: 10px; letter-spacing: .08em; } }
.live-meta .rec::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--celadon); animation: blink 2s infinite; }
@keyframes blink { 50% { opacity: .2; } }
.picks { border-top: 1px solid var(--line); }
.pick { width: 100%; display: grid; grid-template-columns: 64px 1fr auto; gap: 18px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--line); text-align: left; position: relative; }
.pick img { width: 64px; height: 64px; border-radius: 50%; opacity: .55; transition: opacity .4s; object-fit: cover; }
.pick .n { font: 300 22px/1.2 var(--display); color: var(--text-2); transition: color .4s; }
.pick .k { font: 400 12px var(--sans); color: var(--label); margin-top: 3px; }
.pick .id { font: 400 11px var(--mono); letter-spacing: .14em; color: var(--label); }
.pick::before { content: ""; position: absolute; left: 0; top: -1px; height: 1px; width: 0; background: var(--steel); transition: width .9s cubic-bezier(.65, 0, .2, 1); }
.pick.on::before { width: 100%; }
.pick.on img { opacity: 1; }
.pick.on .n, .pick:hover .n { color: var(--text); }
.modes { display: flex; gap: 26px; margin-top: 28px; font-size: 13px; color: var(--label); }
.modes button { padding-bottom: 6px; border-bottom: 1px solid transparent; color: var(--label); }
.modes button.on { color: var(--text); border-color: var(--text-2); }

/* --- annotated dial --- */
.anno { position: relative; margin: 72px auto 0; max-width: 1180px; }
/* leave room for the 22 px ring (::after) so it never widens the page */
.anno-dial { position: relative; width: min(calc(100% - 44px), 560px); margin: 0 auto; aspect-ratio: 1; }
.anno-dial .pface { position: absolute; inset: 0; }
.anno-dial img { width: 100%; height: 100%; border-radius: 50%; }
.anno-dial::after { content: ""; position: absolute; inset: -22px; border: 1px solid var(--line-2); border-radius: 50%; }
.anno svg.leads { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.anno svg.leads polyline { stroke: #2b3033; stroke-width: 1; fill: none; }
.anno svg.leads circle { fill: var(--steel); }
.anote { position: absolute; width: 230px; }
.anote b { display: block; font: 400 14px/1.35 var(--sans); }
.anote span { display: block; font: 400 12px/1.55 var(--sans); color: var(--text-2); margin-top: 4px; }
.anote i { display: block; font: normal 400 10.5px var(--mono); letter-spacing: .14em; color: var(--label); margin-bottom: 6px; }
.anote.l { text-align: right; }
.anno-list { display: none; }
.anno-dial .adot { position: absolute; width: 18px; height: 18px; margin: -9px; border-radius: 50%; border: 1px solid var(--steel); font: 400 9px/16px var(--mono); text-align: center; color: var(--steel); background: rgba(0,0,0,.6); }
@media (min-width: 960px) { .anno-dial .adot { display: none; } }
@media (max-width: 959px) {
  .anote, .anno svg.leads { display: none; }
  .anno-list { display: grid; margin-top: 48px; border-top: 1px solid var(--line); }
  .anno-list div { display: grid; grid-template-columns: 34px 1fr; padding: 16px 0; border-bottom: 1px solid var(--line); }
  .anno-list i { font: normal 400 11px var(--mono); color: var(--steel); padding-top: 3px; }
  .anno-list b { font: 400 14px var(--sans); display: block; }
  .anno-list span { font-size: 12.5px; color: var(--text-2); }
}

/* --- by type --- */
.types { display: grid; margin-top: 64px; border-top: 1px solid var(--line); }
@media (min-width: 960px) { .types { grid-template-columns: repeat(3, 1fr); } }
.type { position: relative; padding: 28px 0 32px; border-bottom: 1px solid var(--line); overflow: hidden; display: block; }
@media (min-width: 960px) { .type { border-bottom: 0; border-right: 1px solid var(--line); padding: 32px 32px 40px 0; } .type + .type { padding-left: 32px; } .type:last-child { border-right: 0; } }
.type .crop { aspect-ratio: 4 / 5; overflow: hidden; margin-bottom: 26px; }
.type .crop img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.9); transition: transform 1.4s cubic-bezier(.2, .7, .2, 1); }
.type:hover .crop img { transform: scale(1.75); }
.type h3 { font: 200 36px/1.1 var(--display); display: flex; justify-content: space-between; align-items: baseline; }
.type h3 small { font: 400 12px var(--mono); color: var(--label); letter-spacing: .1em; }
.type p { color: var(--text-2); margin-top: 10px; font-size: 14px; max-width: 320px; }

/* --- unlock rail --- */
.rail { margin-top: 72px; position: relative; display: grid; gap: 40px; }
@media (min-width: 960px) { .rail { grid-template-columns: repeat(3, 1fr); gap: 0; padding-top: 44px; } .rail::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--line-2); } .vstep::before { content: ""; position: absolute; left: 0; top: -48px; width: 1px; height: 9px; background: var(--steel); } }
.vstep { position: relative; padding-right: 40px; }
.vstep .mlabel { margin-bottom: 14px; }
.vstep h3 { font: 300 22px/1.3 var(--display); }
.vstep p { color: var(--text-2); margin-top: 8px; font-size: 14px; max-width: 300px; }
.vchip { margin-top: 22px; display: inline-block; padding: 12px 16px; font: 400 17px var(--mono); letter-spacing: .12em; background: var(--metal) center / 700px auto, #121416; background-blend-mode: soft-light; box-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 0 0 0 1px #24282b; }

/* --- craft facts --- */
.facts { display: grid; margin-top: 72px; border-top: 1px solid var(--line); }
@media (min-width: 960px) { .facts { grid-template-columns: repeat(3, 1fr); } }
.fact { padding: 30px 0; border-bottom: 1px solid var(--line); }
@media (min-width: 960px) { .fact { border-bottom: 0; padding: 34px 40px 0 0; } }
.fact b { display: block; font: 200 56px/1 var(--display); }
.fact b small { font: 300 18px var(--display); color: var(--text-2); margin-left: 6px; }
.fact p { color: var(--text-2); margin-top: 14px; font-size: 14px; max-width: 300px; }

/* --- footer --- */
.vfoot { border-top: 1px solid var(--line); padding: 72px var(--pad) 40px; max-width: 1440px; margin: 0 auto; overflow: hidden; }
.vfoot .big { font: 200 clamp(64px, 17vw, 260px)/.85 var(--display); letter-spacing: .12em; color: transparent; -webkit-text-stroke: 1px #2c3134; white-space: nowrap; }
.vfoot .cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; margin-top: 64px; font-size: 13px; }
@media (min-width: 960px) { .vfoot .cols { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.vfoot .cols a { display: block; color: var(--text-2); margin-top: 10px; }
.vfoot .cols a:hover { color: var(--text); }
.vfoot .legal2 { margin-top: 64px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font: 400 11px var(--mono); letter-spacing: .08em; color: var(--label); }

/* --- detail page --- */
.d-hero { min-height: 100svh; padding-top: 60px; display: grid; position: relative; }
@media (min-width: 960px) { .d-hero { grid-template-columns: 7fr 5fr; align-items: center; } }
.d-watch { position: relative; height: 70svh; overflow: hidden; }
@media (min-width: 960px) { .d-watch { height: calc(100svh - 60px); } }
.d-watch .watch { position: absolute; inset: 0; }
.d-watch .watch img { position: absolute; left: 50%; top: 50%; height: 118%; width: auto; max-width: none; transform: translate(-50%, -48%); }
.d-watch .watch.flat img { height: 82%; transform: translate(-50%, -50%); }
/* the loop sits exactly over the still (same crop) and fades in once it plays */
.d-watch .watch video { position: absolute; left: 50%; top: 50%; height: 118%; width: auto; max-width: none; transform: translate(-50%, -48%); z-index: 1; opacity: 0; transition: opacity .4s; background: #000; }
.d-watch .watch video.on { opacity: 1; }
.viewbar { display: flex; flex-wrap: wrap; gap: 14px 40px; margin-top: 28px; }
.viewbar .modes { margin-top: 0; }
.d-watch .pface { position: absolute; left: 50%; top: 50%; width: min(78%, 620px); transform: translate(-50%, -50%); }
.d-info { padding: 32px var(--pad) 64px; }
@media (min-width: 960px) { .d-info { padding: 0 var(--pad) 0 0; } }
.d-info h1 { font: 200 clamp(56px, 7vw, 108px)/1 var(--display); margin-top: 16px; }
.d-info .tagline { font: 300 20px/1.4 var(--display); color: var(--text-2); margin-top: 14px; }
.d-info .acts { margin-top: 32px; display: grid; gap: 20px; justify-items: start; }
.d-info .fine { font-size: 12.5px; color: var(--label); max-width: 380px; }
.d-info .stores { display: flex; flex-wrap: wrap; gap: 22px; font-size: 13px; }
.d-info .stores .off { color: var(--label); }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 44px; border-top: 1px solid var(--line); }
.stats div { padding: 18px 16px 0 0; font-size: 12px; color: var(--text-2); line-height: 1.5; }
.stats b { display: block; font: 200 40px/1 var(--display); color: var(--text); margin-bottom: 8px; }
.vspec { width: 100%; border-collapse: collapse; margin-top: 56px; font-size: 14px; }
.vspec th { text-align: left; font: 400 11px var(--mono); letter-spacing: .14em; color: var(--label); text-transform: uppercase; padding: 18px 24px 18px 0; vertical-align: top; width: 28%; }
.vspec td { padding: 16px 0; color: var(--text); }
.vspec tr { border-top: 1px solid var(--line); }
.vspec tr:last-child { border-bottom: 1px solid var(--line); }
.devs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 24px; font: 400 12.5px var(--mono); color: var(--text-2); }
@media (min-width: 960px) { .devs { grid-template-columns: repeat(3, 1fr); } }
/* phone: one model per line, so "fēnix 8 · 43 mm" never breaks before "mm" */
@media (max-width: 520px) { .vspec th { padding-right: 14px; } .devs { grid-template-columns: 1fr; font: 400 13px/1.5 var(--sans); } }
.vcompare { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 48px; }
@media (min-width: 960px) { .vcompare { grid-template-columns: 1fr 1fr; } }
.vcompare > div { background: #000; padding: 26px 24px 28px; }
.vcompare ul { list-style: none; margin-top: 14px; display: grid; gap: 8px; font-size: 14px; color: var(--text-2); }
.vcompare .u ul { color: var(--text); }
.more { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 56px; }
@media (min-width: 960px) { .more { grid-template-columns: repeat(4, 1fr); } }
.more a img, .more a .pface { aspect-ratio: 1; border-radius: 50%; transition: transform 1s cubic-bezier(.2, .7, .2, 1); }
.more a:hover img { transform: scale(1.04); }
.more a b { display: block; margin-top: 16px; font: 300 18px var(--display); }
.more a span { font-size: 12px; color: var(--label); }

/* reveal on scroll */
.rv { opacity: 0; transform: translateY(24px); transition: opacity 1.1s, transform 1.1s cubic-bezier(.2, .7, .2, 1); }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; transition: none; } .stack, .layer { transition: none !important; } }

.card .img img.drawn { object-fit: contain; }
.d-rest .paybar { margin: 0; }   /* full width here: no parent padding to cancel */
/* each Bedrock layer holds two copies; the new theme fades in over the old */
.layer svg { position: absolute; inset: 0; transition: opacity .52s ease; }
.layer svg.off { opacity: 0; }
/* types: whole dials at no more than their own resolution (908 px), never cropped and zoomed */
.type .specimen { position: relative; width: min(100%, 300px); aspect-ratio: 1; margin: 8px auto 36px; }
.type .specimen img { width: 100%; height: 100%; border-radius: 50%; display: block; transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.type .specimen::after { content: ""; position: absolute; inset: -14px; border: 1px solid var(--line-2); border-radius: 50%; transition: border-color .6s; }
.type:hover .specimen img { transform: scale(1.03); }
.type:hover .specimen::after { border-color: var(--steel); }
.type .kin { display: flex; gap: 10px; margin-top: 22px; }
.type .kin img { width: 40px; height: 40px; border-radius: 50%; opacity: .7; transition: opacity .4s; }
.type:hover .kin img { opacity: 1; }

/* --- Bedrock configurator (detail page) -------------------------------------
   The preview stays in view while the choices scroll past: beside them on
   desktop, pinned to the top on a phone. Theme chips are the four band
   colours stacked, like the bands on the face. */
.cfg-jump { display: inline-block; margin-top: 18px; font-size: 13px; color: var(--text-2); border-bottom: 1px solid var(--line-2); padding-bottom: 2px; }
.cfg-jump:hover { color: var(--text); border-color: var(--label); }
.cfg-grid { margin-top: 56px; display: grid; gap: 36px; }
.cfg-face { width: min(100%, 540px); margin: 0 auto; box-shadow: 0 0 0 1px #1c2023, 0 0 0 9px #060708, 0 0 0 10px #23272a; }
.cfg-under { display: flex; justify-content: center; align-items: baseline; flex-wrap: wrap; gap: 6px 18px; margin-top: 26px; min-height: 22px; font-size: 12.5px; text-align: center; }
.cfg-mode { font-size: 12.5px; color: var(--text-2); border-bottom: 1px solid var(--line-2); padding-bottom: 1px; }
.cfg-mode:hover { color: var(--text); }
.cfg-missing { color: var(--steel); max-width: 420px; }
.cfg-steps { display: grid; gap: 44px; }
.cfg-h { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.cfg-now { font: 300 15px var(--display); }
.cfg-hint { font-size: 12px; color: var(--label); }
.cfg-themes { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; margin-top: 18px; }
.cfg-sw { position: relative; width: 100%; height: 44px; padding: 0; }
.cfg-sw .bars { display: grid; width: 100%; grid-template-rows: repeat(4, 1fr); gap: 2px; height: 100%; opacity: .5; transition: opacity .25s; }
.cfg-sw .bars i { display: block; border-radius: 1px; }
.cfg-sw:hover .bars { opacity: .8; }
.cfg-sw.on .bars { opacity: 1; }
.cfg-sw::after { content: ""; position: absolute; left: 0; right: 0; bottom: -9px; height: 1px; background: transparent; transition: background .25s; }
.cfg-sw.on::after { background: var(--text-2); }
.cfg-presets { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.cfg-presets button { font-size: 12.5px; color: var(--label); padding: 0 0 1px; border-bottom: 1px solid transparent; transition: color .2s; }
.cfg-presets button:hover { color: var(--text-2); }
.cfg-presets button.on { color: var(--text); border-color: var(--label); }
.cfg-row { display: grid; grid-template-columns: 72px 1fr; align-items: center; border-bottom: 1px solid var(--line); }
.cfg-row.wide { grid-template-columns: 1fr; }
.cfg-row .k { display: flex; align-items: center; gap: 10px; font: 500 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--label); }
.cfg-row .tick { width: 3px; height: 16px; border-radius: 1px; transition: background .3s; }
.cfg-row .input { height: 48px; border-bottom: 0; font-size: 15px; cursor: pointer; }
.cfg-row:hover .k { color: var(--text-2); }
.cfg-out { padding-top: 4px; }
.cfg-code { display: block; margin-top: 20px; font: 300 clamp(32px, 3.6vw, 46px)/1.1 var(--mono); letter-spacing: .08em; }
.cfg-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 22px; }
.cfg-said { font-size: 12px; color: var(--celadon); }
.cfg-help { margin-top: 18px; font-size: 13px; color: var(--text-2); max-width: 440px; }
.cfg-paste { margin-top: 24px; }
.cfg-paste summary { cursor: pointer; list-style: none; font-size: 13px; color: var(--text-2); }
.cfg-paste summary::-webkit-details-marker { display: none; }
.cfg-paste summary::before { content: "+"; display: inline-block; width: 1.2em; color: var(--label); }
.cfg-paste[open] summary::before { content: "−"; }
.cfg-load { display: flex; align-items: flex-end; gap: 14px; max-width: 420px; margin-top: 8px; }
.cfg-load .btn { flex: none; white-space: nowrap; }
.cfg-msg { margin-top: 8px; min-height: 1.2em; font-size: 12.5px; }
@media (min-width: 960px) {
  .cfg-grid { grid-template-columns: 6fr 5fr; gap: calc(var(--col) * .8); align-items: start; }
  .cfg-view { position: sticky; top: 48px; }
}
@media (max-width: 959px) {
  .cfg-view { position: sticky; top: 0; z-index: 5; margin: 0 calc(var(--pad) * -1); padding: 14px var(--pad) 16px; background: linear-gradient(#000 90%, rgba(0, 0, 0, 0)); }
  .cfg-face { width: min(52vw, 280px); box-shadow: 0 0 0 1px #1c2023, 0 0 0 6px #060708, 0 0 0 7px #23272a; }
  .cfg-under { margin-top: 14px; font-size: 12px; }
  .cfg-themes { gap: 6px; }
  .cfg-sw { height: 38px; }
}
/* phone: two narrow columns, so the English name always takes its own line */
.card .meta .row { align-items: flex-start; }
@media (max-width: 959px) { .card .name { flex-direction: column; } .card .tag.new { margin-top: 3px; } }

/* --- home: brand film ------------------------------------------------------ */
.film-box { position: relative; margin-top: 48px; aspect-ratio: 16 / 9; background: #000; border: 1px solid var(--line); }
.film-box video { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.film-play { position: absolute; left: clamp(14px, 3vw, 40px); bottom: clamp(14px, 3vw, 40px); display: inline-flex; align-items: center; gap: 12px; padding: 10px 18px 10px 12px; border: 1px solid var(--line-2); background: rgba(0, 0, 0, .55); color: var(--text); font: 400 14px var(--sans); letter-spacing: .06em; transition: border-color .2s, background .2s; }
.film-play:hover { border-color: var(--text-2); background: rgba(0, 0, 0, .7); }
.film-play i { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--text-2); position: relative; }
.film-play i::after { content: ""; position: absolute; left: 13px; top: 10px; border-left: 11px solid var(--text); border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.film-box.playing .film-play { display: none; }
.film-note { margin-top: 16px; font-size: 12.5px; color: var(--label); }
@media (max-width: 520px) { .film-play span { font-size: 12.5px; } .film-play i { width: 28px; height: 28px; } .film-play i::after { left: 10px; top: 7px; } }
/* phone: the whole case fits the width (it was cropped at both sides);
   only the strap ends are cut. Video and still share the rule. */
@media (max-width: 959px) {
  .d-watch { height: min(116vw, 78svh); }
  .d-watch .watch img, .d-watch .watch video { height: auto; width: min(94vw, calc(78svh * .755 * 1.0)); transform: translate(-50%, -50%); }
  .d-watch .watch.flat img { width: auto; height: 86%; }
}

/* --- back office: faces ------------------------------------------------------ */
.afaces { margin-top: 24px; border-top: 1px solid var(--line); font-size: 13.5px; }
.afh, .afr { display: grid; grid-template-columns: 1.6fr 7.5em 6em 1.5fr 1.5fr 9em; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--line); align-items: center; }
.afh { font-size: 11px; letter-spacing: .12em; color: var(--label); }
.afr:target { background: rgba(127,178,229,.05); }
.afr .nm { display: grid; gap: 2px; }
.afr .nm .mono { font-size: 11px; }
.afr .nm em { font-style: normal; font-size: 11px; color: var(--steel); }
.afr .input { height: 38px; font-size: 13.5px; }
.afr .acts { display: flex; gap: 12px; align-items: center; }
@media (max-width: 1000px) {
  .afh { display: none; }
  .afr { grid-template-columns: 1fr 1fr; padding: 16px 0; }
  .afr .nm, .afr input[name^="store"], .afr .acts { grid-column: 1 / -1; }
}

/* --- detail: open in Connect IQ (phone: a button; computer: a QR code) --------- */
.ciq { display: grid; gap: 14px; justify-items: start; }
.ciq-wechat { font-size: 13px; color: var(--steel); max-width: 360px; }
.ciq-get { font-size: 12.5px; color: var(--label); display: flex; flex-wrap: wrap; gap: 4px 14px; }
.ciq-get a { color: var(--text-2); border-bottom: 1px solid var(--line-2); }
.ciq-desk { display: none; align-items: center; gap: 18px; }
.ciq-desk img { width: 112px; height: 112px; image-rendering: pixelated; border: 6px solid #fff; border-radius: 2px; }
.ciq-desk b { display: block; font-weight: 400; font-size: 14px; }
.ciq-desk span { display: block; font-size: 12.5px; color: var(--text-2); margin: 2px 0 8px; }
.ciq-desk .link { font-size: 12.5px; }
.ciq-other { font-size: 12.5px; }
@media (min-width: 960px) and (hover: hover) { .ciq-phone { display: none; } .ciq-desk { display: flex; } }

/* === back office v2: its own app shell ==========================================
   Computer: a side bar. Phone: brand + search on top, tabs at the bottom (safe
   areas for an iPhone home-screen app). Rows are 60 px touch targets. */
body.aback { background: #050607; }
body.aback::after { display: none; }   /* no film grain: it repaints on every scroll */
.ashell { min-height: 100vh; }
.aside { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 14px; padding: calc(env(safe-area-inset-top) + 10px) 16px 10px; background: rgba(5, 6, 7, .92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.abrand { font: 500 11px var(--sans); letter-spacing: .24em; color: var(--text-2); white-space: nowrap; }
.abrand span { color: var(--text); margin-right: 8px; }
.aside .alinks, .aside .afoot { display: none; }
.aside .asearch { flex: 1; margin: 0; }
.aside .asearch .input { height: 36px; font-size: 14px; border: 1px solid var(--line-2); border-radius: 18px; padding: 0 14px; background: #0c0e10; max-width: none; }
.amain { padding: 8px 16px calc(env(safe-area-inset-bottom) + 84px); }
.atabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-template-columns: repeat(5, 1fr); padding: 6px 4px calc(env(safe-area-inset-bottom) + 6px); background: rgba(5, 6, 7, .94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--line); }
.atabs a { position: relative; display: grid; justify-items: center; gap: 3px; padding: 4px 0; font-size: 11px; color: var(--label); -webkit-tap-highlight-color: transparent; }
.atabs a.on { color: var(--text); }
.atabs i { width: 22px; height: 22px; border: 1.5px solid currentColor; border-radius: 6px; opacity: .9; }
.atabs .ic-q { border-radius: 50%; }
.atabs .ic-o { border-radius: 3px; border-width: 1.5px 1.5px 4px; }
.atabs .ic-f { border-radius: 50%; box-shadow: inset 0 0 0 4px #050607, inset 0 0 0 6px currentColor; }
.atabs .ic-i { border-radius: 3px 3px 8px 8px; }
.atabs .ic-m { border: 0; background: radial-gradient(circle, currentColor 2px, transparent 2.5px) 0 50% / 8px 8px repeat-x; }
.atabs em, .alinks em { position: absolute; top: 0; left: calc(50% + 6px); min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--error); color: #fff; font: 600 10px/16px var(--sans); font-style: normal; text-align: center; }
.aprog { position: fixed; top: 0; left: 0; height: 2px; width: 0; background: var(--glacier); z-index: 60; opacity: 0; transition: width .3s ease, opacity .3s; }
.aprog.go { opacity: 1; width: 70%; transition: width 4s cubic-bezier(.1, .7, .2, 1); }
.aprog.done { opacity: 0; width: 100%; transition: width .2s, opacity .3s .15s; }
@media (min-width: 960px) {
  .ashell { display: grid; grid-template-columns: 232px 1fr; }
  .aside { height: 100vh; flex-direction: column; align-items: stretch; gap: 22px; padding: 28px 18px; border-bottom: 0; border-right: 1px solid var(--line); background: #050607; }
  .aside .alinks { display: grid; gap: 2px; }
  .alinks a { position: relative; display: flex; justify-content: space-between; align-items: center; padding: 9px 12px; border-radius: 6px; font-size: 14px; color: var(--text-2); }
  .alinks a:hover { background: #0e1113; color: var(--text); }
  .alinks a.on { background: #12161a; color: var(--text); }
  .alinks em { position: static; }
  .aside .asearch { flex: 0; }
  .aside .afoot { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: auto; font-size: 12px; color: var(--label); }
  .afoot a, .afoot .link { color: var(--text-2); font-size: 12px; }
  .amain { padding: 28px 44px 80px; max-width: 1180px; }
  .atabs { display: none; }
}

.aback .admin { max-width: none; padding: 0; }
.ahd { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin: 18px 0 14px; }
.ahd h1 { font: 300 24px var(--display); }
.ahd.sub { margin-top: 30px; }
.ahd h2 { font: 300 19px var(--display); }
.ahd .dim { font-size: 13px; }
.ahint { font-size: 12.5px; color: var(--label); max-width: 680px; margin-bottom: 12px; }
.aflash { margin: 14px 0 0; }

.astats { display: flex; gap: 8px; overflow-x: auto; margin: 0 -16px; padding: 2px 16px 8px; scrollbar-width: none; border: 0; background: none; }
.astats::-webkit-scrollbar { display: none; }
.astats a { flex: none; min-width: 112px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: #0a0c0e; font-size: 12px; color: var(--text-2); }
.astats a.warn { border-color: rgba(229, 131, 143, .5); }
.astats b { display: block; font: 300 26px/1.1 var(--display); color: var(--text); margin-bottom: 4px; }
.astats small { display: block; font-size: 11px; color: var(--label); margin-top: 2px; }
@media (min-width: 960px) { .astats { margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, 1fr); overflow: visible; } .astats a { min-width: 0; } .astats a:hover { border-color: var(--line-2); } }

.atab-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px 12px; padding: 0 16px; }
.atab-chips::-webkit-scrollbar { display: none; }
.atab-chips a, .atab-chips button { flex: none; padding: 7px 13px; border: 1px solid var(--line-2); border-radius: 16px; font-size: 13px; color: var(--text-2); }
.atab-chips .on { background: var(--text); color: #050607; border-color: var(--text); }
@media (min-width: 960px) { .atab-chips { margin: 0 0 14px; padding: 0; flex-wrap: wrap; } }
.afilter { margin-bottom: 12px; }
.aback .afilter, .aback .afilter .input { height: 40px; font-size: 14px; border: 1px solid var(--line-2); border-radius: 10px; padding: 0 12px; background: #0a0c0e; }
.aback form.afilter { border: 0; padding: 0; background: none; height: auto; }

.alist { border-top: 1px solid var(--line); }
.arow { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; min-height: 64px; padding: 10px 2px; border-bottom: 1px solid var(--line); color: inherit; width: 100%; text-align: left; -webkit-tap-highlight-color: transparent; }
a.arow:active, summary.arow:active, button.arow:active { background: #0e1113; }
@media (hover: hover) { a.arow:hover, summary.arow:hover { background: #0b0d0f; } }
.arow.plain { border: 0; padding: 0; min-height: 0; }
.athumb { width: 42px; height: 42px; border-radius: 50%; overflow: hidden; background: #111; flex: none; }
.athumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.aavatar { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: #12161a; color: var(--text-2); font-size: 15px; text-transform: uppercase; }
.amid { display: grid; gap: 2px; min-width: 0; }
.aline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; font-size: 14px; }
.aline b { font-weight: 500; }
.aline.sub, .sub { font-size: 12px; color: var(--label); }
.amid .aline { overflow: hidden; }
.aend { display: grid; justify-items: end; gap: 3px; font-size: 12px; color: var(--text-2); text-align: right; white-space: nowrap; }
.aend .ed { color: var(--steel); }
.grow { flex: 1; }
.pill { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; letter-spacing: .02em; background: #14181c; color: var(--text-2); }
.pill.st-pending, .pill.st-awaiting_review { background: rgba(143, 179, 207, .14); color: var(--steel); }
.pill.st-needs_attention, .pill.st-disputed { background: rgba(229, 131, 143, .15); color: var(--error); }
.pill.st-issued { background: rgba(111, 191, 168, .13); color: var(--celadon); }
.pill.st-face-live { background: rgba(111, 191, 168, .13); color: var(--celadon); }
.pill.st-face-soon { background: rgba(143, 179, 207, .14); color: var(--steel); }
.pill.st-face-retired { color: var(--label); }
.amore { display: block; margin: 18px auto 0; width: max-content; padding: 10px 22px; border: 1px solid var(--line-2); border-radius: 18px; font-size: 13px; color: var(--text-2); }
.amore.busy { opacity: .5; pointer-events: none; }
.aempty { padding: 28px 0; }

.acard { padding: 14px 2px; border-bottom: 1px solid var(--line); display: grid; gap: 8px; }
.acard .abody { white-space: pre-line; font-size: 14px; color: var(--text); }
.acard.q .aacts { display: flex; gap: 10px; flex-wrap: wrap; padding-left: 54px; }
.aback .aacts { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 4px; }
.aback .btn-sm { height: 38px; border-radius: 8px; }

.aface summary { list-style: none; cursor: pointer; }
.aface summary::-webkit-details-marker { display: none; }
.aface[open] summary { background: #0b0d0f; }
.aface .aform { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; padding: 14px 2px 18px; border-bottom: 1px solid var(--line); }
.aform label { display: grid; gap: 4px; font-size: 12px; color: var(--label); }
.aform .wide { grid-column: 1 / -1; }
.aback .aform .input { height: 42px; font-size: 14px; border: 1px solid var(--line-2); border-radius: 8px; padding: 0 10px; background: #0a0c0e; }
.aback select.input { background-position: right 10px center; }
.aface.hide { display: none; }
@media (min-width: 960px) { .aface .aform { grid-template-columns: 220px 140px 1fr 1fr; align-items: end; padding-left: 56px; } .aform .wide { grid-column: auto; } .aform .wide.aacts { grid-column: 1 / -1; } }

.aback .aorder { margin-top: 18px; }
.aback .spec td, .aback .spec th { font-size: 14px; }
.aback .inline .input { height: 38px; border: 1px solid var(--line-2); border-radius: 8px; padding: 0 10px; background: #0a0c0e; font-size: 14px; }
.aback .narrow { max-width: 520px; }
.ciq-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.ciq-copy { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--line-2); border-radius: 14px; font-size: 12px; color: var(--text-2); }
.ciq-copy .mono { color: var(--label); font-size: 11px; }
.ciq-copy:hover { border-color: var(--label); color: var(--text); }
.ciq-copy.done { color: var(--celadon); border-color: rgba(111,191,168,.5); }
.ciq-desk .ciq-row { display: flex; margin: 0; font-size: 12.5px; color: inherit; }
.ciq-desk .ciq-copy span { display: inline; margin: 0; font-size: 11px; color: var(--label); }
.ciq-desk .ciq-copy { padding: 3px 9px; }
.apush { display: grid; gap: 8px; padding: 14px; margin-bottom: 14px; border: 1px solid var(--line-2); border-radius: 12px; background: #0a0c0e; }
.apush .sub { line-height: 1.6; }
.apush .aacts { margin: 0; }