/* Marketing pages: home, pricing, terms, privacy. The generator at /app has its own styles. */
@font-face { font-family:"Lilita One"; src:url("/static/fonts/LilitaOne-Regular.ttf") format("truetype"); font-display:swap; }
:root {
  color-scheme: light;
  --ink:#14161f; --muted:#5d647b; --canvas:#f5f2ff; --surface:#ffffff; --sunken:#e9ebf4;
  --line:#dde0ec; --line-strong:#c4c9dd;
  --primary:#8d77ff; --primary-hover:#7a62f5; --on-primary:#ffffff; --primary-soft:#eeeaff;
  --pink:#ff3d81; --ok:#17915f; --err:#c62828;
  --hdr:#8d77ff; --hdr-line:#ff4eb2; --outline:#14161f; --yellow:#ffe228;
  --font:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --display:"Lilita One","Plus Jakarta Sans",system-ui,sans-serif;
}
:root[data-theme="dark"] {
    --ink:#eef0f7; --muted:#a2a9c0; --canvas:#0d0f16; --surface:#161924; --sunken:#11131c;
    --line:#262a39; --line-strong:#383d52;
    --primary:#8d77ff; --primary-hover:#7a62f5; --on-primary:#ffffff; --primary-soft:#241f48;
    --pink:#ff6a9f; --ok:#4cc790; --err:#ff8a8a;
  }
:root[data-theme="light"] { color-scheme:light; }
:root[data-theme="dark"] { color-scheme:dark; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:73px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } }
body { margin:0; background:var(--canvas); color:var(--ink); font:400 16px/1.6 var(--font); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; }
img { max-width:100%; display:block; }
a { color:inherit; }
button, input, select { font:inherit; color:inherit; }
:focus-visible { outline:2px solid var(--primary); outline-offset:3px; border-radius:4px; }
[hidden] { display:none !important; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.wrap { max-width:1360px; margin:0 auto; padding:0 24px; }

/* ---------- header ---------- */
.top { position:sticky; top:0; z-index:30; background:color-mix(in srgb, var(--surface) 90%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.top-in { max-width:none; margin:0; padding:0 28px; height:72px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:28px; }
.top-in .brand { justify-self:start; }
.brand { display:flex; align-items:center; gap:3px; font-weight:800; font-size:23px; letter-spacing:-.02em; text-decoration:none; white-space:nowrap; }
.mark { width:56px; height:56px; display:grid; place-items:center; flex:none; }
.mark img { width:100%; height:100%; display:block; }
.brand .name { font-family:var(--display); font-weight:400; font-size:30px; letter-spacing:.01em; line-height:1; margin-left:0; margin-bottom:0; padding-top:2px; color:#14161f; -webkit-text-stroke:0 #14161f; paint-order:stroke fill; }   /* was: line-height:.7; margin-left:-7px; margin-bottom:7px (tucked bottom right) */
:root[data-theme="dark"] .brand .name { color:#fff; -webkit-text-stroke:5px #14161f; }   /* dark mode keeps the original white name with a dark outline */
.links { display:flex; gap:14px; margin-left:0; }   /* centered in the bar */
.links a { text-decoration:none; color:var(--muted); font-weight:600; font-size:18px; line-height:1.3; padding:6px 12px; border-radius:12px; }
.links a:hover, .links a[aria-current="page"] { color:#000; -webkit-text-stroke:.2px #000; }   /* darker and a touch bolder, without changing the width */
.top-end { justify-self:end; display:flex; gap:10px; align-items:center; }

/* ---------- buttons ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; border:1px solid var(--line-strong); background:var(--surface); color:var(--ink); border-radius:12px; padding:11px 18px; font-weight:700; text-decoration:none; cursor:pointer; transition:background .15s, border-color .15s, transform .15s; }
.btn:hover { border-color:var(--muted); }
.btn-primary { background:var(--primary); border-color:var(--primary); color:var(--on-primary); }
.btn-primary:hover { background:var(--primary-hover); border-color:var(--primary-hover); }
.btn-sm { padding:8px 14px; font-size:14px; border-radius:10px; }
.btn-lg { padding:15px 26px; font-size:17px; border-radius:14px; }

/* ---------- hero ---------- */
.hero { padding:64px 0 72px; min-height:calc(100vh - 73px); min-height:calc(100svh - 73px); display:flex; flex-direction:column; justify-content:center; border-bottom:1px solid var(--line);
  background:
    radial-gradient(60% 80% at 92% 12%, rgba(255,78,178,.30), transparent 62%),
    radial-gradient(55% 75% at 6% 105%, rgba(112,84,240,.30), transparent 60%),
    radial-gradient(40% 50% at 55% -10%, rgba(255,226,40,.28), transparent 70%),
    #f3efff; }
:root[data-theme="dark"] .hero { background:
    radial-gradient(60% 80% at 92% 12%, rgba(255,78,178,.22), transparent 62%),
    radial-gradient(55% 75% at 6% 105%, rgba(112,84,240,.38), transparent 60%),
    #120f24; }
.hero-in { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:56px; align-items:start; }
.vtitle { margin:0; display:block; width:fit-content; max-width:100%; background:var(--hdr); border:7px solid var(--hdr-line); border-radius:10px; padding:26px 34px 30px; font:400 clamp(40px,5.6vw,76px)/1.06 var(--display); color:#fff; letter-spacing:.005em;
  text-shadow:4.00px 0.00px 0 var(--outline),3.92px 0.78px 0 var(--outline),3.70px 1.53px 0 var(--outline),3.33px 2.22px 0 var(--outline),2.83px 2.83px 0 var(--outline),2.22px 3.33px 0 var(--outline),1.53px 3.70px 0 var(--outline),0.78px 3.92px 0 var(--outline),0.00px 4.00px 0 var(--outline),-0.78px 3.92px 0 var(--outline),-1.53px 3.70px 0 var(--outline),-2.22px 3.33px 0 var(--outline),-2.83px 2.83px 0 var(--outline),-3.33px 2.22px 0 var(--outline),-3.70px 1.53px 0 var(--outline),-3.92px 0.78px 0 var(--outline),-4.00px 0.00px 0 var(--outline),-3.92px -0.78px 0 var(--outline),-3.70px -1.53px 0 var(--outline),-3.33px -2.22px 0 var(--outline),-2.83px -2.83px 0 var(--outline),-2.22px -3.33px 0 var(--outline),-1.53px -3.70px 0 var(--outline),-0.78px -3.92px 0 var(--outline),-0.00px -4.00px 0 var(--outline),0.78px -3.92px 0 var(--outline),1.53px -3.70px 0 var(--outline),2.22px -3.33px 0 var(--outline),2.83px -2.83px 0 var(--outline),3.33px -2.22px 0 var(--outline),3.70px -1.53px 0 var(--outline),3.92px -0.78px 0 var(--outline),2.00px 0.00px 0 var(--outline),1.96px 0.39px 0 var(--outline),1.85px 0.77px 0 var(--outline),1.66px 1.11px 0 var(--outline),1.41px 1.41px 0 var(--outline),1.11px 1.66px 0 var(--outline),0.77px 1.85px 0 var(--outline),0.39px 1.96px 0 var(--outline),0.00px 2.00px 0 var(--outline),-0.39px 1.96px 0 var(--outline),-0.77px 1.85px 0 var(--outline),-1.11px 1.66px 0 var(--outline),-1.41px 1.41px 0 var(--outline),-1.66px 1.11px 0 var(--outline),-1.85px 0.77px 0 var(--outline),-1.96px 0.39px 0 var(--outline),-2.00px 0.00px 0 var(--outline),-1.96px -0.39px 0 var(--outline),-1.85px -0.77px 0 var(--outline),-1.66px -1.11px 0 var(--outline),-1.41px -1.41px 0 var(--outline),-1.11px -1.66px 0 var(--outline),-0.77px -1.85px 0 var(--outline),-0.39px -1.96px 0 var(--outline),-0.00px -2.00px 0 var(--outline),0.39px -1.96px 0 var(--outline),0.77px -1.85px 0 var(--outline),1.11px -1.66px 0 var(--outline),1.41px -1.41px 0 var(--outline),1.66px -1.11px 0 var(--outline),1.85px -0.77px 0 var(--outline),1.96px -0.39px 0 var(--outline); }
.vtitle .w { transition:color .12s; }
.vtitle .w.on { color:#ff7fc8; }
.hero p.sub { font-size:19px; color:var(--muted); max-width:46ch; margin:30px 0 28px; }
.hero-cta { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.hero-cta .btn-primary { background:#f6248c; border-color:#f6248c; color:#fff; transition:background .15s, border-color .15s, transform .15s, -webkit-text-stroke-width .12s; }
.hero-cta .btn-primary:hover, .hero-cta .btn-primary:focus-visible { background:#f6248c; border-color:#f6248c; color:#fff; box-shadow:none; transform:none; -webkit-text-stroke:1.6px var(--outline); paint-order:stroke fill; }
.play-cta { display:inline-flex; align-items:center; gap:14px; color:var(--ink); text-decoration:none; font-weight:800; font-size:26px; letter-spacing:-.01em; border-radius:14px; padding:4px 6px; margin-left:-18px; }
.play-cta svg { width:46px; height:46px; fill:none; stroke:var(--ink); stroke-width:3.2; stroke-linejoin:round; stroke-linecap:round; transition:transform .22s cubic-bezier(.2,.8,.3,1), stroke .2s ease; }
.play-cta:hover svg, .play-cta:focus-visible svg { transform:translateY(-6px); stroke:var(--primary); }
.play-cta:active svg { transform:translateY(-2px); }
.play-cta:focus-visible { outline:2px solid var(--ink); outline-offset:4px; }
@media (prefers-reduced-motion: reduce) { .play-cta svg { transition:none; } .play-cta:hover svg, .play-cta:focus-visible svg { transform:none; } }
.hero-note { margin:14px 0 0; font-size:14px; color:var(--muted); }

.stagewrap { display:flex; flex-direction:column; align-items:center; align-self:start; margin-top:0; }
.phone-link { display:block; width:min(100%,260px); color:inherit; text-decoration:none; border-radius:46px; }
.phone-link .phone { width:100%; transition:transform .25s cubic-bezier(.2,.8,.3,1), box-shadow .25s ease; }
.phone-link:hover .phone, .phone-link:focus-visible .phone { transform:translateY(-10px) scale(1.035); box-shadow:0 70px 110px -28px rgba(70,40,200,.7), 0 0 0 1px rgba(255,255,255,.06) inset; }
@media (prefers-reduced-motion: reduce) { .phone-link .phone { transition:none; } .phone-link:hover .phone, .phone-link:focus-visible .phone { transform:none; } }
.phone { width:min(100%,300px); border-radius:46px; background:#0b0b10; padding:11px; box-shadow:0 0 0 2px rgba(255,255,255,.16), 0 40px 80px -30px rgba(20,22,31,.55), 0 0 0 1px rgba(255,255,255,.06) inset; }
.screen { position:relative; aspect-ratio:9/16; border-radius:12% / 6.75%; overflow:hidden; background:#000; }
.screen img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; z-index:0; }
.screen img.prev { opacity:1; z-index:1; }
.pstage { position:absolute; inset:0; z-index:3; opacity:0; transition:opacity .4s ease; pointer-events:none; }
.pstage.show { opacity:1; }
.pstage video, .pstage img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:1; }
.screen img.on { opacity:1; z-index:2; animation:lookin .4s ease; }
@keyframes lookin { from { opacity:0; } to { opacity:1; } }
.stage-cap { margin:18px 0 0; font-size:14px; color:var(--muted); text-align:center; min-height:1.6em; }
.stage-cap b { color:var(--ink); }

/* ---------- sections ---------- */
section { scroll-margin-top:0; }
.sec { padding:84px 0; }
.sec.alt { background:var(--surface); border-block:1px solid var(--line); }
.sec h2 { font:400 clamp(38px,5vw,58px)/1.1 var(--display); letter-spacing:.005em; margin:0 0 14px; max-width:20ch; }
.sec .lead { color:var(--muted); font-size:18px; max-width:52ch; margin:0 0 44px; }

.types { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 56px; }
.type { padding:26px 0; border-top:1px solid var(--line-strong); }
a.type { display:block; color:inherit; text-decoration:none; transition:background .15s; position:relative; }
a.type:hover { background:var(--surface); }
a.type:hover h3 { color:var(--primary); }
.type .go { float:right; font-weight:700; font-size:14px; color:var(--primary); }
.type h3 { margin:0 0 6px; font-size:20px; letter-spacing:-.01em; display:flex; align-items:center; gap:10px; }
.type p { margin:0 0 12px; color:var(--muted); max-width:44ch; }
.try { display:inline-block; font-size:14px; font-weight:600; background:var(--primary-soft); color:var(--primary); border-radius:99px; padding:5px 13px; }
.tag { font-size:12px; font-weight:700; background:var(--yellow); color:#14161f; border-radius:99px; padding:2px 10px; }

.steps { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:40px; counter-reset:s; }
.steps li { counter-increment:s; position:relative; padding-top:68px; }
.steps li::before { content:counter(s); position:absolute; top:0; left:0; width:52px; height:52px; border-radius:50%; background:var(--hdr); border:4px solid var(--hdr-line); color:#fff; display:grid; place-items:center; font:400 26px/1 var(--display); text-shadow:0 2px 0 var(--outline); }
.steps h3 { margin:0 0 6px; font-size:20px; letter-spacing:-.01em; }
.steps p { margin:0; color:var(--muted); }

.marq { position:relative; overflow:hidden; padding:18px 0 20px; contain:paint; }
/* soft edges drawn as plain gradients: a CSS mask on the parent made the browser re-composite the moving strip every frame */
.marq::before, .marq::after { content:""; position:absolute; top:0; bottom:0; width:7%; z-index:2; pointer-events:none; }
.marq::before { left:0; background:linear-gradient(90deg,var(--surface),transparent); }
.marq::after { right:0; background:linear-gradient(270deg,var(--surface),transparent); }
.marq-track { display:flex; gap:16px; padding-right:16px; width:max-content; animation:marq 66s linear infinite; will-change:transform; backface-visibility:hidden; }
.look-tile { display:block; flex:none; border-radius:16px; transition:transform .25s cubic-bezier(.2,.8,.3,1), box-shadow .25s ease; position:relative; }
.tloop { position:absolute; inset:1px; width:calc(100% - 2px); height:calc(100% - 2px); object-fit:cover; border-radius:15px; opacity:0; transition:opacity .25s ease; pointer-events:none; }
.tloop.show { opacity:1; }
.look-tile:hover, .look-tile:focus-visible { transform:translateY(-9px) scale(1.09); box-shadow:0 22px 34px -12px rgba(70,40,200,.55); }
.marq-track img { width:150px; aspect-ratio:9/16; object-fit:cover; border-radius:16px; border:1px solid var(--line-strong); background:#000; }
@keyframes marq { from { transform:translate3d(0,0,0); } to { transform:translate3d(-50%,0,0); } }
@media (prefers-reduced-motion: reduce) { .marq { overflow-x:auto; } .marq-track { animation:none; } }

.feats { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:34px 56px; }
.feat h3 { margin:0 0 6px; font-size:19px; letter-spacing:-.01em; }
.feat p { margin:0; color:var(--muted); max-width:44ch; }

.faq { max-width:760px; }
.faq details { border-top:1px solid var(--line-strong); padding:18px 0; }
.faq details:last-child { border-bottom:1px solid var(--line-strong); }
.faq summary { cursor:pointer; font-weight:700; font-size:17px; list-style:none; display:flex; justify-content:space-between; gap:16px; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; font-weight:400; font-size:24px; line-height:1; color:var(--primary); }
.faq details[open] summary::after { content:"\2212"; }
.faq details p { margin:12px 0 0; color:var(--muted); max-width:62ch; }

/* ---------- waitlist ---------- */
.band { background:radial-gradient(55% 90% at 6% 0%, rgba(255,78,178,.55), transparent 65%), radial-gradient(45% 80% at 94% 110%, rgba(255,226,40,.22), transparent 70%), var(--hdr); color:#fff; padding:76px 0; }
.band h2 { color:#fff; margin-bottom:12px; }
.band p { color:#ece7ff; font-size:18px; max-width:46ch; margin:0 0 26px; }
.band .wl-msg { font-size:16px; margin:12px 0 0; }
.wl { display:flex; gap:10px; flex-wrap:wrap; max-width:520px; }
.wl input[type=email] { flex:1 1 240px; min-width:0; border:2px solid transparent; border-radius:12px; padding:14px 16px; background:#fff; color:#14161f; font-size:16px; }
.wl input[type=email]:focus-visible { outline:3px solid var(--yellow); outline-offset:2px; }
.wl .btn { background:#14161f; border-color:#14161f; color:#fff; padding:14px 22px; }
.wl .btn:hover { background:#000; }
.wl .hp { position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.wl-msg { margin:12px 0 0; min-height:1.5em; font-weight:600; }
.wl-msg.err { color:#ffd1d1; }
.card .wl input[type=email] { background:var(--surface); border-color:var(--line-strong); color:var(--ink); }
.card .wl .btn { background:var(--primary); border-color:var(--primary); color:var(--on-primary); }
.card .wl-msg.err { color:var(--err); }

/* ---------- pricing ---------- */
.plans { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; align-items:stretch; }
.plan { background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:30px 28px; display:flex; flex-direction:column; }
.plan h3 { margin:0; font-size:20px; }
.plan .for { margin:4px 0 18px; color:var(--muted); font-size:15px; min-height:3em; }
.price { font:400 52px/1 var(--display); margin:0; }
.price small { font:600 15px var(--font); color:var(--muted); margin-left:4px; }
.plan ul { list-style:none; margin:22px 0 28px; padding:0; display:grid; gap:11px; }
.plan li { display:flex; gap:10px; align-items:flex-start; font-size:15px; }
.plan li::before { content:""; flex:none; width:18px; height:18px; margin-top:2px; border-radius:50%; background:var(--primary-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%238d77ff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8.5l2.6 2.6L12 5.5'/%3E%3C/svg%3E") center/12px no-repeat; }
.plan li.soon { color:var(--muted); }
.plan .btn { margin-top:auto; }
/* all three plans look the same until you point at one; then that one lights up (a permanently coloured middle card looked like the selected plan) */
.plan { transition:background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease; }
.plan:hover, .plan:focus-within { background:var(--hdr); border-color:var(--hdr-line); color:#fff; transform:translateY(-6px); box-shadow:0 0 0 4px var(--hdr-line), 0 28px 44px -24px rgba(112,84,240,.6); }
.plan:hover h3, .plan:focus-within h3, .plan:hover .price, .plan:focus-within .price { color:#fff; }
.plan:hover .for, .plan:focus-within .for, .plan:hover li.soon, .plan:focus-within li.soon, .plan:hover .price small, .plan:focus-within .price small { color:#e4defc; }
.plan:hover li::before, .plan:focus-within li::before { background-color:#fff; }
.plan:hover .btn, .plan:focus-within .btn { background:#fff; border-color:#fff; color:#14161f; }
.plan:hover .btn:hover, .plan:focus-within .btn:hover { background:var(--yellow); border-color:var(--yellow); }
@media (prefers-reduced-motion: reduce) { .plan, .plan:hover, .plan:focus-within { transform:none; } }
.tryfree { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:24px; padding:20px 26px; border:2px dashed var(--line-strong); border-radius:18px; background:var(--surface); }
.tryfree b { display:block; font-size:18px; }
.tryfree span { color:var(--muted); }
@media (max-width:640px) { .tryfree { flex-direction:column; align-items:flex-start; } }
.fine { color:var(--muted); font-size:14px; margin:22px 0 0; max-width:70ch; }
.card { background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:28px; }

/* ---------- legal ---------- */
.doc { max-width:720px; padding:64px 24px 96px; margin:0 auto; }
.doc h1 { font:400 clamp(34px,5vw,48px)/1.1 var(--display); margin:0 0 10px; }
.doc h2 { font-size:20px; letter-spacing:-.01em; margin:36px 0 8px; }
.doc p, .doc li { color:var(--muted); }
.doc .draft { background:var(--yellow); color:#14161f; border-radius:12px; padding:14px 18px; font-weight:600; margin:0 0 28px; }

/* ---------- footer ---------- */
.foot { border-top:1px solid var(--line); background:var(--surface); padding:48px 0 40px; margin-top:0; }
.foot-in { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; }
.foot h4 { margin:0 0 10px; font-size:14px; }
.foot ul { list-style:none; margin:0; padding:0; display:grid; gap:7px; }
.foot a { color:var(--muted); text-decoration:none; font-size:15px; }
.foot a:hover { color:var(--ink); text-decoration:underline; }
.foot p { color:var(--muted); font-size:14px; margin:12px 0 0; max-width:38ch; }
.foot a.brand { color:var(--ink); font-size:21px; }
.credits a { font-size:inherit; text-decoration:underline; }
.credits { border-top:1px solid var(--line); margin-top:34px; padding-top:20px; color:var(--muted); font-size:13px; }

/* ---------- small screens ---------- */
@media (max-width: 900px) {
  .hero { padding:36px 0 56px; min-height:0; }
  .hero-in { grid-template-columns:1fr; gap:44px; }
  .stagewrap { margin-top:0; }
  .stagewrap { order:2; }
  .types, .feats { grid-template-columns:1fr; }
  .steps { grid-template-columns:1fr; gap:30px; }
  .plans { grid-template-columns:1fr; max-width:460px; }
  .foot-in { grid-template-columns:1fr 1fr; }
  .foot-in > :first-child { grid-column:1 / -1; }
  .links { display:none; }
  .sec { padding:60px 0; }
}
@media (max-width: 480px) {
  .vtitle { padding:18px 18px 22px; border-width:5px; }
  .top-in { gap:12px; padding:0 16px; grid-template-columns:1fr auto; }
  .wrap { padding:0 16px; }
  .brand span.name { display:none; }
}

/* ---------- settings + profile ---------- */
.acct { max-width:760px; margin:0 auto; padding:64px 24px 96px; }
.acct h1 { font:400 clamp(34px,5vw,48px)/1.1 var(--display); margin:0 0 10px; }
.acct .sub { color:var(--muted); margin:0 0 32px; }
.pcard { background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:24px 26px; margin-bottom:20px; }
.pcard.flush { padding:0; overflow:hidden; }
.pcard h2 { font-size:18px; letter-spacing:-.01em; margin:0 0 6px; }
.pcard .hint { color:var(--muted); margin:0 0 16px; }
.themes { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.theme-opt { border:2px solid var(--line); border-radius:14px; background:var(--sunken); padding:10px; text-align:left; display:grid; gap:8px; cursor:pointer; }
.theme-opt:hover { border-color:var(--line-strong); }
.theme-opt[aria-checked="true"] { border-color:var(--primary); background:var(--primary-soft); }
.theme-opt b { font-size:14px; }
.sw { height:58px; border-radius:8px; border:1px solid rgba(128,128,150,.35); display:grid; grid-template-rows:12px 1fr; overflow:hidden; }
.sw i { display:block; } .sw i + i { padding:7px; } .sw em { display:block; height:8px; border-radius:4px; width:60%; }
.sw-light { background:#f2f3f8; } .sw-light i:first-child { background:#fff; border-bottom:1px solid #e1e4ee; } .sw-light em { background:#8d77ff; }
.sw-dark { background:#0d0f16; } .sw-dark i:first-child { background:#161924; border-bottom:1px solid #262a39; } .sw-dark em { background:#8d77ff; }
.sw-sys { background:linear-gradient(90deg,#f2f3f8 50%,#0d0f16 50%); } .sw-sys i:first-child { background:linear-gradient(90deg,#fff 50%,#161924 50%); } .sw-sys em { background:#8d77ff; }
.set-row { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 0; border-top:1px solid var(--line); }
.set-row:first-of-type { margin-top:12px; }
.set-row b { display:block; } .set-row span { color:var(--muted); font-size:14px; }
.who { display:flex; align-items:center; gap:18px; padding:24px 26px; border-bottom:1px solid var(--line); }
.avatar { width:64px; height:64px; border-radius:50%; background:linear-gradient(135deg,#8d77ff,#ff3d81); color:#fff; display:grid; place-items:center; font-size:26px; font-weight:800; flex:none; }
.who b { font-size:18px; display:block; } .who span { color:var(--muted); }
.fields { display:grid; grid-template-columns:1fr 1fr; gap:14px; padding:22px 26px; }
.fields label { display:grid; gap:6px; font-weight:600; font-size:14px; }
.fields input { border:1px solid var(--line-strong); background:var(--surface); border-radius:10px; padding:11px 12px; font-weight:400; }
.fields .full { grid-column:1 / -1; }
.save-row { display:flex; align-items:center; gap:14px; padding:0 26px 22px; }
.ok-note { color:var(--ok); font-weight:600; font-size:14px; }
.myplan { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:22px 26px; border-bottom:1px solid var(--line); }
.myplan b { font-size:17px; } .myplan .d { color:var(--muted); display:block; font-size:14px; }
.pill { display:inline-block; background:var(--primary-soft); color:var(--primary); font-size:12px; font-weight:700; padding:2px 9px; border-radius:99px; margin-left:8px; vertical-align:2px; }
.stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; padding:22px 26px; }
.stat { background:var(--sunken); border:1px solid var(--line); border-radius:12px; padding:14px; }
.stat b { font-size:22px; display:block; letter-spacing:-.02em; } .stat span { color:var(--muted); font-size:13px; }
.top-end .ico { display:grid; width:44px; height:44px; place-items:center; border-radius:12px; color:var(--muted); border:0; background:transparent; }
.top-end .ico:hover { color:#000; background:transparent; }
.top-end .ico:hover svg { stroke-width:1.9; }
.top-end .ico svg { width:23px; height:23px; }
.top-end .ico[href="/settings"] svg { width:21px; height:21px; }   /* the gear fills more of its box than the person, so it is drawn a little smaller */
.top-end .ico[href="/profile"] svg { width:25px; height:25px; }
.top-end .studio-m { display:none; }
@media (max-width:900px) { .top-end .studio-m { display:inline-flex; } }
@media (max-width:640px) { .themes, .stats, .fields { grid-template-columns:1fr; } .myplan, .set-row { flex-wrap:wrap; } }
/* dark mode: the nav links and header icons turn white (not black) on hover / when current */
:root[data-theme="dark"] .links a:hover, :root[data-theme="dark"] .links a[aria-current="page"] { color:#fff; -webkit-text-stroke:.2px #fff; }
:root[data-theme="dark"] .top-end .ico:hover { color:#fff; }