@import url('https://fonts.googleapis.com/css2?family=Prompt:wght@300;400;500;600;700&display=swap');
:root,html[data-theme=light]{--g9bg:#f7f7fb;--g9pan:#fff;--g9line:#ece9f5;--g9tx:#1c1830;--g9mu:#6b6684;--g9p:#7c3aed;--g9p2:#c026d3;--g9soft:#f3eaff}
html[data-theme=dark]{--g9bg:#0c0a18;--g9pan:#16132a;--g9line:#2a2546;--g9tx:#ece9ff;--g9mu:#a39fc2;--g9p:#a78bfa;--g9p2:#e879f9;--g9soft:#2a1f4d}
body{font-family:Prompt,"IBM Plex Sans Thai",system-ui,sans-serif!important}
.g9h{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--g9pan) 88%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--g9line);font-size:15px}
.g9w{max-width:1240px;margin:auto;padding:0 20px;display:flex;align-items:center;gap:18px}.g9h .g9w{height:64px}
.g9logo{display:flex;align-items:center;gap:8px;font-weight:700;font-size:20px;color:var(--g9tx)!important;text-decoration:none;white-space:nowrap;background:none;-webkit-text-fill-color:currentColor}
.g9logo i{width:28px;height:28px;border-radius:9px;background:linear-gradient(135deg,var(--g9p),var(--g9p2))}
.g9nav{display:flex;gap:4px;flex:1}.g9nav a{color:var(--g9mu);text-decoration:none;padding:8px 12px;border-radius:10px;white-space:nowrap}.g9nav a:hover{color:var(--g9tx);background:var(--g9soft)}.g9nav a.on{color:var(--g9p);font-weight:600;background:var(--g9soft)}
.g9r{display:flex;align-items:center;gap:10px}.g9r>span{display:flex;align-items:center;gap:10px}
.g9tg,.g9a,.g9cart{background:none;border:1px solid var(--g9line);color:var(--g9tx)!important;border-radius:10px;padding:7px 12px;font:inherit;cursor:pointer;text-decoration:none;white-space:nowrap}
.g9btn{background:linear-gradient(135deg,var(--g9p),var(--g9p2));color:#fff!important;padding:8px 16px;border-radius:10px;font-weight:600;text-decoration:none;white-space:nowrap}
.g9pill{background:var(--g9soft);color:var(--g9p)!important;padding:7px 14px;border-radius:99px;font-weight:600;text-decoration:none;white-space:nowrap}
.g9um{position:relative}.g9dd{display:none;position:absolute;right:0;top:110%;background:var(--g9pan);border:1px solid var(--g9line);border-radius:12px;padding:6px;min-width:200px;box-shadow:0 10px 30px #0002}.g9um.open .g9dd{display:block}.g9dd a{display:block;padding:9px 12px;border-radius:8px;color:var(--g9tx)!important;text-decoration:none}.g9dd a:hover{background:var(--g9soft)}
.g9bur{display:none;background:none;border:1px solid var(--g9line);color:var(--g9tx);border-radius:10px;padding:6px 12px;font-size:18px;cursor:pointer;margin-left:auto;order:3}
.g9f{border-top:1px solid var(--g9line);background:var(--g9pan);color:var(--g9mu);margin-top:48px;padding:26px 0;font-size:14px}.g9f .g9w{justify-content:space-between;flex-wrap:wrap}.g9mu{margin-top:6px}.g9fl{display:flex;gap:18px;flex-wrap:wrap}.g9fl a{color:var(--g9mu)!important;text-decoration:none}.g9fl a:hover{color:var(--g9p)!important}
@media(max-width:1020px){.g9h .g9w{flex-wrap:wrap;height:auto;min-height:60px;padding:10px 16px}.g9bur{display:block}.g9nav,.g9r{display:none;width:100%}.g9h.open .g9nav{display:flex;flex-direction:column;order:4;flex:0 0 100%}.g9h.open .g9r{display:flex;flex-wrap:wrap;order:5;padding-bottom:8px;flex:0 0 100%}}
/* ---- unify shop tokens with the studio palette */
html[data-theme=light]{--bg:#f7f7fb;--pan:#fff;--line:#ece9f5;--c1:#7c3aed;--c2:#c026d3;--tx:#1c1830;--mu:#6b6684}
html[data-theme=dark]{--bg:#0c0a18;--pan:#16132a;--line:#2a2546;--c1:#a78bfa;--c2:#e879f9;--tx:#ece9ff;--mu:#a39fc2}
html body{background:var(--g9bg)!important;color:var(--g9tx)}
.btn{border-radius:12px!important;background:linear-gradient(135deg,var(--g9p),var(--g9p2))!important;color:#fff!important;font-weight:600}.btn.ghost,.ghost{background:transparent!important;border:1px solid var(--g9p)!important;color:var(--g9p)!important}
.card,.panel{border-radius:16px}
/* ---- studio dark mode */
html[data-theme=dark] .card:not([style*=gradient]),html[data-theme=dark] .panel,html[data-theme=dark] .box,html[data-theme=dark] .snav{background:var(--g9pan)!important;border-color:var(--g9line)!important;color:var(--g9tx)}
html[data-theme=dark] input,html[data-theme=dark] select,html[data-theme=dark] textarea{background:#1d1936!important;color:var(--g9tx)!important;border-color:var(--g9line)!important}
html[data-theme=dark] .mu{color:var(--g9mu)!important}html[data-theme=dark] .chip,html[data-theme=dark] .btn2,html[data-theme=dark] .opt>div{background:var(--g9pan)!important;color:var(--g9tx)!important;border-color:var(--g9line)!important}
html[data-theme=dark] .lg-form{background:var(--g9bg)!important;color:var(--g9tx)}
/* studio sub-menu */
.snav{display:flex;gap:6px;overflow-x:auto;padding:10px 20px;background:var(--g9pan);border-bottom:1px solid var(--g9line);max-width:none}.snav a{padding:7px 14px;border-radius:99px;color:var(--g9mu);text-decoration:none;white-space:nowrap;font-size:14px}.snav a.on{background:var(--g9soft);color:var(--g9p);font-weight:600}
/* ===== GenLabs-structure header (v2) ===== */
.g9bar{background:linear-gradient(90deg,#5b21b6,#a21caf,#7c3aed);color:#fff;text-align:center;font-size:13px;padding:7px 12px}.g9bar a{color:#5b21b6!important;background:#fff;border-radius:99px;padding:2px 12px;margin-left:10px;text-decoration:none;font-weight:600;font-size:12px}
.g9h{font-size:14px}.g9h .g9w{max-width:none;height:56px;padding:0 18px;gap:14px}
.g9logo i{display:flex;align-items:center;justify-content:center;color:#fff;font-style:normal;font-weight:800;font-size:15px;width:30px;height:30px;border-radius:8px}
.g9logo span{display:flex;flex-direction:column;line-height:1.05;font-size:17px;color:var(--g9p)}.g9logo small{font-size:8.5px;letter-spacing:.06em;color:var(--g9mu);font-weight:600}
.g9nav{gap:2px;align-items:center}.g9nav a{display:flex;align-items:center;gap:6px;padding:7px 10px;border-radius:8px;color:var(--g9tx);font-size:14px;position:relative}
.g9nav a svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.75}
.g9nav a.on{background:none;color:var(--g9p)}.g9nav a.on:after{content:"";position:absolute;left:8px;right:8px;bottom:-11px;height:2px;background:var(--g9p);border-radius:2px}
.g9nav em{font-style:normal;font-size:10px;background:var(--g9p2);color:#fff;border-radius:6px;padding:1px 6px;font-weight:600}.g9sp{flex:1}
.g9pill{display:flex;align-items:center;gap:6px;border:1px solid #d8c8fb;background:var(--g9soft);font-size:13px;padding:5px 12px}.g9pill i{width:7px;height:7px;border-radius:50%;background:#22c55e}
.g9ic{width:34px;height:34px;display:flex;align-items:center;justify-content:center;border:1px solid var(--g9line);border-radius:50%;background:var(--g9pan);color:var(--g9tx)!important;text-decoration:none;font-size:13px;cursor:pointer;position:relative;padding:0}.g9ic sup{position:absolute;top:-4px;right:-4px;background:var(--g9p2);color:#fff;font-size:9px;border-radius:99px;padding:1px 5px}
.g9av{width:34px;height:34px;border-radius:50%;border:0;background:linear-gradient(135deg,var(--g9p),var(--g9p2));color:#fff;font:inherit;font-weight:700;font-size:12px;cursor:pointer}
.g9a{padding:6px 12px}.g9btn{padding:7px 14px}
.g9h .g9nav a{padding:6px 7px;font-size:13.5px}@media(max-width:1100px) and (min-width:1021px){.g9logo small{display:none}.g9nav em{display:none}}
@media(max-width:1020px){.g9nav a span{display:inline}.g9h.open .g9nav{align-items:stretch}.g9sp{display:none}.g9nav a.on:after{display:none}.g9bar{font-size:11.5px}}
.snav{display:none!important}
.g9h .g9w{gap:8px}.g9r{gap:6px}.g9r>span{gap:6px}.g9th{display:none}.g9pill{padding:5px 10px}
@media(max-width:1180px) and (min-width:1021px){.g9logo small{display:none}.g9nav em{display:none}.g9h .g9nav a{padding:6px 5px;font-size:13px;gap:4px}.g9nav a svg{width:13px}}
@media(max-width:1180px) and (min-width:1021px){.g9pt{display:none}.g9ic,.g9av{width:30px;height:30px}.g9logo span{font-size:15px}}
@media(max-width:900px){.gl-hero .r{height:240px}}
@media(max-width:1180px) and (min-width:1021px){#g9acct .g9a{display:none}}
@media(max-width:700px){.g9bar a{display:none}.g9bar{font-size:11px;padding:6px 8px}}
body.lg .g9h,body.lg .g9bar{display:none}
.g9nav em.g9fr{background:#dcfce7;color:#15803d}body.mk .g9h .g9nav a{font-size:14.5px;padding:7px 14px}
.g9mob{display:none!important}@media(max-width:1020px){.g9mob{display:inline-block!important;margin-left:auto;order:2}.g9bur{margin-left:0!important}.lh .bt a{width:100%;text-align:center}}

/* one-time age confirmation (Google first login) */
.g9age{position:fixed;inset:0;z-index:9999;background:rgba(10,8,20,.55);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:16px}
.g9agebox{background:var(--g9pan,#fff);color:var(--g9tx,#111);border:1px solid var(--g9line,#e5e5ef);border-radius:18px;padding:24px;max-width:400px;width:100%;box-shadow:0 20px 60px rgba(0,0,0,.25);display:flex;flex-direction:column;gap:14px}
.g9agebox>b{font-size:18px}.g9agebox label{display:flex;gap:8px;align-items:flex-start;font-size:14px;line-height:1.5;cursor:pointer}
.g9agebox input{width:18px;height:18px;margin-top:2px;accent-color:var(--g9p,#7c3aed)}.g9agebox a{color:var(--g9p,#7c3aed)}
.g9agebox .g9btn{justify-content:center;padding:11px;border:0;cursor:pointer}.g9agebox .g9btn:disabled{opacity:.5;cursor:not-allowed}.g9agee{color:#e11d48;font-size:13px;margin:0}.g9agee:empty{display:none}

/* brand: logo mark + mascot */
.g9logo i.g9mk,.glg-logo i.g9mk,.lg9 i.g9mk{background:none!important;width:36px;height:36px;border-radius:0;padding:0;box-shadow:none}
.g9mk img{width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(0 2px 6px rgba(124,58,237,.25))}
.g9f .g9logo i.g9mk,.lg9 i.g9mk{width:40px;height:40px}
.lp .lw{position:relative}
.g9bear{position:absolute;pointer-events:none;user-select:none;z-index:2;height:auto;filter:drop-shadow(0 14px 22px rgba(60,20,120,.22));animation:g9float 5s ease-in-out infinite}
[data-theme=dark] .g9bear,.dk .g9bear{filter:drop-shadow(0 14px 26px rgba(0,0,0,.5)) drop-shadow(0 0 22px rgba(168,85,247,.25))}
@keyframes g9float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@media (prefers-reduced-motion:reduce){.g9bear{animation:none}}
.lstk{position:relative}
.g9bear.bh-hero{width:34%;max-width:200px;left:-6%;bottom:-4%;z-index:5}
.g9bear.bs-r{width:150px;right:8px;top:-18px}
.g9bear.bs-l{width:160px;left:8px;top:-10px}
.g9bear.bs-cta{width:150px;right:6%;bottom:-10px}
.g9bear.bl-login{position:relative;display:block;width:110px;margin:10px auto 4px;animation-duration:6s}
.glg-about{overflow:visible}
@media (max-width:900px){.g9bear.bs-r,.g9bear.bs-l,.g9bear.bs-cta{width:92px;top:-6px}.g9bear.bs-cta{top:auto;bottom:-6px}.g9bear.bh-hero{width:30%;left:-2%}}
@media (max-width:560px){.g9bear.bs-r,.g9bear.bs-l{width:76px;top:-28px}.g9bear.bs-cta{display:none}}
.lstk img.g9bear{border:0!important;background:none!important;border-radius:0!important;box-shadow:none!important;padding:0!important;aspect-ratio:auto!important;object-fit:contain!important;height:auto!important;top:auto;right:auto;rotate:none}