/* Public website — deliberately scoped away from the desktop studio. */
html { scroll-behavior: smooth; }
body { background: #080b14; color: #edf0fa; }
.portal-nav { padding: 16px max(24px, calc((100vw - 1200px)/2)); background: rgba(8,11,20,.9); border-color: #ffffff0e; }
.portal-brand { display:flex; align-items:center; gap:11px; border:0; background:none; color:#fff; font:inherit; font-size:17px; font-weight:750; text-align:left; cursor:pointer; white-space:nowrap; }
.brand-logo { display:grid; place-items:center; width:39px; height:39px; background:linear-gradient(140deg,#a390ff,#6953ed); border-radius:12px; color:#fff; font-size:17px; box-shadow:0 4px 25px #8a6cff33; }
.brand-caption { display:block; font-size:9px; letter-spacing:2px; color:#969bab; margin-top:4px; }
.portal-links { display:flex; gap:6px; align-items:center; }
.portal-links .btn { font-size:13px; }
.portal-links [aria-current=page] { color:#b7a7ff; background:#a08aff12; }
.portal-user-menu { position:relative; flex:none; }
.portal-avatar { display:grid; place-items:center; width:42px; height:42px; padding:0; overflow:hidden; border:1px solid #b7a3ff70; border-radius:50%; color:#fff; background:linear-gradient(140deg,#9b82fb,#4b3a9c); font-size:13px; font-weight:800; cursor:pointer; box-shadow:0 0 0 3px #a08aff12; }
.portal-avatar img { width:100%; height:100%; object-fit:cover; }
.portal-user-dropdown { position:absolute; top:calc(100% + 12px); right:0; z-index:180; width:240px; padding:8px; border:1px solid #ffffff1c; border-radius:13px; background:#141827; box-shadow:0 18px 48px #0009; }
.portal-user-summary { padding:10px 11px 12px; border-bottom:1px solid #ffffff12; overflow:hidden; }
.portal-user-summary strong,.portal-user-summary small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.portal-user-summary strong { color:#f3f1ff; font-size:13px; }
.portal-user-summary small { margin-top:4px; color:#929bb1; font-size:11px; }
.portal-user-dropdown > button { width:100%; padding:10px 11px; border:0; border-radius:8px; background:transparent; color:#dfe3ef; text-align:left; font:inherit; font-size:12px; cursor:pointer; }
.portal-user-dropdown > button:hover { background:#ffffff0c; color:#c9baff; }
/* Customer account dashboard */
section[x-show="tab === 'customer'"] > .studio-card { padding:30px; border-color:#ffffff12; background:radial-gradient(ellipse at 90% 0,#8b6df015,transparent 34%),linear-gradient(155deg,#111626,#0b101a); box-shadow:0 24px 80px #0003; }
.customer-welcome { display:flex; justify-content:space-between; align-items:center; gap:24px; padding:25px 26px; margin:4px 0 20px; border:1px solid #a78bfa28; border-radius:18px; background:radial-gradient(ellipse at 80% 0,#8d72ef1d,transparent 45%),linear-gradient(115deg,#191d30,#141827); }
.customer-welcome-main,.customer-welcome-actions { display:flex; align-items:center; gap:17px; min-width:0; }
.customer-profile-avatar { display:grid; place-items:center; width:64px; height:64px; flex:none; overflow:hidden; border-radius:20px; border:1px solid #bba7ff50; color:#fff; background:linear-gradient(140deg,#a48cff,#5742ad); box-shadow:0 10px 30px #7356d533; font-size:21px; font-weight:800; }
.customer-profile-avatar img { width:100%; height:100%; object-fit:cover; }
.customer-welcome-copy { min-width:0; }
.customer-kicker { color:#b5a2f9; font-size:9px; font-weight:750; letter-spacing:1.9px; }
.customer-welcome-copy h2 { margin:5px 0 5px; color:#f6f4ff; font-size:23px; letter-spacing:-.6px; }
.customer-welcome-copy p { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0; color:#aab1c3; font-size:12px; }
.customer-id { padding-left:10px; border-left:1px solid #ffffff22; color:#828ba1; font-size:11px; }
.customer-welcome-actions { justify-content:flex-end; flex-wrap:wrap; }
.customer-status-pill { display:inline-flex; align-items:center; gap:8px; padding:8px 11px; border:1px solid #ffffff12; border-radius:999px; background:#ffffff07; color:#d0d5e2; font-size:11px; white-space:nowrap; }
.customer-status-pill i { width:7px; height:7px; border-radius:50%; background:#f3b84e; }
.customer-status-pill.is-active i { background:#4adea3; box-shadow:0 0 12px #4adea388; }
.customer-status-pill.is-inactive i { background:#f3b84e; }
.customer-section-nav { position:sticky; top:76px; z-index:20; display:flex; gap:5px; overflow:auto; margin:0 0 17px; padding:6px; border:1px solid #ffffff10; border-radius:11px; background:#0c111beF; backdrop-filter:blur(14px); }
.customer-section-nav a { flex:none; padding:9px 13px; border-radius:7px; color:#9da6b9; text-decoration:none; font-size:11px; transition:background .18s,color .18s; }
.customer-section-nav a:hover { color:#e5ddff; background:#a78bfa16; }
.customer-metrics { grid-template-columns:repeat(3,minmax(0,1fr))!important; scroll-margin-top:140px; }
.customer-metrics > div { min-width:0; border-color:#ffffff12!important; background:linear-gradient(145deg,#171d2c,#111621)!important; box-shadow:0 8px 25px #0002; }
.customer-metrics > div:first-child { border-top:2px solid #a78bfa75!important; }
.customer-metrics > div:nth-child(2) { border-top:2px solid #47d6a375!important; }
.customer-metrics > div:nth-child(3) { border-top:2px solid #59c7e875!important; }
.customer-panel { scroll-margin-top:140px; padding:21px!important; border-radius:15px!important; background:linear-gradient(145deg,#10251f,#101a20)!important; box-shadow:0 12px 35px #0002; }
.customer-section-heading { scroll-margin-top:140px; margin:30px 0 13px!important; color:#edf0f8; font-size:16px!important; }
section[x-show="tab === 'customer'"] .studio-table { border:1px solid #ffffff12; border-radius:11px; overflow:hidden; }
section[x-show="tab === 'customer'"] .studio-table th { padding:13px 14px; color:#919cb1; background:#111724; font-size:10px; letter-spacing:.4px; text-transform:uppercase; }
section[x-show="tab === 'customer'"] .studio-table td { padding:14px; color:#cbd2df; border-color:#ffffff0b; font-size:11px; }
section[x-show="tab === 'customer'"] .studio-table tbody tr:hover { background:#ffffff05; }
.portal-container { max-width:1248px; padding:0 24px 72px; }
.portal-container > section:not(.marketing) { padding-top:44px; min-height:65vh; }
body .btn-primary, .marketing .primary { background:linear-gradient(115deg,#9b82fb,#7258e8); border:1px solid #b5a0ff50; color:white; box-shadow:0 5px 25px #8664ee20; }
.marketing { --muted:#a3aabd; --line:#ffffff12; }
.marketing button, .marketing a { -webkit-tap-highlight-color:transparent; }
.marketing .eyebrow { color:#b9a8ff; font-size:11px; letter-spacing:2px; font-weight:750; text-transform:uppercase; }
.marketing h1,.marketing h2,.marketing h3,.marketing p { margin:0; }
.marketing h2 { font-size:clamp(27px,3vw,39px); line-height:1.25; letter-spacing:-1.2px; margin:12px 0; }
.marketing p { color:var(--muted); line-height:1.75; font-size:14px; }
.marketing .action { display:inline-flex; justify-content:center; align-items:center; gap:14px; padding:13px 21px; border-radius:10px; font-size:13px; font-weight:650; cursor:pointer; text-decoration:none; transition:transform .2s,background .2s; }
.marketing .action:hover { transform:translateY(-2px); }
.marketing .secondary { border:1px solid #ffffff25; background:#ffffff04; color:#d8dce8; }
.marketing .actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:26px; }
.marketing .hero { display:grid; grid-template-columns:1.05fr 1fr; align-items:center; gap:66px; min-height:660px; padding:70px 0 46px; position:relative; }
.marketing .hero:before { content:''; position:absolute; pointer-events:none; width:650px; height:580px; right:-90px; top:0; background:radial-gradient(ellipse,#6f4dc820,transparent 67%); z-index:-1; }
.marketing .launch-badge { display:inline-flex; align-items:center; gap:9px; color:#c9c1e8; font-size:11px; background:#9c80ff0b; border:1px solid #a68bff27; border-radius:30px; padding:8px 12px; }
.marketing .launch-badge i { width:6px; height:6px; border-radius:50%; background:#af96ff; box-shadow:0 0 12px #b49cff; }
.marketing h1 { font-size:clamp(38px,4.6vw,62px); line-height:1.15; letter-spacing:-2.6px; font-weight:800; margin:22px 0; }
.marketing h1 em { font-style:normal; background:linear-gradient(90deg,#b5a1ff,#8dbdff,#7ae3dc); background-clip:text; -webkit-background-clip:text; color:transparent; }
.marketing .hero-description { max-width:485px; font-size:15px; }
.marketing .hero-tabs { display:flex; gap:7px; margin-top:25px; flex-wrap:wrap; }
.marketing .hero-tabs button { padding:8px 12px; color:#969eb4; border:1px solid #ffffff13; border-radius:7px; font-size:11px; background:transparent; cursor:pointer; }
.marketing .hero-tabs button[aria-selected=true] { color:#d5caff; border-color:#aa8eff60; background:#a489ff13; }
.marketing .hero-note { display:flex; align-items:center; gap:8px; font-size:11px; color:#858da3; margin-top:17px; }
.marketing .hero-note span { color:#83d8bd; }
.studio-preview { border:1px solid #a98aff38; background:#111522; border-radius:17px; padding:0 18px 18px; box-shadow:0 28px 80px #0007,0 0 55px #8b5cf60c; transform:perspective(1500px) rotateY(-5deg) rotateX(2deg); position:relative; min-width:0; }
.preview-top { display:flex; align-items:center; gap:6px; padding:16px 0; border-bottom:1px solid #ffffff0a; font-size:10px; color:#9299ad; }
.preview-top i { width:6px; height:6px; border-radius:50%; background:#ff6a7a; }
.preview-top i:nth-child(2) { background:#efbd61; }.preview-top i:nth-child(3) { background:#6ecead; }
.preview-top span { margin-left:12px; }.preview-top b { margin-left:auto; font-weight:500; color:#baabf2; }
.preview-scene { height:250px; margin:16px 0; border-radius:10px; position:relative; overflow:hidden; background:radial-gradient(ellipse at 68% 15%,#eda87670,transparent 35%),radial-gradient(ellipse at 18% 35%,#9080cb60,transparent 50%),linear-gradient(155deg,#353455,#6b6275 48%,#18232c); display:grid; place-items:center; }
.preview-scene:before,.preview-scene:after { content:''; position:absolute; width:130%; height:130px; background:linear-gradient(140deg,#283441,#101e29); left:-12%; bottom:-35px; transform:rotate(-12deg); border-radius:45% 60% 0 0; }
.preview-scene:after { left:35%; bottom:-35px; background:linear-gradient(120deg,#35424e,#13202d); transform:rotate(17deg); }
.scene-sun { position:absolute; width:80px; height:80px; background:#ffe1a1; border-radius:50%; top:35px; right:90px; box-shadow:0 0 70px #ffcd8c66; opacity:.8; }
.scene-label { position:absolute; left:14px; top:14px; z-index:2; font-size:9px; letter-spacing:1.5px; color:#fff; background:#10172566; border:1px solid #ffffff22; border-radius:5px; padding:6px 9px; }
.scene-caption { position:absolute; left:20px; bottom:20px; z-index:2; color:#e7e9f1; }.scene-caption small { font-size:9px; letter-spacing:2px; }.scene-caption strong { display:block; font-size:25px; letter-spacing:-.5px; margin:5px 0; }
.scene-caption span { font-size:10px; color:#c3cad4; }
.preview-play { z-index:3; border:1px solid #ffffff40; border-radius:50%; background:#ffffff15; color:#fff; width:45px; height:45px; display:grid; place-items:center; backdrop-filter:blur(8px); }
.preview-prompt { padding:12px; border:1px solid #ffffff12; background:#080c16; border-radius:8px; font-size:11px; color:#acb4c9; line-height:1.6; }.preview-prompt span { color:#ac97ee; display:block; font-size:9px; letter-spacing:1.4px; margin-bottom:4px; }
.preview-timeline { display:flex; gap:5px; margin-top:14px; align-items:center; }.preview-timeline span { height:24px; border-radius:4px; background:linear-gradient(110deg,#7b63b5,#3f4f72); flex:1; border:1px solid #ffffff0d; }.preview-timeline span:nth-child(2) { background:linear-gradient(110deg,#456b6d,#31535e); }.preview-timeline span:nth-child(3) { background:linear-gradient(110deg,#8b6f68,#4b435d); }
.preview-timeline small { color:#929bb1; font-size:9px; margin-left:7px; }
.preview-float { position:absolute; right:-20px; bottom:65px; padding:12px 16px; border:1px solid #bda3ff30; background:#1c2132; border-radius:10px; font-size:11px; box-shadow:0 8px 35px #0005; color:#d9d4ef; }.preview-float span { display:block; font-size:9px; color:#8ba298; margin-top:4px; }
.marketing .engine-strip { border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:23px 0; display:flex; justify-content:space-between; gap:20px; align-items:center; color:#b8bfce; font-size:15px; font-weight:650; flex-wrap:wrap; }.engine-strip small { font-size:10px; letter-spacing:1.5px; color:#6f7890; font-weight:500; }
.marketing .section { padding:76px 0 0; scroll-margin-top:100px; }.marketing .section-heading { text-align:center; max-width:620px; margin:0 auto 32px; }
.marketing .use-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.marketing .use-card { background:linear-gradient(150deg,#141827,#0e121e); border:1px solid var(--line); border-radius:15px; overflow:hidden; }
.marketing .card-art { height:170px; position:relative; overflow:hidden; display:flex; align-items:end; padding:20px; }.card-art b { z-index:1; font-size:24px; font-weight:800; line-height:1.15; letter-spacing:-.7px; }.card-art small { position:absolute; top:14px; left:15px; font-size:9px; letter-spacing:1.4px; color:#e1d5ff; padding:5px 8px; border:1px solid #ffffff25; border-radius:5px; }
.art-product { background:radial-gradient(ellipse at 75% 35%,#c89d7c77,transparent 45%),linear-gradient(130deg,#594755,#202032); }.art-product:after { content:''; position:absolute; width:55px; height:100px; background:linear-gradient(100deg,#e3c6a9,#796152); border:2px solid #eacbb477; right:45px; top:45px; border-radius:7px 7px 13px 13px; transform:rotate(17deg); box-shadow:18px 14px 35px #0005; }
.art-story { background:radial-gradient(circle at 80% 40%,#ac9ce95c,transparent 40%),linear-gradient(140deg,#283b59,#19152e); }.art-story:after { content:'✦'; position:absolute; right:36px; top:8px; font-size:140px; color:#d0bdff55; }
.art-batch { background:linear-gradient(130deg,#193d41,#102732); }.art-batch:after { content:'▥'; position:absolute; right:35px; top:0; font-size:150px; color:#82d6be40; transform:rotate(-15deg); }
.marketing .card-body { padding:23px; }.marketing h3 { font-size:17px; margin-bottom:10px; letter-spacing:-.3px; }.marketing .card-body p { font-size:12px; min-height:64px; }.marketing .text-action { border:0; background:transparent; color:#baa6ff; font-size:12px; padding:18px 0 0; cursor:pointer; font-weight:650; }
.marketing .workflow { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border:1px solid var(--line); border-radius:14px; background:#111522; }.marketing .workflow article { padding:27px 22px; border-right:1px solid var(--line); }.marketing .workflow article:last-child { border:0; }.workflow .step { color:#a78df3; font-size:11px; display:block; margin-bottom:21px; }.marketing .workflow h3 { font-size:14px; }.marketing .workflow p { font-size:12px; }
.marketing .feature-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; }.marketing .feature-list article { border-top:1px solid var(--line); padding-top:23px; }.feature-icon { display:grid; place-items:center; width:35px; height:35px; color:#b7a3ff; border:1px solid #a28bff25; border-radius:10px; background:#9e80ff0d; margin-bottom:16px; font-size:17px; }.marketing .feature-list p { font-size:12px; }
.marketing .plan-teaser { display:flex; justify-content:space-between; align-items:center; gap:30px; padding:38px; border:1px solid #a88aff30; border-radius:18px; background:radial-gradient(ellipse at right,#7960ce20,transparent 65%),#111421; }.marketing .plan-teaser h2 { font-size:30px; }.marketing .plan-teaser p { max-width:600px; }
.marketing .faq-layout { display:grid; grid-template-columns:.7fr 1fr; gap:70px; }.marketing details { border-bottom:1px solid var(--line); padding:19px 0; }.marketing summary { cursor:pointer; font-size:14px; color:#dbe0ed; list-style:none; display:flex; justify-content:space-between; gap:14px; }.marketing summary:after { content:'+'; color:#ac97ee; }.marketing details[open] summary:after { content:'−'; }.marketing details p { font-size:13px; padding:14px 22px 0 0; }
.marketing .final-cta { text-align:center; padding:48px 24px; border:1px solid var(--line); border-radius:18px; background:radial-gradient(ellipse at 50% 0,#8061d92a,transparent 75%),#0e121d; }.marketing .final-cta .actions { justify-content:center; }
.portal-footer { border-top:1px solid #ffffff10; max-width:1200px; margin:auto; padding:25px 0; display:flex; justify-content:space-between; align-items:center; color:#7e879d; font-size:12px; gap:15px; flex-wrap:wrap; }
.portal-notice { position:fixed; bottom:25px; right:25px; z-index:300; max-width:min(430px,90vw); border:1px solid #a58aff66; background:#1c2032; box-shadow:0 10px 40px #0008; border-radius:12px; padding:14px 18px; display:flex; gap:15px; align-items:center; font-size:13px; }
.checkout-panel { position:sticky; bottom:15px; z-index:110; display:flex; align-items:center; gap:18px; max-width:1100px; margin:0 auto 20px; padding:18px; background:#151a2af5; border:1px solid #a891ff66; border-radius:15px; box-shadow:0 12px 40px #0008; flex-wrap:wrap; }.checkout-panel p { margin:4px 0; color:#bba6ff; }.checkout-panel label { font-size:11px; display:block; margin-bottom:5px; }
.plan-card { background:linear-gradient(145deg,#151a2b,#0e1320); }.plan-card.featured { border-color:#a28aff; }.plan-card .pill { font-size:10px; }
.pricing-eyebrow { display:block; font-size:10px; font-weight:700; color:#bba5ff; letter-spacing:2px; margin:8px 0 16px; }
.auth-page { width:100%; max-width:490px; margin:0 auto; }
.auth-modal { position:fixed; inset:0; z-index:250; display:flex; flex-direction:column; align-items:center; justify-content:center; width:100%; max-width:none; margin:0; padding:30px 18px; overflow-y:auto; background:radial-gradient(ellipse at 50% 15%,#7961cd18,transparent 55%),linear-gradient(#ffffff04 1px,transparent 1px),linear-gradient(90deg,#ffffff04 1px,transparent 1px),#080b14; background-size:auto,36px 36px,36px 36px,auto; }
.auth-modal[style*="display: none"] { display:none!important; }
.auth-modal:before { content:''; position:fixed; inset:0; z-index:-1; background:#03050bd9; backdrop-filter:blur(9px); }
.auth-modal .auth-card { width:min(100%,490px); flex-shrink:0; }
.auth-modal .auth-brand { flex-shrink:0; }
.auth-modal .auth-caption,.auth-modal .auth-home { flex-shrink:0; }
.auth-close { position:fixed; top:20px; right:24px; z-index:2; width:40px; height:40px; border:1px solid #ffffff20; border-radius:50%; background:#111522d9; color:#c5cadd; font-size:24px; cursor:pointer; }
.auth-close:hover { border-color:#b49bff88; color:#fff; }
.auth-brand { display:flex; align-items:center; justify-content:center; gap:12px; margin:0 auto 30px; padding:0; background:none; border:0; color:#f4f5fb; font:inherit; font-size:22px; font-weight:750; cursor:pointer; text-align:left; }
.auth-brand .brand-logo { width:45px; height:45px; font-size:19px; }.auth-brand .brand-caption { font-size:8px; letter-spacing:2.7px; }
.auth-card { position:relative; overflow:hidden; border:1px solid #ffffff10; border-radius:22px; background:linear-gradient(150deg,#151927,#101420); box-shadow:0 24px 80px #0004; padding:36px 38px 30px; }
.auth-card:before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,#b8a0ff,#8064ec); }
.auth-heading { text-align:center; margin-bottom:27px; }.auth-heading h1 { font-size:28px; line-height:1.3; letter-spacing:-.8px; margin:8px 0 10px; }.auth-heading p { font-size:12px; line-height:1.8; margin:0; color:#949eb2; }
.auth-selected-plan { display:grid; gap:4px; border:1px solid #a88aff28; background:#a38aff09; border-radius:8px; padding:12px; font-size:11px; margin-bottom:18px; }.auth-selected-plan > span { color:#99a4bc; }.auth-selected-plan strong { font-size:12px; font-weight:600; }.auth-selected-plan button { justify-self:start; border:0; background:none; color:#bba4ff; cursor:pointer; font:inherit; padding:4px 0 0; }
.auth-page .auth-google { width:100%; min-height:48px; font-size:14px; border-radius:10px; box-shadow:none; gap:12px; }
.auth-divider { display:flex; align-items:center; gap:15px; color:#6f7b91; font-size:11px; margin:23px 0; }.auth-divider:before,.auth-divider:after { content:''; height:1px; flex:1; background:#ffffff12; }
.auth-form { display:grid; gap:17px; }.auth-form label { display:block; color:#c8cfdd; font-size:12px; font-weight:550; margin-bottom:8px; }.auth-optional { font-size:10px; color:#8490a7; font-weight:400; }
.auth-input-wrap { position:relative; display:flex; align-items:center; }.auth-input-wrap input { width:100%; min-width:0; height:46px; padding:10px 54px 10px 40px; border:1px solid #ffffff18; border-radius:10px; color:#e1e6f0; background:#0b101b; font:inherit; font-size:13px; outline:none; transition:border-color .15s,box-shadow .15s; }.auth-input-wrap input:focus { border-color:#a68aff; box-shadow:0 0 0 3px #a68aff12; }.auth-input-wrap input::placeholder { color:#576278; font-size:12px; }.auth-input-wrap input:disabled { opacity:.6; }
.auth-input-icon { position:absolute; left:14px; color:#738097; pointer-events:none; font-size:20px; }.auth-reveal { position:absolute; right:11px; background:none; border:0; padding:5px; font:inherit; font-size:10px; color:#a79aca; cursor:pointer; }
.auth-input-wrap input:-webkit-autofill { -webkit-text-fill-color:#e1e6f0; caret-color:#e1e6f0; -webkit-box-shadow:0 0 0 1000px #0b101b inset; }
.auth-consents { display:grid; gap:9px; margin:0; }.auth-consents > div { display:flex; align-items:center; gap:4px; flex-wrap:wrap; font-size:10px; }.auth-consents label { display:flex; align-items:center; gap:7px; margin:0; font-weight:400; font-size:10px; color:#939fb5; cursor:pointer; }.auth-consents input,.auth-device input { width:14px; height:14px; accent-color:#9a80f2; margin:0; flex-shrink:0; }.auth-consents button { border:0; background:none; padding:1px 0; color:#bcabf2; font:inherit; font-size:10px; cursor:pointer; text-decoration:underline; text-underline-offset:3px; text-decoration-color:#bcabf244; }
.auth-page .auth-submit { width:100%; display:flex; justify-content:center; align-items:center; gap:14px; min-height:47px; border-radius:10px; font-size:13px; font-weight:750; }.auth-page button:disabled { opacity:.5; cursor:wait; }
.auth-device { font-size:10px; color:#8b96ae; border-bottom:1px solid #ffffff0b; padding-bottom:15px; }.auth-device summary { cursor:pointer; }.auth-device > div { padding-top:13px; }.auth-device label { display:flex; align-items:start; gap:9px; font-size:10px; line-height:1.7; color:#9ca7bb; margin:0; cursor:pointer; }.auth-device p { font-size:10px; line-height:1.8; color:#748199; margin:8px 0 0; overflow-wrap:anywhere; }.auth-device code { color:#a694dc; font-size:9px; }
.auth-switch { display:flex; justify-content:center; align-items:center; gap:6px; font-size:12px; color:#8c98ad; margin:23px 0 0; flex-wrap:wrap; }.auth-switch button { border:0; padding:0; background:none; font:inherit; color:#bba4ff; font-weight:650; cursor:pointer; }
.auth-caption { text-align:center; font-size:10px; line-height:1.8; color:#75829a; margin:20px 0 10px; }.auth-home { display:block; margin:auto; border:0; background:none; color:#8f9ab0; font:inherit; font-size:11px; padding:5px; cursor:pointer; }
.auth-error { background:#e47a8a0c; border:1px solid #e47a8a35; color:#f2b1bc; padding:12px; font-size:12px; line-height:1.7; margin-bottom:18px; border-radius:8px; overflow-wrap:anywhere; }
@media(max-width:680px) { .auth-modal { justify-content:flex-start; padding:24px 16px; }.auth-brand { font-size:21px; margin:2px auto 21px; }.auth-card { padding:28px 22px 24px; border-radius:17px; }.auth-heading h1 { font-size:25px; }.auth-heading p { font-size:12px; }.auth-input-wrap input { font-size:16px; }.auth-heading { margin-bottom:23px; }.auth-consents > div,.auth-consents label,.auth-consents button { font-size:11px; }.auth-caption { font-size:10px; } }
.legal-page { --legal-line:#ffffff12; --legal-muted:#9aa5ba; }
.legal-back { display:inline-flex; align-items:center; gap:5px; border:0; background:none; color:#a7b0c3; padding:0; font:inherit; font-size:12px; cursor:pointer; margin-bottom:30px; }
.legal-back:hover,.footer-policies button:hover { color:#c0adff; }
.legal-heading { max-width:780px; scroll-margin-top:105px; }
.legal-eyebrow { font-size:10px; letter-spacing:2px; font-weight:750; color:#b8a0ff; }
.legal-heading h1 { font-size:clamp(30px,4vw,44px); line-height:1.22; letter-spacing:-1.4px; margin:14px 0; }
.legal-heading > p { font-size:14px; color:var(--legal-muted); line-height:1.8; max-width:670px; margin:0; }
.legal-version { display:flex; align-items:center; gap:9px; flex-wrap:wrap; color:#929db2; font-size:11px; margin-top:23px; }
.legal-version strong { color:#d5d9e7; font-weight:600; }.legal-dot { width:6px; height:6px; border-radius:100%; background:#83cdb4; }
.legal-tabs { display:flex; flex-wrap:wrap; gap:8px; padding:24px 0; border-bottom:1px solid var(--legal-line); margin-bottom:32px; }
.legal-tabs button { color:#a6b0c4; background:#ffffff03; border:1px solid #ffffff16; border-radius:8px; padding:11px 17px; cursor:pointer; font:inherit; font-size:12px; }
.legal-tabs button[aria-current=page] { color:#d4c6ff; background:#9a7cf51a; border-color:#a68aff60; }
.legal-tabs button:hover { border-color:#ae94f677; }
.legal-layout { display:grid; grid-template-columns:245px minmax(0,1fr); gap:38px; align-items:start; }
.legal-sidebar { position:sticky; top:105px; padding:20px 0; }
.legal-toc-title { font-size:10px; font-weight:700; color:#7d8aa4; letter-spacing:1.5px; margin-bottom:17px; }
.legal-sidebar nav { display:grid; gap:5px; }
.legal-sidebar nav button { border:0; background:transparent; display:flex; align-items:start; gap:12px; color:#b2bbce; text-align:left; cursor:pointer; font:inherit; font-size:12px; line-height:1.6; padding:10px 8px; border-radius:7px; }
.legal-sidebar nav button:hover,.legal-sidebar nav button:focus-visible { color:#d8caff; background:#a58bff0d; }
.legal-sidebar nav button > span:first-child { color:#9380c6; font-size:10px; padding-top:2px; }
.legal-sidebar-note { color:#8592ab; font-size:11px; line-height:1.8; border-top:1px solid var(--legal-line); padding-top:20px; margin-top:24px; }
.legal-top-link { margin-top:19px; padding:0; color:#b19cfa; border:0; background:none; cursor:pointer; font:inherit; font-size:11px; }
.legal-reading { min-width:0; }
.legal-document { padding:32px 38px; border:1px solid var(--legal-line); border-radius:14px; background:linear-gradient(145deg,#121725,#0f131e); color:#bac4d6; font-size:14px; line-height:1.95; overflow-wrap:anywhere; }
.legal-document p { margin:12px 0; }
.legal-document h1 { font-size:17px; line-height:1.7; color:#e6e8f4; margin:0 0 18px; letter-spacing:.1px; }
.legal-document h2 { font-size:16px; line-height:1.85; color:#ded4ff; margin:0 0 20px; font-weight:650; }
.legal-document h3 { font-size:15px; line-height:1.7; color:#e0e4ef; margin:24px 0 13px; }
.legal-document strong { color:#dce2ef; font-weight:600; }
.legal-document code { font-size:.86em; color:#bfc4ea; background:#b099ff0a; border:1px solid #b099ff12; padding:2px 5px; border-radius:4px; white-space:normal; overflow-wrap:anywhere; }
.legal-document ul,.legal-document ol { padding-left:24px; margin:12px 0 24px; }.legal-document li { margin:10px 0; padding-left:3px; }.legal-document li::marker { color:#ab95eb; }
.legal-document li > ul,.legal-document li > ol { margin:10px 0; }
.legal-document blockquote { border-left:3px solid #cba36b; background:#cba36b09; border-radius:0 8px 8px 0; margin:24px 0; padding:10px 19px; }
.legal-document hr { border:0; border-top:1px solid var(--legal-line); margin:30px 0; }
.legal-article { scroll-margin-top:110px; outline:none; }.legal-article:focus-visible { outline:2px solid #a890ed; outline-offset:8px; border-radius:4px; }
.legal-source-note { display:flex; gap:13px; background:#a58aff0a; border:1px solid #a58aff29; border-radius:11px; padding:18px 21px; margin-bottom:18px; color:#d2c5f6; }
.legal-note-icon { border:1px solid #a58aff66; width:22px; height:22px; border-radius:50%; display:grid; place-items:center; font-size:12px; flex-shrink:0; }
.legal-source-note strong { font-size:13px; font-weight:600; }.legal-source-note p { color:#a0abc2; font-size:12px; line-height:1.7; margin:7px 0; }
.legal-source-note button,.legal-reading-footer button { color:#bba6ff; border:0; background:none; font:inherit; font-size:12px; cursor:pointer; padding:0; line-height:1.7; text-align:left; }
.legal-verification { border:1px solid var(--legal-line); border-radius:10px; margin-top:18px; color:#91a0b8; font-size:12px; }
.legal-verification summary { cursor:pointer; padding:17px 20px; color:#b9c1d2; }.legal-verification > div { padding:0 20px 18px; line-height:1.8; }.legal-verification code { display:block; overflow-wrap:anywhere; font-size:11px; color:#b1a1e2; }.legal-verification ul { padding-left:18px; }.legal-verification li { margin:8px 0; }
.legal-reading-footer { display:flex; justify-content:space-between; gap:20px; align-items:center; margin-top:25px; padding:20px 0; border-top:1px solid var(--legal-line); font-size:11px; color:#8090aa; }
.legal-feedback { padding:25px; color:#a8b4c9; border:1px solid var(--legal-line); border-radius:12px; font-size:14px; }.legal-error { display:flex; align-items:center; justify-content:space-between; gap:15px; color:#efb2ba; }
.footer-policies { display:flex; flex-wrap:wrap; gap:18px; }.footer-policies button { border:0; padding:6px 0; font:inherit; font-size:11px; color:#94a0b7; background:none; cursor:pointer; }
@media(max-width:900px) { .legal-layout { grid-template-columns:200px minmax(0,1fr); gap:22px; }.legal-document { padding:25px; } }
@media(max-width:680px) {
  .legal-page .legal-heading h1 { font-size:31px; letter-spacing:-1px; }
  .legal-heading,.legal-article { scroll-margin-top:165px; }
  .legal-layout { grid-template-columns:minmax(0,1fr); gap:20px; }
  .legal-sidebar { position:static; padding:17px; border:1px solid var(--legal-line); border-radius:11px; background:#111522; }
  .legal-sidebar nav { gap:0; }.legal-sidebar nav button { padding:8px 0; }
  .legal-sidebar-note,.legal-top-link { display:none; }
  .legal-document { padding:22px 18px; font-size:14px; line-height:1.9; }.legal-document h2 { font-size:15px; }
  .legal-tabs { gap:6px; padding:22px 0; margin-bottom:22px; }.legal-tabs button { padding:10px 12px; font-size:11px; }
  .legal-source-note { padding:16px; }.legal-reading-footer { align-items:start; }.footer-policies { gap:9px 17px; }
}
.portal-container .grid-2,.portal-container .grid-3,.portal-container .grid-4 { min-width:0; }
@media(min-width:1000px) { .pricing-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:900px) { .marketing .hero { gap:30px; min-height:auto; padding:48px 0; }.marketing h1 { font-size:44px; }.preview-float { right:0; }.marketing .use-grid { gap:12px; }.marketing .card-body { padding:18px; }.marketing .workflow { grid-template-columns:repeat(2,minmax(0,1fr)); }.marketing .workflow article { border-bottom:1px solid var(--line); }.marketing .faq-layout { gap:30px; }.portal-nav { padding:14px 20px; }.portal-footer { margin:0 24px; } }
@media(max-width:680px) { .portal-nav { gap:12px; }.portal-brand { font-size:15px; }.portal-links { width:100%; overflow:auto; }.portal-links .btn { flex-shrink:0; padding:8px 10px; font-size:12px; }.portal-container { padding:0 18px 42px; }.marketing .hero { grid-template-columns:1fr; padding-top:35px; gap:35px; }.marketing h1 { font-size:43px; letter-spacing:-1.8px; }.marketing .hero-description { font-size:14px; }.studio-preview { transform:none; }.preview-scene { height:220px; }.marketing .engine-strip { font-size:12px; gap:17px; justify-content:center; }.engine-strip small { width:100%; text-align:center; }.marketing .section { padding-top:52px; }.marketing .use-grid,.marketing .feature-list,.marketing .faq-layout { grid-template-columns:1fr; }.marketing .card-body p { min-height:0; }.marketing .card-art { height:155px; }.marketing .workflow article { padding:22px 16px; }.marketing .plan-teaser { flex-direction:column; align-items:start; padding:25px; }.marketing .plan-teaser h2 { font-size:26px; }.marketing .feature-list { gap:22px; }.marketing .faq-layout { gap:7px; }.portal-container .grid-2,.portal-container .grid-3,.portal-container .grid-4 { grid-template-columns:minmax(0,1fr); }.portal-container .studio-card-header { flex-wrap:wrap; gap:12px; }.portal-container .studio-card { padding:18px; overflow-wrap:anywhere; }.portal-container table { display:block; overflow-x:auto; }.hwid-banner { padding:16px; }.hwid-code-badge { max-width:100%; overflow-wrap:anywhere; flex-wrap:wrap; }.pricing-grid,.feature-grid { grid-template-columns:minmax(0,1fr); }.portal-footer { margin:0 18px; }.checkout-panel { margin:0 12px 12px; }.portal-notice { right:15px; bottom:15px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }.marketing .action,.plan-card { transition:none; } }
@media(max-width:760px) {
  section[x-show="tab === 'customer'"] > .studio-card { padding:18px; }
  .customer-welcome { align-items:flex-start; flex-direction:column; padding:20px; }
  .customer-welcome-actions { width:100%; justify-content:space-between; }
  .customer-welcome-copy h2 { font-size:19px; }
  .customer-profile-avatar { width:54px; height:54px; border-radius:16px; }
  .customer-section-nav { top:90px; }
  .customer-metrics { grid-template-columns:repeat(2,minmax(0,1fr))!important; }
  .customer-panel { padding:16px!important; }
  .customer-section-heading { align-items:flex-start!important; flex-direction:column; gap:7px; }
}
@media(max-width:480px) {
  .customer-metrics { grid-template-columns:minmax(0,1fr)!important; }
  .customer-welcome-actions { align-items:flex-start; flex-direction:column; }
  .customer-id { padding-left:0; border:0; }
}
@media(max-width:680px) {
  .marketing h1 { font-size:clamp(32px,8.6vw,38px); letter-spacing:-1.4px; }
  .marketing .hero:before { right:0; width:100%; }
  .marketing .actions .action { width:100%; }
  .portal-links { flex-wrap:wrap; overflow:visible; scrollbar-width:none; }
  .portal-links::-webkit-scrollbar { display:none; }
  .portal-links .btn { padding:8px; font-size:11px; }
}