@font-face{font-family:"Playfair Display";src:url("/assets/fonts/playfair-display-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Playfair Display";src:url("/assets/fonts/playfair-display-600-italic.woff2") format("woff2");font-weight:600;font-style:italic;font-display:swap}
@font-face{font-family:"Be Vietnam Pro";src:url("/assets/fonts/be-vietnam-pro-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Be Vietnam Pro";src:url("/assets/fonts/be-vietnam-pro-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Be Vietnam Pro";src:url("/assets/fonts/be-vietnam-pro-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Be Vietnam Pro Fallback";src:local("Arial"),local("Liberation Sans"),local("Helvetica");size-adjust:110%;ascent-override:91%;descent-override:24%;line-gap-override:0%}
@font-face{font-family:"Playfair Fallback";src:local("Times New Roman"),local("Liberation Serif"),local("Times");size-adjust:106%;ascent-override:102%;descent-override:24%;line-gap-override:0%}
/* site.css · the one stylesheet. @font-face rules are written by the build from config.fonts.
   Colors only from :root variables · font sizes only 12/14/16/20/28/40/56 · breakpoints only 768/960/1100 (min-width)
   Touch targets at least 44px · body text at least 14px · no backdrop filters, no animated shadows
   States: a parent carries data-state, its children carry data-when (rules written by tools/css_states.py, see states:begin). */
:root{
  --bg:#0F0E0C; --bg-2:#151310; --surface:#1B1915; --surface-2:#24211C; --scrim:rgba(8,7,6,.86);
  --line:rgba(243,236,224,.10); --line-2:rgba(243,236,224,.18); --field-line:#777065;
  --ink:#F4EFE6; --ink-2:#CFC7BA; --muted:#A39A8C; --on-media:#FFFFFF; --media-chip:rgba(0,0,0,.6);
  --gold:#E0BE86; --gold-strong:#EBCB95; --gold-ink:#1C1508; --gold-soft:rgba(224,190,134,.12); --gold-line:rgba(224,190,134,.38); --gold-deep:#2A241A; --gold-press:#C9A56E;
  --ok:#8AD9A9; --ok-bg:rgba(138,217,169,.12); --ok-line:rgba(138,217,169,.35);
  --info:#A9C6FF; --info-bg:rgba(169,198,255,.12);
  --warn:#F0BA6A; --warn-bg:rgba(240,186,106,.12); --warn-line:rgba(240,186,106,.4);
  --err:#FF9E90; --err-bg:rgba(255,158,144,.10); --err-line:rgba(255,158,144,.4); --err-press:rgba(255,158,144,.2);
  --display:"Playfair Display", "Playfair Fallback", Georgia, serif;
  --ui:"Be Vietnam Pro", "Be Vietnam Pro Fallback", -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  --mono:ui-monospace, Menlo, Consolas, monospace;
  --fs-12:12px; --fs-14:14px; --fs-16:16px; --fs-20:20px; --fs-28:28px; --fs-40:40px; --fs-56:56px;
  --r-sm:8px; --r-md:12px; --r:16px; --r-pill:999px; --tap:44px; --header-h:68px; --gutter:16px;
  --shadow:0 16px 32px -16px rgba(0,0,0,.8);
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg);-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + 16px)}
.site{margin:0;background:var(--bg);color:var(--ink);font-family:var(--ui);font-size:var(--fs-16);line-height:1.6;min-height:100vh;display:flex;flex-direction:column;-webkit-font-smoothing:antialiased;overflow-wrap:break-word}
.site main{flex:1 0 auto;width:100%}
.site img,.site video{display:block;max-width:100%;height:auto}
.site svg{display:block;max-width:100%}
.site a{color:var(--gold)}
.site button,.site input,.site textarea{font:inherit;color:inherit}
.site :focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.site h1,.site h2,.site h3,.site p,.site dl,.site dd,.site figure,.site fieldset{margin:0}
.ic{flex-shrink:0}
.wrap{width:100%;max-width:1200px;margin:0 auto;padding:0 max(var(--gutter), env(safe-area-inset-right)) 0 max(var(--gutter), env(safe-area-inset-left))}
.wrap-narrow{max-width:880px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
@media (min-width:768px){:root{--gutter:40px}}

/* ---------- type ---------- */
.eyebrow{font-size:var(--fs-14);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.display{font-family:var(--display);font-weight:600;letter-spacing:-.01em;line-height:1.12;font-size:var(--fs-40)}
.display em{font-style:italic;color:var(--gold)}
.display-upright em{font-style:normal}
.h1{font-family:var(--display);font-weight:600;font-size:var(--fs-28);line-height:1.2}
.h2{font-family:var(--display);font-weight:600;font-size:var(--fs-28);line-height:1.2}
.h3{font-size:var(--fs-20);font-weight:600;line-height:1.35}
.lead{font-size:var(--fs-16);color:var(--ink-2);max-width:36em}
.body{font-size:var(--fs-14);color:var(--ink-2)}
.muted{font-size:var(--fs-14);color:var(--muted)}
.help{font-size:var(--fs-14);color:var(--muted)}
.gold{color:var(--gold)}
.center{text-align:center}
@media (min-width:768px){.display{font-size:var(--fs-56)}.h1{font-size:var(--fs-40)}.h2{font-size:var(--fs-40)}.lead{font-size:var(--fs-20)}}

/* ---------- layout helpers ---------- */
.stack{display:flex;flex-direction:column;gap:12px}
.stack-sm{display:flex;flex-direction:column;gap:6px}
.stack-lg{display:flex;flex-direction:column;gap:24px}
.row-wrap{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.row-between{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;justify-content:space-between}
.center-col{align-items:center;text-align:center}
.grid2{display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}
.split2{display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}
@media (min-width:768px){.split2{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:960px){.grid2{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border-radius:var(--r-pill);font-size:var(--fs-16);font-weight:600;border:1px solid transparent;cursor:pointer;text-decoration:none;text-align:center;line-height:1.25;transition:background-color .15s,border-color .15s}
.site .btn-gold{background:var(--gold);color:var(--gold-ink)}
.site .btn-ghost{background:transparent;border-color:var(--line-2);color:var(--ink)}
.site .btn-danger{background:transparent;border-color:var(--err-line);color:var(--err)}
.btn-sm{min-height:var(--tap);padding:0 16px;font-size:var(--fs-14)}
.btn-block{width:100%}
.btn-self{align-self:flex-start}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:var(--tap);height:var(--tap);border-radius:var(--r-pill);border:1px solid var(--line-2);background:transparent;cursor:pointer;color:var(--ink);flex-shrink:0;padding:0}
.text-btn{display:inline-flex;align-items:center;min-height:var(--tap);padding:0;border:0;background:none;font-size:var(--fs-14);font-weight:600;cursor:pointer;text-decoration:none}
.site .text-btn{color:var(--gold)}
.site .text-muted{color:var(--muted)}
.link-arrow{display:inline-flex;align-items:center;gap:6px;min-height:var(--tap);font-size:var(--fs-14);font-weight:600;text-decoration:none}
.spin{width:20px;height:20px;border-radius:50%;border:3px solid var(--gold-soft);border-top-color:currentColor;animation:spin 1s linear infinite;flex-shrink:0}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- header: one 68px bar on every page ---------- */
.hdr{position:sticky;top:0;z-index:30;height:calc(var(--header-h) + env(safe-area-inset-top));padding-top:env(safe-area-inset-top);background:var(--bg);border-bottom:1px solid var(--line)}
.hdr-in{display:flex;align-items:center;gap:8px;height:100%;max-width:1320px}
.brand{display:inline-flex;align-items:center;gap:10px;min-height:var(--tap);font-weight:700;font-size:var(--fs-16);text-decoration:none;flex-shrink:0;white-space:nowrap}
.site .brand{color:var(--ink)}
.brand-mark{width:32px;height:32px;border-radius:var(--r-sm);background:var(--gold);display:flex;align-items:center;justify-content:center;color:var(--gold-ink)}
.nav{display:none;gap:2px;margin-left:12px}
.site .nav-a{display:inline-flex;align-items:center;min-height:var(--tap);padding:0 12px;border-radius:var(--r-pill);font-size:var(--fs-14);font-weight:400;color:var(--ink-2);text-decoration:none;white-space:nowrap}
.hdr-right{margin-left:auto;display:flex;align-items:center;gap:8px}
.auth{display:flex;align-items:center;justify-content:flex-end;gap:8px}
.dd{position:relative}
.dd-lang{display:none}
.dd-btn{display:inline-flex;align-items:center;gap:6px;min-height:var(--tap);padding:0 12px;border-radius:var(--r-pill);border:1px solid transparent;background:transparent;font-size:var(--fs-14);color:var(--ink-2);cursor:pointer}
.dd-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:40;min-width:240px;padding:6px;border-radius:var(--r);background:var(--surface);border:1px solid var(--line-2);box-shadow:var(--shadow);display:flex;flex-direction:column}
.mi{display:flex;align-items:center;gap:12px;min-height:var(--tap);padding:0 12px;border-radius:var(--r-sm);border:0;background:none;text-align:left;font-size:var(--fs-14);text-decoration:none;cursor:pointer;width:100%}
.site .mi{color:var(--ink)}
.site .mi[aria-pressed="true"]{color:var(--gold)}
.dd-who{padding:8px 12px 10px;margin-bottom:4px;border-bottom:1px solid var(--line);font-size:var(--fs-14);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.credits-pill{display:inline-flex;align-items:center;gap:6px;min-height:var(--tap);padding:0 14px;border-radius:var(--r-pill);background:var(--gold-soft);border:1px solid var(--gold-line);font-size:var(--fs-14);font-weight:600;text-decoration:none;white-space:nowrap}
.site .credits-pill{color:var(--gold)}
.avatar{width:var(--tap);height:var(--tap);border-radius:50%;background:var(--surface-2);border:1px solid var(--line-2);display:flex;align-items:center;justify-content:center;font-size:var(--fs-14);font-weight:600;cursor:pointer;flex-shrink:0;padding:0}
.hide-sm{display:none}
.drawer{position:fixed;left:0;right:0;top:calc(var(--header-h) + env(safe-area-inset-top));bottom:0;z-index:29;overflow-y:auto;background:var(--bg-2);border-top:1px solid var(--line);padding:8px var(--gutter) calc(32px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:4px}
.drawer-nav{display:flex;flex-direction:column}
.site .drawer-a{display:flex;align-items:center;min-height:52px;border-bottom:1px solid var(--line);font-size:var(--fs-16);font-weight:400;color:var(--ink);text-decoration:none}
.drawer .chips{margin:16px 0}
@media (min-width:768px){.hide-sm{display:inline-flex}}
@media (min-width:1100px){.nav{display:flex}.dd-lang{display:block}.dd-mobile{display:none}}

/* ---------- chips, pills, segmented, badges, tags ---------- */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips-scroll{flex-wrap:nowrap;overflow-x:auto;margin:0 calc(var(--gutter) * -1);padding:0 var(--gutter) 4px;scrollbar-width:none}
@media (min-width:768px){.chips-scroll{flex-wrap:wrap;margin:0;padding:0;overflow:visible}}
.pill,.pill-radio span{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:var(--tap);padding:0 16px;border-radius:var(--r-pill);border:1px solid var(--line-2);font-size:var(--fs-14);color:var(--ink-2);background:transparent;cursor:pointer;white-space:nowrap}
.pill[aria-pressed="true"],.pill-radio input:checked+span{border-color:var(--gold);background:var(--gold-soft);color:var(--gold);font-weight:600}
.pill-radio{position:relative;display:inline-flex}
.pill-radio input,.choice input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.pill-radio input:focus-visible+span,.choice input:focus-visible+.choice-box{outline:2px solid var(--gold);outline-offset:2px}
.count{font-size:var(--fs-12);color:var(--muted)}
.seg{display:inline-flex;flex-wrap:wrap;padding:4px;border-radius:var(--r-pill);background:var(--surface);border:1px solid var(--line);align-self:center}
.seg button{min-height:var(--tap);padding:0 18px;border-radius:var(--r-pill);border:0;background:transparent;font-size:var(--fs-14);font-weight:400;color:var(--ink-2);cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--gold);color:var(--gold-ink);font-weight:600}
.badge{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-12);font-weight:600;padding:4px 10px;border-radius:var(--r-pill);background:var(--surface-2);color:var(--ink-2);white-space:nowrap}
.badge-ok{background:var(--ok-bg);color:var(--ok)}
.badge-gold{background:var(--gold-soft);color:var(--gold)}
.tag{display:inline-flex;align-items:center;font-size:var(--fs-12);font-weight:600;padding:2px 10px;border-radius:var(--r-pill);background:var(--surface-2);color:var(--ink-2);white-space:nowrap}

/* ---------- sections ---------- */
.section{padding:56px 0}
.section-sm{padding:0 0 56px}
@media (min-width:768px){.section{padding:96px 0}.section-sm{padding-bottom:88px}}
.sec-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:28px}
.hero{padding:28px 0 48px}
.hero-sm{padding-bottom:32px}
.hero-grid{display:grid;gap:32px;align-items:center;grid-template-columns:minmax(0,1fr)}
.hero-copy{display:flex;flex-direction:column;gap:18px}
.trust{display:flex;flex-wrap:wrap;gap:8px 18px;list-style:none;margin:0;padding:0;font-size:var(--fs-14);color:var(--muted)}
.trust li{display:inline-flex;align-items:center;gap:6px}
.trust .ic{color:var(--gold)}
@media (min-width:960px){.hero{padding:56px 0 88px}.hero-sm{padding-bottom:40px}.hero-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:56px}}
.stage{position:relative;display:flex;justify-content:center}
.phone{position:relative;box-sizing:content-box;width:216px;aspect-ratio:9/16;border:8px solid var(--surface-2);border-radius:30px;background:var(--bg);overflow:hidden;box-shadow:var(--shadow)}
.phone img{width:100%;height:100%;object-fit:contain}
.phone .ph-motion{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}
.ph-bar{position:absolute;left:10px;right:10px;bottom:10px;display:flex;justify-content:space-between;font-size:var(--fs-12);color:var(--on-media)}
.ph-bar span{background:var(--media-chip);padding:4px 10px;border-radius:var(--r-pill)}
.float{position:absolute;display:flex;align-items:center;gap:10px;padding:8px 12px 8px 8px;border-radius:var(--r);background:var(--surface);border:1px solid var(--line-2);box-shadow:var(--shadow)}
.float img{width:40px;aspect-ratio:9/16;object-fit:contain;border-radius:6px;background:var(--bg)}
.float-t{display:flex;flex-direction:column;gap:2px}
.float-t b{font-size:var(--fs-14);line-height:1.3}
.float-t small{font-size:var(--fs-12);color:var(--muted)}
.float-a{left:0;top:14%}
.float-b{right:0;bottom:12%}
@media (min-width:768px){.phone{width:288px}.float-a{left:4%}.float-b{right:2%}}
.qc{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:20px 0 0;padding:0;list-style:none}
.qc li{font-size:var(--fs-14);color:var(--ink-2);padding:6px 12px;border-radius:var(--r-pill);border:1px solid var(--line)}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--line);border-radius:var(--r);background:var(--bg-2)}
.stat{display:flex;flex-direction:column-reverse;align-items:center;padding:16px 8px;text-align:center;border-right:1px solid var(--line)}
.stat:last-child{border-right:0}
.stat dd{font-family:var(--display);font-size:var(--fs-20);font-weight:600;line-height:1.3}
.stat dt{font-size:var(--fs-12);color:var(--muted)}
@media (min-width:768px){.stat{padding:28px 16px}.stat dd{font-size:var(--fs-40)}.stat dt{font-size:var(--fs-14)}}

/* ---------- film cards: 9:16 cover in a 9:16 box, never cropped or stretched ---------- */
.films{display:grid;grid-auto-flow:column;grid-auto-columns:160px;gap:12px;overflow-x:auto;padding:0 var(--gutter) 8px;margin:0 calc(var(--gutter) * -1);scroll-snap-type:x mandatory;scroll-padding:0 var(--gutter);scrollbar-width:none}
.films-grid{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible;margin:0;padding:0}
@media (min-width:768px){.films{grid-auto-flow:row;grid-template-columns:repeat(4,minmax(0,1fr));overflow:visible;margin:0;padding:0;gap:20px}}
.film{display:flex;flex-direction:column;gap:6px;scroll-snap-align:start;text-align:left;background:none;border:0;padding:0;cursor:pointer;color:var(--ink);border-radius:var(--r)}
.film-poster{position:relative;display:block;aspect-ratio:9/16;border-radius:var(--r);overflow:hidden;background:var(--surface)}
.film-poster img{width:100%;height:100%;object-fit:contain}
.dur{position:absolute;left:10px;bottom:10px;display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-12);font-weight:600;color:var(--on-media);background:var(--media-chip);padding:4px 10px;border-radius:var(--r-pill)}
.film-title{font-size:var(--fs-14);font-weight:600;line-height:1.35}
.film-meta{font-size:var(--fs-12);color:var(--muted)}

/* ---------- steps, plans, faq, band ---------- */
.steps{display:grid;gap:12px;list-style:none;margin:0;padding:0}
.step{display:flex;gap:16px;align-items:flex-start;padding:20px;border-radius:var(--r);background:var(--bg-2);border:1px solid var(--line)}
.step-ic{flex-shrink:0;width:var(--tap);height:var(--tap);border-radius:var(--r-md);background:var(--gold-soft);color:var(--gold);display:flex;align-items:center;justify-content:center}
.step-n{font-size:var(--fs-12);font-weight:600;color:var(--gold);letter-spacing:.1em;text-transform:uppercase}
@media (min-width:768px){.steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.step{flex-direction:column;padding:28px}}
.plans{display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}
@media (min-width:768px){.plans-2{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:960px){.plans{grid-template-columns:repeat(3,minmax(0,1fr))}.plans-2{grid-template-columns:repeat(2,minmax(0,1fr))}}
.plan{position:relative;display:flex;flex-direction:column;gap:14px;padding:24px;border-radius:var(--r);background:var(--bg-2);border:1px solid var(--line)}
.plan-quiet{background:transparent}
.plan-name{font-size:var(--fs-16);font-weight:600}
.plan-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px;font-family:var(--display);font-size:var(--fs-40);font-weight:600;line-height:1.1}
.plan-price small{font-family:var(--ui);font-size:var(--fs-14);font-weight:400;color:var(--muted)}
.plan-sub{font-size:var(--fs-14);color:var(--muted)}
.ticks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;font-size:var(--fs-14);color:var(--ink-2);flex-grow:1}
.ticks li{display:flex;gap:10px;align-items:flex-start}
.ticks .ic{margin-top:3px;color:var(--gold)}
.trial{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;padding:16px 20px;border-radius:var(--r);border:1px dashed var(--gold-line);background:var(--gold-soft)}
.trial-ic{width:36px;height:36px;border-radius:50%;background:var(--gold);color:var(--gold-ink);display:flex;align-items:center;justify-content:center}
.trial-t{flex:1 1 220px;font-size:var(--fs-14);color:var(--ink-2)}
.trial-t b{color:var(--ink)}
.billing{display:flex;flex-direction:column;gap:16px}
.bill-note{text-align:center;font-size:var(--fs-14);color:var(--muted)}
.table-box{position:relative;overflow-x:auto;border:1px solid var(--line);border-radius:var(--r)}
.tbl{width:100%;border-collapse:collapse;font-size:var(--fs-14);min-width:640px}
.tbl th,.tbl td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.tbl thead th{font-weight:600;background:var(--bg-2)}
.tbl tbody th{font-weight:400}
.tbl tbody td{color:var(--ink-2)}
.tbl tr:last-child>*{border-bottom:0}
.tbl-ledger{min-width:520px}
.tbl-ledger td,.payments .tbl td{white-space:nowrap}
.amt{font-weight:600;white-space:nowrap}
.amt-pos{color:var(--ok)}
.faq{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.faq-i{border-bottom:1px solid var(--line)}
.faq-q{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;padding:12px 0;font-size:var(--fs-16);font-weight:600;cursor:pointer;list-style:none}
.faq-q::-webkit-details-marker{display:none}
.faq-q .ic{color:var(--muted);transition:transform .2s}
.faq-i[open] .ic{transform:rotate(180deg)}
.faq-a{padding:0 0 20px;font-size:var(--fs-16);color:var(--ink-2)}
.band{border-radius:var(--r);padding:40px 20px;text-align:center;background:var(--surface);border:1px solid var(--gold-line);display:flex;flex-direction:column;align-items:center;gap:16px}
@media (min-width:768px){.band{padding:64px}}

/* ---------- footer ---------- */
.footer{border-top:1px solid var(--line);padding:48px 0 calc(32px + env(safe-area-inset-bottom));background:var(--bg-2)}
.foot-grid{display:grid;gap:28px;grid-template-columns:minmax(0,1fr)}
.foot-col{display:flex;flex-direction:column;align-items:flex-start}
.foot-h{margin:0 0 4px;font-size:var(--fs-12);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600}
.foot-a{display:inline-flex;align-items:center;min-height:var(--tap);min-width:var(--tap);font-size:var(--fs-14);text-decoration:none;background:none;border:0;padding:0;cursor:pointer;text-align:left}
.site .foot-a{color:var(--ink-2)}
.foot-bottom{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;margin-top:28px;padding-top:20px;border-top:1px solid var(--line);font-size:var(--fs-12);color:var(--muted)}
@media (min-width:768px){.foot-grid{grid-template-columns:2fr 1fr 1fr 1fr}}

/* ---------- forms ---------- */
.card{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);padding:20px}
@media (min-width:768px){.card{padding:32px}}
.form{display:flex;flex-direction:column;gap:16px}
.form-head{display:flex;flex-direction:column;gap:6px}
.field{display:flex;flex-direction:column;gap:6px}
.field label,.lbl{font-size:var(--fs-14);font-weight:600;color:var(--ink)}
.opt{font-weight:400;color:var(--muted)}
.fs{border:0;padding:0;min-width:0;display:flex;flex-direction:column;gap:8px}
.fs .lbl{padding:0}
.input{width:100%;min-height:48px;scroll-margin:calc(var(--header-h) + 16px) 0 96px;padding:12px 14px;border-radius:var(--r-sm);border:1px solid var(--field-line);background:var(--bg);font-size:var(--fs-16);color:var(--ink);outline:none}
.input::placeholder{color:var(--muted);opacity:1}
.input:focus{border-color:var(--gold)}
.input[aria-invalid="true"]{border-color:var(--err)}
textarea.input{resize:vertical}
.with-btn{display:flex;gap:8px}
.with-btn .input{flex:1;min-width:0}
.err{font-size:var(--fs-14);color:var(--err);background:var(--err-bg);border-radius:var(--r-sm);padding:10px 12px}
.check{display:flex;gap:12px;align-items:center;min-height:var(--tap);font-size:var(--fs-14);color:var(--ink-2);cursor:pointer}
.check input{width:24px;height:24px;margin:0;accent-color:var(--gold);flex-shrink:0}
.tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding:4px;border-radius:var(--r-pill);background:var(--bg);border:1px solid var(--line);margin-bottom:20px}
.tabs button{min-height:var(--tap);border:0;border-radius:var(--r-pill);background:transparent;font-size:var(--fs-14);font-weight:600;color:var(--ink-2);cursor:pointer}
.tabs button[aria-selected="true"]{background:var(--surface-2);color:var(--ink)}
.success{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;padding:16px 0}
.success-card{padding:32px 16px;border-radius:var(--r);border:1px solid var(--ok-line);background:var(--ok-bg)}
.tick-big{width:64px;height:64px;border-radius:50%;background:var(--ok-bg);color:var(--ok);display:flex;align-items:center;justify-content:center}
.drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;width:100%;aspect-ratio:9/16;padding:16px;border-radius:var(--r-md);border:1px dashed var(--field-line);background:var(--bg);color:var(--ink-2);font-size:var(--fs-14);text-align:center;cursor:pointer}
.drop-req{border-color:var(--gold-line)}
.drop-sm{aspect-ratio:auto;min-height:56px;flex-direction:row;justify-content:flex-start;text-align:left}
.note{display:flex;gap:12px;align-items:flex-start;padding:16px;border-radius:var(--r);border:1px solid var(--line-2);background:var(--bg-2);font-size:var(--fs-14);color:var(--ink-2)}
.note>.ic{color:var(--gold);margin-top:2px}
.note b{color:var(--ink)}
.note-ok{border-color:var(--ok-line);background:var(--ok-bg)}
.note-ok>.ic{color:var(--ok)}
.note-warn{border-color:var(--warn-line);background:var(--warn-bg)}
.note-warn>.ic{color:var(--warn)}
.note-err{border-color:var(--err-line);background:var(--err-bg)}
.note-err>.ic{color:var(--err)}
.loading{display:flex;align-items:center;gap:14px;padding:18px;border-radius:var(--r-md);border:1px dashed var(--gold-line);background:var(--gold-soft);font-size:var(--fs-14);color:var(--ink-2)}
.loading .spin{color:var(--gold)}
/* login + contact */
.auth-grid{display:grid;gap:32px;padding-top:24px;padding-bottom:56px;grid-template-columns:minmax(0,1fr)}
.pitch{order:2}
.collage{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;max-width:420px}
.collage img{width:100%;aspect-ratio:9/16;object-fit:contain;border-radius:var(--r-md);background:var(--surface)}
@media (min-width:960px){.auth-grid{grid-template-columns:minmax(0,1fr) 460px;gap:72px;padding-top:64px;padding-bottom:96px;align-items:center}.pitch{order:0}}
.fb-nav{padding-top:20px}
@media (min-width:768px){.fb-nav{padding-top:36px}}
.fb-grid{display:grid;gap:32px;padding-top:24px;padding-bottom:56px;grid-template-columns:minmax(0,1fr)}
@media (min-width:960px){.fb-grid{grid-template-columns:minmax(0,1fr) 560px;gap:72px;padding-top:64px;padding-bottom:96px}}
.way{display:flex;gap:14px;align-items:flex-start;padding:18px;border-radius:var(--r);border:1px solid var(--line);background:var(--bg-2)}
.way-ic{flex-shrink:0;width:40px;height:40px;border-radius:10px;background:var(--gold-soft);color:var(--gold);display:flex;align-items:center;justify-content:center}
.way-t{font-size:var(--fs-16);font-weight:600}

/* ---------- signed-in pages ---------- */
.page-main{max-width:1320px;margin:0 auto;padding:20px max(var(--gutter), env(safe-area-inset-right)) 48px max(var(--gutter), env(safe-area-inset-left))}
@media (min-width:768px){.page-main{padding-top:36px;padding-bottom:72px}}
.page-head{display:flex;flex-direction:column;gap:6px;margin-bottom:20px}
.studio{display:grid;gap:20px;grid-template-columns:minmax(0,1fr)}
@media (min-width:1100px){.studio{grid-template-columns:minmax(0,1fr) 360px;gap:32px;align-items:start}}
.studio-main{display:flex;flex-direction:column;gap:16px}
.panel{border:1px solid var(--line);border-radius:var(--r);background:var(--bg-2)}
.panel-h{display:flex;align-items:center;gap:14px;padding:18px 20px}
.panel-n{flex-shrink:0;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:var(--fs-14);font-weight:700;background:var(--gold);color:var(--gold-ink)}
.panel-t{font-size:var(--fs-16);font-weight:600}
.panel-b{padding:0 20px 24px;display:flex;flex-direction:column;gap:20px}
@media (min-width:768px){.panel-b{padding:0 28px 28px 66px}}
.slots{display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr));align-items:end}
@media (min-width:768px){.slots{grid-template-columns:repeat(4,minmax(0,170px))}}
.slot{display:flex;flex-direction:column;gap:8px;min-width:0}
.slot-h{display:flex;flex-direction:column;align-items:flex-start;font-size:var(--fs-14);font-weight:600}
.slot-state{aspect-ratio:9/16;border-radius:var(--r-md);border:1px solid var(--line-2);background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:12px;text-align:center;font-size:var(--fs-14);color:var(--ink-2)}
.slot-state .spin{color:var(--gold)}
.slot-bad{border-color:var(--err-line);color:var(--err)}
.slot-hint{font-size:var(--fs-12);line-height:1.4;color:var(--muted)}
.slot-img{position:relative;aspect-ratio:9/16;border-radius:var(--r-md);overflow:hidden;background:var(--surface)}
.slot-img img{width:100%;height:100%;object-fit:contain}
.x{position:absolute;top:6px;right:6px;width:var(--tap);height:var(--tap);border-radius:50%;background:var(--media-chip);border:0;color:var(--on-media);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.guide{border:1px solid var(--line);border-radius:var(--r-md);background:var(--bg)}
.guide-h{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:0 16px;cursor:pointer;font-size:var(--fs-14);font-weight:600;list-style:none}
.guide-h::-webkit-details-marker{display:none}
.guide-h .ic{color:var(--muted)}
.guide[open] .guide-h .ic{transform:rotate(180deg)}
.guide-b{display:grid;gap:16px;padding:0 16px 16px;grid-template-columns:minmax(0,1fr)}
@media (min-width:768px){.guide-b{grid-template-columns:repeat(2,minmax(0,1fr))}}
.guide-ex{display:grid;grid-template-columns:72px minmax(0,1fr);gap:12px;align-items:start}
.guide-ex img{width:72px;aspect-ratio:9/16;object-fit:contain;border-radius:var(--r-sm);background:var(--surface)}
.guide-t{font-size:var(--fs-14);font-weight:600}
.guide-list{margin:6px 0 0;padding-left:18px;font-size:var(--fs-14);color:var(--ink-2)}
.choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (min-width:960px){.choices{grid-template-columns:repeat(4,minmax(0,1fr))}}
.choice{position:relative;display:flex}
.choice-box{display:flex;flex-direction:column;gap:2px;width:100%;min-height:64px;padding:12px 14px;border-radius:var(--r-md);border:1px solid var(--field-line);background:var(--bg);cursor:pointer}
.choice-box b{font-size:var(--fs-14);font-weight:600}
.choice-hint{font-size:var(--fs-12);color:var(--muted)}
.choice input:checked+.choice-box{border-color:var(--gold);background:var(--gold-soft)}
.howto{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px;font-size:var(--fs-14);color:var(--ink-2)}
.submit{display:flex;flex-direction:column;gap:12px}
.submit-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding-top:4px}
.cost-line{font-size:var(--fs-14)}
.summary{display:flex;flex-direction:column;gap:16px}
@media (min-width:1100px){.summary{position:sticky;top:calc(var(--header-h) + 20px)}}
.prev{display:flex;gap:12px;align-items:center}
.prev img{width:54px;aspect-ratio:9/16;object-fit:contain;border-radius:var(--r-sm);background:var(--surface)}
.prev div{display:flex;flex-direction:column}
.sum-row{display:flex;justify-content:space-between;gap:12px;font-size:var(--fs-14);padding:10px 0;border-bottom:1px solid var(--line)}
.sum-row:last-child{border-bottom:0}
.sum-row dt{color:var(--muted)}
.sum-row dd{text-align:right}
/* modals */
.modal{position:fixed;inset:0;z-index:60;background:var(--scrim);display:flex;align-items:center;justify-content:center;padding:max(var(--gutter), env(safe-area-inset-top)) max(var(--gutter), env(safe-area-inset-right)) max(var(--gutter), env(safe-area-inset-bottom)) max(var(--gutter), env(safe-area-inset-left))}
.modal[data-state="closed"]{display:none}
.modal-in{width:100%;max-width:760px;max-height:100%;display:flex}
.modal-card{position:relative;width:100%;max-width:440px;max-height:calc(100dvh - 32px);overflow:auto;background:var(--bg-2);border:1px solid var(--line-2);border-radius:var(--r);padding:28px 24px;display:flex;flex-direction:column;gap:16px}
.modal-x{position:absolute;top:10px;right:10px;background:var(--bg);z-index:1}
.vmodal{position:relative;display:grid;gap:16px;width:100%;max-height:100%;overflow:auto;background:var(--bg-2);border:1px solid var(--line-2);border-radius:var(--r);padding:16px;grid-template-columns:minmax(0,1fr)}
.vmodal .player{width:100%;max-width:min(280px, calc(62dvh * 9 / 16));aspect-ratio:9/16;border-radius:var(--r-md);background:var(--bg);justify-self:center;object-fit:contain}
@media (min-width:768px){.vmodal{grid-template-columns:300px minmax(0,1fr);padding:24px;gap:28px;align-items:center}.vmodal .player{max-width:min(300px, calc(80dvh * 9 / 16))}}
/* orders */
.ctabs{display:flex;gap:4px;overflow-x:auto;border-bottom:1px solid var(--line);margin:0 calc(var(--gutter) * -1) 16px;padding:0 var(--gutter);scrollbar-width:none}
.ctab{display:inline-flex;align-items:center;min-height:var(--tap);padding:0 12px;border:0;border-bottom:2px solid transparent;background:none;font-size:var(--fs-14);font-weight:600;cursor:pointer;white-space:nowrap;text-decoration:none}
.site .ctab{color:var(--muted)}
.site .ctab[aria-selected="true"],.site .ctab[aria-current="page"]{color:var(--ink);border-bottom-color:var(--gold)}
@media (min-width:768px){.ctabs{margin:0 0 20px;padding:0}}
.statbar{display:flex;flex-wrap:wrap;gap:4px 18px;align-items:center;padding:10px 14px;border-radius:var(--r);background:var(--bg-2);border:1px solid var(--line);margin-bottom:12px}
.statbar div{display:flex;flex-direction:row-reverse;align-items:baseline;gap:6px}
.statbar dt{font-size:var(--fs-14);color:var(--muted)}
.statbar dd{font-family:var(--display);font-size:var(--fs-20);font-weight:600;min-width:1.2em;text-align:right}
@media (min-width:768px){.statbar{gap:8px 32px;padding:16px 20px;margin-bottom:16px}.statbar dd{font-size:var(--fs-28)}}
.statbar-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}
.statbar-row .statbar{margin:0;flex:1 1 auto}
.toolbar{display:flex;flex-direction:column;gap:10px;margin-bottom:12px}
.tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.search{position:relative;flex:1 1 240px;min-width:0;display:flex;gap:8px}
.search .input{min-height:var(--tap);padding:8px 12px}
.sync{display:flex;align-items:center;gap:6px;font-size:var(--fs-14);color:var(--muted);white-space:nowrap;flex-basis:100%}
@media (min-width:960px){.sync{flex-basis:auto}}
@media (min-width:960px){.toolbar{flex-direction:row;align-items:center;justify-content:space-between;margin-bottom:16px}.tools{flex:0 1 560px;flex-wrap:nowrap}.search{flex:1 1 200px}}
.orders{display:flex;flex-direction:column;gap:12px}
.order{border:1px solid var(--line);border-radius:var(--r);background:var(--bg-2)}
.skel{display:flex;gap:14px;align-items:center;padding:14px 16px}
.skel-line{flex:1;height:14px;border-radius:var(--r-sm);background:var(--surface-2)}
.skel-short{flex:0 0 30%}
.order-row{display:grid;grid-template-columns:48px minmax(0,1fr);gap:10px 14px;align-items:center;padding:14px 16px}
@media (min-width:960px){.order-row{grid-template-columns:54px minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr) auto;gap:20px;padding:14px 20px}}
.thumb{width:100%;max-width:54px;aspect-ratio:9/16;border-radius:var(--r-sm);background:var(--surface);object-fit:contain}
.thumb-x{width:100%;max-width:54px;aspect-ratio:9/16;border-radius:var(--r-sm);background:var(--surface);display:flex;align-items:center;justify-content:center;border:1px dashed var(--line-2);color:var(--muted)}
.o-name{min-width:0}
.o-title{font-size:var(--fs-16);font-weight:600;line-height:1.35}
.o-sub{font-size:var(--fs-14);color:var(--muted)}
.o-col{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;grid-column:1/-1;font-size:var(--fs-14);color:var(--ink-2)}
.o-state{min-height:calc(4.8em + 8px)}
.o-col>*{flex-basis:100%}
.o-col small{font-size:var(--fs-14);color:var(--muted)}
.o-act{display:flex;gap:8px;flex-wrap:wrap;grid-column:1/-1;min-height:var(--tap)}
@media (min-width:960px){.o-state{min-height:0}.o-col>*{flex-basis:auto}.o-col{grid-column:auto;flex-direction:column;align-items:flex-start}.o-act{grid-column:auto;justify-content:flex-end;min-width:250px}}
.status{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-14);font-weight:600;color:var(--info);vertical-align:middle}
.status[data-tone="warn"]{color:var(--warn)}
.status[data-tone="ok"]{color:var(--ok)}
.status[data-tone="muted"]{color:var(--muted)}
.status::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.order-more{border-top:1px solid var(--line)}
.order-sum{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:var(--tap);padding:0 16px;cursor:pointer;font-size:var(--fs-14);font-weight:600;color:var(--ink-2);list-style:none}
.order-sum::-webkit-details-marker{display:none}
.order-more[open] .order-sum .ic{transform:rotate(180deg)}
.order-x{padding:4px 16px 20px;display:flex;flex-direction:column;gap:18px}
@media (min-width:960px){.order-sum{padding:0 20px 0 94px}.order-x{padding:4px 20px 24px 94px}}
.kv{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (min-width:768px){.kv{grid-template-columns:repeat(4,minmax(0,1fr))}}
.kv div{display:flex;flex-direction:column;gap:2px;font-size:var(--fs-14)}
.kv dt{font-size:var(--fs-12);color:var(--muted)}
.kv-2{grid-template-columns:minmax(0,1fr)}
@media (min-width:768px){.kv-2{grid-template-columns:repeat(2,minmax(0,1fr))}}
.sub-h{font-size:var(--fs-14);font-weight:600}
.kfs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (min-width:768px){.kfs{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1100px){.kfs{grid-template-columns:repeat(6,minmax(0,1fr))}}
.kf{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.kf img{width:100%;aspect-ratio:9/16;object-fit:contain;border-radius:var(--r-sm);background:var(--surface)}
.kf>.tag{white-space:normal}
.kf-no{font-size:var(--fs-12);color:var(--muted);white-space:nowrap}
.kf .btn{width:100%}
.timeline{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.timeline li{position:relative;display:flex;flex-direction:column;padding:0 0 14px 24px;font-size:var(--fs-14);color:var(--ink-2)}
.timeline li::before{content:"";position:absolute;left:3px;top:7px;width:10px;height:10px;border-radius:50%;background:var(--gold)}
.timeline li::after{content:"";position:absolute;left:7px;top:20px;bottom:0;width:2px;background:var(--line)}
.timeline li:last-child::after{display:none}
.log-time{font-size:var(--fs-12);color:var(--muted)}
.empty{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;padding:48px 20px;border:1px dashed var(--line-2);border-radius:var(--r)}
.empty-ic{width:56px;height:56px;border-radius:50%;background:var(--gold-soft);color:var(--gold);display:flex;align-items:center;justify-content:center}
/* console */
.console{display:grid;gap:20px;grid-template-columns:minmax(0,1fr)}
.span-all{grid-column:1/-1}
@media (min-width:960px){.console{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}}
.console-hero{margin-bottom:8px}
.code{margin:0;padding:16px;border-radius:var(--r-md);background:var(--bg);border:1px solid var(--line);overflow-x:auto;font-family:var(--mono);font-size:var(--fs-14);color:var(--ink-2);line-height:1.6}

/* ---------- shared dialogs and toasts ---------- */
.modal-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:12px}
.toasts{position:fixed;left:0;right:0;bottom:calc(16px + env(safe-area-inset-bottom));z-index:80;display:flex;justify-content:center;padding:0 var(--gutter);pointer-events:none}
.toast{display:flex;align-items:center;gap:10px;max-width:480px;padding:12px 18px;border-radius:var(--r-md);background:var(--surface-2);border:1px solid var(--line-2);font-size:var(--fs-14);color:var(--ink);box-shadow:var(--shadow);pointer-events:auto}
.toast-ok{border-color:var(--ok-line)}
.toast-ok .ic{color:var(--ok)}
.toast-err{border-color:var(--err-line)}
.toast-err .ic{color:var(--err)}

/* ---------- switch, pagination, studio balance, register links ---------- */
.pager{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.pg{display:inline-flex;align-items:center;justify-content:center;min-width:var(--tap);height:var(--tap);padding:0 10px;border-radius:var(--r-pill);border:1px solid var(--line-2);background:transparent;font-size:var(--fs-14);color:var(--ink-2);cursor:pointer}
.pg[aria-current="page"]{background:var(--gold);border-color:var(--gold);color:var(--gold-ink);font-weight:600}
.sum-bal{font-size:var(--fs-14);color:var(--ink-2)}
.sum-bal b{color:var(--ink)}
.legal-links{display:flex;flex-wrap:wrap;gap:0 20px;margin-top:-12px;padding-left:36px}

/* ---------- interaction states: hover, pressed, keyboard focus (above), disabled ---------- */
.site .btn-gold:hover{background:var(--gold-strong)}
.site .btn-gold:active{background:var(--gold-press)}
.site .btn-ghost:hover{border-color:var(--gold-line);color:var(--gold)}
.site .btn-ghost:active{background:var(--surface-2)}
.site .btn-danger:hover{background:var(--err-bg)}
.site .btn-danger:active{background:var(--err-press)}
.icon-btn:hover,.dd-btn:hover,.avatar:hover{border-color:var(--gold-line);color:var(--gold)}
.icon-btn:active,.dd-btn:active{background:var(--surface-2)}
.avatar:active{background:var(--line-2);border-color:var(--gold);color:var(--gold-press)}
.x:hover{background:var(--bg);color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold-line)}
.x:active{background:var(--surface-2);color:var(--gold-press);box-shadow:inset 0 0 0 1px var(--gold)}
.site .brand:hover{color:var(--gold)}
.site .brand:active{color:var(--gold-press)}
.site .foot-a[aria-pressed="true"]{color:var(--gold)}
.site .text-btn:hover,.site .link-arrow:hover,.site .toc-a:hover,.site .foot-a:hover{color:var(--gold-strong);text-decoration:underline;text-underline-offset:4px}
.site .nav-a:hover,.site .drawer-a:hover{color:var(--gold)}
.site .text-btn:active,.site .link-arrow:active,.site .toc-a:active,.site .nav-a:active,.site .foot-a:active,.site .drawer-a:active{color:var(--gold-press)}
.mi:hover{background:var(--surface-2)}
.mi:active{background:var(--line-2)}
.site .credits-pill:hover{border-color:var(--gold)}
.site .credits-pill:active{background:var(--gold-deep)}
.pill:hover,.pill-radio:hover span,.pill-radio span:hover{box-shadow:inset 0 0 0 1px var(--gold-line)}
.pill:active,.pill-radio input:active+span{background:var(--surface-2)}
.seg button[aria-pressed="false"]:hover{color:var(--ink);background:var(--surface-2)}
.seg button[aria-pressed="false"]:active{background:var(--line-2)}
.seg button[aria-pressed="true"]:hover{background:var(--gold-strong)}
.seg button[aria-pressed="true"]:active{background:var(--gold-press)}
.tabs button[aria-selected="false"]:hover{color:var(--ink)}
.tabs button[aria-selected="false"]:active{background:var(--surface)}
.tabs button[aria-selected="true"]:hover{background:var(--line-2)}
.tabs button[aria-selected="true"]:active{background:var(--line)}
.site .ctab:hover{color:var(--ink);background:var(--bg-2)}
.site .ctab:active{background:var(--surface-2)}
.choice-box:hover{border-color:var(--gold-line);box-shadow:inset 0 0 0 1px var(--gold-line)}
.choice input:active+.choice-box{background:var(--surface)}
.check:hover{color:var(--ink)}
.check:active{color:var(--gold-press)}
.check input:hover{box-shadow:0 0 0 3px var(--gold-soft)}
.check input:active{box-shadow:0 0 0 3px var(--gold-line)}
.input:hover{border-color:var(--muted);box-shadow:0 0 0 2px var(--line)}
.input:active{border-color:var(--gold-line);box-shadow:0 0 0 2px var(--gold-soft)}
.drop:hover{border-color:var(--gold);color:var(--ink);box-shadow:inset 0 0 0 1px var(--gold)}
.drop:active{background:var(--surface)}
.pg:hover{border-color:var(--gold-line);color:var(--ink)}
.pg:active{background:var(--surface-2)}
.film:hover{color:var(--gold)}
.film:hover .film-poster{outline:2px solid var(--gold-line);outline-offset:2px}
.film:active{color:var(--gold-press)}
.film:active .film-poster{opacity:.85}
.faq-q:hover,.guide-h:hover,.order-sum:hover{color:var(--gold)}
.faq-q:active,.guide-h:active,.order-sum:active{color:var(--gold-press);background:var(--bg-2)}
.site button:disabled,.site [aria-disabled="true"]{opacity:.4;cursor:not-allowed}
.site a[aria-disabled="true"],.site summary[aria-disabled="true"]{pointer-events:none}
.site .btn:disabled,.site .btn[aria-disabled="true"]{opacity:1;background:var(--surface-2);border-color:var(--line);color:var(--muted)}
.site .btn[aria-busy="true"]{opacity:1;background:var(--gold-soft);border-color:var(--gold-line);color:var(--gold);cursor:progress}
.input:disabled{background:var(--bg-2);border-color:var(--line);color:var(--muted);cursor:not-allowed}
.pill-radio input:disabled+span,.choice input:disabled+.choice-box,.check input:disabled,.check input:disabled+span{opacity:.4;cursor:not-allowed}

/* ---------- 404 and legal pages ---------- */
.notfound{display:flex;flex-direction:column;align-items:flex-start;gap:18px;max-width:760px;padding-top:64px;padding-bottom:96px}
.legal{padding-top:28px;padding-bottom:64px}
.legal-head{max-width:760px;margin-bottom:32px}
.legal-grid{display:grid;gap:32px;grid-template-columns:minmax(0,1fr)}
.toc{display:flex;flex-direction:column;gap:8px}
.toc-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.toc-a{display:flex;align-items:center;min-height:var(--tap);padding-left:12px;border-left:2px solid var(--line);font-size:var(--fs-14);text-decoration:none}
.site .toc-a{color:var(--ink-2)}
.prose{max-width:720px;display:flex;flex-direction:column;gap:36px}
.prose-sec{display:flex;flex-direction:column;gap:12px}
.prose-sec p{font-size:var(--fs-16);color:var(--ink-2);line-height:1.75}
.prose-list{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px;font-size:var(--fs-16);color:var(--ink-2);line-height:1.75}
@media (min-width:960px){.legal{padding-top:56px;padding-bottom:96px}.legal-grid{grid-template-columns:240px minmax(0,1fr);gap:56px}.toc{position:sticky;top:calc(var(--header-h) + 24px);align-self:start}}

/* ---------- component sheet ---------- */

/* ---------- step 2: data-driven pieces ---------- */
.site [hidden]{display:none!important}
html[data-auth="pending"] [data-for-auth]{visibility:hidden}
html[data-auth="pending"] .drawer [data-for-auth],html[data-auth="pending"] .dd-menu [data-for-auth]{display:none}
/* While the login state is unknown the login area holds the guest buttons (invisible), never both sets at once. */
html[data-auth="pending"] .auth [data-for-auth]:not([data-for-auth~="guest"]){display:none}
/* The login area keeps one width whatever it holds, so the header never moves when the login state arrives. */
.auth{width:150px}
@media (min-width:768px){.auth{width:260px}}
@media (min-width:1100px){.auth{width:300px}.brand{min-width:112px}}
.code-btn{min-width:132px}
.banner{position:fixed;left:0;right:0;top:calc(var(--header-h) + env(safe-area-inset-top));z-index:35;background:var(--warn-bg);border-bottom:1px solid var(--warn-line);color:var(--ink)}
.banner[data-state="hidden"]{display:none}
.banner-in{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;min-height:52px;padding-top:4px;padding-bottom:4px;font-size:var(--fs-14)}
.banner-in .ic{color:var(--warn)}
.banner-in>span{flex:1 1 200px}
.toast-err .text-btn{margin-left:4px}
.pg-nums{display:contents}
.pg-total{flex-basis:100%;min-height:1.6em}
@media (min-width:768px){.pg-total{flex-basis:auto;margin-left:8px}}
.prog{display:flex;flex-direction:column;gap:4px;flex:1 0 100%;max-width:220px}
.pbar-track{display:block;height:6px;border-radius:6px;background:var(--line-2);overflow:hidden}
.pbar-fill{display:block;height:100%;width:var(--p,0%);background:var(--gold)}
.kf[data-state="done"]>.tag{background:var(--ok-bg);color:var(--ok)}
.kf[data-state="generating"]>.tag,.kf[data-state="reshooting"]>.tag{background:var(--info-bg);color:var(--info)}
.kf[data-state="qc"]>.tag{background:var(--warn-bg);color:var(--warn)}
.kf[data-state="failed"]>.tag{background:var(--err-bg);color:var(--err)}
.looks{display:grid;grid-template-columns:repeat(2,minmax(0,140px));gap:12px}
.look{margin:0;display:flex;flex-direction:column;gap:6px}
.look img{width:100%;aspect-ratio:9/16;object-fit:contain;border-radius:var(--r-sm);background:var(--surface)}
.skel-clone{pointer-events:none}
.skel-clone .order-row>*,.skel-clone .order-sum>*{visibility:hidden}
.skel-clone .thumb{visibility:visible;opacity:.25}
.skel-num{display:inline-block;width:1.2em;height:20px;vertical-align:middle}
.skel-tr .skel-line{display:inline-block;width:70%;height:1em;vertical-align:middle}
.skel-text{display:inline-block;height:1em;vertical-align:middle}
.site [data-bind="frozen-note"][data-empty]{visibility:hidden}
.order-list:not([data-state="loading"]) [data-when-loading],.ledger-list:not([data-state="loading"]) [data-when-loading],.payments:not([data-state="loading"]) [data-when-loading]{display:none}
.order-list>.pager,.ledger-list>.pager{margin-top:12px}
.order-list[data-state="empty"]>.pager,.order-list[data-state="error"]>.pager,.ledger-list[data-state="empty"]>.pager,.ledger-list[data-state="error"]>.pager{display:none}
.plan[data-selected]{border-color:var(--gold);background:var(--surface)}
.fb-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.fb-item{display:flex;flex-direction:column;gap:6px;padding:14px 16px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--bg)}
.fb-item.skel{flex-direction:column;align-items:stretch;min-height:135px}
@media (min-width:768px){.fb-item.skel{min-height:112px}}
.fb-reply{padding:10px 12px;border-radius:var(--r-sm);background:var(--surface);display:flex;flex-direction:column;gap:2px}
.shot-done{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding:0 14px;border-radius:var(--r-md);border:1px solid var(--line-2);font-size:var(--fs-14)}
.player-box{display:flex;justify-content:center}
.span-all{grid-column:1/-1}
.pay-plan{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;padding:12px 14px;border-radius:var(--r-md);background:var(--bg);border:1px solid var(--line)}
.pay-body{display:flex;flex-direction:column;gap:14px}
.pay-method{flex-direction:row;align-items:center;gap:10px}
.pay-qr{width:220px;height:220px;padding:10px;border-radius:var(--r-md);background:var(--on-media);color:var(--gold-ink)}
.pay-qr svg{width:100%;height:100%}
.pay-result{margin-bottom:16px}
.pay-result[data-state="hidden"]{display:none}
/* ---------- back office (/admin, /agent): v6 design, every rule under .bo-page (only the two back-office pages) ---------- */
.bo-page .bo-main{width:100%;max-width:1440px;margin:0 auto;padding:20px max(var(--gutter), env(safe-area-inset-right)) 48px max(var(--gutter), env(safe-area-inset-left))}
/* At least one screen tall: the footer stays below the fold whether the page shows its content or "no access", so
   changing between them (a login hint that guessed wrong, e.g. a disabled agent's "user") moves nothing in view (V6-1). */
.bo-page .bo-main{min-height:100vh}
.bo-page .bo-head{display:flex;align-items:flex-end;justify-content:space-between;gap:8px 16px;margin-bottom:16px}
.bo-page .bo-head>.stack-sm{flex:1;min-width:0}
.bo-page .bo-head p{min-height:1lh}
.bo-page .pill .count{display:inline-block;min-width:2ch;font-variant-numeric:tabular-nums}
.bo-page .bo-sec{display:flex;flex-direction:column;gap:12px;margin-bottom:28px}
.bo-page .bo-sec-h{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px}
.bo-page .bo-grid{display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}
.bo-page .scards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.bo-page .scard{display:flex;flex-direction:column;gap:2px;min-width:0;padding:14px 16px;border-radius:var(--r-md);background:var(--bg-2);border:1px solid var(--line);text-decoration:none;color:var(--ink)}
.bo-page .scard-l{font-size:var(--fs-14);color:var(--muted)}
.bo-page .scard-v{font-size:clamp(20px,6vw,var(--fs-28));font-weight:700;line-height:1.2;font-variant-numeric:tabular-nums}
.bo-page .scard-s{font-size:var(--fs-14);color:var(--muted)}
.bo-page .scard-alert{border-color:var(--err-line);background:var(--err-bg)}
.bo-page .scard-alert .scard-v{color:var(--err)}
.bo-page .scard-link{cursor:pointer;text-decoration:none}
.bo-page .scard-v{overflow-wrap:anywhere}
.bo-page .svc{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px}
.bo-page .svc .status{white-space:nowrap}
.bo-page .status[data-tone="err"]{color:var(--err)}
.bo-page .tag-ok{background:var(--ok-bg);color:var(--ok)}
.bo-page .tag-warn{background:var(--warn-bg);color:var(--warn)}
.bo-page .tag-err{background:var(--err-bg);color:var(--err)}
.bo-page .mono{font-family:var(--mono);font-size:var(--fs-14)}
.bo-page .filterbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.bo-page .filterbar .search{flex:1 1 220px;max-width:420px}
.bo-page .filter-body{display:none;flex-basis:100%;flex-wrap:wrap;gap:8px}
.bo-page .filterbar[data-state="open"] .filter-body{display:flex}
.bo-page .dblock{display:flex;flex-direction:column;gap:12px}
.bo-page .tbl-compact{min-width:760px}
.bo-page .tbl-compact th,.bo-page .tbl-compact td{padding:10px 12px;white-space:nowrap;vertical-align:middle}
.bo-page .tbl-compact tbody td{height:66px}
.bo-page .tbl .tbl-wrap{white-space:normal;min-width:180px;max-width:360px}
.bo-page .tbl .tbl-wrap>span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bo-page .tbl .num{text-align:right;font-variant-numeric:tabular-nums}
.bo-page .tbl-sticky th:first-child,.bo-page .tbl-sticky td:first-child{position:sticky;left:0;z-index:1;background:var(--bg)}
.bo-page .tbl-sticky thead th:first-child{background:var(--bg-2)}
.bo-page .sheet .tbl-sticky td:first-child{background:var(--bg-2)}
.bo-page .skel-tr .skel-line{display:block;width:70%;height:14px}
.bo-page .cell-link{display:inline-flex;align-items:center;min-height:var(--tap);padding:0;border:0;background:none;font:inherit;font-weight:600;text-align:left;cursor:pointer;color:var(--gold)}
.bo-page .invite-cell{display:inline-flex;align-items:center;gap:8px}
.bo-page .pager-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px}
.bo-page .empty-sm{padding:28px 16px}
.bo-page [data-state="loading"] .sk{display:inline-block;min-height:1em;vertical-align:-0.15em;color:transparent;background:var(--surface-2);border-radius:var(--r-sm);min-width:5ch}
.bo-page [data-state="loading"] .sk *{visibility:hidden}
.bo-page [data-state="loading"] :is(.scard-s,.rules-line) .sk{min-width:2ch}
.bo-page .sheet{position:fixed;inset:0;z-index:55;display:flex;justify-content:flex-end}
.bo-page .sheet[data-state="closed"]{display:none}
.bo-page .sheet-scrim{position:absolute;inset:0;background:var(--scrim)}
.bo-page .sheet-panel{position:relative;display:flex;flex-direction:column;width:100%;height:100%;overflow-y:auto;background:var(--bg-2);padding-bottom:calc(24px + env(safe-area-inset-bottom))}
.bo-page .sheet-h h2{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bo-page .kv .kv-wide{grid-column:1/-1}
.bo-page .sheet-h{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:calc(10px + env(safe-area-inset-top)) 16px 10px;background:var(--bg-2);border-bottom:1px solid var(--line)}
.bo-page .sheet-b{display:flex;flex-direction:column;gap:20px;padding:16px}
.bo-page .sheet-b .ctabs{margin:0;padding:0}
.bo-page .sheet-pad{padding:16px}
.bo-page .ops{display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}
/* The user drawer's agent part: a form for a user who can be made an agent, a note for anyone else. Both sit in one grid
   cell and the one not shown is only invisible, so the part has the same height before and after the user loads (V6-1). */
.bo-page .agent-ops{display:grid}
.bo-page .agent-ops[data-state]>[data-when]{display:flex;grid-area:1/1;visibility:hidden}
.bo-page .agent-ops[data-state="can"]>[data-when~="can"],.bo-page .agent-ops[data-state="agent"]>[data-when~="agent"],
.bo-page .agent-ops[data-state="admin"]>[data-when~="admin"],.bo-page .agent-ops[data-state="member"]>[data-when~="member"]{visibility:visible}
.bo-page .counter{font-size:var(--fs-14);color:var(--muted)}
.bo-page .counter[data-state="bad"]{color:var(--err)}
.bo-page .err-text{font-size:var(--fs-14);color:var(--err)}
.bo-page .agent-state:not([data-state="disabled"]) .transfer-off{display:none}
.bo-page .textarea-lg{min-height:360px;font-family:var(--mono);line-height:1.7}
.bo-page .temp-pw{display:flex;align-items:center;gap:8px;padding:12px;border-radius:var(--r-sm);background:var(--bg);border:1px dashed var(--gold-line)}
.bo-page .temp-pw-v{flex:1;min-width:0;font-family:var(--mono);font-size:var(--fs-20);letter-spacing:.08em;overflow-wrap:anywhere}
.bo-page .modal-card-lg{max-width:640px}
.bo-page .denied{display:flex;flex-direction:column;align-items:flex-start;gap:16px;max-width:640px;padding:48px 0 72px}
.bo-page .invite-box{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.bo-page .invite-url{flex:1 1 280px;min-width:0;padding:12px 14px;border-radius:var(--r-sm);background:var(--bg);border:1px solid var(--line-2);font-family:var(--mono);font-size:var(--fs-14);line-height:22px;height:48px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bo-page .shot-btn{display:block;width:32px;min-height:var(--tap);padding:0;border:0;border-radius:6px;background:var(--surface);cursor:pointer}
.bo-page .shot-btn img{width:32px;height:auto;aspect-ratio:9/16;object-fit:contain;border-radius:6px}
.bo-page .tbl-shots{min-width:0}
.bo-page .tbl-shots tbody td{height:auto}
.bo-page .tbl-shots .tbl-wrap{min-width:120px;max-width:220px}
.bo-page .shot-no{display:inline-flex;align-items:center;gap:8px}
.bo-page .shot-ops{display:inline-flex;gap:6px}
.bo-page .shot-ops .btn{padding:0 12px}
.bo-page .zoom{display:block;width:100%;padding:0;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--bg);cursor:zoom-in}
.bo-page .zoom img{width:100%;height:auto;max-height:180px;object-fit:contain}
.bo-page .zoom[data-state="in"]{cursor:zoom-out}
.bo-page .zoom[data-state="in"] img{max-height:none}
.bo-page .cost-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px}
.bo-page .cost[data-state="warn"] .cost-total{color:var(--warn)}
.bo-page .cost-total{font-weight:700}
.bo-page .log-who,.bo-page .log-change{font-size:var(--fs-14);color:var(--muted)}
.bo-page .media-gone{display:flex;align-items:center;justify-content:center;min-height:120px;padding:16px;border:1px dashed var(--line-2);border-radius:var(--r-sm);font-size:var(--fs-14);color:var(--muted);text-align:center}
.bo-page .media-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,128px));gap:10px}
.bo-page .media{margin:0;display:flex;flex-direction:column;gap:6px}
.bo-page .media-img{display:flex;align-items:center;justify-content:center;aspect-ratio:9/16;border-radius:var(--r-sm);background:var(--surface);overflow:hidden}
.bo-page .media-img img{width:100%;height:100%;object-fit:contain}
.bo-page .media figcaption{min-height:1.5em}
.bo-page .media .skel-line{display:block;width:70%}
.bo-page .pre{margin:0;padding:12px;border-radius:var(--r-sm);background:var(--bg);border:1px solid var(--line);font-family:var(--ui);font-size:var(--fs-14);color:var(--ink-2);white-space:pre-wrap;max-height:320px;overflow:auto}
.bo-page .qc-severe td:first-child{box-shadow:inset 3px 0 0 var(--err)}
.bo-page .qc-minor td:first-child{box-shadow:inset 3px 0 0 var(--warn)}
.bo-page .scard-link:hover{border-color:var(--gold-line)}
.bo-page .scard-link:active{background:var(--surface-2)}
.bo-page .scard-alert:hover{border-color:var(--err)}
.bo-page .scard-alert:active{background:var(--err-press)}
.bo-page .cell-link:hover{color:var(--gold-strong);text-decoration:underline;text-underline-offset:4px}
.bo-page .cell-link:active{color:var(--gold-press)}
.bo-page .shot-btn:hover{outline:2px solid var(--gold-line);outline-offset:2px}
.bo-page .shot-btn:active{opacity:.8}
.bo-page .zoom:hover{border-color:var(--gold-line)}
.bo-page .zoom:active{background:var(--surface)}
@media (min-width:768px){.bo-page .scards{grid-template-columns:repeat(3,minmax(0,1fr))}.bo-page .filter-toggle{display:none}.bo-page .filter-body{display:flex;flex-basis:auto}.bo-page .sheet-b{padding:20px 24px}.bo-page .sheet-h{padding-left:24px;padding-right:24px}.bo-page .sheet-pad{padding:20px 24px}.bo-page .bo-main{padding-top:36px;padding-bottom:72px}}
@media (min-width:960px){.bo-page .sheet-panel{width:min(920px, 92vw);border-left:1px solid var(--line-2)}.bo-page .ops{grid-template-columns:repeat(2,minmax(0,1fr))}.bo-page .bo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.bo-page .scards{grid-template-columns:repeat(6,minmax(0,1fr))}.bo-page .sheet-panel{width:min(1180px, 92vw)}}
/* states:begin (written by tools/css_states.py from the built pages) */
[data-state="active"]>[data-when]:not([data-when~="active"]){display:none}
[data-state="admin"]>[data-when]:not([data-when~="admin"]){display:none}
[data-state="agent"]>[data-when]:not([data-when~="agent"]){display:none}
[data-state="agents"]>[data-when]:not([data-when~="agents"]){display:none}
[data-state="basic"]>[data-when]:not([data-when~="basic"]){display:none}
[data-state="binds"]>[data-when]:not([data-when~="binds"]){display:none}
[data-state="blocked"]>[data-when]:not([data-when~="blocked"]){display:none}
[data-state="blocks"]>[data-when]:not([data-when~="blocks"]){display:none}
[data-state="can"]>[data-when]:not([data-when~="can"]){display:none}
[data-state="changes"]>[data-when]:not([data-when~="changes"]){display:none}
[data-state="checking"]>[data-when]:not([data-when~="checking"]){display:none}
[data-state="choose"]>[data-when]:not([data-when~="choose"]){display:none}
[data-state="closed"]>[data-when]:not([data-when~="closed"]){display:none}
[data-state="cost"]>[data-when]:not([data-when~="cost"]){display:none}
[data-state="creating"]>[data-when]:not([data-when~="creating"]){display:none}
[data-state="denied"]>[data-when]:not([data-when~="denied"]){display:none}
[data-state="disabled"]>[data-when]:not([data-when~="disabled"]){display:none}
[data-state="done"]>[data-when]:not([data-when~="done"]){display:none}
[data-state="down"]>[data-when]:not([data-when~="down"]){display:none}
[data-state="empty"]>[data-when]:not([data-when~="empty"]){display:none}
[data-state="error"]>[data-when]:not([data-when~="error"]){display:none}
[data-state="expired"]>[data-when]:not([data-when~="expired"]){display:none}
[data-state="failed"]>[data-when]:not([data-when~="failed"]){display:none}
[data-state="feedback"]>[data-when]:not([data-when~="feedback"]){display:none}
[data-state="files"]>[data-when]:not([data-when~="files"]){display:none}
[data-state="generating"]>[data-when]:not([data-when~="generating"]){display:none}
[data-state="gone"]>[data-when]:not([data-when~="gone"]){display:none}
[data-state="guest"]>[data-when]:not([data-when~="guest"]){display:none}
[data-state="hidden"]>[data-when]:not([data-when~="hidden"]){display:none}
[data-state="idle"]>[data-when]:not([data-when~="idle"]){display:none}
[data-state="in-wechat"]>[data-when]:not([data-when~="in-wechat"]){display:none}
[data-state="ledger"]>[data-when]:not([data-when~="ledger"]){display:none}
[data-state="loading"]>[data-when]:not([data-when~="loading"]){display:none}
[data-state="login"]>[data-when]:not([data-when~="login"]){display:none}
[data-state="member"]>[data-when]:not([data-when~="member"]){display:none}
[data-state="members"]>[data-when]:not([data-when~="members"]){display:none}
[data-state="monthly"]>[data-when]:not([data-when~="monthly"]){display:none}
[data-state="need-login"]>[data-when]:not([data-when~="need-login"]){display:none}
[data-state="no-credits"]>[data-when]:not([data-when~="no-credits"]){display:none}
[data-state="none"]>[data-when]:not([data-when~="none"]){display:none}
[data-state="normal"]>[data-when]:not([data-when~="normal"]){display:none}
[data-state="not-apparel"]>[data-when]:not([data-when~="not-apparel"]){display:none}
[data-state="off"]>[data-when]:not([data-when~="off"]){display:none}
[data-state="ok"]>[data-when]:not([data-when~="ok"]){display:none}
[data-state="on"]>[data-when]:not([data-when~="on"]){display:none}
[data-state="ops"]>[data-when]:not([data-when~="ops"]){display:none}
[data-state="orders"]>[data-when]:not([data-when~="orders"]){display:none}
[data-state="overview"]>[data-when]:not([data-when~="overview"]){display:none}
[data-state="pack"]>[data-when]:not([data-when~="pack"]){display:none}
[data-state="pass"]>[data-when]:not([data-when~="pass"]){display:none}
[data-state="payments"]>[data-when]:not([data-when~="payments"]){display:none}
[data-state="pending"]>[data-when]:not([data-when~="pending"]){display:none}
[data-state="pending-confirm"]>[data-when]:not([data-when~="pending-confirm"]){display:none}
[data-state="qc"]>[data-when]:not([data-when~="qc"]){display:none}
[data-state="qr"]>[data-when]:not([data-when~="qr"]){display:none}
[data-state="ready"]>[data-when]:not([data-when~="ready"]){display:none}
[data-state="redirecting"]>[data-when]:not([data-when~="redirecting"]){display:none}
[data-state="register"]>[data-when]:not([data-when~="register"]){display:none}
[data-state="rejects"]>[data-when]:not([data-when~="rejects"]){display:none}
[data-state="reset"]>[data-when]:not([data-when~="reset"]){display:none}
[data-state="rules"]>[data-when]:not([data-when~="rules"]){display:none}
[data-state="sending"]>[data-when]:not([data-when~="sending"]){display:none}
[data-state="submitted"]>[data-when]:not([data-when~="submitted"]){display:none}
[data-state="submitting"]>[data-when]:not([data-when~="submitting"]){display:none}
[data-state="success"]>[data-when]:not([data-when~="success"]){display:none}
[data-state="unavailable"]>[data-when]:not([data-when~="unavailable"]){display:none}
[data-state="uncertain"]>[data-when]:not([data-when~="uncertain"]){display:none}
[data-state="uploading"]>[data-when]:not([data-when~="uploading"]){display:none}
[data-state="uploads"]>[data-when]:not([data-when~="uploads"]){display:none}
[data-state="users"]>[data-when]:not([data-when~="users"]){display:none}
[data-state="violation"]>[data-when]:not([data-when~="violation"]){display:none}
[data-state="wallet"]>[data-when]:not([data-when~="wallet"]){display:none}
html[data-auth="guest"] [data-for-auth]:not([data-for-auth~="guest"]){display:none}
html[data-auth="user"] [data-for-auth]:not([data-for-auth~="user"]){display:none}
html[data-auth="agent"] [data-for-auth]:not([data-for-auth~="agent"]){display:none}
html[data-auth="admin"] [data-for-auth]:not([data-for-auth~="admin"]){display:none}
.order[data-state="awaiting-confirm"] [data-for-state]:not([data-for-state~="awaiting-confirm"]){display:none}
.order[data-state="canceled"] [data-for-state]:not([data-for-state~="canceled"]){display:none}
.order[data-state="delivered"] [data-for-state]:not([data-for-state~="delivered"]){display:none}
.order[data-state="expired"] [data-for-state]:not([data-for-state~="expired"]){display:none}
.order[data-state="failed"] [data-for-state]:not([data-for-state~="failed"]){display:none}
.order[data-state="generating"] [data-for-state]:not([data-for-state~="generating"]){display:none}
.order[data-state="qc"] [data-for-state]:not([data-for-state~="qc"]){display:none}
.order[data-state="queued"] [data-for-state]:not([data-for-state~="queued"]){display:none}
.order[data-state="submitted"] [data-for-state]:not([data-for-state~="submitted"]){display:none}
/* states:end */

/* ---------- reduced motion: no transitions or movement, and the spinner becomes a still ring ---------- */
@media (prefers-reduced-motion:reduce){.site *,.site *::before,.site *::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}.spin{border-style:dotted;border-color:currentColor}.phone .ph-motion{display:none}}