/* ============================================================
   SayFlow Studio — design tokens + components
   Plain CSS port of the Lovable (Tailwind) build. No build step.
   ============================================================ */
:root{
  --radius:1.75rem;
  --a1:oklch(0.7 0.2 344);--a2:oklch(0.68 0.18 320);--ts:1;--pink:var(--a1);--pink-hot:var(--a1);--lilac:color-mix(in oklab,var(--a2) 70%,oklch(0.7 0.16 280));--aqua:oklch(0.82 0.11 195);--ink:oklch(0.2 0.03 300);
  --background:oklch(0.975 0.012 330);--foreground:oklch(0.2 0.03 300);
  --popover:oklch(0.99 0.008 330);--primary:var(--a1);--primary-foreground:oklch(0.99 0.005 330);
  --muted-foreground:oklch(0.6 0.03 310);--destructive:oklch(0.62 0.21 22);--success:oklch(0.63 0.14 160);--warning:oklch(0.77 0.15 80);
  --border:oklch(1 0 0 / 70%);--ring:color-mix(in oklab,var(--a1) 45%,transparent);
  --glass-bg:rgba(255,255,255,.78);--glass-bg-strong:rgba(255,255,255,.9);--glass-border:rgba(255,255,255,.85);--glass-blur:22px;
  --glass-shadow:0 3px 12px rgba(150,110,170,.12);--glass-shadow-lg:0 8px 26px rgba(150,110,170,.18);
  --gradient-brand:linear-gradient(120deg,var(--a1),var(--a2));
  --gradient-orb:conic-gradient(from 210deg,oklch(0.78 0.16 340),oklch(0.72 0.16 300),oklch(0.85 0.1 200),oklch(0.9 0.08 250),oklch(0.78 0.16 340));
  --gradient-text:linear-gradient(95deg,var(--a1),var(--a2));
  --ease-ios:cubic-bezier(.32,.72,0,1);--ease-spring:cubic-bezier(.34,1.56,.64,1);
  --dur-micro:140ms;--dur-card:240ms;--dur-page:260ms;
}
.dark{
  --background:oklch(0.19 0.035 300);--foreground:oklch(0.97 0.006 320);--popover:oklch(0.24 0.04 300);
  --primary:color-mix(in oklab,var(--a1),white 6%);--muted-foreground:oklch(0.74 0.03 310);--border:oklch(1 0 0 / 14%);
  --glass-bg:rgba(30,24,44,.78);--glass-bg-strong:rgba(38,30,54,.9);--glass-border:rgba(255,255,255,.12);
  --glass-shadow:0 3px 12px rgba(0,0,0,.18);--glass-shadow-lg:0 8px 26px rgba(0,0,0,.28);
}

*,*::before,*::after{box-sizing:border-box;border-color:var(--border)}
html,body{margin:0;background-color:var(--background);color:var(--foreground);font-family:"Plus Jakarta Sans",ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased;overscroll-behavior-y:none;scroll-behavior:auto}
body{min-height:100vh;overflow-anchor:none}
h1,h2,h3{letter-spacing:-.02em;margin:0}
p,ul{margin:0;padding:0}
ul{list-style:none}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent;text-align:inherit}
button:disabled{cursor:not-allowed}
input,textarea,select{outline:none}
img{max-width:100%;display:block}

/* ---------- background ---------- */
.app-bg{position:fixed;inset:0 0 auto 0;height:100vh;height:100lvh;z-index:-1;overflow:hidden;pointer-events:none;contain:strict;transform:translateZ(0);
  background:radial-gradient(120% 90% at 15% 5%,color-mix(in srgb,var(--a1) 9%,#fff) 0%,transparent 60%),radial-gradient(110% 80% at 85% 10%,color-mix(in srgb,var(--a2) 12%,#fff) 0%,transparent 60%),radial-gradient(120% 90% at 50% 100%,#e6eefb 0%,transparent 65%),#f8f5fb}
.dark .app-bg{background:radial-gradient(120% 90% at 15% 5%,color-mix(in srgb,var(--a1) 15%,#14101f) 0%,transparent 60%),radial-gradient(110% 80% at 85% 10%,color-mix(in srgb,var(--a2) 17%,#14101f) 0%,transparent 60%),radial-gradient(120% 90% at 50% 100%,#1b2242 0%,transparent 65%),#14101f}
.blob{position:absolute;border-radius:999px;opacity:.5;background:radial-gradient(closest-side,var(--c,color-mix(in srgb,var(--a1) 45%,#fff)),transparent)!important}

/* ---------- glass surfaces ---------- */
.glass,.glass-card,.glass-tile,.glass-pill{background:var(--glass-bg);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow)}
.glass-card{border-radius:28px}.glass-tile{border-radius:22px}.glass-pill{border-radius:999px}
.circle-btn{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:999px;background:var(--glass-bg-strong);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow);color:var(--foreground);transition:transform var(--dur-micro) var(--ease-spring),background var(--dur-micro) var(--ease-ios);flex:0 0 auto;position:relative}
.circle-btn:disabled{opacity:.4}
.pressable{transition:transform var(--dur-micro) var(--ease-spring)}
.pressable:active{transform:scale(.97)}
.gradient-text{background:var(--gradient-text);-webkit-background-clip:text;background-clip:text;color:transparent}
/* rotating headline word (home) */
.rot{position:relative;display:inline-block;vertical-align:bottom;overflow:hidden;white-space:nowrap;box-sizing:content-box;padding:0 .06em .16em 0;margin:0 -.06em -.16em 0;transition:width .55s cubic-bezier(.22,1,.36,1)}
.rot-w{display:inline-block;transition:transform .55s cubic-bezier(.22,1,.36,1),opacity .4s ease,filter .5s ease;will-change:transform,opacity}
.rot-abs{position:absolute;left:0;top:0}
.rot-in{transform:translateY(70%);opacity:0;filter:blur(6px)}
.rot-out{transform:translateY(-70%);opacity:0;filter:blur(6px)}
.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--gradient-brand);color:#fff;border-radius:999px;font-weight:600;box-shadow:0 10px 26px color-mix(in oklab,var(--a1) 35%,transparent);transition:transform var(--dur-micro) var(--ease-spring)}
.btn-primary:active{transform:scale(.97)}
.btn-primary:disabled{opacity:.45;box-shadow:none}
.header-veil{background:linear-gradient(to bottom,color-mix(in oklab,var(--background) 92%,transparent) 0%,color-mix(in oklab,var(--background) 82%,transparent) 55%,transparent 100%);padding-bottom:1.25rem}
.dock{background:var(--glass-bg-strong);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow-lg);border-radius:999px}
.no-scrollbar{scrollbar-width:none}.no-scrollbar::-webkit-scrollbar{display:none}
.shimmer{background:linear-gradient(100deg,rgba(255,255,255,.25) 20%,rgba(255,255,255,.65) 40%,rgba(255,255,255,.25) 60%);background-size:250% 100%;animation:shimmer-slide 1.4s linear infinite;border-radius:16px}
@keyframes shimmer-slide{to{background-position:-250% 0}}
@supports not (backdrop-filter:blur(2px)){.glass,.glass-card,.glass-tile,.glass-pill,.circle-btn,.dock,.bubble-reply{background:rgba(255,255,255,.92)}}

/* ---------- motion ---------- */
.rise{animation:rise-in var(--dur-card) var(--ease-ios) both}
@keyframes rise-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.page-in{animation:page-push var(--dur-page) var(--ease-ios) both}
@keyframes page-push{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.sheet-in{animation:sheet-up var(--dur-page) var(--ease-ios) both}
@keyframes sheet-up{from{transform:translateY(100%)}to{transform:none}}
.pop{animation:pop-spring 320ms var(--ease-spring) both}
@keyframes pop-spring{0%{transform:scale(.6)}60%{transform:scale(1.18)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* ---------- the orb ---------- */
.orb-wrap{position:relative;display:grid;place-items:center}
.orb{position:relative;display:block;border-radius:999px;isolation:isolate;
  background:url(../img/bubble-orb.webp) center/100% 100% no-repeat;
  box-shadow:0 6px 16px rgba(190,110,190,.32);
  animation:orb-breathe 4.8s ease-in-out infinite alternate;will-change:transform}
.orb.orb-float{box-shadow:0 18px 46px rgba(190,110,190,.34)}
.orb.orb-float:not(.orb-listening):not(.orb-processing):not(.orb-speaking):not(.orb-error){animation:orb-float 6.5s ease-in-out infinite alternate}
.orb:not(.orb-float)::after{display:none}
.orb::after{content:"";position:absolute;left:50%;bottom:-14%;width:70%;height:24%;translate:-50% 0;border-radius:999px;background:radial-gradient(closest-side,rgba(220,120,200,.5),transparent);filter:blur(14px);z-index:-1;animation:orb-shadow 6.5s ease-in-out infinite alternate}
@keyframes orb-breathe{0%{transform:scale(1)}100%{transform:scale(1.05)}}
@keyframes orb-float{
  0%{transform:translateY(-8px) rotate(-1.4deg) scale(1,1)}
  50%{transform:translateY(0) rotate(.5deg) scale(1.025,.985)}
  100%{transform:translateY(8px) rotate(1.4deg) scale(.992,1.02)}}
@keyframes orb-shadow{0%{opacity:.9;transform:scaleX(1)}100%{opacity:.55;transform:scaleX(.82)}}
.orb-listening{animation:orb-pulse 1.6s ease-in-out infinite}
@keyframes orb-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
.orb-processing{animation:orb-think 1.5s ease-in-out infinite}
@keyframes orb-think{0%,100%{transform:scale(1,1) rotate(0)}25%{transform:scale(1.06,.95) rotate(-2deg)}50%{transform:scale(.96,1.05) rotate(0)}75%{transform:scale(1.04,.97) rotate(2deg)}}
.orb-speaking{animation:orb-speak .9s ease-in-out infinite alternate}
@keyframes orb-speak{from{transform:scale(1)}to{transform:scale(1.07)}}
.orb-error{animation:orb-shake 420ms var(--ease-ios);box-shadow:0 0 0 2px rgba(229,72,77,.8),0 18px 46px rgba(229,72,77,.4)}
@keyframes orb-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
@media (prefers-reduced-motion:reduce){.orb,.orb::after{animation:none!important}}
.orb-ring{position:absolute;inset:0;border-radius:999px;border:1.5px solid color-mix(in srgb,var(--a1) 45%,transparent);animation:ring-out 2.4s var(--ease-ios) infinite}
@keyframes ring-out{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.5);opacity:0}}
.orb-face{position:absolute;inset:11%;border-radius:999px;overflow:hidden;box-shadow:0 0 0 3px rgba(255,255,255,.75),0 10px 30px rgba(120,60,140,.3);z-index:2}
.orb-face img{width:100%;height:100%;object-fit:cover}
.wave-bar{animation:wave 900ms var(--ease-ios) infinite alternate;transform-origin:center}
@keyframes wave{from{transform:scaleY(.35)}to{transform:scaleY(1)}}

/* ---------- helpers ---------- */
.flex{display:flex}.col{flex-direction:column}.wrap{flex-wrap:wrap}.grid{display:grid}
.items-center{align-items:center}.items-start{align-items:flex-start}.items-end{align-items:flex-end}
.justify-between{justify-content:space-between}.justify-center{justify-content:center}
.gap-1{gap:4px}.gap-2{gap:8px}.gap-3{gap:12px}.gap-4{gap:16px}
.min-w-0{min-width:0}.flex-1{flex:1 1 0%}.shrink-0{flex-shrink:0}.w-full{width:100%}.relative{position:relative}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.text-center{text-align:center}.text-left{text-align:left}.block{display:block}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.px5{padding-inline:20px}.p3{padding:12px}.p4{padding:16px}.p5{padding:20px}
.mt1{margin-top:4px}.mt2{margin-top:8px}.mt3{margin-top:12px}.mt4{margin-top:16px}.mt5{margin-top:20px}.mt6{margin-top:24px}.mt7{margin-top:28px}.mt8{margin-top:32px}.mb2{margin-bottom:8px}
.hscroll{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}.hscroll::-webkit-scrollbar{display:none}
.t10{font-size:calc(10px*var(--ts,1))}.t11{font-size:calc(11px*var(--ts,1))}.t12{font-size:calc(12px*var(--ts,1))}.t13{font-size:calc(13px*var(--ts,1))}.t14{font-size:calc(14px*var(--ts,1))}.t15{font-size:calc(15px*var(--ts,1))}.t16{font-size:calc(16px*var(--ts,1))}.t17{font-size:calc(17px*var(--ts,1))}.t20{font-size:calc(20px*var(--ts,1))}.t22{font-size:calc(22px*var(--ts,1))}.t30{font-size:calc(30px*var(--ts,1))}.t32{font-size:calc(32px*var(--ts,1))}
.w5{font-weight:500}.w6{font-weight:600}.w7{font-weight:700}.w8{font-weight:800}.w4{font-weight:400}
.muted{color:var(--muted-foreground)}.success{color:var(--success)}.danger{color:var(--destructive)}.white{color:#fff}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.upper{text-transform:uppercase;letter-spacing:.04em}
.bg5{background:color-mix(in oklab,var(--foreground) 5%,transparent)}
.bg6{background:color-mix(in oklab,var(--foreground) 6%,transparent)}
.bg8{background:color-mix(in oklab,var(--foreground) 8%,transparent)}
.bg10{background:color-mix(in oklab,var(--foreground) 10%,transparent)}
.rounded-full{border-radius:999px}
.hidden{display:none!important}
.fill-pink{fill:var(--pink);color:var(--pink)}

/* ---------- layout shell ---------- */
.shell{margin:0 auto;min-height:100vh;width:100%;max-width:32rem}
.shell main{padding-bottom:calc(env(safe-area-inset-bottom) + 120px)}
.center-screen{display:flex;min-height:100vh;align-items:center;justify-content:center;padding:16px}
@media (min-width:1024px){.shell{max-width:48rem}.shell main{padding-bottom:128px}}

.screen-header{position:sticky;top:0;z-index:30;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:calc(env(safe-area-inset-top) + 14px) 20px 12px}
.hdr-center{display:flex;min-width:0;justify-content:center}
.hdr-center h1{font-size:16px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* dock */
.dock-wrap{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;justify-content:center;padding:0 16px calc(env(safe-area-inset-bottom) + 14px);pointer-events:none}
.dock-wrap .dock{pointer-events:auto;display:flex;align-items:center;gap:4px;padding:6px}
.dock a{display:flex;align-items:center;gap:8px;height:44px;padding:0 12px;border-radius:999px;color:var(--foreground);transition:background .25s,color .25s;font-size:13px;font-weight:600}
.dock a span{display:none}
.dock a.active{background:var(--gradient-brand);color:#fff;padding-inline:16px}
.dock a.active span{display:inline}
.siderail{position:fixed;left:24px;top:50%;transform:translateY(-50%);z-index:40;display:none}
.siderail .dock{display:flex;flex-direction:column;align-items:stretch;gap:4px;padding:6px}
.siderail a{display:flex;align-items:center;gap:10px;height:44px;padding:0 14px;border-radius:999px;font-size:13px;font-weight:600}
.siderail a.active{background:var(--gradient-brand);color:#fff}
@media (min-width:1024px){.dock-wrap{display:none}.siderail{display:block}}

/* mini player */
.miniplayer{position:fixed;left:0;right:0;bottom:calc(env(safe-area-inset-bottom) + 92px);z-index:40;display:flex;justify-content:center;padding:0 16px;pointer-events:none}
.miniplayer .inner{pointer-events:auto;display:flex;align-items:center;gap:12px;width:100%;max-width:28rem;padding:8px 12px}
.mp-bar{margin-top:4px;height:4px;border-radius:999px;overflow:hidden;background:color-mix(in oklab,var(--foreground) 10%,transparent)}
.mp-bar>div{height:100%;border-radius:999px;background:var(--gradient-brand);transition:width .2s}
@media (min-width:1024px){.miniplayer{bottom:24px}}
.round-btn{display:grid;place-items:center;border-radius:999px;color:#fff;background:var(--gradient-brand);flex-shrink:0}

/* chips / tiles / sheet */
.chip{display:flex;flex-shrink:0;align-items:center;gap:8px;border-radius:999px;padding:10px 16px;font-size:14px;font-weight:600;color:var(--muted-foreground);transition:color .15s}
.chip.glass-pill{}
.chip.active{background:var(--glass-bg-strong);color:var(--foreground);box-shadow:var(--glass-shadow),0 0 0 1px var(--glass-border)}
.tile{display:flex;flex-direction:column;height:152px;width:164px;flex-shrink:0;padding:16px;color:var(--foreground);scroll-snap-align:start}
.tile .top{display:flex;align-items:flex-start;justify-content:space-between}
.tile .ic,.tile .arr{display:grid;place-items:center;border-radius:999px;background:var(--glass-bg-strong);box-shadow:0 0 0 1px var(--glass-border)}
.tile .ic{width:44px;height:44px}.tile .arr{width:36px;height:36px}
.tile .ttl{margin-top:auto;font-size:15px;font-weight:700;line-height:1.2;text-align:left}
.snap{scroll-snap-type:x mandatory}
.action-tile{display:flex;flex-direction:column;height:120px;padding:16px;text-align:left}
.action-tile .ic{width:40px;height:40px;display:grid;place-items:center;border-radius:999px;background:var(--glass-bg-strong);box-shadow:0 0 0 1px var(--glass-border)}
.action-tile .arr{width:32px;height:32px;display:grid;place-items:center;border-radius:999px;background:var(--glass-bg-strong);box-shadow:0 0 0 1px var(--glass-border)}
.action-tile .ttl{margin-top:auto;font-size:14px;font-weight:700;line-height:1.2}

#sheet-root .sheet-wrap{position:fixed;inset:0;z-index:50;display:flex;align-items:flex-end;justify-content:center}
.sheet-back{position:absolute;inset:0;background:rgba(0,0,0,.25)}
.sheet{position:relative;max-height:82vh;width:100%;max-width:32rem;overflow-y:auto;border-radius:32px 32px 0 0;border:1px solid var(--glass-border);background:var(--glass-bg-strong);padding-bottom:calc(env(safe-area-inset-bottom) + 20px);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);overscroll-behavior:contain}
.sheet-head{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:12px;border-radius:32px 32px 0 0;background:var(--glass-bg-strong);padding:12px 20px}
.sheet-head .grab{position:absolute;left:50%;top:8px;height:6px;width:44px;transform:translateX(-50%);border-radius:999px;background:color-mix(in oklab,var(--foreground) 15%,transparent)}
.sheet-head h2{margin-top:12px;font-size:16px;font-weight:700}
.sheet-head .circle-btn{margin-top:12px;width:38px;height:38px}
.sheet-body{padding:4px 20px 16px;display:flex;flex-direction:column;gap:8px}

/* toast */
#toast-root{position:fixed;top:calc(env(safe-area-inset-top) + 16px);left:0;right:0;z-index:60;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none}
.toast{padding:10px 18px;border-radius:999px;font-size:13px;font-weight:600;background:var(--glass-bg-strong);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow-lg);-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);animation:rise-in .28s var(--ease-ios) both}
.toast.error{color:var(--destructive)}.toast.ok{color:var(--success)}

/* ---------- screens ---------- */
.home-top{padding-top:calc(env(safe-area-inset-top) + 18px)}
.badge{position:absolute;right:-2px;top:-2px;display:grid;place-items:center;height:20px;width:20px;border-radius:999px;background:#FF5A4F;color:#fff;font-size:10px;font-weight:700}
.monogram{display:grid;flex-shrink:0;place-items:center;border-radius:999px;font-weight:700;color:#fff;background:var(--gradient-brand);box-shadow:0 8px 20px color-mix(in oklab,var(--a1) 30%,transparent)}
.pill-tag{border-radius:999px;padding:4px 10px;font-size:11px;font-weight:700}
.pill-ok{background:color-mix(in oklab,var(--success) 15%,transparent);color:var(--success)}
.meter{height:8px;overflow:hidden;border-radius:999px;background:color-mix(in oklab,var(--foreground) 10%,transparent)}
.meter>div{height:100%;border-radius:999px;background:var(--gradient-brand);transition:width .7s}
.alert-dark{display:flex;align-items:center;justify-content:space-between;gap:12px;border-radius:24px;background:#221B2E;padding:16px;color:#fff}
.alert-dark .go{display:grid;place-items:center;height:36px;width:36px;border-radius:999px;background:rgba(255,255,255,.15)}
.arrow-sm{display:grid;place-items:center;height:32px;width:32px;flex-shrink:0;border-radius:999px;background:var(--glass-bg-strong)}
.recent{display:flex;align-items:center;gap:12px;padding:12px;text-align:left;width:100%}

.clip{display:flex;align-items:center;gap:12px;padding:12px}
.clip.expired{opacity:.55}
.clip .old{display:grid;height:44px;width:44px;flex-shrink:0;place-items:center;border-radius:999px;font-size:10px;font-weight:700;text-transform:uppercase;color:var(--muted-foreground);background:color-mix(in oklab,var(--foreground) 5%,transparent)}
.clip .meta{display:flex;flex-wrap:wrap;align-items:center;gap:0 8px;margin-top:2px;font-size:11px;color:var(--muted-foreground)}
.clip .fmt{border-radius:999px;padding:2px 6px;font-weight:600;background:color-mix(in oklab,var(--foreground) 8%,transparent)}
.icon-btn{padding:8px;color:var(--muted-foreground);display:inline-grid;place-items:center}

/* voices */
.search{display:flex;align-items:center;gap:8px;padding:12px 16px}
.search input{min-width:0;flex:1;background:transparent;border:0;font-size:14px}
.search input::placeholder{color:var(--muted-foreground)}
.vcard{display:flex;flex-direction:column;gap:8px;padding:12px}
.vavatar{position:relative;display:block;flex-shrink:0;height:44px;width:44px;border-radius:999px;overflow:hidden;box-shadow:0 0 0 2px rgba(255,255,255,.8),0 6px 16px rgba(150,110,170,.25)}
.vavatar img{height:100%;width:100%;object-fit:cover}
.vavatar.speaking{animation:orb-speak .9s var(--ease-ios) infinite alternate;box-shadow:0 0 0 2px var(--pink),0 6px 18px color-mix(in oklab,var(--a1) 45%,transparent)}
.vtag{border-radius:999px;padding:2px 8px;font-size:10px;font-weight:600;background:color-mix(in oklab,var(--foreground) 8%,transparent)}
.vmodel{display:inline-flex;align-items:center;gap:4px;border-radius:999px;padding:2px 8px;font-size:10px;font-weight:700;color:var(--primary);background:color-mix(in oklab,var(--primary) 12%,transparent)}
.small-play{display:grid;height:36px;width:36px;place-items:center;border-radius:999px;color:#fff;background:var(--gradient-brand)}
.small-play:disabled{opacity:.4}
.use-btn{flex:1;border-radius:999px;padding:8px 0;font-size:11px;font-weight:700;text-align:center;background:color-mix(in oklab,var(--foreground) 6%,transparent)}

/* segmented tabs / packages / settings */
.seg{display:flex;padding:4px}
.seg button{flex:1;text-align:center;border-radius:999px;padding:10px 0;font-size:13px;font-weight:700;text-transform:capitalize;color:var(--muted-foreground);transition:color .15s}
.seg button.on{background:var(--gradient-brand);color:#fff}
.dur{position:relative;isolation:isolate;flex-shrink:0;border-radius:999px;padding:10px 16px;font-size:13px;font-weight:700;color:var(--muted-foreground);transition:color .3s var(--ease-ios),transform var(--dur-micro) var(--ease-spring)}
.dur::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--gradient-brand);box-shadow:0 8px 20px color-mix(in oklab,var(--a1) 35%,transparent);opacity:0;transform:scale(.7);transition:opacity .3s var(--ease-ios),transform .45s var(--ease-spring)}
.dur.on{color:#fff}.dur.on::before{opacity:1;transform:none}
.plan{position:relative;padding:20px;transition:transform .35s var(--ease-spring),box-shadow .3s var(--ease-ios)}
.plan:active{transform:scale(.985)}
.plan.featured{box-shadow:var(--glass-shadow),0 0 0 2px var(--pink)}
.plan .ribbon{position:absolute;top:-12px;left:20px;border-radius:999px;padding:4px 12px;font-size:10px;font-weight:700;color:#fff;background:var(--gradient-brand)}
.plan li{display:flex;align-items:center;gap:8px;font-size:13px}
.plan li.no{color:var(--muted-foreground)}
.pk-cta{position:relative;overflow:hidden}
.pk-cta::after{content:"";position:absolute;top:0;bottom:0;left:-80px;width:60px;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);animation:pk-shine 3.8s ease-in-out infinite}
@keyframes pk-shine{0%,60%{left:-80px}100%{left:120%}}
.no-anim .pk-cta::after{display:none}
.pk-sum{margin-top:6px;padding:12px 16px;border-radius:20px;background:color-mix(in oklab,var(--a1) 8%,transparent);border:1px solid color-mix(in oklab,var(--a1) 20%,transparent)}
.pk-row{display:flex;justify-content:space-between;gap:10px;padding:6px 0;font-size:13.5px}
.pk-row span{color:var(--muted-foreground)}.pk-row b{font-weight:700;text-align:right}
.pk-row.tot{margin-top:6px;padding-top:12px;border-top:1px dashed color-mix(in oklab,var(--foreground) 20%,transparent);font-size:16px}
.pk-row.tot b{font-size:20px}
.pk-chs{display:flex;gap:10px;margin-top:6px}
.pk-ch{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:14px 8px;border-radius:18px;color:#fff;font-weight:700;font-size:14px}
.pk-ch.wa{background:linear-gradient(135deg,#25D366,#128C7E);box-shadow:0 8px 20px rgba(37,211,102,.35)}
.pk-ch.tg{background:linear-gradient(135deg,#34a8e4,#1c7fc4);box-shadow:0 8px 20px rgba(42,171,238,.35)}
.pk-copy{align-self:center;margin-top:6px;padding:6px 10px;font-size:12.5px;font-weight:600;color:var(--muted-foreground);text-decoration:underline;text-underline-offset:3px}
.group-title{margin:0 0 8px;padding:0 4px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted-foreground)}
.group{overflow:hidden}
.group>*+*{border-top:1px solid rgba(255,255,255,.4)}
.row-btn{display:flex;width:100%;align-items:center;justify-content:space-between;padding:16px;text-align:left}
.switch{position:relative;height:28px;width:48px;border-radius:999px;transition:background .2s;flex-shrink:0}
.switch i{position:absolute;top:4px;height:20px;width:20px;border-radius:999px;background:#fff;transition:left .2s}
.linkrow{display:flex;align-items:center;gap:12px;padding:16px;width:100%}
.linkrow+.linkrow,.linkrow+button{border-top:1px solid rgba(255,255,255,.4)}
.stat3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px}
.stat3>div{border-radius:16px;padding:12px 8px;background:color-mix(in oklab,var(--foreground) 5%,transparent)}

/* dashboard */
.bars{display:flex;height:112px;align-items:flex-end;gap:8px;margin-top:16px}
.bars>div{flex:1;border-radius:12px 12px 0 0;background:var(--gradient-brand)}
.ring-svg{transform:rotate(-90deg)}
.ring-svg .fg{stroke-dasharray:var(--c);stroke-dashoffset:var(--c);animation:ring-fill 1.1s var(--ease-ios) forwards}
@keyframes ring-fill{to{stroke-dashoffset:var(--o)}}

/* forms */
.field{width:100%;padding:12px 16px;font-size:14px}
.code-input{min-width:0;flex:1;padding:12px 16px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:16px;letter-spacing:.2em}
.code-input:focus,.field:focus{box-shadow:0 0 0 2px var(--ring)}
.textarea{width:100%;min-height:11.5rem;resize:vertical;border-radius:24px;border:1px solid var(--glass-border);background:var(--glass-bg-strong);box-shadow:var(--glass-shadow);padding:1.15rem;font-size:.9rem;font-weight:600;line-height:1.65}
.textarea:focus{border-color:color-mix(in oklab,var(--primary) 45%,var(--glass-border));box-shadow:0 0 0 3px color-mix(in oklab,var(--primary) 14%,transparent),var(--glass-shadow)}
.textarea::placeholder{color:var(--muted-foreground)}
select.field{appearance:none;background-image:none}

/* voice detail */
.lock-veil{position:absolute;inset:0;display:grid;place-items:center;border-radius:999px;background:rgba(255,255,255,.5);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.dark .lock-veil{background:rgba(20,16,31,.5)}
.slot{flex:1;border-radius:16px;padding:8px;text-align:center;font-size:10px;font-weight:700;background:color-mix(in oklab,var(--foreground) 6%,transparent)}
.slot.mine{color:#fff;background:var(--gradient-brand)}
.big-btn{display:grid;height:72px;width:72px;place-items:center;border-radius:999px;color:#fff;background:var(--gradient-brand);box-shadow:0 16px 40px color-mix(in oklab,var(--a1) 45%,transparent)}
.big-btn.rec{animation:orb-pulse 1.2s var(--ease-ios) infinite}
.danger-btn{border-radius:999px;padding:0 16px;font-size:14px;font-weight:700;color:var(--destructive);background:color-mix(in oklab,var(--destructive) 10%,transparent)}
.empty{display:flex;flex-direction:column;align-items:center;gap:12px;padding:40px 24px;text-align:center}
.empty p{max-width:20rem;font-size:14px;color:var(--muted-foreground)}

/* re-render without replaying entrance animations */
#app.static main,#app.static .rise,#app.static .page-in{animation:none!important}

/* profile card */
.pcard{padding:20px}
.pcard-top{display:flex;align-items:center;gap:16px}
.pavatar{display:grid;place-items:center;flex-shrink:0;height:64px;width:64px;border-radius:999px;color:#fff;background:var(--gradient-brand);box-shadow:0 0 0 4px color-mix(in oklab,var(--lilac) 22%,transparent),0 10px 26px color-mix(in oklab,var(--a1) 35%,transparent)}
.pquota{margin-top:20px;border-radius:20px;padding:16px;background:color-mix(in oklab,var(--foreground) 5%,transparent)}
.pstats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px}
.pstat{border-radius:20px;padding:14px;text-align:center;background:color-mix(in oklab,var(--foreground) 5%,transparent)}

/* scrollers bleed to the screen edge but start with the 20px page gutter (fixes first card sticking to the left) */
.bleed{margin-inline:-20px;padding:14px 20px;scroll-padding-inline:20px}
.snap.bleed::after,.hscroll.bleed::after{content:"";flex:0 0 1px}

.spin{display:inline-block;width:9px;height:9px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ===== v1.0.1 performance + shadow fixes ===== */
/* Horizontal scrollers clip anything outside their box. Big blurry shadows were cut off at the edges and showed as a dark grey band behind the chips/tiles. Keep shadows tiny and inside the padding. */
.hscroll{overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.hscroll .glass-tile,.hscroll .glass-pill,.hscroll .circle-btn,.hscroll .chip,.hscroll .dur{box-shadow:0 1px 6px rgba(150,110,170,.12)}
.hscroll .chip.active{box-shadow:0 1px 6px rgba(150,110,170,.12),0 0 0 1px var(--glass-border)}
.dark .hscroll .glass-tile,.dark .hscroll .glass-pill,.dark .hscroll .circle-btn,.dark .hscroll .chip{box-shadow:0 1px 6px rgba(0,0,0,.18)}
.miniplayer .inner{-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
/* Long lists: browser skips rendering off-screen cards. (paint containment clips shadows, so these cards use a border only.) */

/* ===== v1.0.2 audio clip card ===== */
:root{--clip-line:rgba(150,110,170,.14)}.dark{--clip-line:rgba(255,255,255,.1)}
.clip-card{position:relative;border-radius:26px;background:var(--glass-bg-strong);border:1px solid var(--clip-line);padding:14px 14px 12px;transition:border-color .25s,transform .22s var(--ease-ios),opacity .22s}
.clip-card.playing{border-color:color-mix(in oklab,var(--a1) 55%,transparent)}
.clip-card.leaving{opacity:0;transform:scale(.96)}
.cc-top{display:flex;align-items:center;gap:12px}
.cc-play{position:relative;flex:0 0 52px;height:52px;border-radius:50%;display:grid;place-items:center;color:#fff}
.cc-core{position:absolute;inset:5px;border-radius:50%;background:var(--gradient-brand);display:grid;place-items:center;box-shadow:0 4px 10px color-mix(in oklab,var(--a1) 28%,transparent)}
.cc-ring{position:absolute;inset:0;transform:rotate(-90deg)}
.cc-ring circle{fill:none;stroke-width:2.5}
.cc-ring .tr{stroke:var(--clip-line)}
.cc-ring .cc-fg{stroke:var(--pink);stroke-linecap:round;stroke-dasharray:150.8;stroke-dashoffset:150.8}
.cc-i-pause,.playing .cc-i-play{display:none}.playing .cc-i-pause{display:block}
.cc-txt{min-width:0;flex:1}
.cc-title{font-size:15px;font-weight:700;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cc-who{display:flex;align-items:center;gap:7px;margin-top:4px;font-size:12px;font-weight:600;color:var(--muted-foreground);min-width:0;letter-spacing:0;word-spacing:0}
.cc-av{position:relative;flex:0 0 26px;height:26px;border-radius:50%;overflow:hidden;background:var(--gradient-brand);color:#fff;display:grid;place-items:center;box-shadow:0 0 0 2px color-mix(in oklab,var(--foreground) 8%,transparent)}
.cc-av b{font-size:9px;font-weight:800;letter-spacing:0}
.cc-av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vmodel svg{width:11px;height:11px;flex:none}
.cc-model{flex:0 0 auto;white-space:nowrap}
.cc-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cc-fav{flex:0 0 40px;height:40px;border-radius:50%;display:grid;place-items:center;color:var(--muted-foreground)}
.cc-fav.pop svg{animation:pop-spring 420ms var(--ease-spring)}
.cc-wave{display:flex;align-items:center;gap:3px;height:34px;margin:12px 2px 2px;cursor:pointer}
.cc-wave i{flex:1;min-width:2px;border-radius:3px;height:var(--h);background:color-mix(in oklab,var(--foreground) 14%,transparent);transition:background .25s}
.cc-wave i.on{background:var(--gradient-brand)}
.clip-card.playing .cc-wave i{animation:cc-bar .9s ease-in-out infinite alternate;animation-delay:calc(var(--k)*-60ms)}
@keyframes cc-bar{from{transform:scaleY(.62)}to{transform:scaleY(1)}}
.cc-foot{display:flex;align-items:center;gap:8px;margin-top:8px}
.cc-meta{display:flex;align-items:center;flex-wrap:nowrap;gap:5px;min-width:0;flex:1;overflow:hidden}
.cc-tag{font-size:11.5px;font-weight:700;border-radius:999px;padding:5px 8px;white-space:nowrap;flex:0 0 auto;color:var(--muted-foreground);background:color-mix(in oklab,var(--foreground) 5%,transparent)}
.cc-tag.bad{color:var(--destructive);background:color-mix(in oklab,var(--destructive) 12%,transparent)}
.cc-tag.busy{display:inline-flex;align-items:center;gap:6px;color:var(--primary);background:color-mix(in oklab,var(--primary) 12%,transparent)}
.cc-acts{display:flex;gap:6px;flex:0 0 auto}
.cc-act{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:color-mix(in oklab,var(--foreground) 5%,transparent)}
.cc-act.cc-del{color:var(--destructive)}
.cc-act.off{opacity:.4}
.clip-card.busy .cc-wave{pointer-events:none}
.clip-card.busy .cc-wave i{background:linear-gradient(100deg,transparent 20%,color-mix(in oklab,var(--a1) 35%,transparent) 50%,transparent 80%) 0 0/250% 100%,color-mix(in oklab,var(--foreground) 10%,transparent);animation:shimmer-slide 1.3s linear infinite;animation-delay:calc(var(--k)*-30ms)}
.clip-card.expired .cc-top{opacity:.55}

/* ===== v1.0.4 voice card ===== */
.vcard{display:flex;flex-direction:column;gap:9px;border-radius:26px;background:var(--glass-bg-strong);border:1px solid var(--clip-line);padding:14px 12px 12px;content-visibility:auto;contain-intrinsic-size:auto 284px;transition:border-color .35s,background-color .35s}
.vcard:has(.vc-av.speaking){border-color:color-mix(in oklab,var(--a1) 55%,transparent);background-color:color-mix(in oklab,var(--pink) 6%,var(--glass-bg-strong))}
.vc-row{display:flex;align-items:flex-start;justify-content:space-between}
.vc-av{position:relative;flex:0 0 52px;width:52px;height:52px;border-radius:50%;background:var(--gradient-brand);color:#fff;display:grid;place-items:center;box-shadow:0 0 0 2.5px var(--glass-bg-strong),0 0 0 3.5px var(--clip-line);transition:transform .5s var(--ease-ios)}
.vc-av b{font-size:16px;font-weight:800;letter-spacing:0}
.vc-av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%}
.vc-av::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--pink);opacity:0;pointer-events:none}
.vc-av.speaking,.vc-av.orb-speaking{animation:none;transform:scale(1.06)}
.vc-av.speaking::after{animation:vc-ping 1.7s var(--ease-ios) infinite}
@keyframes vc-ping{0%{transform:scale(.92);opacity:.75}100%{transform:scale(1.35);opacity:0}}
.vc-fav{width:36px;height:36px;margin:-4px -4px 0 0;border-radius:50%;display:grid;place-items:center;color:var(--muted-foreground)}
.vc-fav.pop svg{animation:pop-spring 420ms var(--ease-spring)}
.vc-name{margin:2px 0 0;font-size:15px;font-weight:800;letter-spacing:-.015em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vc-sub{margin:2px 0 0;font-size:12px;font-weight:600;color:var(--muted-foreground);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vc-chips{display:flex;flex-wrap:wrap;gap:5px;min-height:22px}
.vc-chips .vmodel,.vc-chips .vtag{padding:3px 9px;font-size:10.5px}
.vc-act{display:flex;align-items:center;gap:8px;margin-top:auto}
.vc-play{flex:0 0 40px;height:40px;border-radius:50%;background:var(--gradient-brand);color:#fff;display:grid;place-items:center;box-shadow:0 4px 10px color-mix(in oklab,var(--a1) 30%,transparent)}
.vc-play:disabled{opacity:.4}
.vc-eq{display:flex;gap:2.5px;align-items:center;height:16px}
.vc-eq i{width:3px;height:100%;border-radius:2px;background:#fff;transform-origin:center;animation:vc-eq .8s ease-in-out infinite alternate}
.vc-eq i:nth-child(2){animation-delay:-.25s}.vc-eq i:nth-child(3){animation-delay:-.5s}.vc-eq i:nth-child(4){animation-delay:-.1s}
@keyframes vc-eq{from{transform:scaleY(.3)}to{transform:scaleY(1)}}
.vc-use{flex:1;height:40px;border-radius:999px;font-size:13px;font-weight:800;text-align:center;background:color-mix(in oklab,var(--foreground) 6%,transparent)}

/* ===== Studio page v1.0.5 — built only from the theme's own tokens and components ===== */
.app-bg{z-index:0}
.shell{position:relative;z-index:1}
.stack{display:flex;flex-direction:column;gap:14px}
.soft{background:color-mix(in oklab,var(--foreground) 6%,transparent)}
.pill-btn{white-space:nowrap;flex:none;display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px;border-radius:999px;font-size:13px;font-weight:700;transition:transform var(--dur-micro) var(--ease-spring),background .2s,color .2s}
.pill-btn:active{transform:scale(.95)}
.pill-btn.on{background:color-mix(in oklab,var(--primary) 14%,transparent);color:var(--primary)}
.sec-label{font-size:13px;font-weight:700}
.sec-hint{font-size:11.5px;color:var(--muted-foreground);margin-top:2px}

/* script editor with pause-tag highlight (textarea sits on top of a mirror) */
.script-wrap{position:relative}
.mirror{display:block;min-height:11.5rem;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;pointer-events:none;color:var(--foreground);transition:border-color .2s,box-shadow .2s}
.mirror mark{background:color-mix(in oklab,var(--pink) 16%,transparent);color:var(--pink);border-radius:5px;box-shadow:0 0 0 2px color-mix(in oklab,var(--pink) 16%,transparent)}
.script-ta{position:absolute;inset:0;height:100%;min-height:0;resize:none;overflow:hidden;background:transparent;border-color:transparent;box-shadow:none;color:transparent;caret-color:var(--pink)}
.script-ta:focus{border-color:transparent;box-shadow:none}
.script-wrap:focus-within .mirror{border-color:color-mix(in oklab,var(--primary) 45%,var(--glass-border));box-shadow:0 0 0 3px color-mix(in oklab,var(--primary) 14%,transparent),var(--glass-shadow)}
.script-wrap.shake{animation:orb-shake 420ms var(--ease-ios)}
.script-wrap.xl .mirror{animation:xl .7s ease}
@keyframes xl{40%{opacity:.2;filter:blur(2px)}}
.count-row{display:flex;align-items:center;gap:12px;margin-top:12px}
.count-row .meter{flex:1;height:6px}
.count-row .meter>div{transition:width .25s var(--ease-ios)}
.count-row.over .meter>div{background:var(--destructive)}
.count-row.over p{color:var(--destructive)}

.fold{display:grid;grid-template-rows:0fr;transition:grid-template-rows .32s var(--ease-ios)}
.fold.open{grid-template-rows:1fr}
.fold>div{overflow:hidden;min-height:0}
.hscroll.in-card{margin-inline:-16px;padding:12px 16px 2px}
.chip.soft{color:var(--foreground);font-variant-numeric:tabular-nums}
.chip.hit{background:var(--gradient-brand);color:#fff}

/* translate */
.tr-block{margin-top:16px;padding-top:16px;border-top:1px solid color-mix(in oklab,var(--foreground) 8%,transparent)}

/* voice selector */
.voice-row{display:flex;align-items:center;gap:10px;padding:12px}
.voice-main{display:flex;align-items:center;gap:12px;flex:1;min-width:0;text-align:left;border-radius:20px}
.voice-main .txt{min-width:0;flex:1}
.voice-main .vc-chips{margin-top:6px;min-height:0}
.vc-play .vc-eq{height:14px}

/* tuning sliders */
.tune+.tune{margin-top:18px}
.tune-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.tune-l{display:flex;align-items:center;gap:8px;min-width:0}
.tune-val{border-radius:999px;padding:4px 11px;font-size:12px;font-weight:800;color:var(--primary);background:color-mix(in oklab,var(--primary) 12%,transparent);font-variant-numeric:tabular-nums;min-width:58px;text-align:center;transition:transform .2s var(--ease-spring)}
.tune-val.bump{transform:scale(1.14)}
.reset{font-size:11px;font-weight:700;border-radius:999px;padding:3px 9px;color:var(--muted-foreground);opacity:0;pointer-events:none;transition:opacity .2s}
.reset.show{opacity:1;pointer-events:auto}
.rng{-webkit-appearance:none;appearance:none;display:block;width:100%;height:30px;margin:4px 0 0;background:transparent;cursor:pointer;--p:50%}
.rng::-webkit-slider-runnable-track{height:8px;border-radius:999px;background:linear-gradient(90deg,var(--pink),var(--lilac) var(--p),color-mix(in oklab,var(--foreground) 10%,transparent) var(--p))}
.rng::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;margin-top:-8px;border-radius:50%;background:#fff;border:0;box-shadow:0 0 0 1px var(--glass-border),0 3px 10px color-mix(in oklab,var(--a1) 40%,transparent);transition:transform .16s var(--ease-spring)}
.rng:active::-webkit-slider-thumb{transform:scale(1.2)}
.rng::-moz-range-track{height:8px;border-radius:999px;background:color-mix(in oklab,var(--foreground) 10%,transparent)}
.rng::-moz-range-progress{height:8px;border-radius:999px;background:linear-gradient(90deg,var(--pink),var(--lilac))}
.rng::-moz-range-thumb{width:24px;height:24px;border:0;border-radius:50%;background:#fff;box-shadow:0 3px 10px color-mix(in oklab,var(--a1) 40%,transparent)}
.ticks{display:flex;justify-content:space-between;font-size:11px;color:var(--muted-foreground);font-variant-numeric:tabular-nums;margin-top:0}

/* emotion */
.emo-wrap .group-title{margin:0 0 8px;padding:0 4px}
.emo-wrap .hscroll{margin-top:-4px}

/* generate */
.gen{position:relative;overflow:hidden;width:100%;height:58px;font-size:16px;font-weight:800;gap:10px}
.gen::before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.34) 50%,transparent 70%);transform:translateX(-100%);animation:sheen 3.8s var(--ease-ios) infinite}
@keyframes sheen{55%,100%{transform:translateX(100%)}}
.gen::after{content:"";position:absolute;inset:0;background:rgba(255,255,255,.28);transform:scaleX(0);transform-origin:left}
.gen.busy::after{animation:fill 2.6s linear forwards}
@keyframes fill{to{transform:scaleX(1)}}
.gen>*{position:relative;z-index:1}
.gen .gbars{display:none;align-items:center;gap:3px;height:22px}
.gen .gbars i{width:4px;height:100%;border-radius:4px;background:#fff}
.gen.busy .gbars{display:flex}
.gen.busy .gico{display:none}
.gen:disabled::before{display:none}
.gen-note{margin-top:10px;text-align:center;font-size:12px;color:var(--muted-foreground);font-variant-numeric:tabular-nums}

/* history */
.clip-card.fresh{animation:rise-in .45s var(--ease-ios) both}
.clip-card .cc-fav.on{color:var(--pink)}

/* voice sheet rows */
.vsel{display:flex;align-items:center;gap:12px;padding:10px 12px;transition:box-shadow .2s,background .2s}
.vsel.sel{box-shadow:0 0 0 2px var(--pink),var(--glass-shadow)}
.vsel .pick{display:flex;align-items:center;gap:12px;flex:1;min-width:0;text-align:left}
.vsel .vc-av{flex:0 0 44px;width:44px;height:44px}
.vsel .vc-av b{font-size:14px}
.tick{color:var(--pink);opacity:0;transform:scale(.4);transition:all .25s var(--ease-spring);flex:none}
.vsel.sel .tick{opacity:1;transform:none}
.sheet-body .search{margin-bottom:4px}
.none{padding:22px;text-align:center;font-size:14px;color:var(--muted-foreground)}
.chip.soft.busy{position:relative;pointer-events:none;padding-right:34px}
.chip.soft.busy::after{content:"";position:absolute;right:13px;top:50%;width:12px;height:12px;margin-top:-6px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:spin .8s linear infinite}

/* pause + translate on one line */
.tools{display:flex;gap:8px;margin-top:14px}
.tool-btn{flex:1 1 0;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:6px;height:46px;padding:0 8px;border-radius:999px;font-size:13px;font-weight:700;white-space:nowrap;transition:transform var(--dur-micro) var(--ease-spring),background .2s,color .2s}
.tool-btn span{overflow:hidden;text-overflow:ellipsis}
.tool-btn .mono{font-weight:700}
.tool-btn.on{background:color-mix(in oklab,var(--primary) 14%,transparent);color:var(--primary)}
.panel-hint{margin-top:0;padding-top:12px}
.panel-hint+.hscroll.in-card{padding-top:8px}
.tr-block{display:none}

/* lock */
.sec-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.sec-head .group-title{margin:0}
.lock-btn{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 14px;border-radius:999px;font-size:13px;font-weight:700;white-space:nowrap;transition:transform var(--dur-micro) var(--ease-spring),background .25s,color .25s}
.lock-btn:active{transform:scale(.94)}
.lock-btn.on{background:var(--gradient-brand);color:#fff;box-shadow:0 6px 16px color-mix(in oklab,var(--a1) 30%,transparent)}
.lk-ic{display:grid;place-items:center}
.lockable{position:relative}
.lockable>*{transition:filter .35s var(--ease-ios),opacity .35s var(--ease-ios)}
.lockable.locked>:not(.lock-tag){filter:blur(3.5px);opacity:.55;pointer-events:none;user-select:none}
.lock-tag{position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:2;display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:999px;font-size:12px;font-weight:800;color:var(--foreground);background:var(--glass-bg-strong);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow-lg);pointer-events:none;animation:pop-spring 380ms var(--ease-spring) both}
.lock-tag svg{color:var(--pink)}
.lockable.locked{pointer-events:none}
.lockable.locked .hscroll{overflow:hidden}

/* ===== v1.0.7 smooth scrolling pass ===== */
/* 1) No live blur on anything that sits over scrolling content (the #1 cause of scroll lag on phones). */
.dock,.miniplayer .inner,.sheet,.toast,.lock-veil{-webkit-backdrop-filter:none;backdrop-filter:none}
.dock{background:var(--glass-bg-strong)}
.sheet,.toast{background:var(--popover)}
/* 2) Cheaper shadows (big blurry shadows are re-painted on every scroll frame). */
:root{--glass-shadow:0 2px 8px rgba(150,110,170,.10);--glass-shadow-lg:0 4px 14px rgba(150,110,170,.16)}
.btn-primary{box-shadow:0 5px 14px color-mix(in oklab,var(--a1) 30%,transparent)}
.dock{box-shadow:0 3px 12px rgba(150,110,170,.18)}
/* 3) Nothing animates forever while you scroll. */
.gen::before{animation-iteration-count:2;animation-delay:.8s}
.cc-wave i{transition:none}
/* 4) Locked blocks: plain fade instead of a blur filter. */
.lockable.locked>:not(.lock-tag){filter:none;opacity:.42}
/* 5) Touch: sliders must not steal vertical scrolling, taps are instant. */
.rng{touch-action:pan-y}
html{touch-action:manipulation;-webkit-text-size-adjust:100%}
.hscroll{touch-action:pan-x pan-y}
/* 6) Isolate each Studio card so editing one never re-lays out the page. */
.stack>.glass-card,.stack>.lockable,.stack>.rise{contain:layout style}
.clip-card,.vcard{contain:layout style}

/* v1.0.8: sparkle icon sits a touch lower so it lines up with the label */
.gen .gico{top:2px}

/* ---- robot mascot (Voice Clone page) — a bust made of separate body parts, so it moves like a person, not a sticker.
   --lvl (0..1) is the live audio level written by app.js. ---- */
.rbt-wrap{--lvl:0;position:relative;margin:0 auto;display:block;user-select:none;-webkit-user-select:none}
.rbt-halo{position:absolute;left:50%;top:46%;width:130%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;pointer-events:none;
  background:conic-gradient(from 0deg,#f7a8d8,#c3a6f7,#9fe3e6,#fbd3e4,#f7a8d8);filter:blur(34px);
  opacity:calc(.34 + var(--lvl)*.42);transform:scale(calc(.9 + var(--lvl)*.2));animation:rbt-spin 16s linear infinite}
@keyframes rbt-spin{to{rotate:360deg}}
.rbt-ring{position:absolute;left:50%;top:48%;width:100%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;border:1.5px solid color-mix(in srgb,var(--a1) 50%,transparent);opacity:0;pointer-events:none}
.rbt-wrap[data-state=listening] .rbt-ring,.rbt-wrap[data-state=speaking] .rbt-ring{animation:rbt-ring 2.4s var(--ease-ios) infinite}
@keyframes rbt-ring{0%{transform:scale(.85);opacity:.7}100%{transform:scale(1.7);opacity:0}}
.rbt-fig,.rbt-torso,.rbt-pv,.rbt-l{position:absolute;inset:0}
.rbt-l{width:100%;height:100%;display:block;pointer-events:none;-webkit-user-drag:none}
.rbt-fig{filter:drop-shadow(0 12px 18px rgba(150,90,200,.28))}
/* torso: breathing only — the figure never bobs up and down as one piece */
.rbt-torso{transform-origin:50% 97%;animation:rbt-breathe 4.2s ease-in-out infinite alternate;scale:calc(1 + var(--lvl)*.012)}
@keyframes rbt-breathe{from{transform:scale(1,1)}to{transform:scale(1.006,1.016)}}
/* head: slow human sway, nods a little with the voice */
.rbt-head{transform-origin:50% 58%;animation:rbt-head 7s ease-in-out infinite alternate;translate:0 calc(var(--lvl)*2.6px);rotate:calc(var(--lvl)*-1.2deg)}
@keyframes rbt-head{0%{transform:rotate(-1.6deg) translateX(-1px)}50%{transform:rotate(.4deg) translateX(0)}100%{transform:rotate(1.8deg) translateX(1px) translateY(-1px)}}
/* waving arm: shoulder sway + the hand waves a few times, rests, waves again */
.rbt-armL{transform-origin:33.6% 63.6%;animation:rbt-armL 4.2s ease-in-out infinite alternate;rotate:calc(var(--lvl)*-3deg)}
@keyframes rbt-armL{from{transform:rotate(-1.4deg)}to{transform:rotate(1.2deg)}}
.rbt-hand{transform-origin:14.75% 60.9%;animation:rbt-wave 5.2s ease-in-out infinite}
@keyframes rbt-wave{0%,38%,100%{transform:rotate(0)}44%{transform:rotate(-15deg)}50%{transform:rotate(11deg)}56%{transform:rotate(-15deg)}62%{transform:rotate(11deg)}68%{transform:rotate(-12deg)}74%{transform:rotate(6deg)}82%{transform:rotate(0)}}
.rbt-wrap[data-state=speaking] .rbt-hand,.rbt-wrap[data-state=listening] .rbt-hand{animation-duration:2.6s}
.rbt-armR{transform-origin:71.3% 63.6%;animation:rbt-armR 5.4s ease-in-out infinite alternate;rotate:calc(var(--lvl)*3.2deg)}
@keyframes rbt-armR{from{transform:rotate(1.1deg)}to{transform:rotate(-1.3deg)}}
.rbt-wrap[data-state=listening] .rbt-head{animation:rbt-listen 2.8s ease-in-out infinite alternate}
@keyframes rbt-listen{from{transform:rotate(2.6deg) translateX(1px)}to{transform:rotate(4deg) translateX(2px)}}
.rbt-wrap[data-state=processing] .rbt-head{animation:rbt-think 1.9s ease-in-out infinite alternate}
@keyframes rbt-think{from{transform:rotate(-3.5deg) translateX(-2px)}to{transform:rotate(3.5deg) translateX(2px)}}
.rbt-wrap[data-state=processing] .rbt-hand{animation-play-state:paused}
.rbt-wrap[data-state=error] .rbt-torso{animation:orb-shake 420ms var(--ease-ios)}
.rbt-shadow{position:absolute;left:50%;bottom:-2%;width:58%;height:6%;translate:-50% 0;border-radius:50%;background:radial-gradient(closest-side,rgba(150,90,200,.35),transparent);filter:blur(6px)}
.rbt-glow{position:absolute;border-radius:50%;pointer-events:none;mix-blend-mode:screen;background:radial-gradient(closest-side,rgba(255,150,205,.9),transparent);opacity:calc(.25 + var(--lvl)*.75);animation:rbt-glow 2s ease-in-out infinite alternate}
@keyframes rbt-glow{from{scale:.8}to{scale:1.15}}
.rbt-lid,.rbt-patch,.rbt-mouth,.rbt-chest{position:absolute}
.rbt-lid{background:radial-gradient(closest-side,#fdf3fc 74%,rgba(253,243,252,0));border-radius:50%;transform:scaleY(0);transform-origin:50% 0;animation:rbt-blink 4.8s infinite}
.rbt-lid::after{content:"";position:absolute;left:12%;right:12%;bottom:20%;height:calc(var(--k)*8px);border-bottom:calc(var(--k)*4px) solid #35295e;border-radius:50%}
.rbt-lid.r{animation-delay:.04s}
@keyframes rbt-blink{0%,89%,100%{transform:scaleY(0)}92%,95%{transform:scaleY(1)}}
.rbt-wrap[data-state=speaking] .rbt-lid,.rbt-wrap[data-state=listening] .rbt-lid{animation-duration:3.4s}
.rbt-patch{border-radius:50%;background:radial-gradient(closest-side,#fef1fb 62%,rgba(254,241,251,0));opacity:0;transition:opacity .12s}
.rbt-mouth{transform:translateX(-50%);overflow:hidden;opacity:0;transition:opacity .12s;background:#8e2f5a;box-shadow:inset 0 calc(var(--k)*-8px) 0 #f58a9f,0 0 0 calc(var(--k)*2px) #c85a86;
  border-radius:28% 28% 50% 50%/16% 16% 84% 84%;
  width:calc(var(--k)*(30px + var(--lvl)*34px));height:calc(var(--k)*(5px + var(--lvl)*42px))}
.rbt-wrap[data-state=speaking] .rbt-patch,.rbt-wrap[data-state=listening] .rbt-patch,.rbt-wrap[data-state=speaking] .rbt-mouth,.rbt-wrap[data-state=listening] .rbt-mouth{opacity:1}
.rbt-chest{border-radius:50%;background:radial-gradient(closest-side,#d6b8f8,#c4a8f9 80%);display:flex;align-items:center;justify-content:center;gap:calc(var(--k)*5px)}
.rbt-chest i{display:block;width:calc(var(--k)*7px);height:calc(var(--k)*58px);border-radius:99px;background:#fff;box-shadow:0 0 calc(var(--k)*8px) rgba(255,255,255,.9);transform:scaleY(calc(var(--p)*.6));animation:rbt-bar 1.5s ease-in-out calc(var(--i)*-.17s) infinite alternate}
@keyframes rbt-bar{from{transform:scaleY(calc(var(--p)*.42 + .1))}to{transform:scaleY(calc(var(--p)*.95 + .05))}}
.rbt-wrap[data-state=processing] .rbt-chest i{animation-duration:.45s}
.rbt-wrap[data-state=speaking] .rbt-chest i,.rbt-wrap[data-state=listening] .rbt-chest i{animation:none;transform:scaleY(var(--s,.2))}
.rbt-spark{position:absolute;width:calc(var(--k)*34px);height:calc(var(--k)*34px);opacity:0;color:#e58bd0;animation:rbt-spark 4.2s ease-in-out infinite;pointer-events:none}
.rbt-spark svg{width:100%;height:100%;display:block}
@keyframes rbt-spark{0%{opacity:0;transform:translateY(8px) scale(.6) rotate(0)}30%{opacity:.9}100%{opacity:0;transform:translateY(-26px) scale(1.1) rotate(40deg)}}
.rbt-wrap[data-state=speaking] .rbt-spark,.rbt-wrap[data-state=listening] .rbt-spark{animation-duration:2.2s}
@media (prefers-reduced-motion:reduce){.rbt-torso,.rbt-head,.rbt-armL,.rbt-armR,.rbt-hand,.rbt-halo,.rbt-spark,.rbt-glow{animation:none}.rbt-ring{display:none}}

/* sample player (Voice Clone page) */
.csamp{display:flex;align-items:center;gap:12px;margin-top:8px}
.csamp .small-play{flex-shrink:0;width:42px;height:42px}
.csamp-main{flex:1;min-width:0}
.csamp-seek{position:relative;height:18px;margin-top:2px;cursor:pointer;touch-action:none}
.csamp-seek::before{content:"";position:absolute;left:0;right:0;top:7px;height:4px;border-radius:99px;background:color-mix(in oklab,var(--foreground) 12%,transparent)}
.csamp-seek i{position:absolute;left:0;top:7px;height:4px;width:0;border-radius:99px;background:var(--gradient-brand)}
.csamp-seek i::after{content:"";position:absolute;right:-6px;top:-4px;width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px var(--a1)}

/* ---- v1.0.11: Voice Clone page — light & smooth ----
   No per-frame --lvl on the whole robot, no blurred spinning halo, no drop-shadow filter, no blend modes.
   Sample playback gets its own cheap "playing" state (sway + bob + sparkles, all transform/opacity only, no talking mouth). */
.vc-page .glass-card,.vc-page .glass-tile{box-shadow:0 1px 6px rgba(150,110,170,.12)}
.rbt-wrap{contain:layout style}
.rbt-halo{filter:none;background:radial-gradient(closest-side,rgba(195,166,247,.55),rgba(247,168,216,.28) 55%,transparent 72%);transform:none;opacity:.85;animation:rbt-halo 4.2s ease-in-out infinite alternate}
@keyframes rbt-halo{from{opacity:.6}to{opacity:.95}}
.rbt-fig{filter:none}
.rbt-shadow{filter:none}
.rbt-torso{scale:none}
.rbt-head{translate:none;rotate:none}
.rbt-armL,.rbt-armR{rotate:none}
.rbt-glow{mix-blend-mode:normal;opacity:.3;animation:none}
.rbt-torso,.rbt-head,.rbt-armL,.rbt-armR,.rbt-hand{will-change:transform}
@keyframes rbt-bob{from{transform:translateY(0) scale(1,1)}to{transform:translateY(-7px) scale(1.01,1.014)}}
@keyframes rbt-dance{0%{transform:rotate(-5deg) translateX(-2px)}100%{transform:rotate(5deg) translateX(2px)}}
.rbt-wrap[data-state=playing] .rbt-torso{animation:rbt-bob .7s ease-in-out infinite alternate}
.rbt-wrap[data-state=playing] .rbt-head{animation:rbt-dance 1.4s ease-in-out infinite alternate}
.rbt-wrap[data-state=playing] .rbt-armL,.rbt-wrap[data-state=playing] .rbt-armR{animation-duration:1.4s}
.rbt-wrap[data-state=playing] .rbt-hand{animation-duration:2s}
.rbt-wrap[data-state=playing] .rbt-chest i{animation-duration:.5s}
.rbt-wrap[data-state=playing] .rbt-spark{animation-duration:1.8s}
.rbt-wrap[data-state=playing] .rbt-halo{animation-duration:1.4s}
@media (prefers-reduced-motion:reduce){.rbt-wrap[data-state=playing] .rbt-torso,.rbt-wrap[data-state=playing] .rbt-head{animation:none}}

/* ---- v1.0.12: locked Voice Clone page ---- */
.is-locked .rbt-wrap{opacity:.72;filter:saturate(.7)}
.is-locked .rbt-torso,.is-locked .rbt-head,.is-locked .rbt-armL,.is-locked .rbt-armR,.is-locked .rbt-hand,.is-locked .rbt-spark,.is-locked .rbt-halo,.is-locked .rbt-lid,.is-locked .rbt-chest i,.is-locked .rbt-ring{animation:none!important}
.is-locked .rbt-ring,.is-locked .rbt-spark{display:none}
.lock-badge{position:absolute;right:6%;bottom:8%;z-index:3;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;color:#fff;background:var(--gradient-brand);border:3px solid var(--background);box-shadow:0 6px 16px color-mix(in srgb,var(--a1) 35%,transparent)}
.lock-card{padding:22px 20px}
.lock-ic{width:48px;height:48px;border-radius:50%;display:inline-grid;place-items:center;color:var(--a1);background:color-mix(in oklab,var(--a1) 14%,transparent)}

/* ---- v1.0.13: Access Code page + scroll performance ----
   Light on purpose: no backdrop-filter, no infinite animations (the shimmer plays 3 times, the pulse dot is static), transform/opacity only,
   and off-screen sections are skipped by the browser until they scroll near. */
.ac-page{contain:layout style}
.ac-use,.ac-sc,.ac-out{content-visibility:auto;contain-intrinsic-size:auto 230px}
.ac-use{padding:20px;margin-top:16px}
.ac-ring{transform:rotate(-90deg);flex-shrink:0}
.ac-ring .fg{will-change:stroke-dashoffset}
.ac-big{font-size:28px;font-weight:800;letter-spacing:-.03em;line-height:1;margin:6px 0}
.ac-list{margin-top:16px;border-top:1px solid color-mix(in oklab,var(--foreground) 9%,transparent)}
.ac-li{display:flex;align-items:center;justify-content:space-between;padding:13px 2px;border-bottom:1px solid color-mix(in oklab,var(--foreground) 9%,transparent);font-size:14px}
.ac-li:last-child{border:0;padding-bottom:0}
.ac-li span:first-child{color:var(--muted-foreground);font-weight:600}.ac-li span:last-child{font-weight:700}
.ac-on{color:var(--success)}
.ac-act{display:flex;flex-direction:column;justify-content:space-between;gap:14px;padding:16px;border-radius:24px;min-height:112px;text-align:left}
.ac-act .ic{width:42px;height:42px;border-radius:14px;display:grid;place-items:center}
.ac-act .tt{font-size:14px;font-weight:700;line-height:1.25}.ac-act .ss{font-size:11px;font-weight:600;opacity:.75;margin-top:2px}
.ac-act.pri{color:#fff;background:var(--gradient-brand);box-shadow:0 8px 18px color-mix(in srgb,var(--a1) 32%,transparent)}.ac-act.pri .ic{background:rgba(255,255,255,.25)}
.ac-act.sec{background:var(--glass-bg-strong);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow)}.ac-act.sec .ic{background:color-mix(in srgb,var(--a1) 13%,transparent);color:var(--a1)}
.ac-s{display:flex;align-items:center;gap:12px;padding:14px;border-radius:22px;background:var(--glass-bg);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow)}
.ac-s .ic{flex:none;width:40px;height:40px;border-radius:13px;display:grid;place-items:center;color:#fff}
.ac-s b{display:block;font-size:14px;font-weight:700}.ac-s small{display:block;font-size:11px;color:var(--muted-foreground);font-weight:600;margin-top:1px}
.ac-out{margin-top:14px}
/* scroll smoothness, all pages: skip painting cards that are far off-screen, and keep fixed layers on their own compositor layer */
/* v1.0.32: no lazy-render (content-visibility) on clip cards / recent rows — its guessed placeholder height made the page jump while scrolling Home */
.dock-wrap,.miniplayer{transform:translateZ(0)}
html{-webkit-overflow-scrolling:touch}



/* ---- v1.0.17: Access Code top box (ticket style). Notches are cut with a mask, so they work on any background. No blur, no shadow filter, no infinite animation. ---- */
.ac-pass{display:flex;flex-direction:column}
.ac-top{position:relative;overflow:hidden;padding:22px;color:#fff;border-radius:28px 28px 0 0;background:linear-gradient(135deg,var(--a1) 0%,var(--a2) 60%,#7BB4E6 130%);
  -webkit-mask:radial-gradient(circle 13px at 0 100%,#0000 97%,#000) left/51% 100% no-repeat,radial-gradient(circle 13px at 100% 100%,#0000 97%,#000) right/51% 100% no-repeat;
  mask:radial-gradient(circle 13px at 0 100%,#0000 97%,#000) left/51% 100% no-repeat,radial-gradient(circle 13px at 100% 100%,#0000 97%,#000) right/51% 100% no-repeat}
.ac-top::before{content:"";position:absolute;right:-60px;top:-80px;width:200px;height:200px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.35),transparent);pointer-events:none}
.ac-top>*{position:relative}
.ac-ico{flex:none;width:46px;height:46px;border-radius:15px;display:grid;place-items:center;background:rgba(255,255,255,.22)}
.ac-lbl{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;opacity:.8}
.ac-pkg{font-size:21px;font-weight:800;letter-spacing:-.02em;margin-top:2px;line-height:1.15}
.ac-pill{flex:none;display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;padding:6px 11px;border-radius:99px;background:rgba(255,255,255,.24)}
.ac-pill b{width:7px;height:7px;border-radius:50%;background:#7CFFC4}.ac-pill b.off{background:#FFB4B4}
.ac-chips{display:flex;gap:10px;margin-top:18px}
.ac-chips>div{flex:1;min-width:0;border-radius:16px;padding:10px 12px;background:rgba(255,255,255,.18)}
.ac-chips p:first-child{font-size:11px;font-weight:600;opacity:.8}.ac-chips p:last-child{font-size:13px;font-weight:700;margin-top:2px}
.ac-stub{position:relative;padding:20px 22px 22px;border-radius:0 0 28px 28px;background:var(--glass-bg-strong);
  -webkit-mask:radial-gradient(circle 13px at 0 0,#0000 97%,#000) left/51% 100% no-repeat,radial-gradient(circle 13px at 100% 0,#0000 97%,#000) right/51% 100% no-repeat;
  mask:radial-gradient(circle 13px at 0 0,#0000 97%,#000) left/51% 100% no-repeat,radial-gradient(circle 13px at 100% 0,#0000 97%,#000) right/51% 100% no-repeat}
.ac-stub::before{content:"";position:absolute;left:22px;right:22px;top:0;border-top:2px dashed color-mix(in oklab,var(--foreground) 16%,transparent)}
.ac-sl{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted-foreground)}
.ac-codebox{margin-top:10px;padding:14px 16px;border-radius:18px;background:color-mix(in oklab,var(--a2) 11%,transparent);border:1px solid color-mix(in oklab,var(--foreground) 14%,transparent);font:700 17px/1.45 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.04em;word-break:break-all;overflow-wrap:anywhere;-webkit-user-select:all;user-select:all}
.ac-codebox.long{font-size:15px}
.ac-codebox em{font-style:normal;background:var(--gradient-brand);-webkit-background-clip:text;background-clip:text;color:transparent}
.ac-btns{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.ac-b{display:flex;align-items:center;justify-content:center;gap:8px;height:46px;border-radius:99px;font-size:14px;font-weight:700;background:color-mix(in oklab,var(--a2) 11%,transparent);border:1px solid color-mix(in oklab,var(--foreground) 14%,transparent)}
.ac-b.pri{color:#fff;background:var(--gradient-brand);border-color:transparent;box-shadow:0 6px 14px color-mix(in srgb,var(--a1) 28%,transparent)}

/* ---- v1.0.18: Settings redesign + UI colour ---- */
.no-anim *,.no-anim *::before,.no-anim *::after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
.st-page{contain:layout style}
.st-pv{position:relative;overflow:hidden;padding:18px;color:#fff;border-radius:26px;background:var(--gradient-brand);box-shadow:0 10px 22px color-mix(in srgb,var(--a1) 32%,transparent)}
.st-pv::before{content:"";position:absolute;right:-50px;top:-70px;width:180px;height:180px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.35),transparent);pointer-events:none}
.st-pv>*{position:relative}
.st-pv .l{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;opacity:.8}
.st-pv .t{font-size:20px;font-weight:800;margin-top:2px;letter-spacing:-.02em}
.st-pv .m{height:8px;border-radius:9px;background:rgba(255,255,255,.28);margin-top:14px;overflow:hidden}
.st-pv .m div{height:100%;width:68%;border-radius:9px;background:#fff}
.st-pv .r{display:flex;gap:8px;margin-top:14px}
.st-pv .p{padding:7px 14px;border-radius:99px;font-size:13px;font-weight:700;background:rgba(255,255,255,.25)}
.st-pv .p.w{background:#fff;color:var(--a2)}
.st-blk{padding:15px 16px}
.st-blk+.st-blk,.st-blk+.row-btn,.row-btn+.st-blk{border-top:1px solid color-mix(in oklab,var(--foreground) 9%,transparent)}
.st-bt{display:flex;align-items:center;margin-bottom:12px}
.st-bt b{font-size:14px;font-weight:700}.st-bt small{margin-left:auto;font-size:13px;color:var(--muted-foreground);font-weight:600}
.st-seg{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:4px;border-radius:99px;background:color-mix(in oklab,var(--foreground) 7%,transparent)}
.st-seg button{position:relative;z-index:1;height:38px;border-radius:99px;font-size:13px;font-weight:700;color:var(--muted-foreground);text-align:center;transition:color .25s}
.st-seg button.on{color:#fff}
.st-pill{position:absolute;z-index:0;top:4px;bottom:4px;left:4px;width:calc((100% - 16px)/3);border-radius:99px;background:var(--gradient-brand);transform:translateX(calc(var(--i,0)*(100% + 4px)));transition:transform .35s var(--ease-ios);box-shadow:0 4px 12px color-mix(in srgb,var(--a1) 32%,transparent)}
.st-sws{display:flex;flex-wrap:wrap;gap:12px}
.st-sw{position:relative;display:block;width:42px;height:42px;border-radius:50%;box-shadow:0 3px 8px rgba(0,0,0,.12);transition:transform .2s var(--ease-ios);cursor:pointer}
.st-sw:active{transform:scale(.9)}
.st-sw::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2.5px solid var(--foreground);opacity:0;transform:scale(.85);transition:opacity .25s,transform .25s var(--ease-ios)}
.st-sw.on::after{opacity:.85;transform:none}
.st-sw svg{position:absolute;inset:0;margin:auto;color:#fff;opacity:0;transform:scale(.5);transition:opacity .25s,transform .25s var(--ease-ios)}
.st-sw.on svg{opacity:1;transform:none}
.st-cust{background:conic-gradient(#f06a6a,#f0c46a,#8ff06a,#6af0d8,#6a8ff0,#d86af0,#f06a6a);overflow:hidden}
.st-cust input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:0;padding:0}
.st-ic{flex:none;width:36px;height:36px;border-radius:12px;display:grid;place-items:center;color:#fff;background:var(--gradient-brand)}

/* ---- v1.0.19: voice picker sheet. Solid sheet (no backdrop blur, which made opening and scrolling the list laggy), avatars, check mark, search. ---- */
.sheet{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--popover)}
.sheet-head{background:var(--popover)}
.sheet-back{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.vp-search{position:sticky;top:62px;z-index:5;display:flex;align-items:center;gap:10px;height:46px;padding:0 16px;border-radius:99px;margin:0 0 6px;background:color-mix(in oklab,var(--foreground) 7%,var(--popover));border:1.5px solid transparent;color:var(--muted-foreground);transition:border-color .2s,box-shadow .2s}
.vp-search:focus-within{border-color:var(--a1);box-shadow:0 0 0 4px color-mix(in oklab,var(--a1) 15%,transparent)}
.vp-search input{flex:1;min-width:0;border:0;outline:0;background:none;font:600 15px/1 inherit;font-family:inherit;color:var(--foreground)}
.vp-list{display:flex;flex-direction:column;gap:8px}
.vp-row{display:flex;align-items:center;gap:12px;width:100%;padding:10px 14px 10px 10px;border-radius:22px;text-align:left;background:var(--glass-bg-strong);border:1.5px solid color-mix(in oklab,var(--foreground) 8%,transparent);content-visibility:auto;contain-intrinsic-size:auto 64px;transition:background .2s,border-color .2s}
.vp-row .vc-av{flex:0 0 44px;width:44px;height:44px}
.vp-row .vc-av b{font-size:14px}
.vp-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.vp-tx b{font-size:calc(14px*var(--ts,1));font-weight:700}
.vp-tx small{font-size:calc(12px*var(--ts,1));font-weight:600;color:var(--muted-foreground)}
.vp-ck{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;color:#fff;background:var(--gradient-brand);opacity:0;transform:scale(.5);transition:opacity .22s,transform .25s var(--ease-spring)}
.vp-row.on{border-color:var(--a1);background:color-mix(in oklab,var(--a1) 9%,var(--glass-bg-strong))}
.vp-row.on .vp-ck{opacity:1;transform:none}

/* ---- Studio voice card (avatar ring, Change pill, preview waveform strip) ---- */
.vcx{position:relative;overflow:hidden;padding:0;border:1.5px solid var(--glass-border);transition:border-color .3s,box-shadow .3s}
.vcx::before{content:"";position:absolute;left:-40px;top:-60px;width:180px;height:180px;border-radius:50%;background:radial-gradient(closest-side,color-mix(in oklab,var(--a1) 20%,transparent),transparent);pointer-events:none}
.vcx.locked{border-color:var(--a1);box-shadow:0 8px 24px color-mix(in oklab,var(--a1) 22%,transparent)}
.vcx-body{position:relative;padding:16px 16px 14px}
.vcx-body.enter{animation:vcx-in .32s var(--ease-ios) both}
@keyframes vcx-in{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
.vcx-top{display:flex;align-items:center;gap:14px}
.vcx-av{position:relative;flex:none;width:68px;height:68px;border-radius:50%;padding:3px;background:var(--gradient-brand);display:block}
.vcx-ai{position:relative;display:grid;place-items:center;width:100%;height:100%;border-radius:50%;overflow:hidden;background:var(--glass-bg-strong);border:2px solid var(--glass-bg-strong);font-size:20px;font-weight:800;color:var(--a1)}
.vcx-ai img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.vcx-lk{position:absolute;right:-3px;bottom:-3px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;color:#fff;background:var(--gradient-brand);border:2.5px solid var(--glass-bg-strong);transform:scale(0);transition:transform .35s var(--ease-spring)}
.vcx.locked .vcx-lk{transform:scale(1)}
.vcx-av::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid var(--a1);opacity:0;pointer-events:none}
.vcx-av.speaking::after{animation:vc-ping 1.4s ease-out infinite}
.vcx-tx{flex:1;min-width:0}
.vcx-nm{margin:0;font-size:18px;font-weight:800;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vcx-nm i{font-style:normal;background:var(--gradient-brand);-webkit-background-clip:text;background-clip:text;color:transparent}
.vcx-mt{margin:3px 0 0;font-size:13px;font-weight:600;color:var(--muted-foreground);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vcx-chg{flex:none;display:flex;align-items:center;gap:4px;height:36px;padding:0 10px 0 14px;border-radius:999px;font-size:13px;font-weight:700;background:color-mix(in oklab,var(--foreground) 7%,transparent);border:1px solid var(--clip-line);transition:opacity .25s}
.vcx-chg:disabled{opacity:.4;pointer-events:none}
.vcx-tags{display:flex;flex-wrap:nowrap;align-items:center;gap:6px;margin-top:14px;min-width:0;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scrollbar-width:none;padding-bottom:2px}
.vcx-tags::-webkit-scrollbar{display:none}
.vcx-tags .mdl-pill{flex:none;box-sizing:border-box;margin:0;align-self:center}
.vcx-tags .tg{flex:none;box-sizing:border-box;margin:0;align-self:center;line-height:1.3;white-space:nowrap;font-size:11.5px;font-weight:700;padding:5px 10px;border-radius:999px;background:color-mix(in oklab,var(--foreground) 7%,transparent);border:1px solid var(--clip-line)}
.vcx-tags .tg.m{color:var(--a1);background:color-mix(in oklab,var(--a1) 12%,transparent);border-color:transparent}
.vcx-pv{display:flex;align-items:center;gap:12px;margin-top:14px;padding:8px 14px 8px 8px;border-radius:999px;background:color-mix(in oklab,var(--foreground) 6%,transparent);border:1px solid var(--clip-line)}
.vcx-pb{flex:0 0 44px;width:44px;height:44px}
.vcx-wf{flex:1;min-width:0;height:28px;display:flex;align-items:center;gap:3px}
.vcx-wf i{flex:1;max-width:5px;height:var(--h);border-radius:9px;background:color-mix(in oklab,var(--foreground) 18%,transparent);transition:background .2s;transform-origin:center}
.vcx-wf i.d{background:var(--a1)}
.vcx-pv.on .vcx-wf i{animation:vcx-bar .7s ease-in-out infinite alternate}
.vcx-pv.on .vcx-wf i:nth-child(3n+1){animation-delay:-.18s}.vcx-pv.on .vcx-wf i:nth-child(3n+2){animation-delay:-.36s}.vcx-pv.on .vcx-wf i:nth-child(3n){animation-delay:-.54s}
@keyframes vcx-bar{from{transform:scaleY(.45)}to{transform:scaleY(1)}}
.vcx-tm{flex:none;min-width:44px;text-align:right;font-size:12px;font-weight:700;color:var(--muted-foreground);font-variant-numeric:tabular-nums}
.vcx-note{margin:10px 0 0;min-height:16px;text-align:center;font-size:12px;font-weight:600;color:var(--muted-foreground)}
.vcx-av.speaking,.vcx-av.orb-speaking{animation:none;transform:scale(1.04);transition:transform .5s var(--ease-ios)}

/* clip card: Optimizing + chars + time stay on one line on narrow phones */
@media (max-width:380px){.cc-tag{font-size:10.5px;padding:5px 7px}.cc-tag.busy{gap:4px}.cc-meta{gap:4px}.cc-act{width:36px;height:36px}.cc-acts{gap:5px}}

/* ---------- sign up (v1.0.25) ---------- */
.su{--su-fg:var(--foreground,#241a33);--su-mut:#8a7c98;--su-card:rgba(255,255,255,.88);--su-bd:rgba(255,255,255,.9);--su-line:rgba(120,90,140,.16);--su-tint:rgba(150,110,180,.09);--su-sh:0 8px 28px rgba(150,110,170,.18);
  position:relative;min-height:100vh;max-width:30rem;margin:0 auto;padding:36px 24px 28px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.dark .su{--su-fg:#f6f1fb;--su-mut:#a99bbb;--su-card:rgba(36,29,52,.9);--su-bd:rgba(255,255,255,.09);--su-line:rgba(255,255,255,.14);--su-tint:rgba(255,255,255,.07);--su-sh:0 8px 28px rgba(0,0,0,.35)}
.su-logo{position:relative;width:104px;height:104px;border-radius:32px;background:var(--gradient-brand);display:grid;place-items:center;box-shadow:0 18px 40px color-mix(in srgb,var(--a1) 38%,transparent)}
.su-logo::after{content:"";position:absolute;inset:-9px;border-radius:40px;border:2px solid var(--a1);opacity:.35;animation:su-ring 2.6s ease-out infinite}
@keyframes su-ring{from{transform:scale(.94);opacity:.5}to{transform:scale(1.12);opacity:0}}
.su-bars{display:flex;align-items:center;gap:5px;height:44px}
.su-bars i{width:6px;border-radius:9px;background:#fff;height:var(--h);animation:su-eq 1s ease-in-out infinite alternate;animation-delay:calc(var(--n)*-110ms)}
@keyframes su-eq{from{transform:scaleY(.4)}to{transform:scaleY(1)}}
.su-h1{font-size:30px;line-height:1.15;font-weight:800;letter-spacing:-.025em;margin:30px 0 0;color:var(--su-fg)}
.su-sub{font-size:14.5px;font-weight:500;color:var(--su-mut);margin:10px 0 0;line-height:1.5;max-width:22rem}
.su-card{width:100%;margin-top:30px;padding:20px;border-radius:28px;background:var(--su-card);border:1.5px solid var(--su-bd);box-shadow:var(--su-sh);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.su-g{position:relative;width:100%;height:56px;border-radius:999px;background:#fff;color:#1f1f1f;display:flex;align-items:center;justify-content:center;gap:12px;font-size:16px;font-weight:700;border:1px solid rgba(0,0,0,.1);box-shadow:0 4px 14px rgba(0,0,0,.1);cursor:pointer;transition:transform .15s var(--ease-ios,ease)}
.su-g:active{transform:scale(.97)}
.su-g .sp{display:none;width:22px;height:22px;border-radius:50%;border:3px solid rgba(0,0,0,.12);border-top-color:#4285f4;animation:su-spin .7s linear infinite}
.su-g.load .gl,.su-g.load .t1{display:none}.su-g.load .sp{display:block}.su-g .t2{display:none}.su-g.load .t2{display:inline}
@keyframes su-spin{to{transform:rotate(360deg)}}
.su-or{display:flex;align-items:center;gap:12px;margin:18px 0;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--su-mut)}
.su-or::before,.su-or::after{content:"";flex:1;height:1px;background:var(--su-line)}
.su-alt{width:100%;height:50px;border-radius:999px;display:flex;align-items:center;justify-content:center;gap:9px;font-size:14.5px;font-weight:700;color:var(--su-fg);background:var(--su-tint);border:1px solid var(--su-line)}
.su-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:22px}
.su-chips span{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;padding:7px 12px;border-radius:999px;background:var(--su-card);border:1px solid var(--su-bd);color:var(--su-mut)}
.su-chips svg{color:var(--a1)}
.su-legal{margin:22px 0 0;font-size:12px;font-weight:500;color:var(--su-mut);line-height:1.6;max-width:20rem}
.su-legal a{font-weight:700;color:var(--su-fg);text-decoration:underline;text-underline-offset:3px}
.su .rise{animation-delay:calc(var(--i,0)*80ms)}

/* ---- v1.0.27: Add-access-code card — smooth, state-driven animation. Each animation runs once (no infinite loops except the tiny loading spinner). ---- */
.acx{margin-top:12px}
.acx-field,.acx-btn,.acx-hint{animation:rise-in .55s var(--ease-ios) backwards}
.acx-btn{animation-delay:70ms}.acx-hint{animation-delay:130ms}
.acx-field{position:relative;display:flex;align-items:center;gap:8px;padding:3px 6px 3px 16px;border-radius:999px;overflow:hidden;background:var(--glass-bg-strong);border:1px solid color-mix(in oklab,var(--foreground) 10%,transparent);box-shadow:var(--glass-shadow);transition:box-shadow .35s var(--ease-ios),border-color .35s var(--ease-ios),transform .35s var(--ease-spring),opacity .3s}
.acx-field:focus-within{transform:translateY(-1px);border-color:color-mix(in oklab,var(--a1) 55%,transparent);box-shadow:0 0 0 4px color-mix(in oklab,var(--a1) 15%,transparent),var(--glass-shadow-lg)}
.acx-key{flex:none;display:grid;color:var(--muted-foreground);transition:color .3s var(--ease-ios),transform .45s var(--ease-spring)}
.acx-field:focus-within .acx-key,.acx-field.has .acx-key{color:var(--a1)}
.acx-field:focus-within .acx-key{transform:rotate(-14deg) scale(1.1)}
.acx-input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:inherit;padding:12px 0;font:600 16px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.14em;text-transform:uppercase}
.acx-input::placeholder{color:var(--muted-foreground);opacity:.55;font-weight:500;text-transform:none}
.acx-paste{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:999px;color:var(--a1);background:color-mix(in oklab,var(--a1) 11%,transparent);transition:transform var(--dur-micro) var(--ease-spring),background .3s,opacity .3s,width .3s var(--ease-ios),margin .3s var(--ease-ios)}
.acx-paste:active{transform:scale(.9)}
.acx-field.has .acx-paste{width:0;margin-left:-8px;opacity:0;pointer-events:none;overflow:hidden}
.acx-bar{position:absolute;left:0;right:0;bottom:0;height:2.5px;pointer-events:none}
.acx-bar b{display:block;height:100%;transform:scaleX(var(--p,0));transform-origin:left;background:var(--gradient-brand);transition:transform .4s var(--ease-ios)}
.acx-errwrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .38s var(--ease-ios)}
.acx-errwrap>div{overflow:hidden;min-height:0}
.acx-err{margin:0;padding:10px 8px 0;font-size:13px;font-weight:600;color:var(--destructive);opacity:0;transform:translateY(-6px);transition:opacity .3s var(--ease-ios),transform .38s var(--ease-ios)}
.acx[data-state=error] .acx-errwrap{grid-template-rows:1fr}
.acx[data-state=error] .acx-err{opacity:1;transform:none}
.acx[data-state=error] .acx-field{border-color:color-mix(in oklab,var(--destructive) 55%,transparent);box-shadow:0 0 0 4px color-mix(in oklab,var(--destructive) 12%,transparent)}
.acx[data-state=error] .acx-bar b{background:var(--destructive)}
.acx[data-state=loading] .acx-field{opacity:.75}
.acx[data-state=loading] .acx-bar b{transform:scaleX(1);background:linear-gradient(100deg,var(--a1),#fff 50%,var(--a2)) 0 0/250% 100%;animation:shimmer-slide 1.1s linear infinite}
.acx[data-state=ok] .acx-field{border-color:color-mix(in oklab,var(--success) 60%,transparent);box-shadow:0 0 0 4px color-mix(in oklab,var(--success) 14%,transparent)}
.acx[data-state=ok] .acx-bar b{transform:scaleX(1);background:var(--success)}
.acx[data-state=ok] .acx-key{color:var(--success)}
/* button: label / spinner / check live in the same grid cell and cross-fade */
.btn-primary.acx-btn{position:relative;overflow:hidden;display:grid;place-items:center;width:100%;margin-top:12px;padding:14px 0;font-size:15px;transition:opacity .35s var(--ease-ios),transform var(--dur-micro) var(--ease-spring),box-shadow .4s var(--ease-ios)}
.acx-btn>*{grid-area:1/1;position:relative;z-index:1;display:inline-flex;align-items:center;gap:8px;transition:opacity .28s var(--ease-ios),transform .4s var(--ease-ios)}
.acx-spin,.acx-ok{opacity:0;transform:scale(.6)}
.acx-spin i{width:18px;height:18px;border-radius:50%;border:2.5px solid rgba(255,255,255,.35);border-top-color:#fff;animation:spin .7s linear infinite}
.acx-btn::before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,oklch(.72 .15 165),oklch(.7 .13 195));opacity:0;transition:opacity .45s var(--ease-ios)}
.acx-btn.ready:not(:disabled)::after{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.5) 50%,transparent 70%);transform:translateX(-130%);animation:acx-sheen .95s var(--ease-ios) .05s 1 forwards;pointer-events:none}
@keyframes acx-sheen{to{transform:translateX(130%)}}
.acx[data-state=loading] .acx-btn,.acx[data-state=ok] .acx-btn{opacity:1;box-shadow:0 10px 26px color-mix(in oklab,var(--a1) 28%,transparent)}
.acx[data-state=loading] .acx-lbl,.acx[data-state=ok] .acx-lbl{opacity:0;transform:translateY(-10px)}
.acx[data-state=loading] .acx-spin{opacity:1;transform:none}
.acx[data-state=ok] .acx-btn::before{opacity:1}
.acx[data-state=ok] .acx-btn{box-shadow:0 10px 26px color-mix(in oklab,var(--success) 38%,transparent)}
.acx[data-state=ok] .acx-ok{opacity:1;transform:none;animation:pop-spring .55s var(--ease-spring)}
.acx-hint{margin:12px 0 0;text-align:center;font-size:12px;color:var(--muted-foreground);transition:opacity .2s,transform .2s}
/* ticket top reacts when the code is accepted */
.ac-pill b{transition:background .4s var(--ease-ios)}
.ac-ico{position:relative}
.ac-ico.burst::after{content:"";position:absolute;inset:0;border-radius:inherit;border:2px solid rgba(255,255,255,.8);animation:ring-out .9s var(--ease-ios) 1 forwards}
@media (prefers-reduced-motion:reduce){.acx-field,.acx-btn,.acx-hint{animation:none}.acx-btn.ready::after{display:none}}

/* ---- v1.0.29: Home "Add your access code" card — one-shot entrance (spring rise → icon pop → text → button), key turn, ring pulse, soft sweep + button sheen. Nothing loops forever. ---- */
.glass-card.ctac{position:relative;overflow:hidden;animation:ctac-in .8s var(--ease-ios) both}
@keyframes ctac-in{from{opacity:0;transform:translateY(24px) scale(.96)}to{opacity:1;transform:none}}
@keyframes ctac-pop{0%{opacity:0;transform:scale(.4) rotate(-40deg)}60%{opacity:1;transform:scale(1.14) rotate(6deg)}100%{opacity:1;transform:none}}
@keyframes ctac-fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes ctac-turn{0%,100%{transform:rotate(0)}25%{transform:rotate(-26deg)}55%{transform:rotate(18deg)}80%{transform:rotate(-7deg)}}
@keyframes ctac-sweep{to{transform:translateX(130%)}}
@keyframes ctac-nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}
.ctac::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 35%,color-mix(in oklab,var(--a1) 13%,transparent) 50%,transparent 65%);transform:translateX(-130%);animation:ctac-sweep 1.5s var(--ease-ios) .85s 1 forwards}
.ctac-ico{position:relative;flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:14px;color:#fff;background:var(--gradient-brand);box-shadow:0 8px 18px color-mix(in oklab,var(--a1) 30%,transparent);animation:ctac-pop .7s var(--ease-spring) .3s both}
.ctac-ico svg{animation:ctac-turn 1s var(--ease-ios) 1.15s 1}
.ctac-ring{position:absolute;inset:0;border-radius:inherit;border:2px solid color-mix(in oklab,var(--a1) 60%,transparent);opacity:0;pointer-events:none;animation:ring-out 1.3s var(--ease-ios) 1.15s 2}
.ctac-txt>p{animation:ctac-fade .55s var(--ease-ios) .45s both}.ctac-txt>p+p{animation-delay:.53s}
.btn-primary.ctac-btn{position:relative;overflow:hidden;animation:ctac-fade .55s var(--ease-ios) .62s both;transition:transform var(--dur-micro) var(--ease-spring),box-shadow .3s var(--ease-ios)}
.ctac-btn::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.5) 50%,transparent 70%);transform:translateX(-130%);animation:ctac-sweep 1s var(--ease-ios) 1.3s 1 forwards}
.ctac-btn svg{transition:transform .35s var(--ease-spring);animation:ctac-nudge .8s var(--ease-ios) 2.3s 2}
.ctac-btn:hover svg,.ctac-btn:active svg{transform:translateX(5px);animation:none}
.ctac-btn:active{box-shadow:0 4px 12px color-mix(in oklab,var(--a1) 30%,transparent)}
@media (prefers-reduced-motion:reduce){.glass-card.ctac,.ctac::before,.ctac-ico,.ctac-ico svg,.ctac-ring,.ctac-txt>p,.btn-primary.ctac-btn,.ctac-btn::after,.ctac-btn svg{animation:none!important}}

/* ---- v1.0.31: Google profile photo on the Home monogram and the Profile avatar. Fades in over the initials/icon; if it fails to load the JS removes it. ---- */
.monogram,.pavatar{position:relative;overflow:hidden}
.gpic{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit;background:var(--glass-bg-strong);animation:gpic-in .5s var(--ease-ios) both}
@keyframes gpic-in{from{opacity:0;transform:scale(1.12)}to{opacity:1;transform:none}}
.monogram:has(.gpic){box-shadow:0 0 0 2px var(--glass-bg-strong),0 8px 20px color-mix(in oklab,var(--a1) 30%,transparent)}
@media (prefers-reduced-motion:reduce){.gpic{animation:none}}

/* ===== v1.0.35 admin — transform/opacity only, no blur, rows are layout-contained (fast scroll) ===== */
.dock{background:var(--popover)}
.adm-box{display:flex;align-items:center;gap:14px;padding:14px 16px}
.adm-ic{display:grid;place-items:center;width:46px;height:46px;border-radius:16px;color:#fff;background:var(--gradient-brand);flex:none}
.adm-srch{margin:0 0 12px}.adm-srch input{width:100%;min-width:0}.adm-page{padding-bottom:24px}.adm-h{display:flex;justify-content:space-between;align-items:center;margin:24px 2px 10px}
.adm-chips.bleed{display:flex;gap:8px;scroll-snap-type:x proximity;margin-inline:-16px;padding:2px 16px 4px;scroll-padding-inline:16px;max-width:none}
.adm-f .adm-chips.bleed{margin-inline:-20px;padding-inline:20px;scroll-padding-inline:20px}
.adm-page{overflow-x:clip}.adm-page .glass-card{overflow:hidden}
#adm-list,#adm-out{contain:layout style}
.adm-chip{flex:none;scroll-snap-align:start;display:flex;flex-direction:column;align-items:flex-start;padding:10px 14px;border-radius:18px;font-size:13px;font-weight:700;background:var(--glass-bg-strong);border:1px solid var(--glass-border);transition:transform var(--dur-micro) var(--ease-spring),background-color .22s,color .22s}
.adm-chip small{font-size:11px;font-weight:600;opacity:.65;margin-top:1px}.adm-chip.on{background:var(--gradient-brand);color:#fff;border-color:transparent}
.adm-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.adm-grid label,.adm-f{display:flex;flex-direction:column;gap:5px;min-width:0;font-size:11px;font-weight:600;color:var(--muted-foreground)}
.adm-grid .field,.adm-f .field{width:100%;padding:12px 14px;border-radius:16px;font-weight:700;font-size:15px;color:var(--foreground);background:color-mix(in oklab,var(--foreground) 5%,transparent);border:1px solid var(--glass-border)}
.adm-f{margin-top:10px}.adm-2{display:grid;grid-template-columns:1fr 1fr;gap:10px}.adm-f .field{padding:10px 14px}
.adm-ro{padding:11px 14px;border-radius:16px;font-size:15px;font-weight:700;color:var(--foreground);background:color-mix(in oklab,var(--foreground) 4%,transparent);border:1px dashed var(--glass-border);transition:color .2s}
.adm-dev{display:flex;align-items:center;justify-content:space-between;margin-top:14px;padding:12px 14px;border-radius:16px;font-size:14px;font-weight:600;background:color-mix(in oklab,var(--foreground) 5%,transparent)}
.adm-dev small{font-size:11px;font-weight:500;color:var(--muted-foreground)}.adm-dev b{background:var(--gradient-brand);color:#fff;border-radius:999px;padding:3px 12px;font-size:13px}
.adm-sw{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px;padding:12px 14px;border-radius:16px;font-size:14px;font-weight:600;cursor:pointer;user-select:none;background:color-mix(in oklab,var(--foreground) 5%,transparent)}
.adm-sw small{display:block;font-size:11px;font-weight:500;color:var(--muted-foreground);margin-top:1px}
.adm-tg{position:relative;flex:none;width:50px;height:30px;border-radius:999px;background:rgba(150,110,170,.28);transition:background-color .25s}
.adm-tg::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.25);transition:transform .25s var(--ease-ios)}
.adm-sw.on .adm-tg{background:var(--a1)}.adm-sw.on .adm-tg::after{transform:translateX(20px)}
.adm-go{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:50px;margin-top:16px;font-size:15px}
.adm-go.ld{opacity:.7;pointer-events:none}.adm-go.ld span{opacity:0}
.adm-go.ld::after{content:"";position:absolute;width:20px;height:20px;border-radius:50%;border:2.5px solid rgba(255,255,255,.35);border-top-color:#fff;animation:adm-sp .7s linear infinite}
@keyframes adm-sp{to{transform:rotate(360deg)}}
.adm-row{display:flex;align-items:center;gap:10px;padding:13px 14px;margin-bottom:8px;border-radius:22px;background:var(--glass-bg);border:1px solid var(--glass-border);contain:layout style paint;cursor:pointer;transition:transform var(--dur-micro) var(--ease-ios)}
.adm-row:active{transform:scale(.985)}.adm-row.a{animation:rise-in var(--dur-card) var(--ease-ios) both}
.adm-row p{margin:0}.adm-m{margin-top:2px!important}
.adm-code{font:700 14px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.adm-tag{display:inline-block;margin-left:6px;padding:2px 8px;border-radius:999px;font:800 10.5px var(--font-sans,inherit);vertical-align:1px;color:#1f9d63;background:rgba(31,157,99,.12)}
.adm-mt{height:5px;margin-top:7px;border-radius:9px;overflow:hidden;background:rgba(150,110,170,.15)}
.adm-mt i{display:block;width:100%;height:100%;border-radius:9px;transform-origin:left;background:var(--gradient-brand)}
.adm-cp{width:38px;height:38px;flex:none}
.adm-row.ex{background:rgba(229,72,77,.1);border-color:rgba(229,72,77,.35)}
.adm-row.ex .adm-code{color:#e5484d}.adm-row.ex .adm-tag{color:#e5484d;background:rgba(229,72,77,.15)}.adm-row.ex .adm-mt i{background:#e5484d}
.adm-del{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:46px;margin-top:10px;border-radius:999px;font-size:14px;font-weight:700;text-align:center;color:#e5484d;background:rgba(229,72,77,.1);transition:transform var(--dur-micro) var(--ease-ios),background-color .2s,color .2s}
.adm-del.arm{background:#e5484d;color:#fff}

/* ---- admin hub + Convertio API Manager (v1.0.38) ---- */
.cv-menu{padding:6px 16px;overflow:hidden}
.cv-lr{display:flex;align-items:center;gap:14px;width:100%;padding:14px 0;border-top:1px solid var(--glass-border);color:inherit;text-decoration:none;transition:transform var(--dur-micro) var(--ease-ios)}
.cv-lr:first-child{border-top:0}.cv-lr b,.cv-lr small{margin:0}
.cv-soon{font-size:10.5px;font-weight:800;color:var(--muted-foreground);background:color-mix(in oklab,var(--foreground) 7%,transparent);border-radius:999px;padding:3px 9px}
.cv-sum{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cv-st{padding:14px 16px;border-radius:24px}.cv-st p{margin:0}
.cv-st .n{font-size:24px;font-weight:800;line-height:1.1}.cv-st .n.ok{color:#1f9d63}
.cv-st .l{font-size:11.5px;font-weight:600;color:var(--muted-foreground);margin-top:3px}
.cv-note{display:flex;gap:10px;align-items:flex-start;margin-top:12px;padding:12px 14px;border-radius:18px;font-size:12px;line-height:1.45;color:var(--muted-foreground);background:color-mix(in oklab,var(--foreground) 5%,transparent)}
.cv-note svg{flex:none;margin-top:1px}
.cv-k{padding:14px 16px;margin-bottom:10px;border-radius:26px;background:var(--glass-bg);border:1px solid var(--glass-border);cursor:pointer;contain:layout style paint;transition:transform var(--dur-micro) var(--ease-ios)}
.cv-k:active{transform:scale(.985)}.cv-k.a{animation:rise-in var(--dur-card) var(--ease-ios) both}
.cv-k.run{border-color:rgba(31,157,99,.45);box-shadow:0 0 0 1px rgba(31,157,99,.25)}
.cv-k.lim{border-color:rgba(217,138,0,.4)}.cv-k.off{background:rgba(229,72,77,.1);border-color:rgba(229,72,77,.35)}
.cv-kh{display:flex;align-items:center;gap:10px}.cv-kh>div{flex:1;min-width:0}.cv-kh p{margin:0}
.cv-nm{font-weight:800;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cv-ky{margin-top:2px!important;font:600 12px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--muted-foreground)}
.cv-tag{display:inline-flex;align-items:center;gap:6px;flex:none;font-size:11px;font-weight:800;padding:4px 10px;border-radius:999px}
.cv-tag i{width:7px;height:7px;border-radius:50%;background:currentColor}
.cv-tag.t-run{color:#1f9d63;background:rgba(31,157,99,.12)}.cv-tag.t-run i{animation:cv-pl 1.6s ease-in-out infinite}
.cv-tag.t-sb{color:var(--muted-foreground);background:color-mix(in oklab,var(--foreground) 7%,transparent)}
.cv-tag.t-lim{color:#d98a00;background:rgba(217,138,0,.12)}.cv-tag.t-off{color:#e5484d;background:rgba(229,72,77,.15)}
@keyframes cv-pl{50%{opacity:.25}}
.cv-bar{height:7px;margin-top:12px;border-radius:9px;overflow:hidden;background:rgba(150,110,170,.15)}
.cv-bar i{display:block;width:100%;height:100%;border-radius:9px;transform-origin:left;background:var(--gradient-brand);transition:transform .5s var(--ease-ios)}
.cv-k.lim .cv-bar i{background:#d98a00}.cv-k.off .cv-bar i{background:#e5484d}
.cv-bl{display:flex;justify-content:space-between;margin-top:6px;font-size:11.5px;font-weight:600;color:var(--muted-foreground)}
.cv-g{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.cv-g div{padding:9px 10px;border-radius:14px;background:color-mix(in oklab,var(--foreground) 5%,transparent)}
.cv-g b{display:block;font-size:15px}.cv-g small{font-size:10.5px;font-weight:600;color:var(--muted-foreground)}
.cv-ft{display:flex;justify-content:space-between;gap:8px;margin-top:10px;font-size:11.5px;color:var(--muted-foreground)}
.cv-er{color:#e5484d;font-weight:600}
.cv-res{margin-top:12px;padding:11px 14px;border-radius:16px;font-size:13px;font-weight:600;line-height:1.4}
.cv-res.ok{color:#1f9d63;background:rgba(31,157,99,.12)}.cv-res.bad{color:#e5484d;background:rgba(229,72,77,.12)}
.cv-spin svg{animation:adm-sp .6s linear}

/* ---- Groq API Manager (v1.0.40) + scroll performance ---- */
.gq-ban{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:24px;margin-bottom:10px;transition:background-color .4s,border-color .4s}
.gq-ban .gq-bi{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;flex:none;color:#fff;background:var(--gradient-brand);transition:background .4s}
.gq-ban.on{border-color:rgba(31,157,99,.4)}.gq-ban.on .gq-bi{background:#1f9d63}
.gq-ban.off{background:rgba(229,72,77,.1);border-color:rgba(229,72,77,.35)}.gq-ban.off .gq-bi{background:#e5484d}
.gq-ban b,.gq-ban small{margin:0}
.gq-mdl{flex:none;max-width:42%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:700 11px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--muted-foreground);background:color-mix(in oklab,var(--foreground) 6%,transparent);border-radius:999px;padding:5px 10px}
.gq-m{margin-top:12px}
.gq-mh{display:flex;justify-content:space-between;gap:8px;font-size:11.5px;font-weight:700;margin-bottom:6px}
.gq-mh span:last-child{font-weight:600;color:var(--muted-foreground);font-variant-numeric:tabular-nums;white-space:nowrap}
.cv-bar.t i{background:linear-gradient(90deg,#5fd3d6,#b68df3)}
.cv-bar.w i{background:#d98a00}.cv-bar.z i{background:#e5484d}.cv-bar.e i{background:transparent}
.cv-k.run .cv-bar.t i{background:linear-gradient(90deg,#5fd3d6,#b68df3)}
.cv-k.run .cv-bar.w i,.cv-k.lim .cv-bar.w i{background:#d98a00}.cv-k.lim .cv-bar.t i{background:linear-gradient(90deg,#5fd3d6,#b68df3)}
/* fast, jank-free scrolling: off-screen cards/rows are skipped by the browser until they come near the viewport */
.cv-k{content-visibility:auto;contain-intrinsic-size:auto 270px}
.gq-k{contain-intrinsic-size:auto 300px}
.adm-row{content-visibility:auto;contain-intrinsic-size:auto 76px}
.cv-bar i,.adm-mt i{will-change:auto}

/* ---- floating bubble page (v1.0.43) — light on purpose: no backdrop-filter, transform/opacity only ---- */
.bb-page{padding-bottom:40px}
.bb-page .glass-card,.bb-page .glass-tile{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--glass-bg-strong);box-shadow:0 2px 10px rgba(150,110,170,.12)}
.bb-page .row-btn+.row-btn{border-top:1px solid color-mix(in oklab,var(--foreground) 9%,transparent)}
.bb-stage{position:relative;height:250px;overflow:hidden}
.bb-fake{position:absolute;inset:0;padding:20px;display:flex;flex-direction:column;gap:12px;opacity:.55}
.bb-fake i{display:block;height:10px;border-radius:9px;background:color-mix(in oklab,var(--foreground) 9%,transparent)}
.bb-fake i:nth-child(1){width:40%}.bb-fake i:nth-child(2){width:66%}.bb-fake i:nth-child(3){width:88%}.bb-fake i:nth-child(4){width:52%}
.bb-live{position:absolute;top:14px;right:14px;z-index:4;display:flex;align-items:center;gap:6px;padding:6px 11px;border-radius:99px;font-size:11px;font-weight:700;background:var(--popover);border:1px solid var(--glass-border)}
.bb-live b{width:7px;height:7px;border-radius:50%;background:var(--muted-foreground)}
.bb-stage.on .bb-live b{background:var(--success)}
.bb-orb{position:absolute;top:52px;left:12px;z-index:3;width:var(--sz,64px);height:var(--sz,64px);border-radius:50%;background:#fff;box-shadow:0 0 0 3px #fff,0 12px 28px rgba(200,90,190,.5);opacity:0;transform:none}
.bb-stage.on .bb-orb{opacity:var(--op,1)}
.bb-orb,.bb-orb *,.bb-orb::before,.bb-orb::after{animation:none!important;transition:none!important}
.bb-orb img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover}
.bb-mini{position:absolute;left:50%;bottom:14px;z-index:2;width:80%;padding:10px 14px 12px;border-radius:20px;background:var(--popover);border:1px solid var(--glass-border);transform:translateX(-50%) scale(.95);opacity:.5;transition:transform .5s var(--ease-spring),opacity .3s}
.bb-stage.on .bb-mini{transform:translateX(-50%);opacity:1}
.bb-ic{display:flex;justify-content:space-between;padding:0 6px 8px;color:var(--muted-foreground);border-bottom:1px solid color-mix(in oklab,var(--foreground) 10%,transparent)}
.bb-mrow{display:flex;align-items:center;gap:10px;padding-top:9px}
.bb-mrow b{flex:1;min-width:0;font-size:13px;color:#e8920f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bb-mp{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;color:#fff;background:var(--gradient-brand)}
.bb-mp[hidden]{display:none}
.bb-row{display:flex;align-items:center;gap:12px;padding:12px;cursor:pointer;transition:transform .24s var(--ease-ios),opacity .24s}
.bb-row.cur{box-shadow:inset 0 0 0 2px var(--a1)}
.bb-row.leave{opacity:0;transform:translateX(36px)}
.bb-pl{display:grid;place-items:center;flex:none;width:42px;height:42px;border-radius:50%;color:#fff;background:var(--gradient-brand)}
.bb-x{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;color:var(--muted-foreground)}
.bb-inline .btn-primary{width:100%;height:56px;font-size:16px}
.bb-inline .btn-primary.stop{background:linear-gradient(120deg,#3a2a52,#2a2038)}
.bb-ol{margin:4px 0 8px;padding-left:20px;line-height:1.8}

/* ---- floating bubble: Add audio + Bubble style — 1:1 with the UI preview ---- */
.bb2-seg{position:relative;display:grid;grid-template-columns:repeat(var(--n),1fr);padding:4px;border-radius:18px;background:var(--glass-bg-strong);border:1px solid var(--glass-border);box-shadow:0 2px 10px rgba(150,110,170,.12)}
.bb2-seg::before{content:"";position:absolute;top:4px;bottom:4px;left:4px;width:calc((100% - 8px)/var(--n));border-radius:14px;background:var(--gradient-brand);transform:translateX(calc(var(--k,0)*100%));transition:transform .45s var(--ease-spring)}
.bb2-seg button{position:relative;z-index:1;height:40px;border-radius:14px;font-weight:700;font-size:14px;color:var(--muted-foreground);display:flex;align-items:center;justify-content:center;gap:7px;transition:color .3s}
.bb2-seg button.on{color:#fff}
.bb2-seg.w150{width:150px;flex:none}.bb2-seg.w170{width:170px;flex:none}
.bb2-pane{display:none;margin-top:12px}
.bb2-pane.on{display:block;animation:rise-in .45s var(--ease-ios) both}
.bb2-drop{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:26px 16px;border:2px dashed color-mix(in srgb,var(--a1) 55%,transparent);border-radius:24px;background:color-mix(in srgb,var(--a1) 6%,transparent);cursor:pointer;transition:transform .25s var(--ease-spring)}
.bb2-drop:active{transform:scale(.97)}
.bb2-big{width:56px;height:56px;border-radius:50%;background:var(--gradient-brand);color:#fff;display:grid;place-items:center;box-shadow:0 8px 20px rgba(200,90,190,.4)}
.bb2-drop b{font-size:16px}.bb2-drop>span:last-child{font-size:12px;color:var(--muted-foreground)}
.bb2-vgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.bb2-vc{display:flex;align-items:center;gap:10px;padding:12px;text-align:left;border-radius:20px;background:var(--glass-bg-strong);border:1px solid var(--glass-border);box-shadow:0 2px 10px rgba(150,110,170,.12);min-width:0}
.bb2-av{width:38px;height:38px;border-radius:50%;background:var(--gradient-brand);color:#fff;display:grid;place-items:center;font-weight:800;flex:none}
.bb2-vt{flex:1;min-width:0}.bb2-vt b{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bb2-vt small{display:block;color:var(--muted-foreground);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bb2-pl{color:var(--a1);display:grid;flex:none}
.bb2-empty{margin:0;text-align:center;padding:26px;color:var(--muted-foreground);font-size:13px}
.bb2-set{padding:6px 16px}
.bb2-rg{display:block;padding:14px 0 16px;border-bottom:1px solid color-mix(in oklab,var(--foreground) 9%,transparent)}
.bb2-h{display:flex;justify-content:space-between;margin-bottom:8px;font-weight:700;font-size:14px}.bb2-h span{color:var(--a1)}
.bb2-l{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:14px 0;text-align:left;border-bottom:1px solid color-mix(in oklab,var(--foreground) 9%,transparent)}
.bb2-l:last-child{border-bottom:0}
.bb2-l>div:first-child{flex:1;min-width:0}.bb2-l b{display:block;font-size:14px}.bb2-l small{color:var(--muted-foreground);font-size:12px}

.bb-cd{position:absolute;inset:0;border-radius:50%;display:grid;place-items:center;background:rgba(20,12,30,.55);color:#fff;font-weight:800;font-size:calc(var(--sz,64px)*.45)}
.bb-cd[hidden]{display:none}
.bb-n{font-size:15px;font-weight:800;line-height:1}

/* ---- notifications (v1.0.47) — transform/opacity only, no blur on lists, off-screen rows are skipped ---- */
.nt-it{content-visibility:auto;contain-intrinsic-size:auto 88px;position:relative;display:flex;gap:12px;width:100%;padding:12px;text-align:left;border-radius:18px}
.nt-it.un::after{content:"";position:absolute;top:15px;right:12px;width:9px;height:9px;border-radius:50%;background:var(--a1)}
.nt-it.un b{padding-right:18px}
.nt-ic{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:14px;color:#fff;background:var(--gradient-brand)}
.nt-ic.sys{background:color-mix(in oklab,var(--a1) 14%,transparent);color:var(--a1)}
.nt-it b,.nt-row b{display:block;font-size:14px}
.nt-it p,.nt-row p{margin:2px 0 0;font-size:13px;color:var(--muted-foreground);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}
.nt-it small,.nt-row small{font-size:11px;font-weight:600;color:var(--muted-foreground)}
.nt-form{padding:16px}
.nt-f{display:block;margin-bottom:14px}.nt-f>span{display:flex;justify-content:space-between;font-size:13px;font-weight:700;margin-bottom:7px}.nt-f small{font-weight:600;color:var(--muted-foreground)}
.nt-in{width:100%;padding:13px 15px;border-radius:16px;background:color-mix(in oklab,var(--foreground) 5%,transparent);border:1.5px solid transparent;outline:0;color:inherit;font:inherit;transition:border-color .25s,background .25s}
.nt-in:focus{border-color:var(--a1);background:var(--glass-bg-strong)}
textarea.nt-in{min-height:150px;resize:none;line-height:1.6;display:block}
.nt-aud{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:16px;background:color-mix(in oklab,var(--a1) 8%,transparent);font-size:12.5px;color:var(--muted-foreground);margin-bottom:14px}.nt-aud b{color:var(--foreground)}.nt-aud svg{color:var(--a1);flex:none}
.nt-form .btn-primary:disabled{opacity:.45;filter:saturate(.6);box-shadow:none}
.nt-pv{display:none;margin-top:14px;padding:12px 14px;border-radius:18px;border:1.5px dashed color-mix(in srgb,var(--a1) 45%,transparent)}.nt-pv.on{display:block}
.nt-pv>small{font-size:11px;font-weight:700;color:var(--a1);text-transform:uppercase}
.nt-row{content-visibility:auto;contain-intrinsic-size:auto 96px;display:flex;gap:12px;align-items:center;padding:12px 6px 12px 12px;transition:transform .24s var(--ease-ios),opacity .24s}
.nt-row.new{animation:nt-pop .45s var(--ease-spring) both}@keyframes nt-pop{from{opacity:0;transform:scale(.9) translateY(-10px)}}
.nt-row.leave{opacity:0;transform:translateX(40px)}
.nt-del{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;color:var(--muted-foreground)}
.nt-del.arm{background:rgba(244,82,77,.15);color:#f4524d}
@media (prefers-reduced-motion:reduce){.nt-row{transition:none}.nt-row.new{animation:none}}

/* ---- notifications page + detail (v1.0.48) — fast scroll: solid cards, no blur, off-screen rows skipped, no per-row animation ---- */
.nt-page{padding-bottom:48px}
.nt-hero{position:relative;overflow:hidden;border-radius:26px;padding:20px;color:#fff;background:var(--gradient-brand);box-shadow:0 12px 28px rgba(200,90,190,.35);contain:paint}
.nt-hero::after{content:"";position:absolute;right:-30px;top:-40px;width:150px;height:150px;border-radius:50%;background:rgba(255,255,255,.16)}
.nt-hero small{display:block;font-weight:700;opacity:.85;font-size:12px;text-transform:uppercase;letter-spacing:.05em}
.nt-hero b{display:block;font-size:30px;font-weight:800;line-height:1.1;margin:4px 0 2px}.nt-hero>span:last-child{font-size:13px;opacity:.9}
.nt-hi{position:absolute;right:22px;top:22px;z-index:1;width:48px;height:48px;border-radius:16px;background:rgba(255,255,255,.22);display:grid;place-items:center}
.nt-tabs{margin:16px 0 4px}
.nt-n{font-style:normal;font-size:11px;min-width:20px;height:20px;padding:0 5px;border-radius:99px;display:grid;place-items:center;background:color-mix(in srgb,currentColor 18%,transparent)}
.nt-gl{margin:20px 4px 8px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted-foreground)}
.nt-c{content-visibility:auto;contain-intrinsic-size:auto 100px;contain:layout paint style;position:relative;display:flex;gap:13px;width:100%;padding:14px;margin-bottom:10px;text-align:left;border-radius:22px;background:var(--glass-bg-strong);border:1px solid var(--glass-border);box-shadow:0 2px 10px rgba(150,110,170,.12)}
.nt-c:active{background:color-mix(in srgb,var(--a1) 8%,var(--glass-bg-strong))}
.nt-c.un{border-color:color-mix(in srgb,var(--a1) 45%,transparent);background:color-mix(in srgb,var(--a1) 5%,var(--glass-bg-strong))}
.nt-c .nt-ic{width:44px;height:44px;border-radius:15px;background:color-mix(in srgb,var(--a1) 13%,transparent);color:var(--a1)}
.nt-c.un .nt-ic{background:var(--gradient-brand);color:#fff;box-shadow:0 6px 14px rgba(200,90,190,.3)}
.nt-c b{display:block;font-size:15px;padding-right:18px;word-break:break-word}
.nt-c:not(.un) b{font-weight:700;opacity:.82}
.nt-c p{margin:3px 0 6px;font-size:13px;line-height:1.5;color:var(--muted-foreground);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}
.nt-c small{font-size:11px;font-weight:600;color:var(--muted-foreground)}
.nt-c.un::after{content:"";position:absolute;top:16px;right:14px;width:10px;height:10px;border-radius:50%;background:var(--a1);box-shadow:0 0 0 4px color-mix(in srgb,var(--a1) 20%,transparent)}
.nt-empty{text-align:center;padding:44px 20px;color:var(--muted-foreground);font-size:14px}
.nt-empty b{display:block;color:var(--foreground);font-size:18px;margin-bottom:4px}
.nt-ok{width:84px;height:84px;margin:0 auto 14px;border-radius:50%;background:var(--gradient-brand);color:#fff;display:grid;place-items:center;box-shadow:0 14px 30px rgba(200,90,190,.35)}
.nt-dh{position:relative;overflow:hidden;border-radius:28px;padding:22px 22px 24px;color:#fff;background:var(--gradient-brand);box-shadow:0 14px 30px rgba(200,90,190,.35)}
.nt-dh::after{content:"";position:absolute;right:-40px;top:-50px;width:170px;height:170px;border-radius:50%;background:rgba(255,255,255,.15)}
.nt-tag{position:relative;z-index:1;display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;background:rgba(255,255,255,.22);padding:5px 12px;border-radius:99px}
.nt-dh h2{position:relative;z-index:1;font-size:26px;line-height:1.2;font-weight:800;margin:14px 0 12px;letter-spacing:-.01em;word-break:break-word}
.nt-meta{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:8px 14px;font-size:12.5px;font-weight:600;opacity:.92}.nt-meta span{display:flex;align-items:center;gap:5px}
.nt-body{margin-top:14px;padding:22px 22px 8px;border-radius:26px;background:var(--glass-bg-strong);border:1px solid var(--glass-border);box-shadow:0 2px 10px rgba(150,110,170,.12)}
.nt-body p{font-size:16.5px;line-height:1.85;margin:0 0 16px;word-break:break-word}
.nt-acts{display:flex;gap:10px;margin-top:14px}
.nt-acts button{flex:1;height:48px;border-radius:99px;background:var(--glass-bg-strong);border:1px solid var(--glass-border);box-shadow:0 2px 10px rgba(150,110,170,.12);font-weight:700;font-size:13.5px;display:flex;align-items:center;justify-content:center;gap:7px}
.nt-nav{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:22px}
.nt-nav button{padding:13px 14px;border-radius:20px;text-align:left;background:var(--glass-bg-strong);border:1px solid var(--glass-border);box-shadow:0 2px 10px rgba(150,110,170,.12);min-width:0}
.nt-nav button:disabled{opacity:.4;pointer-events:none}.nt-nav button:last-child{text-align:right}
.nt-nav small{display:flex;align-items:center;gap:4px;font-size:11px;font-weight:700;color:var(--a1);text-transform:uppercase}.nt-nav button:last-child small{justify-content:flex-end}
.nt-nav b{display:block;font-size:13.5px;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---- Terms + Privacy pages (v1.0.53) ---- */
.lg-page{display:flex;flex-direction:column;gap:14px;padding-bottom:40px}
.lg-hero{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:22px;border-radius:26px;background:var(--gradient-brand);color:#fff}
.lg-hero .lg-ic{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:rgba(255,255,255,.22);margin-bottom:6px}
.lg-hero b{font-size:24px;font-weight:800;line-height:1.2}
.lg-hero small{font-size:12px;font-weight:600;opacity:.85}
.lg-hero p{margin:8px 0 0;font-size:14px;line-height:1.6;opacity:.95}
.lg-sec{padding:20px 20px 8px;border-radius:24px;background:var(--glass-bg-strong);border:1px solid var(--glass-border);box-shadow:0 2px 10px rgba(150,110,170,.1)}
.lg-sec h2{display:flex;align-items:center;gap:10px;margin:0 0 12px;font-size:16.5px;font-weight:800}
.lg-sec h2 i{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--gradient-brand);color:#fff;font-size:12px;font-style:normal;font-weight:800}
.lg-sec p{margin:0 0 12px;font-size:14.5px;line-height:1.75;opacity:.88}
.lg-sec ul{margin:0 0 12px;padding-left:20px;font-size:14.5px;line-height:1.75;opacity:.88}
.lg-sec li{margin-bottom:4px}
.lg-btn{display:inline-flex;align-items:center;gap:8px;margin:0 0 14px;padding:12px 20px;border-radius:99px;background:var(--gradient-brand);color:#fff;font-weight:700;font-size:14px;text-decoration:none}
.lg-foot a{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-radius:99px;background:var(--glass-bg-strong);border:1px solid var(--glass-border);font-weight:700;font-size:14px;text-decoration:none;color:inherit}

/* ---- AI / mic / close row (v1.0.55): mic is always exactly centred, side buttons mirror each other ---- */
.ctl-row{display:grid;grid-template-columns:1fr 72px 1fr;align-items:center;column-gap:20px;width:100%;max-width:420px;margin-left:auto;margin-right:auto}
.ctl-row>:first-child{justify-self:end}
.ctl-row>:last-child{justify-self:start}
.ctl-row.hidden{display:none}

/* ---- admin: email that used a code (v1.0.56) ---- */
.adm-em{display:flex;align-items:center;gap:5px;margin:3px 0 0!important;font-size:11.5px;font-weight:600;color:var(--a1)}
.adm-em svg{flex:none}.adm-em span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.adm-own{display:flex;flex-direction:column;gap:2px;word-break:break-all}.adm-own b{font-weight:700}.adm-own small{font-size:11.5px;opacity:.7}

/* ---- Model picker + Sound Tag (v1.0.58) ---- */
.tool-btn[hidden]{display:none}
.tools.t3{gap:6px}.tools.t3 .tool-btn{padding:0 6px;font-size:12.5px;gap:4px}.tools.t3 .tool-btn svg{display:none}
.tool-btn.sound-in{animation:sf-pop .45s var(--ease-spring)}
@keyframes sf-pop{0%{opacity:0;transform:scale(.7)}100%{opacity:1;transform:none}}
.mdl-ic{display:inline-grid;place-items:center;flex:none;color:#fff;background:var(--gradient-brand)}
.mdl-ic svg{width:60%;height:60%}
.mdl-pill{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:7px;padding:6px 11px 6px 7px;border-radius:999px;font-size:13px;font-weight:800;color:var(--a1);background:color-mix(in oklab,var(--a1) 11%,transparent);border:1.5px solid color-mix(in oklab,var(--a1) 40%,transparent);transition:transform var(--dur-micro) var(--ease-spring)}
.mdl-pill .mdl-ic{width:20px;height:20px;border-radius:50%}
.mdl-v{font-style:normal;font-size:10.5px;font-weight:800;padding:1px 7px;border-radius:999px;background:color-mix(in oklab,var(--a1) 18%,transparent)}
.mdl-chev{transition:transform .3s var(--ease-spring)}.mdl-pill.open .mdl-chev{transform:rotate(180deg)}
.mdl-pill::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.5) 50%,transparent 70%);transform:translateX(-120%);animation:sf-shine 3.4s 1s infinite;pointer-events:none}
@keyframes sf-shine{to{transform:translateX(120%)}}
.mdl-pill.swap{animation:sf-swap .5s var(--ease-spring)}@keyframes sf-swap{40%{transform:scale(1.13)}}
.mdl-pop{position:fixed;z-index:60;padding:6px;border-radius:22px;background:var(--glass-bg-strong);border:1px solid var(--glass-border);box-shadow:0 18px 44px rgba(90,40,130,.24);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);opacity:0;transform:scale(.88) translateY(-8px);pointer-events:none;transition:opacity .2s,transform .36s cubic-bezier(.3,1.35,.5,1)}
.mdl-pop.in{opacity:1;transform:none;pointer-events:auto}
.mdl-row{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border-radius:16px;text-align:left;color:var(--foreground);opacity:0;transform:translateX(-8px);transition:opacity .25s,transform .35s var(--ease-spring),background .2s}
.mdl-pop.in .mdl-row{opacity:1;transform:none}
.mdl-pop.in .mdl-row:nth-child(2){transition-delay:.04s}.mdl-pop.in .mdl-row:nth-child(3){transition-delay:.08s}.mdl-pop.in .mdl-row:nth-child(4){transition-delay:.12s}
.mdl-row:active{background:color-mix(in oklab,var(--foreground) 7%,transparent)}
.mdl-row.sel{background:color-mix(in oklab,var(--a1) 11%,transparent)}
.mdl-row .mdl-ic{width:30px;height:30px;border-radius:10px}
.mdl-tx{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.mdl-tx b{font-size:15px;font-weight:800}.mdl-tx b .mdl-v{margin-left:6px;color:var(--muted-foreground);background:color-mix(in oklab,var(--foreground) 8%,transparent)}
.mdl-tx small{font-size:11.5px;color:var(--muted-foreground)}
.mdl-snd{text-decoration:none;margin-left:6px;font-size:9px;font-weight:800;letter-spacing:.02em;padding:2px 6px;border-radius:999px;color:#fff;background:var(--gradient-brand);vertical-align:1px}
.mdl-ck{color:var(--a1);transform:scale(0);transition:transform .4s var(--ease-spring);display:grid}.mdl-row.sel .mdl-ck{transform:scale(1)}

/* ---- Voice description (v1.0.59) ---- */
.vcx-desc{margin:12px 0 0;font-size:13px;line-height:1.45;font-weight:500;color:var(--muted-foreground);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;cursor:pointer;transition:color .2s}
.vcx-desc.open{display:block;-webkit-line-clamp:unset;color:var(--foreground)}
.vp-desc{margin:14px 6px 0;max-width:420px;text-align:center;font-size:13.5px;line-height:1.5;color:var(--muted-foreground)}

/* voice card: model icons from the voice's metadata — one line; the picked model shows icon + name + version */
.vc-models{display:flex;align-items:center;gap:5px;overflow-x:auto;scrollbar-width:none;min-height:30px;padding:4px 6px 14px;margin:-4px -6px -14px}.vc-models::-webkit-scrollbar{display:none}
.vc-mb{flex:none;height:28px;min-width:28px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:0 6px;color:var(--muted-foreground);background:color-mix(in oklab,var(--foreground) 6%,transparent);border:1.5px solid var(--clip-line);font-size:11.5px;font-weight:800;white-space:nowrap;transition:background .25s,color .25s,padding .25s}
.vc-mb svg{width:14px;height:14px;flex:none}
.vc-mt{display:none;align-items:center;gap:5px}
.vc-mt i{font-style:normal;font-size:9.5px;padding:1px 6px;border-radius:999px;background:rgba(255,255,255,.28)}
.vc-mb.on{color:#fff;background:var(--gradient-brand);border-color:transparent;padding:0 9px 0 8px;box-shadow:0 4px 10px color-mix(in oklab,var(--a1) 30%,transparent)}
.vc-mb.on .vc-mt{display:inline-flex}
.vc-mb:disabled{opacity:1}
.vc-mb.swap{animation:sf-swap .4s var(--ease-spring)}
.vcard .vc-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.vcard .vc-chips::-webkit-scrollbar{display:none}.vcard .vc-chips .vtag{flex:none;white-space:nowrap}

/* Emotion picker (Studio) */
.emo-card{--sp:cubic-bezier(.3,1.5,.5,1);padding:16px;overflow:hidden}
.emo-mood{--c:#8f87a0;position:relative;display:flex;align-items:center;gap:14px;padding:12px 14px;border-radius:22px;background:color-mix(in oklab,var(--c) 14%,var(--glass-bg-strong));border:1px solid color-mix(in oklab,var(--c) 28%,transparent);transition:background .5s,border-color .5s;overflow:hidden}
.emo-mood::before{content:"";position:absolute;width:120px;height:120px;border-radius:50%;left:-26px;top:-30px;background:var(--c);opacity:.28;filter:blur(30px);transition:background .5s;animation:em-drift 6s ease-in-out infinite alternate;pointer-events:none}
@keyframes em-drift{to{transform:translate(26px,14px) scale(1.15)}}
.emo-bf{position:relative;flex:none;width:58px;height:58px;border-radius:50%;background:var(--c);color:#fff;display:grid;place-items:center;box-shadow:0 8px 20px color-mix(in oklab,var(--c) 45%,transparent);transition:background .5s,box-shadow .5s}
.emo-bf svg{width:40px;height:40px}
.emo-mt{position:relative;min-width:0}
.emo-mt b{display:block;font-size:19px;font-weight:800;letter-spacing:-.02em}
.emo-mt span{display:block;font-size:12.5px;color:var(--muted-foreground);font-weight:600;margin-top:2px;line-height:1.35}
.emo-swap{animation:em-swap .45s var(--sp)}
@keyframes em-swap{0%{opacity:0;transform:translateY(8px) scale(.96)}100%{opacity:1;transform:none}}
.emo-row{display:flex;gap:8px;margin:14px -16px 0;padding:8px 16px 14px;overflow-x:auto;scroll-snap-type:x proximity;scroll-padding:0 16px;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.emo-row::-webkit-scrollbar{display:none}
.emo-t{--c:#8f87a0;flex:none;width:76px;scroll-snap-align:center;position:relative;border:0;color:var(--foreground);padding:16px 0 10px;border-radius:20px;background:color-mix(in oklab,var(--foreground) 6%,transparent);display:flex;flex-direction:column;align-items:center;gap:5px;font:inherit;font-size:11.5px;font-weight:700;transition:transform .45s var(--sp),background .35s,color .35s,box-shadow .35s;overflow:hidden}
.emo-t svg{width:32px;height:32px;color:var(--c);transition:color .3s}
.emo-t:active{transform:scale(.92)}
.emo-t.on{background:var(--c);color:#fff;transform:translateY(-2px) scale(1.06);box-shadow:0 3px 8px color-mix(in oklab,var(--c) 30%,transparent)}
.emo-t.on svg{color:#fff}
.emo-rp{position:absolute;border-radius:50%;background:#fff;opacity:.5;transform:scale(0);pointer-events:none;animation:em-rp .6s ease-out forwards}
@keyframes em-rp{to{transform:scale(1);opacity:0}}
.emo-t .f,.emo-bf .f{transform-origin:50% 60%}
:is(.emo-t.on,.emo-bf).a-happy .f{animation:em-joy 1.6s ease-in-out infinite}
@keyframes em-joy{0%,100%{transform:rotate(0) scale(1)}25%{transform:rotate(-6deg) scale(1.05)}75%{transform:rotate(6deg) scale(1.05)}}
@keyframes em-bounce{0%,100%{transform:translateY(0)}40%{transform:translateY(-4px) scale(1.06)}}
:is(.emo-t.on,.emo-bf).a-sad .f{animation:em-sink 2.2s ease-in-out infinite}
@keyframes em-sink{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}
:is(.emo-t.on,.emo-bf).a-sad .tear{animation:em-tear 2.2s ease-in infinite}
@keyframes em-tear{0%{opacity:0;transform:translateY(-3px)}30%{opacity:1}100%{opacity:0;transform:translateY(7px)}}
:is(.emo-t.on,.emo-bf).a-angry .f{animation:em-shake .5s linear infinite}
@keyframes em-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-1.6px) rotate(-3deg)}75%{transform:translateX(1.6px) rotate(3deg)}}
:is(.emo-t.on,.emo-bf).a-fearful .f{animation:em-trem .18s linear infinite}
@keyframes em-trem{0%,100%{transform:translate(0,0)}33%{transform:translate(.8px,-.6px)}66%{transform:translate(-.8px,.6px)}}
:is(.emo-t.on,.emo-bf).a-disgusted .f{animation:em-wig 1.4s ease-in-out infinite}
@keyframes em-wig{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}
:is(.emo-t.on,.emo-bf).a-surprised .f{animation:em-pop 1.2s var(--sp) infinite}
@keyframes em-pop{0%,100%{transform:scale(1)}15%{transform:scale(1.18)}35%{transform:scale(.97)}}
:is(.emo-t.on,.emo-bf).a-calm .f{animation:em-breathe 3.2s ease-in-out infinite}
@keyframes em-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}
:is(.emo-t.on,.emo-bf).a-fluent .bar{transform-box:fill-box;transform-origin:50% 50%;animation:em-bar .9s ease-in-out infinite}
:is(.emo-t.on,.emo-bf).a-fluent .bar:nth-child(2){animation-delay:.15s}:is(.emo-t.on,.emo-bf).a-fluent .bar:nth-child(3){animation-delay:.3s}:is(.emo-t.on,.emo-bf).a-fluent .bar:nth-child(4){animation-delay:.45s}
@keyframes em-bar{0%,100%{transform:scaleY(.45)}50%{transform:scaleY(1.15)}}
:is(.emo-t.on,.emo-bf).a-whisper .dots{animation:em-fade 1.6s ease-in-out infinite}
@keyframes em-fade{0%,100%{opacity:.25}50%{opacity:1}}
.no-anim .emo-card *,.no-anim .emo-card *::before{animation:none!important;transition:none!important}
@media (prefers-reduced-motion:reduce){.emo-card *,.emo-card *::before{animation:none!important;transition:none!important}}
/* ---- Voices: tag search + filters ---- */
.vq-row{display:flex;align-items:center;gap:10px}.vq-row .search{flex:1;min-width:0}
.vf-btn{position:relative;flex:none;width:50px;height:50px}
.vf-btn.on{background:var(--gradient-brand);color:#fff;border-color:transparent}
.vf-btn b{position:absolute;top:-4px;right:-4px;display:grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:var(--foreground);color:var(--background);font-size:11px;font-weight:800}
.vsug{align-items:center;margin-top:10px}.vsug:empty{display:none}
.vsug-l{flex:none;font-size:12px;font-weight:700;color:var(--muted-foreground)}
.vf-tag::before{content:"#";opacity:.5;margin-right:-2px}
.vact{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px}.vact:empty{display:none}
.vact-c{display:inline-flex;align-items:center;gap:6px;padding:5px 6px 5px 12px;border-radius:999px;background:color-mix(in oklab,var(--a1) 14%,transparent);color:var(--a1);font-size:12.5px;font-weight:700}
.vact-c i{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--a1);color:#fff;cursor:pointer}
.vact-clr{padding:0 4px;font-size:12.5px;font-weight:700;color:var(--muted-foreground);text-decoration:underline}
button.vtag{border:0;font-family:inherit;color:inherit;cursor:pointer}.vtag.hit{background:var(--gradient-brand);color:#fff}
.vf{display:flex;flex-direction:column}
.vf-sec{padding:14px 0;border-bottom:1px solid var(--glass-border)}
.vf-sec h3{display:flex;justify-content:space-between;margin:0 0 10px;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--muted-foreground)}
.vf-wrap{display:flex;flex-wrap:wrap;gap:8px}
.vf-n{margin-left:2px;font-size:11px;font-weight:700;opacity:.6}
.vf-search{margin-bottom:10px;padding:10px 14px}
.vf-foot{position:sticky;bottom:0;display:flex;gap:10px;padding:14px 0 4px;background:var(--popover)}
.vf-reset{height:52px;padding:0 20px;border-radius:999px;background:color-mix(in oklab,var(--foreground) 8%,transparent);font-weight:700;font-size:14px}
.vf-apply{flex:1;height:52px;border-radius:999px;background:var(--gradient-brand);color:#fff;font-weight:800;font-size:15px}
/* ---- Voices filter sheet: tidy, compact layout ---- */
.vf .chip{padding:8px 13px;gap:5px;font-size:13px;box-shadow:none}
.vf .chip.glass-pill{background:color-mix(in oklab,var(--foreground) 6%,transparent);border-color:transparent;box-shadow:none}
.vf .chip.active{background:var(--gradient-brand);color:#fff;border-color:transparent;box-shadow:none}
.vf .vf-n{margin-left:1px;font-size:11px;opacity:.6}
.vf .vf-tag::before{margin-right:0;opacity:.45}
.vf-wrap{gap:8px}
.vf-sec h3{margin-bottom:12px}
.vf-soon{cursor:default;opacity:.7;color:var(--muted-foreground)}
.vf-soon small{padding:2px 7px;border-radius:999px;background:color-mix(in oklab,var(--a1) 14%,transparent);color:var(--a1);font-size:10px;font-weight:800}
.vf-more{align-self:flex-start;margin-top:12px;padding:6px 2px;font-size:13px;font-weight:700;color:var(--a1)}
.vf-reset,.vf-apply{display:flex;align-items:center;justify-content:center;text-align:center}

/* ---- v1.0.66: Filter voices sheet (redesign). Light on purpose: no backdrop-filter, no infinite animations, transform/opacity only. ---- */
.vfs-wrap{position:fixed;inset:0;z-index:50;display:flex;align-items:flex-end;justify-content:center}
.vfs-ov{position:absolute;inset:0;background:rgba(20,10,30,.5);opacity:0;transition:opacity .35s var(--ease-ios)}
.vfs-wrap.show .vfs-ov{opacity:1}
.vfs{--fill:color-mix(in oklab,var(--foreground) 6%,transparent);--soft:color-mix(in oklab,var(--a1) 14%,transparent);--line:color-mix(in oklab,var(--foreground) 10%,transparent);
  position:relative;display:flex;flex-direction:column;width:100%;max-width:32rem;height:88%;background:var(--popover);border-radius:30px 30px 0 0;box-shadow:0 -12px 50px rgba(30,10,50,.3);
  transform:translateY(104%);transition:transform .5s var(--ease-ios);will-change:transform}
.vfs-wrap.show .vfs{transform:none}
.vfs.drag{transition:none}
.vfs-head{padding:8px 20px 12px;touch-action:none;cursor:grab;flex:none}
.vfs-grab{display:block;width:44px;height:5px;border-radius:3px;background:var(--line);margin:0 auto 12px}
.vfs-ht{display:flex;align-items:center;gap:10px}
.vfs-ht h2{font-size:20px;font-weight:800;letter-spacing:-.02em}
.vfs-ht small{display:block;margin-top:1px;font-size:12.5px;font-weight:600;color:var(--muted-foreground)}
.vfs-sp{flex:1}
.vfs-rs{padding:8px 4px;font-size:13.5px;font-weight:700;color:var(--a1);opacity:0;transform:translateX(6px);pointer-events:none;transition:opacity .25s,transform .3s var(--ease-ios)}
.vfs-rs.on{opacity:1;transform:none;pointer-events:auto}
.vfs-x{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--fill)}
.vfs-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:0 20px 16px;scrollbar-width:none}
.vfs-scroll::-webkit-scrollbar{display:none}
/* selected strip */
.vfs-sel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--ease-ios),margin .4s var(--ease-ios)}
.vfs-sel.open{grid-template-rows:1fr;margin-bottom:6px}
.vfs-sel>div{overflow:hidden;min-height:0}
.vfs-in{display:flex;flex-wrap:wrap;gap:8px;padding:2px 0 8px}
.vfs-c{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 6px 0 12px;border-radius:99px;background:var(--soft);color:var(--a1);font-size:12.5px;font-weight:700;animation:vfs-pop .35s var(--ease-spring)}
.vfs-c.out{animation:vfs-out .2s ease forwards}
.vfs-c i{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--a1);color:#fff;cursor:pointer}
@keyframes vfs-pop{0%{transform:scale(.4);opacity:0}100%{transform:none;opacity:1}}
@keyframes vfs-out{to{opacity:0;transform:scale(.6)}}
/* sections slide in one after another */
.vfs-sec{padding:16px 0;border-top:1px solid var(--line);opacity:0;transform:translateY(16px);transition:opacity .45s var(--ease-ios),transform .5s var(--ease-ios);transition-delay:calc(var(--i)*55ms + 120ms)}
.vfs-wrap.show .vfs-sec{opacity:1;transform:none}
.vfs-sel+.vfs-sec{border-top:0}
.vfs-sec h3{display:flex;justify-content:space-between;align-items:center;margin:0 0 12px;font-size:11.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--muted-foreground)}
.vfs-sec h3 em{font-style:normal;font-weight:700;letter-spacing:0;text-transform:none;color:var(--a1)}
/* segmented control with a sliding pill */
.vfs-seg{position:relative;display:grid;grid-template-columns:repeat(var(--n),1fr);padding:4px;border-radius:99px;background:var(--fill)}
.vfs-seg .pill{position:absolute;top:4px;bottom:4px;left:4px;width:calc((100% - 8px)/var(--n));border-radius:99px;background:#fff;box-shadow:0 2px 10px rgba(120,70,150,.22);transform:translateX(calc(var(--p,0)*100%));transition:transform .45s var(--ease-spring)}
.dark .vfs-seg .pill{background:color-mix(in oklab,var(--foreground) 16%,var(--popover));box-shadow:0 2px 10px rgba(0,0,0,.35)}
.vfs-seg button{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:6px;height:38px;border-radius:99px;font-size:13.5px;font-weight:700;color:var(--muted-foreground);transition:color .25s}
.vfs-seg button.on{color:var(--foreground)}
.vfs-seg button:disabled{cursor:default;opacity:.65}
.vfs-seg button{white-space:nowrap}
.vfs-seg small{padding:2px 6px;border-radius:99px;background:var(--soft);color:var(--a1);font-size:9px;font-weight:800;white-space:nowrap}
/* model cards */
.vfs-mg{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.vfm{position:relative;display:flex;align-items:center;gap:10px;padding:12px;border-radius:20px;background:var(--fill);text-align:left;overflow:hidden;isolation:isolate;transition:transform .25s var(--ease-spring),color .3s}
.vfm::before{content:"";position:absolute;inset:0;background:var(--gradient-brand);opacity:0;transition:opacity .3s;z-index:-1}
.vfm:active{transform:scale(.96)}
.vfm.on{color:#fff}.vfm.on::before{opacity:1}
.vfm-i{flex:none;width:36px;height:36px;border-radius:12px;display:grid;place-items:center;background:var(--popover);color:var(--a1);transition:background .3s,color .3s}
.vfm-i svg{width:19px;height:19px}
.vfm.on .vfm-i{background:rgba(255,255,255,.25);color:#fff}
.vfm-t b{display:block;font-size:14px;font-weight:800}
.vfm-t span{font-size:11.5px;font-weight:600;opacity:.7}
.vfm-t i{font-style:normal}
.vfm-ck{position:absolute;top:8px;right:8px;width:18px;height:18px;border-radius:50%;background:#fff;color:var(--a1);display:grid;place-items:center;transform:scale(0);transition:transform .35s var(--ease-spring)}
.vfm.on .vfm-ck{transform:scale(1)}
/* chips */
.vfs-hs{display:flex;gap:8px;overflow-x:auto;margin:0 -20px;padding:2px 20px;scrollbar-width:none}
.vfs-hs::-webkit-scrollbar{display:none}
.vfc{position:relative;flex:none;display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px;border-radius:99px;background:var(--fill);font-size:13px;font-weight:700;white-space:nowrap;isolation:isolate;overflow:hidden;transition:transform .25s var(--ease-spring),color .3s}
.vfc::before{content:"";position:absolute;inset:0;background:var(--gradient-brand);opacity:0;transition:opacity .3s;z-index:-1}
.vfc.on{color:#fff}.vfc.on::before{opacity:1}
.vfc:active{transform:scale(.93)}
.vfc small{font-size:11px;font-weight:700;opacity:.55}.vfc.on small{opacity:.8}
.vfc-tag span::before{content:"#";opacity:.45;margin-right:1px}
.vfc.hide{display:none}
.vfs-ts{display:flex;align-items:center;gap:8px;height:42px;padding:0 14px;margin-bottom:12px;border-radius:99px;background:var(--fill);color:var(--muted-foreground);transition:box-shadow .25s}
.vfs-ts:focus-within{box-shadow:0 0 0 2px var(--a1)}
.vfs-ts input{flex:1;min-width:0;border:0;outline:0;background:none;font:inherit;font-size:14px;color:var(--foreground)}
.vfs-tw{display:flex;flex-wrap:wrap;gap:8px}
.vfs-more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease-ios)}
.vfs-more.open{grid-template-rows:1fr}
.vfs-more>div{overflow:hidden;min-height:0}
.vfs-t2{padding-top:8px}
.vfs-tm{margin-top:12px;display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:800;color:var(--a1)}
.vfs-tm[hidden]{display:none}
.vfs-tm svg{transition:transform .4s var(--ease-spring)}.vfs-tm.open svg{transform:rotate(180deg)}
.vfs-nt{padding:6px 2px;font-size:13px;color:var(--muted-foreground)}
/* footer */
.vfs-foot{flex:none;padding:12px 20px calc(14px + env(safe-area-inset-bottom,0px));background:linear-gradient(to top,var(--popover) 70%,transparent)}
.vfs-ap{width:100%;height:54px;border-radius:99px;background:var(--gradient-brand);color:#fff;font-size:15.5px;font-weight:800;display:flex;align-items:center;justify-content:center;gap:8px;box-shadow:0 10px 24px color-mix(in oklab,var(--a1) 38%,transparent);transition:transform .2s var(--ease-spring),opacity .3s}
.vfs-ap:active{transform:scale(.97)}
.vfs-ap:disabled{opacity:.5;filter:saturate(.3);box-shadow:none}
.vfs-ap b{display:inline-block;min-width:1ch}
.vfs-ap b.bump{animation:vfs-bump .35s var(--ease-spring)}
@keyframes vfs-bump{40%{transform:scale(1.35)}}
@media (prefers-reduced-motion:reduce){.vfs,.vfs-ov,.vfs-sec,.vfs-seg .pill,.vfm,.vfc,.vfs-c,.vfs-more,.vfs-sel{transition-duration:.01ms!important;transition-delay:0s!important;animation-duration:.01ms!important}}
/* v1.0.67: tag chips stretch to fill their row, so rows are always full (the packer in app.js picks which tags share a row) */
.vfs-tw .vfc{flex:1 1 auto;justify-content:center}
.vfs-tw.vfs-t2::after{content:"";flex:30 1 0;height:0;margin:0 0 0 -8px}
/* Gradient + transparent border: the gradient was sized to the padding box and repeated into the border, leaving a thin off-colour strip at the left/right edges. Size it to the border box instead. */
.vc-mb.on,.ac-b.pri,.adm-chip.on,.vf-btn.on,.vf .chip.active{background-origin:border-box;background-clip:border-box}

/* ===== v1.0.73 Profile: Appearance (replaces Settings > Appearance; no text-size option) ===== */
.pf-page{contain:layout style}
.pf-gt{margin-left:4px}
.pf-card{padding:6px 18px}
.pf-card,.pcard,.pf-list{contain:layout style}
.pf-blk{padding:18px 0}.pf-blk+.pf-blk{border-top:1px solid color-mix(in oklab,var(--foreground) 8%,transparent)}
.pf-sub{display:flex;align-items:center;gap:10px;margin-bottom:14px}.pf-sub i{display:grid;place-items:center;width:32px;height:32px;border-radius:11px;color:var(--a1);background:color-mix(in oklab,var(--a1) 14%,transparent)}
.pf-sub b{flex:1;font-size:14.5px;font-weight:800}.pf-sub small{font-size:12px;font-weight:800;color:var(--a1)}
.pf-g3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.pf-g4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px 4px}
.pf-opt{position:relative;display:flex;flex-direction:column;align-items:center;gap:9px;padding:8px 8px 11px;border-radius:20px;font-size:12.5px;font-weight:700;color:var(--foreground);background:color-mix(in oklab,var(--foreground) 5%,transparent);border:1.5px solid color-mix(in oklab,var(--foreground) 8%,transparent);transition:transform .35s var(--ease-spring),border-color .25s,background .25s,box-shadow .25s}
.pf-opt.on{border-color:var(--a1);background:color-mix(in oklab,var(--a1) 10%,transparent);transform:translateY(-3px);box-shadow:0 8px 18px color-mix(in oklab,var(--a1) 24%,transparent)}
.pf-opt:active{transform:scale(.95)}
.pf-ck{position:absolute;top:-8px;right:-6px;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;color:#fff;background:var(--gradient-brand);transform:scale(0);transition:transform .35s var(--ease-spring)}.pf-opt.on .pf-ck{transform:scale(1)}
.pf-th{position:relative;width:100%;aspect-ratio:3/4;border-radius:13px;overflow:hidden;border:1px solid rgba(128,128,128,.22)}
.pf-th.l{background:#FBF8FD}.pf-th.d{background:#14101f}.pf-th.a{background:linear-gradient(115deg,#FBF8FD 50%,#14101f 50%)}
.pf-th::before{content:"";position:absolute;left:12%;right:12%;top:13%;height:24%;border-radius:7px;background:var(--gradient-brand)}
.pf-th::after{content:"";position:absolute;left:12%;right:34%;top:50%;height:6%;border-radius:4px;background:rgba(128,128,128,.4);box-shadow:0 13px 0 rgba(128,128,128,.28),0 26px 0 rgba(128,128,128,.18)}
.pf-sw{position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;padding:0;font-size:11px;font-weight:700;color:var(--muted-foreground);transition:color .25s}
.pf-sw i{position:relative;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;color:#fff;box-shadow:0 6px 14px rgba(0,0,0,.12);transition:transform .35s var(--ease-spring),box-shadow .25s}
.pf-sw svg{opacity:0;transform:scale(.4);transition:opacity .2s,transform .35s var(--ease-spring)}
.pf-sw.on i{transform:scale(1.1);box-shadow:0 0 0 3px var(--background),0 0 0 5px var(--a1)}.pf-sw.on svg{opacity:1;transform:none}.pf-sw.on{color:var(--a1)}.pf-sw:active i{transform:scale(.88)}
.pf-cu i{background:conic-gradient(#f06a6a,#f0c46a,#8ff06a,#6af0d8,#6a8ff0,#d86af0,#f06a6a);overflow:hidden}
.pf-cu input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:0;padding:0}
.pf-ar{display:flex;align-items:center;gap:12px;width:100%;text-align:left}
.pf-ai{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:14px;color:var(--a1);background:color-mix(in oklab,var(--a1) 14%,transparent)}
.pf-sd{position:relative;flex:none;width:52px;height:30px;border-radius:99px;background:color-mix(in oklab,var(--foreground) 14%,transparent);transition:background .3s}
.pf-sd i{position:absolute;top:4px;left:4px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.25);transition:transform .4s var(--ease-spring)}
.pf-sd.on{background:var(--gradient-brand)}.pf-sd.on i{transform:translateX(22px)}
.pf-page .meter>div{transform-origin:left;animation:pf-grow 1s var(--ease-ios) .3s both}
@keyframes pf-grow{from{transform:scaleX(0)}}
/* theme switch: fade only the big surfaces for 0.6s instead of transitioning every element */
.tt body,.tt .glass-card,.tt .glass-tile,.tt .pf-opt,.tt .dock{transition:background-color .4s,border-color .4s,color .4s}
/* smoother, cheaper scrolling */
html,body{-webkit-overflow-scrolling:touch}
.clip-card{content-visibility:auto;contain-intrinsic-size:auto 150px}
.linkrow,.row-btn{transition:background-color .2s,transform var(--dur-micro) var(--ease-spring)}
@media (prefers-reduced-motion:reduce){.pf-page .meter>div{animation:none}}
.pf-blk:first-child{padding-top:16px}
/* profile menu list: icon tiles, tighter rows, press feedback */
.pf-list{padding:6px}
.pf-list .pf-lk,.pf-list .pf-lk+.pf-lk{padding:12px;gap:12px;border-radius:18px;border-top:0;transition:transform .3s var(--ease-spring),background-color .25s}
.pf-lk:active{transform:scale(.97);background:color-mix(in oklab,var(--foreground) 6%,transparent)}
.pf-lki{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:12px;color:var(--a1);background:color-mix(in oklab,var(--a1) 13%,transparent)}
.pf-lk .pf-ch{display:grid;color:var(--muted-foreground);transition:transform .3s var(--ease-spring)}.pf-lk:active .pf-ch{transform:translateX(4px)}
.pf-lk.danger .pf-lki{color:inherit;background:rgba(229,72,77,.12)}
.pf-gt{margin-top:22px}

/* ===== v1.0.75 profile hero card (curved header, no flat cut-off lines) ===== */
.ph{padding:0!important;border-radius:30px;overflow:hidden}
.ph-hd{position:relative;padding:20px 20px 32px;color:#fff;background:linear-gradient(135deg,var(--a1),var(--a2));overflow:hidden;border-radius:0 0 38px 38px}
.ph-hd::before{content:"";position:absolute;right:-60px;top:-80px;width:230px;height:230px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.34),transparent)}
.ph-hd::after{content:"";position:absolute;left:-50px;bottom:-90px;width:200px;height:200px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.18),transparent)}
.ph-hd>*{position:relative;z-index:1}
.ph-hd>.ph-dc{position:absolute;z-index:0;border-radius:50%;pointer-events:none;animation:ph-fl 7s ease-in-out infinite alternate}
.ph-dc.f{background:radial-gradient(closest-side,rgba(255,255,255,.26),rgba(255,255,255,.08))}
.ph-dc.r{border:2px solid rgba(255,255,255,.3)}
.ph-dc.d{background:rgba(255,255,255,.5)}
@keyframes ph-fl{to{transform:translate(8px,-12px) scale(1.08)}}
.ph-id{display:flex;align-items:center;gap:14px}
.ph-av{flex:none;width:66px;height:66px;border-radius:50%;padding:3px;background:rgba(255,255,255,.28);box-shadow:0 0 0 2px rgba(255,255,255,.75),0 10px 22px rgba(0,0,0,.18)}
.ph-av b{position:relative;overflow:hidden;width:100%;height:100%;border-radius:50%;display:grid;place-items:center;background:linear-gradient(160deg,rgba(255,255,255,.35),rgba(255,255,255,.1))}
.ph-nm{margin:0;font-size:17.5px;font-weight:800;letter-spacing:-.01em}
.ph-mt{display:flex;align-items:center;gap:8px;margin-top:7px;flex-wrap:wrap}
.ph-pill{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:800;padding:4px 10px;border-radius:99px;background:rgba(255,255,255,.24)}
.ph-pill i{width:7px;height:7px;border-radius:50%;background:#5CF2A0;box-shadow:0 0 0 3px rgba(92,242,160,.3)}
.ph-code{display:inline-flex;align-items:center;gap:6px;font:600 12px ui-monospace,monospace;opacity:.92;border:0;background:none;color:#fff;padding:0}
.ph-qr{display:flex;align-items:center;gap:18px;margin-top:22px}
.ph-ring{position:relative;flex:none;width:104px;height:104px}
.ph-ring svg{width:104px;height:104px;transform:rotate(-90deg);fill:none;stroke-width:9;stroke-linecap:round}
.ph-ring .tk{stroke:rgba(255,255,255,.26)}
.ph-ring .fg{stroke:#fff;stroke-dasharray:276.46;stroke-dashoffset:276.46;transition:stroke-dashoffset 1.5s cubic-bezier(.22,1,.36,1);filter:drop-shadow(0 0 6px rgba(255,255,255,.55))}
.ph-ring b{position:absolute;inset:0;display:grid;place-content:center;text-align:center;font-size:21px;font-weight:800;line-height:1}
.ph-ring b small{display:block;font-size:10px;font-weight:700;opacity:.85;margin-top:3px;letter-spacing:.06em;text-transform:uppercase}
.ph-qt strong{display:block;font-size:34px;line-height:1;font-weight:800;letter-spacing:-.02em}
.ph-qt span{display:block;font-size:12.5px;opacity:.9;margin-top:6px}
.ph-qt em{display:inline-block;font-style:normal;font-size:11px;font-weight:800;margin-top:9px;padding:4px 10px;border-radius:99px;background:rgba(255,255,255,.22)}
.ph-bd{padding:16px 14px 16px}
.ph-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.ph-st{background:color-mix(in oklab,var(--foreground) 5.5%,transparent);border-radius:20px;padding:12px 6px 11px;text-align:center;transition:transform .35s var(--ease-spring)}
.ph-st:active{transform:scale(.95)}
.ph-st i{width:30px;height:30px;border-radius:11px;margin:0 auto 7px;display:grid;place-items:center;color:var(--a1);background:color-mix(in oklab,var(--a1) 14%,transparent)}
.ph-st b{display:block;font-size:18px;font-weight:800;line-height:1.1}
.ph-st>span{font-size:11px;color:var(--muted-foreground);font-weight:600}
.ph-ex{display:flex;align-items:center;gap:10px;margin-top:12px;padding:11px 14px;border-radius:18px;border:1px dashed color-mix(in oklab,var(--a1) 40%,transparent);background:color-mix(in oklab,var(--a1) 6%,transparent);font-size:12.5px;font-weight:700}
.ph-ex svg{color:var(--a1);flex:none}
.ph-ex span{flex:1;min-width:0}
.ph-ex em{flex:none;font-style:normal;font-size:11.5px;font-weight:800;color:var(--a1);background:color-mix(in oklab,var(--a1) 14%,transparent);padding:4px 10px;border-radius:99px}
@media (prefers-reduced-motion:reduce){.ph-hd>.ph-dc{animation:none}.ph-ring .fg{transition:none}}
.no-anim .ph-hd>.ph-dc{animation:none}

/* ===== v1.0.77 profile card: only the ring keeps its shadow; % centred; no "left" label ===== */
.ph-ring::before{content:"";position:absolute;inset:-6px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.28),transparent);pointer-events:none}
.ph-ring .fg{filter:none}
.ph-ring svg{position:relative;overflow:visible}
.ph-ring b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:0;font-size:26px;font-weight:800;line-height:1;text-shadow:0 2px 8px rgba(70,10,80,.25);font-variant-numeric:tabular-nums}
.ph-ring b span{display:block;line-height:1}
.ph-st{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.ph-st i{margin:0 auto 8px}
.ph-st b{display:block;width:100%;text-align:center;font-variant-numeric:tabular-nums}
.ph-st b span{display:inline}
.ph-st>span{display:block;width:100%;text-align:center;margin-top:3px}

/* ===== v1.0.79 access-code inputs: placeholder uses the normal UI font (typed code stays spaced mono) ===== */
.code-input::placeholder{font-family:inherit;letter-spacing:normal;font-size:15px;font-weight:500;text-transform:none}

/* ===== v1.0.81 settings page: voice row, emotion + language blocks ===== */
.st-blk{--sp:cubic-bezier(.3,1.5,.5,1)}
.st-sh{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.st-sh .st-ic{width:32px;height:32px;border-radius:11px}
.st-sh b{flex:1;font-size:14.5px;font-weight:800}
.st-sh small{font-size:12px;font-weight:800;color:var(--a1)}
.vrow{gap:14px}
.vpl{display:grid;place-items:center;color:#fff;background:var(--gradient-brand)}
.vrow .vt{flex:1;min-width:0;text-align:left}
.vrow .vt b{display:block;font-size:14px;font-weight:700}
.vrow .vt small{display:block;font-size:12px;color:var(--muted-foreground);font-weight:600;margin-top:2px}
.vrow{flex-wrap:wrap;row-gap:0}
.vr-mdls{flex:0 0 100%;display:flex;flex-wrap:nowrap;gap:4px;margin-top:10px;overflow-x:auto;scrollbar-width:none}
.vr-mdls::-webkit-scrollbar{display:none}
.vr-mdl{cursor:pointer;-webkit-tap-highlight-color:transparent;flex:1 0 auto;justify-content:center;white-space:nowrap;display:inline-flex;align-items:center;gap:3px;height:24px;padding:0 6px;border-radius:999px;color:var(--muted-foreground);background:color-mix(in oklab,var(--foreground) 6%,transparent);border:1.5px solid var(--clip-line);font-size:10.5px;font-weight:700;line-height:1}
.vr-mdl.on{color:#fff;background:var(--gradient-brand);border-color:transparent}
.vr-mdl svg{width:12px;height:12px;flex:none}
.vr-mdl i{font-style:normal;font-size:9px;padding:1px 5px;border-radius:999px;background:color-mix(in oklab,var(--foreground) 8%,transparent)}
.vr-mdl.on i{background:rgba(255,255,255,.28)}
.vwv{display:flex;align-items:center;gap:3px;height:22px;margin-right:4px}
.vwv i{width:3px;height:6px;border-radius:3px;background:var(--a1);transition:height .3s}
.vwv.on i{animation:vw .8s ease-in-out infinite alternate}.vwv.on i:nth-child(2n){animation-delay:.2s}.vwv.on i:nth-child(3n){animation-delay:.4s}
@keyframes vw{from{height:5px}to{height:22px}}
.no-anim .st-blk *,.no-anim .vwv i{animation:none!important;transition:none!important}
@media (prefers-reduced-motion:reduce){.st-blk *,.vwv i{animation:none!important;transition:none!important}}

/* ===== v1.0.82 clone logo ===== */
.cl-logo{flex:none;width:22px;height:22px;border-radius:8px;display:grid;place-items:center;color:#fff;background:var(--gradient-brand);box-shadow:0 2px 8px color-mix(in oklab,var(--a1) 40%,transparent)}

/* ===== v1.0.84 voice preview redesign ===== */
.vpv{--bar:oklch(.88 .03 320);width:100%;max-width:480px;padding-bottom:24px}
.dark .vpv{--bar:oklch(.4 .04 310)}
.vpv svg{display:block;flex:none}
.vpv .rise{animation:rise-in var(--dur-card) var(--ease-ios) both;animation-delay:calc(var(--i,0)*70ms)}
.vpv-pav,.vpv-face{position:relative;flex:none;display:grid;place-items:center;border-radius:50%;overflow:hidden;color:#fff;font-weight:800;background:var(--gradient-brand)}
.vpv-pav{width:26px;height:26px;font-size:10px;box-shadow:0 0 0 2px var(--glass-bg-strong)}
.vpv-pav img,.vpv-face img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%}
.vpv-eyebrow{margin:22px 0 12px;text-align:center;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-foreground)}
.vpv-hero{position:relative;padding:22px 20px 20px;border-radius:30px;background:var(--glass-bg);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow-lg);overflow:hidden}
.vpv-hero::before{content:"";position:absolute;width:260px;height:260px;right:-90px;top:-110px;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--a1) 30%,transparent),transparent);pointer-events:none;opacity:.5;transition:opacity .5s,transform .8s var(--ease-ios)}
.vpv-hero.playing::before{opacity:1;transform:scale(1.25)}
.vpv-id{position:relative;display:flex;align-items:center;gap:14px}
.vpv-face{width:72px;height:72px;font-size:22px;border:3px solid transparent;background:var(--gradient-brand);box-shadow:var(--glass-shadow-lg);overflow:visible}
.vpv-face img{inset:0;width:100%;height:100%}
.vpv-face::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:2px solid var(--a1);opacity:0;pointer-events:none}
.vpv-hero.playing .vpv-face::after{animation:vpv-ring 1.8s ease-out infinite}
.vpv-meta{margin:0;font-size:12px;font-weight:600;color:var(--muted-foreground)}
.vpv-id h1{margin:4px 0 0;font-size:26px;line-height:1.1;letter-spacing:-.02em;font-weight:800;overflow-wrap:anywhere}
.vpv-seg{position:relative;display:flex;margin-top:18px;padding:4px;border-radius:999px;background:color-mix(in srgb,var(--foreground) 7%,transparent)}
.vpv-thumb{position:absolute;top:4px;bottom:4px;left:4px;width:calc((100% - 8px)/var(--n));border-radius:999px;background:var(--gradient-brand);box-shadow:0 6px 16px color-mix(in oklab,var(--a1) 38%,transparent);transform:translateX(calc(var(--si)*100%));transition:transform .4s var(--ease-ios)}
.vpv-sg{position:relative;flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:6px;padding:11px 4px;font-size:13px;font-weight:700;color:var(--muted-foreground);transition:color .25s}
.vpv-sg svg{width:16px;height:16px;transition:transform .35s var(--ease-spring)}
.vpv-sg small{font-size:11px;font-weight:600;opacity:.8}
.vpv-sg.on{color:#fff}.vpv-sg.on svg{transform:scale(1.2)}
.vpv-sg:disabled{opacity:1;cursor:default}
.vpv-md{margin:10px 4px 0;text-align:center;font-size:12.5px;color:var(--muted-foreground);transition:opacity .2s}
.vpv-wave{display:flex;align-items:center;justify-content:space-between;gap:3px;height:76px;margin-top:22px;cursor:pointer;touch-action:manipulation}
.vpv-wave i{flex:1;min-width:2px;height:var(--h);border-radius:3px;background:var(--bar);transform-origin:center;transition:background .3s;animation:vpv-breathe 3.2s ease-in-out infinite;animation-delay:var(--d)}
.vpv-wave i.done{background:var(--gradient-brand)}
.vpv-hero.playing .vpv-wave i{animation:vpv-dance var(--s) ease-in-out infinite;animation-delay:var(--d)}
@keyframes vpv-breathe{50%{transform:scaleY(.82)}}
@keyframes vpv-dance{0%,100%{transform:scaleY(.45)}50%{transform:scaleY(1)}}
@keyframes vpv-ring{from{opacity:.55;transform:scale(1)}to{opacity:0;transform:scale(1.5)}}
.vpv-times{display:flex;justify-content:space-between;gap:8px;margin-top:10px;font-size:12px;font-weight:600;color:var(--muted-foreground);font-variant-numeric:tabular-nums}
.vpv-times #vpv-st{text-align:center;transition:color .3s}
.vpv-hero.playing #vpv-st{color:var(--a1)}
.vpv-play{position:relative;display:grid;place-items:center;width:78px;height:78px;margin:16px auto 0;border-radius:50%;color:#fff;background:var(--gradient-brand);box-shadow:0 12px 28px color-mix(in oklab,var(--a1) 40%,transparent)}
.vpv-play:disabled{opacity:.45;box-shadow:none}
.vpv-play::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--a1);opacity:0;pointer-events:none}
.vpv-hero.playing .vpv-play::after{animation:vpv-ring 1.6s ease-out infinite}
.vpv-play svg{grid-area:1/1;width:30px;height:30px;transition:transform .25s var(--ease-spring),opacity .2s}
.vpv-play .pa{opacity:0;transform:scale(.4)}
.vpv-hero.playing .vpv-play .pl{opacity:0;transform:scale(.4)}
.vpv-hero.playing .vpv-play .pa{opacity:1;transform:none}
.vpv-tags{display:flex;flex-wrap:nowrap;justify-content:center;gap:clamp(4px,1.6vw,8px);margin-top:20px;width:100%;max-width:100%;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.vpv-tags::-webkit-scrollbar{display:none}
.vpv-tags>.vpv-tag:first-child{margin-left:auto}.vpv-tags>.vpv-tag:last-child{margin-right:auto}
.vpv-tag{flex:0 0 auto;white-space:nowrap;padding:6px clamp(9px,3vw,14px);border-radius:999px;font-size:clamp(11.5px,3.3vw,13px);font-weight:600;background:var(--glass-bg);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow)}
.vpv-desc{margin:14px 6px 0;text-align:center;font-size:14px;line-height:1.55;color:var(--muted-foreground)}
.vpv-actions{display:flex;gap:10px;margin-top:22px}
.vpv-cta{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:16px 0;border-radius:999px;font-size:15px;font-weight:700;color:#fff;background:var(--gradient-brand);box-shadow:0 10px 26px color-mix(in oklab,var(--a1) 35%,transparent)}
.vpv-fav{flex:none;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;color:var(--foreground);background:var(--glass-bg-strong);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow);transition:color .2s}
.vpv-fav svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease-spring)}
.vpv-fav.on{color:var(--a1)}.vpv-fav.on svg{fill:var(--a1);transform:scale(1.15)}
.no-anim .vpv *,.no-anim .vpv *::after{animation:none!important;transition:none!important}
@media (prefers-reduced-motion:reduce){.vpv *,.vpv *::after{animation:none!important;transition:none!important}}

/* ---- v1.0.85 Favorites ---- */
.fv-seg{position:relative;display:grid;grid-template-columns:1fr 1fr;padding:4px}
.fv-thumb{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:999px;background:var(--gradient-brand);box-shadow:0 6px 16px color-mix(in oklab,var(--a1) 35%,transparent);transition:transform .38s var(--ease-ios)}
.fv-seg[data-t="clips"] .fv-thumb{transform:translateX(100%)}
.fv-seg button{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:7px;padding:11px 0;font-size:13.5px;font-weight:700;text-transform:capitalize;color:var(--muted-foreground);transition:color .25s var(--ease-ios),transform var(--dur-micro) var(--ease-spring)}
.fv-seg button.on{color:#fff}
.fv-seg b{min-width:20px;padding:2px 6px;border-radius:99px;font-size:11px;font-weight:700;text-align:center;background:color-mix(in oklab,var(--foreground) 7%,transparent);transition:background .25s}
.fv-seg button.on b{background:rgba(255,255,255,.25)}
#fv-body{transition:opacity .15s ease,transform .15s var(--ease-ios)}
#fv-body.fv-swap{opacity:0;transform:translateY(8px)}
.fv-it{display:grid;grid-template-rows:1fr;transition:grid-template-rows .3s var(--ease-ios) .05s,margin .3s var(--ease-ios) .05s}
.fv-it>*{min-height:0}
@keyframes fv-out{to{opacity:0;transform:translateX(18px) scale(.97)}}
#app .fv-it.fv-leave,#app .vcard.fv-leave{animation:fv-out .28s var(--ease-ios) both!important;pointer-events:none}
#app .fv-it.fv-leave{grid-template-rows:0fr;margin-bottom:-10px}
.fv-it.fv-leave>*{overflow:hidden}
.fv-empty{display:flex;flex-direction:column;align-items:center;gap:10px;padding:44px 24px 36px;text-align:center;animation:rise-in .5s var(--ease-ios) both}
.fv-empty p{max-width:18rem;font-size:14px;line-height:1.5;color:var(--muted-foreground)}
.fv-eico{display:grid;place-items:center;width:68px;height:68px;border-radius:22px;margin-bottom:6px;color:var(--a1);background:color-mix(in oklab,var(--a1) 10%,transparent)}
.fv-eico svg{animation:fv-beat 3.2s var(--ease-ios) infinite}
@keyframes fv-beat{0%,60%,100%{transform:scale(1)}70%{transform:scale(1.14)}80%{transform:scale(.98)}90%{transform:scale(1.08)}}
@media (prefers-reduced-motion:reduce){.fv-eico svg{animation:none}}

/* ---- Settings: voice defaults + emotion (v1.0.93) ---- */
@property --c{syntax:"<color>";inherits:true;initial-value:#8f87a0}
.vdef-row{display:flex;align-items:center;gap:14px}
.vdef-av{position:relative;flex:none;padding:5px}
.vdef-av::before{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,var(--a1),var(--a2),#7fe0e6,var(--a1));-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2.5px),#000 calc(100% - 2px));mask:radial-gradient(farthest-side,transparent calc(100% - 2.5px),#000 calc(100% - 2px));opacity:.6}
.vdef .vc-av{flex-basis:64px;width:64px;height:64px;font-size:22px}
.vdef .vt{flex:1;min-width:0;text-align:left}
.vdef .vt b{display:block;font-size:15px;font-weight:800}
.vdef .vt small{display:block;margin-top:2px;font-size:13px;color:var(--muted-foreground);font-weight:600}
.chbtn{position:relative;flex:none;display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 16px 0 5px;border-radius:999px;font-size:13.5px;font-weight:800;color:var(--foreground);background:var(--glass-bg-strong);border:1px solid color-mix(in oklab,var(--a1) 30%,transparent);box-shadow:var(--glass-shadow);transition:transform var(--dur-micro) var(--ease-spring),box-shadow .3s}
.chi{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:#fff;background:var(--gradient-brand);box-shadow:0 6px 14px color-mix(in oklab,var(--a1) 38%,transparent);transition:transform .6s var(--ease-spring)}
.chbtn:active{transform:scale(.94)}.chbtn:active .chi{transform:rotate(180deg)}
.vseg{position:relative;display:grid;grid-template-columns:repeat(var(--n,4),1fr);margin-top:16px;padding:4px;border-radius:999px;background:color-mix(in oklab,var(--foreground) 6%,transparent)}
.vth{position:absolute;top:4px;bottom:4px;left:4px;width:calc((100% - 8px)/var(--n,4));border-radius:999px;background:var(--gradient-brand);box-shadow:0 8px 20px color-mix(in oklab,var(--a1) 38%,transparent);transition:transform .5s var(--ease-spring)}
.vseg button{position:relative;z-index:1;padding:8px 0 7px;border-radius:999px;font-size:13px;font-weight:800;line-height:1.1;color:var(--muted-foreground);transition:color .3s}
.vseg button small{display:block;margin-top:2px;font-size:10px;font-weight:700;opacity:.8}
.vseg button.on{color:#fff}
.vmd{position:relative;height:18px;margin:10px 4px 0;font-size:12.5px;font-weight:600;color:var(--muted-foreground)}
.vmd span{position:absolute;inset:0;opacity:0;transform:translateY(6px);transition:opacity .25s,transform .35s var(--ease-ios)}
.vmd span.on{opacity:1;transform:none}
.emo-mood{transition:--c .55s var(--ease-ios)}
.emo-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:14px}
.emo-grid .emo-t{width:auto;min-width:0;padding:10px 0 8px;border-radius:18px;font-size:10.5px;gap:4px}
.emo-grid .emo-t svg{width:28px;height:28px}
.emo-grid .emo-t.on{transform:translateY(-3px) scale(1.05);box-shadow:0 8px 18px color-mix(in oklab,var(--c) 40%,transparent)}
.no-anim .vth,.no-anim .chi,.no-anim .vmd span{transition:none!important}
@media (prefers-reduced-motion:reduce){.vth,.chi,.vmd span,.emo-mood{transition:none!important}}
.vseg button{text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0}
.emo-grid .emo-t{font-size:10px;letter-spacing:-.01em;padding:10px 2px 8px}
.emo-grid .emo-t.on{transform:translateY(-2px) scale(1.03)}

/* first-run intro is covering the app: stop painting and animating what is underneath so the intro stays smooth */
html.ob-pre #app,html.ob-pre .app-bg,html.ob-open #app,html.ob-open .app-bg{visibility:hidden}
html.ob-open *{animation-play-state:paused!important}

/* Audio History empty state: animated waveform in place of the bubble (v1.0.102) */
.eq-hero{position:relative;width:96px;height:96px;display:grid;place-items:center;flex:none;margin-bottom:2px}
.eq-hero::before,.eq-hero::after{content:"";position:absolute;inset:0;border-radius:50%;border:1.5px solid var(--a2);opacity:0;animation:eq-ping 3.2s var(--ease-ios) infinite}
.eq-hero::after{animation-delay:1.6s}
@keyframes eq-ping{0%{transform:scale(.72);opacity:.5}100%{transform:scale(1.35);opacity:0}}
.eq-disc{position:absolute;inset:8px;border-radius:50%;background:linear-gradient(135deg,color-mix(in oklab,var(--a1) 18%,transparent),color-mix(in oklab,var(--aqua) 22%,transparent));border:1px solid color-mix(in oklab,var(--foreground) 10%,transparent)}
.eq-bars{position:relative;display:flex;align-items:center;gap:4px;height:44px}
.eq-bars b{width:5px;height:12px;border-radius:5px;background:linear-gradient(180deg,var(--a1),var(--a2) 60%,var(--aqua));animation:eq-bar 1.8s ease-in-out infinite}
.eq-bars b:nth-child(1){animation-delay:-.2s}.eq-bars b:nth-child(2){animation-delay:-.9s}.eq-bars b:nth-child(3){animation-delay:-.5s}.eq-bars b:nth-child(4){animation-delay:-1.3s}.eq-bars b:nth-child(5){animation-delay:-.7s}.eq-bars b:nth-child(6){animation-delay:-1.6s}.eq-bars b:nth-child(7){animation-delay:-.1s}
@keyframes eq-bar{0%,100%{height:10px}50%{height:40px}}
@media (prefers-reduced-motion:reduce){.eq-hero::before,.eq-hero::after,.eq-bars b{animation:none}.eq-bars b{height:22px}}

/* ======================================================================
   v1.0.105 — Voice Clone page redesign (cn-*). Stages: idle → rec → sample → proc → live → expired
   ====================================================================== */
.cn-page{width:100%}
.cn-rbox{transition:transform .6s var(--ease-ios)}
.cn-rbox.live{transform:scale(.82) translateY(-14px)}
.cn-status{text-align:center;color:var(--muted-foreground);font-size:13.5px;font-weight:600;margin:14px 0 18px;min-height:20px}
.cn-card{width:100%;background:var(--glass-bg);border-radius:30px;padding:20px;box-shadow:var(--glass-shadow-lg);position:relative;overflow:hidden}
.cn-sc{margin-top:14px;padding:16px}
.cn-in{animation:cn-in .55s var(--ease-ios) both}
@keyframes cn-in{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:none}}
.cn-steps{display:flex;gap:6px;margin-bottom:16px}
.cn-steps i{flex:1;height:4px;border-radius:9px;background:color-mix(in oklab,var(--foreground) 10%,transparent);overflow:hidden;position:relative}
.cn-steps i::after{content:"";position:absolute;inset:0;background:var(--gradient-brand);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease-ios)}
.cn-steps i.on::after{transform:scaleX(1)}
.cn-grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cn-tile{border-radius:24px;padding:16px;text-align:left;background:color-mix(in oklab,var(--foreground) 5%,transparent);min-height:112px;display:flex;flex-direction:column;justify-content:space-between;transition:transform .35s var(--ease-spring);color:inherit}
.cn-tile:active{transform:scale(.96)}
.cn-ic{width:40px;height:40px;border-radius:14px;display:grid;place-items:center;color:#fff;background:var(--gradient-brand);box-shadow:0 8px 18px color-mix(in oklab,var(--a1) 35%,transparent)}
.cn-tile.alt .cn-ic{background:linear-gradient(135deg,#B68DF3,#5FD3D6)}
.cn-tile b{font-size:14.5px;font-weight:800;display:block}
.cn-tile small{display:block;font-size:11.5px;color:var(--muted-foreground);font-weight:600}
.cn-facts{display:flex;gap:8px;margin-top:14px}
.cn-fact{flex:1;border-radius:18px;padding:10px 8px;text-align:center;background:color-mix(in oklab,var(--a2) 10%,transparent)}
.cn-fact b{display:block;font-size:15px;font-weight:800;background:var(--gradient-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.cn-fact small{font-size:10.5px;font-weight:700;color:var(--muted-foreground)}
.cn-hint{font-size:12px;color:var(--muted-foreground);text-align:center;margin:12px 0 0;font-weight:600}
.cn-btn{display:flex;width:100%;align-items:center;justify-content:center;gap:8px;padding:15px;border-radius:99px;color:#fff;font-weight:800;font-size:15px;background:var(--gradient-brand);box-shadow:0 10px 26px color-mix(in oklab,var(--a1) 35%,transparent);position:relative;overflow:hidden;transition:transform .35s var(--ease-spring),opacity .3s}
.cn-btn:active{transform:scale(.96)}
.cn-btn::after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-60%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);transform:skewX(-20deg);animation:cn-shine 3.6s 1s ease-in-out infinite;pointer-events:none}
@keyframes cn-shine{0%{left:-60%}45%,100%{left:130%}}
.cn-btn.sec{background:color-mix(in oklab,var(--foreground) 7%,transparent);color:var(--foreground);box-shadow:none;padding:12px;font-size:13.5px}
.cn-btn.sec::after{display:none}
.cn-btn[disabled]{opacity:.45;pointer-events:none}
.cn-btn.dng{background:linear-gradient(120deg,#F0607F,#DF3A5C);box-shadow:0 10px 24px rgba(223,58,92,.35)}
.cn-btn .cn-arw{display:grid;transition:transform .4s var(--ease-spring)}
.cn-btn:active .cn-arw{transform:translateX(4px)}
.cn-row{display:flex;gap:10px;margin-top:10px}
.cn-row .cn-btn{flex:1}
/* recording */
.cn-rec{display:flex;flex-direction:column;align-items:center;gap:14px}
.cn-tm{font-size:34px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.cn-wave{display:flex;align-items:center;gap:4px;height:56px}
.cn-wave b{width:5px;height:52px;border-radius:5px;background:linear-gradient(180deg,var(--a1),var(--a2),#5FD3D6);transform:scaleY(var(--s,.15));transition:transform .09s linear}
.cn-bar{width:100%;height:6px;border-radius:9px;background:color-mix(in oklab,var(--foreground) 9%,transparent);overflow:hidden}
.cn-bar i{display:block;height:100%;width:0;background:var(--gradient-brand);border-radius:9px;transition:width .4s linear}
.cn-stop{width:72px;height:72px;border-radius:50%;background:var(--gradient-brand);display:grid;place-items:center;color:#fff;position:relative;box-shadow:0 12px 28px color-mix(in oklab,var(--a1) 40%,transparent)}
.cn-stop::before{content:"";position:absolute;inset:-8px;border-radius:50%;border:2px solid var(--a1);opacity:0;animation:cn-pg 1.6s ease-out infinite}
@keyframes cn-pg{0%{transform:scale(.8);opacity:.6}100%{transform:scale(1.25);opacity:0}}
.cn-stop svg{fill:currentColor}
/* sample */
.cn-smp{display:flex;align-items:center;gap:12px;padding:12px;border-radius:22px;background:color-mix(in oklab,var(--foreground) 5%,transparent)}
.cn-pl{width:44px;height:44px;border-radius:50%;background:var(--gradient-brand);color:#fff;display:grid;place-items:center;flex:none}
.cn-pl svg{fill:currentColor}
.cn-mini{flex:1;min-width:0;display:flex;align-items:center;gap:3px;height:30px;cursor:pointer;touch-action:none}
.cn-mini b{flex:1;border-radius:3px;background:color-mix(in oklab,var(--foreground) 22%,transparent);transition:background .3s;pointer-events:none}
.cn-mini b.f{background:var(--a2)}
.cn-smp small{font-weight:800;font-size:11.5px;font-variant-numeric:tabular-nums;white-space:nowrap}
.cn-hint.l{text-align:left;margin:10px 4px 14px}
/* processing */
.cn-proc{text-align:center;padding:10px 0 4px}
.cn-proc p{font-weight:800;margin:0 0 4px}
.cn-proc small{color:var(--muted-foreground);font-weight:600;font-size:12.5px}
.cn-shim{height:8px;border-radius:9px;margin:16px 0 8px;background:color-mix(in oklab,var(--foreground) 9%,transparent);overflow:hidden;position:relative}
.cn-shim i{position:absolute;top:0;bottom:0;width:40%;border-radius:9px;background:var(--gradient-brand);animation:cn-sh 1.3s var(--ease-ios) infinite}
@keyframes cn-sh{0%{left:-40%}100%{left:100%}}
/* live */
.cn-live{display:flex;flex-direction:column;align-items:center}
.cn-livepill{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:800;padding:6px 12px;border-radius:99px;color:var(--success);background:color-mix(in oklab,var(--success) 13%,transparent);transition:.4s}
.cn-livepill b{width:8px;height:8px;border-radius:50%;background:currentColor;animation:cn-bl 1.4s ease-in-out infinite}
@keyframes cn-bl{50%{opacity:.3;transform:scale(.7)}}
.cn-live.warn .cn-livepill{color:var(--destructive);background:color-mix(in oklab,var(--destructive) 13%,transparent)}
.cn-ringw{position:relative;width:176px;height:176px;margin:16px 0 8px}
.cn-ringw svg{transform:rotate(-90deg);width:100%;height:100%;overflow:visible}
.cn-ringw .fg{stroke:url(#cn-gr);transition:stroke-dashoffset 1s linear}
.cn-ringw.fill .fg{transition:stroke-dashoffset 1.1s var(--ease-ios)}
.cn-live.warn .cn-ringw .fg{stroke:url(#cn-gw)}
.cn-live.warn .cn-ringw{animation:cn-pulse 1s ease-in-out infinite}
@keyframes cn-pulse{50%{transform:scale(1.03)}}
.cn-ct{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.cn-ct b{font-size:38px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1}
.cn-ct small{font-size:11.5px;font-weight:700;color:var(--muted-foreground);margin-top:6px;text-transform:uppercase;letter-spacing:.06em}
.cn-ringw.pop{animation:cn-popr .6s var(--ease-spring)}
@keyframes cn-popr{0%{transform:scale(.94)}60%{transform:scale(1.07)}100%{transform:scale(1)}}
.cn-note{font-size:12.5px;color:var(--muted-foreground);font-weight:600;text-align:center;margin:2px 0 14px}
.cn-voice{display:flex;align-items:center;gap:12px;width:100%;padding:12px;border-radius:22px;background:color-mix(in oklab,var(--foreground) 5%,transparent);margin-bottom:14px}
.cn-av{width:46px;height:46px;border-radius:50%;background:var(--gradient-brand);color:#fff;font-weight:800;display:grid;place-items:center;position:relative;overflow:hidden;flex:none}
.cn-av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cn-voice p{margin:0;font-weight:800;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cn-voice small{font-size:12px;color:var(--muted-foreground);font-weight:600}
.cn-rdy{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:800;color:var(--success);padding:5px 9px;border-radius:99px;background:color-mix(in oklab,var(--success) 13%,transparent);flex:none}
.cn-rdy b{width:6px;height:6px;border-radius:50%;background:currentColor}
.cn-acts{display:flex;gap:10px;margin-top:10px;width:100%}
.cn-xbtn{flex:1;min-width:0;display:flex;align-items:center;gap:10px;padding:9px 14px 9px 9px;border-radius:22px;text-align:left;background:color-mix(in oklab,var(--a2) 11%,transparent);border:1.5px solid color-mix(in oklab,var(--a2) 26%,transparent);transition:transform .35s var(--ease-spring),background .4s,opacity .3s;color:inherit}
.cn-xbtn:active{transform:scale(.96)}
.cn-xi{width:38px;height:38px;border-radius:14px;background:var(--gradient-brand);color:#fff;display:grid;place-items:center;flex:none;transition:.4s}
.cn-xt b{display:block;font-size:14px;font-weight:800;line-height:1.2}
.cn-xt small{display:block;font-size:11.5px;color:var(--muted-foreground);font-weight:700;transition:color .4s}
.cn-dots{margin-left:auto;display:flex;gap:4px}
.cn-dots i{width:8px;height:8px;border-radius:50%;background:var(--a1);transition:all .5s var(--ease-ios)}
.cn-dots i.used{background:color-mix(in oklab,var(--foreground) 16%,transparent);transform:scale(.65)}
.cn-xbtn[disabled]{opacity:.5;pointer-events:none}
.cn-live.warn .cn-xbtn{background:linear-gradient(120deg,#F7A35C,#EE5A7A);border-color:transparent;color:#fff;animation:cn-nudge 1.3s ease-in-out infinite}
.cn-live.warn .cn-xt small{color:rgba(255,255,255,.88)}
.cn-live.warn .cn-xi{background:rgba(255,255,255,.26)}
.cn-live.warn .cn-dots i{background:#fff}
.cn-live.warn .cn-dots i.used{background:rgba(255,255,255,.4)}
@keyframes cn-nudge{50%{transform:scale(1.025)}}
.cn-tbtn{width:62px;flex:none;border-radius:22px;display:grid;place-items:center;color:var(--destructive);background:color-mix(in oklab,var(--destructive) 9%,transparent);border:1.5px solid color-mix(in oklab,var(--destructive) 22%,transparent);transition:transform .35s var(--ease-spring)}
.cn-tbtn:active{transform:scale(.9) rotate(-6deg)}
/* expired */
.cn-exp{text-align:center;padding:6px 0}
.cn-eic{width:64px;height:64px;border-radius:50%;margin:0 auto 12px;display:grid;place-items:center;background:color-mix(in oklab,var(--destructive) 12%,transparent);color:var(--destructive);animation:cn-in .6s var(--ease-spring) both}
.cn-exp h3{margin:0 0 4px;font-size:18px;font-weight:800}
.cn-exp p{margin:0 0 16px;color:var(--muted-foreground);font-size:13px;font-weight:600}
/* shared slots */
.cn-sch{display:flex;align-items:center;justify-content:space-between}
.cn-sch h4{margin:0;font-size:14px;font-weight:800}
.cn-cnt{font-size:11.5px;font-weight:800;padding:5px 11px;border-radius:99px;background:color-mix(in oklab,var(--a2) 13%,transparent);color:var(--a2)}
.cn-sg{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px}
.cn-slt{border-radius:20px;padding:12px 4px 14px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:5px;min-height:98px;justify-content:center;position:relative;overflow:hidden}
.cn-in .cn-slt{animation:cn-in .55s var(--ease-ios) both}
.cn-si{width:34px;height:34px;border-radius:12px;display:grid;place-items:center}
.cn-slt b{font-size:11px;font-weight:800;line-height:1}
.cn-slt em{font-style:normal;font-size:11.5px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1}
.cn-slt.free{border:1.5px dashed color-mix(in oklab,var(--foreground) 20%,transparent);color:var(--muted-foreground)}
.cn-slt.used{background:color-mix(in oklab,var(--foreground) 6%,transparent);color:var(--muted-foreground)}
.cn-slt.used .cn-si{background:color-mix(in oklab,var(--foreground) 8%,transparent)}
.cn-slt.mine{color:#fff;background:var(--gradient-brand);box-shadow:0 10px 22px color-mix(in oklab,var(--a1) 32%,transparent);transition:background .5s}
.cn-slt.mine .cn-si{background:rgba(255,255,255,.25)}
.cn-slt.mine.warn{background:linear-gradient(120deg,#F7A35C,#EE5A7A)}
.cn-sb{position:absolute;left:12px;right:12px;bottom:7px;height:3px;border-radius:9px;background:rgba(255,255,255,.3);overflow:hidden}
.cn-sb u{display:block;height:100%;width:100%;background:#fff;border-radius:9px;transition:width 1s linear}
.cn-fn{display:flex;gap:7px;align-items:flex-start;font-size:11.5px;color:var(--muted-foreground);font-weight:600;margin:12px 2px 0;line-height:1.4}
.cn-fn svg{flex:none;margin-top:1px}
/* delete sheet */
.cn-shi{width:60px;height:60px;border-radius:50%;margin:4px auto 12px;display:grid;place-items:center;color:var(--destructive);background:color-mix(in oklab,var(--destructive) 12%,transparent)}
.cn-shp{margin:0 0 18px;font-size:13px;color:var(--muted-foreground);font-weight:600;line-height:1.45;text-align:center}
.cn-shb .cn-btn+.cn-btn{margin-top:10px}

/* ---------- package history (v1.0.108) ---------- */
.pkh-tl{position:relative;padding-left:22px;margin-top:6px}
.pkh-tl::before{content:"";position:absolute;left:6px;top:8px;bottom:8px;width:2px;border-radius:2px;background:linear-gradient(var(--a1),var(--a2),transparent);opacity:.35}
.pkh-grp .group-title{margin:18px 0 10px -22px;padding-left:22px}
.pkh-item{position:relative;margin-bottom:12px}
.pkh-item::before{content:"";position:absolute;left:-21px;top:24px;width:10px;height:10px;border-radius:50%;background:var(--glass-bg-strong);border:2px solid var(--a1);box-shadow:0 0 0 4px color-mix(in srgb,var(--a1) 14%,transparent)}
.pkh-item.on::before{background:var(--gradient-brand);border-color:#fff}
.pkh-item.ex::before{border-color:var(--muted-foreground);box-shadow:none}
.pkh-off{display:none}
.pkh-card{padding:16px;width:100%;display:block;text-align:left;cursor:pointer}
.pkh-ic{width:40px;height:40px;border-radius:14px;display:grid;place-items:center;color:#fff;background:var(--gradient-brand);flex:none}
.pkh-item.ex .pkh-ic{background:color-mix(in oklab,var(--foreground) 14%,transparent);color:var(--muted-foreground)}
.pkh-st{font-size:11px;font-weight:700;border-radius:999px;padding:3px 9px;display:inline-flex;flex-direction:row;align-items:center;gap:5px;white-space:nowrap;line-height:1.3}
.pkh-ok{color:var(--success);background:color-mix(in oklab,var(--success) 14%,transparent)}
.pkh-bad{color:var(--destructive);background:color-mix(in oklab,var(--destructive) 12%,transparent)}
.pkh-rn{color:var(--a2);background:color-mix(in oklab,var(--a2) 13%,transparent)}
.pkh-bar{height:8px;border-radius:99px;background:color-mix(in oklab,var(--foreground) 8%,transparent);overflow:hidden;margin-top:12px}
.pkh-bar i{display:block;height:100%;width:0;border-radius:99px;background:var(--gradient-brand);transition:width 1s var(--ease-ios)}
.pkh-item.ex .pkh-bar i{background:color-mix(in oklab,var(--foreground) 30%,transparent)}
.pkh-more{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .38s var(--ease-ios),opacity .3s}
.pkh-more>div{overflow:hidden}
.pkh-item.open .pkh-more{grid-template-rows:1fr;opacity:1}
.pkh-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;padding-top:14px;margin-top:14px;border-top:1px dashed color-mix(in oklab,var(--foreground) 16%,transparent)}
.pkh-grid p:first-child{font-size:11px;font-weight:600;color:var(--muted-foreground)}
.pkh-grid p:last-child{font-size:13px;font-weight:700;margin-top:1px}
.pkh-chev{display:inline-block;color:var(--muted-foreground);transition:transform .35s var(--ease-spring)}
.pkh-item.open .pkh-chev{transform:rotate(90deg)}
.pkh-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:14px;padding:12px 0;font-size:14px}
.pkh-chips{display:flex;gap:8px;overflow-x:auto;padding:2px 0 4px;scrollbar-width:none}
.pkh-chips::-webkit-scrollbar{display:none}
.pkh-chips .chip{padding:8px 16px;font-size:13px;font-weight:700;white-space:nowrap;border-radius:999px}
.pkh-ring{transform:rotate(-90deg);flex-shrink:0}
.pkh-ring .fg{stroke-dasharray:var(--pc);stroke-dashoffset:var(--pc);animation:pkh-ring 1.1s var(--ease-ios) .2s forwards}
@keyframes pkh-ring{to{stroke-dashoffset:var(--po)}}
#app.static .pkh-ring .fg{animation:none;stroke-dashoffset:var(--po)}

/* v1.0.119 — Floating Bubble locked screen (no package). Transform/opacity only; reduced-motion handled by the global rule. */
.bl-page{display:flex;flex-direction:column;gap:16px;min-height:calc(100dvh - 96px);padding-bottom:28px}
.bl-card{padding:28px 22px 22px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;animation:rise-in var(--dur-card) var(--ease-ios) both}
.bl-orb{position:relative;width:92px;height:92px;border-radius:50%;display:grid;place-items:center;animation:bl-pop 640ms var(--ease-spring) 80ms both;box-shadow:0 10px 28px color-mix(in oklab,var(--a2) 38%,transparent)}
.bl-orb i{position:absolute;inset:0;border-radius:50%;background:var(--gradient-orb);animation:bl-spin 14s linear infinite}
.bl-orb::before{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--a1);opacity:0;animation:bl-ring 2.8s var(--ease-ios) 1s infinite}
.bl-lk{position:relative;width:58px;height:58px;border-radius:50%;background:rgba(255,255,255,.94);color:var(--a1);display:grid;place-items:center;transform-origin:50% 80%;animation:bl-wig 760ms var(--ease-ios) 760ms both}
.bl-tag{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:color-mix(in oklab,var(--a1) 70%,black);background:color-mix(in oklab,var(--a1) 14%,white);border-radius:999px;padding:6px 12px}
.bl-h{margin:0;font-size:22px;line-height:1.25;font-weight:800;color:var(--foreground)}
.bl-p{margin:0;font-size:15px;line-height:1.5;color:var(--muted-foreground)}
.bl-perks{padding:6px 18px;display:flex;flex-direction:column;animation:rise-in var(--dur-card) var(--ease-ios) 360ms both}
.bl-row{display:flex;align-items:center;gap:12px;padding:14px 0;font-size:14px;font-weight:600;line-height:1.35}
.bl-row+.bl-row{border-top:1px solid color-mix(in oklab,var(--foreground) 9%,transparent)}
.bl-ck{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;color:#fff;background:var(--gradient-brand);animation:bl-pop 420ms var(--ease-spring) var(--d,0ms) both}
.bl-sp{flex:1 1 auto}
.bl-act{display:flex;flex-direction:column;gap:10px}
.bl-in{animation:rise-in 420ms var(--ease-ios) var(--d,0ms) both}
.bl-cta{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:58px;font-size:17px;font-weight:800;border-radius:29px;text-decoration:none}
.bl-cta::after{content:"";position:absolute;top:0;bottom:0;left:-40%;width:30%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:translateX(0) skewX(-18deg);animation:bl-shine 1.1s var(--ease-ios) 1.5s 1 both}
.bl-alt{display:flex;align-items:center;justify-content:center;height:52px;border-radius:26px;background:var(--glass-bg-strong);border:1px solid color-mix(in oklab,var(--a1) 22%,white);color:color-mix(in oklab,var(--a1) 62%,black);font-size:15px;font-weight:700;text-decoration:none;transition:transform var(--dur-micro) var(--ease-spring),background var(--dur-micro) var(--ease-ios)}
.bl-alt:active{transform:scale(.97)}
@keyframes bl-pop{0%{opacity:0;transform:scale(.55) rotate(-8deg)}60%{opacity:1;transform:scale(1.07)}100%{opacity:1;transform:none}}
@keyframes bl-spin{to{transform:rotate(360deg)}}
@keyframes bl-ring{0%{opacity:.45;transform:scale(1)}100%{opacity:0;transform:scale(1.55)}}
@keyframes bl-wig{0%{transform:rotate(0)}25%{transform:rotate(-12deg)}50%{transform:rotate(9deg)}75%{transform:rotate(-4deg)}100%{transform:rotate(0)}}
@keyframes bl-shine{from{transform:translateX(0) skewX(-18deg)}to{transform:translateX(520%) skewX(-18deg)}}
@media (prefers-reduced-motion:reduce){.bl-orb i,.bl-orb::before,.bl-cta::after{animation:none!important}.bl-orb::before,.bl-cta::after{display:none}}

.st-hist{scroll-margin-top:calc(env(safe-area-inset-top) + 78px)}

/* ---------- email login + Login details (v1.0.123) ---------- */
.su-stack{display:flex;flex-direction:column;gap:12px;padding:16px;text-align:left}
.su-or.lc{margin:2px 0;text-transform:none;letter-spacing:0;font-size:12px;font-weight:600;gap:10px}
.su-form{display:flex;flex-direction:column;gap:12px}
.su-f{display:flex;align-items:center;gap:10px;height:54px;padding:0 16px;border-radius:18px;background:color-mix(in oklab,var(--foreground) 6%,transparent);color:var(--muted-foreground);font-size:14px;font-weight:600;text-align:left;transition:box-shadow .2s var(--ease-ios,ease)}
.su-f svg{flex:none}
.su-f input{flex:1;min-width:0;border:0;background:none;outline:0;font:inherit;color:var(--foreground)}
.su-f input::placeholder{color:var(--muted-foreground);opacity:.9}
.su-f:focus-within{box-shadow:0 0 0 2px color-mix(in oklab,var(--a1) 55%,transparent)}
.su-eye{border:0;background:none;color:var(--muted-foreground);display:grid;padding:0;flex:none}
.su-login{height:54px;width:100%;font-size:15px;font-weight:800}
.su-err{margin:0;font-size:13px;font-weight:600;line-height:1.4;color:var(--destructive)}
.su-note{margin:0;padding:10px 12px;border-radius:14px;font-size:12.5px;line-height:1.5;font-weight:500;text-align:left;color:var(--muted-foreground);background:color-mix(in oklab,var(--a1) 9%,transparent)}
.su-note b{color:var(--foreground)}

/* ---------- Login details redesign (v1.0.124) ---------- */
.lg-page{display:flex;flex-direction:column;gap:14px;padding-bottom:44px}
.lg-page.lg-off .lg-has{display:none}
.lg-none{display:none;padding:28px 20px;text-align:center}
.lg-page.lg-off .lg-none{display:block}
.lg-none .ic{width:58px;height:58px;border-radius:20px;margin:0 auto 14px;display:grid;place-items:center;color:#fff;background:var(--gradient-brand);box-shadow:0 10px 22px color-mix(in srgb,var(--a1) 32%,transparent)}
.lg-none b{display:block;font-size:16px;font-weight:800}
.lg-none p{margin:6px auto 0;max-width:20rem;font-size:13px;line-height:1.55;font-weight:500;color:var(--muted-foreground)}
.lg-box{display:flex;align-items:center;gap:10px;margin-top:8px;padding:12px 12px 12px 16px;min-height:54px;border-radius:18px;background:color-mix(in oklab,var(--a2) 11%,transparent);border:1px solid color-mix(in oklab,var(--foreground) 14%,transparent)}
.lg-pwl{margin-top:18px}
.lg-val{flex:1;min-width:0;font-size:15px;font-weight:700;overflow-wrap:anywhere;word-break:break-all}
.lg-val.mono{font:700 17px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em;-webkit-user-select:all;user-select:all;font-variant-ligatures:none}
.lg-val.hid{letter-spacing:.16em;color:var(--muted-foreground)}
.lg-mini{flex:none;width:38px;height:38px;border-radius:13px;display:grid;place-items:center;color:var(--a1);background:color-mix(in oklab,var(--a1) 13%,transparent);transition:transform var(--dur-micro) var(--ease-spring),background .3s,color .3s}
.lg-mini:active{transform:scale(.88)}
.lg-mini.done,.ac-b.done{color:#fff;background:var(--success)!important;border-color:transparent!important;box-shadow:0 6px 14px color-mix(in srgb,var(--success) 30%,transparent)}
.lg-mini svg,.ac-b svg{animation:lg-pop .35s var(--ease-spring) both}
@keyframes lg-pop{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}
.lg-tip{display:flex;gap:12px;align-items:flex-start;padding:15px 16px;border-radius:24px}
.lg-tip .ic,.lg-hd .ic{flex:none;width:40px;height:40px;border-radius:14px;display:grid;place-items:center;color:var(--a1);background:color-mix(in oklab,var(--a1) 13%,transparent)}
.lg-tip b{display:block;font-size:14px;font-weight:700}
.lg-tip p{margin:3px 0 0;font-size:12.5px;line-height:1.55;font-weight:500;color:var(--muted-foreground)}
.lg-chg{padding:18px;border-radius:28px;display:flex;flex-direction:column;gap:12px}
.lg-hd{display:flex;align-items:center;gap:12px;margin-bottom:2px}
.lg-hd b{display:block;font-size:16px;font-weight:800;letter-spacing:-.01em}
.lg-hd small{display:block;margin-top:1px;font-size:12px;font-weight:600;color:var(--muted-foreground)}
.lg-chg .su-f{height:52px;border-radius:16px}
.lg-ok{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;color:#fff;background:var(--success);transform:scale(0);opacity:0;transition:transform .4s var(--ease-spring),opacity .2s}
.su-f.ok .lg-ok{transform:scale(1);opacity:1}
.lg-meter{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:-4px}
.lg-meter i{position:relative;overflow:hidden;height:5px;border-radius:9px;background:color-mix(in oklab,var(--foreground) 10%,transparent)}
.lg-meter i::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--c,#ef4444);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease-ios),background .3s}
.lg-meter[data-s="1"]{--c:#ef4444}.lg-meter[data-s="2"]{--c:#f59e0b}.lg-meter[data-s="3"]{--c:#84cc16}.lg-meter[data-s="4"]{--c:#22c55e}
.lg-meter[data-s="1"] i:nth-child(-n+1)::after,.lg-meter[data-s="2"] i:nth-child(-n+2)::after,.lg-meter[data-s="3"] i:nth-child(-n+3)::after,.lg-meter[data-s="4"] i:nth-child(-n+4)::after{transform:scaleX(1)}
.lg-meter[data-s="1"] i:nth-child(2)::after,.lg-meter[data-s="2"] i:nth-child(3)::after,.lg-meter[data-s="3"] i:nth-child(4)::after{transition-delay:.06s}
.lg-ms{display:flex;justify-content:space-between;gap:10px;margin-top:-4px;font-size:12px;font-weight:600;color:var(--muted-foreground)}
.lg-ms span:last-child{flex:none;font-weight:800;color:var(--foreground)}
.ld-save{height:52px;width:100%;font-size:15px;font-weight:800;margin-top:2px}
.lg-gen{display:flex;align-items:center;justify-content:center;gap:8px;height:48px;border-radius:99px;font-size:14px;font-weight:800;color:var(--a1);background:var(--glass-bg-strong);border:1.5px solid color-mix(in oklab,var(--a1) 30%,transparent);transition:transform var(--dur-micro) var(--ease-spring),background .25s,color .25s,border-color .25s}
.lg-gen.arm{color:#fff;background:var(--gradient-brand);border-color:transparent;box-shadow:0 8px 18px color-mix(in srgb,var(--a1) 30%,transparent)}
.lg-gen svg{transition:transform .5s var(--ease-ios)}.lg-gen:active svg{transform:rotate(180deg)}
.lg-gen.spin svg{animation:lg-spin .8s linear infinite}
@keyframes lg-spin{to{transform:rotate(360deg)}}
.lg-chg.shake{animation:lg-shake .42s var(--ease-ios)}
@keyframes lg-shake{20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
.ld-sp{width:46px;flex:none}
.lg-page .ac-pill b{animation:lg-dot 2s ease-in-out infinite}
@keyframes lg-dot{50%{box-shadow:0 0 0 5px rgba(124,255,196,.0);opacity:.55}}
.no-anim .lg-page *{animation:none!important}