/* ============================================================================
   HakkoAI · Web Roleplay — component library (desktop scale)
   - Tokens: 1:1 from design/app_system/css/tokens.css (+ login_Hakko tokens,
     design.md §7.4). No hard-coded colors outside this :root block.
   - Components: .hkw-* = desktop ports of the mobile .hk-* specs
     (design/app_system/css/components.css); frame/topnav extends the
     design/web/index.html baseline.
   - Scaffolding (mockup-only, not product UI): .browser .bchrome .omni
     .caption .demo
   ============================================================================ */
:root{
  /* ---- surfaces ---- */
  --bg:#0C0D0F; --bg-pure:#000000;   /* v6: aligned to hakko.ai main site (_var.scss $bg #0c0d0f) */
  --card:#18191C; --card-2:#212329; --card-3:#252931; --sheet:#1C1D21;
  --divider:rgba(255,255,255,.08); --line:#252931;
  /* ---- brand ---- */
  --brand:#FF77B7; --brand-strong:#FF69BA; --brand-weak:rgba(255,119,183,.16);
  --brand-grad:linear-gradient(90deg,#9B7DFF 0%,#FF78C3 100%);
  --brand-grad-cta:linear-gradient(270deg,#FF63A5 2%,#F998BB 100%);
  /* ---- accents ---- */
  --gold:#F6B826; --gold-2:#FFC226;
  --user-bubble:#7455D8; --ai-bubble:rgba(28,28,30,.82); --purple:#7D5CFF;
  --gem:#5AD6FF; --energy:#7B9CFF; --coin:#FFC24B; --hangup:#FB5C52;
  --success:#1FD376; --error:#CA3A32; --info:#4887F5; --review:#4887F5; --tag:#8D6EF3;
  /* ---- text ---- */
  --t1:rgba(255,255,255,.92); --t2:rgba(255,255,255,.55);
  --t3:rgba(255,255,255,.40); --t4:rgba(255,255,255,.30);
  --on-pink:#FFFFFF; --on-gold:#3D2600; --on-light:#0A0A0B;
  /* ---- radius / shadow ---- */
  --r-xs:8px; --r-sm:12px; --r-md:16px; --r-lg:20px; --r-xl:28px; --r-full:999px;
  --shadow:0 4px 12px rgba(0,0,0,.35); --shadow-up:0 -6px 24px rgba(0,0,0,.4);
  --shadow-device:0 28px 80px rgba(0,0,0,.55);
  /* ---- type ---- */
  --font:"Figtree",Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  /* ---- login_Hakko (design.md §7.4) ---- */
  --login-bg:#0F161C; --login-panel:rgba(33,36,50,.4); --login-input:rgba(255,255,255,.06);
  --login-focus:#FE90B8; --login-resend:#EC6999;
  --login-cta:linear-gradient(270deg,#FF63A5 2%,#F998BB 100%);
  /* ---- web layout ---- */
  --topnav-h:64px; --gutter:28px; --wrap:1280px;
}

/* ---------------------------------------------------------------- base */
*{box-sizing:border-box;margin:0;padding:0}
body{min-height:100vh;display:grid;place-items:center;gap:14px;padding:22px 12px;
  color:var(--t1);font-family:var(--font);background:linear-gradient(135deg,#101015,#222024)}
button{cursor:pointer;border:0;color:inherit;background:none;font:inherit}
input,textarea,select{font:inherit;color:inherit;background:none;border:0;outline:0}
a{color:inherit;text-decoration:none}
img{display:block}
svg{stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.fill{fill:currentColor;stroke:none}
::selection{background:var(--brand-weak)}

/* ============================================================ scaffolding
   (mockup presentation only — browser chrome frame, caption, demo switcher) */
.browser{width:min(1440px,98vw);height:min(880px,92vh);border-radius:12px;overflow:hidden;
  background:var(--bg);box-shadow:var(--shadow-device),0 0 0 1px rgba(255,255,255,.06);
  display:grid;grid-template-rows:44px 1fr;position:relative}
.bchrome{display:flex;align-items:center;gap:12px;padding:0 14px;background:#1c1c1f;border-bottom:1px solid #000}
.bdots{display:flex;gap:8px}.bdots i{width:12px;height:12px;border-radius:50%}
.bdots .r{background:#ff5f57}.bdots .y{background:#febc2e}.bdots .g{background:#28c840}
.bnav{display:flex;gap:14px;color:var(--t3)}.bnav svg{width:16px;height:16px}
.omni{flex:1;max-width:520px;margin:0 auto;height:28px;border-radius:var(--r-full);background:#0f0f11;
  display:flex;align-items:center;justify-content:center;gap:8px;padding:0 14px;color:var(--t2);font-size:13px}
.omni svg{width:13px;height:13px;color:var(--success);flex:none}
.caption{color:var(--t2);font-size:13px;text-align:center;max-width:1100px;line-height:1.6}
.caption b{color:#fff}
.caption a{color:var(--brand)}
.demo{position:fixed;right:16px;bottom:14px;z-index:990;display:flex;align-items:center;gap:7px;
  background:rgba(15,15,18,.92);border:1px dashed rgba(255,255,255,.25);border-radius:var(--r-full);
  padding:7px 12px;font-size:12px;color:var(--t2);backdrop-filter:blur(8px)}
.demo b{color:var(--t3);font-size:10px;letter-spacing:.12em}
.demo button{height:24px;padding:0 10px;border-radius:var(--r-full);background:var(--card-2);font-size:12px;font-weight:600;color:var(--t2)}
.demo button.on{background:var(--brand);color:#fff}

/* ---------------------------------------------------------------- page shell */
.page{overflow:auto;position:relative;background:var(--bg);display:flex;flex-direction:column}
.page::-webkit-scrollbar{width:9px;height:9px}
.page::-webkit-scrollbar-thumb{background:#2a2c33;border-radius:9px}
.page::-webkit-scrollbar-track{background:transparent}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.sec{padding:10px 0 30px}
.sec-head{display:flex;align-items:center;gap:14px;margin:14px 0 14px}
.sec-head h2{font-size:20px;font-weight:700}
.sec-head .more{margin-left:auto;font-size:13px;font-weight:600;color:var(--t2)}
.sec-head .more:hover{color:var(--brand)}
.grow{flex:1}

/* ============================================================ top nav */
.hkw-topnav{position:sticky;top:0;z-index:40;height:var(--topnav-h);flex:none;display:flex;align-items:center;gap:16px;
  padding:0 var(--gutter);background:rgba(10,10,11,.86);backdrop-filter:blur(14px);border-bottom:1px solid var(--divider)}
.hkw-topnav.overlay{position:absolute;left:0;right:0;background:linear-gradient(to bottom,rgba(8,8,10,.72),transparent);border-bottom:0;backdrop-filter:none}
.hkw-logo{font-style:italic;font-weight:800;font-size:21px;letter-spacing:-.4px;flex:none}
.hkw-logo:hover{color:var(--brand)}
.hkw-tnav{display:flex;gap:4px}
.hkw-tnav a{padding:8px 14px;border-radius:var(--r-full);font-size:14px;font-weight:600;color:var(--t2);position:relative}
.hkw-tnav a.on{color:#fff;background:var(--brand-weak)}
.hkw-tnav a:hover{color:#fff}
.hkw-tnav a .dot{position:absolute;top:7px;right:8px;width:6px;height:6px;border-radius:var(--r-full);background:var(--error)}
.hkw-search{flex:1;max-width:300px;height:38px;border-radius:var(--r-full);background:var(--card-2);
  display:flex;align-items:center;gap:9px;padding:0 14px;color:var(--t3);margin-left:auto}
.hkw-search svg{width:16px;height:16px;flex:none}
.hkw-search input{flex:1;font-size:14px;color:#fff;min-width:0}
.hkw-search input::placeholder{color:var(--t3)}
.hkw-navright{display:flex;align-items:center;gap:10px;flex:none}
.btn-login{height:38px;padding:0 20px;border-radius:var(--r-full);background:var(--brand);color:var(--on-pink);font-weight:700;font-size:14px}
.btn-login:hover{background:var(--brand-strong)}

/* currency pill (.hk-cur port) */
.hkw-cur{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 5px 0 11px;border-radius:var(--r-full);
  background:var(--card-2);font-size:13px;font-weight:700;flex:none;cursor:pointer}
.hkw-cur svg{width:16px;height:16px}
.hkw-cur .add{width:20px;height:20px;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;font-size:14px;line-height:1}
.hkw-cur.gem svg{color:var(--gem)} .hkw-cur.energy svg{color:var(--energy)} .hkw-cur.coin svg{color:var(--coin)}

/* tier pill (.hk-tier port) */
.hkw-tier{height:24px;padding:0 11px;border-radius:var(--r-full);font-size:11px;font-weight:800;
  display:inline-grid;place-items:center;letter-spacing:.3px;flex:none}
.hkw-tier.hplus,.hkw-tier.ultra{background:linear-gradient(90deg,#FFD36E,#FF9B4A);color:#5a2d00}
.hkw-tier.pro{background:var(--brand);color:#fff}
.hkw-tier.free{background:var(--card-3);color:var(--t2)}

/* avatar (.hk-av port) */
.hkw-av{display:inline-block;border-radius:50%;background:var(--card-2);flex:none;position:relative;overflow:hidden;
  background:radial-gradient(circle at 50% 30%,var(--c1,#ff9ed1) 0%,transparent 60%),linear-gradient(160deg,var(--c1,#ff9ed1),var(--c2,#7b4bd6))}
.hkw-av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hkw-av.ring{box-shadow:0 0 0 2px var(--gold)}
.hkw-av .on{position:absolute;right:0;bottom:0;width:11px;height:11px;border-radius:50%;background:var(--success);border:2px solid var(--bg)}

/* ============================================================ buttons (.hk-btn port) */
.hkw-btn{height:48px;padding:0 24px;border-radius:var(--r-full);font-size:15px;font-weight:700;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:transform .12s,opacity .12s,background .12s;white-space:nowrap}
.hkw-btn:active{transform:scale(.985)}
.hkw-btn svg{width:18px;height:18px}
.hkw-btn.pink{background:var(--brand);color:var(--on-pink)}
.hkw-btn.pink:hover{background:var(--brand-strong)}
.hkw-btn.grad{background:var(--brand-grad);color:#fff}
.hkw-btn.grad-cta{background:var(--brand-grad-cta);color:#fff}
.hkw-btn.gold{background:var(--gold);color:var(--on-gold)}
.hkw-btn.gold:hover{background:var(--gold-2)}
.hkw-btn.light{background:#fff;color:var(--on-light)}
.hkw-btn.dark{background:var(--card-2);color:#fff}
.hkw-btn.dark:hover{background:var(--card-3)}
.hkw-btn.outline{background:transparent;color:var(--brand);box-shadow:inset 0 0 0 1.5px var(--brand)}
.hkw-btn.outline-w{background:transparent;color:var(--t1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
.hkw-btn.disabled,.hkw-btn:disabled{opacity:.4;pointer-events:none}
.hkw-btn.sm{height:38px;padding:0 18px;font-size:13px}
.hkw-btn.lg{height:54px;padding:0 32px;font-size:16px}
.hkw-btn.block{width:100%}
.hkw-btnrow{display:flex;gap:12px}.hkw-btnrow>.hkw-btn{flex:1}
.hkw-iconbtn{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:var(--t2);background:var(--card-2);flex:none}
.hkw-iconbtn:hover{color:#fff;background:var(--card-3)}
.hkw-iconbtn svg{width:19px;height:19px}
.hkw-iconbtn.ghost{background:transparent}

/* ============================================================ chips (.hk-chip port) */
.hkw-chips{display:flex;gap:9px;flex-wrap:wrap}
.hkw-chip{flex:none;height:34px;padding:0 16px;border-radius:var(--r-full);font-size:13px;font-weight:600;color:var(--t2);
  background:var(--card);display:inline-grid;place-items:center;white-space:nowrap;cursor:pointer}
.hkw-chip:hover{color:#fff}
.hkw-chip.on{color:#fff;background:var(--brand-weak);box-shadow:inset 0 0 0 1px var(--brand)}
.hkw-chip.solid-on{color:var(--on-light);background:#E9EAEC}
.hkw-tagchip{height:24px;padding:0 11px;border-radius:var(--r-full);background:var(--card-2);font-size:12px;font-weight:600;color:var(--tag);display:inline-grid;place-items:center}

/* ============================================================ character card (.hk-ccard port, desktop) */
.hkw-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(186px,1fr));gap:18px}
.hkw-ccard{position:relative;aspect-ratio:184/246;border-radius:var(--r-md);overflow:hidden;cursor:pointer;
  background:#1a1a1f;transition:transform .15s,box-shadow .15s;display:block}
.hkw-ccard:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.hkw-ccard .cover{position:absolute;inset:0}
.hkw-ccard .cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hkw-ccard::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(8,8,10,.94) 5%,rgba(8,8,10,.18) 44%,transparent 64%);pointer-events:none}
.hkw-ccard .meta{position:absolute;left:12px;right:12px;bottom:11px;z-index:2}
.hkw-ccard .nm{font-size:15px;font-weight:700;line-height:1.18;text-shadow:0 1px 6px rgba(0,0,0,.5)}
.hkw-ccard .by{margin-top:3px;font-size:11px;color:rgba(255,255,255,.7)}
.hkw-ccard .desc{margin-top:2px;font-size:11px;color:var(--t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hkw-cbadge{position:absolute;top:9px;right:9px;z-index:2;height:24px;padding:0 9px;border-radius:var(--r-full);
  background:rgba(20,20,24,.8);font-size:11px;font-weight:500;display:flex;align-items:center;gap:5px;color:#fff;backdrop-filter:blur(4px)}
.hkw-cbadge svg{width:13px;height:13px}
.hkw-cbadge .cdot{width:5px;height:5px;border-radius:var(--r-full);background:var(--success)}
.hkw-cbadge.tl{left:9px;right:auto}
.hkw-cbadge.review{background:rgba(72,135,245,.9)}
.hkw-cbadge.public{background:rgba(125,92,255,.85)}
.hkw-cbadge.inuse{background:var(--brand)}
.hkw-cbadge.lv{background:rgba(20,20,24,.8);color:var(--brand)}

/* ============================================================ discover extras */
.hkw-hero{position:relative;border-radius:var(--r-lg);overflow:hidden;min-height:240px;display:flex;align-items:flex-end;margin-top:18px}
.hkw-hero .bg{position:absolute;inset:0}
.hkw-hero .bg img{width:100%;height:100%;object-fit:cover;object-position:center 22%}
.hkw-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(8,8,10,.88) 18%,rgba(8,8,10,.42) 52%,transparent 78%)}
.hkw-hero .inner{position:relative;z-index:2;padding:30px 34px;max-width:560px}
.hkw-hero h1{font-size:30px;font-weight:800;letter-spacing:-.5px;line-height:1.15}
.hkw-hero p{color:var(--t2);font-size:14px;margin:10px 0 16px;line-height:1.55}
.hkw-resume{display:flex;gap:12px;overflow-x:auto;padding-bottom:4px}
.hkw-resume::-webkit-scrollbar{height:0}
.hkw-rcard{flex:none;width:300px;display:flex;align-items:center;gap:12px;background:var(--card);border-radius:var(--r-md);padding:12px 14px;cursor:pointer;transition:background .12s}
.hkw-rcard:hover{background:var(--card-2)}
.hkw-rcard .rmid{flex:1;min-width:0}
.hkw-rcard .rn{font-size:14px;font-weight:700}
.hkw-rcard .rp{font-size:12px;color:var(--t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.hkw-rcard .rgo{width:34px;height:34px;border-radius:50%;background:var(--brand-weak);color:var(--brand);display:grid;place-items:center;flex:none}
.hkw-rcard .rgo svg{width:16px;height:16px}
.hkw-rank{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:12px 24px}
.hkw-rankrow{display:flex;align-items:center;gap:14px;padding:10px 12px;border-radius:var(--r-sm);cursor:pointer}
.hkw-rankrow:hover{background:var(--card)}
.hkw-rankrow .no{width:26px;font-size:18px;font-weight:800;font-style:italic;color:var(--t3);text-align:center;flex:none}
.hkw-rankrow.top .no{color:var(--brand)}
.hkw-rankrow .rmid{flex:1;min-width:0}
.hkw-rankrow .rn{font-size:14px;font-weight:700}
.hkw-rankrow .rp{font-size:12px;color:var(--t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hkw-rankrow .rc{font-size:12px;color:var(--t3);display:flex;align-items:center;gap:5px;flex:none}
.hkw-rankrow .rc svg{width:13px;height:13px}

/* ============================================================ footer */
.hkw-foot{border-top:1px solid var(--divider);padding:28px var(--gutter);display:flex;flex-wrap:wrap;gap:30px;
  justify-content:space-between;color:var(--t2);font-size:13px;margin-top:auto}
.hkw-foot .brand b{color:#fff;font-style:italic;font-size:19px;font-weight:800}
.hkw-foot .brand p{margin-top:7px;max-width:260px;line-height:1.5}
.hkw-foot .cols{display:flex;gap:48px;flex-wrap:wrap}
.hkw-foot .col h4{color:#fff;font-size:13px;margin-bottom:11px}
.hkw-foot .col a{display:block;margin-bottom:8px}
.hkw-foot .col a:hover{color:var(--brand)}

/* ============================================================ character detail */
.cd-layout{display:grid;grid-template-columns:380px 1fr;gap:34px;align-items:start;padding-top:24px}
.cd-heroCard{position:sticky;top:calc(var(--topnav-h) + 20px)}
.cd-hero{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:3/4;background:#1a1a1f}
.cd-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cd-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(8,8,10,.6),transparent 38%)}
.cd-stats{display:flex;gap:10px;margin-top:14px}
.cd-stat{flex:1;background:var(--card);border-radius:var(--r-sm);padding:12px 14px;text-align:center}
.cd-stat b{font-size:17px;font-weight:800;display:block}
.cd-stat span{font-size:11px;color:var(--t3);text-transform:uppercase;letter-spacing:.06em}
.cd-title{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.cd-title h1{font-size:32px;font-weight:800;letter-spacing:-.5px}
.cd-title .nick{font-size:15px;color:var(--t2)}
.cd-author{display:flex;align-items:center;gap:10px;margin:14px 0}
.cd-author .an{font-size:14px;font-weight:600}
.cd-author .af{font-size:12px;color:var(--t3)}
.cd-quote{border-left:3px solid var(--brand);background:var(--card);border-radius:0 var(--r-sm) var(--r-sm) 0;
  padding:14px 18px;font-size:14.5px;line-height:1.6;color:var(--t1);font-style:italic;margin:16px 0}
.cd-about{font-size:14px;line-height:1.7;color:var(--t2)}
.cd-cta{display:flex;gap:12px;align-items:center;margin-top:22px;position:sticky;bottom:0;
  padding:16px 0 22px;background:linear-gradient(to top,var(--bg) 62%,transparent)}

/* underline tabs (.hk-tabs port) */
.hkw-tabs{display:flex;gap:26px;border-bottom:1px solid var(--divider)}
.hkw-tabs .t{padding:13px 2px;font-size:16px;font-weight:700;color:var(--t3);position:relative;cursor:pointer}
.hkw-tabs .t:hover{color:var(--t2)}
.hkw-tabs .t.on{color:#fff}
.hkw-tabs .t.on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;border-radius:3px;background:var(--brand)}
.hkw-album{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-top:16px}
.hkw-album .a{position:relative;aspect-ratio:1;border-radius:var(--r-sm);overflow:hidden;background:#1a1a1f;cursor:pointer}
.hkw-album .a img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .2s}
.hkw-album .a:hover img{transform:scale(1.04)}

/* voice row (.hk-voicerow port) */
.hkw-voicerow{display:flex;align-items:center;gap:12px;padding:13px 16px;position:relative;border-radius:var(--r-sm);background:var(--card)}
.hkw-voicerow .play{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:#fff;background:var(--brand-weak);flex:none;cursor:pointer}
.hkw-voicerow .play svg{width:17px;height:17px;color:var(--brand)}
.hkw-voicerow .mid{flex:1;min-width:0}
.hkw-voicerow .vn{font-size:14px;font-weight:600}
.hkw-voicerow .vd{font-size:12px;color:var(--t2);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hkw-wave{display:flex;align-items:center;gap:2.5px;height:24px}
.hkw-wave i{width:3px;border-radius:3px;background:var(--t3)}
.hkw-wave i.hot{background:var(--brand)}

/* ============================================================ chat (3-column) */
/* v5: the conversation list moved into the global sidebar — chat is stage + panel */
.hkw-chat{flex:1;display:grid;grid-template-columns:1fr 340px;min-height:0;overflow:hidden}
.hkw-chat.no-right{grid-template-columns:1fr 0}
/* left rail: conversation mini list */
.cl-rail{border-right:1px solid var(--divider);display:flex;flex-direction:column;min-height:0;background:var(--bg)}
.cl-head{padding:14px 14px 10px;display:flex;align-items:center;gap:10px}
.cl-head h3{font-size:16px;font-weight:800;flex:1}
.cl-search{margin:0 14px 10px;height:34px;border-radius:var(--r-full);background:var(--card-2);display:flex;align-items:center;gap:8px;padding:0 12px;color:var(--t3)}
.cl-search svg{width:14px;height:14px}.cl-search input{flex:1;font-size:13px;min-width:0}
.cl-list{flex:1;overflow-y:auto;min-height:0;padding:0 8px 14px}
.cl-list::-webkit-scrollbar{width:0}
.cl-label{font-size:11px;color:var(--t3);letter-spacing:.08em;text-transform:uppercase;padding:10px 10px 6px}
.cl-row{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--r-sm);cursor:pointer;position:relative}
.cl-row:hover{background:var(--card)}
.cl-row.on{background:var(--brand-weak)}
.cl-row .cmid{flex:1;min-width:0}
.cl-row .cn{font-size:13.5px;font-weight:700;display:flex;align-items:center;gap:6px}
.cl-row .cp{font-size:12px;color:var(--t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.cl-row .ct{font-size:11px;color:var(--t3);flex:none;align-self:flex-start;margin-top:3px}
.cl-row .unread{position:absolute;right:10px;bottom:10px;min-width:17px;height:17px;border-radius:var(--r-full);
  background:var(--brand);color:#fff;font-size:10px;font-weight:700;display:grid;place-items:center;padding:0 5px}
.cl-pin{width:12px;height:12px;color:var(--t3);flex:none}
/* center column over character art */
.cc-stage{position:relative;display:flex;flex-direction:column;min-height:0;overflow:hidden}
.cc-bg{position:absolute;inset:0;z-index:0}
.cc-bg img{width:100%;height:100%;object-fit:cover;object-position:center 18%}
.cc-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(8,8,10,.62),rgba(8,8,10,.18) 22%,rgba(8,8,10,.12) 52%,rgba(8,8,10,.88))}
.cc-top{position:relative;z-index:3;display:flex;align-items:center;gap:12px;padding:12px 18px;flex:none}
.cc-top .who{display:flex;align-items:center;gap:10px;min-width:0}
.cc-top .wn{font-size:16px;font-weight:800;display:flex;align-items:center;gap:7px}
.cc-top .ws{font-size:12px;color:var(--success);display:flex;align-items:center;gap:5px}
.cc-top .ws .cdot{width:6px;height:6px;border-radius:50%;background:var(--success)}
.cc-top .acts{margin-left:auto;display:flex;gap:8px}
.cc-top .acts .hkw-iconbtn{background:rgba(40,40,46,.55);backdrop-filter:blur(8px);color:#fff}
.cc-top .acts .hkw-iconbtn:hover{background:rgba(60,60,68,.7)}
.cc-top .acts .hkw-iconbtn.on{background:var(--brand);color:#fff}
.cc-intimacy{display:flex;align-items:center;gap:7px;background:rgba(40,40,46,.55);backdrop-filter:blur(8px);
  border-radius:var(--r-full);height:30px;padding:0 12px;font-size:12px;color:var(--t1);flex:none;cursor:pointer}
.cc-intimacy svg{width:13px;height:13px;color:var(--brand)}
.cc-intimacy .bar{width:64px;height:5px;border-radius:var(--r-full);background:rgba(255,255,255,.18);overflow:hidden}
.cc-intimacy .bar i{display:block;height:100%;background:var(--brand-grad)}
/* messages (.hk-bubble / introcard / suggest ports) */
.cc-msgs{position:relative;z-index:2;flex:1;overflow-y:auto;min-height:0;padding:6px 22px 10px;display:flex;flex-direction:column;gap:13px}
.cc-msgs::-webkit-scrollbar{width:0}
.cc-msgs .inner{width:100%;max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:13px}
.hkw-ts{align-self:center;font-size:12px;color:var(--t2);background:rgba(0,0,0,.4);padding:3px 13px;border-radius:var(--r-full)}
.hkw-ainote{align-self:center;font-size:11px;color:var(--t3);padding:2px 0;text-align:center}
.hkw-msgrow{display:flex;flex-direction:column;max-width:74%;position:relative}
.hkw-msgrow.ai{align-self:flex-start}
.hkw-msgrow.me{align-self:flex-end;align-items:flex-end}
.hkw-bubble{padding:12px 16px;font-size:14.5px;line-height:1.5;border-radius:var(--r-md);width:fit-content}
.hkw-bubble.ai{background:var(--ai-bubble);backdrop-filter:blur(6px);border-bottom-left-radius:5px}
.hkw-bubble.me{background:var(--user-bubble);border-bottom-right-radius:5px;color:#fff}
.hkw-bubble .act{color:var(--t2);font-style:italic}
.hkw-bubble.me .act{color:rgba(255,255,255,.72)}
.hkw-bubble .pin{position:absolute;top:-7px;left:-7px;width:20px;height:20px;border-radius:50%;background:var(--gold);color:var(--on-gold);display:grid;place-items:center}
.hkw-bubble .pin svg{width:11px;height:11px;stroke-width:2.2}
/* hover action bar (Telloria vocabulary: voice/copy/edit/regenerate/pin/branch/delete) */
.hkw-mact{display:flex;gap:2px;margin-top:5px;opacity:0;transition:opacity .12s;background:rgba(18,18,22,.88);
  backdrop-filter:blur(8px);border-radius:var(--r-full);padding:3px;width:fit-content}
.hkw-msgrow:hover .hkw-mact,.hkw-msgrow.demo-hover .hkw-mact{opacity:1}
.hkw-mact button{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;color:var(--t2)}
.hkw-mact button:hover{color:#fff;background:rgba(255,255,255,.1)}
.hkw-mact button.danger:hover{color:var(--error)}
.hkw-mact svg{width:14px;height:14px}
.hkw-introcard{align-self:stretch;background:rgba(20,20,24,.72);backdrop-filter:blur(8px);border-radius:var(--r-md);padding:18px;position:relative}
.hkw-introcard .ictop{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.hkw-introcard .icnm{font-size:18px;font-weight:800}
.hkw-introcard .icby{font-size:12px;color:var(--t2)}
.hkw-introcard .iccount{margin-left:auto;display:flex;align-items:center;gap:5px;color:var(--t2);font-size:12px}
.hkw-introcard .iccount svg{width:14px;height:14px}
.hkw-introcard p{font-size:13.5px;color:var(--t1);line-height:1.55}
.hkw-suggest{display:flex;flex-direction:column;gap:8px;align-self:stretch;max-width:74%}
.hkw-suggest .s{display:flex;align-items:flex-start;gap:10px;background:rgba(28,28,32,.85);backdrop-filter:blur(6px);
  border-radius:14px;padding:11px 15px;font-size:13.5px;color:var(--t1);line-height:1.4;cursor:pointer;text-align:left}
.hkw-suggest .s:hover{background:rgba(40,40,46,.9)}
.hkw-suggest .s svg{width:15px;height:15px;color:var(--t3);flex:none;margin-top:2px}
.hkw-typing{display:flex;gap:4px;align-items:center;background:var(--ai-bubble);backdrop-filter:blur(6px);
  border-radius:var(--r-md);border-bottom-left-radius:5px;padding:14px 16px;width:fit-content}
.hkw-typing i{width:7px;height:7px;border-radius:50%;background:var(--t3);animation:hkty 1.2s infinite}
.hkw-typing i:nth-child(2){animation-delay:.18s}.hkw-typing i:nth-child(3){animation-delay:.36s}
@keyframes hkty{0%,60%,100%{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
/* generated media in-flow */
.hkw-genimg{width:200px;border-radius:14px;overflow:hidden;position:relative;cursor:pointer}
.hkw-genimg img{width:100%;aspect-ratio:3/4;object-fit:cover}
.hkw-genimg .gl{position:absolute;left:8px;bottom:8px;height:22px;padding:0 9px;border-radius:var(--r-full);
  background:rgba(0,0,0,.55);backdrop-filter:blur(4px);font-size:11px;display:flex;align-items:center;gap:5px}
.hkw-genimg .gl svg{width:12px;height:12px;color:var(--gem)}
.hkw-scene{align-self:stretch;max-width:74%;border-radius:var(--r-md);overflow:hidden;position:relative;background:var(--card);cursor:pointer}
.hkw-scene .sc{position:relative;aspect-ratio:16/7}
.hkw-scene .sc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hkw-scene .sc::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(8,8,10,.85),transparent 60%)}
.hkw-scene .st{position:absolute;left:14px;bottom:10px;z-index:2;font-size:13px;font-weight:700}
.hkw-scene .st span{display:block;font-size:11px;font-weight:500;color:var(--t2);margin-top:2px}
.hkw-scene .play{position:absolute;inset:0;margin:auto;width:44px;height:44px;border-radius:50%;background:rgba(0,0,0,.5);
  backdrop-filter:blur(4px);display:grid;place-items:center;z-index:2}
.hkw-scene .play svg{width:18px;height:18px;color:#fff}
/* quick prompts + input (.hk-chatinput port) */
.cc-quick{position:relative;z-index:3;display:flex;gap:8px;padding:4px 22px 8px;overflow-x:auto;flex:none;justify-content:center}
.cc-quick::-webkit-scrollbar{height:0}
.cc-quick .q{flex:none;height:32px;padding:0 14px;border-radius:var(--r-full);background:rgba(40,40,46,.6);backdrop-filter:blur(8px);
  font-size:12.5px;font-weight:600;color:var(--t1);display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.cc-quick .q:hover{background:rgba(60,60,68,.75)}
.cc-quick .q svg{width:13px;height:13px;color:var(--brand)}
.cc-input{position:relative;z-index:3;flex:none;display:flex;align-items:center;gap:9px;padding:6px 22px 16px;max-width:804px;width:100%;margin:0 auto}
.cc-circ{width:42px;height:42px;border-radius:50%;background:rgba(40,40,46,.7);backdrop-filter:blur(8px);display:grid;place-items:center;flex:none;color:#fff;cursor:pointer}
.cc-circ:hover{background:rgba(60,60,68,.8)}
.cc-circ svg{width:19px;height:19px}
.cc-field{flex:1;height:46px;border-radius:var(--r-full);background:rgba(40,40,46,.7);backdrop-filter:blur(8px);
  display:flex;align-items:center;gap:8px;padding:0 6px 0 16px}
.cc-field .brackets{color:var(--t3);font-size:14px;font-weight:600;cursor:pointer;flex:none}
.cc-field .brackets:hover{color:var(--brand)}
.cc-field input{flex:1;font-size:14.5px;min-width:0}
.cc-field input::placeholder{color:var(--t3)}
.cc-field .mic{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:var(--t2);flex:none;cursor:pointer}
.cc-field .mic:hover{color:#fff}
.cc-field .send{width:34px;height:34px;border-radius:50%;background:var(--brand);display:grid;place-items:center;flex:none;color:#fff;cursor:pointer}
.cc-field .send:hover{background:var(--brand-strong)}
.cc-field .send svg{width:17px;height:17px;stroke-width:2.4}
/* right panel: memory / model / settings */
.cp-panel{border-left:1px solid var(--divider);background:var(--bg);display:flex;flex-direction:column;min-height:0}
.cp-tabs{display:flex;gap:4px;padding:12px 14px 10px;flex:none}
.cp-tabs button{flex:1;height:34px;border-radius:var(--r-full);font-size:13px;font-weight:700;color:var(--t2);background:var(--card)}
.cp-tabs button.on{color:#fff;background:var(--brand-weak);box-shadow:inset 0 0 0 1px var(--brand)}
.cp-body{flex:1;overflow-y:auto;min-height:0;padding:4px 14px 16px}
.cp-body::-webkit-scrollbar{width:0}
.cp-note{font-size:12px;color:var(--t3);line-height:1.5;padding:2px 2px 10px}
.cp-quota{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--t2);padding:0 2px 10px}
.cp-quota .bar{flex:1;height:5px;border-radius:var(--r-full);background:var(--card-3);overflow:hidden}
.cp-quota .bar i{display:block;height:100%;background:var(--brand-grad)}
.cp-pin{background:var(--card);border-radius:var(--r-sm);padding:11px 12px;margin-bottom:9px;position:relative}
.cp-pin p{font-size:12.5px;line-height:1.5;color:var(--t1)}
.cp-pin .note{font-size:11px;color:var(--brand);margin-top:5px;display:flex;align-items:center;gap:5px}
.cp-pin .note svg{width:11px;height:11px}
.cp-pin .un{position:absolute;top:8px;right:8px;color:var(--t3);width:22px;height:22px;display:grid;place-items:center}
.cp-pin .un:hover{color:#fff}.cp-pin .un svg{width:13px;height:13px}
.cp-day{font-size:11px;color:var(--t3);letter-spacing:.08em;text-transform:uppercase;padding:10px 2px 7px}
.cp-journal{border-left:2px solid var(--card-3);margin-left:5px;padding:2px 0 2px 12px;margin-bottom:10px}
.cp-journal p{font-size:12.5px;color:var(--t2);line-height:1.55}
.cp-journal b{color:var(--t1);font-weight:600}
/* model select cards */
.cp-model{background:var(--card);border-radius:var(--r-sm);padding:13px 14px;margin-bottom:9px;display:flex;gap:11px;align-items:flex-start;cursor:pointer;position:relative}
.cp-model.on{box-shadow:inset 0 0 0 1.5px var(--brand);background:var(--brand-weak)}
.cp-model .mi{width:34px;height:34px;border-radius:10px;background:var(--brand-grad);display:grid;place-items:center;flex:none;color:#fff}
.cp-model .mi svg{width:17px;height:17px}
.cp-model.max .mi{background:linear-gradient(135deg,#FFD36E,#FF9B4A);color:#5a2d00}
.cp-model b{font-size:13.5px;font-weight:700;display:flex;align-items:center;gap:7px}
.cp-model p{font-size:11.5px;color:var(--t2);line-height:1.45;margin-top:3px}
.cp-model .hkw-radio{position:absolute;top:13px;right:12px}
/* radio (.hk-radio port) */
.hkw-radio{width:18px;height:18px;border-radius:50%;border:1.6px solid var(--t3);flex:none;display:grid;place-items:center}
.hkw-radio.on{border-color:var(--brand);background:var(--brand)}
.hkw-radio.on::after{content:"";width:7px;height:7px;border-radius:50%;background:#fff}
/* settings rows reused in panel */
.cp-srow{display:flex;align-items:center;gap:10px;padding:12px 4px;border-bottom:1px solid var(--divider);font-size:13.5px}
.cp-srow:last-child{border-bottom:0}
.cp-srow .sl{flex:1}
.cp-srow .sv{color:var(--t2);font-size:12.5px}
/* segment (.hk-seg port) */
.hkw-seg{display:flex;gap:8px}
.hkw-seg .o{flex:1;height:36px;border-radius:10px;background:var(--card-2);display:grid;place-items:center;font-size:12.5px;font-weight:600;color:var(--t2);cursor:pointer}
.hkw-seg .o.on{background:#E9EAEC;color:var(--on-light)}
/* toggle (.hk-toggle port) */
.hkw-toggle{width:44px;height:26px;border-radius:var(--r-full);background:var(--brand);position:relative;flex:none;cursor:pointer}
.hkw-toggle::after{content:"";position:absolute;top:2.5px;right:2.5px;width:21px;height:21px;border-radius:50%;background:#fff;transition:all .15s}
.hkw-toggle.off{background:var(--card-3)}
.hkw-toggle.off::after{right:auto;left:2.5px}

/* ============================================================ gift grid (.hk-gift port) */
.hkw-giftgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.hkw-gift{aspect-ratio:1/1.12;border-radius:14px;background:var(--card-2);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:7px;position:relative;padding:8px;cursor:pointer}
.hkw-gift:hover{background:var(--card-3)}
.hkw-gift.on{box-shadow:inset 0 0 0 1.5px var(--brand);background:var(--brand-weak)}
.hkw-gift .gph{width:46px;height:46px;border-radius:12px;background:linear-gradient(135deg,#ff9ed1,#7b4bd6);display:grid;place-items:center;font-size:22px}
.hkw-gift .gn{font-size:11px;color:var(--t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.hkw-gift .gp{font-size:11px;color:var(--gem);font-weight:700;display:flex;align-items:center;gap:3px}
.hkw-gift .gp svg{width:11px;height:11px}

/* ============================================================ overlay / dialog / sheet / toast */
.hkw-overlay{position:absolute;inset:0;z-index:80;background:rgba(0,0,0,.6);display:none;place-items:center;padding:24px}
.hkw-overlay.on{display:grid}
.hkw-overlay.bottom{align-items:end;justify-items:center}
.hkw-dialog{width:380px;max-width:94%;background:var(--card-2);border-radius:var(--r-lg);padding:24px 22px 20px;box-shadow:var(--shadow-device)}
.hkw-dialog h3{font-size:19px;font-weight:800;margin-bottom:8px}
.hkw-dialog p{font-size:13.5px;color:var(--t2);line-height:1.55;margin-bottom:16px}
.hkw-dialog p b{color:#fff}
.hkw-dialog .check{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--t2);margin-bottom:16px;cursor:pointer}
.hkw-sheet{width:560px;max-width:96%;background:var(--sheet);border-radius:22px;padding:18px 20px 20px;position:relative;box-shadow:var(--shadow-device)}
.hkw-sheet .sheet-title{font-size:17px;font-weight:800;text-align:center;margin-bottom:12px}
.hkw-sheet .sheet-x{position:absolute;right:14px;top:14px;color:var(--t2);width:30px;height:30px;display:grid;place-items:center}
.hkw-sheet .sheet-x:hover{color:#fff}
.hkw-sheet .sheet-x svg{width:18px;height:18px}
.hkw-toast{position:absolute;left:50%;top:76px;transform:translateX(-50%);z-index:95;display:inline-flex;align-items:center;gap:8px;
  height:40px;padding:0 18px;border-radius:var(--r-full);background:rgba(20,20,24,.92);backdrop-filter:blur(10px);
  font-size:13px;font-weight:500;box-shadow:var(--shadow);white-space:nowrap}
.hkw-toast svg{width:16px;height:16px}
.hkw-toast .ok{color:var(--success)}

/* ============================================================ companion page */
.st-layout{flex:1;display:grid;grid-template-columns:1fr 392px;min-height:0;overflow:hidden}
.st-stage{position:relative;overflow:hidden;display:flex;flex-direction:column}
.st-stage .bg{position:absolute;inset:0}
.st-stage .bg img{width:100%;height:100%;object-fit:cover;object-position:center 14%}
.st-stage::after{content:"";position:absolute;inset:0;background:linear-gradient(to right,transparent 55%,rgba(10,10,11,.55) 92%),linear-gradient(to top,rgba(8,8,10,.7),transparent 30%);pointer-events:none}
.st-glow{position:absolute;left:50%;bottom:-120px;transform:translateX(-50%);width:560px;height:280px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,119,183,.35),transparent 65%);filter:blur(12px);animation:stbr 4.2s ease-in-out infinite}
@keyframes stbr{0%,100%{opacity:.6}50%{opacity:1}}
.st-speech{position:absolute;left:34px;top:96px;z-index:4;max-width:340px;background:rgba(20,20,24,.78);backdrop-filter:blur(10px);
  border-radius:var(--r-md);border-bottom-left-radius:5px;padding:14px 17px;font-size:14px;line-height:1.55}
.st-name{position:absolute;left:34px;bottom:30px;z-index:4}
.st-name b{font-size:26px;font-weight:800;display:flex;align-items:center;gap:10px}
.st-name span{font-size:13px;color:var(--t2)}
.st-wardrobe{position:absolute;right:24px;bottom:26px;z-index:4;display:flex;gap:9px}
.st-rail{border-left:1px solid var(--divider);background:var(--bg);overflow-y:auto;min-height:0;padding:18px 18px 24px;display:flex;flex-direction:column;gap:14px}
.st-rail::-webkit-scrollbar{width:0}
.st-card{background:var(--card);border-radius:var(--r-md);padding:16px}
.st-card h3{font-size:14px;font-weight:800;display:flex;align-items:center;gap:8px;margin-bottom:12px}
.st-card h3 .hint{margin-left:auto;font-size:11.5px;font-weight:600;color:var(--t3)}
/* intimacy (.hk-intimacy port) */
.hkw-intimacy{display:flex;flex-direction:column;gap:9px}
.hkw-intimacy .top{display:flex;align-items:center;gap:8px}
.hkw-intimacy .lv{font-size:13px;color:var(--t1);font-weight:700;display:flex;align-items:center;gap:6px}
.hkw-intimacy .lv svg{width:15px;height:15px;color:var(--brand)}
.hkw-intimacy .frac{margin-left:auto;font-size:12px;color:var(--t3)}
.hkw-intimacy .bar{height:8px;border-radius:var(--r-full);background:var(--card-3);overflow:hidden}
.hkw-intimacy .bar i{display:block;height:100%;background:var(--brand-grad)}
.hkw-intimacy .next{font-size:11.5px;color:var(--t3);display:flex;align-items:center;gap:6px}
.hkw-intimacy .next svg{width:12px;height:12px;color:var(--gold)}
/* daily interaction checklist */
.st-task{display:flex;align-items:center;gap:11px;padding:9px 0;border-bottom:1px solid var(--divider);font-size:13px}
.st-task:last-child{border-bottom:0}
.st-task .ck{width:20px;height:20px;border-radius:50%;border:1.6px solid var(--t3);display:grid;place-items:center;flex:none}
.st-task .ck.done{border-color:var(--success);background:var(--success);color:#06140c}
.st-task .ck svg{width:11px;height:11px;stroke-width:2.6}
.st-task .tl{flex:1}
.st-task.done .tl{color:var(--t3);text-decoration:line-through}
.st-task .xp{font-size:11.5px;font-weight:700;color:var(--brand)}
/* games grid */
.st-games{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.st-game{border-radius:var(--r-sm);background:var(--card-2);padding:12px;display:flex;flex-direction:column;gap:7px;cursor:pointer}
.st-game:hover{background:var(--card-3)}
.st-game .gi{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-size:17px;background:var(--brand-weak)}
.st-game b{font-size:12.5px;font-weight:700}
.st-game span{font-size:10.5px;color:var(--t3)}
/* roster strip */
.st-roster{display:flex;gap:9px;overflow-x:auto;padding-bottom:2px}
.st-roster::-webkit-scrollbar{height:0}
.st-roster .ra{flex:none;display:flex;flex-direction:column;align-items:center;gap:5px;cursor:pointer;width:56px}
.st-roster .ra span{font-size:10.5px;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:56px}
.st-roster .ra.on span{color:var(--brand);font-weight:700}
.st-roster .ra.on .hkw-av{box-shadow:0 0 0 2px var(--brand)}

/* ============================================================ call page */
.call-stage{flex:1;position:relative;overflow:hidden;display:flex;flex-direction:column}
.call-bg{position:absolute;inset:0}
.call-bg img{width:100%;height:100%;object-fit:cover;object-position:center 12%}
.call-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(8,8,10,.5),transparent 24%,transparent 56%,rgba(8,8,10,.8))}
.call-pill{position:absolute;left:50%;top:22px;transform:translateX(-50%);z-index:5;background:rgba(0,0,0,.45);backdrop-filter:blur(8px);
  border-radius:var(--r-full);padding:9px 18px;font-size:14px;font-weight:600;display:flex;align-items:center;gap:10px}
.call-pill .rec{width:8px;height:8px;border-radius:50%;background:var(--error);animation:stbr 1.6s infinite}
.call-pill .eq{display:flex;align-items:flex-end;gap:2px;height:14px}
.call-pill .eq i{width:3px;border-radius:3px;background:var(--brand);animation:calleq 1s ease-in-out infinite}
.call-pill .eq i:nth-child(2){animation-delay:.15s}.call-pill .eq i:nth-child(3){animation-delay:.3s}.call-pill .eq i:nth-child(4){animation-delay:.45s}
@keyframes calleq{0%,100%{height:4px}50%{height:14px}}
.call-rail{position:absolute;right:20px;top:50%;transform:translateY(-50%);z-index:5;display:flex;flex-direction:column;gap:13px}
.call-rail .r{width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.12);backdrop-filter:blur(8px);
  display:grid;place-items:center;color:#fff;cursor:pointer;position:relative}
.call-rail .r:hover{background:rgba(255,255,255,.2)}
.call-rail .r.off{background:rgba(255,255,255,.06);color:var(--t3)}
.call-rail .r svg{width:21px;height:21px}
.call-rail .r .tip{position:absolute;right:56px;top:50%;transform:translateY(-50%);background:rgba(0,0,0,.7);font-size:11px;
  padding:4px 9px;border-radius:7px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .12s}
.call-rail .r:hover .tip{opacity:1}
.call-caption{position:absolute;left:28px;bottom:120px;z-index:5;max-width:440px;background:rgba(20,20,24,.7);backdrop-filter:blur(10px);
  border-radius:var(--r-md);border-bottom-left-radius:5px;padding:13px 16px;font-size:14px;line-height:1.5}
.call-caption .cn{font-size:11px;color:var(--brand);font-weight:700;margin-bottom:3px}
.call-quota{position:absolute;left:50%;bottom:88px;transform:translateX(-50%);z-index:5;background:rgba(0,0,0,.5);backdrop-filter:blur(8px);
  border-radius:var(--r-full);padding:7px 16px;font-size:12.5px;color:var(--t2);display:flex;gap:6px;align-items:center}
.call-quota a{color:var(--gold);font-weight:700}
.call-bar{position:relative;z-index:5;flex:none;display:flex;align-items:center;gap:12px;padding:0 24px 22px;margin-top:auto;max-width:880px;width:100%;align-self:center}
.call-bar .field{flex:1;height:48px;border-radius:var(--r-full);background:rgba(255,255,255,.14);backdrop-filter:blur(8px);
  display:flex;align-items:center;padding:0 18px;color:var(--t2);font-size:14px}
.call-bar .field input{flex:1;color:#fff;min-width:0}
.call-bar .mic,.call-bar .hang{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;flex:none;cursor:pointer}
.call-bar .mic{background:rgba(255,255,255,.14);backdrop-filter:blur(8px);color:#fff}
.call-bar .hang{background:var(--hangup);color:#fff}
.call-bar .hang:hover{filter:brightness(1.1)}
.call-bar svg{width:21px;height:21px}

/* ============================================================ chats page (full list) */
.ch-wrap{max-width:920px;margin:0 auto;width:100%;padding:18px var(--gutter) 30px}
.ch-row{display:flex;align-items:center;gap:14px;padding:13px 14px;border-radius:var(--r-md);cursor:pointer;position:relative}
.ch-row:hover{background:var(--card)}
.ch-row .cmid{flex:1;min-width:0}
.ch-row .cn{font-size:15px;font-weight:700;display:flex;align-items:center;gap:8px}
.ch-row .cn .lv{font-size:10.5px;font-weight:800;color:var(--brand);background:var(--brand-weak);border-radius:var(--r-full);padding:2px 8px}
.ch-row .cp{font-size:13px;color:var(--t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px;max-width:560px}
.ch-row .cp b{color:var(--t1);font-weight:600}
.ch-row .right{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex:none}
.ch-row .ct{font-size:12px;color:var(--t3)}
.ch-row .unread{min-width:19px;height:19px;border-radius:var(--r-full);background:var(--brand);color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center;padding:0 6px}
.ch-row .hover-acts{position:absolute;right:14px;top:50%;transform:translateY(-50%);display:none;gap:6px;background:var(--card-2);border-radius:var(--r-full);padding:4px}
.ch-row:hover .hover-acts{display:flex}
.ch-row .hover-acts button{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:var(--t2)}
.ch-row .hover-acts button:hover{color:#fff;background:var(--card-3)}
.ch-row .hover-acts svg{width:15px;height:15px}

/* ============================================================ create page */
.hkw-steps{display:flex;gap:8px;align-items:center}
.hkw-steps .st{flex:1;display:flex;flex-direction:column;gap:7px;cursor:pointer}
.hkw-steps .st i{height:4px;border-radius:var(--r-full);background:var(--card-3);display:block}
.hkw-steps .st.on i,.hkw-steps .st.done i{background:var(--brand-grad)}
.hkw-steps .st span{font-size:12px;font-weight:600;color:var(--t3)}
.hkw-steps .st.on span{color:#fff}
.hkw-steps .st.done span{color:var(--t2)}
.cr-layout{display:grid;grid-template-columns:1fr 360px;gap:30px;align-items:start;padding:20px 0 26px}
.hkw-formcard{background:var(--card);border-radius:var(--r-md);padding:20px;margin-bottom:16px}
.hkw-formcard h3{font-size:15px;font-weight:800;margin-bottom:14px}
.hkw-label{font-size:13.5px;font-weight:600;margin:14px 0 8px;display:flex;align-items:center}
.hkw-label:first-of-type{margin-top:0}
.hkw-label .req{color:var(--brand);margin-left:3px}
.hkw-label .note{color:var(--t3);font-weight:400;font-size:11.5px;margin-left:auto}
.hkw-input{height:48px;border-radius:var(--r-sm);background:var(--card-2);display:flex;align-items:center;padding:0 15px;gap:10px}
.hkw-input input{flex:1;font-size:14px;min-width:0}
.hkw-input input::placeholder{color:var(--t3)}
.hkw-textarea{border-radius:var(--r-sm);background:var(--card-2);padding:13px 15px;min-height:110px;position:relative}
.hkw-textarea textarea{width:100%;resize:none;font-size:13.5px;line-height:1.55;min-height:84px;display:block}
.hkw-textarea textarea::placeholder{color:var(--t3)}
.hkw-textarea .count{position:absolute;right:13px;bottom:9px;font-size:11.5px;color:var(--t3)}
.hkw-aiexpand{display:inline-flex;align-items:center;gap:6px;color:var(--t1);font-size:12.5px;font-weight:700;
  height:30px;padding:0 12px;border-radius:var(--r-full);background:var(--card-3);cursor:pointer}
.hkw-aiexpand:hover{background:var(--brand-weak)}
.hkw-aiexpand svg{width:14px;height:14px;color:var(--brand)}
.cr-variants{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.cr-variants .v{position:relative;aspect-ratio:3/4;border-radius:var(--r-sm);overflow:hidden;background:#1a1a1f;cursor:pointer}
.cr-variants .v img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cr-variants .v.on{box-shadow:inset 0 0 0 2px var(--brand),0 0 0 2px var(--brand)}
.cr-variants .v .vk{position:absolute;top:7px;right:7px;width:22px;height:22px;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;z-index:2}
.cr-variants .v .vk svg{width:12px;height:12px;stroke-width:2.6}
.cr-preview{position:sticky;top:calc(var(--topnav-h) + 18px)}
.cr-preview .plabel{font-size:11.5px;color:var(--t3);letter-spacing:.1em;text-transform:uppercase;margin-bottom:10px;text-align:center}
.cr-foot{display:flex;gap:12px;justify-content:flex-end;padding:6px 0 28px}
.cr-foot .hkw-btn{min-width:150px}
.hkw-upload{aspect-ratio:1;width:120px;border-radius:var(--r-sm);background:var(--card-2);border:1.5px dashed rgba(255,255,255,.2);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;color:var(--t3);font-size:11.5px;cursor:pointer}
.hkw-upload svg{width:22px;height:22px}
.hkw-upload:hover{border-color:var(--brand);color:var(--t2)}

/* ============================================================ membership / paywall */
.pw-hero{position:relative;text-align:center;padding:42px 0 26px;overflow:hidden}
.pw-hero::before{content:"";position:absolute;inset:auto 8% -150px;height:300px;border-radius:50%;
  background:radial-gradient(circle at 50% 100%,rgba(255,110,180,.5),rgba(150,60,200,.28) 46%,transparent 70%);filter:blur(6px)}
.pw-hero h1{position:relative;font-size:36px;font-weight:800;letter-spacing:-.5px;font-style:italic}
.pw-hero h1 i{color:var(--brand);font-style:inherit}
.pw-hero p{position:relative;color:var(--t2);font-size:14.5px;margin-top:9px}
.pw-toggle{position:relative;display:inline-flex;background:var(--card);border-radius:var(--r-full);padding:4px;margin-top:20px}
.pw-toggle button{height:38px;padding:0 22px;border-radius:var(--r-full);font-size:13.5px;font-weight:700;color:var(--t2);display:flex;align-items:center;gap:8px}
.pw-toggle button.on{background:var(--card-3);color:#fff}
.pw-toggle .save{font-size:10.5px;font-weight:800;background:var(--brand);color:#fff;border-radius:var(--r-full);padding:2px 8px}
.pw-plans{display:grid;grid-template-columns:repeat(2,minmax(0,460px));gap:22px;justify-content:center;padding:26px 0 8px}
.pw-plan{position:relative;border-radius:var(--r-lg);background:var(--card);overflow:hidden;display:flex;flex-direction:column}
.pw-plan.pro{box-shadow:inset 0 0 0 1.5px rgba(255,119,183,.5)}
.pw-plan.ultra{box-shadow:inset 0 0 0 1.5px rgba(246,184,38,.55)}
.pw-plan .ribbon{position:absolute;top:14px;right:-34px;transform:rotate(38deg);background:var(--gold);color:var(--on-gold);
  font-size:10.5px;font-weight:800;padding:4px 38px;letter-spacing:.04em;z-index:3}
.pw-planhero{height:118px;display:grid;place-items:center;position:relative;overflow:hidden;flex:none}
.pw-planhero::before{content:"";position:absolute;inset:auto -10% -80px;height:200px;border-radius:50%;
  background:radial-gradient(circle at 50% 100%,var(--pw-glow,rgba(255,110,180,.65)),rgba(150,60,200,.3) 44%,transparent 68%)}
.pw-plan.ultra .pw-planhero::before{--pw-glow:rgba(246,184,38,.55)}
.pw-planhero .h{position:relative;text-align:center}
.pw-planhero .h b{font-size:26px;font-weight:800;display:flex;align-items:center;gap:10px;justify-content:center}
.pw-planhero .h span{color:var(--t2);font-size:13px;display:block;margin-top:3px}
.hkw-perk{display:flex;gap:13px;padding:11px 22px;align-items:flex-start}
.hkw-perk .pi{width:26px;flex:none;color:var(--brand);display:flex;justify-content:center;margin-top:2px}
.pw-plan.ultra .hkw-perk .pi{color:var(--gold)}
.hkw-perk .pi svg{width:19px;height:19px}
.hkw-perk b{font-size:14px;font-weight:700;display:flex;align-items:center;gap:8px}
.hkw-perk .d{display:block;font-size:12px;color:var(--t2);margin-top:2px;line-height:1.45}
.hkw-price{margin:8px 18px;padding:14px 18px;border-radius:14px;background:var(--card-2);position:relative;
  display:flex;align-items:center;justify-content:space-between;cursor:pointer}
.hkw-price.on{background:transparent;box-shadow:inset 0 0 0 1.5px #fff}
.hkw-price .pl b{font-size:15px;font-weight:800;display:block}
.hkw-price .pl .sm{font-size:11px;color:var(--t3);margin-top:3px;display:block}
.hkw-price .pr{text-align:right}
.hkw-price .pr b{font-size:17px;font-weight:800}
.hkw-price .pr .per{font-size:11.5px;color:var(--t3)}
.hkw-price .strike{text-decoration:line-through;color:var(--t3);font-weight:500;font-size:12px;margin-right:7px}
.hkw-price .off{position:absolute;top:-9px;right:12px;background:var(--brand);font-size:10.5px;font-weight:800;padding:3px 10px;border-radius:var(--r-full)}
.pw-cta{padding:14px 18px 20px;margin-top:auto}
.pw-compare{width:100%;border-collapse:collapse;font-size:13px;margin-top:8px}
.pw-compare th,.pw-compare td{padding:12px 14px;text-align:center;border-bottom:1px solid var(--divider)}
.pw-compare th{font-size:13px;font-weight:800}
.pw-compare td:first-child,.pw-compare th:first-child{text-align:left;color:var(--t2)}
.pw-compare .pk{color:var(--brand);font-weight:700}
.pw-compare .gd{color:var(--gold);font-weight:700}
.pw-compare svg{width:16px;height:16px;display:inline-block;vertical-align:-3px}
.pw-faq{max-width:760px;margin:0 auto}
.pw-faq details{background:var(--card);border-radius:var(--r-sm);padding:14px 18px;margin-bottom:10px}
.pw-faq summary{font-size:14px;font-weight:700;cursor:pointer;list-style:none;display:flex;align-items:center}
.pw-faq summary::after{content:"+";margin-left:auto;color:var(--t3);font-size:18px}
.pw-faq details[open] summary::after{content:"–"}
.pw-faq p{font-size:13px;color:var(--t2);line-height:1.6;margin-top:9px}
.pw-pay{display:flex;align-items:center;justify-content:center;gap:14px;color:var(--t3);font-size:12.5px;padding:16px 0 4px;flex-wrap:wrap}
.pw-pay .pm{height:30px;padding:0 13px;border-radius:8px;background:var(--card-2);display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:var(--t2)}

/* ============================================================ wallet */
.wa-balances{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:18px}  /* v5: two currencies only (Gems + Credits) */
.wa-bal{background:var(--card);border-radius:var(--r-md);padding:18px;position:relative;overflow:hidden}
.wa-bal::before{content:"";position:absolute;right:-46px;top:-46px;width:130px;height:130px;border-radius:50%;background:radial-gradient(circle,var(--wa,rgba(90,214,255,.22)),transparent 70%)}
.wa-bal.gem{--wa:rgba(90,214,255,.22)} .wa-bal.energy{--wa:rgba(123,156,255,.22)} .wa-bal.coin{--wa:rgba(255,194,75,.2)}
.wa-bal .wt{font-size:12.5px;color:var(--t2);font-weight:600;display:flex;align-items:center;gap:7px}
.wa-bal .wt svg{width:16px;height:16px}
.wa-bal.gem .wt svg{color:var(--gem)} .wa-bal.energy .wt svg{color:var(--energy)} .wa-bal.coin .wt svg{color:var(--coin)}
.wa-bal b{font-size:30px;font-weight:800;display:block;margin:8px 0 4px}
.wa-bal .ws{font-size:12px;color:var(--t3);display:flex;align-items:center;gap:6px}
.wa-bal .ws svg{width:12px;height:12px}
.wa-bal .hkw-btn{position:absolute;right:14px;top:14px}
.wa-packs{display:grid;grid-template-columns:repeat(auto-fill,minmax(176px,1fr));gap:14px}
.wa-pack{position:relative;background:var(--card);border-radius:var(--r-md);padding:18px 14px 14px;text-align:center;cursor:pointer;transition:transform .12s}
.wa-pack:hover{transform:translateY(-3px)}
.wa-pack.hot{box-shadow:inset 0 0 0 1.5px var(--brand)}
.wa-pack .tag{position:absolute;top:-9px;left:50%;transform:translateX(-50%);background:var(--brand);color:#fff;font-size:10px;font-weight:800;border-radius:var(--r-full);padding:3px 10px;letter-spacing:.04em}
.wa-pack .ic{font-size:30px;line-height:1;filter:drop-shadow(0 4px 10px rgba(90,214,255,.4))}
.wa-pack b{display:block;font-size:18px;font-weight:800;margin:8px 0 2px}
.wa-pack .bonus{font-size:11px;color:var(--gem);font-weight:700;min-height:15px}
.wa-pack .hkw-btn{margin-top:10px;width:100%}
.wa-table{width:100%;border-collapse:collapse;font-size:13px}
.wa-table th{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--t3);text-align:left;padding:10px 14px;border-bottom:1px solid var(--divider)}
.wa-table td{padding:12px 14px;border-bottom:1px solid var(--divider);color:var(--t2)}
.wa-table td b{color:var(--t1);font-weight:600}
.wa-table .plus{color:var(--success);font-weight:700}.wa-table .minus{color:var(--t1);font-weight:700}
.wa-upsell{display:flex;align-items:center;gap:16px;background:linear-gradient(100deg,rgba(255,119,183,.14),rgba(123,92,255,.12));
  border:1px solid rgba(255,119,183,.28);border-radius:var(--r-md);padding:16px 20px;margin:18px 0}
.wa-upsell .ut b{font-size:15px;font-weight:800}
.wa-upsell .ut p{font-size:12.5px;color:var(--t2);margin-top:3px}
.wa-upsell .hkw-btn{margin-left:auto}

/* ============================================================ check-in / rewards */
.rw-layout{display:grid;grid-template-columns:1.25fr 1fr;gap:22px;align-items:start;padding:20px 0 30px}
.rw-card{background:var(--card);border-radius:var(--r-lg);padding:22px}
.rw-card>h2{font-size:19px;font-weight:800;display:flex;align-items:center;gap:10px}
.rw-card>h2 .sub{margin-left:auto;font-size:12px;color:var(--t3);font-weight:500}
.rw-card>p{font-size:12.5px;color:var(--t2);margin-top:5px}
.rw-days{display:grid;grid-template-columns:repeat(7,1fr);gap:10px;margin:18px 0 16px}
.rw-day{position:relative;border-radius:var(--r-sm);background:var(--card-2);padding:12px 6px 10px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px}
.rw-day .d{font-size:10.5px;font-weight:800;letter-spacing:.06em;color:var(--t3)}
.rw-day .ic{font-size:21px;line-height:1.2}
.rw-day .amt{font-size:11px;font-weight:700;color:var(--t2)}
.rw-day.got{opacity:.55}
.rw-day.got::after{content:"";position:absolute;inset:0;border-radius:var(--r-sm);background:rgba(10,10,11,.25)}
.rw-day.got .ck{position:absolute;top:6px;right:6px;width:18px;height:18px;border-radius:50%;background:var(--success);color:#06140c;display:grid;place-items:center;z-index:2}
.rw-day.got .ck svg{width:10px;height:10px;stroke-width:3}
.rw-day.today{box-shadow:inset 0 0 0 1.5px var(--brand);background:var(--brand-weak);animation:rwbr 2.2s ease-in-out infinite}
@keyframes rwbr{0%,100%{box-shadow:inset 0 0 0 1.5px var(--brand)}50%{box-shadow:inset 0 0 0 1.5px var(--brand),0 0 18px rgba(255,119,183,.45)}}
.rw-day.day7{background:linear-gradient(160deg,rgba(246,184,38,.16),var(--card-2));box-shadow:inset 0 0 0 1px rgba(246,184,38,.4)}
.rw-day.day7 .d{color:var(--gold)}
.rw-streak{font-size:12px;color:var(--t3);display:flex;align-items:center;gap:7px;margin-top:12px}
.rw-streak svg{width:13px;height:13px;color:var(--brand)}
.rw-task{display:flex;align-items:center;gap:13px;padding:13px 0;border-bottom:1px solid var(--divider)}
.rw-task:last-child{border-bottom:0}
.rw-task .ti{width:40px;height:40px;border-radius:var(--r-sm);background:var(--card-2);display:grid;place-items:center;font-size:19px;flex:none}
.rw-task .tm{flex:1;min-width:0}
.rw-task .tm b{font-size:13.5px;font-weight:700;display:block}
.rw-task .tm span{font-size:11.5px;color:var(--t2);display:flex;align-items:center;gap:5px;margin-top:2px}
.rw-task .tm span svg{width:12px;height:12px;color:var(--gem)}
.rw-task .hkw-btn{min-width:74px}
.rw-grand{margin-top:14px;border-radius:var(--r-sm);background:linear-gradient(100deg,rgba(246,184,38,.14),rgba(255,119,183,.1));
  border:1px solid rgba(246,184,38,.35);padding:14px 16px;display:flex;align-items:center;gap:12px}
.rw-grand .gi{font-size:24px}
.rw-grand b{font-size:13.5px;display:block}
.rw-grand span{font-size:11.5px;color:var(--t2)}
.rw-grand .pct{margin-left:auto;font-size:12px;font-weight:800;color:var(--gold)}

/* ============================================================ profile */
.pf-head{display:flex;align-items:center;gap:20px;padding:26px 0 18px}
.pf-head .pmid{flex:1;min-width:0}
.pf-head h1{font-size:26px;font-weight:800;display:flex;align-items:center;gap:12px}
.pf-head .pid{font-size:13px;color:var(--t3);margin-top:4px}
.pf-stats{display:flex;gap:26px;margin-top:10px}
.pf-stats .s b{font-size:16px;font-weight:800}
.pf-stats .s span{font-size:12px;color:var(--t3);margin-left:5px}
.pf-quick{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:8px 0 22px}
.pf-q{display:flex;align-items:center;gap:11px;background:var(--card);border-radius:var(--r-sm);padding:13px 15px;cursor:pointer}
.pf-q:hover{background:var(--card-2)}
.pf-q .qi{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--brand-weak);color:var(--brand);flex:none}
.pf-q .qi svg{width:18px;height:18px}
.pf-q b{font-size:13.5px;font-weight:700;display:block}
.pf-q span{font-size:11px;color:var(--t3)}
.pf-new{border:1.5px dashed rgba(255,255,255,.18);border-radius:var(--r-md);aspect-ratio:184/246;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:9px;color:var(--t3);cursor:pointer;font-size:13px;font-weight:600}
.pf-new svg{width:26px;height:26px}
.pf-new:hover{border-color:var(--brand);color:var(--t1)}

/* ============================================================ settings */
.se-layout{display:grid;grid-template-columns:230px 1fr;gap:30px;align-items:start;padding:24px 0 30px}
.se-nav{position:sticky;top:calc(var(--topnav-h) + 20px);display:flex;flex-direction:column;gap:3px}
.se-nav button{display:flex;align-items:center;gap:11px;height:42px;padding:0 14px;border-radius:var(--r-sm);font-size:14px;font-weight:600;color:var(--t2);text-align:left}
.se-nav button svg{width:18px;height:18px}
.se-nav button:hover{color:#fff;background:var(--card)}
.se-nav button.on{color:#fff;background:var(--brand-weak);box-shadow:inset 0 0 0 1px var(--brand)}
.hkw-group{margin-bottom:20px}
.hkw-group .glabel{color:var(--t2);font-size:12px;letter-spacing:.08em;text-transform:uppercase;padding:0 4px 9px;font-weight:700}
.hkw-list{background:var(--card);border-radius:var(--r-md);overflow:hidden}
.hkw-row{display:flex;align-items:center;gap:13px;padding:15px 18px;position:relative;font-size:14.5px}
.hkw-row+.hkw-row::before{content:"";position:absolute;left:52px;right:0;top:0;height:1px;background:var(--divider)}
.hkw-row .ri{width:22px;height:22px;color:var(--t1);flex:none;display:grid;place-items:center}
.hkw-row .ri svg{width:19px;height:19px}
.hkw-row .rl{flex:1;min-width:0}
.hkw-row .rl .rd{display:block;font-size:12px;color:var(--t3);margin-top:2px}
.hkw-row .rv{color:var(--t2);font-size:13px;display:flex;align-items:center;gap:7px}
.hkw-row .chev{color:var(--t3);width:17px;height:17px;flex:none}
.hkw-row.danger,.hkw-row.danger .ri{color:var(--error)}
.hkw-row.link{cursor:pointer}.hkw-row.link:hover{background:var(--card-2)}

/* ============================================================ scenes feed */
.sn-layout{flex:1;display:grid;grid-template-columns:1fr 300px;min-height:0;overflow:hidden}
.sn-stage{position:relative;display:grid;place-items:center;overflow:hidden;background:radial-gradient(circle at 50% 40%,#141318,var(--bg) 70%)}
.sn-video{position:relative;height:calc(100% - 48px);aspect-ratio:9/16;border-radius:var(--r-lg);overflow:hidden;background:#1a1a1f;box-shadow:var(--shadow-device)}
.sn-video img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sn-video::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(8,8,10,.82),transparent 38%),linear-gradient(to bottom,rgba(8,8,10,.4),transparent 22%)}
.sn-info{position:absolute;left:16px;right:70px;bottom:16px;z-index:3}
.sn-info .who{display:flex;align-items:center;gap:9px;margin-bottom:8px}
.sn-info .who b{font-size:14px;font-weight:800}
.sn-info .tt{font-size:15px;font-weight:700;line-height:1.3}
.sn-info p{font-size:12px;color:var(--t2);margin:5px 0 10px;line-height:1.5}
.sn-rail{position:absolute;right:12px;bottom:18px;z-index:3;display:flex;flex-direction:column;gap:14px;align-items:center}
.sn-rail .r{display:flex;flex-direction:column;align-items:center;gap:4px;color:#fff;font-size:11px;font-weight:700;cursor:pointer}
.sn-rail .r i{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.12);backdrop-filter:blur(8px);display:grid;place-items:center;font-style:normal}
.sn-rail .r:hover i{background:rgba(255,255,255,.2)}
.sn-rail .r svg{width:20px;height:20px}
.sn-rail .r.liked i{background:var(--brand)}
.sn-arrows{position:absolute;right:24px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:10px;z-index:4}
.sn-arrows button{width:42px;height:42px;border-radius:50%;background:var(--card-2);display:grid;place-items:center;color:var(--t2)}
.sn-arrows button:hover{color:#fff;background:var(--card-3)}
.sn-arrows svg{width:18px;height:18px}
.sn-next{border-left:1px solid var(--divider);overflow-y:auto;min-height:0;padding:16px}
.sn-next::-webkit-scrollbar{width:0}
.sn-next h3{font-size:14px;font-weight:800;margin-bottom:12px}
.sn-thumb{display:flex;gap:11px;padding:8px;border-radius:var(--r-sm);cursor:pointer}
.sn-thumb:hover{background:var(--card)}
.sn-thumb.on{background:var(--brand-weak)}
.sn-thumb .th{position:relative;width:64px;aspect-ratio:9/14;border-radius:9px;overflow:hidden;background:#1a1a1f;flex:none}
.sn-thumb .th img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sn-thumb .tm b{font-size:12.5px;font-weight:700;line-height:1.3;display:block}
.sn-thumb .tm span{font-size:11px;color:var(--t3);display:block;margin-top:3px}

/* ============================================================ login card (login_Hakko) + onboarding orb */
.lg-split{flex:1;display:grid;grid-template-columns:1.1fr 1fr;min-height:0;overflow:hidden}
.lg-art{position:relative;overflow:hidden;background:var(--login-bg)}
.lg-art .collage{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:8px;opacity:.5;filter:saturate(.92)}
.lg-art .collage div{position:relative;border-radius:14px;overflow:hidden;background:#1a1a1f}
.lg-art .collage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lg-art::after{content:"";position:absolute;inset:0;background:linear-gradient(to right,transparent 30%,var(--login-bg) 99%),linear-gradient(to top,rgba(15,22,28,.9),transparent 46%)}
.lg-art .slog{position:absolute;left:36px;bottom:38px;z-index:3;max-width:430px}
.lg-art .slog .lo{font-style:italic;font-weight:800;font-size:24px;margin-bottom:14px}
.lg-art .slog h2{font-size:30px;font-weight:800;line-height:1.22;letter-spacing:-.4px}
.lg-art .slog p{color:var(--t2);font-size:14px;margin-top:10px;line-height:1.55}
.lg-side{background:var(--login-bg);display:grid;place-items:center;padding:30px;overflow-y:auto}
.hkw-login{width:400px;max-width:100%;background:var(--login-panel);border:1px solid rgba(255,255,255,.08);
  border-radius:18px;padding:30px 28px 24px;position:relative;backdrop-filter:blur(8px)}
.hkw-login .lo{font-style:italic;font-weight:800;font-size:24px;text-align:center}
.hkw-login h3{text-align:center;font-size:20px;font-weight:800;margin:14px 0 4px}
.hkw-login .sub{text-align:center;color:var(--t2);font-size:13.5px;margin-bottom:10px;line-height:1.5}
.hkw-login .sub b{color:#fff}
.hkw-login .field{height:52px;border-radius:6px;background:var(--login-input);display:flex;align-items:center;
  padding:0 16px;gap:10px;margin:14px 0 12px;border:1px solid transparent}
.hkw-login .field:focus-within{border-color:var(--login-focus)}
.hkw-login .field svg{width:18px;height:18px;color:var(--t3)}
.hkw-login .field input{flex:1;font-size:15px;min-width:0}
.hkw-login .otp{display:flex;gap:10px;justify-content:center;margin:18px 0 10px}
.hkw-login .otp .cell{width:46px;height:54px;border-radius:6px;background:var(--login-input);display:grid;place-items:center;
  font-size:22px;font-weight:500;border:1px solid transparent}
.hkw-login .otp .cell.f{border-color:var(--login-focus)}
.hkw-login .otp .cell.err{border-color:var(--error)}
.hkw-login .resend{text-align:center;font-size:13px;color:var(--login-resend);margin-bottom:8px}
.hkw-login .errline{text-align:center;font-size:12.5px;color:var(--error);margin-bottom:8px}
.hkw-login .primary{width:100%;height:52px;border-radius:var(--r-full);background:var(--login-cta);color:#fff;font-weight:700;font-size:16px;margin-top:8px}
.hkw-login .or{display:flex;align-items:center;gap:12px;color:var(--t3);font-size:12px;margin:18px 0}
.hkw-login .or::before,.hkw-login .or::after{content:"";flex:1;height:1px;background:rgba(255,255,255,.12)}
.hkw-login .social{display:flex;gap:12px}
.hkw-login .social button{flex:1;height:50px;border-radius:var(--r-full);background:#fff;color:#0a0a0b;display:grid;place-items:center}
.hkw-login .social button svg{width:22px;height:22px}
.hkw-login .terms{text-align:center;color:var(--t2);font-size:11.5px;margin-top:16px;line-height:1.5}
.hkw-login .terms a{color:var(--brand)}
.hkw-login .skip{position:absolute;right:18px;top:16px;color:var(--t2);font-size:13px;font-weight:600}
.hkw-login .skip:hover{color:#fff}
/* onboarding progress + orb (.hk-orb port) */
.hkw-obprog{height:5px;border-radius:var(--r-full);background:var(--card-3);overflow:hidden;margin:4px 0 22px}
.hkw-obprog i{display:block;height:100%;background:var(--brand-grad)}
.hkw-orb{position:relative;width:120px;height:120px;border-radius:50%;margin:6px auto 0;
  background:radial-gradient(circle at 42% 34%,#fff 0 7%,transparent 9%),linear-gradient(150deg,#f3b9ff,#a98cf0 52%,#8fb0e8);
  box-shadow:0 0 48px rgba(180,140,255,.55)}
.hkw-orb .ring{position:absolute;inset:-9px;border-radius:50%;border:2.5px solid rgba(190,170,255,.4);
  border-top-color:#d8e6ff;border-right-color:#ffc6ef;animation:hkw-spin 5s linear infinite}
@keyframes hkw-spin{to{transform:rotate(360deg)}}
.hkw-orb .eye{position:absolute;top:49px;width:11px;height:22px;border-radius:7px;background:rgba(255,255,255,.92)}
.hkw-orb .eye.l{left:42px}.hkw-orb .eye.r{right:42px}
.hkw-datefield{height:50px;border-radius:var(--r-sm);background:var(--login-input);display:flex;align-items:center;
  justify-content:space-between;padding:0 16px;font-size:14.5px;margin-top:12px;cursor:pointer}
.hkw-datefield svg{width:17px;height:17px;color:var(--t3)}
.hkw-privacy{display:flex;align-items:center;justify-content:center;gap:6px;font-size:12px;color:var(--t2);margin-top:14px}
.hkw-privacy svg{width:14px;height:14px;color:var(--success)}
.hkw-gender{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-top:14px}
.hkw-gender .g{height:78px;border-radius:var(--r-sm);background:var(--login-input);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:7px;font-size:13px;font-weight:600;color:var(--t2);cursor:pointer;border:1px solid transparent}
.hkw-gender .g .gi{font-size:22px}
.hkw-gender .g.on{border-color:var(--login-focus);color:#fff;background:rgba(254,144,184,.08)}

/* ============================================================ empty state (.hk-empty port) */
.hkw-empty{display:flex;flex-direction:column;align-items:center;gap:12px;padding:54px 24px;text-align:center}
.hkw-empty .mascot{width:84px;height:84px;border-radius:50%;background:radial-gradient(circle at 50% 40%,#d98bd6,#7b4bd6);opacity:.6}
.hkw-empty p{font-size:14px;color:var(--t3)}
.hkw-empty a{color:var(--brand);font-weight:600;text-decoration:underline;cursor:pointer}

/* ============================================================ gallery (index page) */
.gal{min-height:100vh;width:100%;background:#0c0c0f;color:#fff;font-family:var(--font);padding:0 0 90px}
.gal-head{position:sticky;top:0;z-index:50;background:rgba(12,12,15,.92);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--divider);padding:18px 30px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.gal-head h1{font-size:20px;font-weight:800}
.gal-head h1 i{color:var(--brand);font-style:italic}
.gal-head .sub{color:var(--t2);font-size:13px;flex:1;min-width:240px;line-height:1.5}
.gal-flow{max-width:1660px;margin:26px auto 0;padding:0 30px}
.gal-entry{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--divider);border-radius:var(--r-md);padding:14px 18px;margin-bottom:26px;font-size:13.5px;color:var(--t2);flex-wrap:wrap}
.gal-entry b{color:#fff}
.gal-entry .arr{color:var(--brand);font-weight:800}
.gal-entry .pillnav{height:26px;padding:0 11px;border-radius:var(--r-full);background:var(--card-2);display:inline-flex;align-items:center;font-size:12px;font-weight:600;color:var(--t2)}
.gal-entry .pillnav.hot{background:var(--brand-weak);color:#fff;box-shadow:inset 0 0 0 1px var(--brand)}
.gal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(490px,1fr));gap:30px;max-width:1660px;margin:0 auto;padding:0 30px}
.gal-label{grid-column:1/-1;font-size:14px;font-weight:800;color:var(--t2);padding:18px 2px 0;letter-spacing:.04em;text-transform:uppercase}
.gal-cell{display:flex;flex-direction:column;gap:11px}
.gal-shot{position:relative;border-radius:14px;overflow:hidden;background:#000;border:1px solid var(--divider);
  aspect-ratio:1440/924;cursor:pointer;display:block}
.gal-shot iframe{position:absolute;top:0;left:0;width:1440px;height:924px;transform-origin:0 0;border:0;pointer-events:none;background:#0a0a0b}
.gal-shot .open{position:absolute;inset:0;z-index:5;display:grid;place-items:center;background:rgba(8,8,10,0);transition:background .15s}
.gal-shot:hover .open{background:rgba(8,8,10,.45)}
.gal-shot .open span{height:38px;padding:0 18px;border-radius:var(--r-full);background:var(--brand);color:#fff;font-size:13px;font-weight:700;display:grid;place-items:center;opacity:0;transition:opacity .15s}
.gal-shot:hover .open span{opacity:1}
.gal-cap{font-size:12.5px;color:var(--t2);line-height:1.5;padding:0 2px}
.gal-cap b{color:#fff;font-size:13.5px;display:flex;align-items:center;gap:8px}
.gal-cap b .rt{font-size:11px;color:var(--t3);font-weight:500;font-family:ui-monospace,Menlo,monospace}
.gal-cap b .star{color:var(--brand);font-size:11px;font-weight:800}

/* ============================================================ responsive */
@media (max-width:1180px){
  .hkw-chat{grid-template-columns:1fr 0}
  .cp-panel{display:none}
  .st-layout{grid-template-columns:1fr 340px}
  .cd-layout{grid-template-columns:320px 1fr}
}
@media (max-width:960px){
  .hkw-chat{grid-template-columns:1fr 0}
  .cd-layout,.cr-layout,.rw-layout,.se-layout{grid-template-columns:1fr}
  .cd-heroCard,.cr-preview,.se-nav{position:static}
  .pw-plans{grid-template-columns:1fr}
  .wa-balances{grid-template-columns:1fr}
  .lg-split{grid-template-columns:1fr}.lg-art{display:none}
  .sn-layout{grid-template-columns:1fr}.sn-next{display:none}
  .st-layout{grid-template-columns:1fr}.st-rail{border-left:0;border-top:1px solid var(--divider)}
  .pf-quick{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .hkw-tnav,.hkw-search{display:none}
  .hkw-hero h1{font-size:24px}
  .hkw-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
  .hkw-giftgrid{grid-template-columns:repeat(4,1fr)}
}

/* ============================================================================
   v2 CORE COMPONENTS (revision A–M) — added 2026-06-10
   Brand wordmark is now "HakkoAI" (no space, Figtree 800 italic) — req D.
   ============================================================================ */

/* ---- D: tightened wordmark for the no-space form ---- */
.hkw-logo.nospace{letter-spacing:-.6px}

/* ============================================================ C: unified site footer
   1:1 structure of official-site app/components/base/footer/International.vue
   (5 columns PRODUCT/COMPANY/RESOURCES/LEGAL/SNS + bottom bar + lang switcher) */
.hkw-sitefoot{border-top:1px solid var(--divider);background:var(--bg-pure);margin-top:auto;flex:none}
.hkw-sitefoot .top{max-width:var(--wrap);margin:0 auto;padding:40px var(--gutter) 28px;display:flex;flex-wrap:wrap;gap:44px;justify-content:space-between}
.hkw-sitefoot .brand{max-width:280px}
.hkw-sitefoot .brand .logo{font-style:italic;font-weight:800;font-size:21px;letter-spacing:-.6px}
.hkw-sitefoot .brand p{margin-top:11px;color:var(--t2);font-size:13px;line-height:1.6}
.hkw-sitefoot .brand .sns{display:flex;gap:11px;margin-top:16px}
.hkw-sitefoot .sns a{width:36px;height:36px;border-radius:50%;background:var(--card-2);display:grid;place-items:center;color:var(--t2)}
.hkw-sitefoot .sns a:hover{color:#fff;background:var(--card-3)}
.hkw-sitefoot .sns svg{width:17px;height:17px}
.hkw-sitefoot .cols{display:flex;gap:60px;flex-wrap:wrap}
.hkw-sitefoot .col h4{color:#fff;font-size:11.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;margin-bottom:14px}
.hkw-sitefoot .col a{display:block;margin-bottom:10px;color:var(--t2);font-size:13.5px}
.hkw-sitefoot .col a:hover{color:var(--brand)}
.hkw-sitefoot .bottom{border-top:1px solid var(--divider)}
.hkw-sitefoot .bottom .in{max-width:var(--wrap);margin:0 auto;padding:15px var(--gutter);display:flex;align-items:center;gap:16px;flex-wrap:wrap;color:var(--t3);font-size:12.5px}
.hkw-sitefoot .bottom .in .grow{flex:1}
.hkw-sitefoot .bottom a{color:var(--t3)}.hkw-sitefoot .bottom a:hover{color:var(--t1)}
/* language switcher (req I — 15 locales) */
.hkw-lang{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 13px;border-radius:var(--r-full);background:var(--card-2);font-size:13px;font-weight:600;color:var(--t1);cursor:pointer}
.hkw-lang:hover{background:var(--card-3)}
.hkw-lang svg{width:15px;height:15px;color:var(--t2)}

/* ============================================================ C/H: app-header extras */
/* back-to-www button left of the logo */
.hkw-backwww{display:inline-flex;align-items:center;gap:5px;height:32px;padding:0 12px 0 9px;border-radius:var(--r-full);background:var(--card-2);color:var(--t2);font-size:12.5px;font-weight:600;flex:none}
.hkw-backwww:hover{color:#fff;background:var(--card-3)}
.hkw-backwww svg{width:14px;height:14px}
/* Get App download dropdown (req C — pc/mac/app guidance) */
.hkw-getapp{position:relative;flex:none}
.hkw-getapp>.trig{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 14px;border-radius:var(--r-full);background:var(--card-2);font-size:13px;font-weight:700;color:var(--t1)}
.hkw-getapp>.trig:hover{background:var(--card-3)}
.hkw-getapp>.trig svg{width:16px;height:16px}
.hkw-getapp .menu{position:absolute;right:0;top:46px;width:224px;background:var(--card-2);border:1px solid var(--divider);border-radius:var(--r-md);padding:7px;box-shadow:var(--shadow-device);display:none;z-index:60}
.hkw-getapp:hover .menu,.hkw-getapp.open .menu{display:block}
.hkw-getapp .menu a{display:flex;align-items:center;gap:11px;padding:10px 11px;border-radius:var(--r-sm);font-size:13.5px;font-weight:600}
.hkw-getapp .menu a:hover{background:var(--card-3)}
.hkw-getapp .menu a svg{width:19px;height:19px;color:var(--t2);flex:none}
.hkw-getapp .menu a small{display:block;font-size:11px;color:var(--t3);font-weight:500;margin-top:1px}
/* nav avatar with tier badge bottom-right (req H — Pro off the navbar) + hover profile menu */
.hkw-navav{position:relative;flex:none}
.hkw-navav .av{width:38px;height:38px;border-radius:50%;cursor:pointer;display:block;position:relative;
  background:radial-gradient(circle at 50% 30%,var(--c1,#ff9ed1) 0%,transparent 60%),linear-gradient(160deg,var(--c1,#ff9ed1),var(--c2,#7b4bd6))}
.hkw-navav .av img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.hkw-navav .tierbadge{position:absolute;right:-3px;bottom:-3px;height:15px;min-width:15px;padding:0 4px;border-radius:var(--r-full);font-size:9px;font-weight:800;display:grid;place-items:center;border:2px solid var(--bg);letter-spacing:.2px}
.hkw-navav .tierbadge.pro{background:var(--brand);color:#fff}
.hkw-navav .tierbadge.ultra{background:linear-gradient(90deg,#FFD36E,#FF9B4A);color:#5a2d00}
/* profile dropdown (req H — carries main entries incl. Daily Rewards moved from shop) */
.hkw-profmenu{position:absolute;right:0;top:50px;width:256px;background:var(--card-2);border:1px solid var(--divider);border-radius:var(--r-md);padding:8px;box-shadow:var(--shadow-device);display:none;z-index:60}
.hkw-navav:hover .hkw-profmenu,.hkw-navav.open .hkw-profmenu{display:block}
.hkw-profmenu .ph{display:flex;align-items:center;gap:11px;padding:9px 10px 10px}
.hkw-profmenu .ph .pn{font-size:14px;font-weight:700;display:flex;align-items:center;gap:6px}
.hkw-profmenu .ph .pe{font-size:11.5px;color:var(--t3);margin-top:2px}
.hkw-profmenu .assets{display:flex;gap:8px;padding:0 8px 9px}
.hkw-profmenu .assets .a{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;background:var(--card);border-radius:var(--r-sm);padding:8px 9px;font-size:12.5px;font-weight:700}
.hkw-profmenu .assets .a svg{width:14px;height:14px}
.hkw-profmenu .assets .a.gem svg{color:var(--gem)}.hkw-profmenu .assets .a.energy svg{color:var(--energy)}
.hkw-profmenu hr{border:0;border-top:1px solid var(--divider);margin:5px 0}
.hkw-profmenu a{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:var(--r-sm);font-size:13.5px;font-weight:600;color:var(--t1)}
.hkw-profmenu a:hover{background:var(--card-3)}
.hkw-profmenu a svg{width:17px;height:17px;color:var(--t2);flex:none}
.hkw-profmenu a .rt{margin-left:auto;font-size:11px;color:var(--brand);font-weight:800}
.hkw-profmenu a.muted{color:var(--t2)}

/* ============================================================ G/M: popup login (emochi / PolyBuzz style) + Google one-tap */
.hkw-login.pop{width:404px;max-width:94%;background:var(--card-2);border:1px solid var(--divider);border-radius:var(--r-lg);padding:30px 28px 22px;position:relative}
.hkw-login .lx{position:absolute;right:14px;top:14px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:var(--t2);background:var(--card)}
.hkw-login .lx:hover{color:#fff}.hkw-login .lx svg{width:17px;height:17px}
/* credit-gate banner (shown when login is triggered by a credit-spending action — req G) */
.hkw-login .gate{display:flex;align-items:center;gap:9px;background:var(--brand-weak);border-radius:var(--r-sm);padding:11px 13px;font-size:12.5px;color:var(--t1);line-height:1.45;margin:4px 0 16px}
.hkw-login .gate svg{width:17px;height:17px;color:var(--brand);flex:none}
/* prominent provider buttons (emochi-style, top of card) */
.hkw-gbtn{width:100%;height:50px;border-radius:var(--r-full);background:#fff;color:#1f1f1f;display:flex;align-items:center;justify-content:center;gap:11px;font-size:15px;font-weight:600;margin-bottom:11px}
.hkw-gbtn:hover{background:#f1f1f1}.hkw-gbtn svg{width:20px;height:20px;stroke:none}
.hkw-abtn{width:100%;height:50px;border-radius:var(--r-full);background:#000;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;gap:9px;font-size:15px;font-weight:600}
.hkw-abtn:hover{background:#141414}.hkw-abtn svg{width:19px;height:19px;fill:#fff;stroke:none}
/* Google one-tap floating card (top-right, per emochi screenshot — req M) */
.hkw-onetap{position:absolute;right:18px;top:14px;z-index:96;width:340px;background:#fff;color:#1f1f1f;border-radius:10px;box-shadow:0 8px 30px rgba(0,0,0,.5);overflow:hidden}
.hkw-onetap .ot-head{display:flex;align-items:center;gap:9px;padding:12px 14px 5px}
.hkw-onetap .ot-head .g{width:18px;height:18px;stroke:none;flex:none}
.hkw-onetap .ot-head .t{font-size:12.5px;color:#3c4043}.hkw-onetap .ot-head .t b{color:#202124;font-weight:500}
.hkw-onetap .ot-head .x{margin-left:auto;color:#5f6368;width:22px;height:22px;display:grid;place-items:center;cursor:pointer}
.hkw-onetap .ot-head .x svg{width:15px;height:15px;stroke-width:2}
.hkw-onetap .ot-body{display:flex;align-items:center;gap:12px;padding:8px 14px 12px}
.hkw-onetap .ot-av{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,#7b4bd6,#ff9ed1);flex:none;display:grid;place-items:center;color:#fff;font-weight:700;font-size:16px}
.hkw-onetap .ot-id .n{font-weight:600;color:#202124;font-size:14px}
.hkw-onetap .ot-id .e{color:#5f6368;font-size:12.5px;margin-top:1px}
.hkw-onetap .ot-cta{padding:0 14px 12px}
.hkw-onetap .ot-cta button{width:100%;height:38px;border-radius:18px;background:#1a73e8;color:#fff;font-weight:600;font-size:14px}
.hkw-onetap .ot-cta button:hover{background:#1b66c9}
.hkw-onetap .ot-foot{padding:0 14px 12px;font-size:10.5px;color:#5f6368;line-height:1.45}

/* kit page layout (mockup-only showcase) */
.kit{width:min(1180px,96vw);display:flex;flex-direction:column;gap:0}
.kit-block{margin-bottom:30px}
.kit-h{font-size:13px;font-weight:800;color:var(--brand);letter-spacing:.05em;text-transform:uppercase;margin:0 2px 4px}
.kit-d{font-size:12.5px;color:var(--t2);margin:0 2px 12px;line-height:1.55}.kit-d b{color:#fff}
.kit-stage{position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--divider);background:var(--bg)}
.kit-dim{position:relative;min-height:300px;background:linear-gradient(135deg,#141319,#1f1b24);display:grid;place-items:center;padding:30px;overflow:hidden}
.kit-dim::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.45)}

/* ============================================================ B/M: discover filter bar + emochi UGC cards */
.disc-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:6px 0 2px}
.disc-bar .vsep{width:1px;height:22px;background:var(--divider);flex:none}
.disc-bar .grow{flex:1}
.disc-sort{height:34px;padding:0 12px;border-radius:var(--r-full);background:var(--card-2);font-size:13px;font-weight:600;color:var(--t1);cursor:pointer}
.disc-sort:hover{background:var(--card-3)}
.hkw-ccard .by .src{color:#c9b6ff;font-weight:700}
.hkw-ccard .ctags{display:flex;gap:5px;margin-top:6px;flex-wrap:wrap;max-height:20px;overflow:hidden}
.hkw-ccard .ctags .ct{height:19px;padding:0 8px;border-radius:var(--r-full);background:rgba(255,255,255,.15);backdrop-filter:blur(3px);font-size:10px;font-weight:700;color:#fff;display:inline-grid;place-items:center;white-space:nowrap}
.hkw-cbadge.ugc{background:rgba(125,92,255,.88);font-weight:700}
.hkw-cbadge.type{left:auto;right:9px;gap:4px}
.hkw-cbadge.type svg{width:12px;height:12px}

/* ============================================================ K (v5): chat collapse
   Left collapse = the GLOBAL sidebar (body.sb-collapsed, see v5 layout section).
   Right collapse = .no-right. Panes pinned to columns so display:none never reflows. */
.cc-stage{grid-column:1}.cp-panel{grid-column:2}
.cl-collapse,.cp-collapse{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;color:var(--t2);flex:none;cursor:pointer}
.cl-collapse:hover,.cp-collapse:hover{color:#fff;background:var(--card-2)}
.cl-collapse svg,.cp-collapse svg{width:17px;height:17px}

/* ============================================================================
   v5 NAV + LAYOUT (user review 2026-06-11)
   - header v3 = official-site menu (Home / Use Cases / Companion / Resources▾)
     + HakkoAI mark + right actions. No "‹www".
   - left sidebar = Create CTA · Explore/Live/Hakko+/Shop · CHATS history.
   - responsive: menu→burger ≤1100 · sidebar→drawer ≤980 · compact ≤640.
   ============================================================================ */

/* ---- header v3 ---- */
.hkw-topnav.v3{gap:18px}
.hkw-burger{display:none;width:38px;height:38px;border-radius:10px;place-items:center;color:var(--t1);flex:none}
.hkw-burger:hover{background:var(--card-2)}
.hkw-burger svg{width:20px;height:20px}
.hkw-logo.v3{display:flex;align-items:center;gap:8px;font-style:normal}
.hkw-logo.v3 .hk-mark{width:30px;height:30px;flex:none}
.hkw-logo.v3 .lt{font-style:italic;font-weight:800;font-size:20px;letter-spacing:-.6px;color:var(--t1)}
.hkw-logo.v3:hover .lt{color:var(--brand)}
.hkw-mnav{display:flex;align-items:center;gap:2px}
.hkw-mnav>a,.hkw-mnav .mn-trig{padding:8px 13px;border-radius:var(--r-full);font-size:14px;font-weight:600;color:var(--t2);cursor:pointer;display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.hkw-mnav>a:hover,.hkw-mnav .mn-trig:hover{color:#fff}
.mn-drop{position:relative}
.mn-menu{position:absolute;top:calc(100% + 6px);left:0;min-width:190px;background:var(--sheet);border:1px solid var(--divider);border-radius:var(--r-sm);padding:6px;box-shadow:var(--shadow);opacity:0;visibility:hidden;transform:translateY(-4px);transition:.15s;z-index:60}
.mn-drop:hover .mn-menu{opacity:1;visibility:visible;transform:none}
.mn-menu a{display:block;padding:9px 12px;border-radius:9px;font-size:13.5px;font-weight:600;color:var(--t2)}
.mn-menu a:hover{color:#fff;background:var(--card-2)}
.hkw-lang.slim{display:flex;align-items:center;gap:6px;height:36px;padding:0 12px;border-radius:var(--r-full);font-size:13px;font-weight:600;color:var(--t2);cursor:pointer;flex:none}
.hkw-lang.slim:hover{color:#fff;background:var(--card-2)}
.hkw-lang.slim svg{width:16px;height:16px}

/* ---- app body = sidebar + main ---- */
.hkw-body{flex:1;display:flex;min-height:0;position:relative}
.hkw-main{flex:1;min-width:0;overflow-y:auto;display:flex;flex-direction:column}
.hkw-main.fixed{overflow:hidden}
.hkw-sb{width:236px;flex:none;display:flex;flex-direction:column;border-right:1px solid var(--divider);background:var(--bg);padding:14px 12px 10px;overflow-y:auto;overflow-x:hidden;transition:width .2s,padding .2s}
body.sb-collapsed .hkw-sb{width:0;padding:14px 0;border-right:0}
.hkw-scrim{display:none}

.sb-create{height:46px;border-radius:var(--r-full);background:var(--brand-grad-cta);color:#fff;font-weight:800;font-size:15px;display:flex;align-items:center;justify-content:center;gap:8px;flex:none;margin-bottom:10px;transition:transform .12s;white-space:nowrap}
.sb-create:hover{transform:translateY(-1px)}
.sb-create:active{transform:scale(.98)}
.sb-create svg{width:18px;height:18px;flex:none}
.sb-create.on{box-shadow:0 0 0 2px rgba(255,255,255,.35) inset}
.sb-nav{display:flex;flex-direction:column;gap:2px}
.sb-nav a{display:flex;align-items:center;gap:11px;height:42px;padding:0 12px;border-radius:12px;font-size:14.5px;font-weight:600;color:var(--t2);white-space:nowrap}
.sb-nav a svg{width:19px;height:19px;flex:none}
.sb-nav a:hover{color:#fff;background:var(--card)}
.sb-nav a.on{color:#fff;background:var(--brand-weak);box-shadow:inset 0 0 0 1px rgba(255,119,183,.35)}
.sb-nav a.on svg{color:var(--brand)}
.sb-label{display:flex;align-items:center;justify-content:space-between;padding:14px 12px 6px;font-size:11px;font-weight:800;letter-spacing:.12em;color:var(--t3);text-transform:uppercase;white-space:nowrap}
.sb-label .all{color:var(--t3);transform:rotate(-90deg)}
.sb-label .all:hover{color:#fff}
.sb-chats{display:flex;flex-direction:column;gap:2px;min-height:0}
.sb-chat{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:12px}
.sb-chat:hover{background:var(--card)}
.sb-chat.on{background:var(--card-2)}
.sb-chat .m{flex:1;min-width:0}
.sb-chat .m b{display:block;font-size:13.5px;font-weight:700;line-height:1.25}
.sb-chat .m i{display:block;font-style:normal;font-size:11.5px;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-chat .e{flex:none;display:grid;place-items:center}
.sb-chat time{font-size:10.5px;color:var(--t4)}
.sb-chat u{text-decoration:none;min-width:17px;height:17px;padding:0 5px;border-radius:var(--r-full);background:var(--brand);color:#fff;font-size:10.5px;font-weight:800;display:grid;place-items:center}
.sb-guest{margin:8px 4px;padding:14px;border-radius:var(--r-md);background:var(--card);font-size:12.5px;color:var(--t2);line-height:1.5}
.sb-guest .hkw-btn{margin-top:10px}
.sb-foot{margin-top:auto;padding-top:10px;border-top:1px solid var(--divider)}
.sb-foot>a{display:flex;align-items:center;gap:11px;height:40px;padding:0 12px;border-radius:12px;font-size:14px;font-weight:600;color:var(--t2);white-space:nowrap}
.sb-foot>a:hover{color:#fff;background:var(--card)}
.sb-foot>a svg{width:18px;height:18px;flex:none}
.sb-foot .links{display:flex;align-items:center;gap:12px;padding:8px 12px 2px;font-size:11.5px;color:var(--t4);white-space:nowrap}
.sb-foot .links a:hover{color:var(--t2)}
.sb-foot .links svg{width:15px;height:15px;display:block}

/* ---- responsive nav ---- */
@media (max-width:1240px){
  .hkw-topnav.v3 .hkw-cur{display:none}   /* balances stay in the profile menu */
}
@media (max-width:1100px){
  .hkw-mnav{display:none}
  .hkw-burger{display:grid}
}
@media (max-width:980px){
  .hkw-sb{position:absolute;left:0;top:0;bottom:0;z-index:55;width:248px;transform:translateX(-100%);transition:transform .22s;box-shadow:var(--shadow)}
  body.sb-open .hkw-sb{transform:none}
  body.sb-collapsed .hkw-sb{width:248px;padding:14px 12px 10px;border-right:1px solid var(--divider)}  /* drawer overrides collapse */
  .hkw-scrim{display:block;position:absolute;inset:0;z-index:54;background:rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:.2s}
  body.sb-open .hkw-scrim{opacity:1;pointer-events:auto}
  .hkw-lang.slim{display:none}
}
@media (max-width:640px){
  .hkw-topnav.v3{gap:10px;padding:0 14px}
  .hkw-logo.v3 .lt{display:none}
  .hkw-getapp{display:none}
}

/* ============================================================ v5: discover feed
   emochi-style 9:16 cards in one infinite stream (no more section blocks) */
.hkw-feedbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:14px 0 10px;background:linear-gradient(to bottom,var(--bg) 82%,transparent)}
.hkw-feed{display:grid;grid-template-columns:repeat(auto-fill,minmax(176px,1fr));gap:14px;padding:8px 0 46px}
.hkw-vcard{position:relative;aspect-ratio:9/16;border-radius:var(--r-md);overflow:hidden;cursor:pointer;display:block;
  background:linear-gradient(160deg,var(--c1,#2a2a31),var(--c2,#101014));transition:transform .15s,box-shadow .15s}
.hkw-vcard:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.hkw-vcard img.cv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hkw-vcard::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(6,6,8,.96) 0%,rgba(6,6,8,.5) 18%,transparent 44%);pointer-events:none}
.hkw-vcard .stat{position:absolute;left:9px;top:9px;z-index:2;display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px;border-radius:var(--r-full);background:rgba(8,8,10,.55);backdrop-filter:blur(6px);font-size:11px;font-weight:700}
.hkw-vcard .stat svg{width:12px;height:12px}
.hkw-vcard .bdg{position:absolute;right:9px;top:9px;z-index:2;display:flex;gap:5px}
.hkw-vcard .bdg .b{height:22px;padding:0 8px;border-radius:var(--r-full);font-size:10px;font-weight:800;display:inline-flex;align-items:center;gap:4px;background:rgba(8,8,10,.55);backdrop-filter:blur(6px)}
.hkw-vcard .bdg .b svg{width:11px;height:11px}
.hkw-vcard .bdg .b.ugc{background:rgba(125,92,255,.88)}
.hkw-vcard .vmeta{position:absolute;left:11px;right:11px;bottom:10px;z-index:2}
.hkw-vcard .vmeta .nm{font-size:15px;font-weight:800;line-height:1.2;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.hkw-vcard .vmeta .ds{margin-top:3px;font-size:11.5px;color:rgba(255,255,255,.78);line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hkw-vcard .vmeta .tg{display:flex;gap:5px;margin-top:7px;flex-wrap:wrap;max-height:20px;overflow:hidden}
.hkw-vcard .vmeta .tg .t{height:20px;padding:0 8px;border-radius:var(--r-full);background:rgba(255,255,255,.13);backdrop-filter:blur(4px);font-size:10px;font-weight:700;color:rgba(255,255,255,.85);display:inline-grid;place-items:center}
.hkw-vcard .vmeta .byl{margin-top:6px;font-size:10.5px;color:rgba(255,255,255,.5)}
.hkw-vcard .vmeta .byl b{color:#c9b6ff;font-weight:700}
.hkw-loadrow{display:flex;align-items:center;justify-content:center;gap:10px;padding:8px 0 34px;color:var(--t3);font-size:13px}
.hkw-spin{width:18px;height:18px;border-radius:50%;border:2px solid var(--card-3);border-top-color:var(--brand);animation:hkspin .8s linear infinite}
@keyframes hkspin{to{transform:rotate(360deg)}}
@media (max-width:900px){.hkw-feed{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:11px}}
@media (max-width:640px){
  .hkw-feed{grid-template-columns:repeat(auto-fill,minmax(124px,1fr));gap:8px}
  .hkw-vcard .vmeta .ds,.hkw-vcard .vmeta .byl{display:none}
  .hkw-vcard .vmeta .tg{max-height:0;margin-top:0;overflow:hidden}
}

/* ============================================================ v5: chat extras */
/* empty input → "Go on" story-advance button */
.cc-field .send.goon{width:auto;min-width:0;padding:0 15px;border-radius:17px;font-size:13px;font-weight:800;display:inline-flex;align-items:center;gap:6px}
.cc-field .send.goon svg{width:14px;height:14px}
/* "+" attach popover */
.cc-attach{position:relative;flex:none}
.cc-attach .menu{position:absolute;bottom:calc(100% + 10px);left:0;min-width:216px;background:var(--sheet);border:1px solid var(--divider);border-radius:var(--r-md);padding:6px;box-shadow:var(--shadow);display:none;z-index:8}
.cc-attach.open .menu{display:block}
.cc-attach .menu button{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border-radius:10px;font-size:13.5px;font-weight:600;color:var(--t1);text-align:left}
.cc-attach .menu button:hover{background:var(--card-2)}
.cc-attach .menu button svg{width:17px;height:17px;color:var(--t2);flex:none}
.cc-attach .menu button small{margin-left:auto;font-size:10.5px;color:var(--t4);font-weight:600}
/* message multi-select for Generate */
.hkw-chat.selmode .hkw-bubble{cursor:pointer;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.14)}
.hkw-msgrow .selck{display:none;position:absolute;top:-7px;right:-7px;width:20px;height:20px;border-radius:50%;background:var(--brand);color:#fff;place-items:center;z-index:3}
.hkw-msgrow.sel .hkw-bubble{box-shadow:inset 0 0 0 2px var(--brand)}
.hkw-msgrow.sel .selck{display:grid}
.hkw-msgrow .selck svg{width:12px;height:12px;stroke-width:2.6}
.hkw-selbar{position:absolute;left:50%;transform:translateX(-50%);bottom:104px;z-index:7;display:none;align-items:center;gap:12px;height:52px;padding:0 10px 0 18px;border-radius:var(--r-full);background:rgba(20,20,26,.94);backdrop-filter:blur(10px);border:1px solid var(--divider);box-shadow:var(--shadow);white-space:nowrap}
.hkw-chat.selmode .hkw-selbar{display:flex}
.hkw-selbar .n{font-size:13px;font-weight:700;color:var(--t2)}
.hkw-selbar .n b{color:var(--brand)}
/* user-uploaded image message */
.hkw-imgmsg{max-width:240px;border-radius:var(--r-md);overflow:hidden;border:1px solid var(--divider)}
.hkw-imgmsg img{width:100%;display:block}

/* ============================================================ v5: misc */
.hkw-tagchip.gray{color:var(--t2);background:var(--card-2)}   /* de-emphasized character tags */

/* ============================================================================
   v6 (user review 2026-06-12) — real brand mark, site-aligned style, custom
   sort selector, character comments, image→video serial generation.
   ============================================================================ */

/* ---- v6-1: real logo mark (verbatim svga); footer lockup ---- */
.hkw-logo.v3 .hk-mark svg{width:100%;height:100%;display:block}
.hkw-sitefoot .brand .logo{display:flex;align-items:center;gap:9px}
.hkw-sitefoot .brand .logo .hk-mark.foot{width:26px;height:26px;flex:none;display:block}
.hkw-sitefoot .brand .logo .hk-mark.foot svg{width:100%;height:100%;display:block}
.hkw-sitefoot .brand .logo .lt{font-style:italic;font-weight:800;font-size:19px;letter-spacing:-.5px;color:var(--t1)}

/* ---- v6-5: custom sort selector (replaces native <select>) ---- */
.hkw-sortsel{position:relative;flex:none}
.hkw-sortsel .trig{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 12px;border-radius:var(--r-full);
  background:var(--card-2);font-size:13px;font-weight:700;color:var(--t1);cursor:pointer;white-space:nowrap}
.hkw-sortsel .trig:hover{background:var(--card-3)}
.hkw-sortsel .trig .ico{width:15px;height:15px;color:var(--brand)}
.hkw-sortsel .trig .ico svg{width:100%;height:100%}
.hkw-sortsel .trig .cv{width:11px;height:11px;color:var(--t3);transition:transform .18s}
.hkw-sortsel.open .trig .cv{transform:rotate(180deg)}
.hkw-sortsel .menu{position:absolute;top:calc(100% + 6px);right:0;min-width:184px;background:var(--sheet);border:1px solid var(--divider);
  border-radius:var(--r-sm);padding:6px;box-shadow:var(--shadow);z-index:34;opacity:0;visibility:hidden;transform:translateY(-4px);transition:.15s}
.hkw-sortsel.open .menu{opacity:1;visibility:visible;transform:none}
.hkw-sortsel .menu button{display:flex;align-items:center;gap:10px;width:100%;padding:9px 11px;border-radius:9px;font-size:13px;font-weight:600;color:var(--t2);text-align:left;white-space:nowrap}
.hkw-sortsel .menu button .e{width:16px;text-align:center;flex:none}
.hkw-sortsel .menu button:hover{color:#fff;background:var(--card-2)}
.hkw-sortsel .menu button.on{color:#fff;background:var(--brand-weak)}
.hkw-sortsel .menu button .ck{margin-left:auto;width:15px;height:15px;color:var(--brand);opacity:0}
.hkw-sortsel .menu button.on .ck{opacity:1}

/* ---- v6-3: serial generation step badge ---- */
.cp-model .step{margin-left:auto;flex:none;height:22px;padding:0 10px;border-radius:var(--r-full);background:var(--card-3);
  font-size:10.5px;font-weight:800;letter-spacing:.04em;color:var(--t2);display:inline-grid;place-items:center;white-space:nowrap}

/* ---- v6-4: character detail comments ---- */
.cd-comhead{display:flex;align-items:baseline;gap:8px;margin-top:6px}
.cd-comhead h2{font-size:18px;font-weight:800}
.cd-comhead .cnt{font-size:13px;color:var(--t3);font-weight:600}
.cd-compose{display:flex;align-items:center;gap:10px;margin:14px 0 18px}
.cd-compose .hkw-av{flex:none}
.cd-compose .box{flex:1;display:flex;align-items:center;gap:8px;height:44px;border-radius:var(--r-full);background:var(--card-2);padding:0 6px 0 16px}
.cd-compose .box input{flex:1;font-size:14px;color:#fff;min-width:0}
.cd-compose .box input::placeholder{color:var(--t3)}
.cd-compose .box .post{height:32px;padding:0 16px;border-radius:var(--r-full);background:var(--brand);color:#fff;font-size:13px;font-weight:700;flex:none}
.cd-compose .box .post:hover{background:var(--brand-strong)}
.cd-comment{display:flex;gap:11px;padding:14px 0;border-top:1px solid var(--divider)}
.cd-comment .hkw-av{flex:none}
.cd-comment .body{flex:1;min-width:0}
.cd-comment .crow{display:flex;align-items:center;gap:8px}
.cd-comment .cname{font-size:13.5px;font-weight:700;color:var(--t1)}
.cd-comment .ctime{font-size:11.5px;color:var(--t4)}
.cd-comment .ctext{font-size:13.5px;color:var(--t2);line-height:1.55;margin-top:3px}
.cd-comment .cacts{display:flex;align-items:center;gap:18px;margin-top:8px}
.cd-comment .cacts button{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:var(--t3)}
.cd-comment .cacts button:hover{color:var(--t1)}
.cd-comment .cacts button svg{width:14px;height:14px}
.cd-comment .cacts button.liked{color:var(--brand)}
.cd-comment .cacts button.liked svg{fill:var(--brand);stroke:var(--brand)}
.cd-reply{display:flex;gap:11px;padding:12px 0 2px 38px}
.cd-reply .hkw-av{flex:none}
.cd-reply .body{flex:1;min-width:0}

/* ============================================================================
   v7 — MARKETING SITE (hakko.ai) component library. Shared by all official-site
   pages (www-entry = home + site-usecases / site-download / site-about / …).
   Design language: site-aligned (Figtree, #0C0D0F, pink + #5C7BE5→#C443B9
   brand gradient), bigger radii + air than the in-app surfaces.
   ============================================================================ */
:root{ --ws-max:1180px; --ws-grad:linear-gradient(96deg,#5C7BE5,#C443B9); }
/* marketing pages stack long sections in normal flow — NOT as flex items
   (the default .page is a flex column, which would shrink tall sections to 0). */
.page.ws-page{display:block}

/* ---- marketing header (siteHeader) ---- */
.ws-topnav{position:sticky;top:0;z-index:50;height:66px;flex:none;display:flex;align-items:center;gap:18px;
  padding:0 32px;background:rgba(12,13,15,.78);backdrop-filter:blur(16px);border-bottom:1px solid var(--divider)}
.ws-logo{display:flex;align-items:center;gap:9px;flex:none}
.ws-logo svg.hk-mark{width:31px;height:31px}
.ws-logo .lt{font-style:italic;font-weight:800;font-size:21px;letter-spacing:-.6px;color:var(--t1)}
.ws-logo:hover .lt{color:var(--brand)}
.ws-mnav{display:flex;align-items:center;gap:2px}
.ws-mnav>a,.ws-mnav .mn-trig{padding:8px 14px;border-radius:var(--r-full);font-size:14.5px;font-weight:600;color:var(--t2);cursor:pointer;display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.ws-mnav>a:hover,.ws-mnav .mn-trig:hover{color:#fff}
.ws-mnav>a.on,.ws-mnav .mn-trig.on{color:#fff}
.ws-mnav>a.on::after{content:"";position:absolute}
.ws-actions{display:flex;align-items:center;gap:12px;flex:none}
.ws-dl{display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 18px;border-radius:var(--r-full);
  background:var(--brand-grad-cta);color:#fff;font-size:14px;font-weight:700;white-space:nowrap}
.ws-dl:hover{filter:brightness(1.05)}
.ws-dl svg{width:17px;height:17px}
.btn-login.slim{height:40px;padding:0 16px;background:transparent;color:var(--t1);box-shadow:inset 0 0 0 1px var(--divider)}
.btn-login.slim:hover{background:var(--card-2)}
.ws-drawer{display:none}

/* ---- grid + glow background (hero / bands) ---- */
.ws-bg{position:relative;overflow:hidden}
.ws-bg::before{content:"";position:absolute;inset:0;z-index:0;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:54px 54px;mask-image:radial-gradient(120% 80% at 50% 0%,#000 30%,transparent 75%)}
.ws-bg::after{content:"";position:absolute;left:50%;top:-120px;width:900px;height:560px;transform:translateX(-50%);z-index:0;pointer-events:none;
  background:radial-gradient(closest-side,rgba(123,91,255,.28),transparent 70%),radial-gradient(closest-side,rgba(255,119,183,.22),transparent 70%);
  filter:blur(20px);opacity:.9}
.ws-bg>*{position:relative;z-index:1}

/* ---- hero ---- */
.ws-hero{text-align:center;max-width:840px;margin:0 auto;padding:62px 28px 30px}
.ws-badge{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 15px;border-radius:var(--r-full);
  background:var(--card-2);border:1px solid var(--divider);font-size:12.5px;font-weight:700;color:var(--t2);margin-bottom:22px}
.ws-badge .dot{width:7px;height:7px;border-radius:50%;background:var(--success);box-shadow:0 0 0 3px rgba(31,211,118,.18)}
.ws-hero h1{font-size:60px;font-weight:800;letter-spacing:-1.6px;line-height:1.04}
.ws-hero h1 i{font-style:normal;background:var(--ws-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.ws-hero .sub{font-size:27px;font-weight:700;color:var(--t1);margin-top:10px;letter-spacing:-.4px}
.ws-hero p{color:var(--t2);font-size:16.5px;line-height:1.62;max-width:600px;margin:18px auto 26px}
.ws-cta{display:flex;gap:13px;justify-content:center;flex-wrap:wrap}
.ws-trust{display:flex;align-items:center;justify-content:center;gap:0;margin-top:34px;flex-wrap:wrap}
.ws-trust .t{display:flex;align-items:center;gap:11px;padding:0 26px;position:relative}
.ws-trust .t+.t::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:1px;height:34px;background:var(--divider)}
.ws-trust .ic{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex:none;background:var(--card-2)}
.ws-trust .ic svg{width:21px;height:21px}
.ws-trust .ic.store{background:linear-gradient(160deg,#1d9bf0,#0a6ec0);color:#fff}
.ws-trust .ic.ph{background:linear-gradient(160deg,#ff6154,#da4a3a);color:#fff}
.ws-trust .ic.users{background:var(--brand-weak);color:var(--brand)}
.ws-trust .m{text-align:left}
.ws-trust .m b{display:block;font-size:15px;font-weight:800;display:flex;align-items:center;gap:6px}
.ws-trust .m b .stars{color:var(--gold);font-size:12px;letter-spacing:1px}
.ws-trust .m span{font-size:12px;color:var(--t3)}
.ws-shot{max-width:var(--ws-max);margin:18px auto 0;padding:0 28px}
.ws-shot .frame{border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--divider);box-shadow:0 40px 120px rgba(0,0,0,.5);
  background:linear-gradient(160deg,#16181d,#0e0f12);aspect-ratio:16/8.4;position:relative}
.ws-shot .frame img{width:100%;height:100%;object-fit:cover}
.ws-shot .frame .ph{position:absolute;inset:0;display:grid;place-items:center;color:var(--t4);font-size:13px}
.ws-hud{position:absolute;left:22px;bottom:22px;z-index:3;display:flex;align-items:center;gap:12px;max-width:380px;
  padding:13px 16px;border-radius:16px;background:rgba(16,17,21,.82);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.1);box-shadow:var(--shadow)}
.ws-hud .mic{width:38px;height:38px;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--brand-grad-cta);color:#fff}
.ws-hud .mic svg{width:19px;height:19px}
.ws-hud b{font-size:13px;font-weight:800;display:block}
.ws-hud p{font-size:12.5px;color:var(--t2);line-height:1.4;margin-top:2px}
@media (max-width:760px){.ws-hud{left:12px;right:12px;bottom:12px;max-width:none}}

/* ---- generic section ---- */
.ws-sec{max-width:var(--ws-max);margin:0 auto;padding:64px 28px}
.ws-sec.tight{padding:40px 28px}
.ws-eyebrow{font-size:12.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--brand);text-align:center}
.ws-h2{font-size:38px;font-weight:800;letter-spacing:-.8px;text-align:center;margin-top:10px;line-height:1.12}
.ws-lead{text-align:center;color:var(--t2);font-size:16px;line-height:1.6;max-width:620px;margin:14px auto 0}

/* ---- feature grid (Next-Gen Gaming AI) ---- */
.ws-feats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px}
.ws-feat{background:var(--card);border:1px solid var(--divider);border-radius:var(--r-lg);padding:26px 22px;transition:transform .15s,border-color .15s}
.ws-feat:hover{transform:translateY(-4px);border-color:rgba(255,119,183,.4)}
.ws-feat .fi{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;background:var(--brand-weak);color:var(--brand);margin-bottom:16px}
.ws-feat .fi svg{width:24px;height:24px}
.ws-feat h3{font-size:17px;font-weight:800}
.ws-feat p{font-size:13.5px;color:var(--t2);line-height:1.6;margin-top:8px}

/* ---- text + image alternating ---- */
.ws-ti{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center;max-width:var(--ws-max);margin:0 auto;padding:50px 28px}
.ws-ti.rev .txt{order:2}
.ws-ti .eye{font-size:12.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--brand)}
.ws-ti h2{font-size:32px;font-weight:800;letter-spacing:-.6px;line-height:1.14;margin-top:12px}
.ws-ti p{font-size:15.5px;color:var(--t2);line-height:1.66;margin-top:14px}
.ws-ti .pts{margin-top:18px;display:flex;flex-direction:column;gap:11px}
.ws-ti .pts .pt{display:flex;gap:10px;font-size:14px;color:var(--t1)}
.ws-ti .pts .pt svg{width:19px;height:19px;color:var(--success);flex:none;margin-top:1px}
.ws-ti .art{border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--divider);aspect-ratio:4/3;position:relative;
  background:linear-gradient(150deg,#1a1620,#101014);box-shadow:var(--shadow)}
.ws-ti .art img{width:100%;height:100%;object-fit:cover}

/* ---- use-case showcase (Mobile / PC tabs) ---- */
.ws-tabs{display:flex;justify-content:center;gap:8px;margin-top:32px}
.ws-tab{height:40px;padding:0 22px;border-radius:var(--r-full);background:var(--card-2);font-size:14px;font-weight:700;color:var(--t2);cursor:pointer}
.ws-tab.on{background:var(--brand);color:#fff}
.ws-cases{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:28px}
.ws-case{border-radius:var(--r-lg);overflow:hidden;position:relative;aspect-ratio:3/4;background:linear-gradient(160deg,#1a1d24,#0e0f12);cursor:pointer}
.ws-case img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ws-case::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(6,6,8,.92),transparent 52%)}
.ws-case .lab{position:absolute;left:14px;right:14px;bottom:13px;z-index:2}
.ws-case .lab b{font-size:15px;font-weight:800;display:block}
.ws-case .lab span{font-size:11.5px;color:rgba(255,255,255,.7)}

/* ---- companion picker (real characters) ---- */
.ws-comp{display:grid;grid-template-columns:repeat(5,1fr);gap:15px;margin-top:34px}

/* ---- testimonials ---- */
.ws-quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:38px}
.ws-quote{background:var(--card);border:1px solid var(--divider);border-radius:var(--r-lg);padding:24px 22px;display:flex;flex-direction:column;gap:14px}
.ws-quote .stars{color:var(--gold);font-size:13px;letter-spacing:2px}
.ws-quote p{font-size:14.5px;color:var(--t1);line-height:1.62;flex:1}
.ws-quote .who{display:flex;align-items:center;gap:11px}
.ws-quote .who .n{font-size:13.5px;font-weight:700}
.ws-quote .who .r{font-size:11.5px;color:var(--t3)}

/* ---- download band ---- */
.ws-dlband{max-width:var(--ws-max);margin:30px auto 70px;padding:0 28px}
.ws-dlband .inner{border-radius:var(--r-xl);padding:52px 40px;text-align:center;position:relative;overflow:hidden;
  border:1px solid var(--divider);background:linear-gradient(150deg,rgba(123,91,255,.16),rgba(255,119,183,.12)),var(--card)}
.ws-dlband h2{font-size:34px;font-weight:800;letter-spacing:-.6px}
.ws-dlband p{color:var(--t2);font-size:15.5px;margin-top:12px}
.ws-dlgrid{display:flex;justify-content:center;gap:13px;margin-top:26px;flex-wrap:wrap}
.ws-store{display:flex;align-items:center;gap:11px;height:56px;padding:0 22px;border-radius:14px;background:#fff;color:#0a0a0b;min-width:184px;transition:transform .12s}
.ws-store:hover{transform:translateY(-2px)}
.ws-store.dark{background:var(--card-2);color:#fff;box-shadow:inset 0 0 0 1px var(--divider)}
.ws-store svg{width:26px;height:26px;flex:none}
.ws-store .s{text-align:left;line-height:1.15}
.ws-store .s small{font-size:10.5px;opacity:.7;display:block}
.ws-store .s b{font-size:15px;font-weight:800}

/* ---- referral: link box / table / faq ---- */
.ws-reflink{max-width:560px;margin:28px auto 0;text-align:left}
.ws-reflink .lab{font-size:12.5px;font-weight:700;color:var(--t3)}
.ws-reflink .box{display:flex;gap:8px;margin-top:8px;background:var(--card-2);border:1px solid var(--divider);border-radius:var(--r-full);padding:6px 6px 6px 18px;align-items:center}
.ws-reflink .box input{flex:1;font-size:14px;color:var(--t1);min-width:0;background:none}
.ws-reflink .box .copy{height:40px;padding:0 20px;border-radius:var(--r-full);background:var(--brand-grad-cta);color:#fff;font-size:13.5px;font-weight:700;flex:none;white-space:nowrap}
.ws-reflink .hint{display:block;font-size:12px;color:var(--t3);margin-top:9px;text-align:center}
.ws-table{max-width:760px;margin:30px auto 0;border-radius:var(--r-md);overflow:hidden;border:1px solid var(--divider)}
.ws-table table{width:100%;border-collapse:collapse}
.ws-table th{text-align:left;font-size:12px;font-weight:700;color:var(--t3);padding:14px 18px;background:var(--card);text-transform:uppercase;letter-spacing:.06em}
.ws-table td{padding:14px 18px;font-size:13.5px;border-top:1px solid var(--divider);vertical-align:middle}
.ws-table td:first-child{display:flex;align-items:center;gap:10px;font-weight:600}
.ws-table .ok{color:var(--success);font-weight:700}
.ws-table .pend{color:var(--t3)}
.ws-faq{max-width:760px;margin:34px auto 0;display:grid;gap:12px}
.ws-faq .qa{background:var(--card);border:1px solid var(--divider);border-radius:var(--r-md);padding:20px 22px}
.ws-faq .qa b{font-size:15px;font-weight:800}
.ws-faq .qa p{font-size:13.5px;color:var(--t2);line-height:1.6;margin-top:8px}

/* ---- numbered steps (affiliate / referral) ---- */
.ws-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px}
.ws-step{background:var(--card);border:1px solid var(--divider);border-radius:var(--r-lg);padding:28px 24px;position:relative}
.ws-step .no{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--brand-grad-cta);color:#fff;font-size:17px;font-weight:800;margin-bottom:16px}
.ws-step h3{font-size:17px;font-weight:800}
.ws-step p{font-size:13.5px;color:var(--t2);line-height:1.6;margin-top:8px}
.ws-powered{display:inline-flex;align-items:center;gap:8px;margin-top:24px;font-size:13px;color:var(--t3)}
.ws-powered b{color:var(--t1);font-weight:800}
.ws-powered .note{color:var(--t4)}

/* ---- legal (privacy / terms / companion creation) ---- */
.ws-legal{max-width:var(--ws-max)}
.ws-legal .lg-head{text-align:center;border-bottom:1px solid var(--divider);padding-bottom:24px}
.ws-legal .lg-head h1{font-size:38px;font-weight:800;letter-spacing:-.6px}
.ws-legal .lg-head p{font-size:13px;color:var(--t3);margin-top:8px}
.ws-legal .lg-tabs{display:flex;justify-content:center;gap:8px;margin-top:20px;flex-wrap:wrap}
.ws-legal .lg-tabs button{height:38px;padding:0 18px;border-radius:var(--r-full);background:var(--card-2);font-size:13.5px;font-weight:700;color:var(--t2)}
.ws-legal .lg-tabs button.on{background:var(--brand);color:#fff}
.ws-legal .lg-body{display:grid;grid-template-columns:220px 1fr;gap:40px;margin-top:30px;align-items:start}
.ws-legal .lg-toc{position:sticky;top:86px}
.ws-legal .lg-toc .t{font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--t3);margin-bottom:12px}
.ws-legal .lg-toc a{display:block;padding:7px 0;font-size:13.5px;color:var(--t2);border-left:2px solid var(--divider);padding-left:14px}
.ws-legal .lg-toc a:hover{color:#fff;border-color:var(--brand)}
.ws-legal .lg-prose h2{font-size:26px;font-weight:800;margin-bottom:18px}
.ws-legal .lg-prose h3{font-size:17px;font-weight:800;margin-top:26px}
.ws-legal .lg-prose p{font-size:14.5px;color:var(--t2);line-height:1.7;margin-top:10px}

/* ---- blog list ---- */
.ws-blog{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:24px}
.ws-post{display:flex;flex-direction:column;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--divider);background:var(--card);transition:transform .15s,border-color .15s}
.ws-post:hover{transform:translateY(-4px);border-color:rgba(255,119,183,.4)}
.ws-post .cv{position:relative;aspect-ratio:16/9;overflow:hidden;background:linear-gradient(150deg,#1a1620,#101014)}
.ws-post .cv img{width:100%;height:100%;object-fit:cover}
.ws-post .cat{position:absolute;left:12px;top:12px;z-index:2;height:24px;padding:0 11px;border-radius:var(--r-full);background:rgba(8,8,10,.7);backdrop-filter:blur(6px);font-size:11px;font-weight:800;color:#fff;display:inline-grid;place-items:center}
.ws-post .pm{padding:16px 18px 18px;flex:1;display:flex;flex-direction:column;gap:10px}
.ws-post h3{font-size:16px;font-weight:800;line-height:1.32}
.ws-post .rt{margin-top:auto;display:flex;align-items:center;gap:6px;font-size:12px;color:var(--t3)}

/* ---- about: vision / mission + contact ---- */
.ws-vm{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.ws-vmcard{border-radius:var(--r-xl);padding:34px 30px;border:1px solid var(--divider);background:linear-gradient(160deg,rgba(123,91,255,.12),transparent),var(--card)}
.ws-vmcard.alt{background:linear-gradient(160deg,rgba(255,119,183,.12),transparent),var(--card)}
.ws-vmcard .k{font-size:12.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--brand);margin-bottom:14px}
.ws-vmcard p{font-size:20px;font-weight:700;line-height:1.42;letter-spacing:-.3px}
.ws-contact{display:flex;justify-content:center;gap:13px;margin-top:26px;flex-wrap:wrap}
.ws-contact a{display:flex;align-items:center;gap:11px;height:56px;padding:0 22px;border-radius:14px;background:var(--card-2);box-shadow:inset 0 0 0 1px var(--divider);min-width:200px;transition:transform .12s}
.ws-contact a:hover{transform:translateY(-2px)}
.ws-contact svg{width:24px;height:24px;color:var(--brand);flex:none}
.ws-contact .s,.ws-contact span{text-align:left;line-height:1.2}
.ws-contact small{font-size:10.5px;color:var(--t3);display:block}
.ws-contact b{font-size:15px;font-weight:800}

/* ---- download page platform cards ---- */
.ws-dlcards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:8px}
.ws-dlcard{background:var(--card);border:1px solid var(--divider);border-radius:var(--r-lg);padding:26px 20px;text-align:center;display:flex;flex-direction:column;align-items:center;transition:transform .15s,border-color .15s}
.ws-dlcard:hover{transform:translateY(-4px);border-color:rgba(255,119,183,.4)}
.ws-dlcard .pi{width:54px;height:54px;border-radius:15px;display:grid;place-items:center;background:var(--card-2);color:var(--t1);margin-bottom:14px}
.ws-dlcard .pi svg{width:28px;height:28px}
.ws-dlcard h3{font-size:18px;font-weight:800}
.ws-dlcard .ver{font-size:12px;color:var(--t3);margin-top:5px;min-height:30px}
.ws-dlcard .qr{width:96px;height:96px;border-radius:12px;background:#fff;color:#0a0a0b;display:grid;place-items:center;margin:8px 0 6px}
.ws-dlcard .qr svg{width:62px;height:62px}
.ws-dlcard .scan{font-size:11px;color:var(--t3);margin-bottom:12px}
.ws-dlcard .hkw-btn{margin-top:auto;height:42px;font-size:13.5px}
.ws-dlcard .hkw-btn svg{width:16px;height:16px}

/* ---- responsive ---- */
@media (max-width:1000px){
  .ws-dlcards{grid-template-columns:repeat(2,1fr)}
  .ws-vm{grid-template-columns:1fr}
  .ws-steps{grid-template-columns:1fr}
  .ws-blog{grid-template-columns:repeat(2,1fr)}
  .ws-legal .lg-body{grid-template-columns:1fr}
  .ws-legal .lg-toc{display:none}
  .ws-comp{grid-template-columns:repeat(3,1fr)}
  .ws-cases{grid-template-columns:repeat(2,1fr)}
  .ws-feats{grid-template-columns:1fr}
  .ws-quotes{grid-template-columns:1fr}
  .ws-ti{grid-template-columns:1fr;gap:28px;padding:38px 28px}
  .ws-ti.rev .txt{order:0}
  .ws-hero h1{font-size:44px}
}
@media (max-width:760px){
  .ws-topnav{gap:10px;padding:0 16px}
  .ws-mnav,.ws-actions .btn-login.slim,.hkw-lang.slim{display:none}
  .ws-topnav .hkw-burger{display:grid}
  .ws-hero{padding:42px 18px 24px}
  .ws-hero h1{font-size:34px;letter-spacing:-1px}
  .ws-hero .sub{font-size:20px}
  .ws-trust{gap:14px}
  .ws-trust .t{padding:0;flex-basis:100%;justify-content:center}
  .ws-trust .t+.t::before{display:none}
  .ws-comp{grid-template-columns:repeat(2,1fr)}
  .ws-h2,.ws-dlband h2{font-size:27px}
  .ws-sec{padding:44px 18px}
  /* mobile drawer for marketing nav */
  .ws-drawer{display:flex;flex-direction:column;gap:2px;position:fixed;left:0;right:0;top:66px;z-index:49;
    padding:12px 16px 18px;background:rgba(12,13,15,.97);backdrop-filter:blur(16px);border-bottom:1px solid var(--divider);
    transform:translateY(-130%);transition:transform .22s}
  body.ws-drawer-open .ws-drawer{transform:none}
  .ws-drawer a{padding:13px 12px;border-radius:10px;font-size:15px;font-weight:600;color:var(--t1)}
  .ws-drawer a:hover{background:var(--card-2)}
}