/* Nexi AI Studio — Black Velvet Gold theme and layout overrides (loaded last). */
:root{
  --bg:#060309;--card:#130A1C;--card-2:#1B1028;--accent:#4C1D95;--accent-hover:#5B21B6;
  --gold:#C9A45C;--lilac:#D6C9EC;--text:#F3EFF7;--muted:#ABA2B8;--line:#ffffff14;
  --link:#C9B6F2;--line-green:#06C755
}
body{background:var(--bg);color:var(--text);font-size:16px}
[hidden]{display:none!important}
.brand{display:flex!important;align-items:center;gap:11px;line-height:1}
.brand img.brand-mark{width:44px!important;height:44px;border-radius:11px;display:block}
.brand-text b{display:block;font:700 23px/1 'Space Grotesk',sans-serif;letter-spacing:2.5px;color:#fff}
.brand-text small{display:block;font:500 10px/1 'Space Grotesk',sans-serif;letter-spacing:3.2px;color:#B79CF2;margin-top:5px}
footer .footer-badge img{width:96px!important;height:96px;border-radius:50%}
.brand-statement img{width:260px!important;max-width:70%;height:auto;border-radius:50%}
.drawer-heading img{width:96px;height:96px;border-radius:50%}
header.luxury-header .header-contact{order:1;margin-left:14px}
p{color:var(--muted)}

/* Thai text never uses wide tracking. */
h1,h2,h3,.hero h1,.page-intro h1{letter-spacing:0}
html[lang=th] .eyebrow,html[lang=th] .menu-kicker{letter-spacing:.5px}
.eyebrow{color:var(--gold);font-size:12px}

/* Buttons: deep violet with a thin gold edge; secondary is a violet outline. */
.btn{border-color:#4C1D95;color:var(--lilac);background:transparent}
.btn:hover{background:#4C1D9533;border-color:#6D28D9}
.btn.primary,.primary{background:var(--accent);color:#fff;border:1px solid var(--gold)}
.btn.primary:hover,.primary:hover{background:var(--accent-hover)}
.link{color:var(--link)}

/* Surfaces: no glow, no neon. */
header.luxury-header,header.luxury-header.is-glass{background:#060309f2;box-shadow:none}
header.luxury-header .mega-panel{background:#130A1C;box-shadow:0 20px 40px #0008}
header.luxury-header .mega-column a.mega-product{color:#fff;font-weight:500}
header.luxury-header .mega-column a.mega-product small{color:var(--gold)}
.brand-statement>span{font-size:12px;color:var(--gold)}
.nav-dropdown summary .chevron{display:inline-block;line-height:1;transform:translateY(-2px)}
.nav-dropdown[open] summary .chevron{transform:rotate(180deg) translateY(2px)}
.card,.feature-panel,.detail-grid aside,.auth,dialog{background:var(--card);border-color:var(--line)}
.card:hover{border-color:#4C1D95}
.art{background:#1B1028}
.art-symbol{color:var(--lilac);text-shadow:none}
.art:before,.art:after{border-color:#ffffff10}
.placeholder{background:#1B1028;border-color:#4C1D9580}
.hero:before{display:none}
.chip.active{background:#4C1D9540;border-color:#6D28D9;color:#fff}
.tag{color:var(--gold);font-size:12px}
.stat{background:var(--card-2)}
.save[aria-pressed=true]{background:var(--accent);color:#fff}
#toast{background:var(--lilac);color:#1B1028}
.demo-bar,.social-top{display:none}

/* Hero product panel replaces the decorative orb. */
.showcase{height:auto;perspective:none}
.studio-panel{border:1px solid var(--line);border-top:2px solid var(--gold);border-radius:16px;background:var(--card);padding:32px}
.studio-panel .tag{margin-bottom:6px}
.studio-panel h3{font-size:24px;margin:0 0 6px;color:var(--text)}
.studio-panel>p{font-size:15px;margin:0 0 20px}
.studio-panel ul{list-style:none;margin:0 0 22px;padding:0}
.studio-panel li{padding:12px 0;border-top:1px solid var(--line);color:var(--text);font-size:15px;display:flex;gap:12px}
.studio-panel li b{color:var(--gold);font-weight:500;min-width:22px}
.studio-panel .micro{margin:14px 0 0}

/* Readable sizes (minimum 12px, body copy 14px+). */
.card p,.section-head p,.notice,.step p,details p,.spec span,.search-result small,.platform-task p{font-size:14px}
.card-bottom,.mega-column a small,.mega-caption,.micro,.art small,.search-count,.chip,.footer-contact a{font-size:12px}
.menu-kicker{font-size:11px}
.drawer-bottom>small,.drawer-bottom>p{font-size:12px}

/* Contact buttons. */
.contact-btn{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.contact-btn svg{width:18px;height:18px;flex-shrink:0}
.header-contact{display:flex;gap:10px;align-items:center}
.header-contact .btn{padding:9px 14px;font-size:13px}
.btn.line-btn{background:var(--line-green);border-color:var(--line-green);color:#fff}
.btn.line-btn:hover{background:#05B04B;border-color:#05B04B}
.contact-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
footer .footer-contact{display:flex;gap:16px;align-items:center;justify-self:end}
footer .footer-contact a{color:var(--lilac);display:inline-flex;align-items:center;gap:6px}
footer .footer-contact svg{width:18px;height:18px}
footer>div{color:var(--muted)}
.sticky-cta{display:none}
.article-cta{margin-top:34px}
.clip-frame{position:relative;width:100%;max-width:360px;margin:0 auto;aspect-ratio:9/16;background:#000;border-radius:12px;overflow:hidden}
.clip-frame iframe,.clip-frame video{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:contain;background:#000}
.clip-card .clip-frame{max-width:none;border-radius:0}
.clip-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.detail-grid .clip-frame{margin:0 0 10px}
.contact-panel{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center;padding:36px;border:1px solid var(--line);border-top:2px solid var(--gold);border-radius:16px;background:var(--card)}
.contact-panel h2{margin-bottom:10px}
.qr-card{margin:0;padding:14px 14px 10px;background:#fff;border-radius:14px;text-align:center;width:max-content}
.qr-card img{display:block;width:180px;height:180px}
.qr-card figcaption{font-size:13px;color:#1B1028;margin-top:6px;font-weight:500}
dialog .qr-card{margin:18px 0 6px}
@media(max-width:760px){.contact-panel{grid-template-columns:1fr;padding:24px;gap:22px}.qr-card{justify-self:center}.qr-card img{width:160px;height:160px}}

/* Tablet: two-row header (unchanged behaviour), hide the long contact buttons. */
@media(max-width:1350px){.header-contact .fb-btn{display:none}}

@media(max-width:1020px){.hero{padding-top:20px}}

/* Mobile: navigation stays visible as one swipeable row; header shrinks to ~104px. */
@media(max-width:560px){
  :root{--header-height:104px}
  header.luxury-header{padding:8px 14px}
  .brand img.brand-mark{width:36px!important;height:36px;border-radius:9px}
  .brand-text b{font-size:19px;letter-spacing:2px}
  .brand-text small{font-size:9px;letter-spacing:2.6px;margin-top:4px}
  .header-contact{display:none}
  header.luxury-header nav,header.luxury-header nav.open{display:flex;flex-wrap:nowrap;justify-content:flex-start;gap:20px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;margin-top:6px;padding:4px 0 0}
  header.luxury-header nav::-webkit-scrollbar{display:none}
  header.luxury-header nav>a,header.luxury-header .nav-dropdown summary{font-size:14px;padding:8px 0;flex-shrink:0}
  header.luxury-header .nav-dropdown{flex-shrink:0}
  .sticky-cta{display:flex;position:fixed;left:12px;right:12px;bottom:12px;z-index:70;gap:10px}
  .sticky-cta .btn{flex:1;padding:13px 10px;font-size:14px}
  .sticky-cta .btn:not(.line-btn){background:#130A1Cf2}
  body{padding-bottom:76px}
  #toast{bottom:84px}
  .studio-panel{padding:22px}
  .hero .eyebrow,.eyebrow{font-size:12px;letter-spacing:.5px}
  .hero .micro,.micro,.section-head .link,.section-head p,footer>div,.locale-btn{font-size:12px}
  .hero{padding-bottom:30px}
}