/* ============================================================
   DEMAN PLAY · page components — hero / how / discord / order / profile / boss / join
   ============================================================ */

/* ---------- soft grid texture ---------- */
.grid-tex{ position:absolute; inset:0; opacity:.55; pointer-events:none;
  background-image:linear-gradient(color-mix(in oklab,var(--text) 5%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in oklab,var(--text) 5%,transparent) 1px,transparent 1px);
  background-size:44px 44px; mask:radial-gradient(900px 520px at 60% 30%,#000,transparent 78%); }

/* ============================================================ HERO */
.hero{ padding:70px 0 40px; position:relative; overflow:hidden; }
.hero .inner{ position:relative; display:grid; grid-template-columns:1.08fr .92fr; gap:50px; align-items:center; }
.hero .ebrow{ display:inline-flex; margin-bottom:22px; }
.hero h1{ font-family:var(--cn); font-weight:900; font-size:clamp(34px,5.2vw,62px); letter-spacing:-.03em; line-height:1.04; }
.hero h1 .hl{ position:relative; white-space:nowrap; }
.hero h1 .hl::after{ content:""; position:absolute; left:-2%; right:-2%; bottom:.06em; height:.34em; border-radius:6px; z-index:-1;
  background:linear-gradient(90deg,color-mix(in oklab,var(--a-mint) 70%,transparent),color-mix(in oklab,var(--a-cyan) 70%,transparent)); }
.hero p.lead{ color:var(--text-dim); font-size:18px; max-width:520px; margin:22px 0 30px; text-wrap:pretty; }
.hero .cta-row{ display:flex; gap:13px; flex-wrap:wrap; align-items:center; }
.hero .trust{ display:flex; align-items:center; gap:14px; margin-top:26px; font-family:var(--cn); font-size:13.5px; color:var(--text-mute); flex-wrap:wrap; }
.hero .trust .avstack{ display:flex; }
.hero .trust .avstack .av{ width:34px; height:34px; font-size:13px; margin-left:-10px; border:2.5px solid var(--bg); }
.hero .trust .avstack .av:first-child{ margin-left:0; }

/* hero visual: floating live cards */
.hero-visual{ position:relative; }
.hero-stage{ position:relative; aspect-ratio:5/5.4; border-radius:30px; overflow:hidden; border:1.5px solid var(--line);
  background:
    radial-gradient(120% 80% at 80% 10%, color-mix(in oklab,var(--v-bright) 30%,transparent), transparent 60%),
    radial-gradient(120% 90% at 10% 90%, color-mix(in oklab,var(--a-cyan) 28%,transparent), transparent 60%),
    var(--surface-2); box-shadow:var(--shadow); }
.hero-stage .grid-tex{ opacity:.5; mask:none; }
.hero-stage image-slot{ position:absolute; inset:0; width:100%; height:100%; }
.float-card{ position:absolute; background:color-mix(in oklab,var(--surface) 88%,transparent); border:1.5px solid var(--line); border-radius:16px; padding:13px 15px; box-shadow:var(--shadow-sm); backdrop-filter:blur(10px); animation:floaty 5s ease-in-out infinite; }
@keyframes floaty{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-9px); } }
.float-card.fc1{ top:24px; left:-22px; animation-delay:.2s; }
.float-card.fc2{ bottom:96px; right:-26px; animation-delay:1.1s; }
.float-card.fc3{ bottom:18px; left:14px; animation-delay:.6s; }
.float-card .fcr{ display:flex; align-items:center; gap:10px; }
.float-card .fl{ font-family:var(--mono); font-size:10.5px; color:var(--text-mute); letter-spacing:.04em; }
.float-card .fn{ font-family:var(--display); font-style:italic; font-weight:800; font-size:18px; }
.float-card .fn.pos{ color:var(--ok); }

/* stat strip */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:54px; }
.stat{ background:var(--card-grad); border:1.5px solid var(--line); border-radius:var(--r); padding:24px 22px; }
.stat .num{ font-family:var(--display); font-style:italic; font-weight:800; font-size:clamp(30px,3.4vw,42px); letter-spacing:-.01em; line-height:1; color:var(--v-signature); }
html[data-theme="dark"] .stat .num{ color:var(--v-bright); }
.stat .num.alt{ color:var(--a-coral); }
.stat .num.alt2{ color:var(--a-mint); }
.stat .num.alt3{ color:var(--a-cyan); }
.stat .lab{ font-family:var(--cn); font-size:13.5px; color:var(--text-dim); margin-top:9px; }

/* ============================================================ HOW IT WORKS */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; counter-reset:step; }
.step{ background:var(--card-grad); border:1.5px solid var(--line); border-radius:var(--r); padding:28px 24px; position:relative; transition:.22s; }
.step:hover{ transform:translateY(-4px); border-color:var(--v-signature); box-shadow:var(--shadow-sm); }
.step .sicon{ width:52px; height:52px; border-radius:16px; display:grid; place-items:center; margin-bottom:18px; color:#fff; }
.step .sicon svg{ width:26px; height:26px; }
.step:nth-child(1) .sicon{ background:linear-gradient(135deg,var(--v-bright),var(--v-deep)); }
.step:nth-child(2) .sicon{ background:linear-gradient(135deg,var(--a-cyan),oklch(0.6 0.15 240)); }
.step:nth-child(3) .sicon{ background:linear-gradient(135deg,var(--a-mint),oklch(0.62 0.15 168)); }
.step:nth-child(4) .sicon{ background:linear-gradient(135deg,var(--a-coral),oklch(0.62 0.18 22)); }
.step .snum{ position:absolute; top:22px; right:24px; font-family:var(--display); font-style:italic; font-weight:800; font-size:34px; color:var(--line); }
.step h3{ font-family:var(--cn); font-weight:800; font-size:19px; letter-spacing:-.01em; }
.step p{ font-family:var(--cn); font-size:14px; color:var(--text-dim); margin-top:8px; }

/* order modes (3 ways to order) */
.modes{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.mode{ border:1.5px solid var(--line); border-radius:var(--r); padding:26px; background:var(--card-grad); transition:.22s; display:flex; flex-direction:column; gap:8px; }
.mode:hover{ border-color:var(--v-signature); transform:translateY(-4px); box-shadow:var(--shadow-sm); }
.mode .mh{ display:flex; align-items:center; gap:11px; }
.mode .mtag{ font-family:var(--mono); font-size:11px; color:var(--text-mute); letter-spacing:.08em; }
.mode h3{ font-family:var(--cn); font-weight:800; font-size:20px; }
.mode p{ font-family:var(--cn); font-size:14px; color:var(--text-dim); margin-top:2px; }
.mode .mkey{ display:grid; place-items:center; width:46px; height:46px; border-radius:13px; background:color-mix(in oklab,var(--v-signature) 14%,var(--surface)); color:var(--v-signature); flex:none; }
.mode .mkey svg{ width:24px; height:24px; }

/* ============================================================ DISCORD ECOSYSTEM */
.disc{ display:grid; grid-template-columns:1.15fr .85fr; gap:20px; }
.disc-panel{ border:1.5px solid var(--line); border-radius:var(--r); background:var(--card-grad); overflow:hidden; }
.disc-panel .dphead{ display:flex; align-items:center; gap:11px; padding:18px 22px; border-bottom:1px solid var(--line-soft); }
.disc-panel .dphead .dico{ width:34px; height:34px; border-radius:10px; display:grid; place-items:center; background:#5865F2; color:#fff; }
.disc-panel .dphead .dico svg{ width:20px; height:20px; }
.disc-panel .dphead .dn{ font-family:var(--cn); font-weight:800; font-size:16px; }
.disc-panel .dphead .dm{ font-family:var(--mono); font-size:11px; color:var(--text-mute); margin-top:1px; }
.disc-panel .dphead .status{ margin-left:auto; }
.chanlist{ padding:10px 12px; display:flex; flex-direction:column; gap:1px; max-height:340px; overflow:auto; }
.chan{ display:flex; align-items:center; gap:9px; padding:9px 12px; border-radius:10px; font-family:var(--cn); font-size:14px; color:var(--text-dim); transition:.15s; }
.chan:hover{ background:var(--surface-2); color:var(--text); }
.chan .hash{ font-family:var(--mono); color:var(--text-mute); font-size:15px; }
.chan.voice .hash{ color:var(--ok); }
.chan .cn-on{ margin-left:auto; font-family:var(--mono); font-size:11px; color:var(--text-mute); }
.chan.voice .cn-on{ color:var(--ok); }
.chan .cat{ font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-mute); padding:14px 4px 6px; }

.roles-side{ display:flex; flex-direction:column; gap:16px; }
.roles-box{ border:1.5px solid var(--line); border-radius:var(--r); background:var(--card-grad); padding:22px; }
.roles-box h4{ font-family:var(--cn); font-weight:800; font-size:15px; margin-bottom:6px; }
.roles-box .rl{ font-family:var(--cn); font-size:13px; color:var(--text-dim); margin-bottom:14px; }
.roles-box .rolewrap{ display:flex; flex-wrap:wrap; gap:8px; }
.sync-note{ display:flex; gap:11px; align-items:flex-start; border:1.5px dashed color-mix(in oklab,var(--v-signature) 40%,var(--line)); border-radius:var(--r); padding:16px 18px; background:color-mix(in oklab,var(--v-signature) 6%,var(--surface)); }
.sync-note svg{ width:22px; height:22px; color:var(--v-signature); flex:none; margin-top:1px; }
.sync-note .sn-t{ font-family:var(--cn); font-weight:700; font-size:13.5px; }
.sync-note .sn-d{ font-family:var(--cn); font-size:12.5px; color:var(--text-dim); margin-top:3px; }
.sync-note code{ font-family:var(--mono); font-size:11.5px; background:var(--surface-2); padding:1px 6px; border-radius:5px; color:var(--v-signature); }

/* ============================================================ GAMES strip */
.games-row{ display:grid; grid-template-columns:repeat(6,1fr); gap:14px; }
.gtile{ aspect-ratio:3/4; border-radius:var(--r-sm); overflow:hidden; position:relative; border:1.5px solid var(--line); cursor:pointer; transition:.22s; display:flex; flex-direction:column; justify-content:flex-end; padding:14px; }
.gtile:hover{ transform:translateY(-5px); box-shadow:var(--shadow-sm); }
.gtile .gfx{ position:absolute; inset:0; background:var(--g-grad,linear-gradient(160deg,var(--v-bright),var(--v-deep))); }
.gtile .gfx::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent,oklch(0.15 0.02 296/.7)); }
.gtile .gn{ position:relative; font-family:var(--cn); font-weight:800; font-size:15px; color:#fff; letter-spacing:-.01em; }
.gtile .gc{ position:relative; font-family:var(--mono); font-size:11px; color:oklch(1 0 0/.8); margin-top:2px; }

/* ============================================================ JOIN BAND (cta) */
.joinband{ position:relative; border-radius:30px; overflow:hidden; border:1.5px solid var(--line); padding:70px 56px; text-align:center;
  background:linear-gradient(135deg, color-mix(in oklab,var(--v-bright) 22%,var(--surface)), color-mix(in oklab,var(--a-cyan) 16%,var(--surface)) 70%); }
.joinband .jmark{ font-family:var(--display); font-style:italic; font-weight:900; font-size:clamp(40px,7vw,82px); line-height:1; margin-bottom:18px; color:var(--v-signature); position:relative; }
html[data-theme="dark"] .joinband .jmark{ color:var(--v-bright); }
.joinband h2{ font-family:var(--cn); font-weight:800; font-size:clamp(24px,3vw,36px); position:relative; margin-bottom:14px; }
.joinband p{ font-family:var(--cn); color:var(--text-dim); max-width:560px; margin:0 auto 30px; position:relative; }
.joinband .cta-row{ display:flex; gap:13px; justify-content:center; flex-wrap:wrap; position:relative; }

/* ============================================================ BROWSE page */
.browse{ display:grid; grid-template-columns:264px 1fr; gap:28px; align-items:start; padding:36px 0 0; }
.filters{ position:sticky; top:90px; border:1.5px solid var(--line); border-radius:var(--r); background:var(--card-grad); padding:6px; max-height:calc(100vh - 110px); overflow:auto; }
.fgroup{ border-bottom:1px solid var(--line-soft); padding:16px 16px; }
.fgroup:last-child{ border-bottom:0; }
.fgroup h4{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-mute); margin-bottom:13px; }
.fopts{ display:flex; flex-wrap:wrap; gap:7px; }
.fopt{ font-family:var(--cn); font-weight:600; font-size:12.5px; padding:7px 12px; border-radius:999px; border:1.5px solid var(--line); background:var(--surface); color:var(--text-dim); cursor:pointer; transition:.16s; user-select:none; }
.fopt:hover{ border-color:var(--v-signature); color:var(--v-signature); }
.fopt.on{ background:var(--v-signature); border-color:var(--v-signature); color:#fff; }
.fopt.on.a-coral{ background:var(--a-coral); border-color:var(--a-coral); }
.browse-main{ min-width:0; }
.btoolbar{ display:flex; align-items:center; gap:14px; margin-bottom:22px; flex-wrap:wrap; }
.search{ flex:1; min-width:200px; position:relative; }
.search svg{ position:absolute; left:15px; top:50%; transform:translateY(-50%); width:17px; height:17px; color:var(--text-mute); }
.search input{ width:100%; font-family:var(--cn); font-size:14px; padding:13px 16px 13px 42px; border-radius:999px; border:1.5px solid var(--line); background:var(--surface); color:var(--text); outline:none; transition:.18s; }
.search input:focus{ border-color:var(--v-signature); box-shadow:0 0 0 4px color-mix(in oklab,var(--v-signature) 14%,transparent); }
.sortsel{ font-family:var(--hud); font-weight:700; font-size:13px; padding:12px 16px; border-radius:999px; border:1.5px solid var(--line); background:var(--surface); color:var(--text); cursor:pointer; }
.bcount{ font-family:var(--mono); font-size:12.5px; color:var(--text-mute); margin-bottom:18px; }
.bcount b{ color:var(--v-signature); }

/* ============================================================ ORDER DRAWER */
.modal-bg{ position:fixed; inset:0; z-index:300; background:oklch(0.2 0.03 296/.5); backdrop-filter:blur(6px); opacity:0; pointer-events:none; transition:.25s; }
.modal-bg.open{ opacity:1; pointer-events:auto; }
.order{ position:fixed; top:0; right:0; bottom:0; z-index:301; width:min(460px,94vw); background:var(--bg); border-left:1.5px solid var(--line);
  transform:translateX(100%); transition:transform .34s cubic-bezier(.4,0,.2,1); overflow-y:auto; box-shadow:var(--shadow); display:flex; flex-direction:column; }
.order.open{ transform:translateX(0); }
.order .ohead{ padding:22px 24px; border-bottom:1px solid var(--line-soft); display:flex; align-items:center; gap:13px; position:sticky; top:0; background:color-mix(in oklab,var(--bg) 90%,transparent); backdrop-filter:blur(10px); z-index:2; }
.order .ohead .who{ min-width:0; }
.order .ohead .nm{ font-family:var(--cn); font-weight:800; font-size:17px; }
.order .ohead .hd{ font-family:var(--mono); font-size:11.5px; color:var(--text-mute); }
.order .oclose{ margin-left:auto; }
.order .obody{ padding:22px 24px; display:flex; flex-direction:column; gap:24px; flex:1; }
.ofield h5{ font-family:var(--cn); font-weight:700; font-size:13.5px; margin-bottom:11px; display:flex; align-items:center; gap:8px; }
.ofield h5 .req{ color:var(--a-coral); }
.opts{ display:flex; flex-wrap:wrap; gap:9px; }
.oopt{ font-family:var(--cn); font-weight:600; font-size:13.5px; padding:11px 16px; border-radius:13px; border:1.5px solid var(--line); background:var(--surface); cursor:pointer; transition:.16s; display:flex; align-items:center; gap:8px; }
.oopt:hover{ border-color:var(--v-signature); }
.oopt.on{ border-color:var(--v-signature); background:color-mix(in oklab,var(--v-signature) 12%,var(--surface)); color:var(--v-signature); }
.oopt .op{ font-family:var(--mono); font-size:11px; color:var(--text-mute); }
.oopt.on .op{ color:var(--v-signature); }
.stepper{ display:inline-flex; align-items:center; gap:0; border:1.5px solid var(--line); border-radius:13px; overflow:hidden; }
.stepper button{ width:46px; height:46px; border:0; background:var(--surface); color:var(--text); font-size:20px; cursor:pointer; transition:.15s; }
.stepper button:hover{ background:var(--surface-2); color:var(--v-signature); }
.stepper .qty{ width:58px; text-align:center; font-family:var(--display); font-style:italic; font-weight:800; font-size:22px; }
.ofield textarea{ width:100%; font-family:var(--cn); font-size:13.5px; padding:13px; border-radius:13px; border:1.5px solid var(--line); background:var(--surface); color:var(--text); outline:none; resize:vertical; min-height:72px; }
.ofield textarea:focus{ border-color:var(--v-signature); }
.osum{ border-top:1px solid var(--line-soft); padding:18px 24px 24px; background:var(--surface-2); position:sticky; bottom:0; }
.osum .row{ display:flex; justify-content:space-between; align-items:center; font-family:var(--cn); font-size:13.5px; color:var(--text-dim); margin-bottom:8px; }
.osum .row.total{ font-size:15px; color:var(--text); font-weight:700; margin-top:12px; padding-top:12px; border-top:1px dashed var(--line); }
.osum .row.total .v{ font-family:var(--display); font-style:italic; font-weight:800; font-size:30px; color:var(--v-signature); }
html[data-theme="dark"] .osum .row.total .v{ color:var(--v-bright); }
.osum .btn{ width:100%; margin-top:8px; }

/* toast */
.toast{ position:fixed; left:50%; bottom:30px; transform:translateX(-50%) translateY(20px); z-index:400; background:var(--text); color:var(--bg);
  font-family:var(--cn); font-weight:600; font-size:14px; padding:14px 22px; border-radius:999px; box-shadow:var(--shadow); opacity:0; pointer-events:none; transition:.3s; display:flex; align-items:center; gap:10px; }
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.toast svg{ width:18px; height:18px; color:var(--ok); }

/* ============================================================ PROFILE page */
.phero{ position:relative; }
.phero .pcover{ height:240px; border-radius:0 0 var(--r) var(--r); overflow:hidden; position:relative; border:1.5px solid var(--line); border-top:0; }
.phero .pcover .bgfx{ position:absolute; inset:0; background:var(--cover-grad,linear-gradient(120deg,var(--v-bright),var(--a-cyan))); }
.phero .pcover .bgfx::after{ content:""; position:absolute; inset:0; opacity:.5; background-image:radial-gradient(oklch(1 0 0/.22) 1.4px,transparent 1.8px); background-size:18px 18px; mask:linear-gradient(180deg,#000,transparent); }
.phero .pcover image-slot{ position:absolute; inset:0; width:100%; height:100%; }
.phead{ display:flex; gap:22px; align-items:flex-end; margin-top:-58px; padding:0 8px; position:relative; flex-wrap:wrap; }
.phead .av{ width:128px; height:128px; font-size:46px; border:5px solid var(--bg); box-shadow:var(--shadow-sm); }
.phead .pwho{ flex:1; min-width:240px; padding-bottom:6px; }
.phead .pn{ font-family:var(--cn); font-weight:900; font-size:32px; letter-spacing:-.02em; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.phead .ph{ font-family:var(--mono); font-size:13px; color:var(--text-mute); margin-top:4px; }
.phead .pbtns{ display:flex; gap:10px; padding-bottom:6px; }
.player-layout{ display:grid; grid-template-columns:1fr 340px; gap:28px; margin-top:30px; align-items:start; }
.pmain{ display:flex; flex-direction:column; gap:24px; min-width:0; }
.pbox{ border:1.5px solid var(--line); border-radius:var(--r); background:var(--card-grad); padding:24px 26px; }
.pbox > h3{ font-family:var(--cn); font-weight:800; font-size:18px; margin-bottom:16px; display:flex; align-items:center; gap:9px; }
.pbio{ font-family:var(--cn); font-size:15px; color:var(--text-dim); line-height:1.75; }
.pgames{ display:flex; flex-direction:column; gap:12px; }
.pgame{ display:flex; align-items:center; gap:14px; padding:13px 16px; border-radius:14px; background:var(--surface-2); border:1px solid var(--line-soft); }
.pgame .gi{ width:44px; height:44px; border-radius:12px; display:grid; place-items:center; color:#fff; font-family:var(--display); font-style:italic; font-weight:800; font-size:15px; flex:none; }
.pgame .gnm{ font-family:var(--cn); font-weight:700; font-size:15px; }
.pgame .grk{ font-family:var(--mono); font-size:12px; color:var(--text-mute); margin-top:2px; }
.pgame .gpr{ margin-left:auto; text-align:right; font-family:var(--display); font-style:italic; font-weight:800; font-size:18px; color:var(--v-signature); }
html[data-theme="dark"] .pgame .gpr{ color:var(--v-bright); }

/* voice player */
.voice{ display:flex; align-items:center; gap:16px; padding:16px 18px; border-radius:16px; background:var(--surface-2); border:1px solid var(--line-soft); }
.voice .vplay{ width:48px; height:48px; border-radius:50%; border:0; background:linear-gradient(135deg,var(--v-bright),var(--v-deep)); color:#fff; cursor:pointer; display:grid; place-items:center; flex:none; transition:.18s; }
.voice .vplay:hover{ transform:scale(1.06); }
.voice .vplay svg{ width:20px; height:20px; }
.voice .wave{ display:flex; align-items:center; gap:3px; height:34px; flex:1; }
.voice .wave i{ width:3px; border-radius:3px; background:var(--v-signature); opacity:.5; display:block; }
.voice.playing .wave i{ animation:wv 1s ease-in-out infinite; }
@keyframes wv{ 0%,100%{ transform:scaleY(.4); } 50%{ transform:scaleY(1); } }
.voice .vt{ font-family:var(--mono); font-size:12px; color:var(--text-mute); flex:none; }

/* reviews */
.review{ display:flex; gap:13px; padding:16px 0; border-bottom:1px solid var(--line-soft); }
.review:last-child{ border-bottom:0; padding-bottom:0; }
.review .av{ width:42px; height:42px; font-size:15px; }
.review .rv-top{ display:flex; align-items:center; gap:9px; }
.review .rv-nm{ font-family:var(--cn); font-weight:700; font-size:14px; }
.review .rv-stars{ color:var(--a-amber); font-size:12px; letter-spacing:1px; }
.review .rv-t{ font-family:var(--mono); font-size:11px; color:var(--text-mute); margin-left:auto; }
.review .rv-body{ font-family:var(--cn); font-size:13.5px; color:var(--text-dim); margin-top:6px; }
.review .rv-game{ font-family:var(--mono); font-size:11px; color:var(--v-signature); margin-top:6px; }

/* profile sticky book panel */
.pside{ position:sticky; top:90px; display:flex; flex-direction:column; gap:18px; }
.bookcard{ border:1.5px solid var(--line); border-radius:var(--r); background:var(--card-grad); padding:24px; box-shadow:var(--shadow-sm); }
.bookcard .bprice{ display:flex; align-items:baseline; gap:8px; margin-bottom:4px; }
.bookcard .bprice .v{ font-family:var(--display); font-style:italic; font-weight:800; font-size:40px; color:var(--v-signature); }
html[data-theme="dark"] .bookcard .bprice .v{ color:var(--v-bright); }
.bookcard .bprice .u{ font-family:var(--cn); font-size:14px; color:var(--text-mute); }
.bookcard .bmeta{ display:flex; gap:18px; margin:18px 0; padding:16px 0; border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); }
.bookcard .bmeta .bm .v{ font-family:var(--display); font-style:italic; font-weight:800; font-size:20px; }
.bookcard .bmeta .bm .k{ font-family:var(--cn); font-size:11.5px; color:var(--text-mute); margin-top:2px; }
.bookcard .btn{ width:100%; }
.bookcard .bsec{ font-family:var(--cn); font-size:12px; color:var(--text-mute); text-align:center; margin-top:12px; display:flex; align-items:center; justify-content:center; gap:6px; }
.bookcard .bsec svg{ width:14px; height:14px; color:var(--ok); }

/* ============================================================ BOSS dashboard */
.dash{ display:grid; grid-template-columns:230px 1fr; gap:28px; align-items:start; padding:36px 0 0; }
.dash-nav{ position:sticky; top:90px; border:1.5px solid var(--line); border-radius:var(--r); background:var(--card-grad); padding:14px; }
.dash-nav .me{ display:flex; align-items:center; gap:12px; padding:8px 8px 16px; border-bottom:1px solid var(--line-soft); margin-bottom:10px; }
.dash-nav .me .av{ width:46px; height:46px; font-size:17px; }
.dash-nav .me .nm{ font-family:var(--cn); font-weight:800; font-size:15px; }
.dash-nav .me .lv{ font-family:var(--mono); font-size:11px; color:var(--a-amber); }
.dnav-item{ display:flex; align-items:center; gap:11px; padding:11px 13px; border-radius:12px; font-family:var(--cn); font-weight:600; font-size:14px; color:var(--text-dim); cursor:pointer; transition:.15s; }
.dnav-item svg{ width:18px; height:18px; }
.dnav-item:hover{ background:var(--surface-2); color:var(--text); }
.dnav-item.on{ background:var(--v-signature); color:#fff; }
.dash-main{ min-width:0; }
.dpanel{ display:none; }
.dpanel.on{ display:block; animation:fadein .35s ease; }
@keyframes fadein{ from{ transform:translateY(10px); } to{ transform:none; } }
.dh{ font-family:var(--cn); font-weight:800; font-size:24px; margin-bottom:20px; }

/* wallet */
.wallet{ border-radius:var(--r); padding:30px 32px; color:#fff; position:relative; overflow:hidden; margin-bottom:22px;
  background:linear-gradient(135deg,var(--v-deep),var(--v-bright)); box-shadow:var(--shadow); }
.wallet .grid-tex{ opacity:.3; mask:none; }
.wallet .wl{ font-family:var(--mono); font-size:12px; letter-spacing:.1em; opacity:.85; position:relative; }
.wallet .wv{ font-family:var(--display); font-style:italic; font-weight:800; font-size:48px; margin:8px 0 18px; position:relative; }
.wallet .wv small{ font-size:22px; opacity:.8; }
.wallet .wbtns{ display:flex; gap:10px; position:relative; }
.wallet .wbtns .btn{ background:oklch(1 0 0/.16); color:#fff; border-color:oklch(1 0 0/.25); backdrop-filter:blur(6px); }
.wallet .wbtns .btn:hover{ background:oklch(1 0 0/.26); }
.dstats{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:22px; }
.dstat{ border:1.5px solid var(--line); border-radius:var(--r); background:var(--card-grad); padding:20px 22px; }
.dstat .v{ font-family:var(--display); font-style:italic; font-weight:800; font-size:30px; color:var(--v-signature); }
html[data-theme="dark"] .dstat .v{ color:var(--v-bright); }
.dstat .k{ font-family:var(--cn); font-size:13px; color:var(--text-dim); margin-top:4px; }

/* order list (boss) */
.olist{ display:flex; flex-direction:column; gap:14px; }
.ocard{ border:1.5px solid var(--line); border-radius:var(--r); background:var(--card-grad); padding:18px 20px; display:flex; align-items:center; gap:16px; transition:.18s; flex-wrap:wrap; }
.ocard:hover{ border-color:var(--v-signature); }
.ocard .av{ width:54px; height:54px; font-size:19px; }
.ocard .oinfo{ flex:1; min-width:160px; }
.ocard .oinfo .on{ font-family:var(--cn); font-weight:800; font-size:16px; }
.ocard .oinfo .od{ font-family:var(--cn); font-size:13px; color:var(--text-dim); margin-top:3px; }
.ocard .oinfo .ot{ font-family:var(--mono); font-size:11px; color:var(--text-mute); margin-top:4px; }
.ocard .ost{ font-family:var(--hud); font-weight:700; font-size:12px; padding:6px 13px; border-radius:999px; }
.ost.done{ background:color-mix(in oklab,var(--ok) 16%,transparent); color:var(--ok); }
.ost.live{ background:color-mix(in oklab,var(--busy) 18%,transparent); color:var(--busy); }
.ost.up{ background:color-mix(in oklab,var(--a-cyan) 16%,transparent); color:var(--a-cyan); }
.ocard .oamt{ font-family:var(--display); font-style:italic; font-weight:800; font-size:22px; color:var(--v-signature); }
html[data-theme="dark"] .ocard .oamt{ color:var(--v-bright); }

/* ============================================================ JOIN / recruit page */
.recruit-hero{ display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center; padding:64px 0 30px; }
.recruit-hero h1{ font-family:var(--cn); font-weight:900; font-size:clamp(34px,5vw,58px); letter-spacing:-.03em; line-height:1.05; }
.recruit-hero p.lead{ font-family:var(--cn); color:var(--text-dim); font-size:18px; margin:22px 0 30px; max-width:480px; }
.perks{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.perk{ border:1.5px solid var(--line); border-radius:var(--r); background:var(--card-grad); padding:26px 24px; transition:.22s; }
.perk:hover{ transform:translateY(-4px); border-color:var(--v-signature); box-shadow:var(--shadow-sm); }
.perk .picon{ width:50px; height:50px; border-radius:15px; display:grid; place-items:center; color:#fff; margin-bottom:16px; }
.perk .picon svg{ width:25px; height:25px; }
.perk:nth-child(1) .picon{ background:linear-gradient(135deg,var(--a-amber),oklch(0.7 0.16 55)); }
.perk:nth-child(2) .picon{ background:linear-gradient(135deg,var(--a-mint),oklch(0.62 0.15 168)); }
.perk:nth-child(3) .picon{ background:linear-gradient(135deg,var(--a-pink),var(--v-bright)); }
.perk h3{ font-family:var(--cn); font-weight:800; font-size:19px; }
.perk p{ font-family:var(--cn); font-size:14px; color:var(--text-dim); margin-top:8px; }

.applyform{ border:1.5px solid var(--line); border-radius:var(--r); background:var(--card-grad); padding:32px; max-width:640px; margin:0 auto; }
.frow{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
.field{ display:flex; flex-direction:column; gap:7px; }
.field.full{ grid-column:1/-1; }
.field label{ font-family:var(--cn); font-weight:600; font-size:13px; color:var(--text-dim); }
.field input, .field select, .field textarea{ font-family:var(--cn); font-size:14px; padding:12px 14px; border-radius:12px; border:1.5px solid var(--line); background:var(--surface); color:var(--text); outline:none; transition:.16s; }
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--v-signature); box-shadow:0 0 0 4px color-mix(in oklab,var(--v-signature) 12%,transparent); }
.tagpick{ display:flex; flex-wrap:wrap; gap:8px; }

/* page intro header (browse / join / boss) */
.page-head{ padding:40px 0 8px; }
.page-head h1{ font-family:var(--cn); font-weight:900; font-size:clamp(28px,4vw,42px); letter-spacing:-.02em; }
.page-head p{ font-family:var(--cn); color:var(--text-dim); font-size:16px; margin-top:10px; max-width:600px; }

/* ============================================================ responsive */
@media(max-width:1060px){
  .hero .inner{ grid-template-columns:1fr; gap:40px; }
  .hero-visual{ max-width:460px; }
  .disc{ grid-template-columns:1fr; }
  .browse, .dash{ grid-template-columns:1fr; }
  .filters, .dash-nav, .pside{ position:static; max-height:none; }
  .player-layout{ grid-template-columns:1fr; }
  .games-row{ grid-template-columns:repeat(4,1fr); }
  .recruit-hero{ grid-template-columns:1fr; }
}
@media(max-width:760px){
  .stats{ grid-template-columns:repeat(2,1fr); }
  .steps{ grid-template-columns:1fr 1fr; }
  .modes{ grid-template-columns:1fr; }
  .games-row{ grid-template-columns:repeat(3,1fr); }
  .dstats{ grid-template-columns:1fr; }
  .frow{ grid-template-columns:1fr; }
  .joinband{ padding:48px 24px; }
}
@media(max-width:480px){
  .steps{ grid-template-columns:1fr; }
  .games-row{ grid-template-columns:repeat(2,1fr); }
  .cgrid{ grid-template-columns:1fr; }
}

/* ============================================================ ORDER discount rows */
.osum .row.disc{ font-family:var(--cn); font-size:13px; }
.osum .row.disc span:first-child{ color:var(--text-dim); }

/* ============================================================ LANG bilingual blocks (legal) */
.lang-en{ display:none; }
html[lang="en"] .lang-en{ display:block; }
html[lang="en"] .lang-zh{ display:none; }

/* ============================================================ LEGAL page */
.legal{ display:grid; grid-template-columns:240px 1fr; gap:36px; align-items:start; padding:30px 0 0; }
.lg-side{ position:sticky; top:90px; }
.lg-tabs{ display:flex; flex-direction:column; gap:6px; border:1.5px solid var(--line); border-radius:var(--r); background:var(--card-grad); padding:12px; }
.lg-tab{ display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:12px; font-family:var(--cn); font-weight:700; font-size:14px; color:var(--text-dim); cursor:pointer; transition:.15s; border:0; background:transparent; text-align:left; }
.lg-tab svg{ width:18px; height:18px; }
.lg-tab:hover{ background:var(--surface-2); color:var(--text); }
.lg-tab.on{ background:var(--v-signature); color:#fff; }
.lg-meta{ font-family:var(--mono); font-size:11px; color:var(--text-mute); line-height:1.8; margin-top:16px; padding:0 6px; }
.lg-doc{ min-width:0; max-width:780px; }
.lg-doc.hidden{ display:none; }
.lg-doc h2.lg-title{ font-family:var(--cn); font-weight:900; font-size:clamp(26px,3.4vw,36px); letter-spacing:-.02em; margin-bottom:6px; }
.lg-doc .lg-eff{ font-family:var(--mono); font-size:12.5px; color:var(--v-signature); margin:0 0 22px; }
.lg-doc .lg-h{ font-family:var(--cn); font-weight:800; font-size:19px; letter-spacing:-.01em; margin:30px 0 10px; padding-top:22px; border-top:1px solid var(--line-soft); }
.lg-doc .lg-h:first-of-type{ border-top:0; padding-top:0; }
.lg-doc p{ font-family:var(--cn); font-size:15px; color:var(--text-dim); line-height:1.85; margin-bottom:14px; text-wrap:pretty; }
.lg-doc .lg-ul{ list-style:none; display:flex; flex-direction:column; gap:10px; margin:0 0 16px; }
.lg-doc .lg-ul li{ font-family:var(--cn); font-size:14.5px; color:var(--text-dim); line-height:1.7; padding-left:24px; position:relative; }
.lg-doc .lg-ul li::before{ content:""; position:absolute; left:2px; top:10px; width:9px; height:9px; border-radius:3px; background:var(--v-signature); }

/* ============================================================ VIP */
.vip-hero{ border-radius:28px; overflow:hidden; position:relative; padding:54px 50px; margin-bottom:36px; color:#fff;
  background:linear-gradient(120deg,var(--v-deep),var(--v-bright) 55%,var(--a-pink)); box-shadow:var(--shadow); }
.vip-hero .grid-tex{ opacity:.3; mask:none; }
.vip-hero .vh-in{ position:relative; max-width:560px; }
.vip-hero .eyebrow{ color:#fff; }
.vip-hero .eyebrow::before{ background:#fff; }
.vip-hero h1{ font-family:var(--cn); font-weight:900; font-size:clamp(30px,4vw,46px); letter-spacing:-.02em; margin:14px 0 12px; }
.vip-hero p{ font-family:var(--cn); font-size:16.5px; opacity:.92; max-width:480px; }
.vip-now{ display:flex; flex-wrap:wrap; gap:18px; align-items:center; margin-top:26px; background:oklch(1 0 0/.14); border:1.5px solid oklch(1 0 0/.22); border-radius:var(--r); padding:18px 22px; backdrop-filter:blur(8px); }
.vip-now .lv{ font-family:var(--display); font-style:italic; font-weight:800; font-size:30px; }
.vip-now .pg{ flex:1; min-width:180px; }
.vip-now .pg .track{ height:9px; border-radius:6px; background:oklch(1 0 0/.25); overflow:hidden; margin-top:8px; }
.vip-now .pg .fill{ height:100%; border-radius:6px; background:#fff; }
.vip-now .pg .t{ font-family:var(--cn); font-size:12.5px; opacity:.9; }

.vip-tiers{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.viptier{ border:1.5px solid var(--line); border-radius:var(--r); background:var(--card-grad); padding:26px 24px; position:relative; transition:.22s; }
.viptier:hover{ transform:translateY(-4px); box-shadow:var(--shadow-sm); }
.viptier.cur{ border-color:var(--vc,var(--v-signature)); box-shadow:0 0 0 1.5px var(--vc,var(--v-signature)), var(--shadow-sm); }
.viptier .vt-badge{ position:absolute; top:18px; right:18px; font-family:var(--hud); font-weight:700; font-size:10.5px; padding:4px 10px; border-radius:999px; background:color-mix(in oklab,var(--vc) 18%,transparent); color:var(--vc); }
.viptier .vt-lv{ font-family:var(--mono); font-size:12px; color:var(--text-mute); letter-spacing:.08em; }
.viptier .vt-nm{ font-family:var(--cn); font-weight:800; font-size:23px; color:var(--vc,var(--text)); margin:4px 0 2px; }
.viptier .vt-min{ font-family:var(--cn); font-size:13px; color:var(--text-mute); }
.viptier .vt-disc{ font-family:var(--display); font-style:italic; font-weight:800; font-size:30px; color:var(--vc); margin:14px 0 4px; }
.viptier ul{ list-style:none; display:flex; flex-direction:column; gap:9px; margin-top:14px; padding-top:14px; border-top:1px solid var(--line-soft); }
.viptier li{ font-family:var(--cn); font-size:13.5px; color:var(--text-dim); padding-left:22px; position:relative; }
.viptier li::before{ content:""; position:absolute; left:0; top:7px; width:9px; height:9px; border-radius:50%; background:var(--vc,var(--v-signature)); }

/* ============================================================ 亲密度 */
.inti-card{ border:1.5px solid var(--line); border-radius:var(--r); background:linear-gradient(150deg,color-mix(in oklab,var(--a-pink) 12%,var(--surface)),var(--surface)); padding:22px; }
.inti-top{ display:flex; align-items:center; gap:12px; }
.inti-hearts{ font-size:15px; letter-spacing:2px; color:var(--a-pink); }
.inti-lv{ font-family:var(--cn); font-weight:800; font-size:18px; }
.inti-pts{ margin-left:auto; font-family:var(--display); font-style:italic; font-weight:800; font-size:18px; color:var(--a-pink); }
.inti-track{ height:9px; border-radius:6px; background:var(--surface-2); overflow:hidden; margin:14px 0 8px; }
.inti-fill{ height:100%; border-radius:6px; background:linear-gradient(90deg,var(--a-pink),var(--v-bright)); }
.inti-next{ font-family:var(--cn); font-size:12.5px; color:var(--text-mute); }
.inti-unlock{ display:flex; gap:9px; align-items:flex-start; margin-top:14px; padding-top:14px; border-top:1px solid var(--line-soft); font-family:var(--cn); font-size:13px; color:var(--text-dim); }
.inti-unlock svg{ width:16px; height:16px; color:var(--a-pink); flex:none; margin-top:2px; }
/* intimacy mini row (boss console list) */
.intirow{ display:flex; align-items:center; gap:14px; padding:14px 16px; border:1.5px solid var(--line); border-radius:var(--r); background:var(--card-grad); }
.intirow .av{ width:48px; height:48px; font-size:17px; }
.intirow .ir-info{ flex:1; min-width:0; }
.intirow .ir-nm{ font-family:var(--cn); font-weight:700; font-size:15px; }
.intirow .ir-track{ height:7px; border-radius:5px; background:var(--surface-2); overflow:hidden; margin-top:7px; max-width:240px; }
.intirow .ir-fill{ height:100%; background:linear-gradient(90deg,var(--a-pink),var(--v-bright)); }
.intirow .ir-lv{ font-family:var(--cn); font-weight:700; font-size:13px; color:var(--a-pink); white-space:nowrap; }

/* ============================================================ RECHARGE modal */
.center-modal{ position:fixed; inset:0; z-index:320; display:grid; place-items:center; padding:24px; opacity:0; pointer-events:none; transition:.25s; }
.center-modal.open{ opacity:1; pointer-events:auto; }
.center-modal .cm-card{ width:min(520px,96vw); max-height:90vh; overflow:auto; background:var(--bg); border:1.5px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); padding:28px 30px; transform:translateY(16px) scale(.98); transition:.28s cubic-bezier(.34,1.4,.64,1); }
.center-modal.open .cm-card{ transform:none; }
.cm-head{ display:flex; align-items:center; margin-bottom:18px; }
.cm-head h3{ font-family:var(--cn); font-weight:800; font-size:20px; }
.cm-head .icon-btn{ margin-left:auto; }
.topup-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.topup{ border:1.5px solid var(--line); border-radius:16px; padding:18px 14px; text-align:center; cursor:pointer; transition:.16s; background:var(--surface); }
.topup:hover{ border-color:var(--v-signature); transform:translateY(-3px); }
.topup.on{ border-color:var(--v-signature); background:color-mix(in oklab,var(--v-signature) 10%,var(--surface)); }
.topup .tu-usd{ font-family:var(--display); font-style:italic; font-weight:800; font-size:26px; color:var(--v-signature); }
.topup .tu-coin{ font-family:var(--cn); font-size:12px; color:var(--text-mute); margin-top:4px; }
.topup .tu-bonus{ font-family:var(--hud); font-weight:700; font-size:10.5px; color:var(--ok); margin-top:4px; }

@media(max-width:1060px){ .legal{ grid-template-columns:1fr; } .lg-side{ position:static; } .vip-tiers{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:680px){ .vip-tiers{ grid-template-columns:1fr; } .topup-grid{ grid-template-columns:repeat(2,1fr); } }

/* ============================================================ AUTH / LOGIN */
.auth{ min-height:calc(100vh - 73px); display:grid; place-items:center; padding:40px 24px; }
.auth-wrap{ width:min(940px,100%); display:grid; grid-template-columns:1fr 1fr; border:1.5px solid var(--line); border-radius:28px; overflow:hidden; box-shadow:var(--shadow); background:var(--surface); }
.auth-side{ position:relative; padding:44px 40px; color:#fff; display:flex; flex-direction:column;
  background:linear-gradient(150deg,var(--v-deep),var(--v-bright) 58%,var(--a-pink)); }
.auth-side .grid-tex{ opacity:.28; mask:none; }
.auth-side .logo{ color:#fff; font-size:25px; position:relative; }
.auth-side .logo .play{ color:#fff; }
.auth-side .logo .tld{ color:oklch(1 0 0/.8); }
.auth-side h2{ font-family:var(--cn); font-weight:900; font-size:27px; line-height:1.2; margin:24px 0 10px; position:relative; }
.auth-side .as-p{ font-family:var(--cn); font-size:14.5px; opacity:.92; position:relative; line-height:1.7; }
.auth-benes{ margin-top:auto; display:flex; flex-direction:column; gap:13px; position:relative; padding-top:30px; }
.auth-bene{ display:flex; gap:11px; align-items:center; font-family:var(--cn); font-size:14px; }
.auth-bene svg{ width:19px; height:19px; flex:none; opacity:.95; }
.auth-main{ padding:46px 42px; display:flex; flex-direction:column; justify-content:center; min-width:0; }
.auth-main h1{ font-family:var(--cn); font-weight:800; font-size:25px; letter-spacing:-.01em; }
.auth-main .sub{ font-family:var(--cn); font-size:14px; color:var(--text-dim); margin:8px 0 28px; }
.prov-btn{ display:flex; align-items:center; justify-content:center; gap:11px; width:100%; padding:15px 18px; border-radius:14px; font-family:var(--hud); font-weight:700; font-size:15px; cursor:pointer; border:1.5px solid transparent; transition:transform .18s cubic-bezier(.34,1.5,.64,1),box-shadow .2s,border-color .2s; margin-bottom:12px; }
.prov-btn svg{ width:20px; height:20px; flex:none; }
.prov-btn:hover{ transform:translateY(-2px); }
.prov-discord{ background:#5865F2; color:#fff; box-shadow:0 12px 28px -12px #5865F2; }
.prov-discord:hover{ box-shadow:0 16px 32px -12px #5865F2; }
.prov-google{ background:var(--surface); color:var(--text); border-color:var(--line); }
.prov-google:hover{ border-color:var(--text-mute); }
.auth-or{ display:flex; align-items:center; gap:12px; margin:12px 0; color:var(--text-mute); font-family:var(--mono); font-size:11px; letter-spacing:.08em; }
.auth-or::before,.auth-or::after{ content:""; height:1px; flex:1; background:var(--line); }
.auth-fine{ font-family:var(--cn); font-size:12px; color:var(--text-mute); margin-top:20px; line-height:1.8; }
.auth-fine a{ color:var(--v-signature); }
.auth-acct{ display:flex; align-items:center; gap:13px; padding:16px; border-radius:16px; background:var(--surface-2); border:1px solid var(--line-soft); margin-bottom:22px; }
.auth-acct .av{ width:48px; height:48px; font-size:18px; }
.auth-acct .aa-nm{ font-family:var(--cn); font-weight:700; font-size:15px; }
.auth-acct .aa-sub{ font-family:var(--mono); font-size:12px; color:var(--text-mute); margin-top:2px; }
.bind-pill{ display:inline-flex; align-items:center; gap:6px; font-family:var(--hud); font-weight:700; font-size:11px; padding:4px 10px; border-radius:999px; }
.bind-pill.ok{ background:color-mix(in oklab,var(--ok) 16%,transparent); color:var(--ok); }
.bind-pill.no{ background:color-mix(in oklab,var(--busy) 18%,transparent); color:var(--busy); }
.nav-acct{ display:inline-flex; align-items:center; }
.nav-acct .av{ transition:transform .18s; }
.nav-acct:hover .av{ transform:scale(1.08); }

@media(max-width:760px){
  .auth-wrap{ grid-template-columns:1fr; }
  .auth-side{ display:none; }
}

/* ============================================================ COMPANION CONSOLE (Studio) */
.sw{ position:relative; width:50px; height:28px; border-radius:999px; border:0; background:var(--line); cursor:pointer; transition:.2s; flex:none; }
.sw::after{ content:""; position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%; background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.25); transition:.2s; }
.sw.on{ background:var(--ok); }
.sw.on::after{ left:25px; }
.online-row{ display:flex; align-items:center; gap:13px; border:1.5px solid var(--line); border-radius:var(--r); background:var(--card-grad); padding:16px 20px; margin-bottom:22px; }
.online-row .ttl{ font-family:var(--cn); font-weight:800; font-size:16px; }
.online-row .sub{ font-family:var(--cn); font-size:13px; color:var(--text-mute); margin-top:2px; }
.online-row .st{ margin-left:auto; }
.wallet.gold{ background:linear-gradient(135deg,oklch(0.55 0.13 150),oklch(0.7 0.16 145)); }
.wallet.gold .wv small{ font-size:20px; }
.ocard .oact{ display:flex; gap:8px; }
.studio-badge{ display:inline-flex; align-items:center; gap:6px; font-family:var(--hud); font-weight:700; font-size:11px; padding:5px 11px; border-radius:999px; background:color-mix(in oklab,var(--a-mint) 16%,transparent); color:oklch(0.5 0.13 160); }
.gate{ border:1.5px dashed color-mix(in oklab,var(--v-signature) 40%,var(--line)); border-radius:var(--r); background:color-mix(in oklab,var(--v-signature) 6%,var(--surface)); padding:48px 40px; text-align:center; max-width:560px; margin:30px auto; }
.gate .gi{ width:64px; height:64px; border-radius:20px; display:grid; place-items:center; margin:0 auto 20px; color:#fff; background:linear-gradient(135deg,var(--a-coral),oklch(0.62 0.18 22)); }
.gate .gi svg{ width:32px; height:32px; }
.gate h2{ font-family:var(--cn); font-weight:800; font-size:24px; margin-bottom:10px; }
.gate p{ font-family:var(--cn); font-size:15px; color:var(--text-dim); margin-bottom:24px; }