/* === Tailwind utilities (precompiled, replaces runtime CDN) === */
*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/*,:after,:before{border:0 solid #e5e7eb;box-sizing:border-box}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-tap-highlight-color:transparent}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{color:inherit;font-family:inherit;font-feature-settings:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{color:#9ca3af;opacity:1}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]:where(:not([hidden=until-found])){display:none}.\!container{width:100%!important}.container{width:100%}@media (min-width:640px){.\!container{max-width:640px!important}.container{max-width:640px}}@media (min-width:768px){.\!container{max-width:768px!important}.container{max-width:768px}}@media (min-width:1024px){.\!container{max-width:1024px!important}.container{max-width:1024px}}@media (min-width:1280px){.\!container{max-width:1280px!important}.container{max-width:1280px}}@media (min-width:1536px){.\!container{max-width:1536px!important}.container{max-width:1536px}}.visible{visibility:visible}.collapse{visibility:collapse}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:0}.right-4{right:1rem}.top-4{top:1rem}.isolate{isolation:isolate}.z-50{z-index:50}.mx-auto{margin-left:auto;margin-right:auto}.mb-1{margin-bottom:.25rem}.mb-8{margin-bottom:2rem}.mt-4{margin-top:1rem}.block{display:block}.inline{display:inline}.flex{display:flex}.\!grid{display:grid!important}.grid{display:grid}.contents{display:contents}.list-item{display:list-item}.hidden{display:none}.h-4{height:1rem}.h-5{height:1.25rem}.h-8{height:2rem}.h-full{height:100%}.min-h-screen{min-height:100vh}.w-4{width:1rem}.w-5{width:1.25rem}.w-8{width:2rem}.w-full{width:100%}.max-w-3xl{max-width:48rem}.max-w-md{max-width:28rem}.flex-1{flex:1 1 0%}.flex-shrink{flex-shrink:1}.flex-shrink-0{flex-shrink:0}.shrink{flex-shrink:1}.grow{flex-grow:1}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-pointer{cursor:pointer}.resize{resize:both}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-stretch{align-items:stretch}.justify-start{justify-content:flex-start}.justify-center{justify-content:center}.gap-3{gap:.75rem}.gap-6{gap:1.5rem}.overflow-hidden{overflow:hidden}.overflow-x-hidden{overflow-x:hidden}.rounded{border-radius:.25rem}.rounded-3xl{border-radius:1.5rem}.rounded-full{border-radius:9999px}.rounded-xl{border-radius:.75rem}.border{border-width:1px}.border-0{border-width:0}.bg-transparent{background-color:transparent}.p-4{padding:1rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-3{padding-top:.75rem}.pb-3,.py-3{padding-bottom:.75rem}.pt-6{padding-top:1.5rem}.text-center{text-align:center}.text-2xl{font-size:1.5rem;line-height:2rem}.text-base{font-size:1rem;line-height:1.5rem}.text-sm{font-size:.875rem;line-height:1.25rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.lowercase{text-transform:lowercase}.italic{font-style:italic}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.underline{text-decoration-line:underline}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.outline-none{outline:2px solid transparent;outline-offset:2px}.outline{outline-style:solid}.ring{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.blur{--tw-blur:blur(8px)}.blur,.grayscale{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.grayscale{--tw-grayscale:grayscale(100%)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-filter{-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.\[type\:payload\]{type:payload}@media (min-width:640px){.sm\:p-10{padding:2.5rem}}
/* === Site-specific styles (was main-2732087391.css) === */

    /* While the app window is opening or closing, pause every infinite
       decorative animation in the document. Shimmer/wave/orb keyframes
       run forever and constantly hold GPU + compositor resources; even
       when WAA-driven app animations are compositor-only, they have to
       share the GPU with these. Pausing them for the ~600 ms of the
       open/close gives the app animation full GPU bandwidth and is the
       most impactful Chrome-desktop smoothness fix when transform/
       opacity work alone wasn't enough.
       Targets: shimmer, purpleWaveFlow, siriOrbFlow/Pulse, greyShimmer,
       authCardWaveLoading/GlowLoading, smoothFlicker, blink — basically
       anything that runs forever. */
    html.anim-suspend *,
    html.anim-suspend *::before,
    html.anim-suspend *::after {
      animation-play-state: paused !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
      filter: none !important;
    }
    /* v598 — EXCLUDE the open-app animation itself from the suspend.
       The previous wildcard `*` was pausing the @keyframes appWindowOpenAnim
       running on .app-window-card the instant it started, because
       anim-suspend is added on <html> in the same JS frame as
       .is-opening on the view. The card animation must override
       the suspend; we unpause it explicitly. */
    html.anim-suspend .app-window-card,
    html.anim-suspend .app-window-view.is-opening .app-window-card,
    html.anim-suspend .app-window-view.is-active  .app-window-card {
      animation-play-state: running !important;
    }
    /* (An earlier `visibility: hidden` block on launcher elements was
       removed — it caused the bottom search bar to disappear during
       the open animation and the launcher tiles to flash empty during
       the close animation. The animation-play-state pause above still
       gives most of the GPU win without those side-effects.) */

    /* ────────────────────────────────────────────────────────────────
       APP-OPEN PAUSE — diagnosed 2026-05-25 from a DevTools Performance
       trace + the user's "smooth at mobile width, choppy at desktop width"
       finding. At desktop sizes the launcher card and "Ask me anything"
       bar are wider, so every infinite background animation
       (purpleWaveFlow, shimmer, airy-wave-bg) repaints a much larger
       rectangle each frame. While an app is open these effects keep
       firing in the DOM behind the iframe, stealing main-thread cycles
       from the same-origin iframe and showing up as in-app chop.

       Pause all infinite animations + drop the heavy GPU filters on the
       launcher subtree the entire time an app is active. Resumes
       automatically when the user closes the app.
       ──────────────────────────────────────────────────────────────── */
    #open-state.app-window-active *,
    #open-state.app-window-active *::before,
    #open-state.app-window-active *::after {
      animation-play-state: paused !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
      filter: none !important;
    }
    /* v598 — same exception for the .app-window-active pause: the
       open animation must keep running through the .is-opening phase
       even though #open-state now carries .app-window-active. */
    #open-state.app-window-active .app-window-view.is-opening .app-window-card,
    #open-state.app-window-active .app-window-view.is-active  .app-window-card {
      animation-play-state: running !important;
    }

    /* ════════════════════════════════════════════════════════════════
       DESKTOP-WIDTH ANIMATION FREEZE — confirmed fix 2026-05-25
       Diagnostic v1 (filter / backdrop-filter site-wide off) → no change.
       So filters are NOT the cause; we keep them on for visual polish.
       Diagnostic v2 (animation off site-wide) → user reported chop
       dramatically improved, "almost like Safari". So the 48 infinite
       CSS keyframe animations are the cause: at desktop width each
       invalidated paint rect is ~4× wider than at mobile, ~4× more
       raster tiles per frame, blowing the GPU/raster frame budget.

       Production rule: keep all animations on at mobile (already smooth
       per user), disable them only at ≥ 768px where the cost scales
       beyond frame budget. Mobile UI keeps its polish; desktop UI gets
       Safari-level smoothness. If any specific desktop animation turns
       out to be visually load-bearing, re-enable it with a more
       specific selector (its own `animation: ... !important;` rule).
       ════════════════════════════════════════════════════════════════ */
    @media (min-width: 768px) {
      *, *::before, *::after {
        animation: none !important;
      }
      /* HIDE the purpleWaveFlow blurred ::before overlay on the search
         bar at desktop. At mobile width the blurred surface is small
         (~280 px wide); at desktop the search bar widens to ~600+ px so
         the same ::before becomes a large `filter: blur(3px)` raster
         surface that exists per frame even with the animation paused.
         That blurred surface scales with viewport width and is
         repainted by Chrome whenever anything inside the search bar
         changes (focus state, hover, etc.) — a major contributor to
         "bigger screen lags more" per user 2026-05-25. Removing it at
         desktop loses a subtle purple-glow effect but the search bar
         still has its main background. */
      #open-state:not(.hidden) .search-container .rounded-3xl::before {
        display: none !important;
      }
    }

    /* (smooth app-window experiments fully reverted — the standalone
       smooth overlay works at /test. Retrofitting onto the production
       index.html kept breaking the page; needs a proper refactor.) */

    /* ════════════════════════════════════════════════════════════════
       APP-WINDOW + SEARCH-BAR PERF REBUILD — 2026-05-25 v190
       User asked to "rebuild without the lag" while keeping every
       visual unchanged. This block adds aggressive CSS containment on
       the three perf-critical elements (.app-window-view, .app-window-
       card, .search-container). Containment tells the browser these
       elements are rendering islands — their layout, style, and paint
       work cannot affect anything outside their box, and vice versa.
       That's the biggest win available without changing visuals.

       • `contain: layout` — children's layout changes don't bubble up
         (e.g. iframe content reflow no longer re-lays-out the parent).
       • `contain: paint` — painting is clipped to the box; off-box
         content can't trigger our paint and our paint can't bleed.
       • `contain: style` — counter / quotes / etc. don't escape.
       Combined: each element becomes a paint+layout silo. Chrome's
       compositor can rasterize it independently and skip the cascade
       work that's been showing up as desktop lag.

       Adding `content-visibility: auto` to .app-window-iframe in the
       app-window-active state would be an even bigger win but risks
       blanking the iframe momentarily during the active state, so we
       skip that one.
       ════════════════════════════════════════════════════════════════ */
    /* REMOVED: `contain: layout style paint !important` on
       .app-window-view / .app-window-card / .app-window-iframe.
       The `contain: paint` on iframe ancestors was blocking
       trackpad-driven wheel-event delivery to overflow:auto
       descendants inside the iframe. macOS Chrome/Safari rely on
       wheel events to bubble up to the scroll-eligible ancestor;
       `contain: paint` interrupts that chain. Old c4f0b998 /
       97390ea1 never had these rules — that's why scroll worked
       there. The 5-MB perf experiment isn't worth a broken UX. */
    .search-container {
      contain: layout style !important;
    }

    /* CSS Variables for Light Mode (Default) */
    :root {
      --bg-primary: #F2F2F7;
      --bg-card: #FFFFFF;
      --bg-button: #E1E1E6;
      --bg-button-hover: #F2F2F7;
      --text-primary: #000000;
      --text-secondary: #505050;
      --text-tertiary: #8E8E93;
      --text-quaternary: #B7B7B7;
      --text-placeholder: #C7C7CC;
      --border-color: #969696;
      --border-light: #E5E5EA;
      --border-input: #E5E5EA;
      --divider-color: #E5E5EA;
      --shadow-color: rgba(0, 0, 0, 0.12);
      --shadow-light: rgba(0, 0, 0, 0.08);
      --shadow-modal: rgba(0, 0, 0, 0.4);
      --icon-gray: #8E8E93;
      --icon-light-gray: #C7C7CC;
    }

    /* Initial load: force light palette until script applies final theme */
    :root.theme-init {
      --bg-primary: #F2F2F7 !important;
      --bg-card: #FFFFFF !important;
      --bg-button: #E1E1E6 !important;
      --bg-button-hover: #F2F2F7 !important;
      --text-primary: #000000 !important;
      --text-secondary: #505050 !important;
      --text-tertiary: #8E8E93 !important;
      --text-quaternary: #B7B7B7 !important;
      --text-placeholder: #C7C7CC !important;
      --border-color: #969696 !important;
      --border-light: #E5E5EA !important;
      --border-input: #E5E5EA !important;
      --divider-color: #E5E5EA !important;
      --shadow-color: rgba(0, 0, 0, 0.12) !important;
      --shadow-light: rgba(0, 0, 0, 0.08) !important;
      --shadow-modal: rgba(0, 0, 0, 0.4) !important;
      --icon-gray: #8E8E93 !important;
      --icon-light-gray: #C7C7CC !important;
    }

    html {
      overflow-x: hidden;
    }
    /* Body background */
    body {
      background-color: var(--bg-primary);
      color: var(--text-primary);
      overflow-x: hidden;
    }

    @keyframes shimmer {
      0% { background-position: 300% 0; }
      100% { background-position: -300% 0; }
    }

    /* Subtle tap feedback — edge-to-edge (no scale) so list rows don't show gaps on right/left */
    @keyframes tapBounce {
      0%   { filter: brightness(1); background-color: transparent; }
      28%  { filter: brightness(0.92); background-color: rgba(0,0,0,0.05); }
      62%  { filter: brightness(0.98); background-color: rgba(0,0,0,0.02); }
      100% { filter: brightness(1); background-color: transparent; }
    }
    @keyframes tapBounceDark {
      0%   { filter: brightness(1); background-color: transparent; }
      28%  { filter: brightness(1.14); background-color: rgba(255,255,255,0.055); }
      62%  { filter: brightness(1.04); background-color: rgba(255,255,255,0.02); }
      100% { filter: brightness(1); background-color: transparent; }
    }
    .tap-bounce-anim,
    .tap-bounce-anim:active {
      animation: tapBounce 0.32s cubic-bezier(0.22, 0.61, 0.36, 1) !important;
    }
    @media (prefers-color-scheme: dark) {
      .tap-bounce-anim,
      .tap-bounce-anim:active {
        animation: tapBounceDark 0.32s cubic-bezier(0.22, 0.61, 0.36, 1) !important;
      }
    }
    
    @-webkit-keyframes shimmer {
      0% { background-position: 300% 0; }
      100% { background-position: -300% 0; }
    }
    
    /* Base shimmer-text styles (light mode) */
    .shimmer-text {
      color: #B7B7B7;
      background: linear-gradient(90deg, #B7B7B7 0%, #B7B7B7 30%, #6C6C6C 50%, #B7B7B7 70%, #B7B7B7 100%);
      background-size: 300% 100%;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      animation: shimmer 6s linear infinite;
      contain: layout style;
    }
    
    /* Pause shimmer animation when app is open to save CPU */
    #open-state .shimmer-text,
    .app-window-view.is-active ~ * .shimmer-text,
    #open-state.launcher-active .shimmer-text {
      animation-play-state: paused;
    }

    /* CSS Variables for Dark Mode - ONLY applies when .theme-dark is explicitly set */
    /* This prevents dark flash during initial load, but allows dark mode when user selects it */
    /* NOTE: Main .theme-dark rule is defined later in CSS, this is just for shimmer/placeholder */
    
    :root.theme-dark .shimmer-text {
        color: #3B3B3B;
        background: linear-gradient(90deg, #3B3B3B 0%, #3B3B3B 30%, #FFFFFF 50%, #3B3B3B 70%, #3B3B3B 100%);
        background-size: 300% 100%;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        animation: shimmer 6s linear infinite;
      }
      
    :root.theme-dark input::placeholder {
        color: var(--text-placeholder);
        opacity: 1;
    }
    
    /* Placeholder color for light mode */
    input::placeholder {
      color: var(--text-placeholder);
      opacity: 1;
    }
    :root.theme-dark {
      --bg-primary: #121214 !important;
      --bg-card: #1C1C1C !important;
      --bg-button: #1F1F21 !important;
      --bg-button-hover: #3A3A3C !important;
      --text-primary: #FFFFFF !important;
      --text-secondary: #EBEBF5 !important;
      --text-tertiary: #98989D !important;
      --text-quaternary: #636366 !important;
      --text-placeholder: #636366 !important;
      --border-color: #38383A !important;
      --border-light: #1F1F21 !important;
      --border-input: #38383A !important;
      --divider-color: #38383A !important;
      --shadow-color: rgba(0, 0, 0, 0.3) !important;
      --shadow-light: rgba(0, 0, 0, 0.2) !important;
      --shadow-modal: rgba(0, 0, 0, 0.6) !important;
      --icon-gray: #98989D !important;
      --icon-light-gray: #636366 !important;
      color-scheme: dark;
    }
    :root.theme-light {
      /* Light mode now uses the "New White" design tokens */
      --bg-primary: #E8E8EE !important;
      --bg-card: #FFFFFF !important;
      --bg-button: #FFFFFF !important;
      --bg-button-hover: #E8E8EE !important;
      --text-primary: #1d1d1f !important;
      --text-secondary: #3a3a3c !important;
      --text-tertiary: #6e6e73 !important;
      --text-quaternary: #8e8e93 !important;
      --text-placeholder: #C7C7CC !important;
      --border-color: #E5E5EA !important;
      --border-light: #F2F2F7 !important;
      --border-input: #D1D1D6 !important;
      --divider-color: #E5E5EA !important;
      --shadow-color: rgba(0, 0, 0, 0.08) !important;
      --shadow-light: rgba(0, 0, 0, 0.04) !important;
      --shadow-modal: rgba(0, 0, 0, 0.12) !important;
      --icon-gray: #8E8E93 !important;
      --icon-light-gray: #C7C7CC !important;
      color-scheme: light;
    }
    html.theme-light,
    html.theme-light body {
      background-color: #E8E8EE !important;
    }
    /* NEW WHITE: Deeper grey stage (#E8E8EE) for strong modal contrast + white list + white modal */
    :root.theme-new-white {
      --bg-primary: #E8E8EE !important;
      --bg-card: #FFFFFF !important;
      --bg-button: #FFFFFF !important;
      --bg-button-hover: #E8E8EE !important;
      --text-primary: #1d1d1f !important;
      --text-secondary: #3a3a3c !important;
      --text-tertiary: #6e6e73 !important;
      --text-quaternary: #8e8e93 !important;
      --text-placeholder: #C7C7CC !important;
      --border-color: #E5E5EA !important;
      --border-light: #F2F2F7 !important;
      --border-input: #D1D1D6 !important;
      --divider-color: #E5E5EA !important;
      --shadow-color: rgba(0, 0, 0, 0.08) !important;
      --shadow-light: rgba(0, 0, 0, 0.04) !important;
      --shadow-modal: rgba(0, 0, 0, 0.12) !important;
      --icon-gray: #8E8E93 !important;
      --icon-light-gray: #C7C7CC !important;
      color-scheme: light;
    }
    html.theme-new-white,
    html.theme-new-white body {
      background-color: #E8E8EE !important;
    }
    @media (prefers-color-scheme: dark) {
      :root.theme-new-white {
        --bg-primary: #E8E8EE !important;
        --bg-card: #FFFFFF !important;
        --bg-button: #FFFFFF !important;
        --bg-button-hover: #E8E8EE !important;
        --text-primary: #1d1d1f !important;
        --text-secondary: #3a3a3c !important;
        --text-tertiary: #6e6e73 !important;
        --text-quaternary: #8e8e93 !important;
        --text-placeholder: #C7C7CC !important;
        --border-color: #E5E5EA !important;
        --border-light: #F2F2F7 !important;
        --border-input: #D1D1D6 !important;
        --divider-color: #E5E5EA !important;
        color-scheme: light !important;
      }
      html.theme-new-white,
      html.theme-new-white body {
        background-color: #F2F2F7 !important;
      }
    }
    /* Studio feature grid list — white gradient (99% close to white, cool tint) per guideline */
    html.theme-new-white .studio-feature-grid {
      background: linear-gradient(180deg, #ffffff 0%, #fbfbfe 100%) !important;
      border: 0.5px solid rgba(0,0,0,0.07) !important;
      box-shadow:
        inset 0 1px 3px rgba(0,0,0,0.07),
        inset 0 0 0 0.5px rgba(0,0,0,0.08),
        0 1px 3px rgba(0,0,0,0.04),
        0 0.5px 0 rgba(255,255,255,0.8) !important;
      --text-primary: #1d1d1f !important;
      --text-secondary: rgba(60,60,67,0.60) !important;
      --text-tertiary: rgba(60,60,67,0.45) !important;
      --text-quaternary: rgba(60,60,67,0.30) !important;
    }
    html.theme-new-white .studio-feature-card {
      background: transparent;
      border-bottom: 1px solid rgba(0,0,0,0.08);
      box-shadow: none;
    }
    html.theme-new-white .studio-feature-card:last-child { border-bottom: none; }
    html.theme-new-white .studio-feature-card:hover { background: rgba(0,0,0,0.03); }
    html.theme-new-white .studio-feature-card:active { background: rgba(0,0,0,0.06); transform: scale(0.985); }
    html.theme-new-white .studio-feature-grid .studio-feature-title {
      color: #1d1d1f !important;
      text-shadow: 0 0.5px 0 rgba(255,255,255,0.6);
    }
    html.theme-new-white .studio-feature-grid .studio-feature-desc  { color: rgba(60,60,67,0.60) !important; }
    html.theme-new-white .studio-feature-grid .studio-feature-arrow { color: rgba(60,60,67,0.30) !important; }
    html.theme-new-white .studio-feature-icon {
      box-shadow:
        0 1px 3px rgba(0,0,0,0.06),
        0 0.5px 1px rgba(0,0,0,0.04),
        inset 0 1px 0 rgba(255,255,255,1),
        inset 0 -1px 0 rgba(0,0,0,0.06);
    }
    /* Startup product list rows inside the white grid */
    html.theme-new-white .studio-feature-grid .startup-product {
      background: transparent;
      border-bottom: 1px solid rgba(0,0,0,0.08);
      box-shadow: none;
      color: #1d1d1f;
      /* Subtle bounce: spring curve on release overshoots back past 1.0 */
      transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.18s ease-out;
    }
    html.theme-new-white .studio-feature-grid .startup-product:last-child { border-bottom: none; }
    html.theme-new-white .studio-feature-grid .startup-product:hover { background: rgba(0,0,0,0.03); }
    html.theme-new-white .studio-feature-grid .startup-product:active {
      background: rgba(0,0,0,0.08);
      transform: none;
      transition: background 0.08s ease-out;
    }
    /* Muted/secondary text inside the white list */
    html.theme-new-white .studio-feature-grid .studio-feature-desc,
    html.theme-new-white .studio-feature-grid .startup-product-desc,
    html.theme-new-white .studio-feature-grid .startup-product-price,
    html.theme-new-white .studio-feature-grid [class*="muted"],
    html.theme-new-white .studio-feature-grid [class*="secondary"] { color: rgba(60,60,67,0.60) !important; }
    /* Profile menu list — same white gradient treatment */
    html.theme-new-white .prof-menu-list {
      background: linear-gradient(180deg, #ffffff 0%, #fbfbfe 100%) !important;
      border: 0.5px solid rgba(0,0,0,0.07) !important;
      box-shadow:
        inset 0 1px 3px rgba(0,0,0,0.07),
        inset 0 0 0 0.5px rgba(0,0,0,0.08),
        0 1px 3px rgba(0,0,0,0.04),
        0 0.5px 0 rgba(255,255,255,0.8) !important;
      --text-primary: #1d1d1f !important;
      --text-secondary: rgba(60,60,67,0.60) !important;
      --text-tertiary: rgba(60,60,67,0.45) !important;
      --text-quaternary: rgba(60,60,67,0.30) !important;
    }
    html.theme-new-white .prof-menu-item {
      background: transparent;
      border-bottom-color: rgba(0,0,0,0.08) !important;
      box-shadow: none;
    }
    html.theme-new-white .prof-menu-item:last-child { border-bottom: none; }
    html.theme-new-white .prof-menu-item:hover { background: rgba(0,0,0,0.03); }
    html.theme-new-white .prof-menu-item:active { background: rgba(0,0,0,0.06); transform: scale(0.985); }
    html.theme-new-white .prof-menu-list .prof-menu-label {
      color: #1d1d1f !important;
      text-shadow: 0 0.5px 0 rgba(255,255,255,0.6);
    }
    html.theme-new-white .prof-menu-list .prof-menu-detail { color: #8e8e93 !important; }
    html.theme-new-white .prof-menu-list .prof-menu-chevron { color: #C7C7CC !important; }
    html.theme-new-white .prof-menu-list .prof-menu-icon { color: #1d1d1f !important; }
    /* Deeper grey stage (#E8E8EE) — profile/startup overlay + footer */
    html.theme-new-white .prof-overlay,
    html.theme-new-white .startup-overlay { background: #E8E8EE !important; }
    html.theme-new-white .prof-footer {
      background: rgba(232,232,238,0.92) !important;
      border-top-color: rgba(0,0,0,0.08) !important;
    }
    html.theme-new-white .prof-footer-text { color: #6e6e73 !important; }
    /* Tap here to open bar - skeuomorphic white pill per guideline */
    html.theme-new-white #open-btn {
      /* White bar — pure white top with a hair of warmth at the bottom for depth */
      background: linear-gradient(180deg, #ffffff 0%, #fbfbfe 100%) !important;
      border: 0.5px solid rgba(0,0,0,0.08);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,1),
        inset 0 -1px 0 rgba(0,0,0,0.04),
        inset 0 0 0 0.5px rgba(0,0,0,0.06),
        0 1px 3px rgba(0,0,0,0.06),
        0 0.5px 1px rgba(0,0,0,0.04),
        0 8px 24px rgba(0,0,0,0.08) !important;
      transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease-out;
    }
    html.theme-new-white #open-btn:hover {
      background: linear-gradient(180deg, #ffffff 0%, #fcfcff 100%) !important;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,1),
        inset 0 -1px 0 rgba(0,0,0,0.04),
        inset 0 0 0 0.5px rgba(0,0,0,0.07),
        0 2px 4px rgba(0,0,0,0.07),
        0 0.5px 1px rgba(0,0,0,0.04),
        0 10px 28px rgba(0,0,0,0.09) !important;
    }
    html.theme-new-white #open-btn:active {
      transform: scale(0.985);
      transition: transform 0.1s ease-out, box-shadow 0.1s ease-out;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.9),
        inset 0 -1px 0 rgba(0,0,0,0.05),
        inset 0 0 0 0.5px rgba(0,0,0,0.08),
        0 1px 2px rgba(0,0,0,0.08),
        0 4px 12px rgba(0,0,0,0.06) !important;
    }
    html.theme-new-white #open-btn .shimmer-text {
      /* Darker grey shimmer — use longhand so background-position stays animatable.
         The `background:` shorthand would implicitly reset background-position to 0 0
         with !important, which (per cascade spec) beats the @keyframes animation. */
      background-image: linear-gradient(90deg, #8E8E93 0%, #8E8E93 30%, #3A3A3C 50%, #8E8E93 70%, #8E8E93 100%) !important;
      background-size: 300% 100% !important;
      -webkit-background-clip: text !important;
      background-clip: text !important;
      -webkit-text-fill-color: transparent !important;
      color: transparent !important;
      animation: shimmer 6s linear infinite !important;
      text-shadow: none !important;
    }
    /* Modal card — pure white over near-white light stage. */
    html.theme-new-white .prof-card {
      background: #FFFFFF;
      border: 0.5px solid rgba(0,0,0,0.08);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,1),
        0 1px 3px rgba(0,0,0,0.06),
        0 12px 48px rgba(0,0,0,0.12);
    }
    /* Status bar — lighter than the #E8E8EE stage for a subtle top lift */
    html.theme-new-white .status-bar {
      background: #F4F4F8 !important;
      border-bottom-color: rgba(0,0,0,0.06) !important;
      box-shadow: 0 0.5px 0 rgba(255,255,255,0.75) !important;
    }
    html.theme-new-white .status-bar-brand,
    html.theme-new-white .status-bar-brand-mobile { color: rgba(0,0,0,0.82) !important; }
    html.theme-new-white .status-bar-nav a { color: rgba(0,0,0,0.62) !important; }
    html.theme-new-white .status-bar-nav a:hover { color: rgba(0,0,0,0.9) !important; }
    @media (min-width: 768px) {
      html.theme-new-white .status-bar-brand { color: rgba(0,0,0,0.6) !important; }
      html.theme-new-white .status-bar-nav a { color: rgba(0,0,0,0.56) !important; }
      html.theme-new-white .status-bar-nav a:hover { color: rgba(0,0,0,0.88) !important; }
    }
    /* Ensure buttons are clickable across all browsers - OPTIMIZED for performance */
    #open-btn {
      position: relative;
      z-index: 10;
      pointer-events: auto !important;
      -webkit-tap-highlight-color: transparent;
      user-select: none;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      /* Safari-specific: Ensure clickability */
      -webkit-touch-callout: none;
      cursor: pointer !important;
      /* Performance: contain layout to minimize repaints */
      contain: layout style;
      /* GPU acceleration for snappy interactions */
      transform: translateZ(0);
      backface-visibility: hidden;
    }
    /* Mobile: pin the Tap-here-to-open bar fixed at the bottom so it never scrolls away */
    @media (max-width: 768px) {
      #closed-state > div.px-6.pb-8 {
        position: fixed !important;
        left: 0;
        right: 0;
        bottom: 0;
        padding-bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
        padding-top: 0.75rem;
        z-index: 20;
        pointer-events: none;
      }
      #closed-state > div.px-6.pb-8 > div {
        pointer-events: auto;
        margin-bottom: 0 !important;
      }
      #open-btn {
        top: -3px;
      }
    }
    
    .profile-btn {
      position: relative;
      z-index: 20;
      pointer-events: auto !important;
      -webkit-tap-highlight-color: transparent;
      user-select: none;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      /* Safari-specific: Ensure clickability */
      -webkit-touch-callout: none;
      cursor: pointer !important;
      transition: all 0.1s ease-out;
    }
    
    .profile-inner {
      pointer-events: auto !important;
      box-shadow: 0 4px 8px var(--shadow-color);
      transition: all 0.1s ease-out;
      cursor: pointer !important;
    }
    
    /* Safari-specific: Ensure all child elements are clickable */
    #open-btn * {
      pointer-events: auto !important;
    }
    
    #profile-btn * {
      pointer-events: auto !important;
    }
    .profile-btn:hover .profile-inner {
      box-shadow: 0 2px 4px var(--shadow-light);
      transform: translateY(2px) scale(0.96);
    }
    .profile-btn:active .profile-inner {
      box-shadow: 0 1px 2px var(--shadow-light);
      transform: translateY(3px) scale(0.94);
    }
    .auth-card {
      position: relative;
      overflow: hidden;
      transition: transform 0.2s ease, box-shadow 0.3s ease;
    }
    .auth-card::after {
      content: '';
      position: absolute;
      inset: -40%;
      border-radius: 50%;
      opacity: 0;
      pointer-events: none;
    }
    .auth-card-animate-in {
      animation: authCardGlowIn 0.85s ease-out;
    }
    .auth-card-animate-in::after {
      background: radial-gradient(circle, rgba(59,130,246,0.35) 0%, rgba(59,130,246,0) 70%);
      animation: authCardWaveIn 0.85s ease-out forwards;
    }
    .auth-card-animate-out {
      animation: authCardGlowOut 0.85s ease-out;
    }
    .auth-card-animate-out::after {
      background: radial-gradient(circle, rgba(99,102,241,0.28) 0%, rgba(99,102,241,0) 70%);
      animation: authCardWaveOut 0.85s ease-out forwards;
    }
    .auth-card-loading::after {
      animation: authCardWaveLoading 1.2s ease-out infinite;
      background: radial-gradient(circle, rgba(45,212,191,0.35) 0%, rgba(45,212,191,0) 70%);
    }
    .auth-card-loading {
      animation: authCardGlowLoading 1.2s ease-out infinite;
    }
    .auth-icon-circle {
      width: 72px;
      height: 72px;
      border-radius: 999px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      background-color: var(--bg-button);
      color: var(--text-tertiary);
      transition: background-color 0.25s ease, transform 0.25s ease, color 0.25s ease;
    }
    .auth-icon-circle-loading {
      background: rgba(59,130,246,0.12);
      color: #2563EB;
      transform: scale(1.05);
    }
    .auth-icon-circle-success {
      background: rgba(34,197,94,0.15);
      color: #15803D;
      transform: scale(1.05);
    }
    .auth-icon-circle-error {
      background: rgba(239,68,68,0.15);
      color: #B91C1C;
      transform: scale(1.03);
    }
    .auth-icon-default svg,
    .auth-icon-success svg {
      width: 30px;
      height: 30px;
      stroke: currentColor;
    }
    .auth-icon-default svg {
      stroke: var(--text-tertiary);
    }
    .auth-icon-success svg {
      fill: none;
      stroke-width: 2;
    }
    .auth-icon-default-dim {
      opacity: 0.35;
    }
    .auth-spinner-circle {
      position: absolute;
      inset: -4px;
      border-radius: 999px;
      border: 3px solid rgba(59,130,246,0.2);
      border-top-color: #2563EB;
      border-right-color: rgba(59,130,246,0.45);
      animation: authStatusSpin 0.9s linear infinite;
    }
    .auth-status {
      position: absolute;
      inset: auto 0 12px 0;
      text-align: center;
      font-size: 0.85rem;
      color: var(--text-tertiary);
      opacity: 0;
      transform: translateY(6px);
      transition: opacity 0.25s ease, transform 0.25s ease;
      pointer-events: none;
    }
    .auth-status-visible {
      opacity: 1;
      transform: translateY(0);
    }
    .auth-status-pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 14px;
      border-radius: 999px;
      background: rgba(59,130,246,0.08);
      color: #2563EB;
      box-shadow: 0 8px 18px rgba(59,130,246,0.12);
    }
    .auth-status-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    .auth-status-icon svg {
      width: 16px;
      height: 16px;
    }
    .auth-status-loading .auth-status-pill {
      background: rgba(59,130,246,0.15);
      color: #1D4ED8;
      box-shadow: 0 8px 20px rgba(59,130,246,0.22);
    }
    .auth-status-success .auth-status-pill {
      background: rgba(34,197,94,0.12);
      color: #15803D;
      box-shadow: 0 8px 18px rgba(34,197,94,0.18);
    }
    .auth-status-error .auth-status-pill {
      background: rgba(239,68,68,0.15);
      color: #b91c1c;
      box-shadow: 0 8px 22px rgba(239,68,68,0.22);
    }
    .auth-status-spinner {
      animation: authStatusSpin 0.9s linear infinite;
      transform-origin: center;
    }
    .auth-status-spinner circle {
      stroke-linecap: round;
      stroke-dasharray: 45 85;
    }
    @keyframes authCardGlowLoading {
      0%, 100% { box-shadow: 0 0 0 rgba(59,130,246,0); transform: scale(1); }
      50% { box-shadow: 0 16px 32px rgba(59,130,246,0.18); transform: scale(1.008); }
    }
    @keyframes authCardWaveLoading {
      0% { opacity: 0.4; transform: scale(0.4); }
      50% { opacity: 0.25; transform: scale(1.05); }
      100% { opacity: 0; transform: scale(1.35); }
    }
    @keyframes authStatusSpin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    .search-container {
      animation: none;
      margin-top: 0.52rem;
      position: relative;
      z-index: 10000;
      transform: translateZ(0);
      /* Use safe-area-inset for notch/home indicator devices + extra padding */
      padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem);
    }
    /* Hide search bar when app is not opened */
    #open-state.hidden .search-container {
      display: none !important;
    }
    /* Ensure search container is always visible when app is opened (for all apps including Photos) */
    #open-state:not(.hidden) .search-container {
      display: flex !important;
    }
    .search-container .rounded-3xl {
      box-shadow: none;
      position: relative;
      overflow: hidden;
    }
    
    /* ============================================================
       Siri Wave Border - HIDDEN
       ============================================================ */
    .siri-wave-border,
    .siri-wave-border::before,
    .siri-wave-border::after {
      display: none !important;
    }
    
    /* ============================================================
       Typewriter Key - HIDDEN (removed)
       ============================================================ */
    .typewriter-key {
      display: none !important;
    }
    
    /* ============================================================
       iOS Safari-style Progress Sweep Effect
       Subtle left-to-right sweep like iOS 5-6 Safari loading bar
       Minimal skeuomorphism with soft gradient highlight
       ============================================================ */
    .airy-wave-bg {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      border-radius: inherit;
      overflow: hidden;
      pointer-events: none;
      z-index: 0;
      opacity: 0;
      transition: opacity 0.3s ease;
    }
    
    /* Show when app window is active */
    #open-state:has(.app-window-view.is-active) .search-container .airy-wave-bg {
      opacity: 1;
    }
    
    .search-container.app-window-active .airy-wave-bg {
      opacity: 1 !important;
    }
    
    /* Subtle purple/violet glow around the ask me anything bar */
    .airy-wave-bg {
      display: none !important;
    }
    
    /* Flowing purple glow effect - wave of light OUTSIDE the bar */
    #open-state:not(.hidden) .search-container .rounded-3xl {
      position: relative !important;
      overflow: hidden !important;
    }
    
    #open-state:not(.hidden) .search-container .rounded-3xl::before {
      content: '';
      position: absolute;
      top: -3px;
      left: -3px;
      right: -3px;
      bottom: -3px;
      border-radius: 28px;
      /* Softened ~50% from the previous mix — the new soft drop
         shadow on .rounded-3xl provides depth, so the purple wash
         only needs to add color personality, not visual weight. */
      background: linear-gradient(
        90deg,
        rgba(147, 51, 234, 0.025) 0%,
        rgba(147, 51, 234, 0.05) 15%,
        rgba(168, 85, 247, 0.18) 35%,
        rgba(192, 132, 252, 0.26) 50%,
        rgba(168, 85, 247, 0.18) 65%,
        rgba(147, 51, 234, 0.05) 85%,
        rgba(147, 51, 234, 0.025) 100%
      );
      background-size: 300% 100%;
      animation: purpleWaveFlow 6s linear infinite;
      filter: blur(3px);
      z-index: -1;
      pointer-events: none;
      opacity: 1;
      transition: opacity 0.3s ease;
    }
    /* Hide purple glow during launcher fly-in to prevent visual noise */
    #open-state.launcher-opening .search-container .rounded-3xl::before {
      opacity: 0;
    }
    
    @keyframes purpleWaveFlow {
      0% {
        background-position: 150% 50%;
      }
      100% {
        background-position: -150% 50%;
      }
    }
    
    /* Dark mode: very subtle purple flow */
    :root.theme-dark #open-state:not(.hidden) .search-container .rounded-3xl::before,
    html.theme-dark #open-state:not(.hidden) .search-container .rounded-3xl::before {
      background: linear-gradient(
        90deg,
        rgba(147, 51, 234, 0.008) 0%,
        rgba(147, 51, 234, 0.02) 15%,
        rgba(168, 85, 247, 0.08) 35%,
        rgba(192, 132, 252, 0.14) 50%,
        rgba(168, 85, 247, 0.08) 65%,
        rgba(147, 51, 234, 0.02) 85%,
        rgba(147, 51, 234, 0.008) 100%
      );
      background-size: 300% 100%;
    }
    
    /* Hide glow when AI view is active (flipped) */
    #open-state:has(.card-container.flipped) .search-container .rounded-3xl::before,
    #open-state:has(.ai-card-container.flipped) .search-container .rounded-3xl::before {
      display: none !important;
    }

    /* ============================================================
       FLIP SMOOTHNESS - pause expensive search-bar effects during the
       0.4s rotateY transition so the GPU only spends frame budget on
       the transform itself. Fixes glitching/low-FPS while the device
       is thermally throttled. The .is-flipping class is added in JS
       on flip start and removed on transitionend.
       ============================================================ */
    .card-container.is-flipping .search-container .rounded-3xl::before,
    .ai-card-container.is-flipping .search-container .rounded-3xl::before,
    #open-state:has(.card-container.is-flipping) .search-container .rounded-3xl::before,
    #open-state:has(.ai-card-container.is-flipping) .search-container .rounded-3xl::before {
      animation-play-state: paused !important;
      filter: none !important;
      opacity: 0 !important;
    }
    .card-container.is-flipping #search-shimmer-label,
    .ai-card-container.is-flipping #search-shimmer-label,
    #open-state:has(.card-container.is-flipping) #search-shimmer-label,
    #open-state:has(.ai-card-container.is-flipping) #search-shimmer-label {
      animation-play-state: paused !important;
    }
    .card-container.is-flipping .search-container,
    .ai-card-container.is-flipping .search-container {
      will-change: transform;
    }
    /* While an app window is open, pause only the heavy purpleWaveFlow
       blur+gradient effect (which was the actual scroll-jank source).
       The much cheaper greyShimmer text effect on "Ask me anything"
       stays running so the pill keeps its subtle shimmer. */
    #open-state:has(.app-window-view.is-active) .search-container .rounded-3xl::before {
      animation-play-state: paused !important;
      filter: none !important;
      opacity: 0 !important;
    }
    @media (prefers-reduced-motion: reduce) {
      #open-state:not(.hidden) .search-container .rounded-3xl::before {
        animation: none !important;
        filter: none !important;
      }
      #search-shimmer-label {
        animation: none !important;
      }
    }

    /* Mobile: ensure rounded corners */
    @media (max-width: 768px) {
      #open-state:not(.hidden) .search-container .rounded-3xl::before {
        border-radius: 28px;
        top: -3px;
        left: -3px;
        right: -3px;
        bottom: -3px;
      }
    }
    
    /* ============================================================
       Siri Orb - COMPLETELY HIDDEN
       ============================================================ */
    
    .siri-orb,
    .siri-orb::before,
    .siri-orb::after {
      display: none !important;
      visibility: hidden !important;
      opacity: 0 !important;
      width: 0 !important;
      height: 0 !important;
    }
    
    /* ============================================================
       Ask me anything shimmer label - lighter dark grey shimmer
       Positioned over the search input
       ============================================================ */
    
    @keyframes greyShimmer {
      0% { background-position: 200% center; }
      100% { background-position: -200% center; }
    }
    
    #search-shimmer-label {
      font-weight: 500;
      z-index: 5;
      margin-left: 8px;
      /* Medium grey label with dark grey shimmer */
      color: #777777;
      background: linear-gradient(
        90deg, 
        #777777 0%, 
        #777777 35%,
        #333333 50%, 
        #777777 65%,
        #777777 100%
      );
      background-size: 200% auto;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      animation: greyShimmer 3s linear infinite;
    }
    
    /* Mobile - label on the left, less margin */
    @media (max-width: 768px) {
      #search-shimmer-label {
        margin-left: 0 !important;
      }
    }
    
    /* Dark mode - grey shimmer */
    :root.theme-dark #search-shimmer-label,
    html.theme-dark #search-shimmer-label {
      color: #999999;
      background: linear-gradient(
        90deg, 
        #999999 0%, 
        #999999 35%,
        #555555 50%, 
        #999999 65%,
        #999999 100%
      );
      background-size: 200% auto;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      animation: greyShimmer 3s linear infinite;
    }
    
    /* Show orb when app window is active */
    #open-state:has(.app-window-view.is-active) .search-container .siri-orb {
      display: block !important;
    }
    
    /* Hide orb in AI view */
    #open-state:has(.ai-card-container.flipped) .search-container .siri-orb,
    #open-state:has(.card-container.flipped) .search-container .siri-orb {
      display: none !important;
    }
    
    /* Legacy fallback for Safari/mobile - orb hidden */
    .search-container.app-window-active .siri-orb {
      display: none !important;
    }
    
    /* Inner orb - the glowing core */
    .siri-orb::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      border-radius: 50%;
      background: radial-gradient(circle at 30% 30%, 
        rgba(255, 255, 255, 1) 0%,
        rgba(200, 200, 200, 0.95) 30%,
        rgba(150, 150, 150, 0.9) 60%,
        rgba(120, 120, 120, 0.85) 100%
      );
      box-shadow: 
        inset 0 -3px 8px rgba(0, 0, 0, 0.2),
        inset 0 3px 8px rgba(255, 255, 255, 0.8);
      animation: siriOrbFlow 1.8s ease-in-out infinite;
    }
    
    /* Outer glow ring - enhanced glow */
    .siri-orb::after {
      content: '';
      position: absolute;
      top: -8px;
      left: -8px;
      right: -8px;
      bottom: -8px;
      border-radius: 50%;
      background: radial-gradient(circle, 
        rgba(180, 180, 180, 0.8) 0%,
        rgba(180, 180, 180, 0.5) 30%,
        rgba(180, 180, 180, 0.25) 50%,
        rgba(180, 180, 180, 0.1) 70%,
        transparent 85%
      );
      filter: blur(4px);
      animation: siriOrbPulse 1.8s ease-in-out infinite;
    }
    
    /* Dark mode orb - optimized */
    :root.theme-dark .siri-orb::before,
    html.theme-dark .siri-orb::before {
      background: radial-gradient(circle at 30% 30%, 
        rgba(140, 140, 140, 1) 0%,
        rgba(100, 100, 100, 0.95) 30%,
        rgba(70, 70, 70, 0.9) 60%,
        rgba(50, 50, 50, 0.85) 100%
      );
      box-shadow: 
        inset 0 -3px 8px rgba(0, 0, 0, 0.4),
        inset 0 3px 8px rgba(255, 255, 255, 0.4);
    }
    
    :root.theme-dark .siri-orb::after,
    html.theme-dark .siri-orb::after {
      background: radial-gradient(circle, 
        rgba(130, 130, 130, 0.7) 0%,
        rgba(130, 130, 130, 0.4) 30%,
        rgba(130, 130, 130, 0.2) 50%,
        rgba(130, 130, 130, 0.1) 70%,
        transparent 85%
      );
      filter: blur(5px);
    }
    
    @keyframes siriOrbFlow {
      0%, 100% {
        transform: scale(1);
        filter: brightness(1);
      }
      50% {
        transform: scale(1.08);
        filter: brightness(1.2);
      }
    }
    
    @keyframes siriOrbPulse {
      0%, 100% {
        opacity: 0.6;
        transform: scale(1);
      }
      50% {
        opacity: 1;
        transform: scale(1.25);
      }
    }
    
    /* Reduce motion for accessibility */
    @media (prefers-reduced-motion: reduce) {
      .siri-wave-border,
      .siri-wave-border::before,
      .siri-wave-border::after {
        animation: none;
      }
    }
    
    /* ============================================================
       CLOSE BUTTON - REBUILT FOR ALL DEVICES
       ============================================================ */
    
    /* Base: Hidden by default */
    .close-btn,
    #close-btn {
      display: none !important;
    }
    
    /* Show button when app window is active - works on all devices */
    #open-state.app-window-active .search-container .close-btn,
    #open-state.app-window-active .search-container #close-btn,
    .search-container.app-window-active .close-btn,
    .search-container.app-window-active #close-btn {
      display: flex !important;
    }
    
    /* Hide button in AI view */
    #open-state.ai-view-active .search-container .close-btn,
    #open-state.ai-view-active .search-container #close-btn {
      display: none !important;
    }
    
    /* Show button in launcher (when not in app window and not in AI view) */
    #open-state:not(.app-window-active):not(.ai-view-active) .search-container .close-btn,
    #open-state:not(.app-window-active):not(.ai-view-active) .search-container #close-btn {
      display: flex !important;
    }
    
    /* ============================================================
       LEGACY SAFARI (15.3 and below) - Simple CSS-only fallbacks
       No JavaScript observers - just basic styling fixes
       ============================================================ */
    
    
    /* CRITICAL: Ensure launcher pin grid and tiles are visible */
    .legacy-safari #launcher-pin-grid {
      opacity: 1 !important;
      visibility: visible !important;
    }
    .legacy-safari #launcher-pin-grid:not(:empty) {
      display: flex !important;
      flex-wrap: wrap !important;
    }
    
    /* Fix tile layout - must be inline-flex horizontal row */
    .legacy-safari .launcher-pin-tile,
    .legacy-safari .launcher-tile {
      opacity: 1 !important;
      visibility: visible !important;
      display: -webkit-inline-flex !important;
      display: inline-flex !important;
      -webkit-flex-direction: row !important;
      flex-direction: row !important;
      -webkit-align-items: center !important;
      align-items: center !important;
      gap: 1rem !important;
    }
    
    .legacy-safari .launcher-stack-wrapper {
      opacity: 1 !important;
      visibility: visible !important;
      display: -webkit-flex !important;
      display: flex !important;
    }
    .legacy-safari .launcher-grid {
      opacity: 1 !important;
      visibility: visible !important;
      display: -webkit-flex !important;
      display: flex !important;
      -webkit-flex-wrap: wrap !important;
      flex-wrap: wrap !important;
    }
    
    /* Ensure launcher icon and text are visible and laid out correctly */
    .legacy-safari .launcher-icon {
      opacity: 1 !important;
      visibility: visible !important;
      -webkit-flex-shrink: 0 !important;
      flex-shrink: 0 !important;
      -webkit-transform: translateZ(0) !important;
      transform: translateZ(0) !important;
    }
    .legacy-safari .launcher-icon img {
      opacity: 1 !important;
      visibility: visible !important;
      image-rendering: -webkit-optimize-contrast !important;
      -webkit-backface-visibility: hidden !important;
    }
    .legacy-safari .launcher-text {
      opacity: 1 !important;
      visibility: visible !important;
      -webkit-flex: 1 !important;
      flex: 1 !important;
      display: -webkit-flex !important;
      display: flex !important;
      -webkit-flex-direction: column !important;
      flex-direction: column !important;
    }
    .legacy-safari .launcher-title,
    .legacy-safari .launcher-subtitle {
      opacity: 1 !important;
      visibility: visible !important;
    }
    .legacy-safari .launcher-arrow {
      opacity: 1 !important;
      visibility: visible !important;
      -webkit-flex-shrink: 0 !important;
      flex-shrink: 0 !important;
    }
    
    /* ============================================================
       App Window - iOS 15 Safari Complete Fix with Animations
       ============================================================ */
    
    /* Base hidden state */
    .legacy-safari .app-window-view:not(.is-active):not(.is-opening) {
      display: none !important;
    }
    
    /* Active/opening state - show app window */
    .legacy-safari #app-window-view.is-active,
    .legacy-safari #app-window-view.is-opening,
    .legacy-safari .app-window-view.is-active,
    .legacy-safari .app-window-view.is-opening {
      display: block !important;
      position: absolute !important;
      top: 0 !important;
      left: 0 !important;
      right: 0 !important;
      bottom: 0 !important;
      width: 100% !important;
      height: 100% !important;
      z-index: 200 !important;
      opacity: 1 !important;
      visibility: visible !important;
      pointer-events: auto !important;
      overflow: hidden !important;
      border-radius: 1.5rem !important;
      clip-path: inset(0 round 1.5rem) !important;
      -webkit-mask-image: -webkit-radial-gradient(white, black);
    }
    
    /* App window card - with slower, clearly visible iOS-style opening animation */
    .legacy-safari .app-window-view .app-window-card {
      display: block !important;
      position: relative !important;
      width: 100% !important;
      height: 100% !important;
      border-radius: 1.5rem !important;
      overflow: hidden !important;
      background: var(--bg-card, #FFFFFF) !important;
      /* iOS-style open starts clearly smaller/lower, then expands forward */
      -webkit-transform: scale(var(--app-open-scale)) translate3d(0, var(--app-open-translate), 0);
      transform: scale(var(--app-open-scale)) translate3d(0, var(--app-open-translate), 0);
      opacity: 0;
      -webkit-transform-origin: center center;
      transform-origin: center center;
      box-shadow: var(--app-open-shadow);
      -webkit-transition: -webkit-transform var(--app-open-duration) var(--app-open-ease), opacity var(--app-open-duration) ease-out, box-shadow var(--app-open-duration) var(--app-open-ease);
      transition: transform var(--app-open-duration) var(--app-open-ease), opacity var(--app-open-duration) ease-out, box-shadow var(--app-open-duration) var(--app-open-ease);
    }
    
    .legacy-safari .app-window-view.is-active .app-window-card:not(.is-closing),
    .legacy-safari .app-window-view.is-opening .app-window-card:not(.is-closing) {
      border-radius: 1.5rem !important;
      clip-path: inset(0 round 1.5rem) !important;
      -webkit-clip-path: inset(0 round 1.5rem) !important;
      overflow: hidden !important;
      -webkit-mask-image: -webkit-radial-gradient(white, black);
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      isolation: isolate;
    }

    /* App window card - active state (scale up to full size) */
    .legacy-safari .app-window-view.is-active .app-window-card:not(.is-closing) {
      -webkit-transform: scale(1) translate3d(0, 0, 0);
      transform: scale(1) translate3d(0, 0, 0);
      opacity: 1;
      box-shadow: none;
    }
    
    /* App window card - iOS-style closing (scale down and fade out) */
    .legacy-safari .app-window-view.is-active .app-window-card.is-closing {
      -webkit-transform: scale(var(--app-close-scale)) translate3d(0, var(--app-close-translate), 0);
      transform: scale(var(--app-close-scale)) translate3d(0, var(--app-close-translate), 0);
      opacity: 0;
      -webkit-transition: -webkit-transform var(--app-close-duration) var(--app-close-ease), opacity var(--app-close-duration) ease-in;
      transition: transform var(--app-close-duration) var(--app-close-ease), opacity var(--app-close-duration) ease-in;
    }
    
    /* App window stage - relative with full size */
    .legacy-safari .app-window-view.is-active .app-window-stage,
    .legacy-safari .app-window-view.is-opening .app-window-stage {
      display: block !important;
      position: relative !important;
      width: 100% !important;
      height: 100% !important;
      opacity: 1 !important;
      visibility: visible !important;
      border-radius: 1.5rem !important;
      clip-path: inset(0 round 1.5rem) !important;
      -webkit-clip-path: inset(0 round 1.5rem) !important;
      overflow: hidden !important;
      -webkit-mask-image: -webkit-radial-gradient(white, black);
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
    }
    
    /* IFRAME - iOS 15 Safari fix */
    .legacy-safari .app-window-view.is-active iframe,
    .legacy-safari .app-window-view.is-opening iframe,
    .legacy-safari .app-window-view.is-active .app-window-iframe,
    .legacy-safari .app-window-view.is-opening .app-window-iframe,
    .legacy-safari #app-window-view.is-active #app-window-iframe,
    .legacy-safari #app-window-view.is-opening #app-window-iframe {
      display: block !important;
      position: absolute !important;
      top: 0 !important;
      left: 0 !important;
      width: 100% !important;
      height: 100% !important;
      border: 0 !important;
      margin: 0 !important;
      padding: 0 !important;
      opacity: 1 !important;
      visibility: visible !important;
      background-color: #FFFFFF !important;
      border-radius: 1.5rem !important;
      clip-path: inset(0 round 1.5rem) !important;
      -webkit-clip-path: inset(0 round 1.5rem) !important;
      overflow: hidden !important;
      -webkit-mask-image: -webkit-radial-gradient(white, black);
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      -webkit-overflow-scrolling: touch !important;
    }
    .legacy-safari.theme-dark .app-window-view.is-active iframe,
    .legacy-safari.theme-dark .app-window-view.is-opening iframe,
    .legacy-safari.theme-dark #app-window-view.is-active #app-window-iframe,
    .legacy-safari.theme-dark #app-window-view.is-opening #app-window-iframe {
      background-color: #1C1C1C !important;
    }
    
    /* HIDE the close button on app window - matches modern browsers */
    .legacy-safari .app-window-view .app-window-close,
    .legacy-safari #app-window-view #app-window-close {
      display: none !important;
      visibility: hidden !important;
      opacity: 0 !important;
      pointer-events: none !important;
    }
    
    /* Hide launcher when app is active */
    .legacy-safari .app-window-view.is-active ~ .launcher-stack-wrapper {
      display: none !important;
      opacity: 0 !important;
      visibility: hidden !important;
    }
    
    /* Search bar positioning when app is active - prevent animation, maintain position */
    .legacy-safari .app-window-view.is-active ~ .search-container,
    .legacy-safari.has-app-active .search-container {
      -webkit-animation: none !important;
      animation: none !important;
    }
    
    /* App detail view - ensure it shows when not hidden */
    .legacy-safari #app-detail-view:not(.hidden) {
      opacity: 1 !important;
      visibility: visible !important;
      pointer-events: auto !important;
    }
    
    /* Hover effects for app tiles - keep neutral, no blue flash */
    .legacy-safari .launcher-pin-tile:hover,
    .legacy-safari .launcher-tile:hover {
      cursor: pointer;
      color: inherit !important;
    }
    .legacy-safari .launcher-pin-tile:hover .launcher-title,
    .legacy-safari .launcher-tile:hover .launcher-title {
      color: inherit !important;
    }
    .legacy-safari .launcher-pin-tile:hover .launcher-subtitle,
    .legacy-safari .launcher-tile:hover .launcher-subtitle {
      color: var(--text-secondary) !important;
    }
    .legacy-safari .launcher-pin-tile:hover .launcher-arrow,
    .legacy-safari .launcher-tile:hover .launcher-arrow {
      -webkit-transform: none !important;
      transform: none !important;
    }
    .legacy-safari .launcher-pin-tile.is-pressing,
    .legacy-safari .launcher-tile.is-pressing,
    .legacy-safari .launcher-pin-tile:active,
    .legacy-safari .launcher-tile:active {
      -webkit-transform: none !important;
      transform: none !important;
      background: rgba(0,0,0,0.04) !important;
    }
    .legacy-safari .launcher-pin-tile.is-pressing .launcher-icon,
    .legacy-safari .launcher-tile.is-pressing .launcher-icon,
    .legacy-safari .launcher-pin-tile:active .launcher-icon,
    .legacy-safari .launcher-tile:active .launcher-icon {
      -webkit-transform: none !important;
      transform: none !important;
    }
    .legacy-safari .discover-app-item:hover {
      cursor: pointer;
    }
    
    /* Ensure discover view shows when not hidden */
    .legacy-safari #discover-view:not(.hidden) {
      display: flex !important;
      opacity: 1 !important;
      visibility: visible !important;
    }
    .legacy-safari #discover-apps-container {
      opacity: 1 !important;
      visibility: visible !important;
      display: flex !important;
    }
    
    /* Ensure launcher view shows when not hidden */
    .legacy-safari #launcher-view:not(.hidden) {
      display: flex !important;
      opacity: 1 !important;
      visibility: visible !important;
    }
    
    /* ============================================================
       AI VIEW DARK MODE - Ensure proper dark background
       ============================================================ */
    :root.theme-dark .ai-chat-view,
    html.theme-dark .ai-chat-view {
      background: #1a1d22 !important;
    }
    :root.theme-dark .ai-chat-messages,
    html.theme-dark .ai-chat-messages {
      background: #1a1d22 !important;
    }
    :root.theme-dark .ai-answer-view,
    html.theme-dark .ai-answer-view {
      background: #1a1d22 !important;
    }
    :root.theme-dark .ai-answer-view-content,
    html.theme-dark .ai-answer-view-content {
      background: #1a1d22 !important;
    }
    :root.theme-dark .ai-chat-input-container,
    html.theme-dark .ai-chat-input-container {
      background: #25282e !important;
    }
    :root.theme-dark .card-container > .w-full.max-w-3xl::before,
    html.theme-dark .card-container > .w-full.max-w-3xl::before {
      background: #1a1d22 !important;
    }
    
    /* Mobile dark mode AI view */
    @media (max-width: 768px) {
      :root.theme-dark .ai-chat-view,
      html.theme-dark .ai-chat-view {
        background: #1a1d22 !important;
      }
      :root.theme-dark .card-container.flipped .ai-chat-view,
      html.theme-dark .card-container.flipped .ai-chat-view {
        background: #1a1d22 !important;
      }
    }
    
    
    /* Close button styling - Circular, minimal skeuomorphic */
    .close-btn,
    #close-btn {
      width: 36px;
      height: 36px;
      min-width: 36px;
      min-height: 36px;
      max-width: 36px;
      max-height: 36px;
      border-radius: 50%;
      transition: all 0.2s ease-out;
      align-items: center;
      justify-content: center;
      padding: 0;
      border: 1px solid rgba(0, 0, 0, 0.1);
      flex-shrink: 0;
      box-sizing: border-box;
    }
    
    /* Light mode: white circle with black X - minimal skeuomorphic (match ask me anything bar exactly) */
    :root.theme-light .close-btn,
    html.theme-light .close-btn,
    :root:not(.theme-dark) .close-btn {
      background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%) !important;
      border: 1px solid rgba(0, 0, 0, 0.1) !important;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
    }

    :root.theme-light .close-btn:hover,
    html.theme-light .close-btn:hover,
    :root:not(.theme-dark) .close-btn:hover {
      transform: translateY(-1px) !important;
      box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
    }

    :root.theme-light .close-btn:active,
    html.theme-light .close-btn:active,
    :root:not(.theme-dark) .close-btn:active {
      transform: translateY(0) !important;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), inset 0 2px 3px rgba(0, 0, 0, 0.08) !important;
    }

    :root.theme-light .close-btn svg,
    html.theme-light .close-btn svg,
    :root:not(.theme-dark) .close-btn svg {
      color: #000000 !important;
      stroke: #000000 !important;
    }
    
    /* Dark mode: darker grey circle with white X - minimal skeuomorphic */
    :root.theme-dark .close-btn,
    html.theme-dark .close-btn {
      background: linear-gradient(180deg, #3a3a3a 0%, #2a2a2a 100%) !important;
      border: 1px solid rgba(255, 255, 255, 0.12) !important;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
    }
    
    :root.theme-dark .close-btn:hover,
    html.theme-dark .close-btn:hover {
      transform: translateY(-1px) !important;
      background: linear-gradient(180deg, #4a4a4a 0%, #3a3a3a 100%) !important;
      box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
    }
    
    :root.theme-dark .close-btn:active,
    html.theme-dark .close-btn:active {
      transform: translateY(0) !important;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), inset 0 2px 3px rgba(0, 0, 0, 0.2) !important;
    }
    
    :root.theme-dark .close-btn svg,
    html.theme-dark .close-btn svg {
      color: #ffffff !important;
      stroke: #ffffff !important;
    }
    
    /* Red button styling when app window is active - works on all devices */
    #open-state.app-window-active .search-container .close-btn,
    #open-state.app-window-active .search-container #close-btn,
    .search-container.app-window-active .close-btn,
    .search-container.app-window-active #close-btn {
      background: linear-gradient(180deg, #ff4444 0%, #e63939 100%) !important;
      border: none !important;
      box-shadow: 0 2px 4px rgba(255, 68, 68, 0.25), 0 1px 2px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    }
    
    #open-state.app-window-active .search-container .close-btn:hover,
    #open-state.app-window-active .search-container #close-btn:hover,
    .search-container.app-window-active .close-btn:hover,
    .search-container.app-window-active #close-btn:hover {
      transform: translateY(-1px) !important;
      background: linear-gradient(180deg, #ff5555 0%, #f04444 100%) !important;
      box-shadow: 0 3px 8px rgba(255, 68, 68, 0.35), 0 1px 3px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
    }
    
    #open-state.app-window-active .search-container .close-btn:active,
    #open-state.app-window-active .search-container #close-btn:active,
    .search-container.app-window-active .close-btn:active,
    .search-container.app-window-active #close-btn:active {
      transform: translateY(0) scale(0.97) !important;
      box-shadow: 0 1px 2px rgba(255, 68, 68, 0.3), inset 0 2px 4px rgba(0, 0, 0, 0.15) !important;
    }
    
    #open-state.app-window-active .search-container .close-btn svg,
    #open-state.app-window-active .search-container #close-btn svg,
    .search-container.app-window-active .close-btn svg,
    .search-container.app-window-active #close-btn svg {
      color: #ffffff !important;
      stroke: #ffffff !important;
    }
    
    #open-state:has(.card-container.flipped) .search-container .ai-send-btn-top {
      display: flex !important;
    }
    
    /* Top send button styling */
    .ai-send-btn-top {
      transition: all 0.2s ease-out;
    }
    
    .ai-send-btn-top:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 14px rgba(90, 143, 160, 0.4);
    }
    
    .ai-send-btn-top:active {
      transform: translateY(0) scale(0.97);
    }
    /* Search-container slideUp DISABLED — see launcher-tile comment above.
       The card-container slideUp that wraps the whole launcher already
       animates the search bar (it's nested inside). Running two
       parallel slideUp keyframes was burning Safari's compositor. */
    /* Prevent search bar animation when app window is active */
    .search-container.app-window-active,
    .app-window-view.is-active ~ .search-container,
    .card-container.app-window-active ~ .search-container,
    #open-state:has(.app-window-view.is-active) .search-container,
    #open-state:has(.card-container.app-window-active) .search-container {
      animation: none !important;
    }

      /* Fixed search bar when open */
      .search-fixed {
        position: fixed !important;
        top: 0;
        left: 0;
        width: 100vw;
        z-index: 100;
        box-shadow: none;
        background-color: var(--bg-primary);
        transition: top 0.2s;
      }

      /* Scale/move top window down when search is open */
      .top-window-scaled {
        transform: translateY(70px) scale(0.98);
        transition: transform 0.2s;
    }
    .card-container {
      animation: none;
      padding-bottom: 0;
      overflow: hidden;
      /* Smooth resize when viewport changes (Safari toolbar) */
      transition: flex-basis 0.25s cubic-bezier(0.25, 0.1, 0.25, 1);
      /* Phase 1 will-change audit: removed permanent `will-change` +
         `translateZ`. The launcher slideUp keyframe will lazily
         promote a layer for its own duration. An always-on GPU layer
         on this large element was holding ~5 MB of VRAM all the time. */
    }
    .card-container > .w-full.max-w-3xl > .rounded-3xl {
      box-shadow: none !important;
      border: none !important;
      outline: none !important;
      overflow: hidden !important;
    }
    
    /* Ensure no shadows in light mode - override Tailwind and any other styles */
    :root.theme-light .card-container > .w-full.max-w-3xl > .rounded-3xl,
    html.theme-light .card-container > .w-full.max-w-3xl > .rounded-3xl {
      box-shadow: none !important;
      border: none !important;
      outline: none !important;
      -webkit-box-shadow: none !important;
    }
    
    /* Ensure no shadows in dark mode */
    :root.theme-dark .card-container > .w-full.max-w-3xl > .rounded-3xl,
    html.theme-dark .card-container > .w-full.max-w-3xl > .rounded-3xl {
      box-shadow: none !important;
      border: none !important;
      outline: none !important;
      -webkit-box-shadow: none !important;
    }
    .card-container.app-window-active > .w-full > .rounded-3xl {
      border-radius: 1.5rem !important;
      box-shadow: none !important;
      padding: 0 !important;
      background: var(--bg-card) !important;
      height: 100%;
      overflow: hidden !important;
      position: relative;
      overflow: hidden !important;
    }
    
    /* Light mode: ensure rounded corners for container - REMOVED clip-path for performance */
    :root.theme-light .card-container.app-window-active > .w-full > .rounded-3xl {
      border-radius: 1.5rem !important;
      overflow: hidden !important;
    }
    
    /* System theme: ensure rounded corners for container - REMOVED clip-path for performance */
    @media (prefers-color-scheme: light) {
      .card-container.app-window-active > .w-full > .rounded-3xl {
        border-radius: 1.5rem !important;
        overflow: hidden !important;
      }
    }
    
    @media (prefers-color-scheme: dark) {
      :root:not(.theme-light) .card-container.app-window-active > .w-full > .rounded-3xl {
        border-radius: 1.5rem !important;
        overflow: hidden !important;
      }
    }
    
    #open-state.launcher-opening:not(.discover-returning) .card-container {
      animation: slideUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.03s backwards;
    }
    /* Horizontal flip animation for card-container */
    .card-container {
      perspective: 2000px;
      perspective-origin: center center;
      position: relative;
      z-index: 1;
      overflow: hidden;
      contain: layout style paint;
      box-shadow: none !important;
      border: none !important;
      outline: none !important;
    }
    .card-container > .w-full.max-w-3xl {
      transform-style: preserve-3d;
      transition: transform 0.4s ease-out;
      position: relative;
      width: 100%;
      height: 100%;
      transform-origin: center center;
      will-change: transform;
      contain: layout style;
      box-shadow: none !important;
      border: none !important;
      outline: none !important;
      -webkit-box-shadow: none !important;
    }
    
    /* Light mode specific - ensure no shadows */
    :root.theme-light .card-container > .w-full.max-w-3xl,
    html.theme-light .card-container > .w-full.max-w-3xl {
      box-shadow: none !important;
      border: none !important;
      outline: none !important;
      -webkit-box-shadow: none !important;
    }
    
    /* Dark mode specific - ensure no shadows */
    :root.theme-dark .card-container > .w-full.max-w-3xl,
    html.theme-dark .card-container > .w-full.max-w-3xl {
      box-shadow: none !important;
      border: none !important;
      outline: none !important;
      -webkit-box-shadow: none !important;
    }
    .card-container.flipped > .w-full.max-w-3xl {
      transform: rotateY(-180deg) translateZ(0);
    }
    .card-container > .w-full.max-w-3xl > .rounded-3xl {
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      overflow: hidden;
      box-shadow: none !important;
      border: none !important;
      outline: none !important;
    }
    
    /* ============================================================
       FLIP ANIMATION SYSTEM - Desktop & Mobile
       Key: AI view stays INVISIBLE during entire flip, only appears AFTER
       ============================================================ */
    
    /* AI Chat View - Base state: completely hidden */
    .ai-chat-view {
      display: flex;
      flex-direction: column;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      z-index: 101;
      transform: rotateY(180deg);
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      background: var(--ai-bg-primary, #f5f7f9);
    }
    :root.theme-dark .ai-chat-view,
    html.theme-dark .ai-chat-view {
      background: var(--ai-bg-primary-dark, #1a1d22);
    }
    
    /* AI View when flipped - appears ONLY after flip completes (0.58s delay for 0.6s flip) */
    .card-container.flipped .ai-chat-view {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transition: opacity 0.08s linear 0.58s, visibility 0s linear 0.58s, pointer-events 0s linear 0.58s;
    }
    
    /* AI View when NOT flipped - hides IMMEDIATELY with no delay */
    .card-container:not(.flipped) .ai-chat-view {
      opacity: 0 !important;
      visibility: hidden !important;
      pointer-events: none !important;
      transition: none !important;
    }
    
    /* AI Content - also delayed to appear after flip */
    .card-container.flipped .ai-chat-header,
    .card-container.flipped .ai-chat-messages,
    .card-container.flipped .ai-chat-input-container {
      opacity: 0;
      animation: aiContentFadeIn 0.12s linear 0.6s forwards;
    }
    @keyframes aiContentFadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }
    
    /* Front views — fade out as soon as the rotation begins so they
       can't show through the back face during the spin. We previously
       held them visible for 0.5s and relied on backface-visibility, but
       some browsers (esp. Safari with paint-contained ancestors) don't
       reliably hide the back face — that produced a "double vision"
       overlap mid-flip. */
    .card-container.flipped #launcher-view,
    .card-container.flipped #discover-view,
    .card-container.flipped #app-window-view,
    .card-container.flipped #app-detail-view,
    .card-container.flipped #discover-detail-view {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity 0.18s ease-out 0s, visibility 0s linear 0.2s, pointer-events 0s linear 0s;
    }
    
    /* Front views - appear after flip back completes */
    .card-container:not(.flipped) #launcher-view,
    .card-container:not(.flipped) #discover-view,
    .card-container:not(.flipped) #app-window-view,
    .card-container:not(.flipped) #app-detail-view,
    .card-container:not(.flipped) #discover-detail-view {
      opacity: 1 !important;
      visibility: visible !important;
      pointer-events: auto !important;
      transition: opacity 0.08s linear 0.58s, visibility 0s linear 0.58s, pointer-events 0s linear 0.58s !important;
    }
    
    /* Front content - hide backface */
    .card-container > .w-full.max-w-3xl > .rounded-3xl > *:not(.ai-chat-view) {
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
    }
    
    /* ============================================================
       MOBILE SPECIFIC - Flip with opacity timing to prevent mirroring
       ============================================================ */
    @media (max-width: 768px) {
      /* Keep 3D flip on mobile */
      .card-container > .w-full.max-w-3xl {
        transform-style: preserve-3d !important;
        -webkit-transform-style: preserve-3d !important;
        transition: transform 0.4s ease-out !important;
        perspective: 1200px !important;
      }
      .card-container.flipped > .w-full.max-w-3xl {
        transform: rotateY(-180deg) !important;
      }
      
      /* AI view on mobile - counter-rotate to appear correctly */
      .ai-chat-view {
        backface-visibility: visible !important;
        -webkit-backface-visibility: visible !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        z-index: 200 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        /* No transform when not flipped */
        transform: none !important;
      }
      
      /* AI view appears after flip starts - counter-rotate to cancel parent's rotation */
      .card-container.flipped .ai-chat-view {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        /* Counter-rotate 180deg to cancel parent's -180deg rotation */
        transform: rotateY(180deg) !important;
        -webkit-transform: rotateY(180deg) !important;
        transition: opacity 0.2s ease-out 0.25s, visibility 0s linear 0.25s !important;
      }
      
      /* AI view hides immediately when flipping back */
      .card-container:not(.flipped) .ai-chat-view {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transition: opacity 0.15s ease-out 0s, visibility 0s linear 0.15s !important;
      }
      
      /* Front views - hide quickly when flipping to AI (before mirror shows) */
      .card-container.flipped #launcher-view,
      .card-container.flipped #discover-view,
      .card-container.flipped #app-window-view,
      .card-container.flipped #app-detail-view,
      .card-container.flipped #discover-detail-view {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transition: opacity 0.15s ease-out 0s, visibility 0s linear 0.15s !important;
      }
      
      /* Front views - appear after AI fades out when flipping back */
    .card-container:not(.flipped) #launcher-view,
    .card-container:not(.flipped) #discover-view,
    .card-container:not(.flipped) #app-window-view,
    .card-container:not(.flipped) #app-detail-view,
    .card-container:not(.flipped) #discover-detail-view {
      opacity: 1 !important;
      visibility: visible !important;
      pointer-events: auto !important;
        transition: opacity 0.2s ease-out 0.2s, visibility 0s linear 0.2s !important;
      }
      
      /* AI content on mobile - show immediately with parent */
      .card-container.flipped .ai-chat-header,
      .card-container.flipped .ai-chat-messages,
      .card-container.flipped .ai-chat-input-container {
        opacity: 1 !important;
        animation: none !important;
      }
      
      .ai-chat-messages {
        background: transparent !important;
      }
    }
    
    /* Back side solid color overlay - prevents seeing through during flip */
    .card-container > .w-full.max-w-3xl::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: var(--ai-bg-primary, #f5f7f9);
      border-radius: 1.5rem;
      transform: rotateY(-180deg);
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      z-index: 99;
      pointer-events: none;
    }
    
    :root.theme-dark .card-container > .w-full.max-w-3xl::before,
    html.theme-dark .card-container > .w-full.max-w-3xl::before {
      background: var(--ai-bg-primary-dark, #1a1d22);
    }
    
    /* AI Chat header */
    .ai-chat-header {
      padding: 20px 24px;
      border-bottom: 1px solid var(--ai-border, rgba(107, 125, 145, 0.15));
      display: flex;
      align-items: center;
      gap: 12px;
      background: var(--ai-bg-card, #fdfdff);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
    }
    
    :root.theme-dark .ai-chat-header,
    html.theme-dark .ai-chat-header {
      background: var(--ai-bg-card-dark, #25282e);
      border-bottom-color: var(--ai-border-dark, rgba(150, 168, 188, 0.12));
      box-shadow: inset 0 1px 0 rgba(255, 248, 250, 0.08);
    }
    
    
    /* AI Chat messages area */
    .ai-chat-messages {
      flex: 1;
      overflow-y: auto;
      padding: 24px;
      display: flex;
      flex-direction: column;
      /* v637: stack from the bottom so a small number of messages
         sits right above the input bar instead of leaving a big
         empty gap. When the message list overflows the container,
         the oldest message scrolls off the top — standard chat
         behavior (iMessage, Slack, ChatGPT). */
      justify-content: flex-end;
      gap: 16px;
      min-height: 0;
      scrollbar-width: thin;
      scrollbar-color: rgba(90, 143, 160, 0.3) transparent;
    }
    
    .ai-chat-messages::-webkit-scrollbar {
      width: 6px;
    }
    
    .ai-chat-messages::-webkit-scrollbar-track {
      background: transparent;
    }
    
    .ai-chat-messages::-webkit-scrollbar-thumb {
      background: rgba(90, 143, 160, 0.3);
      border-radius: 3px;
    }
    
    .ai-chat-messages::-webkit-scrollbar-thumb:hover {
      background: rgba(90, 143, 160, 0.5);
    }
    
    .ai-message {
      display: flex;
      gap: 12px;
      animation: fadeIn 0.3s ease;
    }
    
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(8px); }
      to { opacity: 1; transform: translateY(0); }
    }
    
    .ai-message.user {
      flex-direction: row-reverse;
    }
    
    /* Make clickable user messages show hover state */
    .ai-message.user.clickable-message,
    .ai-message.user {
      transition: opacity 0.2s ease;
    }
    
    .ai-message.user:hover {
      opacity: 0.85;
    }
    
    .ai-message.user:active {
      opacity: 0.75;
    }
    
    /* Ensure user messages are always clickable */
    .ai-message.user {
      cursor: pointer;
    }
    
    .ai-message-avatar {
      width: 40px;
      height: 40px;
      border-radius: 10px;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-weight: 600;
      box-shadow: 0 2px 6px rgba(44, 50, 56, 0.12);
    }
    
    .ai-message.user .ai-message-avatar {
      background: linear-gradient(180deg, #5a8fa0 0%, #4a7a8a 100%);
      color: #fff;
      box-shadow: 0 2px 6px rgba(90, 143, 160, 0.25);
    }
    
    .ai-message.assistant .ai-message-avatar {
      background: linear-gradient(180deg, #6ba5b8 0%, #5a8fa0 100%);
      color: #fff;
      box-shadow: 0 2px 6px rgba(107, 165, 184, 0.25);
    }
    
    .ai-message-content-wrapper {
      max-width: 70%;
      display: flex;
      flex-direction: column;
      gap: 6px;
      align-items: flex-end;
    }
    
    .ai-message-content {
      max-width: 100%;
      padding: 12px 16px;
      border-radius: 12px;
      font-size: 15px;
      line-height: 1.6;
      word-wrap: break-word;
    }
    
    .ai-message-images-list {
      align-self: flex-end;
    }
    
    .ai-message-tap-hint {
      font-size: 11px;
      color: var(--ai-text-secondary, #5a6575);
      padding: 2px 0 0 0;
      font-style: normal;
      opacity: 0.75;
      font-weight: 500;
      letter-spacing: 0.2px;
      text-align: right;
      align-self: flex-end;
    }
    
    :root.theme-dark .ai-message-tap-hint {
      color: var(--ai-text-secondary-dark, #a0a8b5);
      opacity: 0.75;
    }
    
    .ai-message.user .ai-message-content {
      background: linear-gradient(180deg, #5a8fa0 0%, #4a7a8a 100%);
      color: #fff;
      box-shadow: 0 2px 8px rgba(90, 143, 160, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    }
    
    .ai-message.assistant .ai-message-content {
      background: var(--ai-bg-card, #fdfdff);
      color: var(--ai-text-primary, #2c2d30);
      border: 1px solid var(--ai-border, rgba(107, 125, 145, 0.15));
      box-shadow: 0 2px 6px rgba(44, 50, 56, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    }
    /* v651 — list-card render for AI responses. When the response
       contains bullet/number markdown, the inner <ul>/<ol> gets a
       clean tile-list look (each item on its own line, light divider
       between, small left-icon area). Matches the AI rule selector
       (Rewrite / Tone / Length / Remix) aesthetic. */
    .ai-message.assistant .ai-message-content ul,
    .ai-message.assistant .ai-message-content ol {
      list-style: none;
      padding: 0;
      margin: 4px 0 0;
    }
    .ai-message.assistant .ai-message-content li {
      padding: 10px 4px 10px 24px;
      position: relative;
      border-bottom: 1px solid var(--ai-border, rgba(107, 125, 145, 0.10));
      line-height: 1.4;
    }
    .ai-message.assistant .ai-message-content li:last-child {
      border-bottom: 0;
    }
    .ai-message.assistant .ai-message-content li::before {
      content: '';
      position: absolute;
      left: 8px;
      top: 16px;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--ai-accent, #5a8fa0);
      opacity: 0.7;
    }
    .ai-message.assistant .ai-message-content ol {
      counter-reset: ai-list;
    }
    .ai-message.assistant .ai-message-content ol li {
      padding-left: 30px;
      counter-increment: ai-list;
    }
    .ai-message.assistant .ai-message-content ol li::before {
      content: counter(ai-list) ".";
      background: transparent;
      border-radius: 0;
      width: auto;
      height: auto;
      top: 10px;
      left: 6px;
      color: var(--ai-accent, #5a8fa0);
      font-weight: 700;
      opacity: 1;
    }
    
    :root.theme-dark .ai-message.assistant .ai-message-content,
    html.theme-dark .ai-message.assistant .ai-message-content {
      background: var(--ai-bg-card-dark, #25282e);
      color: var(--ai-text-primary-dark, #f0f2f5);
      border-color: var(--ai-border-dark, rgba(150, 168, 188, 0.12));
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 250, 252, 0.08);
    }
    
    /* AI Chat input area */
    /* Image preview container */
    .ai-image-preview-container {
      padding: 8px 20px;
      border-top: 1px solid var(--ai-border, rgba(107, 125, 145, 0.15));
      background: var(--ai-bg-card, #fdfdff);
      display: flex;
      align-items: center;
      gap: 8px;
      overflow-x: auto;
      max-height: 80px;
      position: relative;
      z-index: 19;
    }
    
    :root.theme-dark .ai-image-preview-container {
      background: var(--ai-bg-card-dark, #25282e);
      border-top-color: var(--ai-border-dark, rgba(150, 168, 188, 0.12));
    }
    
    .ai-image-preview-item {
      position: relative;
      flex-shrink: 0;
      width: 60px;
      height: 60px;
      border-radius: 8px;
      overflow: visible;
      border: 1px solid var(--ai-border, rgba(107, 125, 145, 0.15));
      background: var(--ai-bg-card, #fdfdff);
    }
    
    .ai-image-preview-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 8px;
      display: block;
    }
    
    .ai-image-preview-remove {
      position: absolute;
      top: -8px;
      right: -8px;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: #ff4444;
      border: 2px solid var(--ai-bg-card, #fdfdff);
      color: #ffffff;
      font-size: 14px;
      font-weight: bold;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 1;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
      z-index: 10;
    }
    
    .ai-image-preview-remove:hover {
      background: #ff3333;
    }
    
    :root.theme-dark .ai-image-preview-remove {
      border-color: var(--ai-bg-card-dark, #25282e);
    }
    
    .ai-chat-input-container {
      padding: 12px 20px;
      border-top: 1px solid var(--ai-border, rgba(107, 125, 145, 0.15));
      background: var(--ai-bg-card, #fdfdff);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
      min-height: 52px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      position: relative;
      z-index: 20; /* Higher than answer view to appear on top */
    }
    
    :root.theme-dark .ai-chat-input-container,
    html.theme-dark .ai-chat-input-container {
      background: var(--ai-bg-card-dark, #25282e);
      border-top-color: var(--ai-border-dark, rgba(150, 168, 188, 0.12));
      box-shadow: inset 0 1px 0 rgba(255, 250, 252, 0.08);
    }
    
    /* Done button in AI view - matching close button height */
    .ai-done-btn {
      padding: 8px 20px;
      height: 36px;
      border-radius: 9999px;
      border: none;
      background: linear-gradient(180deg, #c17f4a 0%, #a86a3a 100%);
      color: #ffffff;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      box-shadow: 0 2px 8px rgba(193,127,74,0.3), inset 0 1px 0 rgba(255,255,255,0.25);
      transition: all 0.2s ease-out;
      display: none; /* Hidden by default - only show when answer view is visible */
      align-items: center;
      justify-content: center;
      white-space: nowrap;
    }
    
    /* Hide Done button when answer view is hidden (in chat/messages view) */
    .ai-answer-view.hidden ~ .ai-chat-input-container .ai-done-btn {
      display: none !important;
    }
    
    .ai-done-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 14px rgba(193,127,74,0.4);
    }
    
    .ai-done-btn:active {
      transform: translateY(0) scale(0.97);
    }
    
    :root.theme-dark .ai-done-btn {
      background: linear-gradient(180deg, #d4944a 0%, #b87a3a 100%);
      color: #ffffff;
      box-shadow: 0 2px 8px rgba(212,148,74,0.3), inset 0 1px 0 rgba(255,255,255,0.2);
    }
    
    :root.theme-dark .ai-done-btn:hover {
      box-shadow: 0 4px 14px rgba(212,148,74,0.4);
    }
    
    /* Show Done button in input container when answer view is visible - styled as white button */
    .ai-answer-view:not(.hidden) ~ .ai-chat-input-container {
      display: flex !important;
    }
    
    .ai-answer-view:not(.hidden) ~ .ai-chat-input-container .ai-done-btn {
      display: flex !important;
      background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%) !important;
      color: #000000 !important;
      border-radius: 12px !important;
      border: 1px solid rgba(139, 119, 92, 0.2) !important;
      box-shadow: 0 2px 6px rgba(44, 36, 24, 0.1), 0 1px 2px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
      height: 36px !important;
      padding: 8px 20px !important;
      transition: all 0.2s ease-out !important;
    }
    
    .ai-answer-view:not(.hidden) ~ .ai-chat-input-container .ai-done-btn:hover {
      background: linear-gradient(180deg, #fafafa 0%, #f5f5f5 100%) !important;
      transform: translateY(-1px) !important;
      box-shadow: 0 4px 12px rgba(44, 36, 24, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
    }
    
    .ai-answer-view:not(.hidden) ~ .ai-chat-input-container .ai-done-btn:active {
      transform: translateY(0) scale(0.98) !important;
      box-shadow: 0 1px 3px rgba(44, 36, 24, 0.12), inset 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    }
    
    :root.theme-dark .ai-answer-view:not(.hidden) ~ .ai-chat-input-container .ai-done-btn {
      background: linear-gradient(180deg, #ffffff 0%, #f5f5f5 100%) !important;
      color: #000000 !important;
      border-color: rgba(139, 119, 92, 0.25) !important;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
    }
    
    :root.theme-dark .ai-answer-view:not(.hidden) ~ .ai-chat-input-container .ai-done-btn:hover {
      background: linear-gradient(180deg, #f5f5f5 0%, #eeeeee 100%) !important;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35), 0 2px 4px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
    }
    
    /* Action references should match the same visual language as reference cards */
    .ai-answer-action-btn {
      width: 100%;
      padding: 10px 14px;
      border-radius: 10px;
      border: 1px solid rgba(107, 125, 145, 0.2);
      background: linear-gradient(180deg, #f8f9fa 0%, #f0f2f5 100%);
      color: var(--ai-text-primary, #2c2d30);
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.03), inset 0 1px 0 rgba(255, 255, 255, 0.8);
      transition: all 0.2s ease-out;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      margin-right: 0;
      gap: 10px;
      text-align: left;
      appearance: none;
      -webkit-appearance: none;
    }
    
    .ai-answer-action-btn:hover {
      background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%);
      transform: translateY(-1px);
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.9);
      border-color: rgba(90, 143, 160, 0.4);
    }
    
    .ai-answer-action-btn:active {
      transform: translateY(0);
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), inset 0 2px 4px rgba(0, 0, 0, 0.08);
    }
    
    :root.theme-dark .ai-answer-action-btn {
      background: linear-gradient(180deg, #2d3136 0%, #25282e 100%);
      border-color: rgba(150, 168, 188, 0.2);
      color: var(--ai-text-primary-dark, #f0f2f5);
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    }
    
    :root.theme-dark .ai-answer-action-btn:hover {
      box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.08);
      border-color: rgba(150, 168, 188, 0.3);
    }
    
    .ai-action-section {
      margin-top: 14px;
    }
    
    .ai-action-buttons {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-top: 8px;
    }
    
    .ai-action-buttons .ai-answer-action-btn {
      margin-right: 0;
      width: 100%;
    }
    
    .ai-action-ref-link {
      width: 100%;
      border: 1px solid rgba(107, 125, 145, 0.2);
      background: linear-gradient(180deg, #f8f9fa 0%, #f0f2f5 100%);
    }
    
    .ai-action-ref-link .ai-ref-link-icon.compose,
    .ai-action-ref-link .ai-ref-link-icon.reply {
      background: linear-gradient(135deg, #5AA0FF 0%, #4A8FEF 100%);
      color: #ffffff;
    }
    
    :root.theme-dark .ai-action-ref-link {
      border-color: rgba(150, 168, 188, 0.2);
      background: linear-gradient(180deg, #2d3136 0%, #25282e 100%);
    }
    
    /* Image preview modal */
    .ai-image-preview-modal {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.8);
      z-index: 10000;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }
    
    .ai-image-preview-modal.active {
      display: flex;
    }
    
    .ai-image-preview-modal-content {
      position: relative;
      max-width: 90%;
      max-height: 90%;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    
    .ai-image-preview-modal img {
      max-width: 100%;
      max-height: 70vh;
      border-radius: 12px;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    }
    
    .ai-image-preview-modal-close {
      position: absolute;
      top: -12px;
      right: -12px;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.95);
      border: 2px solid rgba(0, 0, 0, 0.1);
      color: #000;
      font-size: 22px;
      font-weight: bold;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
      z-index: 10;
      line-height: 1;
    }
    
    .ai-image-preview-modal-close:hover {
      background: #ffffff;
      transform: scale(1.05);
    }
    
    .ai-image-preview-modal-close:active {
      transform: scale(0.95);
    }
    
    .ai-message-image-thumbnail {
      transition: transform 0.2s ease, opacity 0.2s ease;
    }
    
    .ai-message-image-thumbnail:hover {
      transform: scale(1.05);
      opacity: 0.9;
    }
    
    /* Close button in messages screen (when answer view is hidden) */
    .ai-answer-view.hidden ~ .ai-chat-input-container .ai-close-btn {
      display: block !important;
    }
    
    .ai-answer-view:not(.hidden) ~ .ai-chat-input-container .ai-close-btn {
      display: none !important;
    }
    
    /* Close button styling - solid red background with white text, no glow, smaller height */
    .ai-close-btn {
      padding: 8px 20px;
      height: 36px;
      border-radius: 12px;
      border: 1px solid rgba(255, 68, 68, 0.2);
      background: linear-gradient(180deg, #ff4444 0%, #e63939 100%);
      color: #ffffff !important;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      box-shadow: 0 2px 6px rgba(255, 68, 68, 0.25), 0 1px 2px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.2);
      transition: all 0.2s ease-out;
      white-space: nowrap;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .ai-close-btn:hover {
      transform: translateY(-1px);
      background: linear-gradient(180deg, #ff5555 0%, #f04444 100%);
      box-shadow: 0 4px 12px rgba(255, 68, 68, 0.35), 0 2px 4px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    }
    
    .ai-close-btn:active {
      transform: translateY(0) scale(0.97);
      box-shadow: 0 1px 3px rgba(255, 68, 68, 0.3), inset 0 2px 4px rgba(0, 0, 0, 0.15);
    }
    
    :root.theme-dark .ai-close-btn {
      background: linear-gradient(180deg, #ff5555 0%, #e63939 100%);
      border-color: rgba(255, 68, 68, 0.3);
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    }
    
    :root.theme-dark .ai-close-btn:hover {
      background: linear-gradient(180deg, #ff6666 0%, #f04444 100%);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }
    
    /* Flickering line animation — DISABLED per design request.
       The teal cursor at the end of each typed character looked
       distracting in the answer view. Kept the class definition so
       any code that toggles `.ai-typing-line.fast` doesn't break. */
    .ai-typing-line,
    .ai-typing-line.fast,
    .ai-typing-cursor {
      display: none !important;
    }
    .ai-typing-line {
      display: inline-block;
      width: 4px;
      height: 24px;
      background: #5a8fa0;
      vertical-align: middle;
      margin-left: 0;
      margin-right: 2px;
      border-radius: 2px;
      animation: smoothFlicker 1.2s ease-in-out infinite;
    }
    
    .ai-typing-line.fast {
      animation: smoothFlicker 0.3s ease-in-out infinite;
    }
    
    :root.theme-dark .ai-typing-line {
      background: #6ba5b8;
    }
    
    @keyframes smoothFlicker {
      0%, 100% {
        opacity: 1;
      }
      50% {
        opacity: 0.3;
      }
    }
    
    /* Typing cursor that moves with text */
    .ai-typing-cursor {
      display: inline-block;
      width: 4px;
      height: 1.2em;
      background: #5a8fa0;
      vertical-align: middle;
      margin-left: 2px;
      border-radius: 2px;
      animation: blink 1s ease-in-out infinite;
    }
    
    :root.theme-dark .ai-typing-cursor {
      background: #6ba5b8;
    }
    
    @keyframes blink {
      0%, 50% {
        opacity: 1;
      }
      51%, 100% {
        opacity: 0;
      }
    }
    
    .ai-chat-input-wrapper {
      display: flex;
      gap: 12px;
      align-items: flex-end;
    }
    
    .ai-chat-input-with-send {
      flex: 1;
      position: relative;
      display: flex;
      align-items: flex-end;
    }
    
    .ai-chat-input-wrapper .ai-chat-input {
      flex: 1;
    }
    
    .ai-chat-input {
      flex: 1;
      padding: 12px 52px 12px 16px;
      padding-left: 20px;
      border: 1px solid var(--ai-border, rgba(107, 125, 145, 0.15));
      border-radius: 12px;
      background: var(--ai-bg-primary, #f5f7f9);
      color: var(--ai-text-primary, #2c2d30);
      font-size: 15px;
      font-family: inherit;
      resize: none;
      max-height: 120px;
      box-shadow: 0 2px 6px rgba(44, 50, 56, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.9);
      transition: all 0.15s ease-out;
    }
    
    :root.theme-dark .ai-chat-input,
    html.theme-dark .ai-chat-input {
      background: var(--ai-bg-primary-dark, #1a1d22);
      color: var(--ai-text-primary-dark, #f0f2f5);
      border-color: var(--ai-border-dark, rgba(150, 168, 188, 0.15));
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 250, 252, 0.08);
    }
    
    .ai-chat-input:focus {
      outline: none;
      border-color: #5a8fa0;
      box-shadow: 0 0 0 3px rgba(90, 143, 160, 0.1), 0 2px 6px rgba(44, 50, 56, 0.1);
    }
    
    .ai-chat-send-btn {
      padding: 12px 20px;
      border-radius: 12px;
      border: none;
      background: linear-gradient(180deg, #5a8fa0 0%, #4a7a8a 100%);
      color: #fff;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      box-shadow: 0 2px 8px rgba(90, 143, 160, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.25);
      transition: all 0.2s ease-out;
      display: flex;
      align-items: center;
      justify-content: center;
      min-width: 48px;
      height: 44px;
    }
    
    .ai-chat-send-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 14px rgba(90, 143, 160, 0.4);
    }
    
    .ai-chat-send-btn:active {
      transform: translateY(0) scale(0.97);
    }
    
    /* AI Chat Search Container - Full width like notes app */
    .ai-chat-search-container {
      padding: 0;
      flex-shrink: 0;
      background: var(--ai-bg-primary, #f5f7f9);
      border-bottom: 1px solid var(--ai-border, rgba(107, 125, 145, 0.15));
      width: 100%;
      margin: 0;
    }
    
    :root.theme-dark .ai-chat-search-container {
      background: var(--ai-bg-primary-dark, #1a1d22);
      border-bottom-color: var(--ai-border-dark, rgba(150, 168, 188, 0.12));
    }
    
    /* AI Chat Search Bar - Full width bar like notes app */
    .ai-chat-search-bar {
      position: relative;
      display: flex;
      align-items: center;
      background: var(--ai-bg-card, #fdfdff);
      border-radius: 0;
      border: none;
      border-bottom: 1px solid var(--ai-border, rgba(107, 125, 145, 0.15));
      /* v649: 14px vertical — slightly taller than v647's 12px per
         user request ("tiny bit bigger"). */
      padding: 14px 20px;
      gap: 12px;
      min-height: auto;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
      width: 100%;
    }
    /* v649: nudge the input text away from the very left edge so the
       caret doesn't sit underneath the back-arrow button. */
    .ai-chat-search-input { padding-left: 6px !important; }

    /* Mobile: Make search bar bigger */
    @media (max-width: 640px) {
      .ai-chat-search-bar {
        padding: 14px 20px;
        min-height: auto;
        gap: 12px;
      }
    }
    
    :root.theme-dark .ai-chat-search-bar {
      background: var(--ai-bg-card-dark, #25282e);
      border-bottom-color: var(--ai-border-dark, rgba(150, 168, 188, 0.12));
      box-shadow: inset 0 1px 0 rgba(255, 250, 252, 0.08);
    }
    
    /* Left buttons container - New chat and Upload joined */
    .ai-chat-left-buttons {
      display: flex;
      gap: 0;
      align-items: center;
      flex-shrink: 0;
    }
    
    /* New Chat Button - Rounded Square */
    .ai-chat-new-btn-square {
      width: 36px;
      height: 36px;
      border-radius: 10px 0 0 10px;
      border: none;
      border-right: 1px solid var(--ai-border, rgba(107, 125, 145, 0.15));
      background: linear-gradient(180deg, #e8ecf0 0%, #dde2e7 100%);
      color: var(--ai-text-primary, #2c2d30);
      cursor: pointer;
      box-shadow: 0 2px 6px rgba(44, 50, 56, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.9);
      transition: all 0.2s ease-out;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    
    .ai-chat-new-btn-square:hover {
      transform: translateY(-1px);
      box-shadow: 0 3px 10px rgba(44, 50, 56, 0.15);
    }
    
    .ai-chat-new-btn-square:active {
      transform: translateY(0) scale(0.95);
    }
    
    :root.theme-dark .ai-chat-new-btn-square {
      background: linear-gradient(180deg, #2e3238 0%, #25282e 100%);
      color: var(--ai-text-primary-dark, #f0f2f5);
      border-right-color: var(--ai-border-dark, rgba(150, 168, 188, 0.15));
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 250, 252, 0.08);
    }
    
    /* Upload Button - Rounded Square */
    .ai-chat-upload-btn-square {
      width: 36px;
      height: 36px;
      border-radius: 0 10px 10px 0;
      border: none;
      background: linear-gradient(180deg, #e8ecf0 0%, #dde2e7 100%);
      color: var(--ai-text-primary, #2c2d30);
      cursor: pointer;
      box-shadow: 0 2px 6px rgba(44, 50, 56, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.9);
      transition: all 0.2s ease-out;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    
    .ai-chat-upload-btn-square:hover {
      transform: translateY(-1px);
      box-shadow: 0 3px 10px rgba(44, 50, 56, 0.15);
    }
    
    .ai-chat-upload-btn-square:active {
      transform: translateY(0) scale(0.95);
    }
    
    :root.theme-dark .ai-chat-upload-btn-square {
      background: linear-gradient(180deg, #2e3238 0%, #25282e 100%);
      color: var(--ai-text-primary-dark, #f0f2f5);
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 250, 252, 0.08);
    }
    
    /* Done button bottom - small but wide enough */
    .ai-done-btn-bottom {
      padding: 8px 20px;
      border-radius: 8px;
      border: none;
      background: linear-gradient(180deg, #e8ecf0 0%, #dde2e7 100%);
      color: var(--ai-text-primary, #2c2d30);
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      box-shadow: 0 2px 6px rgba(44, 50, 56, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.9);
      transition: all 0.2s ease-out;
      flex-shrink: 0;
      min-width: 60px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .ai-done-btn-bottom:hover {
      transform: translateY(-1px);
      box-shadow: 0 3px 10px rgba(44, 50, 56, 0.15);
    }
    
    .ai-done-btn-bottom:active {
      transform: translateY(0) scale(0.95);
    }
    
    :root.theme-dark .ai-done-btn-bottom {
      background: linear-gradient(180deg, #2e3238 0%, #25282e 100%);
      color: var(--ai-text-primary-dark, #f0f2f5);
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 250, 252, 0.08);
    }
    
    /* Plus Button - Rounded rectangle like notes app (wider, not fully circular) */
    /* Icon buttons - matching AI message background color with minimal skeuomorphic icons */
    .ai-icon-btn {
      width: 40px;
      height: 40px;
      min-width: 40px;
      min-height: 40px;
      border-radius: 12px;
      border: none;
      background: transparent;
      cursor: pointer;
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent;
      box-sizing: border-box;
      padding: 0;
    }
    
    /* Light mode: icon matches AI avatar teal-blue color (#6ba5b8), bigger size */
    :root:not(.theme-dark) .ai-icon-btn svg {
      width: 24px;
      height: 24px;
      min-width: 24px;
      max-width: 24px;
      min-height: 24px;
      max-height: 24px;
      stroke: #6ba5b8;
      stroke-width: 2.5;
      flex-shrink: 0;
      display: block;
      transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      /* Minimal skeuomorphism on icon - subtle depth with multiple shadows */
      filter: drop-shadow(0 1px 1px rgba(107, 165, 184, 0.25)) 
              drop-shadow(0 0.5px 0.5px rgba(107, 165, 184, 0.15))
              drop-shadow(0 -0.5px 0.5px rgba(255, 255, 255, 0.4));
    }
    
    /* Scale up icon on hover, no background change */
    :root:not(.theme-dark) .ai-icon-btn:hover svg {
      transform: scale(1.15);
      filter: drop-shadow(0 2px 3px rgba(107, 165, 184, 0.3)) 
              drop-shadow(0 1px 1px rgba(107, 165, 184, 0.2))
              drop-shadow(0 -1px 1px rgba(255, 255, 255, 0.5));
    }
    
    :root:not(.theme-dark) .ai-icon-btn:active svg {
      transform: scale(1.05);
    }
    
    /* Dark mode: icon matches AI avatar teal-blue color (lighter for dark mode), bigger size */
    :root.theme-dark .ai-icon-btn svg {
      width: 24px;
      height: 24px;
      min-width: 24px;
      max-width: 24px;
      min-height: 24px;
      max-height: 24px;
      stroke: #7bb5c8;
      stroke-width: 2.5;
      flex-shrink: 0;
      display: block;
      transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      /* Minimal skeuomorphism on icon - subtle depth with multiple shadows */
      filter: drop-shadow(0 1px 1px rgba(123, 181, 200, 0.3)) 
              drop-shadow(0 0.5px 0.5px rgba(123, 181, 200, 0.2))
              drop-shadow(0 -0.5px 0.5px rgba(255, 255, 255, 0.1));
    }
    
    /* Scale up icon on hover, no background change */
    :root.theme-dark .ai-icon-btn:hover svg {
      transform: scale(1.15);
      filter: drop-shadow(0 2px 3px rgba(123, 181, 200, 0.4)) 
              drop-shadow(0 1px 1px rgba(123, 181, 200, 0.3))
              drop-shadow(0 -1px 1px rgba(255, 255, 255, 0.15));
    }
    
    :root.theme-dark .ai-icon-btn:active svg {
      transform: scale(1.05);
    }
    
    /* Hide icon buttons (plus and image picker) in answer view */
    .ai-answer-view:not(.hidden) ~ .ai-chat-input-container #ai-plus-btn,
    .ai-answer-view:not(.hidden) ~ .ai-chat-input-container #ai-image-picker-btn {
      display: none !important;
    }
    
    /* AI Close Button (X circle in search bar) - Simple, just a bit darker for visibility */
    /* Note: This is for the search bar close button, not the input container Close button */
    .ai-chat-search-container .ai-close-btn,
    .ai-chat-search-bar .ai-close-btn {
      background: var(--bg-button, #E1E1E6);
      transition: all 0.2s ease-out;
    }
    
    /* Light mode: slightly darker for visibility */
    :root:not(.theme-dark) .ai-chat-search-container .ai-close-btn,
    :root:not(.theme-dark) .ai-chat-search-bar .ai-close-btn {
      background: #C0C0C0;
    }
    
    :root:not(.theme-dark) .ai-chat-search-container .ai-close-btn svg,
    :root:not(.theme-dark) .ai-chat-search-bar .ai-close-btn svg {
      color: var(--text-primary, #000000);
      stroke: var(--text-primary, #000000);
    }
    
    /* Dark mode: slightly lighter for visibility */
    :root.theme-dark .ai-chat-search-container .ai-close-btn,
    :root.theme-dark .ai-chat-search-bar .ai-close-btn {
      background: #3C3C3E;
    }
    
    :root.theme-dark .ai-chat-search-container .ai-close-btn svg,
    :root.theme-dark .ai-chat-search-bar .ai-close-btn svg {
      color: var(--text-primary, #FFFFFF);
      stroke: var(--text-primary, #FFFFFF);
    }
    
    /* View Toggle - Chats and Answers tabs */
    .ai-view-toggle {
      display: flex;
      background: var(--ai-bg-tertiary, #e8ecf0);
      border: 1px solid var(--ai-border, rgba(107, 125, 145, 0.15));
      border-radius: 10px;
      padding: 4px;
      box-shadow: inset 0 1px 3px rgba(44, 50, 56, 0.08);
      flex-shrink: 0;
    }
    
    :root.theme-dark .ai-view-toggle {
      background: var(--ai-bg-tertiary-dark, #2e3238);
      border-color: var(--ai-border-dark, rgba(150, 168, 188, 0.15));
      box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
    }
    
    .ai-view-btn {
      padding: 8px 16px;
      min-width: 60px;
      text-align: center;
      background: transparent;
      border: none;
      border-radius: 8px;
      color: var(--ai-text-tertiary, #8a95a5);
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s ease-out;
      flex-shrink: 0;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .ai-view-btn:hover {
      color: var(--ai-text-primary, #2c2d30);
    }
    
    .ai-view-btn.active {
      background: linear-gradient(180deg, #fdfdff 0%, #f5f7f9 100%);
      color: var(--ai-text-primary, #2c2d30);
      box-shadow: 0 1px 3px rgba(44, 50, 56, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    }
    
    :root.theme-dark .ai-view-btn {
      color: var(--ai-text-tertiary-dark, #6a7585);
    }
    
    :root.theme-dark .ai-view-btn:hover {
      color: var(--ai-text-primary-dark, #f0f2f5);
    }
    
    :root.theme-dark .ai-view-btn.active {
      background: linear-gradient(180deg, #25282e 0%, #1a1d22 100%);
      color: var(--ai-text-primary-dark, #f0f2f5);
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 250, 252, 0.08);
    }
    
    /* Back Button - Inside search bar */
    .ai-chat-back-btn {
      width: 20px;
      height: 20px;
      border: none;
      background: transparent;
      color: var(--ai-text-primary, #2c2d30);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.2s ease;
      flex-shrink: 0;
      padding: 0;
    }
    
    .ai-chat-back-btn:hover {
      opacity: 0.7;
    }
    
    .ai-chat-back-btn:active {
      opacity: 0.5;
    }
    
    :root.theme-dark .ai-chat-back-btn {
      color: var(--ai-text-primary-dark, #f0f2f5);
    }
    
    .ai-chat-search-icon {
      flex-shrink: 0;
      color: var(--ai-accent, #5a8fa0);
      stroke-width: 2;
    }
    
    :root.theme-dark .ai-chat-search-icon {
      color: var(--ai-accent, #6ba5b8);
    }
    
    .ai-chat-search-input {
      flex: 1;
      border: none;
      background: transparent;
      font-size: 16px;
      color: var(--ai-text-primary, #2c2d30);
      outline: none;
      padding: 0;
      line-height: 1.5;
    }
    
    .ai-chat-search-input::placeholder {
      color: var(--ai-text-tertiary, #8a95a5);
    }
    
    :root.theme-dark .ai-chat-search-input {
      color: var(--ai-text-primary-dark, #f0f2f5);
    }
    
    :root.theme-dark .ai-chat-search-input::placeholder {
      color: var(--ai-text-tertiary-dark, #6a7585);
    }
    
    /* Chat List View */
    .ai-chat-list-view {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      display: flex;
      flex-direction: column;
      background: var(--ai-bg-primary, #f5f7f9);
      z-index: 101;
    }
    
    :root.theme-dark .ai-chat-list-view {
      background: var(--ai-bg-primary-dark, #1a1d22);
    }
    
    .ai-chat-list-view.hidden {
      display: none;
    }
    
    .ai-chat-list-container {
      flex: 1;
      overflow-y: auto;
      padding: 0;
    }
    
    .ai-chat-list {
      padding: 0;
    }
    
    .ai-chat-item {
      min-height: 56px;
      padding: 12px 16px;
      background: var(--ai-bg-card, #fdfdff);
      border: none;
      border-bottom: 1px solid var(--ai-border, rgba(107, 125, 145, 0.15));
      display: flex;
      align-items: center;
      gap: 16px;
      cursor: pointer;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
      transition: background 0.15s ease-out;
    }
    
    .ai-chat-item:hover {
      background: var(--ai-bg-tertiary, #f0f2f5);
    }
    
    .ai-chat-item:active {
      background: var(--ai-bg-button, #e5e8eb);
    }
    
    :root.theme-dark .ai-chat-item {
      background: var(--ai-bg-card-dark, #25282e);
      border-bottom-color: var(--ai-border-dark, rgba(150, 168, 188, 0.12));
      box-shadow: inset 0 1px 0 rgba(255, 250, 252, 0.08);
    }
    
    :root.theme-dark .ai-chat-item:hover {
      background: var(--ai-bg-tertiary-dark, #2e3238);
    }
    
    .ai-chat-item-text {
      flex: 1;
      min-width: 0;
      font-size: 15px;
      font-weight: 500;
      color: var(--ai-text-primary, #2c2d30);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    
    :root.theme-dark .ai-chat-item-text {
      color: var(--ai-text-primary-dark, #f0f2f5);
    }
    
    .ai-chat-item-delete {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      border: none;
      background: linear-gradient(180deg, #ff4444 0%, #e63939 100%);
      color: white;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transition: opacity 0.2s ease, transform 0.2s ease, background 0.2s ease;
      box-shadow: 0 2px 6px rgba(255, 68, 68, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
      flex-shrink: 0;
      z-index: 10;
    }
    
    .ai-chat-item:hover .ai-chat-item-delete {
      opacity: 1;
    }
    
    .ai-chat-item-delete:hover {
      background: linear-gradient(180deg, #ff5555 0%, #ff3333 100%);
      transform: scale(1.1);
      box-shadow: 0 3px 8px rgba(255, 68, 68, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    }
    
    .ai-chat-item-delete:active {
      transform: scale(0.95);
      background: linear-gradient(180deg, #e63939 0%, #cc2e2e 100%);
      box-shadow: 0 1px 3px rgba(255, 68, 68, 0.3), inset 0 2px 4px rgba(0, 0, 0, 0.15);
    }
    
    .ai-chat-item-delete svg {
      width: 16px;
      height: 16px;
      stroke: currentColor;
      stroke-width: 2.5;
      stroke-linecap: round;
    }
    
    /* Show delete button on touch devices */
    @media (hover: none) and (pointer: coarse) {
      .ai-chat-item-delete {
        opacity: 0.7;
      }
      
      .ai-chat-item:active .ai-chat-item-delete {
        opacity: 1;
      }
    }
    
    .ai-chat-empty-state {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 40px 20px;
      text-align: center;
      min-height: 300px;
    }
    
    .ai-chat-empty-state.hidden {
      display: none;
    }
    
    .ai-chat-empty-icon {
      width: 100px;
      height: 100px;
      margin-bottom: 20px;
      border-radius: 24px;
      background: var(--ai-bg-card, #fdfdff);
      border: 1px solid var(--ai-border, rgba(107, 125, 145, 0.15));
      box-shadow: 0 4px 16px rgba(44, 50, 56, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.9);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--ai-accent, #5a8fa0);
    }
    
    :root.theme-dark .ai-chat-empty-icon {
      background: var(--ai-bg-card-dark, #25282e);
      border-color: var(--ai-border-dark, rgba(150, 168, 188, 0.12));
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 250, 252, 0.08);
      color: var(--ai-accent, #6ba5b8);
    }
    
    .ai-chat-empty-text {
      font-size: 16px;
      font-weight: 500;
      color: var(--ai-text-secondary, #5a6575);
      margin-bottom: 8px;
    }
    
    .ai-chat-empty-subtext {
      font-size: 13px;
      color: var(--ai-text-tertiary, #8a95a5);
    }
    
    :root.theme-dark .ai-chat-empty-text {
      color: var(--ai-text-secondary-dark, #a8b5c5);
    }
    
    :root.theme-dark .ai-chat-empty-subtext {
      color: var(--ai-text-tertiary-dark, #6a7585);
    }
    
    /* New Chat Button - Circle */
    .ai-chat-new-btn-circle {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      border: none;
      background: linear-gradient(180deg, #e8ecf0 0%, #dde2e7 100%);
      color: var(--ai-text-primary, #2c2d30);
      cursor: pointer;
      box-shadow: 0 2px 6px rgba(44, 50, 56, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.9);
      transition: all 0.2s ease-out;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    
    .ai-chat-new-btn-circle:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(44, 50, 56, 0.15);
    }
    
    .ai-chat-new-btn-circle:active {
      transform: translateY(0) scale(0.97);
    }
    
    :root.theme-dark .ai-chat-new-btn-circle {
      background: linear-gradient(180deg, #2e3238 0%, #25282e 100%);
      color: var(--ai-text-primary-dark, #f0f2f5);
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 250, 252, 0.08);
    }
    
    /* Circle Send Button */
    .ai-chat-send-btn-circle {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      border: none;
      background: linear-gradient(180deg, #5a8fa0 0%, #4a7a8a 100%);
      color: #fff;
      cursor: pointer;
      box-shadow: 0 2px 8px rgba(90, 143, 160, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.25);
      transition: all 0.2s ease-out;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    
    .ai-chat-send-btn-circle:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 14px rgba(90, 143, 160, 0.4);
    }
    
    .ai-chat-send-btn-circle:active {
      transform: translateY(0) scale(0.97);
    }
    
    /* Send Button Inside Input */
    .ai-chat-send-btn-inside {
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
      width: 28px;
      height: 28px;
      box-shadow: 0 2px 6px rgba(90, 143, 160, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }
    
    .ai-chat-send-btn-inside:hover {
      transform: translateY(-50%) translateY(-1px);
      box-shadow: 0 3px 10px rgba(90, 143, 160, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }
    
    .ai-chat-send-btn-inside:active {
      transform: translateY(-50%) scale(0.95);
    }
    
    /* Mobile: Ensure send button is centered */
    @media (max-width: 640px) {
      .ai-chat-send-btn-inside {
        top: 50%;
        transform: translateY(-50%);
      }
      
      .ai-chat-send-btn-inside:hover {
        transform: translateY(-50%) translateY(-1px);
      }
      
      .ai-chat-send-btn-inside:active {
        transform: translateY(-50%) scale(0.95);
      }
    }
    
    
    /* Ensure list view is positioned correctly */
    .ai-chat-view {
      display: flex;
      flex-direction: column;
      position: relative;
    }
    
    /* Hide messages and input when list view is shown */
    .ai-chat-list-view:not(.hidden) ~ .ai-chat-messages,
    .ai-chat-list-view:not(.hidden) ~ .ai-chat-input-container {
      display: none !important;
    }
    
    /* Hide messages and search when answer view is visible */
    .ai-answer-view:not(.hidden) ~ .ai-chat-messages {
      display: none !important;
    }
    
    .ai-answer-view:not(.hidden) ~ .ai-chat-search-container {
      display: none !important;
    }
    
    /* Answer View - full UI section from top search area to bottom bar */
    .ai-answer-view {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      display: none;
      flex-direction: column;
      background: var(--ai-bg-card, #fdfdff);
      z-index: 10;
      overflow: hidden;
    }
    
    .ai-answer-view:not(.hidden) {
      display: flex;
      bottom: 0; /* Extend all the way to bottom - no gap */
    }
    
    :root.theme-dark .ai-answer-view {
      background: var(--ai-bg-card-dark, #25282e);
    }
    
    .ai-answer-view.hidden {
      display: none;
    }
    
    .ai-answer-view-header {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      padding: 12px 20px;
      border-bottom: 1px solid var(--ai-border, rgba(107, 125, 145, 0.15));
      background: var(--ai-bg-card, #fdfdff);
      flex-shrink: 0;
    }
    
    :root.theme-dark .ai-answer-view-header {
      background: var(--ai-bg-card-dark, #25282e);
      border-bottom-color: var(--ai-border-dark, rgba(150, 168, 188, 0.12));
    }
    
    .ai-answer-view-title {
      font-size: 16px;
      font-weight: 600;
      color: var(--ai-text-primary, #2c2d30);
    }
    
    :root.theme-dark .ai-answer-view-title {
      color: var(--ai-text-primary-dark, #f0f2f5);
    }
    
    .ai-answer-view-close {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      border: none;
      background: transparent;
      color: var(--ai-text-secondary, #6b7d91);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s ease;
      flex-shrink: 0;
    }
    
    .ai-answer-view-close:hover {
      background: var(--ai-bg-tertiary, #f0f2f5);
      color: var(--ai-text-primary, #2c2d30);
    }
    
    :root.theme-dark .ai-answer-view-close {
      color: var(--ai-text-secondary-dark, #9ca3b0);
    }
    
    :root.theme-dark .ai-answer-view-close:hover {
      background: var(--ai-bg-tertiary-dark, #2e3238);
      color: var(--ai-text-primary-dark, #f0f2f5);
    }
    
    .ai-answer-view-content {
      flex: 1;
      overflow-y: auto;
      padding: 24px 20px 120px 20px;
      min-height: 0;
      color: var(--ai-text-primary, #2c2d30);
      font-size: 15px;
      line-height: 1.65;
      text-align: left;
      scrollbar-width: thin;
      scrollbar-color: rgba(90, 143, 160, 0.3) transparent;
    }
    
    .ai-answer-view-content::-webkit-scrollbar {
      width: 6px;
    }
    
    .ai-answer-view-content::-webkit-scrollbar-track {
      background: transparent;
    }
    
    .ai-answer-view-content::-webkit-scrollbar-thumb {
      background: rgba(90, 143, 160, 0.3);
      border-radius: 3px;
    }
    
    .ai-answer-view-content::-webkit-scrollbar-thumb:hover {
      background: rgba(90, 143, 160, 0.5);
    }

    /* ── Posts-app rule answer list ──
       Rewrite / Tone / Length / Remix results render here as
       edge-to-edge cards with no gaps. Skeleton rows hold a place
       for items that haven't streamed in yet. */
    .ai-rule-list {
      display: flex; flex-direction: column;
      margin: -24px -20px -120px -20px;  /* cancel parent padding so rows are truly edge-to-edge */
      padding-bottom: 120px;
    }
    .ai-rule-row {
      padding: 16px 20px;
      border-bottom: 1px solid rgba(120, 130, 145, 0.15);
      background: var(--ai-bg-primary, #ffffff);
      animation: ai-rule-row-in 0.28s ease-out;
    }
    .ai-rule-row:last-child { border-bottom: none; }
    @keyframes ai-rule-row-in {
      from { opacity: 0; transform: translateY(4px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .ai-rule-row-title {
      font-size: 13px; font-weight: 700;
      color: var(--ai-text-primary, #2c2d30);
      margin-bottom: 6px;
    }
    .ai-rule-row-body {
      font-size: 15px; line-height: 1.55;
      color: var(--ai-text-primary, #2c2d30);
      white-space: pre-wrap; word-wrap: break-word;
    }
    .ai-rule-row-body b { font-weight: 700; }
    /* Skeleton state */
    .ai-rule-row.skeleton .ai-rule-row-title {
      width: 110px; height: 12px; border-radius: 4px;
      background: linear-gradient(90deg,
        rgba(120, 130, 145, 0.10) 0%,
        rgba(120, 130, 145, 0.22) 50%,
        rgba(120, 130, 145, 0.10) 100%);
      background-size: 200% 100%;
      animation: ai-rule-shimmer 1.2s linear infinite;
    }
    .ai-rule-row.skeleton .ai-rule-row-body {
      display: flex; flex-direction: column; gap: 8px;
    }
    .ai-rule-row.skeleton .ai-rule-skel {
      height: 12px; border-radius: 4px;
      background: linear-gradient(90deg,
        rgba(120, 130, 145, 0.10) 0%,
        rgba(120, 130, 145, 0.22) 50%,
        rgba(120, 130, 145, 0.10) 100%);
      background-size: 200% 100%;
      animation: ai-rule-shimmer 1.2s linear infinite;
    }
    .ai-rule-row.skeleton .ai-rule-skel:nth-child(1) { width: 96%; }
    .ai-rule-row.skeleton .ai-rule-skel:nth-child(2) { width: 88%; }
    .ai-rule-row.skeleton .ai-rule-skel:nth-child(3) { width: 70%; }
    @keyframes ai-rule-shimmer {
      0%   { background-position: 200% 0; }
      100% { background-position: -200% 0; }
    }
    /* Dark-mode rule rows */
    :root.theme-dark .ai-rule-row,
    html.theme-dark .ai-rule-row {
      background: #1a1d22 !important;
      border-color: rgba(255, 255, 255, 0.06);
    }
    :root.theme-dark .ai-rule-row-title,
    html.theme-dark .ai-rule-row-title,
    :root.theme-dark .ai-rule-row-body,
    html.theme-dark .ai-rule-row-body {
      color: #f0f2f5 !important;
    }
    
    :root.theme-dark .ai-answer-view-content {
      color: var(--ai-text-primary-dark, #f0f2f5);
    }
    
    /* Clean markdown formatting styles */
    .ai-answer-view-content h1,
    .ai-answer-view-content h2,
    .ai-answer-view-content h3 {
      font-weight: 600;
      margin-top: 18px;
      margin-bottom: 8px;
      line-height: 1.35;
      color: var(--ai-text-primary, #2c2d30);
    }
    
    .ai-answer-view-content h1:first-child,
    .ai-answer-view-content h2:first-child,
    .ai-answer-view-content h3:first-child {
      margin-top: 0;
    }
    
    .ai-answer-view-content h1 {
      font-size: 20px;
      font-weight: 700;
    }
    
    .ai-answer-view-content h2 {
      font-size: 17px;
    }
    
    .ai-answer-view-content h3 {
      font-size: 15px;
    }
    
    .ai-answer-view-content p {
      margin-bottom: 12px;
      line-height: 1.6;
    }
    
    .ai-answer-view-content p:last-child {
      margin-bottom: 0;
    }
    
    /* Paragraphs after headings should have less top space */
    .ai-answer-view-content h1 + p,
    .ai-answer-view-content h2 + p,
    .ai-answer-view-content h3 + p {
      margin-top: 0;
    }
    
    .ai-answer-view-content strong {
      font-weight: 600;
      color: var(--ai-text-primary, #2c2d30);
    }
    
    .ai-answer-view-content em {
      font-style: italic;
    }
    
    /* Bold text followed by colon (like "Heading:") - give it more prominence */
    .ai-answer-view-content p strong:first-child {
      display: inline;
    }
    
    .ai-answer-view-content code {
      background: var(--ai-bg-tertiary, #f0f2f5);
      padding: 2px 5px;
      border-radius: 4px;
      font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', monospace;
      font-size: 13px;
      color: var(--ai-text-primary, #2c2d30);
    }
    
    .ai-answer-view-content pre {
      background: var(--ai-bg-tertiary, #f0f2f5);
      padding: 12px 14px;
      border-radius: 8px;
      overflow-x: auto;
      margin: 12px 0;
      line-height: 1.45;
    }
    
    .ai-answer-view-content pre code {
      background: none;
      padding: 0;
      font-size: 12px;
    }
    
    .ai-answer-view-content ul,
    .ai-answer-view-content ol {
      margin: 10px 0;
      padding-left: 22px;
      list-style-position: outside;
    }
    
    .ai-answer-view-content ul {
      list-style-type: disc;
    }
    
    .ai-answer-view-content ol {
      list-style-type: decimal;
    }
    
    .ai-answer-view-content li {
      margin-bottom: 6px;
      line-height: 1.55;
      padding-left: 2px;
    }
    
    .ai-answer-view-content li:last-child {
      margin-bottom: 0;
    }
    
    /* Nested lists */
    .ai-answer-view-content li ul,
    .ai-answer-view-content li ol {
      margin: 4px 0 4px 0;
      padding-left: 20px;
    }
    
    .ai-answer-view-content li li {
      margin-bottom: 4px;
    }
    
    .ai-answer-view-content blockquote {
      border-left: 3px solid var(--ai-accent, #5a8fa0);
      padding: 4px 0 4px 12px;
      margin: 10px 0;
      color: var(--ai-text-primary, #2c2d30);
      font-style: normal;
      background: transparent;
    }
    
    .ai-answer-view-content blockquote p {
      margin-bottom: 6px;
      line-height: 1.55;
    }
    
    .ai-answer-view-content blockquote p:last-child {
      margin-bottom: 0;
    }
    
    /* Nested blockquotes */
    .ai-answer-view-content blockquote blockquote {
      margin: 6px 0;
      padding-left: 10px;
    }
    
    .ai-answer-view-content a {
      color: #5a8fa0;
      text-decoration: underline;
      text-underline-offset: 2px;
    }
    
    .ai-answer-view-content a:hover {
      color: #4a7f90;
    }
    
    .ai-answer-view-content hr {
      border: none;
      border-top: 1px solid var(--ai-border, rgba(107, 125, 145, 0.2));
      margin: 16px 0;
    }
    
    /* Dark theme markdown styles */
    :root.theme-dark .ai-answer-view-content h1,
    :root.theme-dark .ai-answer-view-content h2,
    :root.theme-dark .ai-answer-view-content h3 {
      color: var(--ai-text-primary-dark, #f0f2f5);
    }
    
    :root.theme-dark .ai-answer-view-content strong {
      color: var(--ai-text-primary-dark, #f0f2f5);
    }
    
    :root.theme-dark .ai-answer-view-content code {
      background: var(--ai-bg-tertiary-dark, #2e3238);
      color: var(--ai-text-primary-dark, #f0f2f5);
    }
    
    :root.theme-dark .ai-answer-view-content pre {
      background: var(--ai-bg-tertiary-dark, #2e3238);
    }
    
    :root.theme-dark .ai-answer-view-content blockquote {
      border-left-color: var(--ai-accent-dark, #6ba5b8);
      color: var(--ai-text-primary-dark, #f0f2f5);
    }
    
    :root.theme-dark .ai-answer-view-content a {
      color: #6ba5b8;
    }
    
    :root.theme-dark .ai-answer-view-content a:hover {
      color: #7bb5c8;
    }
    
    :root.theme-dark .ai-answer-view-content hr {
      border-top-color: var(--ai-border-dark, rgba(150, 168, 188, 0.2));
    }
    
    /* Rich Links - Separate Cards After Content */
    .ai-rich-links-container {
      margin-top: 24px;
      padding-top: 20px;
      border-top: 1px solid var(--ai-border, rgba(107, 125, 145, 0.15));
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    
    :root.theme-dark .ai-rich-links-container {
      border-top-color: var(--ai-border-dark, rgba(150, 168, 188, 0.12));
    }
    
    .ai-rich-links-label {
      font-size: 11px;
      font-weight: 600;
      color: var(--ai-text-tertiary, #8E8E93);
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 4px;
    }
    
    :root.theme-dark .ai-rich-links-label {
      color: var(--ai-text-tertiary-dark, #8E8E93);
    }
    
    .ai-rich-links-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    
    .ai-rich-link {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 14px;
      background: linear-gradient(180deg, #f8f9fa 0%, #f0f2f5 100%);
      border: 1px solid rgba(107, 125, 145, 0.2);
      border-radius: 10px;
      color: var(--ai-text-primary, #2c2d30);
      text-decoration: none;
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s ease-out;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.8);
      line-height: 1.4;
    }
    
    .ai-rich-link:hover {
      transform: translateY(-1px);
      box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.9);
      border-color: rgba(107, 125, 145, 0.3);
    }
    
    .ai-rich-link:active {
      transform: translateY(0);
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), inset 0 2px 4px rgba(0, 0, 0, 0.1);
    }
    
    .ai-rich-link-icon {
      width: 16px;
      height: 16px;
      flex-shrink: 0;
      opacity: 0.8;
    }
    
    .ai-rich-link-text {
      flex: 1;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    
    :root.theme-dark .ai-rich-link {
      background: linear-gradient(180deg, #2d3136 0%, #25282e 100%);
      border-color: rgba(150, 168, 188, 0.2);
      color: var(--ai-text-primary-dark, #f0f2f5);
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    }
    
    :root.theme-dark .ai-rich-link:hover {
      box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.08);
      border-color: rgba(150, 168, 188, 0.3);
    }
    
    :root.theme-dark .ai-rich-link:active {
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), inset 0 2px 4px rgba(0, 0, 0, 0.2);
    }
    
    /* AI App Reference Links - Clickable links to open apps with specific items */
    .ai-references-section {
      margin-top: 20px;
      padding-top: 16px;
      border-top: 1px solid var(--ai-border, rgba(107, 125, 145, 0.15));
    }
    
    :root.theme-dark .ai-references-section {
      border-top-color: var(--ai-border-dark, rgba(150, 168, 188, 0.12));
    }
    
    .ai-references-label {
      font-size: 11px;
      font-weight: 600;
      color: var(--ai-text-tertiary, #8E8E93);
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 10px;
    }
    
    :root.theme-dark .ai-references-label {
      color: var(--ai-text-tertiary-dark, #8E8E93);
    }
    
    .ai-references-grid {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    
    .ai-ref-link {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 14px;
      background: linear-gradient(180deg, #f8f9fa 0%, #f0f2f5 100%);
      border: 1px solid rgba(107, 125, 145, 0.2);
      border-radius: 10px;
      color: var(--ai-text-primary, #2c2d30);
      text-decoration: none;
      font-size: 14px;
      cursor: pointer;
      transition: all 0.2s ease-out;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.03), inset 0 1px 0 rgba(255, 255, 255, 0.8);
    }
    
    .ai-ref-link:hover {
      transform: translateY(-1px);
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.9);
      border-color: rgba(90, 143, 160, 0.4);
      background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%);
    }
    
    .ai-ref-link:active {
      transform: translateY(0);
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), inset 0 2px 4px rgba(0, 0, 0, 0.08);
    }
    
    .ai-ref-link-icon {
      width: 28px;
      height: 28px;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      font-size: 14px;
    }
    
    .ai-ref-link-icon.note { background: linear-gradient(135deg, #FFD93D 0%, #F5B800 100%); }
    .ai-ref-link-icon.reminder { background: linear-gradient(135deg, #5A8FA0 0%, #4A7F90 100%); color: white; }
    .ai-ref-link-icon.file { background: linear-gradient(135deg, #6C7CE0 0%, #5A6BD0 100%); color: white; }
    .ai-ref-link-icon.canvas { background: linear-gradient(135deg, #E07CE0 0%, #D06CD0 100%); color: white; }
    .ai-ref-link-icon.task { background: linear-gradient(135deg, #4CAF50 0%, #43A047 100%); color: white; }
    .ai-ref-link-icon.mail { background: linear-gradient(135deg, #5AA0FF 0%, #4A8FEF 100%); color: white; }
    .ai-ref-link-icon.compose { background: linear-gradient(135deg, #5AA0FF 0%, #4A8FEF 100%); color: white; }
    .ai-ref-link-icon.reply { background: linear-gradient(135deg, #5AA0FF 0%, #4A8FEF 100%); color: white; }
    .ai-ref-link-icon.action { background: linear-gradient(135deg, #8A8F99 0%, #6F7682 100%); color: white; }
    
    .ai-ref-link-content {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    
    .ai-ref-link-title {
      font-weight: 500;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    
    .ai-ref-link-type {
      font-size: 11px;
      color: var(--ai-text-secondary, #6b7d91);
      text-transform: capitalize;
    }
    
    :root.theme-dark .ai-ref-link-type {
      color: var(--ai-text-secondary-dark, #9ca3b0);
    }
    
    .ai-ref-link-arrow {
      width: 16px;
      height: 16px;
      color: var(--ai-text-tertiary, #8E8E93);
      flex-shrink: 0;
    }
    
    :root.theme-dark .ai-ref-link {
      background: linear-gradient(180deg, #2d3136 0%, #25282e 100%);
      border-color: rgba(150, 168, 188, 0.2);
      color: var(--ai-text-primary-dark, #f0f2f5);
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    }
    
    :root.theme-dark .ai-ref-link:hover {
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25), 0 2px 4px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.08);
      border-color: rgba(90, 143, 160, 0.5);
      background: linear-gradient(180deg, #32373c 0%, #2a2e33 100%);
    }
    
    :root.theme-dark .ai-ref-link:active {
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), inset 0 2px 4px rgba(0, 0, 0, 0.15);
    }
    
    :root.theme-dark .ai-ref-link-arrow {
      color: var(--ai-text-tertiary-dark, #8E8E93);
    }
    
    /* AI Limit Notification Bar */
    .ai-limit-bar {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 64px;
      background: var(--bg-card);
      border-top: 1px solid var(--border-light);
      border-radius: 0 0 1.5rem 1.5rem;
      z-index: 10000;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08), 0 -2px 4px rgba(0, 0, 0, 0.04);
      transform: translateY(100%);
      transition: transform 0.2s ease-out;
    }
    .ai-chat-view {
      position: relative;
    }
    .ai-limit-bar:not(.hidden) {
      transform: translateY(0);
    }
    :root.theme-dark .ai-limit-bar {
      box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.2), 0 -2px 4px rgba(0, 0, 0, 0.1);
    }
    .ai-limit-bar-content {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 0 20px;
      width: 100%;
      max-width: 100%;
    }
    .ai-limit-bar-icon {
      width: 20px;
      height: 20px;
      color: var(--text-secondary);
      flex-shrink: 0;
    }
    .ai-limit-bar-text {
      font-size: 14px;
      color: var(--text-primary);
      line-height: 1.5;
      font-weight: 500;
      flex: 1;
      min-width: 0;
    }
    .ai-limit-bar-upgrade-btn {
      padding: 8px 16px;
      background: linear-gradient(180deg, #4A90E2 0%, #357ABD 100%);
      border: 1px solid rgba(74, 144, 226, 0.3);
      border-radius: 10px;
      color: #ffffff;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s ease-out;
      box-shadow: 0 2px 6px rgba(74, 144, 226, 0.25), 0 1px 2px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.3);
      white-space: nowrap;
      flex-shrink: 0;
    }
    .ai-limit-bar-upgrade-btn:hover {
      transform: translateY(-1px);
      background: linear-gradient(180deg, #5A9FED 0%, #4085C8 100%);
      box-shadow: 0 4px 12px rgba(74, 144, 226, 0.35), 0 2px 4px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.35);
    }
    .ai-limit-bar-upgrade-btn:active {
      transform: translateY(0);
      background: linear-gradient(180deg, #3A80D2 0%, #2D6AA8 100%);
      box-shadow: 0 1px 3px rgba(74, 144, 226, 0.3), inset 0 2px 4px rgba(0, 0, 0, 0.15);
    }
    :root.theme-dark .ai-limit-bar-upgrade-btn {
      background: linear-gradient(180deg, #5A9FED 0%, #4085C8 100%);
      border: 1px solid rgba(90, 159, 237, 0.4);
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }
    :root.theme-dark .ai-limit-bar-upgrade-btn:hover {
      background: linear-gradient(180deg, #6AAFF8 0%, #5095D3 100%);
      box-shadow: 0 4px 12px rgba(74, 144, 226, 0.4), 0 2px 4px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    }
    :root.theme-dark .ai-limit-bar-upgrade-btn:active {
      background: linear-gradient(180deg, #4A90E2 0%, #357ABD 100%);
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), inset 0 2px 4px rgba(0, 0, 0, 0.2);
    }
    .ai-limit-bar-cancel-btn {
      width: 28px;
      height: 28px;
      padding: 0;
      background: linear-gradient(180deg, var(--bg-button) 0%, var(--bg-tertiary) 100%);
      border: 1px solid var(--border-light);
      border-radius: 8px;
      color: var(--text-secondary);
      font-size: 16px;
      cursor: pointer;
      transition: all 0.2s ease-out;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.6);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .ai-limit-bar-cancel-btn:hover {
      transform: translateY(-1px);
      box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.7);
      color: var(--text-primary);
    }
    .ai-limit-bar-cancel-btn:active {
      transform: translateY(0);
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), inset 0 2px 3px rgba(0, 0, 0, 0.08);
    }
    :root.theme-dark .ai-limit-bar-cancel-btn {
      background: linear-gradient(180deg, var(--bg-button) 0%, var(--bg-tertiary) 100%);
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    }
    :root.theme-dark .ai-limit-bar-cancel-btn:hover {
      box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2), 0 1px 3px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }
    
    .card-container > .desktop-only,
    .card-container > .discover-section,
    .card-container > .mobile-only {
      pointer-events: auto;
    }
    #launcher-view {
      position: relative;
      contain: layout style;
    }
    #launcher-view::after {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 1px;
      background-color: rgba(148,163,184,0.2);
      pointer-events: none;
    }
    
    /* Dark mode: darker divider with reduced opacity */
    :root.theme-dark #launcher-view::after,
    html.theme-dark #launcher-view::after {
      background-color: rgba(44, 44, 46, 0.72);
    }
    .launcher-grid {
      position: relative;
      display: flex;
      flex-wrap: wrap;
      gap: 0;
      align-items: flex-start;
      justify-content: flex-start;
      width: 100%;
      height: 100%;
    }
    .launcher-grid + .launcher-grid {
      margin-top: clamp(0.9rem, 2.2vw, 1.6rem);
    }
    .launcher-grid::after {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 1px;
      background-color: #E5E5EA;
    }
    
    /* Dark mode: darker grey divider with reduced opacity */
    :root.theme-dark .launcher-grid::after {
      background-color: rgba(44, 44, 46, 0.1);
    }
    .launcher-stack-wrapper {
      position: relative;
      display: flex;
      flex-direction: column;
      gap: clamp(0.9rem, 2.2vw, 1.6rem);
      width: 100%;
    }
    .launcher-stack-wrapper::after {
      display: none;
    }
    .launcher-stack-wrapper .launcher-grid::after {
      display: none;
    }
    .launcher-stack-wrapper .launcher-grid + .launcher-grid {
      margin-top: 0;
    }
    /* Ensure discover apps grid displays in 2 columns like Top Charts and Categories */
    #discover-apps-grid {
      position: relative;
      display: flex;
      flex-wrap: wrap;
      gap: 0;
      align-items: flex-start;
      justify-content: flex-start;
      width: 100%;
    }
    #discover-apps-grid::after {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 1px;
      background-color: rgba(148,163,184,0.35);
    }
    #discover-apps-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 1.8rem;
      margin-top: 0.5rem;
      /* Performance: contain to prevent expensive reflows */
      contain: layout style;
    }
    @media (min-width: 641px) {
      #discover-apps-grid .launcher-tile {
        flex: 1 1 0;
        min-width: 220px;
        display: inline-flex;
      }
      /* Left column apps - match Top Charts padding */
      .discover-app-column[data-column="left"] .launcher-tile {
        padding-left: 2.5rem !important;
        padding-right: 0rem !important;
        padding-top: 0.5rem !important;
      }
      /* Right column apps - match Categories padding */
      .discover-app-column[data-column="right"] .launcher-tile {
        padding-left: 1.8rem !important;
        padding-right: 0rem !important;
        padding-top: 0.5rem !important;
      }
      /* Arrow positioning for left column - align with Top Charts arrow */
      .discover-app-column[data-column="left"] .launcher-arrow {
        margin-right: 1.3rem !important;
        padding-right: 0 !important;
        padding-left: 0 !important;
      }
      /* Arrow positioning for right column - move significantly to the left */
      .discover-app-column[data-column="right"] .launcher-arrow {
        margin-right: 2.5rem !important;
        padding-right: 0 !important;
        padding-left: 0 !important;
      }
    }
    #discover-view {
      position: relative;
      min-height: 0;
      overflow: hidden;
      contain: layout style;
    }
    /* Vertical line down the middle of discover view - desktop only */
    @media (min-width: 641px) {
      #discover-view::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 1.5rem;
        left: 50%;
        transform: translateX(-50%);
        width: 1px;
        background-color: #E5E5EA;
        pointer-events: none;
        z-index: 1;
      }
      
      /* Dark mode: darker grey divider */
      :root.theme-dark #discover-view::after {
        background-color: #2C2C2E;
      }
      .discover-categories-panel .launcher-row .launcher-tile:nth-of-type(odd) {
        padding-left: 2.5rem;
        padding-right: 3rem !important;
        padding-top: 0.25rem !important;
      }
      .discover-categories-panel .launcher-row .launcher-tile:nth-of-type(even) {
        padding-left: 1.8rem;
        padding-right: 2.5rem !important;
        padding-top: 0.25rem !important;
      }
      .discover-categories-panel .launcher-row .launcher-arrow {
        margin-right: 0.9rem !important;
      }
    }
    /* Discover buttons padding adjustments - Desktop */
    @media (min-width: 641px) {
      #discover-top-charts {
        padding-left: 2.5rem !important;
        padding-right: 1.25rem !important;
      }
      #discover-categories {
        padding-left: 2.5rem !important;
        padding-right: 1.1rem !important;
      }
      #discover-categories .launcher-arrow {
        margin-right: 0 !important;
        padding-right: 0 !important;
      }
    }
    /* Discover buttons padding adjustments - Mobile */
    @media (max-width: 640px) {
      #discover-top-charts {
        padding-left: 1.5rem !important;
        padding-right: 1.75rem !important;
        padding-top: 0.5rem !important;
        padding-bottom: 0.625rem !important;
      }
      #discover-categories {
        padding-left: 1.5rem !important;
        padding-right: 1.85rem !important;
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
        gap: 1rem !important;
      }
      /* Ensure Categories has more top and bottom padding */
      #discover-categories,
      #discover-categories:last-of-type,
      #discover-categories:first-of-type {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
      }
      /* Align both arrows to the left */
      #discover-top-charts .launcher-arrow,
      #discover-categories .launcher-arrow {
        margin-right: 0 !important;
        padding-right: 0 !important;
        margin-left: auto !important;
      }
      /* Override all conflicting rules for Categories to ensure equal padding */
      #discover-categories:last-of-type {
        padding: 1.5rem 1.75rem 1.5rem 1.5rem !important;
        border-bottom: 1px solid rgba(148,163,184,0.15);
      }
      /* Override sibling tile rule to ensure equal top padding */
      #discover-top-charts + #discover-categories {
        padding-top: 1.5rem !important;
        border-top: 1px solid rgba(148,163,184,0.15);
      }
      /* Override general sibling rule for Categories */
      .launcher-tile + #discover-categories {
        padding-top: 1.5rem !important;
      }
      /* Ensure discover apps after Categories have proper spacing on mobile */
      #discover-categories + .launcher-tile {
        padding-top: 0.5rem !important;
        padding-bottom: 1.5rem !important;
        border-top: 1px solid rgba(148,163,184,0.15);
      }
    }
    .discover-app-column {
      display: flex;
      flex-direction: column;
      gap: 1.95rem;
    }
    .launcher-tile {
      flex: 1 1 0;
      min-width: 220px;
      display: inline-flex;
      align-items: center;
      gap: 1rem;
      background: transparent;
      border: none;
      padding: 0 1.25rem 0 0;
      color: var(--text-primary);
      cursor: pointer;
      transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.22s ease-out;
      transform: translate3d(0, 0, 0);
      -webkit-tap-highlight-color: transparent;
      /* Performance: contain layout to prevent reflows */
      contain: layout style;
    }
    /* Launcher tile fly-in — ENABLED ON MOBILE ONLY (`pointer: coarse`).
       Desktop browsers (esp. Safari) ran into compositor pressure when
       6+ tiles + the card-container + the search-container all ran
       parallel keyframes. Mobile compositors handle these fine because
       the layer textures are small, and the staggered fly-in is the
       characteristic iOS-app-launcher feel users expect on phones. */
    @media (pointer: coarse) {
      #open-state.launcher-opening .launcher-tile {
        animation: tileAppear 0.38s cubic-bezier(0.22, 1, 0.36, 1) backwards;
      }
      #open-state.launcher-opening .launcher-tile:nth-child(1) { animation-delay: 0.03s; }
      #open-state.launcher-opening .launcher-tile:nth-child(2) { animation-delay: 0.07s; }
      #open-state.launcher-opening .launcher-tile:nth-child(3) { animation-delay: 0.11s; }
      #open-state.launcher-opening .launcher-tile:nth-child(4) { animation-delay: 0.15s; }
      #open-state.launcher-opening .launcher-tile:nth-child(5) { animation-delay: 0.19s; }
      #open-state.launcher-opening .launcher-tile:nth-child(6) { animation-delay: 0.23s; }
      #open-state.launcher-opening .launcher-tile:nth-child(n+7) { animation-delay: 0.26s; }
      @keyframes tileAppear {
        0%   { transform: translate3d(0, 16px, 0); opacity: 0; }
        100% { transform: translate3d(0, 0, 0);    opacity: 1; }
      }
    }
    #discover-apps-grid .launcher-tile,
    #discover-apps-container > #discover-top-charts,
    #discover-apps-container > #discover-categories {
      gap: 1rem;
    }
    #discover-apps-grid .launcher-tile:nth-of-type(even) {
      padding-left: 2.75rem;
    }
    .launcher-tile:last-of-type {
      padding: 0 0 0 1.8rem;
    }
    .launcher-tile:hover,
    .launcher-tile:focus-visible {
      color: inherit;
      outline: none;
    }
    .launcher-tile.is-pressing,
    .launcher-tile:active {
      background: rgba(0,0,0,0.04);
      transform: none;
      transition-duration: 0.1s;
    }
    .launcher-pin-grid {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start;
      gap: 0;
      row-gap: clamp(0.75rem, 2vw, 1.2rem);
    }
    .launcher-pin-grid .launcher-pin-tile,
    .launcher-pin-grid .launcher-pin-placeholder {
      flex: 0 0 50%;
      max-width: 50%;
      min-width: 0;
    }
    .launcher-pin-grid .launcher-pin-tile {
      padding: 0 1.25rem clamp(0.45rem, 1.2vw, 0.75rem) 0;
      transform: translate3d(0, 0, 0);
    }
    #open-state.launcher-opening .launcher-pin-tile {
      animation: tileAppear 0.5s cubic-bezier(0.22, 1, 0.36, 1) backwards;
    }
    #open-state.launcher-opening .launcher-pin-tile:nth-child(1) { animation-delay: 0.03s; }
    #open-state.launcher-opening .launcher-pin-tile:nth-child(2) { animation-delay: 0.08s; }
    #open-state.launcher-opening .launcher-pin-tile:nth-child(3) { animation-delay: 0.13s; }
    #open-state.launcher-opening .launcher-pin-tile:nth-child(4) { animation-delay: 0.18s; }
    #open-state.launcher-opening .launcher-pin-tile:nth-child(n+5) { animation-delay: 0.23s; }
    .launcher-pin-grid .launcher-pin-tile:nth-of-type(2n) {
      padding: 0 0 clamp(0.45rem, 1.2vw, 0.75rem) 2.3rem;
    }
    .launcher-pin-placeholder {
      padding: 0 0 clamp(0.45rem, 1.2vw, 0.75rem) 2.3rem;
      visibility: hidden;
      pointer-events: none;
    }
    .launcher-icon {
      width: 3rem;
      height: 3rem;
      border-radius: 999px;
      background: rgba(248,250,252,0.8);
      color: var(--text-primary);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      border: 1px solid rgba(15,23,42,0.06);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
      overflow: hidden;
      position: relative;
      transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
      -webkit-transform: translateZ(0);
      transform: translateZ(0);
    }
    .launcher-tile:active .launcher-icon,
    .launcher-tile.is-pressing .launcher-icon {
      transform: none;
    }
    :root.theme-dark .launcher-icon {
      background: rgba(40,40,43,0.9);
      border: 1px solid rgba(255,255,255,0.1);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
    .launcher-icon img,
    .launcher-icon svg {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: inherit;
      position: relative;
      z-index: 0;
      display: block;
      image-rendering: -webkit-optimize-contrast;
      image-rendering: high-quality;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
    }
    /* Glossy shine overlay — single layer for performance */
    .launcher-icon::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background: linear-gradient(180deg, rgba(255,255,255,0.18) 0%, transparent 45%);
      border: 1px solid rgba(255,255,255,0.12);
      pointer-events: none;
      z-index: 1;
    }
    :root.theme-dark .launcher-icon::after {
      background: linear-gradient(180deg, rgba(255,255,255,0.12) 0%, transparent 45%);
      border: 1px solid rgba(255,255,255,0.08);
    }
    .launcher-text {
      display: flex;
      flex-direction: column;
      gap: 0.25rem;
      text-align: left;
    }
    .launcher-title {
      font-size: 1.05rem;
      font-weight: 500;
      color: inherit;
    }
    .launcher-subtitle {
      font-size: 0.85rem;
      color: var(--text-secondary);
    }
    .launcher-subtitle-desktop {
      display: block;
    }
    .launcher-subtitle-mobile {
      display: none;
    }
    .launcher-tile:hover .launcher-title,
    .launcher-tile:focus-visible .launcher-title {
      color: inherit;
    }
    .launcher-tile:hover .launcher-subtitle,
    .launcher-tile:focus-visible .launcher-subtitle {
      color: var(--text-secondary);
    }
    .launcher-arrow {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      margin-left: auto;
      padding-left: 0.5rem;
      color: inherit;
      transition: transform 0.18s ease;
    }
    @media (min-width: 641px) {
      .launcher-grid > .launcher-tile:nth-of-type(odd) .launcher-arrow,
      .launcher-pin-grid .launcher-pin-tile:nth-of-type(odd) .launcher-arrow {
        margin-right: 1.125rem;
      }
      #launcher-myhub .launcher-arrow,
      #discover-top-charts .launcher-arrow {
        margin-right: 0.9rem !important;
      }
      #discover-categories .launcher-arrow {
        margin-right: 0.9rem !important;
      }
    }
    .launcher-tile:hover .launcher-arrow,
    .launcher-tile:focus-visible .launcher-arrow {
      transform: none;
    }
    .launcher-tile.is-pressing .launcher-icon,
    .launcher-tile:active .launcher-icon {
      transform: none;
    }
    .launcher-tile.is-pressing .launcher-arrow,
    .launcher-tile:active .launcher-arrow {
      transform: none;
    }
    
    /* Launcher Remove Button - Small red X circle button (replaces arrow) */
    .launcher-remove-btn {
      width: 28px;
      height: 28px;
      min-width: 28px;
      min-height: 28px;
      border-radius: 50%;
      transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                  background 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                  box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                  border-color 0.25s cubic-bezier(0.4, 0, 0.2, 1);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      margin-left: auto;
      flex-shrink: 0;
      border: 1px solid rgba(0, 0, 0, 0.1);
      cursor: pointer;
      will-change: auto;
    }
    
    /* Light mode: white circle with red X */
    :root.theme-light .launcher-remove-btn,
    html.theme-light .launcher-remove-btn,
    :root:not(.theme-dark) .launcher-remove-btn {
      background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
      border: 1px solid rgba(0, 0, 0, 0.1);
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    }
    
    :root.theme-light .launcher-remove-btn:hover,
    html.theme-light .launcher-remove-btn:hover,
    :root:not(.theme-dark) .launcher-remove-btn:hover {
      transform: translateY(-1px) scale(1.05);
      box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.95);
      background: linear-gradient(180deg, #ffffff 0%, #f5f5f5 100%);
    }
    
    :root.theme-light .launcher-remove-btn:active,
    html.theme-light .launcher-remove-btn:active,
    :root:not(.theme-dark) .launcher-remove-btn:active {
      transform: translateY(0);
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), inset 0 2px 3px rgba(0, 0, 0, 0.08);
    }
    
    :root.theme-light .launcher-remove-btn svg,
    html.theme-light .launcher-remove-btn svg,
    :root:not(.theme-dark) .launcher-remove-btn svg {
      stroke: #ef4444;
      color: #ef4444;
    }
    
    /* Dark mode: lighter grey circle with black X - minimal skeuomorphic */
    :root.theme-dark .launcher-remove-btn,
    html.theme-dark .launcher-remove-btn {
      background: linear-gradient(180deg, #b0b0b0 0%, #9d9d9d 100%);
      border: 1px solid rgba(0, 0, 0, 0.12);
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    }
    
    :root.theme-dark .launcher-remove-btn:hover,
    html.theme-dark .launcher-remove-btn:hover {
      transform: translateY(-1px) scale(1.05);
      background: linear-gradient(180deg, #b8b8b8 0%, #b0b0b0 100%);
      box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2), 0 1px 3px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.35);
    }
    
    :root.theme-dark .launcher-remove-btn:active,
    html.theme-dark .launcher-remove-btn:active {
      transform: translateY(0) scale(0.98);
      background: linear-gradient(180deg, #a5a5a5 0%, #959595 100%);
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 2px 3px rgba(0, 0, 0, 0.15);
    }
    
    :root.theme-dark .launcher-remove-btn svg,
    html.theme-dark .launcher-remove-btn svg {
      stroke: #000000;
      color: #000000;
    }
    
    @media (min-width: 641px) {
      /* First column (odd) - align with existing spacing */
      .launcher-pin-grid .launcher-pin-tile:nth-of-type(odd) .launcher-remove-btn {
        margin-right: 1.125rem;
      }
      /* Second column (even) - move X button much further to the right to align with first column */
      .launcher-pin-grid .launcher-pin-tile:nth-of-type(2n) .launcher-remove-btn {
        margin-right: 0.0rem; /* Significantly increased to move X button further right to align with first column */
      }
    }
    @media (max-width: 640px) {
      /* Make launcher scrollable on mobile without visible scrollbar */
      .card-container:not(.flipped) > .w-full.max-w-3xl > .rounded-3xl {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
      }
      .card-container:not(.flipped) > .w-full.max-w-3xl > .rounded-3xl::-webkit-scrollbar {
        display: none;
      }
      #launcher-view::after {
        display: none;
      }
      .launcher-stack-wrapper {
        gap: 0.9;
      }
      .launcher-stack-wrapper::after {
        display: none;
      }
      .launcher-grid {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
        height: auto;
      }
      .launcher-tile {
        width: 100%;
    padding: 0;
        min-width: 0;
        justify-content: flex-start;
    gap: 0.85rem;
      }
      .launcher-tile:last-of-type {
        padding: 0 0 1rem 0;
        border-bottom: 1px solid rgba(148,163,184,0.15);
  }
      .launcher-grid::after {
        display: none;
      }
      .launcher-tile + .launcher-tile {
        padding-top: 1rem;
        border-top: 1px solid rgba(148,163,184,0.15);
        margin-top: 0;
      }
      /* Apps grid mobile - vertical list with proper spacing */
      #discover-apps-grid {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        margin-top: -0.5rem;
        padding-top: 0;
      }
      #discover-apps-grid::after {
        display: none;
      }
      /* All app tiles: match Top Charts top padding and Categories bottom padding */
      #discover-apps-grid .launcher-tile {
        width: 100%;
        min-width: 0;
        padding-left: 1.5rem !important;
        padding-right: 1.75rem !important;
        padding-top: 0.5rem !important;
        padding-bottom: 1.5rem !important;
        justify-content: flex-start;
        align-items: center !important;
        display: flex !important;
        gap: 1rem !important;
      }
      /* Add border between items for visual separation - match Top Charts pattern */
      #discover-apps-grid .launcher-tile + .launcher-tile {
        border-top: 1px solid rgba(148,163,184,0.15);
        margin-top: 0;
      }
      /* First app: match spacing after Categories */
      #discover-apps-grid .launcher-tile:first-of-type {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
      }
      /* Last app: add bottom padding to match Categories spacing */
      #discover-apps-grid .launcher-tile:last-of-type {
        padding-bottom: 1.5rem !important;
        border-bottom: 1px solid rgba(148,163,184,0.15);
      }
      /* Arrow alignment - match Top Charts */
      #discover-apps-grid .launcher-tile .launcher-arrow {
        margin-right: 0 !important;
        padding-right: 0 !important;
        margin-left: auto !important;
      }
      /* Text spacing - match Top Charts (no extra margin) */
      #discover-apps-grid .launcher-tile .launcher-text {
        margin-left: 0 !important;
      }
      #discover-apps-grid .launcher-title,
      #discover-apps-grid .launcher-subtitle {
        margin-left: 0 !important;
      }
      .launcher-pin-grid {
        display: flex;
        flex-direction: column;
        gap: 0;
      }
      .launcher-pin-grid .launcher-pin-tile {
        flex: 1 1 auto;
        max-width: 100%;
        min-width: 0;
        padding: 0.9rem 0;
        margin-bottom: 0.4rem;
        border-bottom: 1px solid rgba(148,163,184,0.15);
      }
      .launcher-pin-grid .launcher-pin-tile:nth-of-type(2n) {
        padding: 0.9rem 0;
      }
      .launcher-pin-grid .launcher-pin-tile + .launcher-pin-tile {
        border-top: none;
      }
      .launcher-pin-grid .launcher-pin-tile:first-of-type {
        border-top: none;
        padding-top: 0.2rem;
        padding-bottom: 0.9rem;
      }
      .launcher-pin-grid .launcher-pin-tile:last-of-type {
        margin-bottom: 0;
      }
      /* Search filter: fix first/last visible tile styling */
      .launcher-pin-grid .launcher-pin-tile.search-first-visible {
        padding-top: 0.2rem;
      }
      .launcher-pin-grid .launcher-pin-tile.search-last-visible {
        border-bottom: none;
        margin-bottom: 0;
      }
      .launcher-no-results {
        width: 100%;
        padding: 2rem 1rem;
      }
      .launcher-pin-placeholder {
        display: none;
      }
      .launcher-subtitle-desktop {
        display: none;
      }
      .launcher-subtitle-mobile {
        display: block;
      }
      
      /* Dark mode: make horizontal separator lines less visible on mobile */
      :root.theme-dark .launcher-tile + .launcher-tile,
      html.theme-dark .launcher-tile + .launcher-tile {
        border-top-color: rgba(148,163,184,0.1);
      }
      :root.theme-dark .launcher-tile:last-of-type,
      html.theme-dark .launcher-tile:last-of-type {
        border-bottom-color: rgba(148,163,184,0.1);
      }
      :root.theme-dark .launcher-pin-grid .launcher-pin-tile,
      html.theme-dark .launcher-pin-grid .launcher-pin-tile {
        border-bottom-color: rgba(148,163,184,0.1);
      }
      :root.theme-dark #discover-apps-grid .launcher-tile + .launcher-tile,
      html.theme-dark #discover-apps-grid .launcher-tile + .launcher-tile {
        border-top-color: rgba(148,163,184,0.1);
      }
      :root.theme-dark #discover-apps-grid .launcher-tile:last-of-type,
      html.theme-dark #discover-apps-grid .launcher-tile:last-of-type {
        border-bottom-color: rgba(148,163,184,0.1);
      }
      :root.theme-dark #discover-categories:last-of-type,
      html.theme-dark #discover-categories:last-of-type {
        border-bottom-color: rgba(148,163,184,0.1);
      }
      :root.theme-dark #discover-top-charts + #discover-categories,
      html.theme-dark #discover-top-charts + #discover-categories {
        border-top-color: rgba(148,163,184,0.1);
      }
      :root.theme-dark #discover-categories + .launcher-tile,
      html.theme-dark #discover-categories + .launcher-tile {
        border-top-color: rgba(148,163,184,0.1);
      }
    }
    @keyframes slideUp {
      0% { transform: translate3d(0, 12px, 0); }
      100% { transform: translate3d(0, 0, 0); }
    }
    @keyframes fadeWindow {
      0% { opacity: 0; transform: translate3d(0, 6px, 0) scale(0.99); }
      100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
    }
    #open-state.discover-active .card-container,
    #open-state.discover-active .search-container,
    #open-state.discover-returning .card-container,
    #open-state.discover-returning .search-container {
      animation: fadeWindow 0.28s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
    }
    /* Prevent search bar animation when app window is active (override discover animations too) */
    .search-container.app-window-active,
    #open-state:has(.app-window-view.is-active) .search-container,
    #open-state:has(.card-container.app-window-active) .search-container {
      animation: none !important;
    }
    /* Kill the fadeWindow scale on .card-container when an app is
       active. (The fadeWindow keyframes scale 0.99 → 1 + translateY
       which inherits visually to the iframe — was reading as "card
       and iframe scale together".) `html` prefix raises specificity
       above the original `#open-state.discover-active` rule. */
    html #open-state.app-window-active .card-container,
    html .card-container.app-window-active,
    html #open-state:has(.app-window-view.is-active) .card-container,
    html #open-state:has(.card-container.app-window-active) .card-container,
    html #open-state.discover-active.app-window-active .card-container,
    html #open-state.discover-active:has(.app-window-view.is-active) .card-container {
      animation: none !important;
    }
    .desktop-only { display: none; }
    .mobile-only { display: flex; }
    @media (max-width: 640px) {
      .mobile-only .discover-callout {
        padding: 0;
        border-radius: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
        gap: 0;
      }
      .mobile-only .discover-callout-main {
        padding: 0;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 0.95rem;
      }
      .mobile-only .discover-callout-main .w-14 {
        margin-left: -2px;
      }
      .mobile-only .discover-callout-main .mt-1 {
        margin-top: 0;
      }
      .mobile-only .discover-callout .discover-callout-arrow {
        margin-top: 0;
      }
      .discover-section {
        padding: 0;
        gap: 1.25rem;
      }
      #discover-view .discover-section {
        padding: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
      }
      .discover-section-inner {
        gap: 1.25rem;
        padding-left: 0 !important;
        padding-right: 0 !important;
      }
      .discover-header {
        gap: 0.75rem;
        margin-bottom: 1.25rem;
        padding: 0.15rem 1.1rem 1.25rem;
        position: relative;
        z-index: 10;
        background: var(--bg-card);
      }
      .discover-header-left {
        gap: 0.75rem;
        margin-left: 0.125rem;
        padding-left: 0.75rem !important;
      }
      .discover-header-right {
        padding-right: 0.75rem !important;
      }
      .discover-detail-back {
        width: 40px;
        height: 40px;
      }
      .discover-detail-back svg {
        width: 20px;
        height: 20px;
      }
      .discover-refresh-btn {
        width: 40px;
        height: 40px;
      }
      .discover-refresh-btn svg {
        width: 20px;
        height: 20px;
      }
      .discover-chart-btn {
        padding: 0.55rem 1rem;
        font-size: 0.8rem;
      }
      .discover-chart-btn svg {
        width: 16px;
        height: 16px;
      }
      .discover-detail-view {
        padding: 1rem 1.1rem !important;
        padding-left: 1.1rem !important;
        padding-right: 1.1rem !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-height: none;
      }
      .discover-detail-card {
        gap: 1.4rem;
      }
      .discover-detail-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.25rem;
        padding-bottom: 1.25rem;
        padding-top: 0.5rem;
      }
      .discover-detail-heading {
        width: 100%;
      }
      .discover-pin-btn {
        align-self: flex-start;
        margin-top: 0.5rem;
      }
      .discover-detail-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
      }
      .discover-detail-actions > * {
        width: 100%;
      }
      .discover-grid {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        padding: 0 0.5rem;
      }
      .discover-card {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 1rem;
        padding: 0.875rem;
        min-height: auto;
        border-radius: 16px;
        border: 1px solid rgba(148,163,184,0.15);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
      }
      :root.theme-dark .discover-card {
        border: 1px solid rgba(255,255,255,0.1);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
      }
      .discover-card-icon {
        width: 60px;
        height: 60px;
        max-width: 60px;
        margin: 0;
        flex-shrink: 0;
        border-radius: 14px;
      }
      .discover-card-icon img {
        border-radius: 14px;
      }
      .discover-card-info {
        flex: 1;
        margin-bottom: 0;
        min-width: 0;
        align-items: flex-start;
        text-align: left;
      }
      .discover-card-title-row {
        justify-content: flex-start;
      }
      .discover-card-name {
        font-size: 1rem;
        margin-bottom: 0.25rem;
        text-align: left;
      }
      .discover-card-category {
        font-size: 0.85rem;
        margin-bottom: 0;
        text-align: left;
      }
      .discover-card-description {
        display: none;
      }
      .discover-card-cta {
        padding: 0.5rem 1rem;
        font-size: 0.85rem;
        margin-top: 0;
        width: auto;
        flex-shrink: 0;
      }
      .discover-card:hover {
        transform: none;
        background: rgba(248,250,252,0.8);
      }
      :root.theme-dark .discover-card:hover {
        background: rgba(40,40,43,0.9);
      }
    }
    @media (min-width: 641px) {
      .desktop-only { display: grid; }
      .mobile-only { display: none; }
    }
    .ios-viewport-fix {
      min-height: 100vh;
      min-height: -webkit-fill-available;
    }
    
    /* Performance: Optimize closed-state for minimal CPU usage */
    #closed-state {
      contain: style;
      will-change: auto; /* Don't hint GPU when idle */
    }
    
    #closed-state.hidden {
      display: none !important;
      visibility: hidden;
    }
    @supports (padding: max(0px)) {
      .safe-top {
        padding-top: max(1.5rem, env(safe-area-inset-top));
      }
      .safe-bottom {
        padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
      }
    }
    
    .hidden { display: none !important; }
    
    /* ── Profile Settings Overlay (macOS style, reuses startup design) ── */
    .prof-overlay {
      position: fixed; inset: 0; z-index: 145;
      background: #DADADE;
      display: flex; flex-direction: column;
      opacity: 0; pointer-events: none;
      transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
      will-change: opacity;
    }
    .prof-overlay.prof-overlay-active { opacity: 1; pointer-events: auto; }
    .prof-body {
      flex: 1; display: flex; align-items: center; justify-content: center;
      padding: 32px 20px 16px;
    }
    .prof-card {
      background: #FFFFFF;
      border: 0.5px solid rgba(0,0,0,0.06);
      border-radius: 22px; width: min(520px, 96vw);
      min-height: 380px; padding: 40px 48px 32px;
      box-shadow:
        0 1px 0 rgba(255,255,255,0.9) inset,
        0 20px 60px rgba(0,0,0,0.10),
        0 4px 12px rgba(0,0,0,0.05);
      display: flex; flex-direction: column; align-items: center; text-align: center;
      position: relative;
      animation: startupIn 0.5s cubic-bezier(0.16,1,0.3,1) forwards;
    }
    .prof-step { display: none; width: 100%; flex-direction: column; align-items: center; flex: 1; }
    .prof-step-active { display: flex; }

    /* Close button — minimal skeuomorphic circle */
    .prof-close-btn {
      position: absolute; top: 16px; right: 16px;
      width: 28px; height: 28px; border-radius: 50%;
      background: #ebebf0;
      border: 1px solid #d0d0d5;
      box-shadow: 0 1px 3px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.6);
      display: flex; align-items: center; justify-content: center;
      cursor: pointer; color: #6e6e73;
      transition: background 0.15s, box-shadow 0.15s, color 0.15s;
      z-index: 2;
      padding: 0;
    }
    .prof-close-btn:hover {
      background: #e0e0e5; color: #3c3c3e;
      box-shadow: 0 2px 6px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.5);
    }
    .prof-close-btn:active {
      background: #d5d5da;
      box-shadow: inset 0 1px 3px rgba(0,0,0,0.12);
    }
    .theme-dark .prof-close-btn {
      background: #3a3a3c; border-color: #48484a; color: #98989f;
      box-shadow: 0 1px 3px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.04);
    }
    .theme-dark .prof-close-btn:hover {
      background: #48484a; color: #c7c7cc;
    }

    /* Profile avatar — larger, skeuomorphic */
    .prof-avatar {
      width: 72px; height: 72px; border-radius: 50%;
      background: linear-gradient(135deg, #6BA7FF, #3A7BFF);
      color: #fff; font-weight: 600; font-size: 1.6rem;
      display: flex; align-items: center; justify-content: center;
      margin-bottom: 12px;
      box-shadow: 0 4px 16px rgba(58,123,255,0.3), 0 1px 0 rgba(255,255,255,0.25) inset;
    }

    /* Menu list — skeuomorphic container matching studio-feature-grid */
    .prof-menu-list {
      width: 100%; max-width: 380px;
      display: flex; flex-direction: column;
      margin-top: 20px;
      border-radius: 14px; overflow: hidden;
      background: linear-gradient(180deg, #FFFFFF 0%, #FDFDFE 100%);
      border: none;
      box-shadow:
        inset 0 0 4px rgba(0,0,0,0.14),
        inset 1px 0 2px rgba(0,0,0,0.04),
        inset -1px 0 2px rgba(0,0,0,0.04),
        inset 0 0.5px 1px rgba(0,0,0,0.07),
        inset 0 -0.5px 1px rgba(0,0,0,0.05),
        0 2px 8px rgba(0,0,0,0.05),
        0 0.5px 0 rgba(255,255,255,1);
    }
    .prof-menu-item {
      display: flex; align-items: center; gap: 14px;
      padding: 14px 16px;
      border-bottom: 1px solid rgba(0,0,0,0.08);
      box-shadow: 0 1px 0 rgba(255,255,255,0.95);
      cursor: pointer;
      transition: background 0.12s;
      border-radius: 0;
      background: transparent; border-left: none; border-right: none; border-top: none;
      text-align: left; width: 100%;
      font-family: inherit;
    }
    .prof-menu-item:last-child { border-bottom: none; box-shadow: none; }
    .prof-menu-item:hover { background: rgba(0,0,0,0.03); }
    .prof-menu-item:active { background: rgba(0,0,0,0.06); transform: scale(0.985); }
    .prof-menu-icon {
      width: 34px; height: 34px; border-radius: 8px;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0; color: #fff;
    }
    .prof-menu-text { flex: 1; min-width: 0; }
    .prof-menu-label {
      font-size: 0.88rem; font-weight: 600; color: #1d1d1f;
      margin: 0; line-height: 1.25;
    }
    .prof-menu-detail {
      font-size: 0.74rem; color: #8e8e93; font-weight: 500;
      margin: 1px 0 0; line-height: 1.25;
    }
    .prof-menu-chevron {
      flex-shrink: 0; color: #c7c7cc;
    }

    /* Storage bar in account overview */
    .prof-storage-wrap {
      width: 100%; max-width: 380px; margin-top: 16px;
    }
    .prof-storage-label {
      font-size: 0.74rem; font-weight: 600; color: #8e8e93;
      margin: 0 0 6px;
    }
    .prof-storage-bar {
      width: 100%; height: 7px; background: #e8e8ed;
      border-radius: 4px; overflow: hidden;
      box-shadow: inset 0 1px 2px rgba(0,0,0,0.06);
    }
    .prof-storage-fill {
      height: 100%; border-radius: 4px;
      background: linear-gradient(90deg, #34C759, #30D158);
      transition: width 0.5s ease;
    }

    /* Sign out link */
    .prof-signout {
      margin-top: 18px;
      background: none; border: none;
      color: #FF3B30; font-size: 0.84rem; font-weight: 600;
      cursor: pointer; padding: 6px 0;
      letter-spacing: -0.01em;
    }
    .prof-signout:hover { text-decoration: underline; }

    .prof-sub-cancel-btn {
      width: 100%; margin-top: 16px; padding: 11px 16px;
      border-radius: 12px; border: 1px solid rgba(0,0,0,0.08);
      background: linear-gradient(180deg, #f8f8fa 0%, #ededf0 100%);
      box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 0.5px 0 rgba(255,255,255,0.8) inset;
      color: #FF3B30; font-size: 0.84rem; font-weight: 600;
      cursor: pointer; letter-spacing: -0.01em;
      transition: background 0.18s, box-shadow 0.18s, transform 0.15s;
    }
    .prof-sub-cancel-btn:hover {
      background: linear-gradient(180deg, #f2f2f5 0%, #e6e6ea 100%);
      box-shadow: 0 2px 6px rgba(0,0,0,0.08), 0 0.5px 0 rgba(255,255,255,0.8) inset;
    }
    .prof-sub-cancel-btn:active { transform: scale(0.98); }
    .theme-dark .prof-sub-cancel-btn {
      background: linear-gradient(180deg, #3a3a3c 0%, #2c2c2e 100%);
      border-color: rgba(255,255,255,0.06);
      box-shadow: 0 1px 3px rgba(0,0,0,0.2), 0 0.5px 0 rgba(255,255,255,0.04) inset;
      color: #FF6961;
    }
    .theme-dark .prof-sub-cancel-btn:hover {
      background: linear-gradient(180deg, #404042 0%, #323234 100%);
      box-shadow: 0 2px 6px rgba(0,0,0,0.25), 0 0.5px 0 rgba(255,255,255,0.04) inset;
    }

    /* Footer for profile overlay */
    .prof-footer {
      background: rgba(238,238,243,0.88); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
      padding: 13px 32px;
      display: flex; align-items: center; justify-content: center; min-height: 44px;
      border-top: 1px solid rgba(0,0,0,0.06);
    }
    .prof-footer-text { color: #86868b; font-size: 0.74rem; margin: 0; }

    /* Dark theme */
    .theme-dark .prof-overlay { background: #1d1d1f; }
    .theme-dark .prof-card {
      background: #2c2c2e;
      box-shadow: 0 1px 1px rgba(255,255,255,0.04) inset, 0 12px 48px rgba(0,0,0,0.3);
    }
    .theme-dark .prof-menu-list {
      background: linear-gradient(180deg, #242426 0%, #1f1f21 100%);
      border-color: rgba(255,255,255,0.06);
      box-shadow:
        inset 0 1px 3px rgba(0,0,0,0.4),
        inset 0 -1px 3px rgba(0,0,0,0.2),
        inset 0 0 0 0.5px rgba(0,0,0,0.3),
        0 0.5px 0 rgba(255,255,255,0.04);
    }
    .theme-dark .prof-menu-item {
      background: transparent;
      border-bottom-color: rgba(255,255,255,0.06);
      box-shadow: inset 0 -0.5px 0 rgba(255,255,255,0.03);
    }
    .theme-dark .prof-menu-item:last-child { box-shadow: none; }
    .theme-dark .prof-menu-item:hover { background: rgba(255,255,255,0.04); }
    .theme-dark .prof-menu-label { color: #f5f5f7; }
    .theme-dark .prof-menu-detail { color: #6e6e73; }
    .theme-dark .prof-menu-chevron { color: #48484a; }
    .theme-dark .prof-storage-bar { background: #3a3a3c; }
    .theme-dark .prof-signout { color: #FF6961; }
    .theme-dark .prof-footer { background: rgba(28,28,30,0.9); border-top-color: rgba(255,255,255,0.06); }

    @media (max-width: 640px) {
      .prof-body { flex: 1; padding: 18px 18px 12px; align-items: stretch; }
      .prof-card {
        width: auto; flex: 1; min-height: 0;
        border-radius: 18px; padding: 28px 22px;
        overflow-y: auto; -webkit-overflow-scrolling: touch;
        animation: none;
      }
      .prof-avatar { width: 56px; height: 56px; font-size: 1.2rem; }
      .prof-footer { padding: 10px 18px; }
    }

    /* ═══════════════════════════════════════════════════════════════
       ONBOARDING — macOS Tahoe style (closed state)
       ═══════════════════════════════════════════════════════════════ */
    /* ── Onboarding landing page ── */
    #closed-state {
      background: #f5f5f7 !important;
      overflow-y: auto !important; overflow-x: hidden !important;
      -webkit-overflow-scrolling: touch;
    }
    #closed-state { background: #f5f5f7 !important; }
    #closed-state > .status-bar {
      background: #f5f5f7 !important; border-bottom-color: transparent !important;
      box-shadow: none !important;
    }
    :root.theme-dark #closed-state,
    html.theme-dark #closed-state { background: #141415 !important; }
    :root.theme-dark #closed-state > .status-bar,
    html.theme-dark #closed-state > .status-bar {
      background: #141415 !important; border-bottom-color: rgba(255,255,255,0.06) !important;
      box-shadow: none !important;
    }
    :root.theme-dark #closed-state > .status-bar .status-bar-brand-mobile,
    :root.theme-dark #closed-state > .status-bar .status-bar-brand { color: rgba(255,255,255,0.7) !important; }
    :root.theme-dark #closed-state > .status-bar .status-bar-nav a { color: rgba(255,255,255,0.5) !important; }
    :root.theme-dark #closed-state > .status-bar .status-bar-nav a:hover { color: rgba(255,255,255,0.8) !important; }
    :root.theme-dark #closed-state > .status-bar .status-bar-search,
    :root.theme-dark #closed-state > .status-bar .status-bar-search-mobile,
    :root.theme-dark #closed-state > .status-bar .status-bar-hamburger { color: rgba(255,255,255,0.5) !important; }

    .ob-body {
      display: flex; flex-direction: column; align-items: center;
      width: 100%; padding-bottom: 140px;
    }
    /* ── New section-based layout (Apple Newsroom style) ── */
    .ob-section {
      width: 100%; padding: 80px 24px;
    }
    .ob-section-hero {
      padding: 60px 24px 8px;
    }
    .ob-section-inner {
      max-width: 980px; margin: 0 auto;
      display: flex; flex-direction: column; align-items: center;
      text-align: center;
    }
    .ob-headline {
      font-size: 48px; font-weight: 700; letter-spacing: -0.03em;
      color: #1d1d1f; margin: 0 0 16px; line-height: 1.08;
    }
    .ob-subheadline {
      font-size: 21px; font-weight: 400; color: rgba(0,0,0,0.5);
      max-width: 500px; margin: 0 auto 12px; line-height: 1.4;
    }
    .ob-section-title {
      font-size: 40px; font-weight: 700; letter-spacing: -0.025em;
      color: #1d1d1f; margin: 0 0 12px; line-height: 1.1;
    }
    .ob-section-subtitle {
      font-size: 19px; font-weight: 400; color: rgba(0,0,0,0.45);
      max-width: 460px; margin: 0 auto 48px; line-height: 1.4;
    }
    .ob-section-visual {
      display: flex; align-items: center; justify-content: center;
    }
    .ob-hero-visual-card {
      position: relative; display: inline-flex; align-items: center; justify-content: center;
    }
    .ob-phone-frame-hero {
      width: 280px; height: 560px; border-radius: 38px; border-width: 4px;
    }
    .ob-body-bottom {
      position: fixed; bottom: 0; left: 0; right: 0;
      display: flex; justify-content: center;
      padding: 24px 0 calc(36px + env(safe-area-inset-bottom, 0px));
      z-index: 100;
      background: #f5f5f7;
      pointer-events: none;
    }
    .ob-body-bottom .ob-btn { pointer-events: auto; }
    /* ── macOS Onboarding Landing ── */
    .mac-bg{display:none;}
    .mac-landing{
      width:100%;height:calc(100vh - 48px);
      display:flex;align-items:center;justify-content:center;
      padding:24px;box-sizing:border-box;overflow:hidden;
      position:relative;z-index:1;
      background:#f5f5f7;
    }
    .mac-panel{
      width:min(480px, 92vw);
      max-height:min(800px, 94vh);
      border-radius:28px;
      padding:0;
      display:flex;flex-direction:column;
      position:relative;overflow:hidden;
      background:#f5f5f7;
      border:0.5px solid rgba(0,0,0,0.08);
      box-shadow:0 40px 100px rgba(0,0,0,0.18),0 10px 30px rgba(0,0,0,0.1);
      animation:macIn 0.5s cubic-bezier(0.16,1,0.3,1) forwards;
    }
    @keyframes macIn{from{opacity:0;transform:scale(0.97) translateY(8px);}to{opacity:1;transform:scale(1) translateY(0);}}
    .mac-content{
      flex:1;display:flex;flex-direction:column;align-items:center;
      justify-content:center;
      padding:34px 40px 34px;text-align:center;
      overflow-y:auto;
    }
    .mac-title{
      font-size:30px;font-weight:800;letter-spacing:-0.022em;
      line-height:1.12;color:#1d1d1f;margin:8px 0 10px;
    }
    .mac-desc{
      font-size:15px;font-weight:400;line-height:1.5;
      color:#6e6e73;margin:0 0 26px;max-width:360px;
    }
    /* Boonful welcome — feature rows for the first-open onboarding panel */
    .mac-features{
      display:flex;flex-direction:column;gap:18px;
      width:100%;max-width:380px;margin:2px 0 20px;text-align:left;
    }
    .mac-feature{display:flex;align-items:flex-start;gap:15px;}
    .mac-feature-icon{flex-shrink:0;width:38px;height:38px;color:#2563eb;}
    .mac-feature-icon svg{width:100%;height:100%;display:block;}
    .mac-feature-title{
      font-size:15.5px;font-weight:700;letter-spacing:-0.01em;
      color:#1d1d1f;margin:2px 0 3px;
    }
    .mac-feature-desc{font-size:13.5px;line-height:1.42;color:#6e6e73;}
    .mac-mark{width:42px;height:42px;margin:2px auto 12px;color:#2563eb;}
    .mac-mark svg{width:100%;height:100%;display:block;}
    .mac-footnote{
      font-size:12px;line-height:1.45;color:#a1a1a6;text-align:center;
      margin:0 auto 4px;max-width:360px;
    }
    :root.theme-dark .mac-feature-title,html.theme-dark .mac-feature-title{color:#f5f5f7!important;}
    :root.theme-dark .mac-feature-desc,html.theme-dark .mac-feature-desc{color:#a1a1a6!important;}
    @media(prefers-color-scheme:dark){
      .mac-feature-title{color:#f5f5f7!important;}
      .mac-feature-desc{color:#a1a1a6!important;}
    }
    @media(max-width:480px){
      .mac-features{gap:28px;max-width:340px;margin-bottom:22px;}
      .mac-feature{gap:14px;}
      .mac-feature-icon{width:34px;height:34px;}
      .mac-feature-title{font-size:15px;}
      .mac-feature-desc{font-size:13px;}
      .mac-mark{width:38px;height:38px;}
      .mac-footnote{font-size:11.5px;}
    }
    .mac-preview{
      flex:0 0 auto;width:100%;max-width:none;min-height:0;
      border-radius:10px;overflow:hidden;position:relative;
      background:none;
      border:none;
      display:flex;align-items:center;justify-content:center;
      box-shadow:none;
    }
    .mac-mockup{
      width:100%;max-width:none;border-radius:8px;overflow:hidden;
      background:#fff;
      border:0.5px solid rgba(0,0,0,0.08);
      box-shadow:0 12px 40px rgba(0,0,0,0.08);
    }
    .mac-mockup-bar{
      height:28px;background:#f0f0f2;
      display:flex;align-items:center;padding:0 10px;gap:6px;
      border-bottom:0.5px solid rgba(0,0,0,0.06);
    }
    .mac-mockup-dot{width:8px;height:8px;border-radius:50%;}
    .mac-mockup-dot.r{background:#ff5f57;}
    .mac-mockup-dot.y{background:#febc2e;}
    .mac-mockup-dot.g{background:#28c840;}
    
    /* Show the video element immediately so its `poster` attribute is
       visible while the MP4 buffers — previously it was opacity:0 until
       the `canplay` event, but on slow networks that event can take a
       long time to fire and the box would stay blank.*/
    .ob-video-desktop,.ob-video-mobile{opacity:1;transition:opacity 0.3s ease;background:#f5f5f7;}
    .ob-video-desktop.vid-ready,.ob-video-mobile.vid-ready{opacity:1;}
    .ob-video-desktop{display:block!important;}
    .ob-video-mobile{display:none!important;}
    @media(max-width:768px){
      .ob-video-desktop{display:none!important;}
      .ob-video-mobile{display:block!important;max-height:50vh!important;object-fit:cover;aspect-ratio:9/16;}
    }
    @media(max-width:768px) and (display-mode:fullscreen),
    @media(max-width:768px) and (min-height:700px){
      .ob-video-mobile{max-height:60vh!important;}
    }
    @media(max-width:768px) and (min-height:900px){
      .ob-video-mobile{max-height:60vh!important;}
    }
    .mac-mockup-body{
      padding:20px;display:flex;flex-direction:column;align-items:center;gap:12px;
    }
    .mac-mockup-line{
      height:6px;border-radius:3px;background:rgba(0,0,0,0.06);
    }
    .mac-mockup-grid{
      display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%;margin-top:4px;
    }
    .mac-mockup-card{
      aspect-ratio:1.3;border-radius:6px;
    }
    :root.theme-dark .mac-preview,
    html.theme-dark .mac-preview{
      background:none!important;
      border:none!important;
      box-shadow:none!important;
    }
    :root.theme-dark .mac-mockup, html.theme-dark .mac-mockup{background:#1c1c1e!important;border-color:rgba(255,255,255,0.1)!important;box-shadow:0 12px 40px rgba(0,0,0,0.5)!important;}
    :root.theme-dark .mac-mockup-bar, html.theme-dark .mac-mockup-bar{background:#2c2c2e!important;border-bottom-color:rgba(255,255,255,0.06)!important;}
    :root.theme-dark .mac-mockup-line, html.theme-dark .mac-mockup-line{background:rgba(255,255,255,0.08)!important;}
    .mac-cta{
      width:100%;max-width:340px;
      border:none;border-radius:980px;cursor:pointer;
      font-family:inherit;font-size:17px;font-weight:600;letter-spacing:-0.01em;
      padding:0;height:60px;
      display:inline-flex;align-items:center;justify-content:center;
      position:relative;overflow:hidden;
      background:linear-gradient(180deg,#3b7bf7 0%,#2563eb 100%);color:#fff;
      box-shadow:0 2px 8px rgba(37,99,235,0.35),0 1px 2px rgba(0,0,0,0.18),inset 0 1px 0 rgba(255,255,255,0.38),inset 0 -1px 0 rgba(0,0,0,0.16),0 0 0 0.5px rgba(30,80,200,0.5);
      transition:transform .12s,box-shadow .15s,filter .12s;
      -webkit-tap-highlight-color:transparent;text-decoration:none;
      margin-top:8px;
    }
    .mac-cta::before{
      content:'';position:absolute;left:1px;right:1px;top:1px;
      height:50%;border-radius:980px 980px 40px 40px;
      background:linear-gradient(180deg,rgba(255,255,255,0.32) 0%,rgba(255,255,255,0.12) 42%,rgba(255,255,255,0.03) 72%,transparent 100%);
      pointer-events:none;
    }
    .mac-cta::after{
      content:'';position:absolute;left:12%;right:12%;top:1px;height:1px;
      background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0.55) 50%,rgba(255,255,255,0) 100%);
      pointer-events:none;
    }
    .mac-cta:hover{
      background:linear-gradient(180deg,#4a88f8 0%,#2d6df0 100%);
      box-shadow:0 4px 14px rgba(37,99,235,0.45),0 1px 3px rgba(0,0,0,0.2),inset 0 1px 0 rgba(255,255,255,0.4),inset 0 -1px 0 rgba(0,0,0,0.16),0 0 0 0.5px rgba(30,80,200,0.55);
    }
    .mac-cta:active{transform:scale(0.96);filter:brightness(0.94);}
    :root.theme-dark .mac-landing,
    html.theme-dark .mac-landing{
      background:#141415!important;
    }
    :root.theme-dark .mac-panel,
    html.theme-dark .mac-panel{
      background:#323234!important;
      border-color:rgba(255,255,255,0.12)!important;
      box-shadow:0 40px 100px rgba(0,0,0,0.6),0 10px 30px rgba(0,0,0,0.3)!important;
    }
    :root.theme-dark .mac-title,
    html.theme-dark .mac-title{color:#f5f5f7!important;}
    :root.theme-dark .mac-desc,
    html.theme-dark .mac-desc{color:#a1a1a6!important;}
    @media(prefers-color-scheme:dark){
      .mac-landing{background:#141415!important;}
      .mac-panel{background:#323234!important;border-color:rgba(255,255,255,0.12)!important;box-shadow:0 40px 100px rgba(0,0,0,0.6),0 10px 30px rgba(0,0,0,0.3)!important;}
      .mac-title{color:#f5f5f7!important;}
      .mac-desc{color:#a1a1a6!important;}
      .mac-preview{background:none!important;border:none!important;}
      .mac-mockup{background:#1c1c1e!important;border-color:rgba(255,255,255,0.1)!important;}
      .mac-mockup-bar{background:#2c2c2e!important;border-bottom-color:rgba(255,255,255,0.06)!important;}
      .mac-mockup-line{background:rgba(255,255,255,0.08)!important;}
    }
    @media(max-width:480px){
      .ob-body{padding-bottom:0!important;}
      .mac-landing{position:fixed!important;top:44px;left:0;right:0;bottom:0;padding:12px;margin:0;min-height:0;height:auto!important;width:auto;display:flex;align-items:stretch;box-sizing:border-box;overflow:visible;z-index:10;}
      .mac-panel{min-height:0;max-height:none!important;flex:1;border-radius:22px;width:100%;box-shadow:0 0 20px rgba(0,0,0,0.08),0 4px 12px rgba(0,0,0,0.06)!important;border:0.5px solid rgba(0,0,0,0.08);overflow:hidden;box-sizing:border-box;}
      :root.theme-dark .mac-panel, html.theme-dark .mac-panel{border-color:rgba(255,255,255,0.08)!important;box-shadow:0 0 20px rgba(0,0,0,0.3),0 4px 12px rgba(0,0,0,0.2)!important;}
      .mac-content{overflow-y:auto;padding:28px 22px 28px;justify-content:center;min-height:0;}
      .mac-title{font-size:24px;margin-bottom:12px;}
      .mac-desc{font-size:13px;margin-bottom:24px;line-height:1.55;}
      .mac-preview{min-height:0;flex-shrink:0;border-radius:8px;background:none!important;border:none!important;box-shadow:none!important;}
      .mac-mockup{width:100%;max-width:none;border-radius:10px;overflow:hidden;background:transparent!important;border:none!important;box-shadow:none!important;}
      .mac-mockup-bar{display:none!important;}
      .mac-mockup-body{background:transparent!important;}
      .mac-cta{height:56px;font-size:16px;max-width:100%;flex-shrink:0;}
    }
    @media(min-width:481px) and (max-width:767px){
      .mac-landing{padding:16px;}
      .mac-panel{box-shadow:0 0 40px rgba(0,0,0,0.10),0 8px 24px rgba(0,0,0,0.08)!important;}
      :root.theme-dark .mac-panel, html.theme-dark .mac-panel{box-shadow:0 0 40px rgba(0,0,0,0.35),0 8px 24px rgba(0,0,0,0.25)!important;}
      .mac-content{padding:44px 40px 28px;}
      .mac-title{font-size:28px;}
      .mac-preview{min-height:0;background:none!important;border:none!important;box-shadow:none!important;}
    }
    .ob-body > .ob-section,
    .ob-body > .ob-card-grid-wrap,
    .ob-body > div:not(.mac-landing){display:none!important;}
    .ob-body > *:not(.mac-landing):not(.mac-bg){display:none!important;}
    html:has(.mac-landing),body:has(.mac-landing){overflow:hidden!important;height:100vh!important;max-height:100vh!important;}
    #closed-state:has(.mac-landing){overflow:hidden!important;height:100vh!important;max-height:100vh!important;min-height:0!important;}
    .ob-body-bottom{opacity:0!important;pointer-events:none!important;position:absolute!important;bottom:0!important;}
    #closed-state > .status-bar{background:transparent!important;border-bottom:none!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border:none!important;}
    #closed-state > .status-bar::before,#closed-state > .status-bar::after{display:none!important;}
    .startup-overlay .status-bar{background:transparent!important;border-bottom:none!important;box-shadow:none!important;border:none!important;}


    :root.theme-dark .ob-body-bottom,
    html.theme-dark .ob-body-bottom {
      background: #141415;
    }
    .ob-preview-mock {
      width: 90%; max-width: 640px;
      background: #ffffff; border-radius: 14px; border: 1px solid rgba(0,0,0,0.08);
      box-shadow: 0 12px 48px rgba(0,0,0,0.12);
      display: flex; flex-direction: column; overflow: hidden; position: relative;
    }
    .ob-mock-video-wrap {
      position: relative; width: 100%; overflow: hidden;
    }
    .ob-hero-gif {
      width: 100%; display: block;
    }
    .ob-replay-btn {
      position: absolute; bottom: 10px; right: 10px;
      width: 34px; height: 34px; border-radius: 50%;
      background: rgba(0,0,0,0.45); border: none; cursor: pointer;
      display: none; align-items: center; justify-content: center;
      color: #fff; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 4;
      transition: opacity 0.2s;
    }
    .ob-replay-btn:hover { opacity: 0.8; }
    .ob-replay-btn.ob-replay-visible { display: flex; }
    :root.theme-dark .ob-replay-btn {
      background: rgba(255,255,255,0.2);
    }
    .ob-mock-titlebar {
      height: 28px; background: rgba(0,0,0,0.04);
      display: flex; align-items: center; padding: 0 10px; gap: 5px;
      border-bottom: 1px solid rgba(0,0,0,0.06);
    }
    .ob-mock-dot { width: 7px; height: 7px; border-radius: 50%; }
    .ob-mock-content {
      flex: 1; padding: 16px; display: grid;
      grid-template-columns: 1fr 1fr; gap: 10px;
    }
    .ob-mock-tile { border-radius: 8px; min-height: 48px; }
    .ob-phone-frame {
      width: 220px; height: 440px; border-radius: 32px;
      background: #e2e2e7; border: 3px solid #d1d1d6;
      box-shadow: 0 12px 48px rgba(0,0,0,0.08), inset 0 0 0 1px rgba(255,255,255,0.5);
      overflow: hidden; display: flex; flex-direction: column; position: relative;
    }
    .ob-phone-notch {
      width: 50px; height: 12px; background: #b0b0b5; border-radius: 20px;
      position: absolute; top: 8px; left: 50%; transform: translateX(-50%); z-index: 2;
    }
    .ob-phone-screen {
      flex: 1; margin: 4px; border-radius: 28px;
      overflow: hidden; display: flex; flex-direction: column; position: relative;
    }
    .ob-phone-status {
      height: 24px; display: flex; align-items: center; justify-content: space-between;
      padding: 0 24px; font-size: 0.55rem; color: #fff; font-weight: 600;
    }
    .ob-phone-content {
      flex: 1; padding: 10px; display: flex; flex-direction: column; gap: 6px;
    }
    .ob-phone-bar { height: 8px; border-radius: 4px; background: rgba(255,255,255,0.1); }
    .ob-phone-card { border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 6px; }
    .ob-phone-home { width: 80px; height: 4px; background: #fff; border-radius: 2px; margin: 6px auto; opacity: 0.3; }
    .ob-window-mock {
      width: 320px; aspect-ratio: 16/10;
      background: #ffffff; border-radius: 10px; border: 1px solid rgba(0,0,0,0.08);
      box-shadow: 0 8px 32px rgba(0,0,0,0.12);
      display: flex; flex-direction: column; overflow: hidden;
    }
    .ob-window-mock .ob-mock-titlebar { height: 24px; padding: 0 8px; gap: 4px; }
    .ob-window-mock .ob-mock-dot { width: 6px; height: 6px; }
    .ob-window-mock .ob-mock-content { padding: 12px; gap: 8px; }
    .ob-window-mock .ob-mock-tile { border-radius: 6px; min-height: 36px; }
    @media (min-width: 641px) {
      .ob-body-bottom { padding-top: 32px; padding-bottom: 36px; }
      .ob-body-bottom .ob-btn { height: 54px; font-size: 0.95rem; padding: 0 112px; }

      .ob-section { padding: 100px 40px; }
      .ob-headline { font-size: 56px; }
      .ob-subheadline { font-size: 24px; max-width: 560px; }
      .ob-section-title { font-size: 48px; }
      .ob-section-subtitle { font-size: 21px; max-width: 500px; }
      .ob-phone-frame-hero { width: 300px; height: 600px; border-radius: 42px; }
      .ob-phone-frame { width: 280px; height: 560px; border-radius: 38px; border-width: 4px; }
      .ob-phone-notch { width: 64px; height: 14px; top: 10px; }
      .ob-phone-screen { border-radius: 34px; }
      .ob-phone-content { padding: 14px; gap: 8px; }
      .ob-phone-bar { height: 10px; border-radius: 5px; }
      .ob-phone-card { border-radius: 12px; padding: 16px; gap: 8px; }
      .ob-phone-home { width: 100px; }
      .ob-window-mock { width: 440px; border-radius: 14px; }
      .ob-window-mock .ob-mock-titlebar { height: 30px; padding: 0 12px; gap: 6px; }
      .ob-window-mock .ob-mock-dot { width: 7px; height: 7px; }
      .ob-window-mock .ob-mock-content { padding: 16px; gap: 10px; }
      .ob-window-mock .ob-mock-tile { border-radius: 8px; min-height: 48px; }
      .ob-preview-mock { max-width: 720px; }
    }
    @media (max-width: 640px) {
      .ob-section { padding: 40px 20px; }
      .ob-section-hero { padding: 40px 20px 4px; }
      .ob-headline { font-size: 32px; }
      .ob-subheadline { font-size: 17px; max-width: 320px; margin-bottom: 8px; }
      .ob-section-title { font-size: 28px; }
      .ob-section-subtitle { font-size: 15px; }
      .ob-phone-frame-hero { width: 220px; height: 440px; border-radius: 32px; border-width: 3px; }
      .ob-preview-mock { width: 90%; }
      .ob-body-bottom { padding-left: 24px; padding-right: 24px; }
      .ob-body-bottom .ob-btn { width: 100%; max-width: 360px; padding: 0; }
      .ob-phone-frame { width: 200px; height: 400px; border-radius: 28px; }
      .ob-window-mock { width: 260px; }
    }
    /* ── Dark mode overrides for onboarding ── */
    :root.theme-dark .ob-headline,
    html.theme-dark .ob-headline,
    :root.theme-dark .ob-section-title,
    html.theme-dark .ob-section-title { color: #f5f5f7; }
    :root.theme-dark .ob-subheadline,
    html.theme-dark .ob-subheadline { color: rgba(255,255,255,0.5); }
    :root.theme-dark .ob-section-subtitle,
    html.theme-dark .ob-section-subtitle { color: rgba(255,255,255,0.4); }
    :root.theme-dark .ob-preview-mock,
    html.theme-dark .ob-preview-mock {
      background: #0d0d0e; border-color: rgba(255,255,255,0.06);
      box-shadow: 0 8px 32px rgba(0,0,0,0.4);
    }
    :root.theme-dark .ob-mock-titlebar,
    html.theme-dark .ob-mock-titlebar {
      background: rgba(255,255,255,0.04); border-bottom-color: rgba(255,255,255,0.04);
    }
    :root.theme-dark .ob-phone-frame,
    html.theme-dark .ob-phone-frame {
      background: #1d1d1f; border-color: #3a3a3c;
      box-shadow: 0 12px 48px rgba(0,0,0,0.3), inset 0 0 0 1px rgba(255,255,255,0.04);
    }
    :root.theme-dark .ob-phone-notch,
    html.theme-dark .ob-phone-notch { background: #3a3a3c; }

    /* Phone screen light/dark mode */
    .ob-phone-screen { background: #ffffff; }
    :root.theme-dark .ob-phone-screen,
    html.theme-dark .ob-phone-screen { background: #111112; }

    /* Phone status bar text */
    .ob-phone-status { color: #1d1d1f !important; }
    :root.theme-dark .ob-phone-status,
    html.theme-dark .ob-phone-status { color: #fff !important; }

    /* Phone home indicator */
    .ob-phone-home { background: #c4c4c9; }
    :root.theme-dark .ob-phone-home,
    html.theme-dark .ob-phone-home { background: #fff; }

    /* Muted phone cards (light = subtle grey, dark = subtle white) */
    .ob-phone-card-muted { background: rgba(0,0,0,0.05) !important; }
    :root.theme-dark .ob-phone-card-muted,
    html.theme-dark .ob-phone-card-muted { background: rgba(255,255,255,0.06) !important; }

    /* Muted phone bars */
    .ob-phone-bar { background: rgba(0,0,0,0.06); }
    .ob-phone-bar-muted { background: rgba(0,0,0,0.1) !important; }
    :root.theme-dark .ob-phone-bar,
    html.theme-dark .ob-phone-bar { background: rgba(255,255,255,0.1); }
    :root.theme-dark .ob-phone-bar-muted,
    html.theme-dark .ob-phone-bar-muted { background: rgba(255,255,255,0.12) !important; }

    /* Muted window mock tiles */
    .ob-mock-tile-muted { background: rgba(0,0,0,0.05) !important; }
    :root.theme-dark .ob-mock-tile-muted,
    html.theme-dark .ob-mock-tile-muted { background: rgba(255,255,255,0.06) !important; }
    :root.theme-dark .ob-window-mock,
    html.theme-dark .ob-window-mock {
      background: #0d0d0e; border-color: rgba(255,255,255,0.06);
      box-shadow: 0 8px 32px rgba(0,0,0,0.3);
    }
    :root.theme-dark .ob-window-mock .ob-mock-titlebar,
    html.theme-dark .ob-window-mock .ob-mock-titlebar {
      background: rgba(255,255,255,0.04); border-bottom-color: rgba(255,255,255,0.04);
    }

    /* ── Card Grid (Apple-style feature showcase) ── */
    .ob-card-grid {
      display: grid;
      gap: 16px;
      padding: 0 20px 40px;
      max-width: 900px;
      margin: 0 auto;
      width: 100%;
    }
    .ob-card-item { text-align: center; }
    .ob-card-visual {
      background: #fff;
      border-radius: 20px;
      overflow: hidden;
      position: relative;
      display: flex;
      justify-content: center;
      align-items: flex-end;
      height: 380px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    }
    :root.theme-dark .ob-card-visual,
    html.theme-dark .ob-card-visual {
      background: #1c1c1e;
      box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    }
    .ob-card-visual .ob-phone-frame {
      position: relative;
      margin-bottom: -70px;
      z-index: 1;
    }
    .ob-card-visual .ob-window-mock {
      position: relative;
      margin-bottom: -40px;
      z-index: 1;
    }
    .ob-card-text {
      padding: 16px 6px 0;
      text-align: left;
    }
    .ob-card-text h3 {
      font-size: 0.95rem;
      font-weight: 700;
      color: #1d1d1f;
      line-height: 1.3;
    }
    .ob-card-text h3 span {
      font-weight: 400;
      color: #6e6e73;
    }
    :root.theme-dark .ob-card-text h3,
    html.theme-dark .ob-card-text h3 { color: #f5f5f7; }
    :root.theme-dark .ob-card-text h3 span,
    html.theme-dark .ob-card-text h3 span { color: #98989f; }

    /* Desktop: 2 columns */
    @media (min-width: 736px) {
      .ob-card-grid {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        padding: 0 40px 60px;
      }
      .ob-card-visual { height: 420px; }
      .ob-card-visual .ob-phone-frame {
        width: 280px; height: 540px;
        border-radius: 38px; border-width: 4px;
        margin-bottom: -80px;
      }
      .ob-card-visual .ob-phone-frame .ob-phone-notch {
        width: 60px; height: 14px; top: 10px;
      }
      .ob-card-visual .ob-phone-frame .ob-phone-screen {
        border-radius: 34px;
      }
      .ob-card-visual .ob-window-mock {
        width: 380px;
        margin-bottom: -50px;
      }
      .ob-card-text { padding: 20px 4px 0; }
      .ob-card-text h3 { font-size: 1.05rem; }
    }

    /* Mobile: single column centered */
    @media (max-width: 735px) {
      .ob-card-grid {
        grid-template-columns: 1fr;
        max-width: 380px;
        gap: 28px;
        padding: 0 16px 40px;
      }
      .ob-card-visual { height: 340px; }
      .ob-card-visual .ob-phone-frame {
        width: 230px; height: 440px;
        border-radius: 32px; border-width: 3px;
        margin-bottom: -60px;
      }
      .ob-card-visual .ob-phone-frame .ob-phone-notch {
        width: 50px; height: 12px; top: 8px;
      }
      .ob-card-visual .ob-phone-frame .ob-phone-screen {
        border-radius: 28px;
      }
      .ob-card-visual .ob-window-mock {
        width: 280px;
        margin-bottom: -30px;
      }
      .ob-card-text { text-align: center; }
    }

    /* Hover */
    @media (hover: hover) {
      .ob-card-visual { transition: transform 0.25s ease; }
      .ob-card-visual:hover { transform: scale(1.015); }
    }

    /* ── Card 1 replay button ── */
    .ob-card-replay {
      position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
      width: 48px; height: 48px; border-radius: 50%;
      background: rgba(0,0,0,0.55); border: none; cursor: pointer;
      display: none; align-items: center; justify-content: center;
      color: #fff; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
      z-index: 5; transition: opacity 0.2s;
    }
    .ob-card-replay:hover { opacity: 0.8; }
    .ob-card-replay.visible { display: flex; }

    /* ── Card 1: Home layout ── */
    .ob-card1-inner {
      display: flex; flex-direction: column; align-items: center;
      width: 100%; height: 100%;
      position: relative;
    }
    .ob-card1-label-wrap {
      position: relative; width: 100%; flex-shrink: 0;
      padding: 52px 0 44px;
      display: flex; align-items: center; justify-content: center;
      z-index: 3;
    }
    .ob-card1-label {
      font-size: 1.3rem; font-weight: 700; color: var(--text-primary, #1d1d1f);
      letter-spacing: -0.02em; text-align: center;
      position: absolute;
    }
    :root.theme-dark .ob-card1-label,
    html.theme-dark .ob-card1-label { color: #f5f5f7; }
    .ob-card1-phone-wrap {
      position: relative; width: 100%; display: flex;
      justify-content: center; align-items: flex-end; flex: 1;
    }
    .ob-card1-screen-img {
      width: 100%; height: 100%;
      object-fit: contain; -o-object-fit: contain;
      object-position: top center; -o-object-position: top center;
      display: block; border-radius: inherit;
      background: #000;
    }

    /* ── Card 1: Mobile optimisations ── */
    @media (max-width: 735px) {
      .ob-card1-label-wrap {
        padding: 40px 0 32px;
      }
      .ob-card1-label {
        font-size: 1.1rem;
      }
      .ob-card1-phone-wrap {
        /* no scale – native size prevents blur */
      }
    }

    /* ── Card 2: Slideshow layout ── */
    .ob-card2-inner {
      display: flex; flex-direction: column; align-items: center;
      width: 100%; height: 100%;
      position: relative;
    }
    .ob-card2-label-wrap {
      position: relative; width: 100%; flex-shrink: 0;
      padding: 52px 0 44px;
      display: flex; align-items: center; justify-content: center;
      z-index: 3;
    }
    .ob-card2-label {
      font-size: 1.3rem; font-weight: 700; color: var(--text-primary, #1d1d1f);
      letter-spacing: -0.02em; text-align: center;
      opacity: 0; transform: translateX(16px);
      transition: opacity 0.4s ease, transform 0.4s ease;
      position: absolute;
      z-index: 1;
    }
    #card2-label-0 { z-index: 2; }
    .ob-card2-label.animate-in { opacity: 1; transform: translateX(0); }
    .ob-card2-label.animate-out { opacity: 0; transform: translateX(-16px); }
    :root.theme-dark .ob-card2-label,
    html.theme-dark .ob-card2-label { color: #f5f5f7; }
    .ob-card2-phone-wrap {
      position: relative; width: 100%; display: flex;
      justify-content: center; align-items: flex-end; flex: 1;
    }
    .ob-card2-phone {
      opacity: 0; transform: translateY(0);
      transition: opacity 0.45s ease, transform 0.45s ease;
      z-index: 1;
      will-change: opacity, transform;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
    }
    #card2-phone-0 { z-index: 2; }
    .ob-card2-phone.animate-in { opacity: 1; transform: translateY(0); }
    .ob-card2-phone.animate-out { opacity: 0; transform: translateY(0); }
    .ob-card2-screen-img {
      width: 100%; height: 100%;
      object-fit: contain; -o-object-fit: contain;
      object-position: top center; -o-object-position: top center;
      display: block; border-radius: inherit;
      background: #000;
    }
    /* ── Card 2: Mobile optimisations ── */
    @media (max-width: 735px) {
      .ob-card2-label-wrap {
        padding: 40px 0 32px;
      }
      .ob-card2-label {
        font-size: 1.1rem;
      }
      .ob-card2-phone-wrap {
        /* no scale – native size prevents blur */
      }
    }
      }
    }

    /* ── Shimmer animation for Get started text ── */
    @keyframes ob-shimmer {
      0% { background-position: 200% center; }
      100% { background-position: -200% center; }
    }
    .ob-btn-continue .ob-btn-label {
      background: linear-gradient(90deg, rgba(255,255,255,0.75) 0%, rgba(255,255,255,0.75) 30%, rgba(255,255,255,1) 50%, rgba(255,255,255,0.75) 70%, rgba(255,255,255,0.75) 100%);
      background-size: 200% auto;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      animation: ob-shimmer 2.5s linear infinite;
    }
    :root.theme-dark .ob-btn-continue .ob-btn-label,
    html.theme-dark .ob-btn-continue .ob-btn-label {
      background: linear-gradient(90deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.5) 30%, rgba(255,255,255,1) 50%, rgba(255,255,255,0.5) 70%, rgba(255,255,255,0.5) 100%);
      background-size: 200% auto;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      animation: ob-shimmer 2.5s linear infinite;
    }

    .ob-btn {
      border: none; border-radius: 26px; cursor: pointer;
      font-family: inherit; font-size: 0.92rem; font-weight: 600;
      letter-spacing: -0.01em; padding: 0 104px; height: 50px;
      display: inline-flex; align-items: center; justify-content: center;
      transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
      position: relative; overflow: hidden;
      -webkit-tap-highlight-color: transparent;
    }
    .ob-btn::before {
      content: ''; position: absolute; inset: 0 0 50% 0;
      background: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0) 100%);
      pointer-events: none; border-radius: 22px 22px 0 0;
    }
    .ob-btn-skip {
      background: linear-gradient(180deg, #f0f0f5 0%, #e4e4e9 100%);
      color: #3c3c3e;
      border: 0.5px solid rgba(0,0,0,0.12);
      box-shadow: 0 1px 3px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,1), inset 0 -1px 1px rgba(0,0,0,0.05);
    }
    .ob-btn-skip:hover {
      background: linear-gradient(180deg, #f5f5fa 0%, #e0e0e5 100%);
      box-shadow: 0 2px 6px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,1);
    }
    .ob-btn-skip:active { transform: scale(0.96); }
    :root.theme-dark .ob-btn-skip,
    html.theme-dark .ob-btn-skip {
      background: linear-gradient(180deg, #3a3a3c 0%, #2c2c2e 100%);
      color: #d1d1d6; border-color: rgba(255,255,255,0.06);
      box-shadow: 0 1px 3px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.06), inset 0 -1px 1px rgba(0,0,0,0.2);
    }
    :root.theme-dark .ob-btn-skip:hover,
    html.theme-dark .ob-btn-skip:hover {
      background: linear-gradient(180deg, #404042 0%, #323234 100%);
    }
    .ob-btn-continue {
      background: linear-gradient(180deg, #3b7bf7 0%, #2563eb 100%);
      color: #fff;
      border: none;
      border-radius: 980px;
      box-shadow: 0 2px 8px rgba(37,99,235,0.35), 0 1px 2px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.38), inset 0 -1px 0 rgba(0,0,0,0.16), 0 0 0 0.5px rgba(30,80,200,0.5);
      transition: transform 0.12s, box-shadow 0.15s, filter 0.12s;
    }
    .ob-btn-continue::before {
      content: ''; position: absolute; left: 1px; right: 1px; top: 1px;
      height: 50%; border-radius: 980px 980px 40px 40px;
      background: linear-gradient(180deg, rgba(255,255,255,0.32) 0%, rgba(255,255,255,0.12) 42%, rgba(255,255,255,0.03) 72%, transparent 100%);
      pointer-events: none;
    }
    .ob-btn-continue::after {
      content: ''; position: absolute; left: 12%; right: 12%; top: 1px;
      height: 1px;
      background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.55) 50%, rgba(255,255,255,0) 100%);
      pointer-events: none;
    }
    .ob-btn-continue:hover {
      background: linear-gradient(180deg, #4a88f8 0%, #2d6df0 100%);
      box-shadow: 0 4px 14px rgba(37,99,235,0.45), 0 1px 3px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.4), inset 0 -1px 0 rgba(0,0,0,0.16), 0 0 0 0.5px rgba(30,80,200,0.55);
    }
    .ob-btn-continue:active {
      transform: scale(0.96); filter: brightness(0.94);
      box-shadow: 0 1px 3px rgba(37,99,235,0.25), inset 0 2px 4px rgba(0,0,0,0.18), inset 0 -1px 0 rgba(255,255,255,0.08);
    }
    :root.theme-dark .ob-btn-continue,
    html.theme-dark .ob-btn-continue {
      background: linear-gradient(180deg, #383838 0%, #2a2a2c 100%);
      color: #f5f5f7; border: 0.5px solid rgba(255,255,255,0.1);
      box-shadow: 0 2px 8px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.08), inset 0 -1px 1px rgba(0,0,0,0.2);
    }
    :root.theme-dark .ob-btn-continue::before {
      background: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0) 100%);
      border-radius: 22px 22px 0 0;
    }
    :root.theme-dark .ob-btn-continue::after {
      background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0) 100%);
    }
    :root.theme-dark .ob-btn-continue:hover,
    html.theme-dark .ob-btn-continue:hover {
      background: linear-gradient(180deg, #404042 0%, #323234 100%);
      box-shadow: 0 3px 12px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.1);
    }
    @media (max-width: 640px) {
      .ob-preview-mock { width: 90%; }
    }

    /* ── App Studio Overlay ── */
    .studio-overlay {
      /* z-index must beat the launcher's .search-container (10000)
         and other launcher chrome so the Publisher Studio screen
         actually shows on top of the home launcher when opened from
         the Studio home tile. Stays below bf-overlay (99998) so the
         app-window flow remains uninterrupted when applicable. */
      position: fixed; inset: 0; z-index: 50000;
      background: #DADADE;
      display: flex; flex-direction: column;
      opacity: 0; pointer-events: none;
      transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
      will-change: opacity;
    }
    .studio-overlay.studio-overlay-active { opacity: 1; pointer-events: auto; }
    .studio-body {
      flex: 1; display: flex; align-items: center; justify-content: center;
      padding: 32px 20px 16px; overflow-y: auto;
    }
    .studio-card {
      background: #FFFFFF;
      border: 0.5px solid rgba(0,0,0,0.06);
      border-radius: 22px; width: min(560px, 96vw);
      min-height: 380px; max-height: calc(100vh - 100px);
      padding: 32px 48px 18px;
      box-shadow:
        0 1px 0 rgba(255,255,255,0.9) inset,
        0 20px 60px rgba(0,0,0,0.10),
        0 4px 12px rgba(0,0,0,0.05);
      display: flex; flex-direction: column; align-items: center; text-align: center;
      position: relative; overflow: hidden;
      animation: studioCardIn 0.5s cubic-bezier(0.16,1,0.3,1) forwards;
      will-change: transform, opacity;
    }
    @keyframes studioCardIn {
      0% { opacity: 0; transform: scale(0.94) translateY(12px); }
      100% { opacity: 1; transform: scale(1) translateY(0); }
    }
    @keyframes studioUploadPulse {
      0%, 100% { opacity: .3; }
      50% { opacity: .8; }
    }
    .studio-dots { display: flex; gap: 6px; margin-bottom: 24px; justify-content: center; }
    /* Dashboard is a terminal view — hide dots and tighten top spacing */
    .studio-card.studio-dashboard-mode { padding-top: 18px; }
    .studio-card.studio-dashboard-mode .studio-dots { display: none; }
    .studio-card.studio-dashboard-mode #studio-dash-title { margin-top: 0; }

    /* Description popup — sits above studio overlay for editing description fields */
    .desc-popup-overlay {
      z-index: 160 !important;
      opacity: 0; pointer-events: none;
      transition: opacity 0.16s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .desc-popup-overlay.desc-popup-open {
      opacity: 1 !important; pointer-events: auto !important;
    }
    /* Slight card slide-up on open — feels responsive instead of flat fade */
    .desc-popup-overlay .desc-popup-card {
      transform: translateY(8px) scale(0.985);
      transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
      will-change: transform;
    }
    .desc-popup-overlay.desc-popup-open .desc-popup-card {
      transform: translateY(0) scale(1);
    }
    .desc-popup-overlay.hidden { display: none !important; }
    .desc-popup-overlay .desc-popup-card { max-width: 560px; padding-top: 22px; }
    .desc-popup-overlay #desc-popup-textarea { font-size: 0.92rem; line-height: 1.5; }

    /* Kill the bouncy .studio-card opening animation inside popups — it
       fights with .desc-popup-card transform and causes jittery/glitchy
       feel when the Edit Product Links bar is tapped. The popup uses its
       own softer translateY/scale transition instead. */
    .desc-popup-overlay .studio-card { animation: none !important; }

    /* Guarantee products popup scroll — rather than trying to engage the
       complex flex chain (studio-card > studio-step > scrollable > content),
       just constrain the LIST itself so it scrolls inside the card. This
       works regardless of viewport size or content count. */
    .products-popup-overlay #products-popup-list,
    .products-popup-overlay #edit-products-popup-list {
      max-height: min(62vh, 520px);
      overflow-y: auto;
      overflow-x: hidden;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
    }
    .products-popup-overlay #products-popup-list::-webkit-scrollbar,
    .products-popup-overlay #edit-products-popup-list::-webkit-scrollbar { width: 4px; }
    .products-popup-overlay #products-popup-list::-webkit-scrollbar-thumb,
    .products-popup-overlay #edit-products-popup-list::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 2px; }

    /* Edit-products / product-links popup: kill square flash + white box-shadow line on rows */
    .products-popup-overlay .studio-feature-card {
      -webkit-tap-highlight-color: transparent !important;
      transition: none !important;
      box-shadow: none !important;
    }
    .products-popup-overlay .studio-feature-card:active {
      background: transparent !important;
      transform: none !important;
    }

    /* Edit-products / product-links: edge-to-edge search row — solid bg so it
       stays opaque when the list scrolls beneath it. Full-width tap target. */
    .products-popup-overlay .studio-dash-search-row {
      position: sticky; top: 0; z-index: 10;
      margin: 0 !important; padding: 0 !important;
      background: #1c1c1e !important;
      border-bottom: 0.5px solid rgba(255,255,255,0.08) !important;
      border-radius: 0 !important;
      cursor: text !important;
      box-shadow: none !important;
    }
    .products-popup-overlay .studio-dash-search-row .studio-dash-search-wrap {
      margin: 0 !important;
      padding: 12px 16px !important;
      background: transparent !important;
      border: none !important;
      border-radius: 0 !important;
      box-shadow: none !important;
    }
    .products-popup-overlay .studio-dash-search-row .studio-dash-search-input {
      color: #f5f5f7 !important;
      font-size: 0.84rem;
    }
    .products-popup-overlay .studio-dash-search-row .studio-dash-search-input::placeholder {
      color: rgba(255,255,255,0.3) !important;
    }
    .products-popup-overlay .studio-dash-search-row .studio-dash-search-wrap svg {
      color: rgba(255,255,255,0.3) !important;
    }
    @media (prefers-color-scheme: light) {
      .products-popup-overlay .studio-dash-search-row {
        background: #f6f6f9 !important;
        border-bottom-color: rgba(0,0,0,0.08) !important;
      }
      .products-popup-overlay .studio-dash-search-row .studio-dash-search-input {
        color: #1d1d1f !important;
      }
      .products-popup-overlay .studio-dash-search-row .studio-dash-search-input::placeholder {
        color: rgba(0,0,0,0.35) !important;
      }
      .products-popup-overlay .studio-dash-search-row .studio-dash-search-wrap svg {
        color: rgba(0,0,0,0.4) !important;
      }
    }

    /* Description tap target — replaces the inline textarea with a clickable card that opens the popup */
    .studio-desc-tap {
      width: 100%; min-height: 44px;
      display: flex; flex-direction: row; align-items: center;
      gap: 10px; padding: 10px 14px;
      background: transparent;
      border: 1.5px dashed rgba(0,0,0,0.15);
      border-radius: 12px;
      font-family: inherit; font-size: 0.86rem; line-height: 1.4;
      text-align: left; cursor: pointer;
      color: #1d1d1f;
      transition: border-color 0.2s;
      box-sizing: border-box;
      -webkit-tap-highlight-color: transparent;
      box-shadow: none;
    }
    .studio-desc-tap:hover { border-color: #8ab4ff; background: rgba(52,120,246,0.03); }
    .studio-desc-tap .studio-desc-tap-placeholder {
      display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0;
      color: #86868b; font-size: 0.82rem; font-style: italic;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .studio-desc-tap .studio-desc-tap-value {
      color: #1d1d1f; font-size: 0.86rem; flex: 1; min-width: 0;
      white-space: nowrap; word-break: break-word;
      overflow: hidden; text-overflow: ellipsis;
    }
    .studio-desc-tap-hint {
      display: inline-flex; align-items: center; gap: 4px;
      font-size: 0.68rem; color: #3478F6; font-weight: 600;
      margin-top: 0; margin-left: auto; font-style: normal; flex-shrink: 0;
    }
    .studio-desc-tap-hint svg { width: 12px; height: 12px; }
    .theme-dark .studio-desc-tap {
      background: transparent;
      border: 1.5px dashed rgba(255,255,255,0.15); color: #f5f5f7;
      box-shadow: none;
    }
    .theme-dark .studio-desc-tap:hover { border-color: #5a9dff; background: rgba(90,157,255,0.06); }
    .theme-dark .studio-desc-tap .studio-desc-tap-value { color: #f5f5f7; }

    /* Details tap variant — single-row bar that opens a popup showing
       the grouped section (Name, Description, Profile Link etc.) */
    .studio-details-tap {
      min-height: 44px;
      padding: 10px 14px;
      gap: 10px;
      flex-direction: row;
      align-items: center;
      border: 1.5px dashed rgba(0,0,0,0.15);
      border-radius: 12px;
      background: transparent;
      box-shadow: none;
    }
    .studio-details-tap:hover {
      border-color: #8ab4ff;
      background: rgba(52,120,246,0.03);
    }
    .studio-details-tap .studio-details-tap-label {
      font-size: 0.88rem; font-weight: 600; color: #1d1d1f;
      letter-spacing: -0.01em;
      flex-shrink: 0;
    }
    .studio-details-tap .studio-details-tap-summary {
      font-size: 0.78rem; color: #3478F6; font-weight: 600;
      margin-left: auto;
      flex: 1; min-width: 0;
      text-align: right;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      padding-left: 10px;
    }
    .studio-details-tap .studio-desc-tap-hint {
      margin-left: 0;
      padding-left: 8px;
      border-left: 0.5px solid rgba(0,0,0,0.1);
    }
    .theme-dark .studio-details-tap {
      border: 1.5px dashed rgba(255,255,255,0.15);
      border-radius: 12px;
      background: transparent;
      box-shadow: none;
    }
    .theme-dark .studio-details-tap:hover {
      border-color: #5a9dff;
      background: rgba(90,157,255,0.06);
    }
    .theme-dark .studio-details-tap .studio-details-tap-label { color: #f5f5f7; }
    .theme-dark .studio-details-tap .studio-details-tap-summary { color: #5a9dff; }
    .theme-dark .studio-details-tap .studio-desc-tap-hint { border-left-color: rgba(255,255,255,0.1); }

    /* Section is kept in DOM but hidden inline — it gets moved into the
       popup slot on open and moved back on close. No visual difference. */
    .studio-form-section[data-details-id] { display: none; }
    .details-popup-overlay #details-popup-slot .studio-form-section[data-details-id] {
      display: block;
    }
    .details-popup-overlay #details-popup-slot .studio-form-section {
      max-width: 100%;
      margin-bottom: 0;
    }

    /* Product link tap variant — single-row: label · count · Manage > */
    .studio-products-tap {
      min-height: 48px;
      padding: 10px 14px;
      gap: 10px;
      flex-direction: row;
      align-items: center;
    }
    .studio-products-tap .studio-products-tap-label {
      font-size: 0.88rem; font-weight: 600; color: #1d1d1f;
      letter-spacing: -0.01em;
      flex-shrink: 0;
    }
    .studio-products-tap .studio-products-tap-count {
      font-size: 0.78rem; color: #86868b; font-weight: 500;
      margin-left: auto;
      flex-shrink: 0;
      white-space: nowrap;
    }
    .studio-products-tap .studio-desc-tap-hint {
      margin-left: 0;
      padding-left: 8px;
      border-left: 0.5px solid rgba(0,0,0,0.1);
    }
    .theme-dark .studio-products-tap .studio-products-tap-label { color: #f5f5f7; }
    .theme-dark .studio-products-tap .studio-products-tap-count { color: #98989f; }
    .theme-dark .studio-products-tap .studio-desc-tap-hint { border-left-color: rgba(255,255,255,0.1); }

    /* Products popup list rows — follows .studio-feature-grid pattern, no glow */
    .products-popup-overlay .desc-popup-card { max-width: 560px; padding-top: 22px; }
    .products-popup-overlay .studio-feature-grid { margin-top: 6px; }
    .products-popup-overlay .studio-feature-card { cursor: pointer; }
    .products-popup-overlay .studio-feature-card .studio-feature-desc {
      font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
      font-size: 0.72rem;
      color: #3478F6;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .products-popup-overlay .studio-feature-card .studio-feature-desc.spr-missing {
      color: #FF9500; font-family: inherit; font-style: italic;
    }
    @media (prefers-color-scheme: dark) {
      .products-popup-overlay .studio-feature-card .studio-feature-desc { color: #5a9dff; }
    }
    .studio-dot {
      width: 8px; height: 8px; border-radius: 50%;
      background: #c4c4c9; transition: all 0.3s ease;
    }
    .studio-dot-active {
      background: #3478F6; width: 22px; border-radius: 4px;
      box-shadow: 0 1px 4px rgba(52,120,246,0.3);
    }
    .studio-dot-done { background: #7aabf5; }

    .studio-step { display: none; width: 100%; flex-direction: column; align-items: center; flex: 1; min-height: 0; overflow: hidden; }
    .studio-step-active { display: flex; }

    /* Skeuomorphic circular close button — follows design guideline.
       Base = LIGHT (white); dark mode override below. Softer shadows. */
    .studio-close-btn {
      position: absolute; top: 14px; right: 14px;
      width: 28px; height: 28px; border-radius: 50%;
      background: linear-gradient(180deg, #ffffff 0%, #f2f2f6 100%);
      border: 0.5px solid rgba(0,0,0,0.08);
      box-shadow:
        0 1px 2px rgba(0,0,0,0.06),
        0 0.5px 1px rgba(0,0,0,0.04),
        inset 0 1px 0 rgba(255,255,255,1),
        inset 0 -1px 0 rgba(0,0,0,0.05),
        0 0 0 0.5px rgba(0,0,0,0.06);
      display: flex; align-items: center; justify-content: center;
      cursor: pointer; color: #6e6e73; font-size: 15px; line-height: 1;
      font-weight: 400;
      transition: transform 0.08s ease, box-shadow 0.12s;
      z-index: 2; padding: 0;
      -webkit-tap-highlight-color: transparent;
      text-shadow: 0 1px 0 rgba(255,255,255,0.6);
    }
    .studio-close-btn::after {
      content: ''; position: absolute; inset: 0; border-radius: inherit;
      background: linear-gradient(180deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 50%, rgba(0,0,0,0.03) 100%);
      mix-blend-mode: overlay; pointer-events: none;
    }
    .studio-close-btn:hover {
      box-shadow:
        0 1px 3px rgba(0,0,0,0.08),
        0 0.5px 1px rgba(0,0,0,0.05),
        inset 0 1px 0 rgba(255,255,255,1),
        inset 0 -1px 0 rgba(0,0,0,0.05),
        0 0 0 0.5px rgba(0,0,0,0.08);
    }
    .studio-close-btn:active {
      transform: scale(0.94);
      box-shadow:
        0 0.5px 1px rgba(0,0,0,0.08),
        inset 0 1px 2px rgba(0,0,0,0.08),
        inset 0 -0.5px 0 rgba(255,255,255,0.6),
        0 0 0 0.5px rgba(0,0,0,0.08);
    }
    @media (prefers-color-scheme: dark) {
      :root:not(.theme-light) .studio-close-btn {
        background: linear-gradient(180deg, #3a3a3c 0%, #2c2c2e 100%);
        border: 0.5px solid rgba(0,0,0,0.5);
        color: #c7c7cc;
        text-shadow: 0 1px 0 rgba(0,0,0,0.5);
        box-shadow:
          0 1px 3px rgba(0,0,0,0.3),
          0 0.5px 1px rgba(0,0,0,0.2),
          inset 0 1px 0 rgba(255,255,255,0.08),
          inset 0 -1px 0 rgba(0,0,0,0.18),
          0 0 0 0.5px rgba(0,0,0,0.4);
      }
      :root:not(.theme-light) .studio-close-btn::after {
        background: linear-gradient(180deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0) 50%, rgba(0,0,0,0.06) 100%);
      }
      :root:not(.theme-light) .studio-close-btn:hover {
        box-shadow:
          0 1px 4px rgba(0,0,0,0.35),
          0 0.5px 1px rgba(0,0,0,0.2),
          inset 0 1px 0 rgba(255,255,255,0.12),
          inset 0 -1px 0 rgba(0,0,0,0.18),
          0 0 0 0.5px rgba(0,0,0,0.4);
      }
    }
    /* Explicit theme-dark override — when app forces dark mode regardless of OS pref */
    html.theme-dark .studio-close-btn {
      background: linear-gradient(180deg, #3a3a3c 0%, #2c2c2e 100%);
      border: 0.5px solid rgba(0,0,0,0.5);
      color: #c7c7cc;
      text-shadow: 0 1px 0 rgba(0,0,0,0.5);
      box-shadow:
        0 1px 3px rgba(0,0,0,0.3),
        0 0.5px 1px rgba(0,0,0,0.2),
        inset 0 1px 0 rgba(255,255,255,0.08),
        inset 0 -1px 0 rgba(0,0,0,0.18),
        0 0 0 0.5px rgba(0,0,0,0.4);
    }
    html.theme-dark .studio-close-btn::after {
      background: linear-gradient(180deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0) 50%, rgba(0,0,0,0.06) 100%);
    }

    /* iPhone-shaped screenshot carousel — 5 slots, horizontal scroll, red skeu delete */
    .studio-ss-carousel {
      width: 100%;
      max-width: 420px;
      display: flex;
      gap: 12px;
      overflow-x: auto;
      overflow-y: visible;
      -webkit-overflow-scrolling: touch;
      padding: 14px 10px 14px;
      scroll-snap-type: x mandatory;
      scrollbar-width: none;
    }
    .studio-ss-carousel::-webkit-scrollbar { display: none; }
    .studio-ss-slot {
      position: relative;
      flex-shrink: 0;
      scroll-snap-align: center;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }
    .studio-ss-phone-frame {
      width: 82px;
      height: 168px;
      border-radius: 14px;
      border: 1.5px dashed #c8c8ce;
      background: rgba(0,0,0,0.015);
      overflow: hidden;
      position: relative;
      transition: border-color 0.15s, background 0.15s, transform 0.08s;
    }
    .studio-ss-slot:active .studio-ss-phone-frame { transform: scale(0.97); }
    .studio-ss-slot.filled .studio-ss-phone-frame {
      border: 2px solid #1d1d1f;
      background: #000;
      box-shadow:
        0 3px 10px rgba(0,0,0,0.18),
        0 1px 2px rgba(0,0,0,0.1),
        inset 0 0 0 0.5px rgba(255,255,255,0.08);
    }
    .studio-ss-slot.filled .studio-ss-phone-frame::before {
      content: '';
      position: absolute;
      top: 0; left: 50%; transform: translateX(-50%);
      width: 28px; height: 6px;
      background: #1d1d1f;
      border-radius: 0 0 5px 5px;
      z-index: 2;
    }
    .studio-ss-slot:not(.filled):hover .studio-ss-phone-frame {
      border-color: #5a9dff;
      background: rgba(90,157,255,0.05);
    }
    .studio-ss-empty {
      width: 100%; height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 6px;
      color: #86868b;
      font-size: 0.68rem;
      pointer-events: none;
    }
    .studio-ss-empty svg { width: 18px; height: 18px; opacity: 0.5; }
    .studio-ss-img {
      width: 100%; height: 100%;
      object-fit: cover;
      display: none;
      position: relative;
      z-index: 1;
    }
    .studio-ss-slot.filled .studio-ss-empty { display: none; }
    .studio-ss-slot.filled .studio-ss-img { display: block; }
    /* Red skeuomorphic delete circle — top-right */
    .studio-ss-delete {
      position: absolute;
      top: -6px; right: -6px;
      width: 20px; height: 20px;
      border-radius: 50%;
      background: linear-gradient(180deg, #ff6b6b 0%, #e8383f 100%);
      border: 0.5px solid rgba(130,0,0,0.5);
      box-shadow:
        0 1px 3px rgba(190,0,0,0.3),
        0 0.5px 1px rgba(0,0,0,0.15),
        inset 0 1px 0 rgba(255,255,255,0.4),
        inset 0 -1px 0 rgba(0,0,0,0.2),
        0 0 0 0.5px rgba(130,0,0,0.4);
      color: #fff;
      font-size: 13px;
      line-height: 1;
      font-weight: 400;
      cursor: pointer;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 0;
      z-index: 4;
      text-shadow: 0 1px 0 rgba(0,0,0,0.3);
      transition: transform 0.08s;
    }
    .studio-ss-slot.filled .studio-ss-delete { display: flex; }
    .studio-ss-delete:hover {
      box-shadow:
        0 1px 4px rgba(190,0,0,0.4),
        0 0.5px 1px rgba(0,0,0,0.15),
        inset 0 1px 0 rgba(255,255,255,0.45),
        inset 0 -1px 0 rgba(0,0,0,0.2),
        0 0 0 0.5px rgba(130,0,0,0.4);
    }
    .studio-ss-delete:active { transform: scale(0.9); }
    @media (prefers-color-scheme: dark) {
      :root:not(.theme-light) .studio-ss-phone-frame {
        border-color: #48484a;
        background: rgba(255,255,255,0.02);
      }
      :root:not(.theme-light) .studio-ss-empty { color: #6e6e73; }
    }
    html.theme-dark .studio-ss-phone-frame {
      border-color: #48484a;
      background: rgba(255,255,255,0.02);
    }
    html.theme-dark .studio-ss-empty { color: #6e6e73; }

    .studio-title { font-size: 1.5rem; font-weight: 700; margin: 12px 0 4px; color: #1d1d1f; }
    .studio-subtitle { font-size: 0.88rem; color: #86868b; margin: 0 0 24px; line-height: 1.4; }

    .studio-welcome-icons {
      display: flex; gap: 14px; justify-content: center; margin-bottom: 8px; margin-top: 8px;
    }
    .studio-welcome-icon {
      width: 52px; height: 52px; border-radius: 14px;
      display: flex; align-items: center; justify-content: center;
      color: #fff;
    }

    .studio-form-group {
      width: 100%; max-width: 380px; text-align: left; margin-bottom: 14px;
    }
    /* Grouped details section — wraps related fields under a single header.
       Matches studio-feature-grid depth so the whole form feels cohesive. */
    .studio-form-section {
      width: 100%; max-width: 420px; text-align: left;
      margin-bottom: 16px;
      background: linear-gradient(180deg, #FFFFFF 0%, #FCFCFD 100%);
      border: 0.5px solid rgba(0,0,0,0.07);
      border-radius: 14px;
      padding: 14px 16px 6px;
      box-shadow:
        inset 0 1px 3px rgba(0,0,0,0.10),
        inset 0 -1px 3px rgba(0,0,0,0.05),
        inset 0 0 0 0.5px rgba(0,0,0,0.08),
        0 2px 8px rgba(0,0,0,0.06),
        0 0.5px 0 rgba(255,255,255,0.8);
    }
    .studio-form-section-title {
      font-size: 0.72rem; font-weight: 700; color: #6e6e73;
      text-transform: uppercase; letter-spacing: 0.04em;
      margin: 0 0 10px; padding-left: 2px;
    }
    .studio-form-section .studio-form-group {
      width: 100%; max-width: none; margin-bottom: 12px;
    }
    .studio-form-section .studio-form-group:last-child { margin-bottom: 6px; }
    .theme-dark .studio-form-section {
      background: linear-gradient(180deg, #242426 0%, #1f1f21 100%);
      border-color: rgba(255,255,255,0.06);
      box-shadow:
        inset 0 1px 3px rgba(0,0,0,0.4),
        inset 0 -1px 3px rgba(0,0,0,0.2),
        inset 0 0 0 0.5px rgba(0,0,0,0.3),
        0 2px 8px rgba(0,0,0,0.25),
        0 0.5px 0 rgba(255,255,255,0.04);
    }
    .theme-dark .studio-form-section-title { color: #98989f; }
    .studio-form-label {
      font-size: 0.78rem; font-weight: 600; color: #6e6e73;
      margin-bottom: 5px; display: block;
    }
    /* Recessed skeuomorphic form input — matches .studio-desc-tap tap-bar family.
       Same 48px height, solid border with inset shadows for carved-in effect,
       same white card background so fields line up with profile/app details bars. */
    .studio-form-input {
      width: 100%;
      padding: 10px 14px;
      border-radius: 12px;
      border: 1.5px dashed rgba(0,0,0,0.15);
      font-size: 0.86rem;
      font-weight: 500;
      background: transparent;
      color: #1d1d1f;
      outline: none;
      transition: border-color 0.2s, background 0.2s;
      box-sizing: border-box;
      min-height: 44px;
      -webkit-appearance: none;
      appearance: none;
      font-family: inherit;
      box-shadow: none;
    }
    textarea.studio-form-input { min-height: 96px; line-height: 1.45; padding: 12px 14px; }
    select.studio-form-input {
      min-height: 44px;
      padding: 0 38px 0 14px;
      line-height: 42px;
      cursor: pointer;
      background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5L6 6.5L11 1.5' stroke='%238e8e93' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>");
      background-repeat: no-repeat;
      background-position: right 14px center;
      background-size: 12px 8px;
    }
    .studio-form-input::placeholder { color: #86868b; font-weight: 400; font-style: italic; }
    .studio-form-input:hover { border-color: #8ab4ff; background: rgba(52,120,246,0.03); }
    .studio-form-input:focus {
      border-color: #3478F6;
      border-style: dashed;
      box-shadow: none;
      background: rgba(52,120,246,0.03);
    }
    select.studio-form-input:focus {
      background-color: rgba(52,120,246,0.03);
      background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5L6 6.5L11 1.5' stroke='%233478F6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>");
      background-repeat: no-repeat;
      background-position: right 14px center;
      background-size: 12px 8px;
      outline: none;
    }
    .studio-form-input[readonly] { color: #86868b; cursor: default; }

    /* Domain row — same dashed-bar look + 48px height as other fields */
    .studio-domain-row {
      display: flex; align-items: center;
      border-radius: 12px;
      border: 1.5px dashed rgba(0,0,0,0.15);
      background: transparent;
      overflow: hidden; min-height: 44px;
      transition: border-color 0.2s;
      box-sizing: border-box;
    }
    .studio-domain-row:hover { border-color: #8ab4ff; background: rgba(52,120,246,0.03); }
    .studio-domain-row:focus-within { border-color: #3478F6; }
    .studio-domain-prefix {
      padding: 10px 2px 10px 14px; font-size: 0.86rem; color: #86868b;
      white-space: nowrap; user-select: none;
    }
    .studio-domain-input {
      flex: 1; padding: 10px 14px 10px 0; border: none; background: transparent;
      font-size: 0.86rem; color: #1d1d1f; outline: none; min-height: 46px;
      font-family: inherit;
    }
    .studio-domain-input::placeholder { color: #86868b; font-style: italic; }

    .studio-feature-grid {
      display: flex; flex-direction: column;
      width: 100%; max-width: 420px; margin-top: 0px;
      border-radius: 14px; overflow: hidden;
      background: linear-gradient(180deg, #FFFFFF 0%, #FDFDFE 100%);
      border: none;
      box-shadow:
        inset 0 0 4px rgba(0,0,0,0.14),
        inset 1px 0 2px rgba(0,0,0,0.04),
        inset -1px 0 2px rgba(0,0,0,0.04),
        inset 0 0.5px 1px rgba(0,0,0,0.07),
        inset 0 -0.5px 1px rgba(0,0,0,0.05),
        0 2px 8px rgba(0,0,0,0.05),
        0 0.5px 0 rgba(255,255,255,1);
    }
    #prof-sub-active-list,
    #prof-sub-detail-view .studio-feature-grid {
      max-width: 100%;
    }
    .studio-feature-card {
      background: transparent; border-radius: 0; padding: 14px 16px;
      display: flex; flex-direction: row; align-items: center; text-align: left;
      cursor: pointer; border: none;
      border-bottom: 1px solid rgba(0,0,0,0.08);
      box-shadow: 0 1px 0 rgba(255,255,255,0.95);
      transition: background 0.18s ease-out, transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
      gap: 14px;
      transform: translate3d(0, 0, 0);
      -webkit-tap-highlight-color: transparent;
    }
    .studio-feature-card:last-child { border-bottom: none; box-shadow: none; }
    @media (hover: hover) {
      .studio-feature-card:hover {
        background: rgba(0,0,0,0.03);
      }
    }
    .studio-feature-card:active { background: rgba(0,0,0,0.05); transform: scale(0.985); transition-duration: 0.08s; }
    @media (hover: none) {
      .studio-feature-card:active { background: rgba(0,0,0,0.05); transform: scale(0.985); transition-duration: 0.08s; }
    }
    .studio-feature-icon {
      width: 38px; height: 38px; border-radius: 10px;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0; color: #fff;
      margin-bottom: 0;
      position: relative; overflow: hidden;
      box-shadow:
        0 1px 2px rgba(0,0,0,0.08),
        0 0.5px 1px rgba(0,0,0,0.04),
        inset 0 1px 0 rgba(255,255,255,0.2),
        inset 0 -1px 0 rgba(0,0,0,0.08);
    }
    .studio-feature-icon::before {
      content: ''; position: absolute; left: 1px; right: 1px; top: 1px;
      height: 50%; border-radius: 9px 9px 6px 6px;
      background: linear-gradient(180deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,.04) 40%, transparent 100%);
      pointer-events: none; z-index: 1;
    }
    .theme-dark .studio-feature-icon::before {
      background: linear-gradient(180deg, rgba(255,255,255,.3) 0%, rgba(255,255,255,.1) 40%, transparent 100%);
    }
    .studio-feature-icon svg { width: 20px; height: 20px; }
    .studio-feature-copy { flex: 1; min-width: 0; }
    .studio-feature-title { font-size: 0.92rem; font-weight: 600; color: #1d1d1f; margin: 0 0 1px; }
    .studio-feature-desc { font-size: 0.78rem; color: #86868b; margin: 0; line-height: 1.3; }
    .studio-feature-arrow {
      flex-shrink: 0; color: #c4c4c9;
    }
    .studio-feature-arrow svg { width: 16px; height: 16px; stroke-width: 2.2; }
    .studio-feature-missing { flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
    .studio-feature-check {
      flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%;
      background: #34C759; display: flex; align-items: center; justify-content: center;
      box-shadow: 0 1px 3px rgba(52,199,89,0.3), inset 0 1px 0 rgba(255,255,255,0.2);
    }
    .studio-feature-check svg { width: 14px; height: 14px; }
    .studio-build-separator {
      width: 100%; max-width: 420px; margin: 16px 0 4px;
      font-size: 0.72rem; font-weight: 600; color: #86868b;
      text-transform: uppercase; letter-spacing: 0.04em;
      padding-left: 4px;
    }

    .studio-info-card {
      background: #f5f5f7; border-radius: 14px; padding: 18px 20px;
      width: 100%; text-align: left; margin-bottom: 14px;
    }
    .studio-info-title { font-size: 0.88rem; font-weight: 600; color: #1d1d1f; margin: 0 0 4px; }
    .studio-info-desc { font-size: 0.82rem; color: #6e6e73; margin: 0; line-height: 1.4; }

    #studio-dash-stats {
      width: 100%;
      display: flex; flex-direction: column; align-items: center;
    }
    #studio-dash-pubs {
      width: 100%;
      display: flex; flex-direction: column; align-items: center;
    }
    /* Bird's-eye Publications list — a single skeu card containing all published items */
    .studio-pub-list {
      width: 100%; margin: 0 0 10px;
      background: linear-gradient(180deg, #ffffff 0%, #f5f5f8 100%);
      border: 0.5px solid rgba(0,0,0,0.06);
      border-radius: 14px; overflow: hidden;
      box-shadow:
        0 1px 2px rgba(0,0,0,0.04),
        0 0.5px 1px rgba(0,0,0,0.03),
        inset 0 1px 0 rgba(255,255,255,1),
        inset 0 -1px 0 rgba(0,0,0,0.03);
    }
    .studio-pub-list-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: 10px 14px 8px;
      font-size: 0.68rem; font-weight: 700; letter-spacing: 0.05em;
      text-transform: uppercase; color: #86868b;
      border-bottom: 0.5px solid rgba(0,0,0,0.06);
    }
    .studio-pub-list-count {
      font-size: 0.68rem; font-weight: 700; letter-spacing: 0;
      padding: 1px 7px; border-radius: 8px;
      background: rgba(0,0,0,0.05); color: #6e6e73; text-transform: none;
    }
    .studio-pub-item {
      display: flex; align-items: center; gap: 10px;
      padding: 9px 12px;
      border-bottom: 0.5px solid rgba(0,0,0,0.05);
      cursor: pointer; transition: background 0.15s;
      text-align: left;
      -webkit-tap-highlight-color: transparent;
    }
    .studio-pub-item:last-child { border-bottom: none; }
    .studio-pub-item:hover { background: rgba(0,0,0,0.025); }
    .studio-pub-item:active { background: rgba(0,0,0,0.05); }
    .studio-pub-icon {
      width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      color: #fff; font-weight: 700; font-size: 0.78rem; overflow: hidden;
      position: relative;
    }
    .studio-pub-icon::before {
      content: ''; position: absolute; left: 1px; right: 1px; top: 1px;
      height: 50%; border-radius: 7px 7px 4px 4px;
      background: linear-gradient(180deg, rgba(255,255,255,.3) 0%, rgba(255,255,255,.08) 40%, transparent 100%);
      pointer-events: none;
    }
    .studio-pub-icon img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }
    .studio-pub-copy { flex: 1; min-width: 0; text-align: left; }
    .studio-pub-name {
      font-size: 0.82rem; font-weight: 600; color: #1d1d1f;
      margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      letter-spacing: -0.005em; text-align: left;
    }
    .studio-pub-meta {
      display: flex; align-items: center; gap: 6px;
      font-size: 0.68rem; color: #86868b; margin-top: 2px;
      text-align: left;
    }
    .studio-pub-type-badge {
      font-size: 0.56rem; font-weight: 700; letter-spacing: 0.04em;
      padding: 1px 5px; border-radius: 4px; text-transform: uppercase;
      background: rgba(0,122,255,0.1); color: #0062d1;
      flex-shrink: 0;
    }
    .studio-pub-type-badge[data-type="book"] { background: rgba(188,140,255,0.14); color: #7f44d6; }
    .studio-pub-type-badge[data-type="podcast"] { background: rgba(255,149,0,0.14); color: #c66a00; }
    .studio-pub-type-badge[data-type="video"] { background: rgba(255,59,48,0.12); color: #c62c21; }
    .studio-pub-type-badge[data-type="course"] { background: rgba(52,199,89,0.14); color: #1c7e35; }
    .studio-pub-type-badge[data-type="newsletter"] { background: rgba(88,86,214,0.14); color: #3b3896; }
    .studio-pub-type-badge[data-type="product"] { background: rgba(255,149,0,0.14); color: #c66a00; }
    .studio-pub-metric { font-weight: 600; color: #3c3c3e; font-variant-numeric: tabular-nums; }
    .studio-pub-arrow { flex-shrink: 0; color: #c4c4c9; }
    .studio-pub-arrow svg { width: 14px; height: 14px; stroke-width: 2.4; }
    .studio-pub-empty {
      padding: 26px 14px; text-align: center;
      font-size: 0.78rem; color: #86868b;
    }

    .studio-stat-row {
      display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px;
      width: 100%; margin-bottom: 10px;
    }
    .studio-stat-card {
      background: linear-gradient(180deg, #ffffff 0%, #f5f5f8 100%);
      border: 0.5px solid rgba(0,0,0,0.06);
      border-radius: 16px;
      padding: 20px 10px 16px; text-align: center;
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      position: relative; min-height: 92px; overflow: hidden;
      box-shadow:
        0 1px 2px rgba(0,0,0,0.04),
        0 0.5px 1px rgba(0,0,0,0.03),
        inset 0 1px 0 rgba(255,255,255,1),
        inset 0 -1px 0 rgba(0,0,0,0.03);
      transition: transform 0.12s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.15s;
    }
    .studio-stat-card::before {
      content: ''; position: absolute; left: 12%; right: 12%; top: 0.5px;
      height: 1px; border-radius: 1px; pointer-events: none;
      background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.85) 50%, rgba(255,255,255,0) 100%);
    }
    .studio-stat-value {
      font-size: 1.55rem; font-weight: 700; color: #1d1d1f; margin: 0; line-height: 1.15;
      letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
    }
    .studio-stat-label {
      font-size: 0.72rem; font-weight: 500; color: #86868b; margin: 6px 0 0; line-height: 1.2;
      letter-spacing: 0.01em;
    }

    /* Dashboard tappable stat cards — lift on hover, press down on active */
    .studio-stat-tappable {
      cursor: pointer; transition: transform 0.12s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.18s;
    }
    .studio-stat-tappable:hover {
      box-shadow:
        0 2px 6px rgba(0,0,0,0.07),
        0 1px 2px rgba(0,0,0,0.04),
        inset 0 1px 0 rgba(255,255,255,1),
        inset 0 -1px 0 rgba(0,0,0,0.04);
    }
    .studio-stat-tappable:active { transform: scale(0.97); }
    .studio-stat-chevron {
      position: absolute; right: 9px; top: 50%; transform: translateY(-50%);
      color: #c7c7cc; font-size: 0.75rem; font-weight: 500;
    }
    .theme-dark .studio-stat-chevron { color: #636366; }

    /* Highlighted (primary) stat — for emphasis on key metrics */
    .studio-stat-card-primary {
      background: linear-gradient(180deg, #f0f6ff 0%, #e4eeff 100%);
      border-color: rgba(0,122,255,0.18);
    }
    .studio-stat-card-primary .studio-stat-value { color: #003d8f; }
    .studio-stat-card-primary .studio-stat-label { color: #4a7ac2; }

    /* ─── Range selector: segmented control (7D · 28D · 90D · Lifetime) ─── */
    .studio-range-seg {
      display: flex; align-items: center; gap: 2px;
      width: 100%; margin: 0 0 10px;
      padding: 3px; border-radius: 10px;
      background: linear-gradient(180deg, #ebebf0 0%, #e0e0e6 100%);
      border: 0.5px solid rgba(0,0,0,0.08);
      box-shadow: inset 0 1px 2px rgba(0,0,0,0.06), inset 0 0 0 0.5px rgba(0,0,0,0.04);
    }
    .studio-range-btn {
      flex: 1; padding: 6px 4px;
      font-size: 0.72rem; font-weight: 600; letter-spacing: 0.01em;
      color: #6e6e73; background: transparent; border: none; border-radius: 7px;
      cursor: pointer; transition: all 0.18s cubic-bezier(0.16,1,0.3,1);
      font-variant-numeric: tabular-nums; -webkit-tap-highlight-color: transparent;
    }
    .studio-range-btn:hover { color: #1d1d1f; }
    .studio-range-btn.sel {
      background: linear-gradient(180deg, #ffffff 0%, #f2f2f6 100%);
      color: #1d1d1f; font-weight: 700;
      box-shadow:
        0 1px 3px rgba(0,0,0,0.08),
        0 0.5px 1px rgba(0,0,0,0.04),
        inset 0 1px 0 rgba(255,255,255,1),
        inset 0 -1px 0 rgba(0,0,0,0.04);
    }

    /* ─── Hero tiles: big metric + delta pill + inline sparkline ─── */
    .studio-hero-row {
      display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px;
      width: 100%; margin-bottom: 10px;
    }
    .studio-hero-tile {
      position: relative; overflow: hidden;
      background: linear-gradient(180deg, #ffffff 0%, #f5f5f8 100%);
      border: 0.5px solid rgba(0,0,0,0.06);
      border-radius: 16px; padding: 12px 12px 10px;
      min-height: 104px; display: flex; flex-direction: column; justify-content: space-between;
      box-shadow:
        0 1px 2px rgba(0,0,0,0.04),
        0 0.5px 1px rgba(0,0,0,0.03),
        inset 0 1px 0 rgba(255,255,255,1),
        inset 0 -1px 0 rgba(0,0,0,0.03);
      transition: transform 0.12s cubic-bezier(0.16,1,0.3,1), box-shadow 0.18s;
      cursor: default;
    }
    .studio-hero-tile::before {
      content: ''; position: absolute; left: 10%; right: 10%; top: 0.5px; height: 1px;
      pointer-events: none;
      background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.85) 50%, rgba(255,255,255,0) 100%);
    }
    .studio-hero-tile.tappable { cursor: pointer; }
    .studio-hero-tile.tappable:hover {
      box-shadow:
        0 2px 8px rgba(0,0,0,0.08),
        0 1px 2px rgba(0,0,0,0.05),
        inset 0 1px 0 rgba(255,255,255,1),
        inset 0 -1px 0 rgba(0,0,0,0.04);
    }
    .studio-hero-tile.tappable:active { transform: scale(0.98); }
    .studio-hero-label {
      font-size: 0.6rem; font-weight: 700; letter-spacing: 0.06em;
      color: #86868b; text-transform: uppercase; margin: 0;
    }
    .studio-hero-value {
      font-size: 1.55rem; font-weight: 700; color: #1d1d1f; margin: 2px 0 0; line-height: 1.1;
      letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .studio-hero-bottom {
      display: flex; align-items: flex-end; justify-content: space-between; gap: 6px; margin-top: 6px;
    }
    .studio-hero-spark { flex: 1; height: 22px; min-width: 0; }
    .studio-hero-spark svg { width: 100%; height: 100%; display: block; overflow: visible; }
    .studio-hero-caption {
      font-size: 0.64rem; color: #86868b; font-weight: 500;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }

    /* Delta pills (green pos / red neg / muted neutral) */
    .studio-delta {
      display: inline-flex; align-items: center; gap: 2px;
      font-size: 0.6rem; font-weight: 700; font-variant-numeric: tabular-nums;
      padding: 2px 6px 2px 5px; border-radius: 999px; line-height: 1; letter-spacing: 0;
      flex-shrink: 0;
    }
    .studio-delta-pos {
      background: rgba(48,209,88,0.14); color: #1c7e35;
      border: 0.5px solid rgba(48,209,88,0.22);
    }
    .studio-delta-neg {
      background: rgba(255,69,58,0.12); color: #c62c21;
      border: 0.5px solid rgba(255,69,58,0.2);
    }
    .studio-delta-neutral {
      background: rgba(0,0,0,0.05); color: #6e6e73;
      border: 0.5px solid rgba(0,0,0,0.06);
    }
    .studio-delta svg { width: 8px; height: 8px; stroke-width: 3; }

    /* Sparkline colors */
    .studio-spark-line { fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
    .studio-spark-area { opacity: 0.14; }
    .studio-spark-blue { stroke: #0A84FF; }
    .studio-spark-blue-fill { fill: #0A84FF; }
    .studio-spark-green { stroke: #30D158; }
    .studio-spark-green-fill { fill: #30D158; }
    .studio-spark-purple { stroke: #BF5AF2; }
    .studio-spark-purple-fill { fill: #BF5AF2; }

    /* Per-publication row metric (enhanced) */
    .studio-pub-row-metric {
      display: flex; align-items: center; gap: 8px; flex-shrink: 0;
    }
    .studio-pub-row-metric-value {
      font-size: 0.82rem; font-weight: 700; color: #1d1d1f; line-height: 1;
      font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
    }
    .studio-pub-row-metric-unit {
      font-size: 0.6rem; font-weight: 500; color: #86868b; text-transform: uppercase;
      letter-spacing: 0.05em; margin-top: 2px;
    }
    .studio-pub-row-spark { width: 48px; height: 20px; flex-shrink: 0; }
    .studio-pub-row-spark svg { width: 100%; height: 100%; display: block; overflow: visible; }

    /* ─── Per-pub detail: personalized 3-tile hero ─── */
    .studio-detail-hero-head {
      display: flex; align-items: center; gap: 12px; width: 100%; max-width: 420px; margin: 4px 0 12px;
    }
    .studio-detail-hero-meta {
      flex: 1; min-width: 0; text-align: left;
    }
    .studio-detail-hero-name {
      font-size: 1.02rem; font-weight: 700; color: #1d1d1f; margin: 0;
      letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .studio-detail-hero-sub {
      font-size: 0.7rem; color: #86868b; margin: 2px 0 0; font-weight: 500;
    }
    .studio-detail-tile-row {
      display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px;
      width: 100%; max-width: 420px; margin-bottom: 10px;
    }

    /* Row action buttons (Open / Edit / Delete) — kept from earlier dashboard iteration for reuse */
    .studio-dash-row-actions { display: flex; align-items: center; gap: 7px; }
    .studio-dash-row-action {
      flex: 1; min-height: 34px; border-radius: 10px;
      background: linear-gradient(180deg, #ffffff 0%, #ebebf0 100%);
      border: 0.5px solid rgba(0,0,0,0.1); color: #1d1d1f;
      display: inline-flex; align-items: center; justify-content: center; gap: 6px;
      font-size: 0.76rem; font-weight: 600; letter-spacing: -0.005em;
      cursor: pointer;
      box-shadow:
        0 1px 2px rgba(0,0,0,0.06),
        0 0.5px 1px rgba(0,0,0,0.04),
        inset 0 1px 0 rgba(255,255,255,0.9),
        inset 0 -1px 1px rgba(0,0,0,0.04);
      transition: transform 0.12s cubic-bezier(0.16,1,0.3,1);
      -webkit-tap-highlight-color: transparent; position: relative; overflow: hidden;
    }
    .studio-dash-row-action:active { transform: scale(0.97); }
    .studio-dash-row-action svg { width: 13px; height: 13px; stroke-width: 2; }
    .studio-dash-row-action-del { color: #FF3B30; }
    .studio-dash-row-action-open {
      background: linear-gradient(180deg, #3a8fff 0%, #0A84FF 55%, #006ae0 100%);
      color: #fff; border-color: rgba(0,100,210,0.45);
      box-shadow:
        0 2px 6px rgba(10,132,255,0.22),
        0 0.5px 1px rgba(0,0,0,0.08),
        inset 0 1px 0 rgba(255,255,255,0.4),
        inset 0 -1px 0 rgba(0,0,0,0.15),
        0 0 0 0.5px rgba(0,100,210,0.4);
    }

    /* ─── 3-level drill-down dashboard: unified list card ─── */
    /* Total Revenue becomes the first row of the list — no separate pills/cards */
    .studio-dash-total-row {
      display: flex; align-items: center; justify-content: space-between;
      padding: 16px 16px 14px; gap: 12px;
      border-bottom: 1px solid rgba(0,0,0,0.08);
      background: transparent;
    }
    .studio-dash-total-row-left { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
    .studio-dash-total-row-label {
      font-size: 0.6rem; font-weight: 700; letter-spacing: 0.08em;
      color: #86868b; text-transform: uppercase; margin: 0;
    }
    .studio-dash-total-row-sub {
      font-size: 0.78rem; font-weight: 500; color: #6e6e73; margin: 0;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .studio-dash-total-row-value {
      font-size: 1.5rem; font-weight: 700; color: #1c7e35; margin: 0;
      letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
      flex-shrink: 0;
    }

    /* Green revenue amount on right side of list rows */
    .studio-dash-row-revenue {
      flex-shrink: 0;
      font-size: 0.88rem; font-weight: 700; color: #1c7e35;
      letter-spacing: -0.01em; font-variant-numeric: tabular-nums;
      margin-right: 2px;
    }
    .studio-dash-row-revenue.is-zero { color: #c4c4c9; font-weight: 500; }

    /* Inline row separator for section breaks inside a list (e.g. stats → transactions) */
    .studio-dash-row-sep {
      padding: 10px 16px 6px;
      font-size: 0.58rem; font-weight: 700; letter-spacing: 0.08em;
      color: #86868b; text-transform: uppercase;
      background: rgba(0,0,0,0.025);
      border-bottom: 1px solid rgba(0,0,0,0.08);
      text-align: left;
    }

    /* Simple label/value stat row (used in pub detail view inside unified list) */
    .studio-dash-stat-row {
      display: flex; align-items: center; justify-content: space-between; gap: 12px;
      padding: 12px 16px;
      border-bottom: 1px solid rgba(0,0,0,0.08);
    }
    .studio-dash-stat-row:last-child { border-bottom: none; }
    .studio-dash-stat-row-label {
      font-size: 0.84rem; font-weight: 500; color: #3c3c3e; margin: 0;
    }
    .studio-dash-stat-row-value {
      font-size: 0.92rem; font-weight: 700; color: #1d1d1f; margin: 0;
      font-variant-numeric: tabular-nums; letter-spacing: -0.01em; flex-shrink: 0;
    }
    .studio-dash-stat-row-value.is-money { color: #1c7e35; }

    /* Transaction row — 2-line left (email + date), green amount on right */
    .studio-dash-tx-row {
      display: flex; align-items: center; justify-content: space-between; gap: 12px;
      padding: 11px 16px;
      border-bottom: 1px solid rgba(0,0,0,0.08);
    }
    .studio-dash-tx-row:last-child { border-bottom: none; }
    .studio-dash-tx-left { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
    .studio-dash-tx-email {
      font-size: 0.82rem; font-weight: 600; color: #1d1d1f; margin: 0;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -0.005em;
    }
    .studio-dash-tx-date {
      font-size: 0.68rem; font-weight: 500; color: #86868b; margin: 0;
      font-variant-numeric: tabular-nums;
    }
    .studio-dash-tx-amount {
      flex-shrink: 0;
      font-size: 0.92rem; font-weight: 700; color: #1c7e35;
      font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
    }
    .studio-dash-tx-amount.is-refunded { color: #c4c4c9; text-decoration: line-through; font-weight: 500; }
    .studio-dash-tx-empty {
      padding: 22px 16px; text-align: center;
      font-size: 0.78rem; color: #86868b;
    }

    /* User/customer list row (installers, subscribers, customers) */
    .studio-dash-user-row {
      display: flex; align-items: center; gap: 12px;
      padding: 10px 16px;
      border-bottom: 1px solid rgba(0,0,0,0.08);
    }
    .studio-dash-user-row:last-child { border-bottom: none; }
    .studio-dash-user-avatar {
      flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
      background: linear-gradient(145deg, #8ab4f8, #4285f4);
      display: flex; align-items: center; justify-content: center;
      color: #fff; font-size: 0.7rem; font-weight: 700;
      position: relative;
      box-shadow:
        0 1px 2px rgba(0,0,0,0.08),
        0 0.5px 1px rgba(0,0,0,0.04),
        inset 0 1px 0 rgba(255,255,255,0.3),
        inset 0 -1px 0 rgba(0,0,0,0.1);
    }
    .studio-dash-user-avatar::after {
      content: ''; position: absolute; inset: 0; border-radius: inherit;
      background: linear-gradient(180deg, rgba(255,255,255,0.2) 0%, transparent 50%, rgba(0,0,0,0.08) 100%);
      pointer-events: none; mix-blend-mode: overlay;
    }
    img.studio-dash-user-avatar {
      background: #2c2c2e; object-fit: cover;
    }
    .studio-dash-user-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; text-align: left; }
    .studio-dash-user-email {
      font-size: 0.8rem; font-weight: 600; color: #1d1d1f; margin: 0;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -0.005em;
    }
    .studio-dash-user-meta {
      font-size: 0.66rem; font-weight: 500; color: #86868b; margin: 0;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .studio-dash-user-action {
      flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px;
      padding: 5px 10px; border-radius: 999px;
      font-size: 0.7rem; font-weight: 600; color: #007AFF;
      background: linear-gradient(180deg, #ffffff 0%, #f2f2f6 100%);
      border: 0.5px solid rgba(0,0,0,0.08); cursor: pointer;
      box-shadow:
        0 1px 2px rgba(0,0,0,0.05),
        inset 0 1px 0 rgba(255,255,255,1),
        inset 0 -1px 0 rgba(0,0,0,0.04);
      transition: transform 0.12s cubic-bezier(0.16,1,0.3,1);
      -webkit-tap-highlight-color: transparent;
      text-decoration: none;
    }
    .studio-dash-user-action:active { transform: scale(0.94); }
    .studio-dash-user-action.is-ship { color: #FF9500; }

    /* ─── Ship submit button — skeuomorphic (colored/orange) ─── */
    .studio-ship-submit {
      width: 100%; margin-top: 10px; padding: 12px; border-radius: 12px;
      border: 0.5px solid rgba(0,0,0,0.08); cursor: pointer;
      font-size: 0.85rem; font-weight: 700; color: #fff; letter-spacing: -0.01em;
      background: linear-gradient(180deg, #FFB340 0%, #FF9F0A 50%, #D4820A 100%);
      box-shadow:
        0 2px 6px rgba(212,130,10,0.22),
        0 1px 2px rgba(0,0,0,0.08),
        inset 0 1px 0 rgba(255,255,255,0.25),
        inset 0 -1px 0 rgba(0,0,0,0.1);
      text-shadow: 0 1px 1px rgba(0,0,0,0.15);
      transition: transform 0.12s cubic-bezier(0.16,1,0.3,1);
      -webkit-tap-highlight-color: transparent;
    }
    .studio-ship-submit:active { transform: scale(0.97); }
    .studio-ship-submit:disabled { opacity: 0.6; transform: none; cursor: default; }

    /* ─── Product user row — clickable with shipping label + arrow ─── */
    .studio-dash-user-row.is-shippable {
      cursor: pointer; -webkit-tap-highlight-color: transparent;
      transition: transform 0.12s cubic-bezier(0.16,1,0.3,1);
    }
    .studio-dash-user-row.is-shippable:active { transform: scale(0.98); }
    .studio-dash-ship-right {
      flex-shrink: 0; display: flex; align-items: center; gap: 4px; margin-left: auto;
    }
    .studio-dash-ship-label {
      font-size: 0.65rem; font-weight: 600;
      color: #FF9500; text-transform: uppercase; letter-spacing: 0.3px;
    }
    .studio-dash-ship-arrow {
      color: #c4c4c9; display: flex; align-items: center;
    }
    .studio-dash-ship-arrow svg { width: 14px; height: 14px; stroke-width: 2.2; }

    /* ─── Dashboard search (inline list-row style) ─── */
    .studio-dash-search-wrap {
      display: flex; align-items: center; gap: 8px;
      padding: 7px 10px; border-radius: 10px;
      background: rgba(0,0,0,0.25);
      border: 0.5px solid rgba(255,255,255,0.08);
      box-shadow: inset 0 1px 3px rgba(0,0,0,0.35), inset 0 0 0 0.5px rgba(0,0,0,0.2);
    }
    .studio-dash-search-row {
      border-bottom: 0.5px solid rgba(255,255,255,0.06) !important;
      cursor: text !important;
    }
    .studio-dash-search-row:active {
      transform: none !important; background: transparent !important;
    }
    .studio-dash-search-row:hover {
      background: transparent !important;
    }
    .studio-dash-search-row .studio-dash-search-wrap {
      background: rgba(0,0,0,0.22); border: 0.5px solid rgba(255,255,255,0.05);
      box-shadow: inset 0 1px 3px rgba(0,0,0,0.28), inset 0 0 0 0.5px rgba(0,0,0,0.18);
      border-radius: 10px; padding: 9px 12px; margin: 6px 10px;
      cursor: text;
    }
    .studio-dash-search-input {
      flex: 1; border: none; background: transparent;
      color: #fff; font-size: 0.82rem; outline: none;
      padding: 0; margin: 0; -webkit-appearance: none; appearance: none;
    }
    .studio-dash-search-input::placeholder {
      color: rgba(255,255,255,0.3);
    }
    @media (prefers-color-scheme: light) {
      .studio-dash-search-wrap {
        background: linear-gradient(180deg, #F3F3F6 0%, #EBEBF0 100%);
        border-color: rgba(0,0,0,0.12);
        box-shadow:
          inset 0 1px 2px rgba(0,0,0,0.08),
          inset 0 0 0 0.5px rgba(0,0,0,0.05),
          0 0.5px 0 rgba(255,255,255,0.9);
      }
      .studio-dash-search-row { border-bottom-color: rgba(0,0,0,0.08) !important; }
      .studio-dash-search-row .studio-dash-search-wrap {
        background: linear-gradient(180deg, #F3F3F6 0%, #EBEBF0 100%) !important;
        border: 0.5px solid rgba(0,0,0,0.12) !important;
        box-shadow:
          inset 0 1px 2px rgba(0,0,0,0.08),
          inset 0 0 0 0.5px rgba(0,0,0,0.05),
          0 0.5px 0 rgba(255,255,255,0.9) !important;
        border-radius: 10px !important; margin: 8px 12px !important; padding: 9px 12px !important;
      }
      .studio-dash-search-input { color: #1d1d1f; }
      .studio-dash-search-input::placeholder { color: rgba(0,0,0,0.35); }
      .studio-dash-search-wrap svg { color: rgba(0,0,0,0.4) !important; }
    }

    /* ─── Stacked single-metric card (reused for drill-down detail views) ─── */
    .studio-metric-stack { display: flex; flex-direction: column; gap: 10px; width: 100%; }
    .studio-metric-card {
      position: relative; overflow: hidden;
      background: linear-gradient(180deg, #ffffff 0%, #f5f5f8 100%);
      border: 0.5px solid rgba(0,0,0,0.06);
      border-radius: 16px; padding: 13px 16px 14px;
      box-shadow:
        0 1px 2px rgba(0,0,0,0.04),
        0 0.5px 1px rgba(0,0,0,0.03),
        inset 0 1px 0 rgba(255,255,255,1),
        inset 0 -1px 0 rgba(0,0,0,0.03);
      cursor: default; transition: transform 0.12s cubic-bezier(0.16,1,0.3,1), box-shadow 0.18s;
    }
    .studio-metric-card::before {
      content: ''; position: absolute; left: 10%; right: 10%; top: 0.5px; height: 1px; pointer-events: none;
      background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.85) 50%, rgba(255,255,255,0) 100%);
    }
    .studio-metric-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
    .studio-metric-icon {
      width: 22px; height: 22px; border-radius: 7px; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      color: #fff; position: relative; overflow: hidden;
    }
    .studio-metric-icon::before {
      content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
      background: linear-gradient(180deg, rgba(255,255,255,.3) 0%, rgba(255,255,255,.06) 45%, transparent 100%);
    }
    .studio-metric-icon svg { width: 12px; height: 12px; stroke-width: 2.6; position: relative; z-index: 1; }
    .studio-metric-icon-blue { background: linear-gradient(135deg, #3a8fff 0%, #0A84FF 100%); }
    .studio-metric-icon-green { background: linear-gradient(135deg, #5de37c 0%, #30D158 100%); }
    .studio-metric-icon-purple { background: linear-gradient(135deg, #BF5AF2 0%, #8944ab 100%); }
    .studio-metric-icon-orange { background: linear-gradient(135deg, #ffb366 0%, #ff9500 100%); }
    .studio-metric-icon-red { background: linear-gradient(135deg, #ff7368 0%, #ff3b30 100%); }
    .studio-metric-icon-gray { background: linear-gradient(135deg, #a1a1a6 0%, #6e6e73 100%); }
    .studio-metric-label {
      font-size: 0.8rem; font-weight: 600; color: #1d1d1f; flex: 1; min-width: 0;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -0.005em;
    }
    .studio-metric-time {
      font-size: 0.66rem; font-weight: 500; color: #86868b; flex-shrink: 0;
      font-variant-numeric: tabular-nums;
    }
    .studio-metric-value {
      font-size: 1.95rem; font-weight: 700; color: #1d1d1f; margin: 0; line-height: 1.05;
      letter-spacing: -0.025em; font-variant-numeric: tabular-nums;
      display: flex; align-items: baseline; gap: 0;
    }
    .studio-metric-unit {
      font-size: 0.78rem; font-weight: 500; color: #86868b; margin-left: 6px;
      letter-spacing: 0; line-height: 1;
    }
    .studio-metric-foot {
      display: flex; align-items: center; gap: 8px; margin-top: 6px;
      font-size: 0.7rem; color: #86868b; font-weight: 500;
    }
    .studio-metric-empty {
      padding: 22px 14px; text-align: center;
      font-size: 0.78rem; color: #86868b;
    }

    /* 30-day trend chart card */
    .studio-trend-card {
      width: 100%; max-width: 420px; margin: 0 0 12px;
      background: linear-gradient(180deg, #ffffff 0%, #f5f5f8 100%);
      border: 0.5px solid rgba(0,0,0,0.06); border-radius: 14px; padding: 12px 14px 10px;
      box-shadow:
        0 1px 2px rgba(0,0,0,0.04),
        0 0.5px 1px rgba(0,0,0,0.03),
        inset 0 1px 0 rgba(255,255,255,1),
        inset 0 -1px 0 rgba(0,0,0,0.03);
      position: relative; overflow: hidden;
    }
    .studio-trend-card::before {
      content: ''; position: absolute; left: 10%; right: 10%; top: 0.5px; height: 1px; pointer-events: none;
      background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.85) 50%, rgba(255,255,255,0) 100%);
    }
    .studio-trend-title {
      font-size: 0.62rem; font-weight: 700; letter-spacing: 0.06em;
      color: #86868b; text-transform: uppercase; margin: 0 0 8px;
    }
    .studio-trend-chart { width: 100%; height: 68px; }
    .studio-trend-chart svg { width: 100%; height: 100%; display: block; overflow: visible; }
    .studio-trend-foot {
      display: flex; align-items: center; justify-content: space-between;
      font-size: 0.62rem; color: #86868b; margin-top: 6px; font-weight: 500;
      font-variant-numeric: tabular-nums;
    }

    /* Dashboard detail panel */
    .studio-dash-detail {
      width: 100%; animation: studioDashFadeIn 0.2s ease;
      display: flex; flex-direction: column; align-items: center;
    }
    @keyframes studioDashFadeIn {
      from { opacity: 0; transform: translateY(8px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .studio-detail-list { list-style: none; padding: 0; margin: 0 0 16px; }
    .studio-detail-list-item {
      display: flex; align-items: center; gap: 10px;
      padding: 10px 0; border-bottom: 1px solid #e8e8ed;
      font-size: 0.84rem; color: #1d1d1f;
    }
    .studio-detail-list-item:last-child { border-bottom: none; }
    .studio-detail-icon {
      width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0;
      background: #f0f0f2; display: flex; align-items: center; justify-content: center;
      font-size: 0.72rem; overflow: hidden;
    }
    .studio-detail-icon img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }
    .studio-detail-text { flex: 1; min-width: 0; }
    .studio-detail-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .studio-detail-sub { font-size: 0.72rem; color: #86868b; margin-top: 1px; }
    .studio-detail-value { font-weight: 700; font-size: 0.9rem; flex-shrink: 0; }
    .theme-dark .studio-detail-list-item { color: #f5f5f7; border-bottom-color: rgba(255,255,255,0.06); }
    .theme-dark .studio-detail-icon { background: #48484a; }
    .theme-dark .studio-detail-sub { color: #636366; }

    /* Revenue mini chart */
    .studio-mini-chart {
      display: flex; align-items: flex-end; gap: 2px; height: 60px;
      width: 100%; margin-bottom: 14px;
    }
    .studio-mini-chart-bar {
      flex: 1; min-width: 0; background: #3478F6; border-radius: 2px 2px 0 0;
      transition: height 0.3s ease; min-height: 1px;
    }
    .theme-dark .studio-mini-chart-bar { background: #5a9dff; }

    /* Summary row */
    .studio-summary-row {
      display: flex; gap: 8px; width: 100%; max-width: 420px; margin-bottom: 12px;
    }
    .studio-summary-pill {
      flex: 1; background: #f5f5f7; border-radius: 10px; padding: 10px 8px; text-align: center;
    }
    .studio-summary-pill-value { font-size: 1.1rem; font-weight: 700; color: #1d1d1f; margin: 0; }
    .studio-summary-pill-label { font-size: 0.66rem; color: #86868b; margin: 2px 0 0; }
    .theme-dark .studio-summary-pill { background: #3a3a3c; }
    .theme-dark .studio-summary-pill-value { color: #f5f5f7; }

    .studio-feature-list {
      width: 100%; max-width: 380px; text-align: left; margin-bottom: 16px;
    }
    .studio-feature-list-item {
      display: flex; align-items: center; gap: 10px;
      padding: 10px 0; border-bottom: 1px solid #e8e8ed;
      font-size: 0.88rem; color: #1d1d1f;
    }
    .studio-feature-list-item:last-child { border-bottom: none; }
    .studio-feature-list-icon { color: #34C759; flex-shrink: 0; }

    /* Dropzone — same dashed-border tap-bar look as .studio-desc-tap.
       Same 48px height so all Set up Domain rows line up perfectly. */
    .studio-dropzone {
      width: 100%; min-height: 48px;
      border: 1.5px dashed rgba(0,0,0,0.15);
      border-radius: 12px;
      display: flex; flex-direction: row; align-items: center; justify-content: flex-start;
      gap: 10px; padding: 8px 14px; cursor: pointer; margin-bottom: 12px;
      background: transparent;
      transition: border-color 0.2s, background 0.2s;
      -webkit-tap-highlight-color: transparent;
      box-sizing: border-box;
      box-shadow: none;
    }
    .studio-dropzone:hover {
      border-color: #8ab4ff;
      background: rgba(52,120,246,0.03);
    }
    .studio-dropzone-icon {
      color: #86868b; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      margin-bottom: 0;
    }
    .studio-dropzone-icon svg { width: 14px; height: 14px; }
    .studio-dropzone-text { font-size: 0.86rem; color: #86868b; font-weight: 500; margin: 0; letter-spacing: -0.01em; flex: 1; font-style: italic; }
    .studio-dropzone-file { font-size: 0.74rem; color: #3478F6; font-weight: 600; margin: 2px 0 0; font-style: normal; }

    .studio-toggle-row {
      display: flex; align-items: center; justify-content: space-between;
      width: 100%; max-width: 380px; padding: 12px 0;
      border-bottom: 1px solid #e8e8ed;
    }
    .studio-toggle-label { font-size: 0.88rem; color: #1d1d1f; }
    .studio-toggle {
      width: 46px; height: 28px; border-radius: 14px;
      background: #e0e0e5; border: none; cursor: pointer;
      position: relative; transition: background 0.25s ease; padding: 0;
      box-shadow: inset 0 1px 3px rgba(0,0,0,0.12), inset 0 0 0 0.5px rgba(0,0,0,0.04);
      -webkit-tap-highlight-color: transparent;
      outline: none;
    }
    .studio-toggle:focus, .studio-toggle:focus-visible { outline: none; }
    .studio-toggle::after {
      content: ''; position: absolute; top: 2px; left: 2px;
      width: 24px; height: 24px; border-radius: 50%;
      background: linear-gradient(180deg, #fff 0%, #f8f8f8 100%);
      box-shadow: 0 2px 6px rgba(0,0,0,0.18), 0 0.5px 1px rgba(0,0,0,0.1), 0 0 0 0.5px rgba(0,0,0,0.04);
      transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .studio-toggle:active::after { width: 27px; }
    .studio-toggle.studio-toggle-on { background: #34C759; box-shadow: inset 0 1px 3px rgba(0,0,0,0.08), inset 0 0 0 0.5px rgba(52,199,89,0.3); }
    .studio-toggle.studio-toggle-on::after { transform: translateX(18px); }
    .studio-toggle.studio-toggle-on:active::after { transform: translateX(15px); }

    /* === Skeu Preview Cards (Sign In / Payment) — matches production skeu styling === */
    .studio-skeu-preview-card {
      position: relative;
      background: linear-gradient(180deg, #1c1c1e 0%, #0a0a0a 100%);
      border: 0.5px solid rgba(255,255,255,0.08);
      border-radius: 20px;
      box-shadow:
        0 12px 32px rgba(0,0,0,0.35),
        0 4px 12px rgba(0,0,0,0.22),
        inset 0 1px 0 rgba(255,255,255,0.08);
      overflow: hidden;
      color: #f5f5f7;
      font-family: -apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text','Helvetica Neue',Helvetica,Arial,sans-serif;
    }
    .studio-skeu-close {
      position: absolute; top: 14px; right: 14px;
      width: 28px; height: 28px; border-radius: 14px;
      border: 0.5px solid rgba(255,255,255,0.12);
      background: linear-gradient(180deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.03) 100%);
      color: #a1a1a6;
      display: flex; align-items: center; justify-content: center;
      padding: 0 0 2px 0; font-size: 17px; line-height: 1; font-weight: 500;
      cursor: pointer;
      box-shadow:
        0 1px 2px rgba(0,0,0,0.22),
        inset 0 1px 0 rgba(255,255,255,0.14),
        inset 0 -1px 1px rgba(0,0,0,0.14);
      z-index: 2;
    }
    .studio-skeu-close::before {
      content:''; position:absolute; inset:0 0 50% 0;
      background: linear-gradient(180deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 100%);
      pointer-events:none; border-radius: 14px 14px 0 0;
    }
    .studio-skeu-hdr { padding: 22px 22px 4px; text-align: center; }
    .studio-skeu-title {
      font-size: 1rem; font-weight: 700; color: #f5f5f7;
      margin: 0; letter-spacing: -0.015em;
    }
    .studio-skeu-sub {
      font-size: 0.74rem; color: #a1a1a6;
      margin: 3px 0 0; letter-spacing: -0.005em;
    }
    .studio-skeu-body { padding: 16px 18px 18px; }
    .studio-skeu-fld { margin-bottom: 10px; }
    .studio-skeu-fld label {
      display: block; font-size: 0.7rem; font-weight: 500;
      color: #a1a1a6; margin: 0 0 5px 4px; letter-spacing: 0.01em;
    }
    .studio-skeu-input {
      background: rgba(255,255,255,0.05);
      border: 0.5px solid rgba(255,255,255,0.08);
      border-radius: 10px;
      padding: 10px 13px;
      font-size: 0.82rem;
      color: #6e6e73;
      box-shadow: inset 0 1px 0 rgba(0,0,0,0.2);
      font-family: inherit;
    }
    .studio-skeu-primary {
      width: 100%;
      padding: 12px;
      border-radius: 12px;
      border: 0.5px solid rgba(0,0,0,0.35);
      background: linear-gradient(180deg, #fcfcfd 0%, #e4e4ea 48%, #c4c4cc 100%);
      color: #000;
      font-weight: 700;
      font-size: 0.88rem;
      cursor: pointer;
      font-family: inherit;
      letter-spacing: -0.01em;
      box-shadow:
        0 3px 12px rgba(0,0,0,0.35),
        0 1px 2px rgba(0,0,0,0.3),
        inset 0 1px 0 rgba(255,255,255,1),
        inset 0 -1px 0 rgba(0,0,0,0.18),
        inset 0 -5px 12px rgba(0,0,0,0.08);
      text-shadow: 0 1px 0 rgba(255,255,255,0.75);
      position: relative; overflow: hidden;
      margin-top: 12px; margin-bottom: 8px;
    }
    .studio-skeu-primary::before {
      content:''; position:absolute; inset:0 0 55% 0;
      background: linear-gradient(180deg, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.25) 55%, rgba(255,255,255,0) 100%);
      pointer-events:none; border-radius: 12px 12px 0 0;
    }
    .studio-skeu-primary::after {
      content:''; position:absolute; left:10%; right:10%; top:1px; height:1px;
      background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0) 100%);
      pointer-events:none;
    }
    .studio-skeu-secondary {
      width: 100%;
      padding: 11px;
      border-radius: 12px;
      border: 0.5px solid rgba(255,255,255,0.12);
      background: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 100%);
      color: #f5f5f7;
      font-weight: 600;
      font-size: 0.84rem;
      cursor: pointer;
      font-family: inherit;
      letter-spacing: -0.01em;
      box-shadow:
        0 1px 2px rgba(0,0,0,0.22),
        inset 0 1px 0 rgba(255,255,255,0.1),
        inset 0 -1px 1px rgba(0,0,0,0.14);
      position: relative; overflow: hidden;
      margin-bottom: 12px;
    }
    .studio-skeu-secondary::before {
      content:''; position:absolute; inset:0 0 50% 0;
      background: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0) 100%);
      pointer-events:none; border-radius: 12px 12px 0 0;
    }
    .studio-skeu-footer {
      text-align: center; font-size: 0.62rem;
      color: #6e6e73; margin: 0; letter-spacing: 0.01em;
    }

    /* Payment preview variant */
    .studio-skeu-pay-item {
      display: flex; align-items: center; gap: 12px;
      padding: 12px; margin-bottom: 12px;
      background: rgba(255,255,255,0.03);
      border: 0.5px solid rgba(255,255,255,0.06);
      border-radius: 12px;
      box-shadow: inset 0 1px 2px rgba(0,0,0,0.15);
    }
    .studio-skeu-pay-art {
      width: 40px; height: 40px; border-radius: 10px;
      background: linear-gradient(145deg, #0A84FF, #0060d0);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
      box-shadow: 0 2px 6px rgba(10,132,255,0.35), inset 0 1px 0 rgba(255,255,255,0.25);
    }
    .studio-skeu-pay-info { flex: 1; min-width: 0; }
    .studio-skeu-pay-info h4 {
      font-size: 0.86rem; font-weight: 600; color: #f5f5f7;
      margin: 0; letter-spacing: -0.01em;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .studio-skeu-pay-info p {
      font-size: 0.7rem; color: #a1a1a6;
      margin: 2px 0 0; letter-spacing: -0.005em;
    }
    .studio-skeu-pay-price {
      font-size: 0.88rem; font-weight: 700; color: #f5f5f7;
      letter-spacing: -0.01em;
    }
    .studio-skeu-pay-row {
      display: flex; justify-content: space-between; align-items: center;
      padding: 8px 4px; font-size: 0.78rem; color: #a1a1a6;
      border-top: 0.5px solid rgba(255,255,255,0.06);
    }
    .studio-skeu-pay-row:first-of-type { border-top: none; }
    .studio-skeu-pay-row span:last-child { color: #f5f5f7; font-weight: 500; }
    .studio-skeu-pay-foot {
      margin-top: 10px; padding-top: 12px;
      border-top: 0.5px solid rgba(255,255,255,0.08);
    }
    .studio-skeu-pay-total-row {
      display: flex; justify-content: space-between; align-items: baseline;
      margin-bottom: 12px;
    }
    .studio-skeu-pay-total-label { font-size: 0.8rem; color: #a1a1a6; font-weight: 500; }
    .studio-skeu-pay-total { font-size: 1.2rem; font-weight: 700; color: #f5f5f7; letter-spacing: -0.02em; }
    .studio-skeu-green {
      width: 100%;
      padding: 13px;
      border-radius: 12px;
      border: 0.5px solid rgba(34,167,74,0.55);
      background: linear-gradient(180deg, #5de37c 0%, #30D158 55%, #22a74a 100%);
      color: #000;
      font-weight: 700;
      font-size: 0.92rem;
      cursor: pointer;
      font-family: inherit;
      letter-spacing: -0.01em;
      box-shadow:
        0 2px 10px rgba(48,209,88,0.32),
        inset 0 1px 0 rgba(255,255,255,0.42),
        inset 0 -1px 2px rgba(0,0,0,0.15),
        0 0 0 0.5px rgba(34,167,74,0.5);
      text-shadow: 0 1px 0 rgba(0,0,0,0.1);
      position: relative; overflow: hidden;
    }
    .studio-skeu-green::before {
      content:''; position:absolute; inset:0 0 55% 0;
      background: linear-gradient(180deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 100%);
      pointer-events:none; border-radius: 12px 12px 0 0;
    }
    .studio-skeu-note {
      text-align: center; font-size: 0.64rem;
      color: #6e6e73; margin: 10px 0 0; letter-spacing: 0.01em;
    }

    /* === Apple-style skeuomorphic availability (service) === */
    /* Option card (wraps custom radio/checkbox + label text) */
    .studio-opt-card {
      position: relative; display: flex; align-items: center; gap: 12px;
      padding: 13px 14px; border-radius: 12px; cursor: pointer;
      background: linear-gradient(180deg, #ffffff 0%, #f7f7fa 100%);
      border: 1px solid rgba(0,0,0,0.08);
      box-shadow: 0 1px 2px rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.9);
      transition: transform 0.18s cubic-bezier(0.16,1,0.3,1), box-shadow 0.18s ease, border-color 0.18s ease;
      overflow: hidden;
    }
    .studio-opt-card::before {
      content: ''; position: absolute; inset: 0 0 auto 0; height: 50%;
      background: linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 100%);
      pointer-events: none; border-radius: 12px 12px 0 0;
    }
    .studio-opt-card:hover { border-color: rgba(48,209,88,0.32); }
    .studio-opt-card:active { transform: scale(0.985); }
    .studio-opt-card.is-checked {
      border-color: rgba(48,209,88,0.55);
      background: linear-gradient(180deg, #f6fff9 0%, #eefbf2 100%);
      box-shadow: 0 2px 10px rgba(48,209,88,0.14), inset 0 1px 0 rgba(255,255,255,0.9), 0 0 0 0.5px rgba(48,209,88,0.18);
    }
    .studio-opt-card input[type="radio"],
    .studio-opt-card input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; }
    /* Custom radio dot */
    .studio-radio-dot {
      flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
      background: linear-gradient(180deg, #ffffff 0%, #ececf0 100%);
      box-shadow: inset 0 1px 2px rgba(0,0,0,0.08), inset 0 0 0 1px rgba(0,0,0,0.1), 0 1px 0 rgba(255,255,255,0.9);
      position: relative; transition: all 0.2s cubic-bezier(0.16,1,0.3,1);
    }
    .studio-opt-card.is-checked .studio-radio-dot {
      background: radial-gradient(circle at 35% 30%, #5de37c 0%, #30D158 55%, #22a74a 100%);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), inset 0 -1px 2px rgba(0,0,0,0.18), 0 2px 6px rgba(48,209,88,0.35), 0 0 0 0.5px rgba(34,167,74,0.5);
    }
    .studio-opt-card.is-checked .studio-radio-dot::after {
      content: ''; position: absolute; top: 50%; left: 50%; width: 8px; height: 8px;
      border-radius: 50%; background: #fff; transform: translate(-50%,-50%);
      box-shadow: 0 1px 1px rgba(0,0,0,0.08);
    }
    /* Custom checkbox square */
    .studio-check-box {
      flex-shrink: 0; width: 22px; height: 22px; border-radius: 7px;
      background: linear-gradient(180deg, #ffffff 0%, #ececf0 100%);
      box-shadow: inset 0 1px 2px rgba(0,0,0,0.08), inset 0 0 0 1px rgba(0,0,0,0.1), 0 1px 0 rgba(255,255,255,0.9);
      position: relative; transition: all 0.2s cubic-bezier(0.16,1,0.3,1);
    }
    .studio-opt-card.is-checked .studio-check-box {
      background: linear-gradient(180deg, #5de37c 0%, #30D158 55%, #22a74a 100%);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), inset 0 -1px 2px rgba(0,0,0,0.15), 0 2px 6px rgba(48,209,88,0.32), 0 0 0 0.5px rgba(34,167,74,0.5);
    }
    .studio-opt-card.is-checked .studio-check-box::after {
      content: ''; position: absolute; top: 52%; left: 50%;
      width: 11px; height: 6px; border-left: 2px solid #fff; border-bottom: 2px solid #fff;
      transform: translate(-50%,-60%) rotate(-45deg);
      filter: drop-shadow(0 1px 0 rgba(0,0,0,0.12));
    }
    .studio-opt-text { flex: 1; min-width: 0; }
    .studio-opt-title { margin: 0; font-size: 0.88rem; font-weight: 600; color: #1d1d1f; letter-spacing: -0.01em; }
    .studio-opt-sub { margin: 2px 0 0; font-size: 0.76rem; color: #86868b; font-weight: 500; }

    /* Day pill — skeuomorphic glass */
    .studio-day-btn {
      position: relative; padding: 9px 13px; border-radius: 10px;
      font-size: 0.82rem; font-weight: 600; letter-spacing: -0.01em;
      border: 1px solid rgba(0,0,0,0.09); color: #6e6e73;
      background: linear-gradient(180deg, #ffffff 0%, #eeeef2 100%);
      box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.95);
      cursor: pointer; overflow: hidden;
      transition: transform 0.15s cubic-bezier(0.16,1,0.3,1), box-shadow 0.18s ease, color 0.15s ease, border-color 0.15s ease;
    }
    .studio-day-btn::before {
      content: ''; position: absolute; inset: 0 0 50% 0;
      background: linear-gradient(180deg, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0) 100%);
      pointer-events: none; border-radius: 10px 10px 0 0;
    }
    .studio-day-btn:hover { color: #1d1d1f; }
    .studio-day-btn:active { transform: scale(0.94); box-shadow: 0 1px 1px rgba(0,0,0,0.06), inset 0 1px 2px rgba(0,0,0,0.08); }
    .studio-day-btn.studio-day-active {
      color: #fff; border-color: rgba(34,167,74,0.55);
      background: linear-gradient(180deg, #5de37c 0%, #30D158 55%, #22a74a 100%);
      box-shadow: 0 2px 8px rgba(48,209,88,0.32), inset 0 1px 0 rgba(255,255,255,0.42), inset 0 -1px 2px rgba(0,0,0,0.15), 0 0 0 0.5px rgba(34,167,74,0.5);
      text-shadow: 0 1px 0 rgba(0,0,0,0.1);
    }
    .studio-day-btn.studio-day-active::before { background: linear-gradient(180deg, rgba(255,255,255,0.38) 0%, rgba(255,255,255,0) 100%); }

    /* Dark mode overrides */
    .theme-dark .studio-opt-card {
      background: linear-gradient(180deg, #2c2c2e 0%, #232326 100%);
      border-color: rgba(255,255,255,0.08);
      box-shadow: 0 1px 2px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.06);
    }
    .theme-dark .studio-opt-card::before { background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0) 100%); }
    .theme-dark .studio-opt-card.is-checked {
      background: linear-gradient(180deg, #1e3a28 0%, #16301f 100%);
      border-color: rgba(48,209,88,0.5);
      box-shadow: 0 2px 10px rgba(48,209,88,0.18), inset 0 1px 0 rgba(255,255,255,0.08), 0 0 0 0.5px rgba(48,209,88,0.3);
    }
    .theme-dark .studio-radio-dot,
    .theme-dark .studio-check-box {
      background: linear-gradient(180deg, #3a3a3c 0%, #2a2a2c 100%);
      box-shadow: inset 0 1px 2px rgba(0,0,0,0.4), inset 0 0 0 1px rgba(255,255,255,0.08), 0 1px 0 rgba(255,255,255,0.04);
    }
    .theme-dark .studio-opt-title { color: #f5f5f7; }
    .theme-dark .studio-opt-sub { color: #98989d; }
    .theme-dark .studio-day-btn {
      background: linear-gradient(180deg, #3a3a3c 0%, #2a2a2c 100%);
      border-color: rgba(255,255,255,0.08); color: #98989d;
      box-shadow: 0 1px 2px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.06);
    }
    .theme-dark .studio-day-btn::before { background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0) 100%); }
    .theme-dark .studio-day-btn:hover { color: #f5f5f7; }
    .theme-dark .studio-day-btn.studio-day-active {
      color: #fff; border-color: rgba(34,167,74,0.55);
      background: linear-gradient(180deg, #5de37c 0%, #30D158 55%, #22a74a 100%);
      box-shadow: 0 2px 8px rgba(48,209,88,0.32), inset 0 1px 0 rgba(255,255,255,0.42), inset 0 -1px 2px rgba(0,0,0,0.15), 0 0 0 0.5px rgba(34,167,74,0.5);
      text-shadow: 0 1px 0 rgba(0,0,0,0.1);
    }
    .theme-dark .studio-day-btn.studio-day-active::before { background: linear-gradient(180deg, rgba(255,255,255,0.38) 0%, rgba(255,255,255,0) 100%); }

    /* === Minimal list item (time slots) — flat row with skeuo checkmark === */
    .studio-list {
      border-top: 1px solid rgba(0,0,0,0.06);
    }
    .studio-list-item {
      position: relative; display: flex; align-items: center; gap: 12px;
      padding: 10px 4px; cursor: pointer;
      border-bottom: 1px solid rgba(0,0,0,0.06);
      transition: background 0.15s ease;
    }
    .studio-list-item:hover { background: rgba(0,0,0,0.015); }
    .studio-list-item:active { background: rgba(0,0,0,0.03); }
    .studio-list-item input[type="checkbox"],
    .studio-list-item input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
    .studio-list-check {
      flex-shrink: 0; width: 20px; height: 20px; border-radius: 6px;
      background: linear-gradient(180deg, #ffffff 0%, #ececf0 100%);
      box-shadow: inset 0 1px 2px rgba(0,0,0,0.06), inset 0 0 0 1px rgba(0,0,0,0.12);
      position: relative; transition: all 0.18s cubic-bezier(0.16,1,0.3,1);
    }
    .studio-list-item.is-checked .studio-list-check {
      background: linear-gradient(180deg, #5de37c 0%, #30D158 55%, #22a74a 100%);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), inset 0 -1px 2px rgba(0,0,0,0.15), 0 1px 3px rgba(48,209,88,0.3), 0 0 0 0.5px rgba(34,167,74,0.5);
    }
    .studio-list-item.is-checked .studio-list-check::after {
      content: ''; position: absolute; top: 50%; left: 50%;
      width: 10px; height: 5px; border-left: 2px solid #fff; border-bottom: 2px solid #fff;
      transform: translate(-50%,-60%) rotate(-45deg);
    }
    .studio-list-text { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 10px; }
    .studio-list-title { margin: 0; font-size: 0.86rem; font-weight: 600; color: #1d1d1f; letter-spacing: -0.01em; }
    .studio-list-sub { margin: 0; font-size: 0.76rem; color: #86868b; font-weight: 500; font-variant-numeric: tabular-nums; }
    .studio-list-item.is-checked .studio-list-title { color: #1d1d1f; }
    /* Dark-mode for minimal list */
    .theme-dark .studio-list { border-top-color: rgba(255,255,255,0.07); }
    .theme-dark .studio-list-item { border-bottom-color: rgba(255,255,255,0.07); }
    .theme-dark .studio-list-item:hover { background: rgba(255,255,255,0.025); }
    .theme-dark .studio-list-item:active { background: rgba(255,255,255,0.04); }
    .theme-dark .studio-list-check {
      background: linear-gradient(180deg, #3a3a3c 0%, #2a2a2c 100%);
      box-shadow: inset 0 1px 2px rgba(0,0,0,0.4), inset 0 0 0 1px rgba(255,255,255,0.08);
    }
    .theme-dark .studio-list-title { color: #f5f5f7; }
    .theme-dark .studio-list-sub { color: #98989d; }
    .theme-dark .studio-list-item.is-checked .studio-list-title { color: #f5f5f7; }

    /* Pricing model selector */
    .studio-pricing-selector {
      display: flex; gap: 2px; border-radius: 10px; overflow: hidden;
      background: var(--bg-card-secondary, #f5f5f7); padding: 3px;
      border: 1px solid var(--border-input, #e8e8ed); margin-bottom: 14px;
    }
    .studio-pricing-opt {
      flex: 1; padding: 9px 6px; border: none; background: transparent;
      font-size: 0.8rem; font-weight: 600; color: var(--text-tertiary, #86868b);
      cursor: pointer; transition: all 0.2s; border-radius: 8px; text-align: center;
    }
    .studio-pricing-opt-active {
      background: var(--bg-card, #fff); color: var(--text-primary, #1d1d1f);
      box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
    }
    .theme-dark .studio-pricing-selector { background: #2c2c2e; border-color: rgba(255,255,255,0.06); }
    .theme-dark .studio-pricing-opt { color: #98989d; }
    .theme-dark .studio-pricing-opt-active { background: #3a3a3c; color: #f5f5f7; box-shadow: 0 1px 3px rgba(0,0,0,0.3); }

    /* Content list add button */
    .studio-content-add-btn {
      width: 100%; padding: 12px; border: 2px dashed var(--border-input, #d2d2d7);
      border-radius: 12px; background: transparent; color: var(--text-secondary, #636366);
      font-size: 0.86rem; font-weight: 600; cursor: pointer; margin-top: 10px;
      transition: border-color 0.2s, background 0.2s;
    }
    .studio-content-add-btn:hover { border-color: var(--accent, #0a84ff); color: var(--accent, #0a84ff); background: rgba(10,132,255,0.04); }
    .theme-dark .studio-content-add-btn { border-color: rgba(255,255,255,0.1); color: #98989d; }
    .theme-dark .studio-content-add-btn:hover { border-color: #0a84ff; color: #0a84ff; background: rgba(10,132,255,0.08); }

    .studio-nav {
      display: flex; align-items: center; justify-content: space-between;
      gap: 12px; margin-top: 20px; width: 100%;
    }
    .studio-step-scrollable {
      display: flex; flex-direction: column; align-items: center;
      flex: 1; min-height: 0; width: 100%; height: 100%; overflow: hidden;
    }
    .studio-scroll-content {
      flex: 1; overflow-y: auto; width: 100%;
      display: flex; flex-direction: column; align-items: center;
      min-height: 0; max-height: 100%; padding-bottom: 4px;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: thin;
    }
    .studio-scroll-content::-webkit-scrollbar { width: 4px; }
    .studio-scroll-content::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 2px; }
    .studio-bottom-bar {
      width: 100%; display: flex; align-items: center; justify-content: space-between;
      gap: 12px; padding: 22px 4px 6px; margin-top: 8px; border-top: 1px solid #e8e8ed;
      flex-shrink: 0;
    }
    .studio-coder-item { padding: 12px 16px !important; }
    .studio-coder-item-selected { background: rgba(52,120,246,0.06) !important; }
    .studio-coder-check { flex-shrink: 0; display: flex; align-items: center; }
    .studio-coder-list { margin-top: 8px; }
    .theme-dark .studio-coder-item-selected { background: rgba(52,120,246,0.12) !important; }

    .studio-footer {
      background: rgba(238,238,243,0.88); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
      padding: 13px 32px;
      display: flex; align-items: center; justify-content: center; min-height: 44px;
      border-top: 1px solid rgba(0,0,0,0.06);
    }
    .studio-footer-text { color: #86868b; font-size: 0.74rem; margin: 0; }

    /* Studio dark theme */
    .theme-dark .studio-overlay { background: #1d1d1f; }
    .theme-dark .studio-card {
      background: #2c2c2e;
      box-shadow: 0 1px 1px rgba(255,255,255,0.04) inset, 0 12px 48px rgba(0,0,0,0.3);
    }
    .theme-dark .studio-dot { background: #48484a; }
    .theme-dark .studio-dot-active { background: #5a9dff; box-shadow: 0 1px 4px rgba(90,157,255,0.3); }
    .theme-dark .studio-dot-done { background: #4a7ec2; }
    /* Dark theme explicit override (when .theme-dark is applied regardless of system pref) */
    .theme-dark .studio-close-btn {
      background: linear-gradient(180deg, #3a3a3c 0%, #2c2c2e 100%);
      border: 0.5px solid rgba(0,0,0,0.5);
      color: #c7c7cc;
      text-shadow: 0 1px 0 rgba(0,0,0,0.5);
      box-shadow:
        0 1px 3px rgba(0,0,0,0.3),
        0 0.5px 1px rgba(0,0,0,0.2),
        inset 0 1px 0 rgba(255,255,255,0.08),
        inset 0 -1px 0 rgba(0,0,0,0.18),
        0 0 0 0.5px rgba(0,0,0,0.4);
    }
    .theme-dark .studio-close-btn::after {
      background: linear-gradient(180deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0) 50%, rgba(0,0,0,0.06) 100%);
    }
    .theme-dark .studio-title { color: #f5f5f7; }
    .theme-dark .studio-subtitle { color: #86868b; }
    /* Dark mode form input — recessed inset on dark card, matches .studio-desc-tap */
    .theme-dark .studio-form-input {
      background: transparent;
      border: 1.5px dashed rgba(255,255,255,0.15);
      color: #f5f5f7;
      box-shadow: none;
    }
    .theme-dark .studio-form-input::placeholder { color: #6e6e73; }
    .theme-dark select.studio-form-input {
      background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5L6 6.5L11 1.5' stroke='%2398989f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>");
      background-repeat: no-repeat;
      background-position: right 14px center;
      background-size: 12px 8px;
    }
    .theme-dark .studio-form-input:hover { border-color: #5a9dff; background: rgba(90,157,255,0.06); }
    .theme-dark .studio-form-input:focus {
      border-color: #5a9dff;
      box-shadow: 0 0 0 2px rgba(90,157,255,0.10);
    }
    .theme-dark select.studio-form-input:focus {
      background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5L6 6.5L11 1.5' stroke='%235a9dff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>");
    }
    .theme-dark .studio-domain-row {
      background: transparent;
      border: 1.5px dashed rgba(255,255,255,0.15);
    }
    .theme-dark .studio-domain-row:hover { border-color: #5a9dff; background: rgba(90,157,255,0.06); }
    .theme-dark .studio-domain-row:focus-within { border-color: #5a9dff; }
    .theme-dark .studio-domain-input { color: #f5f5f7; }
    .theme-dark .studio-domain-input::placeholder { color: #6e6e73; }
    .theme-dark .studio-feature-grid {
      background: linear-gradient(180deg, #242426 0%, #1f1f21 100%);
      border-color: rgba(255,255,255,0.06);
      box-shadow:
        inset 0 1px 3px rgba(0,0,0,0.4),
        inset 0 -1px 3px rgba(0,0,0,0.2),
        inset 0 0 0 0.5px rgba(0,0,0,0.3),
        0 0.5px 0 rgba(255,255,255,0.04);
    }
    .theme-dark .studio-feature-card {
      background: transparent;
      border-bottom-color: rgba(255,255,255,0.06);
      box-shadow: inset 0 -0.5px 0 rgba(255,255,255,0.03);
    }
    .theme-dark .studio-feature-card:last-child { box-shadow: none; }
    .theme-dark .studio-feature-card:hover { background: rgba(255,255,255,0.04); }
    .theme-dark .studio-feature-icon {
      box-shadow:
        0 1px 4px rgba(0,0,0,0.4),
        0 0.5px 1px rgba(0,0,0,0.25),
        inset 0 1px 0 rgba(255,255,255,0.2),
        inset 0 -1px 0 rgba(0,0,0,0.15);
    }
    .theme-dark .studio-feature-title { color: #f5f5f7; }
    .theme-dark .studio-feature-arrow { color: #636366; }
    .theme-dark .studio-info-card { background: #3a3a3c; }
    .theme-dark .studio-info-title { color: #f5f5f7; }
    .theme-dark .studio-info-desc { color: #86868b; }
    .theme-dark .studio-stat-card {
      background: linear-gradient(180deg, #3a3a3c 0%, #2c2c2e 100%);
      border-color: rgba(255,255,255,0.08);
      box-shadow:
        0 2px 6px rgba(0,0,0,0.28),
        0 1px 2px rgba(0,0,0,0.2),
        inset 0 1px 0 rgba(255,255,255,0.08),
        inset 0 -1px 0 rgba(0,0,0,0.2);
    }
    .theme-dark .studio-stat-card::before {
      background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.14) 50%, rgba(255,255,255,0) 100%);
    }
    .theme-dark .studio-stat-value { color: #f5f5f7; }
    .theme-dark .studio-stat-label { color: #98989f; }
    .theme-dark .studio-stat-tappable:hover {
      box-shadow:
        0 4px 12px rgba(0,0,0,0.38),
        0 1px 2px rgba(0,0,0,0.22),
        inset 0 1px 0 rgba(255,255,255,0.1),
        inset 0 -1px 0 rgba(0,0,0,0.22);
    }
    .theme-dark .studio-stat-card-primary {
      background: linear-gradient(180deg, #1a3a6e 0%, #122a52 100%);
      border-color: rgba(90,157,255,0.25);
    }
    .theme-dark .studio-stat-card-primary .studio-stat-value { color: #a5d0ff; }
    .theme-dark .studio-stat-card-primary .studio-stat-label { color: #7aabe8; }

    /* Range segmented — dark */
    .theme-dark .studio-range-seg {
      background: linear-gradient(180deg, #1c1c1e 0%, #151517 100%);
      border-color: rgba(255,255,255,0.06);
      box-shadow: inset 0 1px 3px rgba(0,0,0,0.5), inset 0 0 0 0.5px rgba(0,0,0,0.3);
    }
    .theme-dark .studio-range-btn { color: #98989f; }
    .theme-dark .studio-range-btn:hover { color: #e5e5ea; }
    .theme-dark .studio-range-btn.sel {
      background: linear-gradient(180deg, #48484a 0%, #3a3a3c 100%);
      color: #f5f5f7;
      box-shadow:
        0 2px 4px rgba(0,0,0,0.28),
        0 0.5px 1px rgba(0,0,0,0.18),
        inset 0 1px 0 rgba(255,255,255,0.14),
        inset 0 -1px 0 rgba(0,0,0,0.25);
    }

    /* Hero tiles — dark */
    .theme-dark .studio-hero-tile {
      background: linear-gradient(180deg, #3a3a3c 0%, #2c2c2e 100%);
      border-color: rgba(255,255,255,0.08);
      box-shadow:
        0 2px 6px rgba(0,0,0,0.28),
        0 1px 2px rgba(0,0,0,0.2),
        inset 0 1px 0 rgba(255,255,255,0.08),
        inset 0 -1px 0 rgba(0,0,0,0.2);
    }
    .theme-dark .studio-hero-tile::before {
      background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.14) 50%, rgba(255,255,255,0) 100%);
    }
    .theme-dark .studio-hero-tile.tappable:hover {
      box-shadow:
        0 4px 12px rgba(0,0,0,0.38),
        0 1px 2px rgba(0,0,0,0.22),
        inset 0 1px 0 rgba(255,255,255,0.1),
        inset 0 -1px 0 rgba(0,0,0,0.22);
    }
    .theme-dark .studio-hero-label { color: #98989f; }
    .theme-dark .studio-hero-value { color: #f5f5f7; }
    .theme-dark .studio-hero-caption { color: #98989f; }

    .theme-dark .studio-delta-pos {
      background: rgba(48,209,88,0.18); color: #6ee488; border-color: rgba(48,209,88,0.3);
    }
    .theme-dark .studio-delta-neg {
      background: rgba(255,69,58,0.18); color: #ff8c82; border-color: rgba(255,69,58,0.3);
    }
    .theme-dark .studio-delta-neutral {
      background: rgba(255,255,255,0.08); color: #98989f; border-color: rgba(255,255,255,0.1);
    }

    .theme-dark .studio-pub-row-metric-value { color: #f5f5f7; }
    .theme-dark .studio-pub-row-metric-unit { color: #98989f; }

    .theme-dark .studio-detail-hero-name { color: #f5f5f7; }
    .theme-dark .studio-detail-hero-sub { color: #98989f; }

    .theme-dark .studio-trend-card {
      background: linear-gradient(180deg, #3a3a3c 0%, #2c2c2e 100%);
      border-color: rgba(255,255,255,0.08);
      box-shadow:
        0 2px 6px rgba(0,0,0,0.28),
        0 1px 2px rgba(0,0,0,0.2),
        inset 0 1px 0 rgba(255,255,255,0.08),
        inset 0 -1px 0 rgba(0,0,0,0.2);
    }
    .theme-dark .studio-trend-card::before {
      background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.14) 50%, rgba(255,255,255,0) 100%);
    }
    .theme-dark .studio-trend-title { color: #98989f; }
    .theme-dark .studio-trend-foot { color: #98989f; }

    /* Row action button — dark */
    .theme-dark .studio-dash-row-action {
      background: linear-gradient(180deg, #48484a 0%, #3a3a3c 100%);
      border-color: rgba(255,255,255,0.1); color: #f5f5f7;
      box-shadow:
        0 2px 4px rgba(0,0,0,0.32),
        0 0.5px 1px rgba(0,0,0,0.2),
        inset 0 1px 0 rgba(255,255,255,0.1),
        inset 0 -1px 1px rgba(0,0,0,0.15);
    }

    /* 3-level drill-down dashboard — dark */
    .theme-dark .studio-dash-total-row {
      border-bottom-color: rgba(255,255,255,0.06);
      box-shadow: inset 0 -0.5px 0 rgba(255,255,255,0.03);
      background: transparent;
    }
    .theme-dark .studio-dash-total-row-label { color: #98989f; text-shadow: none; }
    .theme-dark .studio-dash-total-row-sub { color: #98989f; }
    .theme-dark .studio-dash-total-row-value { color: #30D158; }
    .theme-dark .studio-dash-row-revenue { color: #30D158; }
    .theme-dark .studio-dash-row-revenue.is-zero { color: #48484a; }
    .theme-dark .studio-dash-row-sep {
      color: #6e6e73;
      background: rgba(0,0,0,0.15);
      border-bottom-color: rgba(255,255,255,0.04);
      box-shadow: inset 0 1px 2px rgba(0,0,0,0.3), inset 0 -0.5px 0 rgba(255,255,255,0.03);
      text-shadow: none;
    }
    .theme-dark .studio-dash-stat-row {
      border-bottom-color: rgba(255,255,255,0.06);
      box-shadow: inset 0 -0.5px 0 rgba(255,255,255,0.03);
    }
    .theme-dark .studio-dash-stat-row:last-child { box-shadow: none; }
    .theme-dark .studio-dash-stat-row-label { color: #c7c7cc; }
    .theme-dark .studio-dash-stat-row-value { color: #f5f5f7; }
    .theme-dark .studio-dash-stat-row-value.is-money { color: #30D158; }
    .theme-dark .studio-dash-tx-row {
      border-bottom-color: rgba(255,255,255,0.06);
      box-shadow: inset 0 -0.5px 0 rgba(255,255,255,0.03);
    }
    .theme-dark .studio-dash-tx-row:last-child { box-shadow: none; }
    .theme-dark .studio-dash-tx-email { color: #f5f5f7; }
    .theme-dark .studio-dash-tx-date { color: #98989f; }
    .theme-dark .studio-dash-tx-amount { color: #30D158; }
    .theme-dark .studio-dash-tx-amount.is-refunded { color: #48484a; }
    .theme-dark .studio-dash-tx-empty { color: #98989f; }
    .theme-dark .studio-dash-user-row {
      border-bottom-color: rgba(255,255,255,0.06);
      box-shadow: inset 0 -0.5px 0 rgba(255,255,255,0.03);
    }
    .theme-dark .studio-dash-user-row:last-child { box-shadow: none; }
    .theme-dark .studio-dash-user-email { color: #f5f5f7; }
    .theme-dark .studio-dash-user-meta { color: #98989f; }
    .theme-dark .studio-dash-user-avatar {
      box-shadow:
        0 1px 4px rgba(0,0,0,0.3),
        0 0.5px 1.5px rgba(0,0,0,0.2),
        inset 0 1px 0 rgba(255,255,255,0.25),
        inset 0 -1px 0 rgba(0,0,0,0.2);
    }
    .theme-dark .studio-dash-user-action {
      background: linear-gradient(180deg, #48484a 0%, #3a3a3c 100%);
      border-color: rgba(255,255,255,0.1); color: #5a9dff;
      box-shadow:
        0 1px 2px rgba(0,0,0,0.32),
        inset 0 1px 0 rgba(255,255,255,0.08),
        inset 0 -1px 1px rgba(0,0,0,0.15);
    }
    .theme-dark .studio-dash-user-action.is-ship { color: #FFA940; }
    .theme-dark .studio-ship-submit {
      border-color: rgba(255,255,255,0.06);
      box-shadow:
        0 2px 8px rgba(212,130,10,0.45),
        0 1px 3px rgba(0,0,0,0.25),
        inset 0 1px 0 rgba(255,255,255,0.2),
        inset 0 -1px 0 rgba(0,0,0,0.2);
      text-shadow: 0 1px 1px rgba(0,0,0,0.3);
    }
    .theme-dark .studio-dash-ship-label { color: #FFA940; }
    .theme-dark .studio-dash-ship-arrow { color: #636366; }
    .theme-dark #studio-ship-tracking {
      border-color: rgba(255,255,255,0.1) !important;
      background: rgba(255,255,255,0.06) !important;
      color: #f5f5f7 !important;
    }

    /* Metric cards — dark */
    .theme-dark .studio-metric-card {
      background: linear-gradient(180deg, #3a3a3c 0%, #2c2c2e 100%);
      border-color: rgba(255,255,255,0.08);
      box-shadow:
        0 2px 6px rgba(0,0,0,0.28),
        0 1px 2px rgba(0,0,0,0.2),
        inset 0 1px 0 rgba(255,255,255,0.08),
        inset 0 -1px 0 rgba(0,0,0,0.2);
    }
    .theme-dark .studio-metric-card::before {
      background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.14) 50%, rgba(255,255,255,0) 100%);
    }
    .theme-dark .studio-metric-label { color: #f5f5f7; }
    .theme-dark .studio-metric-time { color: #98989f; }
    .theme-dark .studio-metric-value { color: #f5f5f7; }
    .theme-dark .studio-metric-unit { color: #98989f; }
    .theme-dark .studio-metric-foot { color: #98989f; }
    .theme-dark .studio-metric-empty { color: #98989f; }

    .theme-dark .studio-pub-list {
      background: linear-gradient(180deg, #3a3a3c 0%, #2c2c2e 100%);
      border-color: rgba(255,255,255,0.08);
      box-shadow:
        0 2px 6px rgba(0,0,0,0.28),
        0 1px 2px rgba(0,0,0,0.2),
        inset 0 1px 0 rgba(255,255,255,0.08),
        inset 0 -1px 0 rgba(0,0,0,0.2);
    }
    .theme-dark .studio-pub-list-header { color: #98989f; border-bottom-color: rgba(255,255,255,0.06); }
    .theme-dark .studio-pub-list-count { background: rgba(255,255,255,0.08); color: #98989f; }
    .theme-dark .studio-pub-item { border-bottom-color: rgba(255,255,255,0.06); }
    .theme-dark .studio-pub-item:hover { background: rgba(255,255,255,0.04); }
    .theme-dark .studio-pub-item:active { background: rgba(255,255,255,0.07); }
    .theme-dark .studio-pub-name { color: #f5f5f7; }
    .theme-dark .studio-pub-meta { color: #98989f; }
    .theme-dark .studio-pub-metric { color: #e5e5ea; }
    .theme-dark .studio-pub-arrow { color: #636366; }
    .theme-dark .studio-pub-empty { color: #98989f; }
    .theme-dark .studio-pub-type-badge { background: rgba(90,157,255,0.18); color: #7ab5ff; }
    .theme-dark .studio-pub-type-badge[data-type="book"] { background: rgba(188,140,255,0.2); color: #caa3ff; }
    .theme-dark .studio-pub-type-badge[data-type="podcast"] { background: rgba(255,149,0,0.2); color: #ffbb5a; }
    .theme-dark .studio-pub-type-badge[data-type="video"] { background: rgba(255,69,58,0.2); color: #ff8c82; }
    .theme-dark .studio-pub-type-badge[data-type="course"] { background: rgba(52,199,89,0.2); color: #6ee488; }
    .theme-dark .studio-pub-type-badge[data-type="newsletter"] { background: rgba(118,116,224,0.22); color: #a9a6ff; }
    .theme-dark .studio-pub-type-badge[data-type="product"] { background: rgba(255,149,0,0.2); color: #ffbb5a; }
    .theme-dark .studio-feature-list-item { color: #f5f5f7; border-bottom-color: rgba(255,255,255,0.06); }
    .theme-dark .studio-dropzone {
      background: transparent;
      border: 1.5px dashed rgba(255,255,255,0.15);
      box-shadow: none;
    }
    .theme-dark .studio-dropzone:hover {
      border-color: #5a9dff;
      background: rgba(90,157,255,0.06);
    }
    .theme-dark .studio-dropzone-icon { color: #98989f; }
    .theme-dark .studio-dropzone-text { color: #98989f; }
    .theme-dark .studio-dropzone-file { color: #5a9dff; }
    .theme-dark .studio-toggle { background: #48484a; box-shadow: inset 0 1px 3px rgba(0,0,0,0.3), inset 0 0 0 0.5px rgba(0,0,0,0.2); }
    .theme-dark .studio-toggle::after { background: linear-gradient(180deg, #f0f0f0 0%, #e0e0e0 100%); box-shadow: 0 2px 6px rgba(0,0,0,0.35), 0 0.5px 1px rgba(0,0,0,0.25); }
    .theme-dark .studio-toggle.studio-toggle-on { box-shadow: inset 0 1px 3px rgba(0,0,0,0.15), inset 0 0 0 0.5px rgba(52,199,89,0.4); }
    .theme-dark .studio-toggle-label { color: #f5f5f7; }
    .theme-dark .studio-toggle-row { border-bottom-color: rgba(255,255,255,0.06); }
    .theme-dark .studio-build-separator { color: #636366; }
    .theme-dark .studio-bottom-bar { border-top-color: rgba(255,255,255,0.06); }
    .theme-dark .studio-scroll-content::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); }
    .theme-dark .studio-footer { background: rgba(28,28,30,0.9); border-top-color: rgba(255,255,255,0.06); }

    /* Studio mobile */
    @media (max-width: 640px) {
      .studio-overlay {
        padding-top: env(safe-area-inset-top, 0);
        padding-bottom: env(safe-area-inset-bottom, 0);
      }
      .studio-body { flex: 1; padding: 12px 12px 8px; align-items: stretch; min-height: 0; }
      .studio-card {
        width: auto; flex: 1; min-height: 0; max-height: none;
        border-radius: 18px; padding: 22px 18px;
        animation: none;
        overflow: hidden;
      }
      .studio-feature-grid {
        flex-direction: column;
      }
      .studio-stat-row { gap: 8px; margin-bottom: 8px; }
      .studio-stat-card { min-height: 78px; padding: 14px 8px 12px; border-radius: 14px; }
      .studio-stat-value { font-size: 1.35rem; }
      .studio-stat-label { font-size: 0.68rem; }
      .studio-stat-row.studio-stat-row-2col { grid-template-columns: 1fr 1fr; }
      .studio-pub-item { padding: 9px 12px; gap: 9px; }
      .studio-pub-icon { width: 30px; height: 30px; border-radius: 8px; }
      .studio-pub-name { font-size: 0.84rem; }
      .studio-pub-meta { font-size: 0.68rem; }
      .studio-pub-type-badge { font-size: 0.58rem; padding: 1px 5px; }
      .studio-pub-list-header { padding: 9px 12px 7px; font-size: 0.64rem; }
      .studio-hero-row { gap: 7px; margin-bottom: 8px; }
      .studio-hero-tile { min-height: 92px; padding: 10px 10px 9px; border-radius: 13px; }
      .studio-hero-value { font-size: 1.3rem; }
      .studio-hero-label { font-size: 0.56rem; }
      .studio-hero-spark { height: 18px; }
      .studio-delta { font-size: 0.56rem; padding: 1px 5px 1px 4px; }
      .studio-range-seg { margin-bottom: 8px; }
      .studio-range-btn { font-size: 0.68rem; padding: 5px 3px; }
      .studio-detail-tile-row { gap: 7px; }
      .studio-pub-row-spark { width: 40px; height: 18px; }
      .studio-footer { padding: 10px 18px; }
      .studio-dash-row-action { min-height: 32px; font-size: 0.72rem; }
      .studio-dash-total-row { padding: 14px 14px 12px; }
      .studio-dash-total-row-label { font-size: 0.56rem; }
      .studio-dash-total-row-sub { font-size: 0.72rem; }
      .studio-dash-total-row-value { font-size: 1.3rem; }
      .studio-dash-row-revenue { font-size: 0.82rem; }
      .studio-dash-row-sep { padding: 9px 14px 5px; font-size: 0.54rem; }
      .studio-dash-stat-row { padding: 11px 14px; }
      .studio-dash-stat-row-label { font-size: 0.8rem; }
      .studio-dash-stat-row-value { font-size: 0.88rem; }
      .studio-dash-tx-row { padding: 10px 14px; }
      .studio-dash-tx-email { font-size: 0.78rem; }
      .studio-dash-tx-date { font-size: 0.64rem; }
      .studio-dash-tx-amount { font-size: 0.86rem; }
      .studio-metric-card { border-radius: 14px; padding: 11px 14px 12px; }
      .studio-metric-icon { width: 20px; height: 20px; border-radius: 6px; }
      .studio-metric-icon svg { width: 11px; height: 11px; }
      .studio-metric-label { font-size: 0.74rem; }
      .studio-metric-time { font-size: 0.62rem; }
      .studio-metric-value { font-size: 1.7rem; }
      .studio-metric-unit { font-size: 0.72rem; }
      .studio-metric-foot { font-size: 0.66rem; }
      .studio-step {
        flex: 1; min-height: 0; width: 100%;
        overflow: hidden;
      }
      .studio-step-scrollable {
        display: flex; flex-direction: column; flex: 1; min-height: 0;
        height: 100%; overflow: hidden; width: 100%;
      }
      .studio-scroll-content {
        flex: 1; overflow-y: auto; min-height: 0;
        -webkit-overflow-scrolling: touch;
      }
      .studio-bottom-bar {
        padding: 8px 0 0; flex-shrink: 0;
      }
      .studio-nav {
        flex-shrink: 0;
        padding-bottom: 4px;
      }
      .studio-title { font-size: 1.1rem; margin-bottom: 2px; }
      .studio-subtitle { font-size: 0.78rem; margin-bottom: 8px; }
    }

    .discover-section {
      flex: 1;
      display: flex;
      flex-direction: column;
      padding: 1.5rem 1.5rem 1.5rem;
      overflow-y: auto;
      gap: 2rem;
      width: 100%;
      min-height: 0;
      scrollbar-width: none;
      -ms-overflow-style: none;
    }
    @media (max-width: 639px) {
      .discover-section {
        padding-left: 0 !important;
        padding-right: 0 !important;
      }
    }
    .discover-section::-webkit-scrollbar {
      display: none;
      width: 0;
      height: 0;
    }
    .discover-section.app-window-active {
      padding: 0 !important;
      border-radius: 0 !important;
      gap: 0;
      align-items: stretch;
    }
    @media (min-width: 641px) {
      .discover-section {
        padding-bottom: 0;
      }
      .discover-section.app-window-active {
        padding-bottom: 0 !important;
      }
    }
    .discover-section-inner {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 1.75rem;
      min-height: 0;
    }
    .discover-section.app-window-active .discover-section-inner {
      gap: 0;
      flex: 1;
      padding: 0;
      height: 100%;
      min-height: 0;
    }
    .discover-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      margin-bottom: 1.5rem;
    }
    .discover-header-left {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      flex: 1;
    }
    .discover-header-right {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      flex: 1;
    }
    .discover-chart-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      padding: 0.625rem 1.25rem;
      border-radius: 999px;
      border: 1px solid rgba(148,163,184,0.2);
      background: rgba(148,163,184,0.08);
      color: var(--text-secondary);
      font-size: 0.875rem;
      font-weight: 500;
      transition: all 0.2s ease;
      cursor: pointer;
    }
    .discover-chart-btn svg {
      width: 18px;
      height: 18px;
    }
    .discover-chart-label {
      white-space: nowrap;
    }
    .discover-chart-btn:hover {
      background: rgba(148,163,184,0.12);
      border-color: rgba(148,163,184,0.25);
      color: var(--text-primary);
    }
    :root.theme-dark .discover-chart-btn {
      border: 1px solid rgba(255,255,255,0.15);
      background: rgba(255,255,255,0.08);
      color: rgba(255,255,255,0.7);
    }
    :root.theme-dark .discover-chart-btn:hover {
      background: rgba(255,255,255,0.12);
      border-color: rgba(255,255,255,0.2);
      color: rgba(255,255,255,0.9);
    }
    .discover-header-title {
      font-size: 1.25rem;
      font-weight: 600;
      color: var(--text-primary);
      margin: 0;
      letter-spacing: -0.01em;
    }
    .discover-content {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 0;
      min-height: 0;
      overflow-y: auto;
    }
    .discover-section.app-window-active .discover-content {
      gap: 0;
      flex: 1;
      padding: 0;
      height: 100%;
      min-height: 0;
      display: flex;
      flex-direction: column;
    }

    .discover-section.app-window-active .discover-header,
    .discover-section.app-window-active #discover-list-view,
    .discover-section.app-window-active #discover-detail-view {
      display: none !important;
    }

    .discover-section.app-window-active .app-window-view {
      flex: 1;
      min-height: 0;
      height: 100%;
      padding: 0 !important;
      margin: 0 !important;
    }

    .discover-section.app-window-active .app-window-card,
    .discover-section.app-window-active .app-window-stage,
    .discover-section.app-window-active .app-window-iframe {
      flex: 1;
      min-height: 0;
      height: 100%;
      margin: 0;
      padding: 0;
    }
    .discover-list-view {
      display: flex;
      flex-direction: column;
      gap: 1.25rem;
      transition: opacity 0.15s ease-out, transform 0.15s ease-out;
      will-change: opacity, transform;
    }
    @media (max-width: 639px) {
      .discover-list-view {
        position: relative;
        width: 100%;
        margin: 0;
        padding-top: 0;
        padding-bottom: 1rem;
        z-index: 5;
        border-bottom-left-radius: 1.5rem;
        border-bottom-right-radius: 1.5rem;
      }
      .discover-content {
        position: relative;
        flex: 1;
        min-height: 0;
        height: 100%;
        max-height: 100%;
        display: flex;
        flex-direction: column;
        padding-top: 0.25rem;
        padding-bottom: 1rem;
        padding-left: 0 !important;
        padding-right: 0 !important;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: rgba(148,163,184,0.3) transparent;
      }
      .discover-content::-webkit-scrollbar {
        width: 6px;
      }
      .discover-content::-webkit-scrollbar-track {
        background: transparent;
      }
      .discover-content::-webkit-scrollbar-thumb {
        background: rgba(148,163,184,0.3);
        border-radius: 3px;
      }
      .discover-content::-webkit-scrollbar-thumb:hover {
        background: rgba(148,163,184,0.5);
      }
    }
    .discover-grid {
      display: flex;
      flex-direction: column;
      gap: 0;
      width: 100%;
      padding: 0;
    }
    .discover-card {
      position: relative;
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 1rem;
      padding: 1rem 1.1rem;
      border-radius: 0;
      border: none;
      border-bottom: 1px solid rgba(148, 163, 184, 0.1);
      background: transparent;
      text-align: left;
      color: var(--text-primary);
      cursor: pointer;
      pointer-events: auto;
      box-shadow: none;
      min-height: auto;
      transition: background 0.2s ease;
    }
    .discover-card:last-child {
      border-bottom: none;
    }
    .discover-card:hover {
      background: rgba(248, 250, 252, 0.6);
    }
    :root.theme-dark .discover-card {
      border-bottom-color: rgba(255, 255, 255, 0.08);
      background: transparent;
    }
    :root.theme-dark .discover-card:hover {
      background: rgba(40, 40, 43, 0.6);
    }
    .discover-card-icon {
      width: 56px;
      height: 56px;
      min-width: 56px;
      border-radius: 14px;
      background: rgba(248, 250, 252, 0.8);
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      border: 1px solid rgba(15, 23, 42, 0.06);
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    }
    :root.theme-dark .discover-card-icon {
      background: rgba(40,40,43,0.9);
      border: 1px solid rgba(255,255,255,0.1);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
    .discover-card-icon img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 24px;
    }
    .discover-card-info {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 0.25rem;
      min-width: 0;
      margin: 0;
      align-items: flex-start;
      text-align: left;
    }
    .discover-card-title-row {
      display: flex;
      align-items: flex-start;
      justify-content: flex-start;
      gap: 0.5rem;
      flex-wrap: wrap;
      width: 100%;
    }
    .discover-card-name {
      font-size: 1rem;
      font-weight: 600;
      letter-spacing: -0.01em;
      color: var(--text-primary);
      line-height: 1.4;
      flex: 1;
      min-width: 0;
      text-align: left;
      margin: 0;
    }
    .discover-card-category {
      font-size: 0.813rem;
      color: var(--text-secondary);
      line-height: 1.4;
      margin: 0;
      text-align: left;
    }
    .discover-card-description {
      display: none;
    }
    .discover-card-meta {
      display: none;
    }
    .discover-card-badge {
      font-size: 0.7rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: rgba(37,99,235,0.9);
      background: rgba(37,99,235,0.1);
      border-radius: 6px;
      padding: 0.25rem 0.6rem;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin-top: 0.25rem;
    }
    :root.theme-dark .discover-card-badge {
      color: rgba(147,197,253,0.95);
      background: rgba(37,99,235,0.2);
    }
    .discover-card-cta {
      position: absolute;
      right: 1.4rem;
      top: 50%;
      display: block;
      padding: 0;
      background: transparent;
      border: none;
      color: transparent;
      font-size: 0;
      cursor: pointer;
      z-index: 10;
      pointer-events: none;
      width: 12px;
      height: 12px;
      margin-top: -6px;
    }
    .discover-card-cta::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 12px;
      height: 12px;
      border-right: 3.5px solid rgba(100, 116, 139, 0.6);
      border-top: 3.5px solid rgba(100, 116, 139, 0.6);
      transform: rotate(45deg);
      display: block;
    }
    :root.theme-dark .discover-card-cta::before {
      border-right-color: rgba(148, 163, 184, 0.6);
      border-top-color: rgba(148, 163, 184, 0.6);
    }
    .discover-card-cta:hover::before {
      border-right-color: rgba(100, 116, 139, 0.8);
      border-top-color: rgba(100, 116, 139, 0.8);
    }
    :root.theme-dark .discover-card-cta:hover::before {
      border-right-color: rgba(148, 163, 184, 0.8);
      border-top-color: rgba(148, 163, 184, 0.8);
    }

    /* Featured Tabs */
    .discover-featured-tabs {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
      padding: 1rem 1.1rem 1.25rem;
      margin-bottom: 0.5rem;
    }
    .discover-tabs-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0.5rem;
    }
    .discover-featured-tab {
      padding: 0.65rem 1rem;
      border-radius: 12px;
      border: 1px solid rgba(148, 163, 184, 0.2);
      background: rgba(248, 250, 252, 0.6);
      color: var(--text-secondary);
      font-size: 0.875rem;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s ease;
      text-align: center;
    }
    .discover-featured-tab:hover {
      background: rgba(241, 245, 249, 0.9);
      border-color: rgba(148, 163, 184, 0.3);
      color: var(--text-primary);
    }
    .discover-featured-tab.active {
      background: rgba(37, 99, 235, 0.1);
      border-color: rgba(37, 99, 235, 0.3);
      color: rgba(37, 99, 235, 0.95);
      font-weight: 600;
    }
    :root.theme-dark .discover-featured-tab {
      background: rgba(40, 40, 43, 0.6);
      border-color: rgba(255, 255, 255, 0.15);
      color: rgba(255, 255, 255, 0.7);
    }
    :root.theme-dark .discover-featured-tab:hover {
      background: rgba(45, 45, 48, 0.9);
      border-color: rgba(255, 255, 255, 0.2);
      color: rgba(255, 255, 255, 0.9);
    }
    :root.theme-dark .discover-featured-tab.active {
      background: rgba(37, 99, 235, 0.2);
      border-color: rgba(37, 99, 235, 0.4);
      color: rgba(147, 197, 253, 0.95);
    }

    /* Bottom Navigation Bar */
    .discover-bottom-nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 1rem 1.5rem;
      border-top: 1px solid rgba(148, 163, 184, 0.12);
      background: rgba(255, 255, 255, 0.5);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      margin-top: auto;
      flex-shrink: 0;
    }
    :root.theme-dark .discover-bottom-nav {
      border-top-color: rgba(255, 255, 255, 0.1);
      background: rgba(28, 28, 30, 0.5);
    }
    .discover-nav-back,
    .discover-nav-refresh,
    .discover-nav-chart {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.6rem;
      padding: 0.65rem 1rem;
      border-radius: 12px;
      border: none;
      background: transparent;
      color: var(--text-secondary);
      font-size: 0.9375rem;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    .discover-nav-back svg,
    .discover-nav-refresh svg,
    .discover-nav-chart svg {
      width: 20px;
      height: 20px;
    }
    .discover-nav-back:hover,
    .discover-nav-refresh:hover,
    .discover-nav-chart:hover {
      background: rgba(148, 163, 184, 0.1);
      color: var(--text-primary);
    }
    :root.theme-dark .discover-nav-back:hover,
    :root.theme-dark .discover-nav-refresh:hover,
    :root.theme-dark .discover-nav-chart:hover {
      background: rgba(255, 255, 255, 0.1);
      color: rgba(255, 255, 255, 0.9);
    }
    .discover-nav-chart {
      margin-left: auto;
    }

    /* Desktop-specific styles */
    @media (min-width: 640px) {
      .discover-bottom-nav {
        padding: 1.25rem 2rem;
      }
      .discover-nav-back,
      .discover-nav-refresh,
      .discover-nav-chart {
        padding: 0.75rem 1.25rem;
        font-size: 1rem;
      }
      .discover-nav-back svg,
      .discover-nav-refresh svg,
      .discover-nav-chart svg {
        width: 22px;
        height: 22px;
      }
      
      /* Fix app list just above bottom bar on desktop */
      .discover-section-inner {
        position: relative;
        display: flex;
        flex-direction: column;
        height: 100%;
        border-bottom-left-radius: 1.5rem;
        border-bottom-right-radius: 1.5rem;
        overflow: hidden;
      }
      .discover-content {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 90px; /* Space for bottom nav - increased for bigger bar */
        padding-bottom: 0;
        overflow-y: auto;
        margin-bottom: 0;
      }
      .discover-bottom-nav {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 10;
        margin-top: 0;
        border-bottom-left-radius: 1.5rem;
        border-bottom-right-radius: 1.5rem;
      }
      .discover-grid {
        padding: 0;
        margin: 0;
        max-width: 100%;
      }
      .discover-card {
        padding: 1.1rem 1.5rem;
        align-items: center;
        width: 100%;
        max-width: 100%;
      }
    }

/* Discover list app-store styling overrides (mobile only) */
@media (max-width: 639px) {
  #open-state.discover-active .card-container > .w-full.max-w-3xl > .rounded-3xl,
  #open-state:has(#discover-view:not(.hidden)) .card-container > .w-full.max-w-3xl > .rounded-3xl {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0.0625rem !important;
  }
  #open-state.discover-active .card-container > .w-full.max-w-3xl,
  #open-state:has(#discover-view:not(.hidden)) .card-container > .w-full.max-w-3xl {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
  }
  #discover-view .discover-section,
  .discover-section {
    padding: 0 !important;
    margin: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  #discover-view .discover-section-inner,
  .discover-section-inner {
    padding: 0 !important;
    margin: 0 !important;
    gap: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  #discover-view .discover-content,
  .discover-content {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
    gap: 0 !important;
  }
  .discover-header {
    margin-bottom: 0 !important;
    padding: 0.15rem 1.1rem 1.25rem !important;
    position: relative;
    z-index: 10;
    background: var(--bg-card);
  }
  .discover-header-left,
  .discover-header-right {
    margin: 0 !important;
  }
  @media (max-width: 640px) {
    .discover-header-left {
      padding-left: 0.75rem !important;
      padding-right: 0 !important;
      padding-top: 0 !important;
      padding-bottom: 0 !important;
    }
    .discover-header-right {
      padding-right: 0.75rem !important;
      padding-left: 0 !important;
      padding-top: 0 !important;
      padding-bottom: 0 !important;
    }
  }
  .discover-detail-view {
    padding-left: 1.1rem !important;
    padding-right: 1.1rem !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .discover-detail-back {
    width: 42px;
    height: 42px;
  }
  .discover-detail-back svg {
      width: 16px;
      height: 16px;
    display: block;
  }
  #open-state.discover-active,
  #open-state.discover-active .card-container,
  #open-state.discover-active .card-container > .w-full.max-w-3xl,
  #open-state.discover-active .card-container > .w-full.max-w-3xl > .rounded-3xl,
  #open-state:has(#discover-view:not(.hidden)),
  #open-state:has(#discover-view:not(.hidden)) .card-container,
  #open-state:has(#discover-view:not(.hidden)) .card-container > .w-full.max-w-3xl,
  #open-state:has(#discover-view:not(.hidden)) .card-container > .w-full.max-w-3xl > .rounded-3xl {
    overflow: hidden;
  }
  @media (max-width: 639px) {
    #discover-view,
    #discover-view .discover-section,
    #discover-view .discover-section-inner {
      overflow: hidden !important;
    }
  }
  @media (min-width: 640px) {
    #discover-view,
    #discover-view .discover-section {
      overflow: hidden !important;
    }
    #discover-view .discover-section-inner {
      overflow: hidden !important;
    }
  }
  #discover-view .discover-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    padding: 0;
    margin: 0;
    max-width: 100%;
    border-radius: 0;
    border-bottom-left-radius: 1.5rem;
    border-bottom-right-radius: 1.5rem;
    box-shadow: none;
    overflow: hidden;
  }
  #discover-view .discover-card {
    position: relative;
    flex-direction: row;
    align-items: center;
    gap: 0.9rem;
    padding: 0.95rem 1.1rem;
    border-radius: 0;
    border: none;
    border-bottom: 1px solid rgba(15,23,42,0.07);
    background: var(--discover-card-bg, #f4f4f6);
    min-height: 92px;
    cursor: pointer;
    transition: background 0.2s ease;
  }
  #discover-view .discover-card:hover {
    background: var(--discover-card-bg-hover, #ececef);
  }
  #discover-view .discover-card:last-child {
    border-bottom: none;
    border-bottom-left-radius: 1.5rem;
    border-bottom-right-radius: 1.5rem;
  }
  :root.theme-dark #discover-view .discover-card {
    color: rgba(248,250,252,0.92);
    background: var(--discover-card-bg, #1c1f29);
    border-bottom: 1px solid rgba(148,163,184,0.12);
  }
  #discover-view .discover-card-icon {
    width: 54px;
    height: 54px;
    margin: 0;
    border-radius: 14px;
    border: 1px solid rgba(15,23,42,0.08);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35);
    background: rgba(248,250,252,0.95);
  }
  :root.theme-dark #discover-view .discover-card-icon {
    border: 1px solid rgba(255,255,255,0.15);
    background: rgba(32,39,52,0.92);
  }
  #discover-view .discover-card-info {
    align-items: flex-start;
    text-align: left;
    margin-bottom: 0;
    gap: 0.2rem;
  }
  #discover-view .discover-card-title-row {
    justify-content: flex-start;
    gap: 0.3rem;
    flex-wrap: nowrap;
  }
  #discover-view .discover-card-name {
    font-size: 1rem;
  }
  #discover-view .discover-card-category {
    margin-bottom: 0;
    font-size: 0.85rem;
    color: rgba(71,85,105,0.85);
  }
  :root.theme-dark #discover-view .discover-card-category {
    color: rgba(203,213,225,0.85);
  }
  #discover-view .discover-card-description {
    display: block;
    font-size: 0.85rem;
    color: rgba(71,85,105,0.9);
    margin-bottom: 0;
  }
  :root.theme-dark #discover-view .discover-card-description {
    color: rgba(203,213,225,0.85);
  }
  #discover-view .discover-card:nth-child(odd) {
    --discover-card-bg: #f7f7f9;
    --discover-card-bg-hover: #efeff2;
  }
  #discover-view .discover-card:nth-child(even) {
    --discover-card-bg: #ededf1;
    --discover-card-bg-hover: #e4e4ea;
  }
  :root.theme-dark #discover-view .discover-card:nth-child(odd) {
    --discover-card-bg: #202431;
    --discover-card-bg-hover: #1d202c;
  }
  :root.theme-dark #discover-view .discover-card:nth-child(even) {
    --discover-card-bg: #191d27;
    --discover-card-bg-hover: #161923;
  }
  .discover-card-meta {
      display: none;
    }
  .discover-card-badge {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(37,99,235,0.9);
    background: rgba(37,99,235,0.1);
    border-radius: 6px;
    padding: 0.25rem 0.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.25rem;
  }
  :root.theme-dark .discover-card-badge {
    color: rgba(147,197,253,0.95);
    background: rgba(37,99,235,0.2);
  }
  #discover-view .discover-card-cta {
    right: 1.4rem;
    width: 12px;
    height: 12px;
    margin-top: -6px;
  }
}

/* Discover list app-store styling overrides (desktop) */
@media (min-width: 640px) {
  #open-state.discover-active,
  #open-state.discover-active .card-container,
  #open-state.discover-active .card-container > .w-full.max-w-3xl,
  #open-state.discover-active .card-container > .w-full.max-w-3xl > .rounded-3xl,
  #open-state:has(#discover-view:not(.hidden)),
  #open-state:has(#discover-view:not(.hidden)) .card-container,
  #open-state:has(#discover-view:not(.hidden)) .card-container > .w-full.max-w-3xl,
  #open-state:has(#discover-view:not(.hidden)) .card-container > .w-full.max-w-3xl > .rounded-3xl,
  #discover-view,
  #discover-view .discover-section,
  #discover-view .discover-section-inner {
    overflow: visible !important;
  }
  #discover-view .discover-section {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }
  .discover-header {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
  #discover-view .discover-section-inner {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }
  #open-state.discover-active .card-container > .w-full.max-w-3xl > .rounded-3xl,
  #open-state:has(#discover-view:not(.hidden)) .card-container > .w-full.max-w-3xl > .rounded-3xl {
    padding-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: hidden;
  }
  .discover-list-view {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    margin: 0;
    margin-bottom: 0;
    padding-bottom: 0;
    z-index: 5;
    border-bottom-left-radius: 1.5rem;
    border-bottom-right-radius: 1.5rem;
    overflow: hidden;
  }
  .discover-content {
    position: relative;
    flex: 1;
    min-height: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding-top: 2rem;
    padding-bottom: 0;
    padding-left: 40px;
    padding-right: 40px;
    margin-bottom: 0;
    overflow: visible;
  }
  #discover-view .discover-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    width: 100%;
    padding: 0;
    margin: 0;
    max-width: 100%;
    border-radius: 0;
    overflow: visible;
    box-shadow: none;
    border-bottom-left-radius: 1.5rem;
    border-bottom-right-radius: 1.5rem;
  }
  #discover-view .discover-card {
    position: relative;
    flex-direction: row;
    align-items: center;
    gap: 0.85rem;
    padding: 1rem 1.1rem;
    border-radius: 0;
    border: 0.5px solid rgba(148,163,184,0.4);
    border-left-width: 0;
    border-top-width: 0;
    border-bottom-width: 0.5px;
    border-bottom-color: rgba(148,163,184,0.4);
    border-left-color: rgba(148,163,184,0.4);
    border-right-color: rgba(148,163,184,0.4);
    background: var(--discover-card-bg, #f4f4f6);
    box-shadow: none;
    min-height: 110px;
  }
  #discover-view .discover-card:nth-child(3n + 1) {
    border-left-width: 0;
    border-right-width: 0.5px;
  }
  #discover-view .discover-card:nth-child(3n + 2) {
    border-left-width: 0.5px;
    border-right-width: 0;
  }
  #discover-view .discover-card:nth-child(3n) {
    border-left-width: 0.5px;
    border-right-width: 0;
  }
  #discover-view .discover-card:nth-child(-n + 3) {
    border-top-width: 0;
  }
  #discover-view .discover-card:nth-last-child(3n + 1) {
    border-bottom-width: 0.5px;
    border-left-width: 0;
  }
  #discover-view .discover-card:nth-last-child(-n + 3):nth-child(3n) {
    border-bottom-width: 0.5px;
  }
  #discover-view .discover-card:nth-last-child(-n + 3):not(:nth-child(3n)):not(:nth-last-child(3n + 1)) {
    border-bottom-width: 0.5px;
  }
  #discover-view .discover-card:nth-child(6n + 1),
  #discover-view .discover-card:nth-child(6n + 2),
  #discover-view .discover-card:nth-child(6n + 3) {
    --discover-card-bg: #ededf1;
    --discover-card-bg-hover: #e4e4ea;
  }
  #discover-view .discover-card:nth-child(6n + 4),
  #discover-view .discover-card:nth-child(6n + 5),
  #discover-view .discover-card:nth-child(6n + 6) {
    --discover-card-bg: #f7f7f9;
    --discover-card-bg-hover: #efeff2;
  }
  :root.theme-dark #discover-view .discover-card:nth-child(6n + 1),
  :root.theme-dark #discover-view .discover-card:nth-child(6n + 2),
  :root.theme-dark #discover-view .discover-card:nth-child(6n + 3) {
    --discover-card-bg: #191d27;
    --discover-card-bg-hover: #161923;
  }
  :root.theme-dark #discover-view .discover-card:nth-child(6n + 4),
  :root.theme-dark #discover-view .discover-card:nth-child(6n + 5),
  :root.theme-dark #discover-view .discover-card:nth-child(6n + 6) {
    --discover-card-bg: #202431;
    --discover-card-bg-hover: #1d202c;
  }
  #discover-view .discover-card:hover {
    background: var(--discover-card-bg, #f4f4f6);
    transform: none;
    border-color: rgba(148,163,184,0.4);
    border-bottom-color: rgba(148,163,184,0.4);
    border-left-color: rgba(148,163,184,0.4);
    border-right-color: rgba(148,163,184,0.4);
    box-shadow: none;
  }
  :root.theme-dark #discover-view .discover-card:hover {
    background: var(--discover-card-bg, #1c1f29);
    transform: none;
    border-color: rgba(148,163,184,0.4);
    border-bottom-color: rgba(148,163,184,0.4);
    border-left-color: rgba(148,163,184,0.4);
    border-right-color: rgba(148,163,184,0.4);
    box-shadow: none;
  }
  :root.theme-dark #discover-view .discover-grid {
    box-shadow: none;
  }
  :root.theme-dark #discover-view .discover-card {
    color: rgba(248,250,252,0.92);
    background: var(--discover-card-bg, #1c1f29);
    border-color: rgba(148,163,184,0.4);
    border-bottom-color: rgba(148,163,184,0.4);
    border-left-color: rgba(148,163,184,0.4);
    border-right-color: rgba(148,163,184,0.4);
  }
  #discover-view .discover-card-icon {
    width: 60px;
    height: 60px;
    margin: 0;
    border-radius: 16px;
    border: 1px solid rgba(15,23,42,0.08);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35);
    background: rgba(248,250,252,0.95);
  }
  :root.theme-dark #discover-view .discover-card-icon {
    border: 1px solid rgba(255,255,255,0.15);
    background: rgba(32,39,52,0.92);
  }
  #discover-view .discover-card-info {
    align-items: flex-start;
    text-align: left;
    margin-bottom: 0;
    gap: 0.3rem;
  }
  #discover-view .discover-card-title-row {
    justify-content: flex-start;
    gap: 0.4rem;
    flex-wrap: nowrap;
  }
  #discover-view .discover-card-name {
    font-size: 1.05rem;
  }
  #discover-view .discover-card-category {
    margin-bottom: 0;
    font-size: 0.9rem;
    color: rgba(71,85,105,0.85);
  }
  :root.theme-dark #discover-view .discover-card-category {
    color: rgba(203,213,225,0.85);
  }
  #discover-view .discover-card-description {
    display: block;
    font-size: 0.9rem;
    color: rgba(71,85,105,0.9);
    margin-bottom: 0;
  }
  :root.theme-dark #discover-view .discover-card-description {
    color: rgba(203,213,225,0.85);
  }
    .discover-card-meta {
    display: none;
  }
  #discover-view .discover-card-cta {
    right: 1.4rem;
    width: 12px;
    height: 12px;
    margin-top: -6px;
  }
    }
    .discover-detail-view {
      display: flex;
      flex-direction: column;
      gap: 2rem;
      padding: 0 40px;
      border-radius: 0;
      border: none;
      background: transparent;
      box-shadow: none;
      max-height: calc(100vh - 200px);
      overflow-y: auto;
      scrollbar-width: none;
      -ms-overflow-style: none;
    }
    @media (min-width: 640px) {
      #open-state.discover-active .card-container > .w-full.max-w-3xl > .rounded-3xl {
        display: flex;
        flex-direction: column;
        min-height: 0;
      }
      #open-state.discover-active:has(.discover-section.detail-active) .card-container > .w-full.max-w-3xl > .rounded-3xl {
        padding-top: 0.75rem !important;
      }
      #discover-view {
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
      }
      .discover-section.detail-active {
        position: relative;
        flex: 1;
        min-height: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
      }
      .discover-section.detail-active .discover-header {
        padding: 0 36px 0 32px;
        margin-bottom: 0.15rem;
        margin-top: 0;
        align-items: flex-start;
      }
      .discover-section.detail-active .discover-header-left {
        padding: 0;
        margin: 0;
        flex: 0 0 auto;
      }
      .discover-section.detail-active #discover-refresh,
      .discover-section.detail-active .discover-header-right {
        display: none !important;
      }
      .discover-section.detail-active .discover-detail-back {
        margin-left: -10px;
        margin-top: 8px;
      }
      .discover-section.detail-active .discover-section-inner {
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        padding-top: 0;
      }
      .discover-section.detail-active .discover-content {
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
        position: relative;
        overflow: hidden;
        padding-top: 0;
      }
      .discover-detail-view {
        position: absolute;
        top: 1.2rem;
        left: 0;
        right: 0;
        flex: 1;
        min-height: 0;
        max-height: none;
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        padding: 0 40px 1rem;
        bottom: 0;
      }
      #open-state.discover-active .search-container {
        display: flex !important;
        flex-shrink: 0;
      }
    }
    .discover-detail-view::-webkit-scrollbar {
      display: none;
      width: 0;
      height: 0;
    }
    .discover-detail-view.hidden {
      display: none !important;
    }
    .discover-detail-visible {
      animation: fadeWindow 0.18s ease-out forwards;
      will-change: opacity, transform;
    }
    .discover-detail-nav {
      display: none;
    }
    .discover-detail-back {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      border-radius: 999px;
      border: 1px solid rgba(148,163,184,0.2);
      background: rgba(148,163,184,0.08);
      color: var(--text-secondary);
      transition: all 0.2s ease;
      flex-shrink: 0;
      cursor: pointer;
    }
    :root.theme-dark .discover-detail-back {
      border: 1px solid rgba(255,255,255,0.15);
      background: rgba(255,255,255,0.08);
      color: rgba(255,255,255,0.7);
    }
    .header-back {
      opacity: 0.5;
      cursor: pointer;
    }
    .header-back:disabled {
      opacity: 0.35;
      pointer-events: none;
      cursor: default;
    }
    .header-back.is-active {
      opacity: 1;
    }
    .discover-detail-back svg {
      width: 20px;
      height: 20px;
    }
    .discover-detail-back:hover {
      background: rgba(148,163,184,0.12);
      border-color: rgba(148,163,184,0.25);
      color: var(--text-primary);
      transform: translateX(-2px);
    }
    :root.theme-dark .discover-detail-back:hover {
      background: rgba(255,255,255,0.12);
      border-color: rgba(255,255,255,0.2);
      color: rgba(255,255,255,0.9);
    }
    .discover-detail-card {
      display: flex;
      flex-direction: column;
      gap: 2rem;
    }
    .discover-detail-header {
      display: flex;
      gap: 1.5rem;
      align-items: flex-start;
      padding-bottom: 1.5rem;
      border-bottom: 1px solid rgba(148,163,184,0.15);
    }
    :root.theme-dark .discover-detail-header {
      border-bottom-color: rgba(255,255,255,0.1);
    }
    .discover-detail-icon {
      width: 120px;
      height: 120px;
      border-radius: 26px;
      background: var(--bg-card);
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      border: 1px solid rgba(15,23,42,0.08);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
      flex-shrink: 0;
    }
    :root.theme-dark .discover-detail-icon {
      background: rgba(40,40,43,1);
      border: 1px solid rgba(255,255,255,0.1);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }
    .discover-detail-icon img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    /* Book cover — tall portrait like Apple Books */
    .discover-detail-icon.cover-book {
      width: 120px;
      height: 180px;
      border-radius: 6px;
      box-shadow: 0 4px 20px rgba(0,0,0,0.12), 2px 2px 8px rgba(0,0,0,0.08);
    }
    :root.theme-dark .discover-detail-icon.cover-book {
      box-shadow: 0 4px 20px rgba(0,0,0,0.35), 2px 2px 8px rgba(0,0,0,0.25);
    }
    /* Podcast cover — big rounded square like Apple Podcasts */
    .discover-detail-icon.cover-podcast {
      width: 150px;
      height: 150px;
      border-radius: 12px;
    }
    /* Video cover — big rounded square */
    .discover-detail-icon.cover-video {
      width: 150px;
      height: 150px;
      border-radius: 12px;
    }
    /* Course cover — big rounded square */
    .discover-detail-icon.cover-course {
      width: 150px;
      height: 150px;
      border-radius: 12px;
    }
    .discover-detail-heading {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }
    .discover-detail-heading h2 {
      font-size: 1.85rem;
      font-weight: 700;
      color: var(--text-primary);
      margin: 0;
      letter-spacing: -0.02em;
      line-height: 1.2;
    }
    .discover-detail-heading p {
      font-size: 1rem;
      color: var(--text-secondary);
      margin: 0;
    }
    .discover-pin-btn {
      align-self: flex-start;
      margin-top: 0.25rem;
      padding: 0.4rem 0.95rem;
      border-radius: 999px;
      border: 1px solid rgba(148,163,184,0.32);
      background: transparent;
      color: var(--text-secondary);
      font-size: 0.85rem;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
    }
    .discover-pin-btn:hover {
      background: rgba(59,130,246,0.12);
      color: rgba(37,99,235,0.9);
      border-color: rgba(59,130,246,0.35);
    }
    .discover-pin-btn:disabled {
      opacity: 0.45;
      cursor: default;
      background: transparent;
      border-color: rgba(148,163,184,0.22);
    }
    .discover-pin-btn.pinned {
      background: rgba(37,99,235,0.12);
      color: rgba(37,99,235,0.95);
      border-color: rgba(37,99,235,0.35);
    }
    .discover-detail-body {
      display: flex;
      flex-direction: column;
      gap: 1.75rem;
    }
    .discover-detail-body p {
      font-size: 1rem;
      color: var(--text-secondary);
      line-height: 1.7;
    }
    .discover-detail-meta {
      display: grid;
      gap: 1rem;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
    @media (min-width: 768px) {
      .discover-detail-meta {
        grid-template-columns: repeat(2, 1fr);
      }
    }
    .discover-detail-meta-tile {
      background: rgba(248,250,252,0.8);
      border: 1px solid rgba(148,163,184,0.12);
      border-radius: 16px;
      padding: 1.25rem 1.5rem;
      transition: all 0.2s ease;
    }
    .discover-detail-meta-tile:hover {
      background: rgba(241,245,249,0.95);
      border-color: rgba(148,163,184,0.2);
    }
    :root.theme-dark .discover-detail-meta-tile {
      background: rgba(40,40,43,0.8);
      border: 1px solid rgba(255,255,255,0.1);
    }
    :root.theme-dark .discover-detail-meta-tile:hover {
      background: rgba(45,45,48,0.95);
      border-color: rgba(255,255,255,0.15);
    }
    .discover-detail-meta-label {
      font-size: 0.75rem;
      color: var(--text-tertiary);
      text-transform: uppercase;
      letter-spacing: 0.1em;
      font-weight: 600;
      margin-bottom: 0.5rem;
    }
    .discover-detail-meta-value {
      font-size: 1.05rem;
      color: var(--text-primary);
      font-weight: 600;
      word-break: break-word;
      line-height: 1.4;
    }
    .discover-detail-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
      padding-top: 1rem;
    }
    .discover-detail-primary {
      flex: 1;
      min-width: 200px;
      padding: 1rem 2rem;
      border-radius: 14px;
      border: none;
      background: #007AFF;
      color: #FFFFFF;
      font-weight: 600;
      font-size: 1rem;
      cursor: pointer;
      box-shadow: 0 4px 16px rgba(0,122,255,0.25);
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .discover-detail-primary:hover {
      background: #0056CC;
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(0,122,255,0.35);
    }
    .discover-detail-primary:active {
      transform: translateY(0);
    }
    :root.theme-dark .discover-detail-primary {
      background: #0A84FF;
    }
    :root.theme-dark .discover-detail-primary:hover {
      background: #007AFF;
    }
    .discover-detail-secondary {
      flex: 1;
      min-width: 200px;
      padding: 1rem 2rem;
      border-radius: 14px;
      border: 1px solid rgba(148,163,184,0.2);
      background: rgba(255,255,255,0.8);
      color: var(--text-primary);
      font-weight: 600;
      font-size: 1rem;
      text-decoration: none;
      text-align: center;
      transition: all 0.2s ease;
    }
    .discover-detail-secondary:hover {
      background: rgba(248,250,252,0.95);
      border-color: rgba(148,163,184,0.3);
      transform: translateY(-1px);
    }
    :root.theme-dark .discover-detail-secondary {
      border: 1px solid rgba(255,255,255,0.15);
      background: rgba(40,40,43,0.8);
      color: rgba(255,255,255,0.9);
    }
    :root.theme-dark .discover-detail-secondary:hover {
      background: rgba(45,45,48,0.95);
      border-color: rgba(255,255,255,0.2);
    }
    .discover-detail-release {
      background: rgba(248,250,252,0.6);
      border-radius: 18px;
      padding: 1.5rem 1.75rem;
      border: 1px solid rgba(148,163,184,0.12);
    }
    :root.theme-dark .discover-detail-release {
      background: rgba(40,40,43,0.6);
      border: 1px solid rgba(255,255,255,0.1);
    }
    .discover-detail-release h3 {
      font-size: 0.95rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--text-primary);
      margin-bottom: 1rem;
    }
    .discover-detail-release p {
      color: var(--text-secondary);
      font-size: 0.95rem;
      line-height: 1.7;
      white-space: pre-line;
    }
    /* App Detail View Styles - positioned absolutely, matching discover-detail-view structure */
    .app-detail-view {
      background: var(--bg-card);
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 150;
      overflow: hidden;
      box-sizing: border-box;
      max-width: 100%;
      width: 100%;
      height: 100%;
      border-radius: 1.5rem;
      isolation: isolate;
    }
    /* Ensure solid, fully opaque background for both light and dark mode */
    :root.theme-light .app-detail-view {
      background: #FFFFFF !important;
    }
    :root.theme-dark .app-detail-view {
      background: #1C1C1C !important;
    }
    /* Hide discover-view content when app-detail-view is visible - using class-based approach AND direct selector */
    #discover-view.app-detail-active .launcher-stack-wrapper,
    #discover-view.app-detail-active #discover-apps-container,
    #discover-view.app-detail-active #discover-apps-grid,
    #discover-view.app-detail-active #discover-top-charts,
    #discover-view.app-detail-active #discover-categories,
    #discover-view.app-detail-active #discover-pin-grid,
    /* Also hide when app-detail-view is not hidden (backup approach) */
    #discover-view:has(#app-detail-view:not(.hidden)) .launcher-stack-wrapper,
    #discover-view:has(#app-detail-view:not(.hidden)) #discover-apps-container,
    #discover-view:has(#app-detail-view:not(.hidden)) #discover-apps-grid,
    #discover-view:has(#app-detail-view:not(.hidden)) #discover-top-charts,
    #discover-view:has(#app-detail-view:not(.hidden)) #discover-categories,
    #discover-view:has(#app-detail-view:not(.hidden)) #discover-pin-grid,
    /* Immediate hide when app-detail-view is about to show */
    #discover-view:has(#app-detail-view.hidden:not(.hidden)) .launcher-stack-wrapper,
    #discover-view:has(#app-detail-view.hidden:not(.hidden)) #discover-apps-container,
    #discover-view:has(#app-detail-view.hidden:not(.hidden)) #discover-apps-grid,
    #discover-view:has(#app-detail-view.hidden:not(.hidden)) #discover-top-charts,
    #discover-view:has(#app-detail-view.hidden:not(.hidden)) #discover-categories,
    #discover-view:has(#app-detail-view.hidden:not(.hidden)) #discover-pin-grid {
      display: none !important;
      opacity: 0 !important;
      visibility: hidden !important;
      pointer-events: none !important;
      height: 0 !important;
      overflow: hidden !important;
      margin: 0 !important;
      padding: 0 !important;
      position: absolute !important;
      left: -9999px !important;
      width: 0 !important;
      clip: rect(0, 0, 0, 0) !important;
    }
    /* Hide all discover content when app-detail-view is active - works in both light and dark mode */
    #discover-view.app-detail-active > .launcher-stack-wrapper,
    #discover-view:has(#app-detail-view:not(.hidden)) > .launcher-stack-wrapper {
      display: none !important;
      opacity: 0 !important;
      visibility: hidden !important;
      height: 0 !important;
      overflow: hidden !important;
      position: absolute !important;
      left: -9999px !important;
      width: 0 !important;
    }
    /* Dark mode specific - ensure background is fully opaque and z-index is correct */
    :root.theme-dark #discover-view.app-detail-active .app-detail-view,
    :root.theme-dark #discover-view:has(#app-detail-view:not(.hidden)) .app-detail-view {
      background: #1C1C1C !important;
      z-index: 150 !important;
      position: relative;
    }
    /* Add a pseudo-element overlay in dark mode to ensure complete coverage */
    :root.theme-dark #discover-view.app-detail-active .app-detail-view::before,
    :root.theme-dark #discover-view:has(#app-detail-view:not(.hidden)) .app-detail-view::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: #1C1C1C;
      z-index: -1;
      border-radius: 1.5rem;
    }
    /* Lower z-index for discover content when app-detail-view is active - ensure it stays behind */
    #discover-view.app-detail-active .launcher-stack-wrapper,
    #discover-view.app-detail-active #discover-apps-container,
    #discover-view.app-detail-active #discover-apps-grid {
      z-index: 1 !important;
      position: relative;
    }
    /* Dark mode: ensure discover content has lower z-index and is truly hidden */
    :root.theme-dark #discover-view.app-detail-active .launcher-stack-wrapper {
      z-index: 0 !important;
      position: relative;
    }
    /* Ensure app-detail-view creates a new stacking context in dark mode */
    :root.theme-dark #discover-view.app-detail-active .app-detail-view {
      isolation: isolate !important;
      will-change: transform;
    }
    /* Dark mode: aggressively hide all discover content */
    :root.theme-dark #discover-view.app-detail-active .launcher-stack-wrapper,
    :root.theme-dark #discover-view.app-detail-active #discover-apps-container,
    :root.theme-dark #discover-view.app-detail-active #discover-apps-grid,
    :root.theme-dark #discover-view.app-detail-active #discover-top-charts,
    :root.theme-dark #discover-view.app-detail-active #discover-categories,
    :root.theme-dark #discover-view.app-detail-active #discover-pin-grid,
    :root.theme-dark #discover-view:has(#app-detail-view:not(.hidden)) .launcher-stack-wrapper,
    :root.theme-dark #discover-view:has(#app-detail-view:not(.hidden)) #discover-apps-container,
    :root.theme-dark #discover-view:has(#app-detail-view:not(.hidden)) #discover-apps-grid,
    :root.theme-dark #discover-view:has(#app-detail-view:not(.hidden)) #discover-top-charts,
    :root.theme-dark #discover-view:has(#app-detail-view:not(.hidden)) #discover-categories,
    :root.theme-dark #discover-view:has(#app-detail-view:not(.hidden)) #discover-pin-grid {
      display: none !important;
      opacity: 0 !important;
      visibility: hidden !important;
      height: 0 !important;
      width: 0 !important;
      overflow: hidden !important;
      position: absolute !important;
      left: -9999px !important;
      clip: rect(0, 0, 0, 0) !important;
      pointer-events: none !important;
      margin: 0 !important;
      padding: 0 !important;
      border: none !important;
    }
    /* Dark mode: Separate containers with proper z-index layering */
    /* Base z-index for discover-view content */
    :root.theme-dark #discover-view {
      position: relative;
      z-index: 1;
      isolation: isolate;
    }
    /* App-window-view: separate container when active - all themes */
    /* CRITICAL: Set background immediately when visible, not just when .is-active */
    .app-window-view:not(.hidden) {
      background: #FFFFFF !important;
    }
    
    .app-window-view.is-active:not(.hidden) {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 101 !important;
      isolation: isolate !important;
      pointer-events: auto !important;
      background: #FFFFFF !important;
      border-radius: 1.5rem !important;
      overflow: hidden !important;
    }
    
    /* Light mode: ensure app-window-view has proper background and rounded corners when visible */
    :root.theme-light .app-window-view:not(.hidden),
    :root.theme-light .app-window-view.is-active:not(.hidden) {
      background: #FFFFFF !important;
      border-radius: 1.5rem !important;
      overflow: hidden !important;
    }
    
    /* App-window-view: separate container when visible in dark mode */
    :root.theme-dark .app-window-view:not(.hidden),
    :root.theme-dark .app-window-view.is-active:not(.hidden) {
      background: #1C1C1C !important;
      border-radius: 1.5rem !important;
      overflow: hidden !important;
    }
    
    /* System theme: ensure app-window-view has proper background and rounded corners when visible */
    @media (prefers-color-scheme: light) {
      .app-window-view:not(.hidden),
      .app-window-view.is-active:not(.hidden) {
        background: #FFFFFF !important;
        border-radius: 1.5rem !important;
        overflow: hidden !important;
      }
    }
    
    @media (prefers-color-scheme: dark) {
      :root:not(.theme-light) .app-window-view:not(.hidden),
      :root:not(.theme-light) .app-window-view.is-active:not(.hidden) {
        background: #1C1C1C !important;
        border-radius: 1.5rem !important;
        overflow: hidden !important;
      }
    }
    /* App-detail-view: separate container when active - highest priority */
    #app-detail-view:not(.hidden) {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 150 !important;
      isolation: isolate !important;
      pointer-events: auto !important;
    }
    
    /* Light mode: app-detail-view background */
    :root.theme-light #app-detail-view:not(.hidden) {
      background: #FFFFFF !important;
    }
    
    /* App-detail-view: separate container when active in dark mode - highest priority */
    :root.theme-dark #app-detail-view:not(.hidden) {
      background: #1C1C1C !important;
    }
    
    /* System theme: app-detail-view background */
    @media (prefers-color-scheme: light) {
      #app-detail-view:not(.hidden) {
        background: #FFFFFF !important;
      }
    }
    
    @media (prefers-color-scheme: dark) {
      :root:not(.theme-light) #app-detail-view:not(.hidden) {
        background: #1C1C1C !important;
      }
    }
    
    /* Hide app-detail-view when app-window-view is active to prevent overlap */
    #discover-view:has(.app-window-view.is-active:not(.hidden)) #app-detail-view,
    #discover-view.app-window-active #app-detail-view {
      display: none !important;
      opacity: 0 !important;
      visibility: hidden !important;
      z-index: 0 !important;
      pointer-events: none !important;
    }
    /* Hide discover content when app-window-view is active - all themes */
    #discover-view:has(.app-window-view.is-active:not(.hidden)) .launcher-stack-wrapper,
    #discover-view:has(.app-window-view.is-active:not(.hidden)) #discover-apps-container,
    #discover-view:has(.app-window-view.is-active:not(.hidden)) #discover-apps-grid,
    #discover-view:has(.app-window-view.is-active:not(.hidden)) #discover-top-charts,
    #discover-view:has(.app-window-view.is-active:not(.hidden)) #discover-categories,
    #discover-view:has(.app-window-view.is-active:not(.hidden)) #discover-pin-grid,
    #discover-view.app-window-active .launcher-stack-wrapper,
    #discover-view.app-window-active #discover-apps-container,
    #discover-view.app-window-active #discover-apps-grid,
    #discover-view.app-window-active #discover-top-charts,
    #discover-view.app-window-active #discover-categories,
    #discover-view.app-window-active #discover-pin-grid {
      display: none !important;
      opacity: 0 !important;
      visibility: hidden !important;
      height: 0 !important;
      width: 0 !important;
      overflow: hidden !important;
      position: absolute !important;
      left: -9999px !important;
      clip: rect(0, 0, 0, 0) !important;
      pointer-events: none !important;
      margin: 0 !important;
      padding: 0 !important;
      border: none !important;
    }
    
    /* Light mode: ensure discover content is hidden when app-window-view is active */
    :root.theme-light #discover-view:has(.app-window-view.is-active:not(.hidden)) .launcher-stack-wrapper,
    :root.theme-light #discover-view:has(.app-window-view.is-active:not(.hidden)) #discover-apps-container,
    :root.theme-light #discover-view:has(.app-window-view.is-active:not(.hidden)) #discover-apps-grid,
    :root.theme-light #discover-view:has(.app-window-view.is-active:not(.hidden)) #discover-top-charts,
    :root.theme-light #discover-view:has(.app-window-view.is-active:not(.hidden)) #discover-categories,
    :root.theme-light #discover-view:has(.app-window-view.is-active:not(.hidden)) #discover-pin-grid,
    :root.theme-light #discover-view.app-window-active .launcher-stack-wrapper,
    :root.theme-light #discover-view.app-window-active #discover-apps-container,
    :root.theme-light #discover-view.app-window-active #discover-apps-grid,
    :root.theme-light #discover-view.app-window-active #discover-top-charts,
    :root.theme-light #discover-view.app-window-active #discover-categories,
    :root.theme-light #discover-view.app-window-active #discover-pin-grid {
      display: none !important;
      opacity: 0 !important;
      visibility: hidden !important;
      height: 0 !important;
      width: 0 !important;
      overflow: hidden !important;
      position: absolute !important;
      left: -9999px !important;
      clip: rect(0, 0, 0, 0) !important;
      pointer-events: none !important;
      margin: 0 !important;
      padding: 0 !important;
      border: none !important;
    }
    
    /* Hide discover content when app-window-view is active in dark mode */
    :root.theme-dark #discover-view:has(.app-window-view.is-active:not(.hidden)) .launcher-stack-wrapper,
    :root.theme-dark #discover-view:has(.app-window-view.is-active:not(.hidden)) #discover-apps-container,
    :root.theme-dark #discover-view:has(.app-window-view.is-active:not(.hidden)) #discover-apps-grid,
    :root.theme-dark #discover-view:has(.app-window-view.is-active:not(.hidden)) #discover-top-charts,
    :root.theme-dark #discover-view:has(.app-window-view.is-active:not(.hidden)) #discover-categories,
    :root.theme-dark #discover-view:has(.app-window-view.is-active:not(.hidden)) #discover-pin-grid,
    :root.theme-dark #discover-view.app-window-active .launcher-stack-wrapper,
    :root.theme-dark #discover-view.app-window-active #discover-apps-container,
    :root.theme-dark #discover-view.app-window-active #discover-apps-grid,
    :root.theme-dark #discover-view.app-window-active #discover-top-charts,
    :root.theme-dark #discover-view.app-window-active #discover-categories,
    :root.theme-dark #discover-view.app-window-active #discover-pin-grid {
      display: none !important;
      opacity: 0 !important;
      visibility: hidden !important;
      height: 0 !important;
      width: 0 !important;
      overflow: hidden !important;
      position: absolute !important;
      left: -9999px !important;
      clip: rect(0, 0, 0, 0) !important;
      pointer-events: none !important;
      margin: 0 !important;
      padding: 0 !important;
      border: none !important;
    }
    
    /* System theme: ensure discover content is hidden when app-window-view is active */
    @media (prefers-color-scheme: light) {
      #discover-view:has(.app-window-view.is-active:not(.hidden)) .launcher-stack-wrapper,
      #discover-view:has(.app-window-view.is-active:not(.hidden)) #discover-apps-container,
      #discover-view:has(.app-window-view.is-active:not(.hidden)) #discover-apps-grid,
      #discover-view:has(.app-window-view.is-active:not(.hidden)) #discover-top-charts,
      #discover-view:has(.app-window-view.is-active:not(.hidden)) #discover-categories,
      #discover-view:has(.app-window-view.is-active:not(.hidden)) #discover-pin-grid,
      #discover-view.app-window-active .launcher-stack-wrapper,
      #discover-view.app-window-active #discover-apps-container,
      #discover-view.app-window-active #discover-apps-grid,
      #discover-view.app-window-active #discover-top-charts,
      #discover-view.app-window-active #discover-categories,
      #discover-view.app-window-active #discover-pin-grid {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        height: 0 !important;
        width: 0 !important;
        overflow: hidden !important;
        position: absolute !important;
        left: -9999px !important;
        clip: rect(0, 0, 0, 0) !important;
        pointer-events: none !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
      }
    }
    
    @media (prefers-color-scheme: dark) {
      :root:not(.theme-light) #discover-view:has(.app-window-view.is-active:not(.hidden)) .launcher-stack-wrapper,
      :root:not(.theme-light) #discover-view:has(.app-window-view.is-active:not(.hidden)) #discover-apps-container,
      :root:not(.theme-light) #discover-view:has(.app-window-view.is-active:not(.hidden)) #discover-apps-grid,
      :root:not(.theme-light) #discover-view:has(.app-window-view.is-active:not(.hidden)) #discover-top-charts,
      :root:not(.theme-light) #discover-view:has(.app-window-view.is-active:not(.hidden)) #discover-categories,
      :root:not(.theme-light) #discover-view:has(.app-window-view.is-active:not(.hidden)) #discover-pin-grid,
      :root:not(.theme-light) #discover-view.app-window-active .launcher-stack-wrapper,
      :root:not(.theme-light) #discover-view.app-window-active #discover-apps-container,
      :root:not(.theme-light) #discover-view.app-window-active #discover-apps-grid,
      :root:not(.theme-light) #discover-view.app-window-active #discover-top-charts,
      :root:not(.theme-light) #discover-view.app-window-active #discover-categories,
      :root:not(.theme-light) #discover-view.app-window-active #discover-pin-grid {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        height: 0 !important;
        width: 0 !important;
        overflow: hidden !important;
        position: absolute !important;
        left: -9999px !important;
        clip: rect(0, 0, 0, 0) !important;
        pointer-events: none !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
      }
    }
    /* Hide app-window-view when app-detail-view is active in dark mode */
    :root.theme-dark #discover-view:has(#app-detail-view:not(.hidden)) .app-window-view {
      display: none !important;
      opacity: 0 !important;
      visibility: hidden !important;
      z-index: 0 !important;
      pointer-events: none !important;
    }
    /* Ensure app-window-card has opaque background - all themes */
    /* CRITICAL: Set background immediately when visible, not just when .is-active */
    .app-window-view:not(.hidden) .app-window-card {
      isolation: isolate;
    }
    
    .app-window-view.is-active .app-window-card {
      isolation: isolate;
    }
    
    /* Light mode: ensure app-window-card has opaque background when visible */
    :root.theme-light .app-window-view:not(.hidden) .app-window-card,
    :root.theme-light .app-window-view.is-active .app-window-card {
      background: #FFFFFF !important;
    }
    
    /* Ensure app-window-card has opaque background in dark mode */
    :root.theme-dark .app-window-view:not(.hidden) .app-window-card,
    :root.theme-dark .app-window-view.is-active .app-window-card {
      background: #1C1C1C !important;
    }
    
    /* System theme: ensure app-window-card has opaque background when visible */
    @media (prefers-color-scheme: light) {
      .app-window-view:not(.hidden) .app-window-card,
      .app-window-view.is-active .app-window-card {
        background: #FFFFFF !important;
      }
    }
    
    @media (prefers-color-scheme: dark) {
      :root:not(.theme-light) .app-window-view:not(.hidden) .app-window-card,
      :root:not(.theme-light) .app-window-view.is-active .app-window-card {
        background: #1C1C1C !important;
      }
    }

    /* Legacy Safari needs an opaque surface while iframe apps are mounting. */
    .legacy-safari .app-window-view:not(.hidden),
    .legacy-safari .app-window-view.is-active:not(.hidden),
    .legacy-safari .app-window-view.is-opening:not(.hidden) {
      background: var(--bg-card, #FFFFFF) !important;
    }

    .legacy-safari .app-window-view:not(.hidden) .app-window-card,
    .legacy-safari .app-window-view.is-active .app-window-card,
    .legacy-safari .app-window-view.is-opening .app-window-card {
      background: var(--bg-card, #FFFFFF) !important;
    }

    .legacy-safari.theme-dark .app-window-view:not(.hidden),
    .legacy-safari.theme-dark .app-window-view.is-active:not(.hidden),
    .legacy-safari.theme-dark .app-window-view.is-opening:not(.hidden),
    :root.theme-dark .legacy-safari .app-window-view:not(.hidden),
    :root.theme-dark .legacy-safari .app-window-view.is-active:not(.hidden),
    :root.theme-dark .legacy-safari .app-window-view.is-opening:not(.hidden),
    html.theme-dark .legacy-safari .app-window-view:not(.hidden),
    html.theme-dark .legacy-safari .app-window-view.is-active:not(.hidden),
    html.theme-dark .legacy-safari .app-window-view.is-opening:not(.hidden) {
      background: #1C1C1C !important;
    }

    .legacy-safari.theme-dark .app-window-view:not(.hidden) .app-window-card,
    .legacy-safari.theme-dark .app-window-view.is-active .app-window-card,
    .legacy-safari.theme-dark .app-window-view.is-opening .app-window-card,
    :root.theme-dark .legacy-safari .app-window-view:not(.hidden) .app-window-card,
    :root.theme-dark .legacy-safari .app-window-view.is-active .app-window-card,
    :root.theme-dark .legacy-safari .app-window-view.is-opening .app-window-card,
    html.theme-dark .legacy-safari .app-window-view:not(.hidden) .app-window-card,
    html.theme-dark .legacy-safari .app-window-view.is-active .app-window-card,
    html.theme-dark .legacy-safari .app-window-view.is-opening .app-window-card {
      background: #1C1C1C !important;
    }
    .app-detail-view .discover-detail-view {
      display: flex;
      flex-direction: column;
      gap: 2rem;
      padding: 1rem 1.1rem;
      padding-left: 1.1rem !important;
      padding-right: 1.1rem !important;
      margin-left: 0 !important;
      margin-right: 0 !important;
      border-radius: 0;
      border: none;
      background: transparent;
      box-shadow: none;
      max-height: calc(100vh - 200px);
      overflow-y: auto;
      scrollbar-width: none;
      -ms-overflow-style: none;
      width: 100%;
      box-sizing: border-box;
    }
    @media (min-width: 641px) {
      .app-detail-view .discover-detail-view {
        position: absolute;
        top: 1.2rem;
        left: 0;
        right: 0;
        flex: 1;
        min-height: 0;
        max-height: none;
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        padding: 0 40px 1rem;
        padding-left: 40px !important;
        padding-right: 40px !important;
        bottom: 0;
      }
    }
    .app-detail-view .discover-detail-view::-webkit-scrollbar {
      display: none;
      width: 0;
      height: 0;
    }
    @media (max-width: 640px) {
      .app-detail-view .discover-detail-view {
        padding: 1rem 1.1rem !important;
        padding-left: 1.1rem !important;
        padding-right: 1.1rem !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-height: none;
      }
      .app-detail-view .discover-detail-card {
        gap: 1.4rem;
      }
      .app-detail-view .discover-detail-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.25rem;
        padding-bottom: 1.25rem;
        padding-top: 0.5rem;
      }
      .app-detail-view .discover-detail-heading {
        width: 100%;
      }
      .app-detail-view .discover-detail-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
      }
      .app-detail-view .discover-detail-actions > * {
        width: 100%;
      }
    }
    .discover-callout {
      transition: transform 0.18s ease, box-shadow 0.18s ease;
      align-items: center;
      gap: 1rem;
      padding-right: 1.5rem;
    }
    .discover-callout:hover {
      transform: translateY(-2px);
      box-shadow: none;
    }
    .discover-empty {
      padding: 1.7rem;
      border-radius: 24px;
      border: 1px dashed rgba(255,255,255,0.12);
      background: rgba(148,163,184,0.08);
      text-align: center;
      color: var(--text-tertiary);
      font-size: 0.9rem;
    }
    @media (max-width: 768px) {
      .discover-section {
        padding: 0;
      }
      #discover-view .discover-section {
        padding: 0;
      }
      .discover-header {
        padding: 0 0.75rem;
        margin-bottom: 1.25rem;
      }
      .discover-grid {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        padding: 0 0.5rem;
      }
      .discover-card {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 1rem;
        padding: 0.875rem;
        min-height: auto;
        border-radius: 16px;
        border: 1px solid rgba(148,163,184,0.15);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
      }
      :root.theme-dark .discover-card {
        border: 1px solid rgba(255,255,255,0.1);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
      }
      .discover-card-icon {
        width: 60px;
        height: 60px;
        max-width: 60px;
        margin: 0;
        flex-shrink: 0;
        border-radius: 14px;
      }
      .discover-card-icon img {
        border-radius: 14px;
      }
      .discover-card-info {
        flex: 1;
        margin-bottom: 0;
        min-width: 0;
        align-items: flex-start;
        text-align: left;
      }
      .discover-card-title-row {
        justify-content: flex-start;
      }
      .discover-card-name {
        font-size: 1rem;
        margin-bottom: 0.25rem;
        text-align: left;
      }
      .discover-card-category {
        font-size: 0.85rem;
        margin-bottom: 0;
        text-align: left;
      }
      .discover-card-description {
        display: none;
      }
      .discover-card-cta {
        padding: 0.5rem 1rem;
        font-size: 0.85rem;
        margin-top: 0;
        width: auto;
        flex-shrink: 0;
      }
      .discover-card:hover {
        transform: none;
        background: rgba(248,250,252,0.8);
      }
      :root.theme-dark .discover-card:hover {
        background: rgba(40,40,43,0.9);
      }
      .discover-detail-view {
        gap: 1.5rem;
        padding-right: 0.5rem;
        margin-right: -0.5rem;
      }
      .discover-detail-card {
        gap: 1.5rem;
      }
      .discover-detail-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.25rem;
        padding-bottom: 1.25rem;
      }
      .discover-detail-icon {
        width: 100px;
        height: 100px;
        border-radius: 22px;
      }
      .discover-detail-icon.cover-book {
        width: 90px;
        height: 135px;
        border-radius: 5px;
      }
      .discover-detail-icon.cover-podcast,
      .discover-detail-icon.cover-video,
      .discover-detail-icon.cover-course {
        width: 120px;
        height: 120px;
        border-radius: 10px;
      }
      .discover-detail-heading {
        width: 100%;
      }
      .discover-detail-heading h2 {
        font-size: 1.5rem;
      }
      .discover-detail-heading p {
        font-size: 0.95rem;
      }
      .discover-pin-btn {
        align-self: flex-start;
        margin-top: 0.5rem;
      }
      .discover-detail-meta {
        grid-template-columns: 1fr;
        gap: 0.875rem;
      }
      .discover-detail-meta-tile {
        padding: 1rem 1.25rem;
      }
      .discover-detail-actions {
        flex-direction: column;
      }
      .discover-detail-primary,
      .discover-detail-secondary {
        width: 100%;
        min-width: 0;
        padding: 0.875rem 1.5rem;
      }
      .discover-detail-body {
        gap: 1.5rem;
      }
      .discover-detail-body p {
        font-size: 0.95rem;
      }
      .discover-detail-release {
        padding: 1.25rem 1.5rem;
      }
    }

.auth-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.22);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  z-index: 150;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.auth-overlay-visible {
  opacity: 1;
  pointer-events: auto;
}
.auth-dialog {
  width: 100%;
  max-width: 320px;
  border-radius: 24px;
  padding: 28px 26px 24px;
  background: var(--bg-card);
  box-shadow: 0 24px 55px rgba(15, 23, 42, 0.22);
  text-align: center;
  transform: translateY(16px) scale(0.96);
  opacity: 0;
  transition: transform 0.24s ease, opacity 0.24s ease;
}
.auth-overlay-visible .auth-dialog {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.auth-dialog-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 6px;
}
.auth-dialog-subtitle {
  font-size: 0.9rem;
  color: var(--text-tertiary);
  margin-bottom: 20px;
}
.auth-dialog-icon {
  width: 78px;
  height: 78px;
  margin: 0 auto 18px;
  border-radius: 999px;
  background: rgba(59,130,246,0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  color: #2563EB;
  transition: background 0.25s ease, color 0.25s ease;
}
.auth-dialog-icon::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 999px;
  border: 3px solid rgba(59,130,246,0.18);
  border-top-color: #2563EB;
  border-right-color: rgba(59,130,246,0.38);
  animation: authStatusSpin 0.9s linear infinite;
  opacity: 0;
}
.auth-dialog-icon svg {
  width: 34px;
  height: 34px;
  stroke-width: 2;
}
.auth-dialog-icon-success {
  background: rgba(34,197,94,0.18);
  color: #15803D;
}
.auth-dialog-icon-error {
  background: rgba(239,68,68,0.18);
  color: #B91C1C;
}
.auth-dialog-loading .auth-dialog-icon::after {
  opacity: 1;
}
.auth-dialog-success .auth-dialog-icon::after,
.auth-dialog-error .auth-dialog-icon::after {
  opacity: 0;
}
.auth-dialog-message {
  font-size: 0.95rem;
  color: var(--text-secondary);
  margin-bottom: 16px;
}
.auth-dialog-secondary {
  font-size: 0.8rem;
  color: var(--text-tertiary);
}
.plan-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 clamp(24px, 6vw, 120px);
  background: rgba(46, 52, 68, 0.58);
  backdrop-filter: blur(18px) saturate(125%);
  -webkit-backdrop-filter: blur(18px) saturate(125%);
  z-index: 140;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.plan-overlay.plan-overlay-active {
  opacity: 1;
  pointer-events: auto;
}
body.plan-selector-active {
  overflow: hidden;
}
.plan-dialog {
  --plan-pad: clamp(26px, 4vw, 38px);
  --plan-gutter: clamp(32px, 6vw, 120px);
  position: relative;
  width: min(760px, 94vw);
  background: #1C1C1E;
  border-radius: 26px;
  padding: var(--plan-pad);
  padding-bottom: calc(var(--plan-pad) + 10px);
  border: 1px solid rgba(148, 163, 184, 0.18);
  box-shadow:
    0 20px 52px rgba(5, 8, 20, 0.35),
    0 -10px 22px rgba(5, 8, 20, 0.2);
  display: flex;
  flex-direction: column;
  gap: 0;
  max-height: min(92vh, 860px);
  margin: clamp(32px, 6vh, 56px) auto;
  overflow: visible;
}
.plan-dialog-close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(8, 10, 20, 0.6);
  color: #f8fafc;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 20;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.plan-dialog-close:hover {
  background: rgba(15, 23, 42, 0.7);
  border-color: rgba(255, 255, 255, 0.35);
}
.plan-dialog-close span {
  font-size: 1.2rem;
  line-height: 1;
}
.plan-dialog-body {
  display: flex;
  flex-direction: column;
  gap: 18px;
  pointer-events: auto !important;
  flex: 1;
  padding: 6px var(--plan-gutter) calc(200px + var(--plan-pad) + env(safe-area-inset-bottom));
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  pointer-events: auto;
}
.plan-dialog-body::-webkit-scrollbar {
  width: 0;
  height: 0;
}
.plan-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.plan-section-eyebrow {
  font-size: 0.78rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(229, 233, 246, 0.7);
  margin: 0 0 0 4px;
}
.plan-choice-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.plan-choice {
  position: relative;
  border-radius: 26px;
  padding: 14px 18px;
  border: none;
  background: #2C2C2E;
  display: flex;
  gap: 14px;
  cursor: pointer;
  transition: border-color 0.2s ease;
  box-shadow: 0 16px 38px rgba(2, 6, 23, 0.48);
}
.plan-choice:hover {
  border-color: #64666f;
}
.plan-choice.is-selected {
  border: 3px solid #4C6FFF;
}
.plan-choice-heading {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
}
.plan-choice-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 600;
  color: #f8fafc;
}
.plan-choice-subtitle {
  margin: 4px 0 0;
  color: rgba(226, 232, 240, 0.85);
  font-size: 0.95rem;
}
.plan-choice-note {
  margin: 6px 0 0;
  color: rgba(148, 163, 184, 0.75);
  font-size: 0.85rem;
}
.plan-choice-radio {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 2px solid rgba(148, 163, 184, 0.65);
  position: relative;
  flex-shrink: 0;
  margin-top: 4px;
}
.plan-choice.is-selected .plan-choice-radio {
  border-color: #4C6FFF;
}
.plan-choice.is-selected .plan-choice-radio::after {
  content: "";
  position: absolute;
  inset: 4px;
  background: #4C6FFF;
  border-radius: 999px;
}
.plan-choice-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(148, 163, 184, 0.85);
  border: 1px solid rgba(148, 163, 184, 0.35);
}
.plan-choice.is-selected .plan-choice-badge {
  color: #4C6FFF;
  border-color: rgba(76, 111, 255, 0.55);
}
.plan-choice.is-recommended .plan-choice-badge {
  color: #22c55e;
  border-color: rgba(34, 197, 94, 0.45);
}
.plan-choice.is-popular .plan-choice-badge {
  color: #a78bfa;
  border-color: rgba(167, 139, 250, 0.45);
}
.plan-choice-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.plan-choice-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.plan-choice-expanded {
  margin-top: 0;
  padding-top: 0;
  border-top: 1px solid rgba(148, 163, 184, 0);
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(-8px);
  transition:
    max-height 0.4s ease,
    opacity 0.28s ease,
    transform 0.38s ease,
    margin-top 0.28s ease,
    padding-top 0.28s ease,
    border-top-color 0.28s ease;
}
.plan-choice.is-selected .plan-choice-expanded {
  margin-top: 14px;
  padding-top: 16px;
  border-top-color: rgba(148, 163, 184, 0.2);
  max-height: 480px;
  opacity: 1;
  transform: translateY(0);
}
.plan-choice-features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.plan-choice-features li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.95rem;
  color: rgba(226, 232, 240, 0.9);
}
.plan-feature-icon {
  width: 36px;
  height: 36px;
  border-radius: 14px;
  background: rgba(148, 163, 184, 0.12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.plan-feature-icon svg {
  width: 18px;
  height: 18px;
}
.plan-bottom-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #1A1A1C;
  padding: 18px var(--plan-pad) calc(20px + env(safe-area-inset-bottom));
  border-radius: 0 0 26px 26px;
  align-items: center;
  box-shadow: none;
  z-index: 10;
}
.theme-light .plan-overlay {
  background: rgba(242, 244, 249, 0.62);
  backdrop-filter: blur(34px) saturate(145%);
  -webkit-backdrop-filter: blur(34px) saturate(145%);
}
.theme-light .plan-dialog {
  background: linear-gradient(180deg, #FFFFFF 0%, #F8F8FD 100%);
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.9) inset,
    0 14px 36px rgba(15, 23, 42, 0.12),
    0 -6px 18px rgba(15, 23, 42, 0.04);
  border-radius: 22px;
}
.theme-light .plan-dialog-mobile {
  border-radius: 0 !important;
}
.theme-light .plan-dialog-body {
  color: #0f172a;
}
.theme-light .plan-dialog-close {
  border-color: rgba(15, 23, 42, 0.12);
  background: rgba(245, 246, 255, 0.92);
  color: #0f172a;
}
.theme-light .plan-dialog-close:hover {
  background: rgba(229, 231, 235, 0.95);
  border-color: rgba(15, 23, 42, 0.25);
}
.theme-light .plan-choice {
  background: #ffffff;
  border: 1.3px solid rgba(255, 255, 255, 0.7);
  box-shadow:
    0 4px 10px rgba(15, 23, 42, 0.08),
    0 -4px 10px rgba(15, 23, 42, 0.045),
    0 2px 5px rgba(15, 23, 42, 0.04),
    0 -2px 5px rgba(15, 23, 42, 0.025),
    inset 0 1px 0 rgba(255, 255, 255, 0.75);
}
.theme-light .plan-choice:hover {
  border-color: rgba(37, 99, 235, 0.35);
}
.theme-light .plan-choice.is-selected {
  border-color: #0a84ff;
  border-width: 3px;
  background: #ffffff;
  box-shadow:
    0 10px 18px rgba(10, 132, 255, 0.18),
    0 -6px 12px rgba(10, 132, 255, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.75);
}
.theme-light .plan-choice-title {
  color: #0f172a;
}
.theme-light .plan-choice-subtitle,
.theme-light .plan-choice-note {
  color: rgba(15, 23, 42, 0.7);
}
.theme-light .plan-choice-badge {
  border-color: rgba(15, 23, 42, 0.12);
  color: rgba(15, 23, 42, 0.55);
  background: rgba(15, 23, 42, 0.04);
}
.theme-light .plan-section-eyebrow {
  color: rgba(15, 23, 42, 0.6);
}
.theme-light .plan-choice-radio {
  border-color: rgba(15, 23, 42, 0.35);
}
.theme-light .plan-choice.is-selected .plan-choice-radio::after {
  background: #0a84ff;
}
.theme-light .plan-choice-features li {
  color: #0f172a;
}
.theme-light .plan-feature-icon {
  background: rgba(15, 23, 42, 0.06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.theme-light .plan-bottom-bar {
  background: #FFFFFF;
  border-top: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow: none;
}
.theme-light .plan-cta-note {
  color: rgba(15, 23, 42, 0.7);
}
.theme-light .plan-primary-btn {
  background: #0a84ff;
}

@media (max-width: 640px) {
  .plan-overlay {
    padding: 0;
    align-items: stretch;
  }
  .plan-dialog {
    width: 100vw;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
    padding: 0;
    margin: 0;
    border: none;
    background: #1C1C1E;
    box-shadow:
      0 20px 60px rgba(5, 8, 20, 0.55),
      0 -12px 28px rgba(5, 8, 20, 0.28);
  }
  .plan-dialog-body {
    padding: 18px 18px calc(130px + env(safe-area-inset-bottom));
    gap: 8px;
  }
  body:not(.theme-light) .plan-dialog-body {
    padding-left: 20px;
    padding-right: 20px;
  }
  .plan-choice-stack {
    gap: 10px;
  }
  .plan-bottom-bar {
    border-radius: 0;
    margin: 0;
    gap: 10px;
    padding: 16px 24px calc(24px + env(safe-area-inset-bottom));
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: #1A1A1C;
    box-shadow: 0 -22px 50px rgba(2, 6, 23, 0.7);
  }
  body:not(.theme-light) .plan-bottom-bar {
    box-shadow: none;
  }
  .plan-choice {
    padding: 10px 12px;
    border-radius: 16px;
    box-shadow: none !important;
  }
  body:not(.theme-light) .plan-choice {
    box-shadow: 0 18px 32px rgba(0, 0, 0, 0.55) !important;
  }
  .theme-light #plan-choices .plan-choice {
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow:
      0 5px 10px rgba(15, 23, 42, 0.09),
      0 -5px 10px rgba(15, 23, 42, 0.05),
      0 3px 5px rgba(15, 23, 42, 0.05),
      0 -3px 5px rgba(15, 23, 42, 0.03),
      0 1px 0 rgba(255, 255, 255, 0.38) inset !important;
  }
  .theme-light #plan-choices .plan-choice.is-selected {
    border-color: #0a84ff;
    border-width: 4px;
    box-shadow:
      0 6px 12px rgba(10, 132, 255, 0.14),
      0 -4px 10px rgba(10, 132, 255, 0.08),
      0 1px 0 rgba(255, 255, 255, 0.45) inset !important;
  }
  body:not(.theme-light) .plan-choice {
    box-shadow: 0 14px 28px rgba(5, 8, 20, 0.38);
  }
  .plan-choice-features {
    flex-direction: column;
  }
  .plan-choice.is-selected {
    border-width: 4px;
  }
  .plan-dialog-close {
    top: 10px;
    right: 12px;
    width: 34px;
    height: 34px;
  }
  .theme-light .plan-dialog {
    background: #F2F1F6;
    border-radius: 0;
  }
  .theme-light .plan-dialog-body {
    background: #f8f9fd;
  }
  .theme-light .plan-overlay {
    background: rgba(250, 251, 255, 0.75);
  }
  .theme-light .plan-bottom-bar {
    background: rgba(245, 245, 247, 0.98);
    border-top: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 -18px 34px rgba(15, 23, 42, 0.14);
  }
}
.plan-primary-btn {
  width: min(360px, 100%);
  border: none;
  border-radius: 18px;
  padding: 14px 18px;
  font-size: 1.02rem;
  font-weight: 600;
  background: #0a84ff;
  color: white;
  box-shadow: none;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.plan-primary-btn:hover {
  transform: translateY(-1px);
}
.plan-cta-note {
  margin: 0;
  text-align: center;
  color: rgba(226, 232, 240, 0.75);
  font-size: 0.95rem;
}
    .plan-section {
      display: flex;
      flex-direction: column;
      gap: 18px;
    }
    .plan-view {
      display: flex;
      flex-direction: column;
      gap: 18px;
    }
    .plan-view.hidden {
      display: none;
    }
    .plan-payment-back {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 12px;
      margin-bottom: 8px;
      border: none;
      background: transparent;
      color: var(--text-secondary);
      font-size: 0.9rem;
      font-weight: 500;
      cursor: pointer;
      border-radius: 8px;
      transition: all 0.2s ease;
    }
    .plan-payment-back:hover {
      background: var(--bg-button);
      color: var(--text-primary);
    }
    .plan-payment-back svg {
      width: 18px;
      height: 18px;
    }
    .payment-form-in-plan {
      display: flex;
      flex-direction: column;
      gap: 24px;
    }
    .plan-security-note {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      margin: 0;
      text-align: center;
      color: rgba(226, 232, 240, 0.75);
      font-size: 0.85rem;
    }
    .plan-security-note.hidden {
      display: none;
    }
    .plan-lock-icon {
      width: 16px;
      height: 16px;
      color: rgba(226, 232, 240, 0.75);
    }
    .theme-light .plan-security-note {
      color: rgba(15, 23, 42, 0.7);
    }
    .theme-light .plan-lock-icon {
      color: rgba(15, 23, 42, 0.7);
    }
.plan-section-header {
  display: flex;
  justify-content: flex-start;
  gap: 12px;
  align-items: center;
}
.plan-section-eyebrow {
  font-size: 0.78rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(229, 233, 246, 0.7);
  margin: 0;
}
@media (max-width: 600px) {
  .plan-section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
}
.hidden { display: none !important; }

/* ── Startup Setup Assistant — Modern Minimal Skeuomorphic ── */
.startup-overlay {
  position: fixed; inset: 0; z-index: 145;
  background: #DADADE;
  display: flex; flex-direction: column;
  opacity: 0; pointer-events: none;
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity;
}
.startup-overlay.startup-overlay-active { opacity: 1; pointer-events: auto; }
.startup-body {
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: 32px 20px 16px;
}
.startup-card {
  background: #FFFFFF;
  border: 0.5px solid rgba(0,0,0,0.06);
  border-radius: 22px; width: min(700px, 96vw);
  min-height: 470px; padding: 44px 56px 36px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.9) inset,
    0 20px 60px rgba(0,0,0,0.10),
    0 4px 12px rgba(0,0,0,0.05);
  display: flex; flex-direction: column; align-items: center; text-align: center;
  position: relative;
  animation: startupIn 0.5s cubic-bezier(0.16,1,0.3,1) forwards;
}
@keyframes startupIn {
  from { opacity:0; transform: scale(0.97) translateY(6px); }
  to   { opacity:1; transform: scale(1) translateY(0); }
}
.startup-step { display:none; width:100%; flex-direction:column; align-items:center; flex:1; }
.startup-step-active { display:flex; }

/* Step dots — soft pill style */
.startup-dots { display:flex; gap:6px; margin-bottom:28px; }
.startup-dot {
  width:8px; height:8px; border-radius:50%;
  background: #c4c4c9;
  transition: all 0.3s ease;
}
.startup-dot-active {
  background: #3478F6; width: 22px; border-radius: 4px;
  box-shadow: 0 1px 4px rgba(52,120,246,0.3);
}
.startup-dot-done { background: #7aabf5; }

/* Typography — modern clean */
.startup-title {
  font-size: 2.4rem; font-weight: 600; color: #1d1d1f;
  margin: 0 0 10px; letter-spacing: -0.03em; line-height: 1.1;
}
.startup-subtitle {
  font-size: 0.9rem; color: #6e6e73; margin: 0 0 28px; line-height: 1.55; max-width: 420px;
  font-weight: 400;
}

/* Icon cluster — frosted icon pills */
.startup-icons { display:flex; gap:10px; margin-bottom:24px; align-items:center; justify-content:center; }
.startup-icon-item {
  width:50px; height:50px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  background: #edf2fc;
  color: #3478F6;
  border: 1px solid rgba(52,120,246,0.12);
  transition: transform 0.2s ease;
}
.startup-icon-item:hover { transform: translateY(-1px); }
.startup-icon-item svg { width:26px; height:26px; }

/* Form fields — modern inset inputs */
.startup-fields { display:flex; flex-direction:column; gap:14px; width:100%; max-width:380px; margin-bottom:10px; }
.startup-field { display:flex; align-items:center; gap:14px; }
.startup-field-label {
  font-size:0.82rem; color:#3c3c3e; font-weight:500; width:72px;
  text-align:right; flex-shrink:0; letter-spacing: -0.01em;
}
.startup-field-input {
  flex:1; padding:10px 14px; border:1.5px dashed rgba(0,0,0,0.15); border-radius:12px;
  font-size:0.88rem; color:#1d1d1f; outline:none;
  background: transparent;
  box-shadow: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.startup-field-input:focus {
  border-color: #3478F6;
  box-shadow: none;
  background: rgba(52,120,246,0.03);
}
.startup-field-input:hover {
  border-color: #8ab4ff;
  background: rgba(52,120,246,0.03);
}
.startup-field-input::placeholder { color:#a0a0a5; }

/* Links — modern blue */
.startup-link {
  color:#3478F6; font-size:0.84rem; cursor:pointer; background:none; border:none;
  padding:3px 0; font-weight:500; letter-spacing: -0.01em;
}
.startup-link:hover { text-decoration:underline; }
.startup-links { display:flex; flex-direction:column; gap:6px; align-items:center; margin-top:14px; }

/* Error */
.startup-error {
  background: rgba(255,59,48,0.06); border: 1px solid rgba(255,59,48,0.15);
  border-radius:10px; padding:10px 16px; color:#ff3b30; font-size:0.82rem;
  text-align:center; margin-top:8px; max-width:380px; width:100%;
  backdrop-filter: blur(4px);
}

/* Info section */
.startup-info {
  display:flex; flex-direction:column; align-items:center; gap:8px;
  margin-top:28px; padding-top:20px; border-top:1px solid #e0e0e3; max-width:400px; width:100%;
}
.startup-info-icon { color:#86868b; }
.startup-info-icon svg { width:26px; height:26px; opacity:0.7; }
.startup-info-text { font-size:0.74rem; color:#86868b; line-height:1.45; text-align:center; margin:0; }

/* Experience cards — soft raised surfaces */
.startup-products { display:flex; flex-direction:column; gap:14px; width:100%; max-width:460px; margin-bottom:14px; text-align:left; }
.startup-product {
  display:flex; align-items:center; gap:16px;
  background: #FFFFFF; border-radius:16px;
  padding:18px 20px; cursor:pointer;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 2px 8px rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.9);
  transition: all 0.2s ease;
}
.startup-product:hover {
  transform: translateY(-1px);
  border-color: #bfbfc4;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}
.startup-product-selected {
  border-color: #3478F6;
  background: #f0f4ff;
  box-shadow: 0 2px 12px rgba(52,120,246,0.15);
}
.startup-product-disabled { opacity:0.38; cursor:not-allowed; }
.startup-product-disabled:hover { transform:none; box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
.startup-product-icon {
  width:52px; height:52px; border-radius:14px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}
.startup-product-icon svg { width:24px; height:24px; color:#fff; }
.startup-icon-workspace { background: linear-gradient(145deg,#4A9EFF,#2968DC); }
.startup-icon-studio { background: linear-gradient(145deg,#7B6FE8,#A855D6); }
.startup-product-text { flex:1; min-width:0; }
.startup-product-title {
  font-size:0.95rem; font-weight:600; color:#1d1d1f; margin:0 0 3px;
  display:flex; align-items:center; gap:8px;
}
.startup-product-price { font-size:0.78rem; color:#86868b; margin:0 0 4px; }
.startup-product-desc { font-size:0.8rem; color:#86868b; margin:0; line-height:1.35; }
.startup-card .studio-feature-grid {
  background: linear-gradient(180deg, #FFFFFF 0%, #FDFDFE 100%);
  border: none;
  box-shadow:
    inset 0 0 4px rgba(0,0,0,0.14),
    inset 1px 0 2px rgba(0,0,0,0.04),
    inset -1px 0 2px rgba(0,0,0,0.04),
    inset 0 0.5px 1px rgba(0,0,0,0.07),
    inset 0 -0.5px 1px rgba(0,0,0,0.05),
    0 2px 8px rgba(0,0,0,0.05),
    0 0.5px 0 rgba(255,255,255,1);
}
.studio-feature-grid .startup-product {
  background: transparent; border-radius: 0; padding: 16px 18px;
  border: none; border-bottom: 1px solid rgba(0,0,0,0.08);
  box-shadow: none; gap: 14px; text-align: left;
  min-height: 68px; box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.studio-feature-grid .startup-product:last-child { border-bottom: none; box-shadow: none; }
.studio-feature-grid .startup-product:hover {
  transform: none; background: rgba(0,0,0,0.03);
  border-color: transparent; box-shadow: none;
}
.studio-feature-grid .startup-product:active { background: rgba(0,0,0,0.08); transform: none; }
.startup-badge {
  display:inline-flex; padding:2px 9px; border-radius:6px;
  background:#e8e8ed; color:#6e6e73; font-size:0.6rem;
  font-weight:600; letter-spacing:0.04em; text-transform:uppercase;
}

/* Apple One Individual style plan card */
.startup-appleone-wrap { width:100%; max-width:480px; margin-bottom:16px; text-align:left; }
.startup-appleone-card {
  background:#fff; border-radius:18px; padding:22px 24px;
  border:2px solid #e0e0e5; cursor:default;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04), 0 4px 14px rgba(0,0,0,0.03);
  transition: all 0.2s ease;
}
.startup-appleone-selected {
  border-color:#3478F6; border-width:2.5px;
  box-shadow: 0 2px 14px rgba(52,120,246,0.14), 0 0 0 1px rgba(52,120,246,0.06);
}
.startup-appleone-top { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:14px; }
.startup-appleone-left { flex:1; }
.startup-appleone-name { font-size:1.15rem; font-weight:700; color:#1d1d1f; margin:0 0 3px; letter-spacing:-0.02em; }
.startup-appleone-trial { font-size:0.82rem; font-weight:500; color:#48484a; margin:0 0 4px; }
.startup-appleone-note-muted { font-size:0.7rem; color:#8e8e93; margin:0 0 6px; }
.startup-appleone-rec { display:flex; align-items:center; gap:4px; font-size:0.68rem; font-weight:700; color:#3478F6; letter-spacing:0.03em; margin:0; }
.startup-appleone-check { flex-shrink:0; margin-left:12px; margin-top:2px; }
.startup-appleone-features { list-style:none; padding:0; margin:0 0 14px; }
.startup-appleone-features li {
  font-size:0.82rem; color:#48484a; padding:5px 0;
  display:flex; align-items:center; gap:10px; line-height:1.4;
}
.startup-appleone-features li svg { width:16px; height:16px; flex-shrink:0; color:#3478F6; opacity:0.85; }
.startup-appleone-icons { display:flex; gap:8px; padding-top:10px; border-top:1px solid rgba(0,0,0,0.06); }
.startup-appleone-icon-pill {
  width:34px; height:34px; border-radius:9px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
}
.startup-appleone-icon-pill svg { width:17px; height:17px; }

/* Picker cards (Storage & AI Model steps — iCloud+ style) */
.startup-picker-list { display:flex; flex-direction:column; gap:10px; width:100%; max-width:480px; margin-bottom:16px; text-align:left; }
.startup-picker-card {
  display:flex; align-items:center; justify-content:space-between;
  background:#fff; border-radius:16px; padding:16px 20px;
  border:1.5px solid #e0e0e5; cursor:pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  transition: all 0.2s ease;
}
.startup-picker-card:hover { border-color:#c8c8ce; box-shadow: 0 2px 8px rgba(0,0,0,0.07); }
.startup-picker-card-selected,
.startup-picker-card-selected:hover {
  border-color:#3478F6; border-width:2px;
  box-shadow: 0 2px 12px rgba(52,120,246,0.12), 0 0 0 1px rgba(52,120,246,0.06);
}
.startup-picker-card-left { flex:1; min-width:0; }
.startup-picker-card-title { font-size:1rem; font-weight:700; color:#1d1d1f; margin:0 0 2px; }
.startup-picker-card-price { font-size:0.8rem; font-weight:600; color:#48484a; margin:0 0 3px; }
.startup-picker-card-desc { font-size:0.74rem; color:#8e8e93; margin:0; line-height:1.35; }
.startup-picker-radio { flex-shrink:0; margin-left:14px; }

/* Payment step */
.startup-payment-form { display:flex; flex-direction:column; gap:16px; width:100%; max-width:420px; }
.startup-payment-group { display:flex; flex-direction:column; gap:4px; }
.startup-payment-label { font-size:0.72rem; font-weight:600; color:#48484a; letter-spacing:0.02em; }
.startup-stripe-container {
  background:#f8f8fa; border-radius:12px; padding:12px 14px;
  border:1.5px solid #e0e0e5;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.04);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.startup-stripe-container:focus-within { border-color:#3478F6; box-shadow:0 0 0 3px rgba(52,120,246,0.15); }
.startup-payment-error { font-size:0.72rem; color:#ff3b30; min-height:0; margin:0; }
.startup-payment-summary {
  background:#f5f5f7; border-radius:12px; padding:14px 16px;
  border:1px solid rgba(0,0,0,0.05);
}
.startup-payment-row { display:flex; justify-content:space-between; align-items:center; font-size:0.8rem; color:#48484a; padding:4px 0; }
.startup-payment-divider { border:none; border-top:1px solid rgba(0,0,0,0.08); margin:8px 0; }
.startup-payment-total { font-weight:700; color:#1d1d1f; font-size:0.85rem; }
.startup-payment-security {
  display:flex; align-items:center; gap:6px; justify-content:center;
  font-size:0.68rem; color:#86868b; margin-top:4px;
}

/* Dropdown menu */
.startup-sel-menu {
  display:none; position:absolute; left:0; right:0; top:100%; margin-top:4px;
  background:#fff; border-radius:10px; border:1px solid #e0e0e5;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1), 0 1px 3px rgba(0,0,0,0.06); z-index:10; overflow:hidden;
}
.startup-sel-row.startup-sel-open .startup-sel-menu { display:block; }
.startup-sel-item {
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 14px; cursor:pointer; transition: background 0.1s;
}
.startup-sel-item:hover { background:rgba(52,120,246,0.06); }
.startup-sel-item-active { background:rgba(52,120,246,0.08); }
.startup-sel-item-left { display:flex; align-items:center; gap:6px; }
.startup-sel-item-name { font-size:0.78rem; font-weight:600; color:#1d1d1f; }
.startup-sel-item-desc { font-size:0.64rem; color:#86868b; }
.startup-sel-item-price { font-size:0.74rem; font-weight:600; color:#3478F6; white-space:nowrap; }
.startup-sel-item-check { width:16px; height:16px; color:#3478F6; display:none; }
.startup-sel-item-active .startup-sel-item-check { display:block; }

/* Navigation — modern soft buttons */
.startup-nav { display:flex; align-items:center; justify-content:center; gap:40px; padding-top:44px; margin-top:8px; }
.startup-nav-btn {
  display:flex; flex-direction:column; align-items:center; gap:7px;
  background:none; border:none; cursor:pointer; color:#3c3c3e;
  font-size:0.78rem; font-weight:600; padding:4px;
  transition: color 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  letter-spacing: -0.01em;
  transform: translate3d(0, 0, 0);
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  outline: none;
}
.startup-nav-btn:focus,
.startup-nav-btn:focus-visible,
.startup-nav-btn:active,
.startup-nav-btn:hover {
  outline: none !important;
  outline-offset: 0 !important;
  -webkit-tap-highlight-color: transparent !important;
}
.startup-nav-btn::-moz-focus-inner { border: 0; padding: 0; }
button.startup-nav-circle {
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent !important;
  -webkit-touch-callout: none;
  outline: none !important;
}
button.startup-nav-circle:focus,
button.startup-nav-circle:focus-visible {
  outline: none !important;
  outline-offset: 0 !important;
}
button.startup-nav-circle::-moz-focus-inner { border: 0; padding: 0; }
.startup-nav-btn:hover { color:#1d1d1f; transform: translateY(-1px); }
.startup-nav-btn:active { transform: none; transition-duration: 0.08s; }
.startup-nav-btn:disabled { opacity:0.25; cursor:not-allowed; }
.startup-nav-circle {
  width:44px; height:44px; border-radius:50%;
  background: linear-gradient(180deg, #ffffff 0%, #ebebf0 100%);
  display:flex; align-items:center; justify-content:center;
  border: 0.5px solid rgba(0,0,0,0.12);
  box-shadow:
    0 1px 3px rgba(0,0,0,0.08),
    0 0.5px 1px rgba(0,0,0,0.05),
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 1px rgba(0,0,0,0.05);
  transition: box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), background 0.2s ease-out;
  position: relative; overflow: hidden;
}
.startup-nav-circle::before {
  content: ''; position: absolute; inset: 0 0 50% 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.15) 55%, rgba(255,255,255,0) 100%);
  pointer-events: none; border-radius: 50% 50% 0 0;
}
.startup-nav-btn:hover .startup-nav-circle {
  background: linear-gradient(180deg, #ffffff 0%, #e3e3e8 100%);
  border-color: rgba(0,0,0,0.14);
  box-shadow:
    0 2px 6px rgba(0,0,0,0.1),
    0 0.5px 1px rgba(0,0,0,0.06),
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 1px rgba(0,0,0,0.06);
}
.startup-nav-btn:active .startup-nav-circle, .startup-nav-btn.startup-pressed .startup-nav-circle {
  background: linear-gradient(180deg, #d5d5da 0%, #c8c8cd 100%);
  border-color: rgba(0,0,0,0.18);
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.14), 0 0 0 0.5px rgba(0,0,0,0.06);
  transform: none;
  transition-duration: 0.08s;
}
.startup-nav-circle svg { width:18px; height:18px; color:#3c3c3e; position:relative; z-index:1; }
.startup-nav-btn:hover .startup-nav-circle svg { color:#2060d0; }
/* Wide capsule variant — label inside the circle */
.startup-nav-circle-wide {
  width:auto; padding:0 22px; border-radius:22px; gap:8px;
  font-size:0.82rem; font-weight:600; color:#3c3c3e; letter-spacing:-0.01em;
  height:44px;
}
.startup-nav-circle-wide::before { border-radius: 22px 22px 0 0; }
.startup-nav-btn:hover .startup-nav-circle-wide { color:#2060d0; }
.theme-dark .startup-nav-btn:hover .startup-nav-circle-wide { color:#5a9dff; }
.theme-dark .startup-nav-circle-wide { color:#98989f; }

/* Footer strip — frosted glass */
.startup-footer {
  background: rgba(238,238,243,0.88); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  padding: 13px 32px;
  display:flex; align-items:center; justify-content:space-between; min-height:44px;
  border-top: 1px solid rgba(0,0,0,0.06);
}
.startup-footer-text { color:#86868b; font-size:0.74rem; margin:0; text-align:center; flex:1; line-height:1.4; }
.startup-footer-link {
  color:#3478F6; background:none; border:none; font-size:0.74rem;
  cursor:pointer; padding:0; white-space:nowrap; font-weight:500;
}
.startup-footer-link:hover { text-decoration:underline; }

/* ── Dark theme ── */
html.theme-dark .startup-overlay { background:#1d1d1f!important; }
@media(prefers-color-scheme:dark){ html .startup-overlay { background:#1d1d1f!important; } }
.theme-dark .startup-card {
  background:#2c2c2e!important;
  box-shadow: 0 1px 1px rgba(255,255,255,0.04) inset, 0 12px 48px rgba(0,0,0,0.3), 0 2px 6px rgba(0,0,0,0.2);
}
.theme-dark .startup-title { color:#f5f5f7; }
.theme-dark .startup-subtitle { color:#98989f; }
.theme-dark .startup-icon-item { background:rgba(52,120,246,0.12); color:#5a9dff; }
.theme-dark .startup-field-label { color:#98989f; }
.theme-dark .startup-field-input {
  background:transparent; color:#f5f5f7;
  border:1.5px dashed rgba(255,255,255,0.15);
  box-shadow: none;
}
.theme-dark .startup-field-input:focus {
  border-color:#5a9dff;
  box-shadow: none;
  background: rgba(90,157,255,0.06);
}
.theme-dark .startup-field-input:hover {
  border-color:#5a9dff;
  background: rgba(90,157,255,0.06);
}
.theme-dark .startup-field-input::placeholder { color:#636366; }
.theme-dark .startup-link { color:#5a9dff; }
.theme-dark .startup-dot { background:rgba(255,255,255,0.06); box-shadow:none; }
.theme-dark .startup-dot-active { background:#5a9dff; box-shadow: 0 1px 4px rgba(90,157,255,0.3); }
.theme-dark .startup-dot-done { background:rgba(90,157,255,0.3); }
.theme-dark .startup-error { background:rgba(255,59,48,0.1); border-color:rgba(255,59,48,0.2); color:#ff6961; }
.theme-dark .startup-info { border-top-color:rgba(255,255,255,0.06); }
.theme-dark .startup-info-text { color:#636366; }
html.theme-dark .startup-product {
  background:#3a3a3c;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15), 0 0.5px 0 rgba(255,255,255,0.03) inset;
}
html.theme-dark .startup-product:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.2); }
html.theme-dark .startup-product-selected { border-color:#5a9dff; box-shadow: 0 2px 8px rgba(90,157,255,0.15); }
html.theme-dark .startup-card .studio-feature-grid {
  background: linear-gradient(180deg, #242426 0%, #1f1f21 100%);
  border: none;
  box-shadow:
    inset 0 1px 3px rgba(0,0,0,0.4),
    inset 0 -1px 3px rgba(0,0,0,0.2),
    0 0.5px 0 rgba(255,255,255,0.04);
}
html.theme-dark .studio-feature-grid .startup-product { background: transparent; border-bottom-color: rgba(255,255,255,0.06); box-shadow: inset 0 -0.5px 0 rgba(255,255,255,0.03); }
html.theme-dark .studio-feature-grid .startup-product:hover { background: rgba(255,255,255,0.05); box-shadow: none; }
html.theme-dark .studio-feature-grid .startup-product:active { background: rgba(255,255,255,0.1); transform: none; }
html.theme-dark .startup-product-title { color:#f5f5f7; }
html.theme-dark .startup-product-price, .theme-dark .startup-product-desc { color:#98989f; }
.theme-dark .startup-badge { background:rgba(255,255,255,0.06); color:#98989f; }
.theme-dark .startup-appleone-card { background:#1c1c1e; border-color:rgba(255,255,255,0.08); }
.theme-dark .startup-appleone-selected { border-color:#5a9dff; box-shadow:0 2px 12px rgba(90,157,255,0.12); }
.theme-dark .startup-appleone-name { color:#f5f5f7; }
.theme-dark .startup-appleone-trial { color:#b0b0b5; }
.theme-dark .startup-appleone-note-muted { color:#6e6e73; }
.theme-dark .startup-appleone-rec { color:#5a9dff; }
.theme-dark .startup-appleone-features li { color:#b0b0b5; }
.theme-dark .startup-appleone-features li svg { color:#5a9dff; }
.theme-dark .startup-appleone-icons { border-top-color:rgba(255,255,255,0.06); }
.theme-dark .startup-picker-card { background:#1c1c1e; border-color:rgba(255,255,255,0.08); }
.theme-dark .startup-picker-card:hover { border-color:rgba(255,255,255,0.14); box-shadow:0 2px 8px rgba(0,0,0,0.2); }
.theme-dark .startup-picker-card-selected,
.theme-dark .startup-picker-card-selected:hover { border-color:#5a9dff; box-shadow:0 2px 12px rgba(90,157,255,0.12); }
.theme-dark .startup-picker-card-title { color:#f5f5f7; }
.theme-dark .startup-picker-card-price { color:#b0b0b5; }
.theme-dark .startup-picker-card-desc { color:#6e6e73; }
.theme-dark .startup-picker-radio circle[stroke="#c8c8ce"] { stroke:#48484a; }
.theme-dark .startup-nav-circle {
  background: linear-gradient(180deg, #48484a 0%, #333335 100%);
  border-color: rgba(255,255,255,0.12);
  box-shadow:
    0 2px 6px rgba(0,0,0,0.38),
    0 0.5px 1px rgba(0,0,0,0.25),
    inset 0 1px 0 rgba(255,255,255,0.1),
    inset 0 -1px 1px rgba(0,0,0,0.25);
}
.theme-dark .startup-nav-circle::before {
  background: linear-gradient(180deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.02) 55%, rgba(255,255,255,0) 100%);
}
.theme-dark .startup-nav-btn { color:#98989f; }
.theme-dark .startup-nav-btn:hover { color:#f5f5f7; }
.theme-dark .startup-nav-btn:hover .startup-nav-circle {
  background: linear-gradient(180deg, #535355 0%, #3a3a3c 100%);
  border-color: rgba(255,255,255,0.15);
  box-shadow:
    0 3px 10px rgba(0,0,0,0.45),
    0 0.5px 1px rgba(0,0,0,0.3),
    inset 0 1px 0 rgba(255,255,255,0.12),
    inset 0 -1px 1px rgba(0,0,0,0.28);
}
.theme-dark .startup-nav-btn:active .startup-nav-circle {
  background: linear-gradient(180deg, #2a2a2c 0%, #1f1f21 100%);
  border-color: rgba(255,255,255,0.06);
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.45), 0 0 0 0.5px rgba(0,0,0,0.25);
}
.theme-dark .startup-nav-circle svg { color:#c7c7cc; }
.theme-dark .startup-nav-btn:hover .startup-nav-circle svg { color:#5a9dff; }
/* Standalone circle button hover/active (used outside .startup-nav-btn wrapper) */
button.startup-nav-circle:hover {
  background: linear-gradient(180deg, #ffffff 0%, #e3e3e8 100%);
  border-color: rgba(0,0,0,0.14);
  box-shadow:
    0 2px 6px rgba(0,0,0,0.1),
    0 0.5px 1px rgba(0,0,0,0.06),
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 1px rgba(0,0,0,0.06);
}
button.startup-nav-circle:active {
  background: linear-gradient(180deg, #d5d5da 0%, #c8c8cd 100%);
  border-color: rgba(0,0,0,0.18);
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.14), 0 0 0 0.5px rgba(0,0,0,0.06);
  transform: none;
}
.theme-dark button.startup-nav-circle:hover {
  background: linear-gradient(180deg, #535355 0%, #3a3a3c 100%);
  border-color: rgba(255,255,255,0.15);
  box-shadow:
    0 3px 10px rgba(0,0,0,0.45),
    0 0.5px 1px rgba(0,0,0,0.3),
    inset 0 1px 0 rgba(255,255,255,0.12),
    inset 0 -1px 1px rgba(0,0,0,0.28);
}
.theme-dark button.startup-nav-circle:active {
  background: linear-gradient(180deg, #2a2a2c 0%, #1f1f21 100%);
  border-color: rgba(255,255,255,0.06);
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.45), 0 0 0 0.5px rgba(0,0,0,0.25);
}
/* Red minus circle button for All Apps list */
.studio-app-minus-btn {
  width:28px; height:28px; border-radius:50%; border:1px solid rgba(0,0,0,0.08);
  background:linear-gradient(180deg,#f8f8fa 0%,#ededf0 100%);
  box-shadow:0 1px 3px rgba(0,0,0,0.06), 0 0.5px 0 rgba(255,255,255,0.8) inset;
  display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0;
  transition:background 0.18s, box-shadow 0.18s, transform 0.15s;
}
.studio-app-minus-btn:hover { background:linear-gradient(180deg,#f2f2f5 0%,#e6e6ea 100%); box-shadow:0 2px 6px rgba(0,0,0,0.08), 0 0.5px 0 rgba(255,255,255,0.8) inset; }
.studio-app-minus-btn:active { transform:scale(0.95); }
.theme-dark .studio-app-minus-btn {
  background:linear-gradient(180deg,#3a3a3c 0%,#2c2c2e 100%); border-color:rgba(255,255,255,0.06);
  box-shadow:0 1px 3px rgba(0,0,0,0.2), 0 0.5px 0 rgba(255,255,255,0.04) inset;
}
.theme-dark .studio-app-minus-btn:hover { background:linear-gradient(180deg,#404042 0%,#323234 100%); box-shadow:0 2px 6px rgba(0,0,0,0.25), 0 0.5px 0 rgba(255,255,255,0.04) inset; }
.theme-dark .startup-sel-sublabel { color:#6e6e73; }
.theme-dark .startup-payment-label { color:#98989f; }
.theme-dark .startup-stripe-container { background:#1c1c1e; border-color:rgba(255,255,255,0.1); }
.theme-dark .startup-stripe-container:focus-within { border-color:#5a9dff; box-shadow:0 0 0 3px rgba(90,157,255,0.2); }
.theme-dark .startup-payment-error { color:#ff6961; }
.theme-dark .startup-payment-summary { background:#1c1c1e; border-color:rgba(255,255,255,0.06); }
.theme-dark .startup-payment-row { color:#b0b0b5; }
.theme-dark .startup-payment-divider { border-top-color:rgba(255,255,255,0.08); }
.theme-dark .startup-payment-total { color:#f5f5f7; }
.theme-dark .startup-payment-security { color:#6e6e73; }
.theme-dark .startup-footer { background:rgba(28,28,30,0.92); border-top-color:rgba(255,255,255,0.06); }
.theme-dark .startup-footer-text { color:rgba(255,255,255,0.45); }
.theme-dark .startup-footer-link { color:#6CB4FF; }


/* Mobile — rounded card with spacing, full height, content centered */
@media (max-width:640px) {
  /* Prevent iOS zoom on input focus — inputs must be >= 16px */
  .startup-field-input { font-size:16px !important; }
  .startup-body {
    flex:1; padding:18px 18px 12px; align-items:stretch;
  }
  .startup-card {
    width:auto; flex:1; min-height:0;
    border-radius:18px; padding:28px 22px;
    overflow-y:auto; -webkit-overflow-scrolling:touch;
  }
  .startup-step-active { justify-content:center; flex:1; }
  #startup-step-plan.startup-step-active,
  #startup-step-storage.startup-step-active,
  #startup-step-aimodel.startup-step-active,
  #startup-step-payment.startup-step-active { justify-content:flex-start; flex:0; }
  .startup-title { font-size:1.7rem; }
  .startup-subtitle { font-size:0.85rem; margin-bottom:20px; }
  .startup-icons { margin-bottom:16px; gap:8px; }
  .startup-icon-item { width:42px; height:42px; border-radius:12px; }
  .startup-icon-item svg { width:22px; height:22px; }
  .startup-dots { margin-bottom:18px; }
  .startup-fields { max-width:100%; }
  .startup-field { flex-direction:column; align-items:stretch; gap:4px; }
  .startup-field-label { text-align:left; width:auto; font-size:0.78rem; }
  .startup-field-input { padding:12px 14px; }
  .startup-products { max-width:100%; }
  .startup-product { padding:14px 16px; border-radius:14px; }
  .startup-product-icon { width:46px; height:46px; border-radius:12px; }
  .startup-appleone-wrap { max-width:100%; }
  .startup-appleone-card { padding:16px 18px; border-radius:14px; }
  .startup-appleone-name { font-size:1.05rem; }
  .startup-appleone-features li { font-size:0.76rem; padding:4px 0; }
  .startup-appleone-features li svg { width:14px; height:14px; }
  .startup-appleone-icon-pill { width:30px; height:30px; border-radius:8px; }
  .startup-appleone-icon-pill svg { width:15px; height:15px; }
  .startup-picker-list { max-width:100%; gap:8px; }
  .startup-picker-card { padding:14px 16px; border-radius:14px; }
  .startup-picker-card-title { font-size:0.92rem; }
  .startup-picker-card-price { font-size:0.76rem; }
  .startup-picker-card-desc { font-size:0.7rem; }
  .startup-nav { padding-top:28px; gap:32px; margin-top:4px; }
  #startup-step-plan .startup-title { font-size:1.5rem; margin-bottom:6px; }
  #startup-step-plan .startup-subtitle { font-size:0.8rem; margin-bottom:12px; }
  #startup-step-plan .startup-nav { padding-top:10px; }
  #startup-step-storage .startup-title, #startup-step-aimodel .startup-title { font-size:1.5rem; margin-bottom:6px; }
  #startup-step-storage .startup-subtitle, #startup-step-aimodel .startup-subtitle { font-size:0.8rem; margin-bottom:12px; }
  .startup-nav-circle:not(.startup-nav-circle-wide) { width:42px; height:42px; }
  .startup-nav-circle-wide { height:42px; padding:0 18px; width:auto; }
  .startup-info { margin-top:18px; padding-top:14px; }
  .startup-links { margin-top:10px; }
  .startup-error { max-width:100%; }
  .startup-payment-form { max-width:100%; }
  .startup-payment-summary { padding:12px 14px; }
  .startup-stripe-container { padding:10px 12px; border-radius:10px; }
  #startup-step-payment .startup-title { font-size:1.5rem; margin-bottom:6px; }
  #startup-step-payment .startup-subtitle { font-size:0.8rem; margin-bottom:12px; }
  #startup-step-payment .startup-nav { padding-top:10px; }
  /* Footer — centered on mobile */
  .startup-footer {
    padding:10px 16px; border-radius:0;
    flex-direction:column; align-items:center; justify-content:center; gap:4px;
  }
  .startup-footer-link { order:0; }
  .startup-footer-text { order:1; }
  .startup-footer > div:last-child { display:none; }
}

    .profile-menu-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 0;
      border-bottom: 1px solid var(--border-light);
      color: var(--text-primary);
    }
    .profile-menu-row:last-child {
      border-bottom: none;
    }
    .profile-upgrade-btn {
      width: 100%;
      margin-top: 18px;
      padding: 14px 18px;
      border-radius: 16px;
      border: none;
      background: linear-gradient(130deg, #6BA7FF, #3A7BFF);
      color: #fff;
      font-weight: 600;
      font-size: 1rem;
      cursor: pointer;
      transition: transform 0.18s ease;
      box-shadow: none;
    }
    .profile-upgrade-btn:hover {
      transform: translateY(-1px);
    }
    .profile-upgrade-btn:active {
      transform: translateY(0);
    }
    .profile-signout-btn {
      width: 100%;
      margin-top: 16px;
      padding: 12px 16px;
      border-radius: 14px;
      border: 1px solid var(--border-input);
      background-color: var(--bg-button);
      color: var(--text-primary);
      font-weight: 600;
      transition: background-color 0.2s ease, transform 0.2s ease;
    }
    .profile-signout-btn:hover {
      background-color: var(--bg-button-hover);
      transform: translateY(-1px);
    }
    .profile-signout-btn:active {
      transform: translateY(0);
    }
    .theme-toggle-btn {
      position: relative;
      width: 54px;
      height: 30px;
      border-radius: 999px;
      border: 1px solid var(--border-input);
      background-color: var(--bg-button);
      display: inline-flex;
      align-items: center;
      padding: 4px;
      transition: background-color 0.2s ease;
    }
    .theme-toggle-thumb {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background-color: var(--bg-card);
      transform: translateX(0);
      transition: transform 0.2s ease;
      box-shadow: 0 2px 6px var(--shadow-light);
    }
    .theme-toggle-btn[data-theme="dark"] .theme-toggle-thumb {
      transform: translateX(24px);
    }
    @keyframes authCardGlowIn {
      0% { box-shadow: 0 0 0 rgba(59,130,246,0); transform: scale(1); }
      40% { box-shadow: 0 18px 35px rgba(59,130,246,0.25); transform: scale(1.015); }
      100% { box-shadow: 0 0 0 rgba(59,130,246,0); transform: scale(1); }
    }
    @keyframes authCardGlowOut {
      0% { box-shadow: 0 0 0 rgba(148,163,184,0); transform: scale(1); }
      40% { box-shadow: 0 16px 32px rgba(148,163,184,0.2); transform: scale(0.985); }
      100% { box-shadow: 0 0 0 rgba(148,163,184,0); transform: scale(1); }
    }
    @keyframes authCardWaveIn {
      0% { opacity: 0.65; transform: scale(0.25); }
      60% { opacity: 0.35; transform: scale(1); }
      100% { opacity: 0; transform: scale(1.35); }
    }
    @keyframes authCardWaveOut {
      0% { opacity: 0.55; transform: scale(0.25); }
      60% { opacity: 0.3; transform: scale(1); }
      100% { opacity: 0; transform: scale(1.3); }
    }
    @keyframes profileFadeIn {
      from {
        opacity: 0;
        transform: translateY(-16px) scale(0.9);
      }
      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }
    
    /* Dynamic viewport height for Safari URL bar handling */
    /* 100dvh = dynamic viewport height - adjusts as browser chrome appears/disappears */
    /* 100svh = small viewport height - when browser UI is fully visible */
    /* This allows the content to expand when user scrolls and browser hides its UI */
    @supports (height: 100dvh) {
      #open-state {
        height: 100dvh !important;
        min-height: 100svh;
      }
    }
    
    /* In-launcher app window (mirrors detail card) */
    .app-window-view {
      display: flex;
      flex-direction: column;
      gap: 0;
      height: 100%;
      min-height: 0;
      width: 100%;
      align-self: stretch;
      padding: 0;
      margin: 0;
      max-height: none;
      overflow: hidden;
      flex: 1;
      padding-right: 0 !important;
      margin-right: 0 !important;
      border-radius: 1.5rem !important;
      background: transparent !important;
      box-shadow: none !important;
      border: none !important;
    }
    
    .app-window-view.hidden {
      display: none !important;
    }


    .app-window-card {
      position: relative;
      flex: 1;
      min-height: 0;
      width: 100%;
      border-radius: 1.5rem !important;
      background: var(--bg-card);
      border: none;
      overflow: hidden !important;
      display: flex;
      height: 100%;
      padding: 0 !important;
      margin: 0 !important;
      /* Phase 1 will-change audit: removed permanent
         `will-change: transform, opacity` from .app-window-card. The
         WAA + the .is-opening keyframe both lazily promote the layer
         during animation. Keeping `isolation: isolate` because that's
         a cheap stacking-context hint, not a layer pin. */
      isolation: isolate;
      /* Resting (closed) state. The transition below interpolates from
         this state to the active state, and back when closing.
         Transitions are how the close animation already worked; using
         them for the open too means Chrome and Safari handle both
         identically — no keyframe state-management, no per-browser
         compositor quirks, consistent across browsers. */
      transform: scale(var(--app-open-scale)) translate3d(0, var(--app-open-translate), 0);
      opacity: 0;
      transform-origin: center center;
      transition:
        transform var(--app-open-duration) var(--app-open-ease),
        opacity   var(--app-open-duration) ease-out;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      contain: layout style paint;
    }
    
    /* Light mode: ensure rounded corners - REMOVED clip-path for performance */
    :root.theme-light .app-window-card {
      border-radius: 1.5rem !important;
      overflow: hidden !important;
    }
    
    :root.theme-dark .app-window-card {
      /* Solid dark background — was `transparent` which let the
         parent's light/white surface bleed through at the rounded
         corners while the iframe content was painting. */
      background: #1a1f2e;
      border: none;
      box-shadow: none;
      border-radius: 1.5rem !important;
      overflow: hidden !important;
    }
    /* Stage + view stay TRANSPARENT in dark mode so the page bg
       shows through behind the rounded card. The earlier solid
       #1a1f2e fill extended into the square corners around the
       rounded .app-window-card, creating the "squarish corner
       artifact" visible on Chrome / non-Safari browsers. The card
       itself keeps its solid dark fill so iframe loading flashes
       are masked. */
    html.theme-dark .app-window-stage,
    :root.theme-dark .app-window-stage {
      background: transparent;
    }
    html.theme-dark .app-window-view,
    :root.theme-dark .app-window-view {
      background: transparent;
    }
    @media (prefers-color-scheme: dark) {
      html:not(.theme-light) .app-window-card  { background: #1a1f2e; }
      html:not(.theme-light) .app-window-stage { background: transparent; }
      html:not(.theme-light) .app-window-view  { background: transparent; }
    }

    :root.theme-dark .app-window-card.is-closing {
      border-radius: 1.5rem !important;
    }
    
    /* System theme: ensure rounded corners - REMOVED clip-path for performance */
    @media (prefers-color-scheme: light) {
      .app-window-card {
        border-radius: 1.5rem !important;
        overflow: hidden !important;
      }
    }
    
    @media (prefers-color-scheme: dark) {
      .app-window-card {
        border-radius: 1.5rem !important;
        overflow: hidden !important;
      }
    }

    .app-window-view.is-active .app-window-card:not(.is-closing),
    .app-window-view.is-opening .app-window-card:not(.is-closing) {
      /* iOS-style: zoom to full size */
      transform: scale(1) translate3d(0, 0, 0);
      opacity: 1;
      border-radius: 1.5rem !important;
      box-shadow: none;
      /* clip-path REMOVED: the parent already has border-radius +
         overflow: hidden, which clips the iframe correctly. clip-path
         was forcing Chrome (and other Blink browsers) to recompute the
         clip on every animation frame — that was the dominant cause of
         the open-app stutter on Chrome desktop. Safari composites the
         same way either way. */
      overflow: hidden !important;
    }

    /* The .is-opening class is kept for back-compat with the JS that
       toggles it, but the open animation is now driven entirely by
       the transition on .app-window-card above. The class change
       simply triggers will-change for the duration of the open. */
    .app-window-view.is-opening .app-window-card:not(.is-closing) {
      will-change: transform, opacity;
    }

    /* Light mode: ensure rounded corners when active.
       clip-path REMOVED — see main rule above for the why. */
    :root.theme-light .app-window-view.is-active .app-window-card:not(.is-closing) {
      border-radius: 1.5rem !important;
    }

    @media (prefers-color-scheme: light) {
      .app-window-view.is-active .app-window-card:not(.is-closing) {
        border-radius: 1.5rem !important;
      }
    }

    @media (prefers-color-scheme: dark) {
      .app-window-view.is-active .app-window-card:not(.is-closing) {
        border-radius: 1.5rem !important;
      }
    }

    .app-window-view.is-active .app-window-card.is-closing {
      /* iOS-style: scale down and fade out */
      transform: scale(var(--app-close-scale)) translate3d(0, var(--app-close-translate), 0);
      opacity: 0;
      border-radius: 1.5rem !important;
      transition: transform var(--app-close-duration) var(--app-close-ease), opacity var(--app-close-duration) ease-in;
      will-change: transform, opacity;
    }

     :root.theme-dark .app-window-view.is-active .app-window-card.is-closing {
       border-radius: 1.5rem !important;
     }

    @media (prefers-reduced-motion: reduce) {
      .app-window-view .app-window-card,
      .legacy-safari .app-window-view .app-window-card {
        animation: none !important;
        transition: none !important;
      }
      .app-window-view.is-active .app-window-card,
      .legacy-safari .app-window-view.is-active .app-window-card {
        transform: scale(1) translate3d(0, 0, 0) !important;
        opacity: 1 !important;
        box-shadow: none !important;
      }
    }
    
    .app-window-close {
      display: none !important;
      visibility: hidden !important;
      opacity: 0 !important;
      pointer-events: none !important;
      position: absolute;
      top: 18px;
      right: 18px;
      width: 40px;
      height: 40px;
      border-radius: 999px;
      border: 1px solid rgba(148,163,184,0.2);
      background: rgba(148,163,184,0.08);
      color: var(--text-secondary);
      align-items: center;
      justify-content: center;
      cursor: pointer;
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      transition: all 0.2s ease;
      flex-shrink: 0;
      z-index: 3;
    }
    
    .app-window-close svg {
      width: 20px;
      height: 20px;
      stroke: currentColor;
    }
    
    .app-window-close:hover {
      background: rgba(148,163,184,0.12);
      border-color: rgba(148,163,184,0.25);
      color: var(--text-primary);
      transform: translateY(-1px);
    }
    
    :root.theme-dark .app-window-close {
      border: 1px solid rgba(0,0,0,0.3) !important;
      background: rgba(0,0,0,0.6) !important;
      color: #FFFFFF !important;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
    
    :root.theme-dark .app-window-close svg {
      stroke: #FFFFFF !important;
      stroke-width: 2.5;
    }
    
    :root.theme-dark .app-window-close:hover {
      background: rgba(0,0,0,0.8) !important;
      border-color: rgba(0,0,0,0.4) !important;
      color: #FFFFFF !important;
    }
    
    :root.theme-dark     .app-window-close:hover svg {
      stroke: #FFFFFF !important;
      stroke-width: 2.5;
    }
    
    /* Manage Subscription pill in app window */
    .app-window-manage-sub {
      display: none;
      position: absolute;
      top: 18px;
      left: 18px;
      z-index: 4;
      height: 34px;
      padding: 0 14px;
      border-radius: 999px;
      border: 1px solid rgba(148,163,184,0.2);
      background: rgba(148,163,184,0.08);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      color: var(--text-secondary, #86868b);
      font-size: 12px;
      font-weight: 600;
      font-family: -apple-system, system-ui, BlinkMacSystemFont, sans-serif;
      letter-spacing: -0.01em;
      cursor: pointer;
      align-items: center;
      gap: 5px;
      -webkit-tap-highlight-color: transparent;
      transition: all 0.2s ease;
    }
    .app-window-manage-sub svg { flex-shrink: 0; }
    .app-window-manage-sub:hover {
      background: rgba(148,163,184,0.14);
      border-color: rgba(148,163,184,0.28);
      color: var(--text-primary, #f5f5f7);
    }
    :root.theme-dark .app-window-manage-sub {
      border: 1px solid rgba(255,255,255,0.1) !important;
      background: rgba(0,0,0,0.6) !important;
      color: rgba(255,255,255,0.7) !important;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
    :root.theme-dark .app-window-manage-sub:hover {
      background: rgba(0,0,0,0.8) !important;
      border-color: rgba(255,255,255,0.15) !important;
      color: #fff !important;
    }
    @media (prefers-color-scheme: light) {
      .app-window-manage-sub {
        border: 0.5px solid rgba(0,0,0,0.08);
        background: rgba(255,255,255,0.85);
        color: #3a3a3c;
        box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 0.5px 1px rgba(0,0,0,0.04);
      }
      .app-window-manage-sub:hover {
        background: rgba(255,255,255,0.95);
        border-color: rgba(0,0,0,0.12);
        color: #1c1c1e;
      }
    }
    /* Manage sub dropdown panel */
    .app-window-manage-panel {
      display: none;
      position: absolute;
      top: 60px;
      left: 18px;
      z-index: 5;
      min-width: 220px;
      border-radius: 14px;
      padding: 16px;
      background: linear-gradient(180deg, #2c2c2e 0%, #1c1c1e 100%);
      border: 0.5px solid rgba(255,255,255,0.08);
      box-shadow: 0 16px 48px rgba(0,0,0,0.5), 0 6px 16px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.06);
      font-family: -apple-system, system-ui, BlinkMacSystemFont, sans-serif;
      color: #f5f5f7;
    }
    .app-window-manage-panel.show { display: block; }
    .app-window-manage-panel-title {
      font-size: 13px; font-weight: 600; margin-bottom: 4px; letter-spacing: -0.01em;
    }
    .app-window-manage-panel-sub {
      font-size: 11px; color: #98989d; margin-bottom: 14px;
    }
    .app-window-manage-panel-cancel {
      width: 100%;
      padding: 10px;
      border-radius: 10px;
      border: 0.5px solid rgba(255,59,48,0.3);
      background: rgba(255,59,48,0.12);
      color: #ff453a;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      font-family: inherit;
      -webkit-tap-highlight-color: transparent;
      transition: background 0.15s;
    }
    .app-window-manage-panel-cancel:hover {
      background: rgba(255,59,48,0.2);
    }
    @media (prefers-color-scheme: light) {
      .app-window-manage-panel {
        background: linear-gradient(180deg, #ffffff 0%, #f6f6f9 100%);
        border: 0.5px solid rgba(0,0,0,0.08);
        box-shadow: 0 16px 48px rgba(0,0,0,0.12), 0 6px 16px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,1);
        color: #1c1c1e;
      }
      .app-window-manage-panel-sub { color: #86868b; }
      .app-window-manage-panel-cancel {
        border: 0.5px solid rgba(255,59,48,0.2);
        background: rgba(255,59,48,0.08);
        color: #ff3b30;
      }
      .app-window-manage-panel-cancel:hover {
        background: rgba(255,59,48,0.14);
      }
    }
    @media (max-width: 768px) {
      .app-window-manage-sub {
        top: 14px;
        left: 14px;
        height: 30px;
        padding: 0 10px;
        font-size: 11px;
      }
      .app-window-manage-panel {
        top: 52px;
        left: 14px;
        min-width: 200px;
      }
    }

    /* App detail close button - fully circular at top corner */
    .app-detail-close {
      position: absolute !important;
      top: 0.5rem !important;
      right: 0.5rem !important;
      margin: 0 !important;
      padding: 0 !important;
      width: 40px;
      height: 40px;
      border-radius: 50% !important;
      border: 1px solid rgba(148,163,184,0.2);
      background: rgba(148,163,184,0.08);
      color: var(--text-secondary);
      display: inline-flex !important;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      transition: all 0.2s ease;
      flex-shrink: 0;
      z-index: 200 !important;
      transform: none !important;
    }
    
    @media (min-width: 641px) {
      .app-detail-close {
        top: 0.75rem !important;
        right: 0.75rem !important;
      }
    }
    
    @media (max-width: 640px) {
      .app-detail-close {
        top: 0.5rem !important;
        right: 0.5rem !important;
      }
    }
    
    /* Override hover transform to only affect scale, not position */
    .app-detail-close:hover {
      transform: scale(1.05) !important;
    }
    
    .app-detail-close:active {
      transform: scale(0.9) !important;
    }
    
    
    .app-detail-close svg {
      width: 20px;
      height: 20px;
      stroke: currentColor;
      transition: transform 0.15s ease;
    }
    
    .app-detail-close:hover {
      background: rgba(148,163,184,0.12);
      border-color: rgba(148,163,184,0.25);
      color: var(--text-primary);
    }
    
    /* Active state is already defined above with proper transform positioning */
    
    :root.theme-dark .app-detail-close {
      border: 1px solid rgba(0,0,0,0.3) !important;
      background: rgba(0,0,0,0.6) !important;
      color: #FFFFFF !important;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
    
    :root.theme-dark .app-detail-close svg {
      stroke: #FFFFFF !important;
      stroke-width: 2.5;
    }
    
    :root.theme-dark .app-detail-close:hover {
      background: rgba(0,0,0,0.8) !important;
      border-color: rgba(0,0,0,0.4) !important;
      color: #FFFFFF !important;
    }
    
    :root.theme-dark .app-detail-close:hover svg {
      stroke: #FFFFFF !important;
      stroke-width: 2.5;
    }
    
    :root.theme-dark .app-detail-close:active {
      transform: scale(0.9) !important;
      background: rgba(0,0,0,0.7) !important;
    }
    
    .app-window-stage {
      flex: 1;
      min-height: 0;
      position: relative;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: stretch;
      justify-content: stretch;
      overflow: hidden;
      border-radius: 1.5rem !important;
      transform-style: preserve-3d;
      /* Phase 1 will-change audit: removed permanent layer promotion
         from .app-window-stage. `contain: layout style paint` stays
         (cheap, only affects layout/paint scope, not GPU memory). */
      contain: layout style paint;
      /* Allow touch events to pass through to iframe for scrolling */
      touch-action: none;
    }

    .app-window-shell {
      --shell-accent: #64748B;
      --shell-header-bg: rgba(100, 116, 139, 0.08);
      --shell-chip-bg: rgba(100, 116, 139, 0.14);
      --shell-chip-text: #334155;
      --shell-status-color: rgba(51, 65, 85, 0.74);
      --shell-row-1: rgba(148, 163, 184, 0.2);
      --shell-row-2: rgba(148, 163, 184, 0.34);
      --shell-icon-bg: rgba(100, 116, 139, 0.14);
      position: absolute;
      inset: 0;
      z-index: 4;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      gap: 0.88rem;
      padding: 1.1rem;
      border-radius: 1.5rem;
      background:
        radial-gradient(circle at 100% 0%, rgba(148, 163, 184, 0.14), rgba(148, 163, 184, 0) 48%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.96) 100%);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transform: translateZ(0);
      /* Minimum-visibility floor. The shell sits INSIDE the
         .app-window-card, which animates opacity 0 → 1 over the
         600 ms open. The shell's effective on-screen opacity is
         `card.opacity × shell.opacity`, so the delay has to clear
         the card's opacity ramp before the fade-out starts — at
         260 ms the shell was already disappearing while the card
         was still semi-transparent, which is why it looked like
         "no modal shows".
         Total budget: 780 ms hold + 280 ms fade = ~1.06 s visible. */
      transition: opacity 280ms ease-out 780ms, visibility 280ms ease-out 780ms;
      overflow: hidden;
    }

    .app-window-shell::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.18);
      pointer-events: none;
    }

    .app-window-view.is-loading .app-window-shell {
      opacity: 1;
      visibility: visible;
      /* INSTANT show — no fade-in transition. A 70 ms fade-in was
         racing the iframe load event: on cache-fast apps the
         iframe fired `load` before the shell finished appearing,
         so the user saw a brief flash at ~40% opacity instead of
         a fully-visible loading state. "Instant appear + delayed
         disappear" guarantees the shell is rendered at opacity 1
         before any class flip can target it. */
      transition: none;
    }

    .app-window-view.is-shell-visible .app-window-shell {
      opacity: 0;
      visibility: hidden;
      /* Same delay as the base rule — see comment above for why
         780 ms (clear the card's opacity ramp before fading). */
      transition: opacity 280ms ease-out 780ms, visibility 280ms ease-out 780ms;
    }

    .app-window-view.shell-failed .app-window-shell,
    .app-window-view.shell-failed.is-shell-visible .app-window-shell {
      opacity: 1 !important;
      visibility: visible !important;
      pointer-events: auto;
    }

    /* REMOVED: the shell-photos rule used to slam the shell to
       opacity 0 !important the instant the iframe became
       interactive. That hid the loading modal on the Files app
       (which is themed shell-photos because its category string
       "Photos & Files" matches the photo-name regex) — fine on
       mobile where the iframe load takes long enough to see the
       shell first, broken on desktop where the SW cache makes
       the iframe interactive within a frame.
       The standard .app-window-view.is-shell-visible rule above
       already fades the shell out smoothly with the 780 ms
       minimum-visibility delay; no special-case override needed.
    .app-window-view.shell-photos.shell-interactive .app-window-shell,
    .app-window-view.shell-photos.shell-loaded .app-window-shell {
      opacity: 0 !important;
      visibility: hidden !important;
      pointer-events: none !important;
    } */

    :root.theme-dark .app-window-shell,
    html.theme-dark .app-window-shell {
      --shell-chip-text: #E2E8F0;
      --shell-status-color: rgba(226, 232, 240, 0.72);
      background:
        radial-gradient(circle at 100% 0%, rgba(148, 163, 184, 0.16), rgba(15, 23, 42, 0) 52%),
        linear-gradient(180deg, rgba(15, 23, 42, 0.95) 0%, rgba(15, 23, 42, 0.98) 100%);
    }

    .app-window-shell-header {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      min-height: 2.9rem;
      border-radius: 0.9rem;
      background: var(--shell-header-bg);
      padding: 0.45rem 0.5rem;
      position: relative;
      z-index: 1;
    }

    .app-window-shell-icon-wrap {
      width: 2.75rem;
      height: 2.75rem;
      border-radius: 0.78rem;
      background: var(--shell-icon-bg);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      flex-shrink: 0;
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.38);
    }

    .app-window-shell-icon-wrap img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .app-window-shell-title-wrap {
      display: flex;
      flex-direction: column;
      min-width: 0;
      gap: 0.2rem;
      flex: 1;
    }

    .app-window-shell-title {
      font-size: 1.02rem;
      font-weight: 650;
      color: var(--text-primary);
      letter-spacing: -0.01em;
      line-height: 1.25;
      max-width: 100%;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }

    .app-window-shell-chip {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: fit-content;
      max-width: 100%;
      padding: 0.12rem 0.48rem;
      border-radius: 999px;
      background: var(--shell-chip-bg);
      color: var(--shell-chip-text);
      font-size: 0.66rem;
      font-weight: 600;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

    .app-window-shell-status {
      font-size: 0.84rem;
      font-weight: 520;
      color: var(--shell-status-color);
      letter-spacing: 0.01em;
      line-height: 1.35;
      min-height: 1.16rem;
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      gap: 0.45rem;
    }

    .app-window-shell-status::before {
      content: '';
      width: 0.44rem;
      height: 0.44rem;
      border-radius: 999px;
      background: var(--shell-accent);
      opacity: 0.75;
      animation: appWindowShellPulse 1.1s ease-in-out infinite;
      flex-shrink: 0;
    }

    .app-window-view.shell-interactive .app-window-shell-status::before,
    .app-window-view.shell-loaded .app-window-shell-status::before {
      animation: none;
      opacity: 0.9;
    }

    .app-window-view.shell-failed .app-window-shell-status::before {
      background: #EF4444;
      animation: none;
      opacity: 1;
    }

    .app-window-shell-body {
      display: flex;
      flex-direction: column;
      gap: 0.62rem;
      width: 100%;
      padding-top: 0.1rem;
      position: relative;
      z-index: 1;
    }

    .app-window-shell-row {
      display: block;
      height: 0.78rem;
      width: 100%;
      border-radius: 999px;
      background: linear-gradient(90deg, var(--shell-row-1) 0%, var(--shell-row-2) 50%, var(--shell-row-1) 100%);
      background-size: 220% 100%;
      animation: appWindowShellShimmer 1.18s ease-in-out infinite;
    }

    .app-window-shell-body.layout-list .app-window-shell-row:nth-child(2) {
      width: 86%;
    }

    .app-window-shell-body.layout-list .app-window-shell-row:nth-child(3) {
      width: 73%;
    }

    .app-window-shell-body.layout-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0.65rem;
      align-content: start;
    }

    .app-window-shell-body.layout-grid .app-window-shell-row {
      height: 4.9rem;
      border-radius: 0.95rem;
    }

    .app-window-shell-body.layout-mail .app-window-shell-row {
      height: 0.9rem;
      border-radius: 999px;
    }

    .app-window-shell-body.layout-mail .app-window-shell-row:nth-child(1) {
      width: 62%;
      height: 1.1rem;
    }

    .app-window-shell-body.layout-mail .app-window-shell-row:nth-child(2) {
      width: 100%;
    }

    .app-window-shell-body.layout-mail .app-window-shell-row:nth-child(3) {
      width: 88%;
    }

    .app-window-shell-body.layout-mail .app-window-shell-row:nth-child(4) {
      width: 72%;
    }

    .app-window-shell-body.layout-code {
      gap: 0.48rem;
    }

    .app-window-shell-body.layout-code .app-window-shell-row {
      height: 0.58rem;
      border-radius: 0.28rem;
      background: linear-gradient(90deg, rgba(148, 163, 184, 0.25) 0%, rgba(148, 163, 184, 0.42) 50%, rgba(148, 163, 184, 0.25) 100%);
    }

    .app-window-shell-body.layout-code .app-window-shell-row:nth-child(1) {
      width: 100%;
      height: 2.35rem;
      border-radius: 0.62rem;
      background: linear-gradient(135deg, rgba(148, 163, 184, 0.28) 0%, rgba(148, 163, 184, 0.4) 100%);
    }

    .app-window-shell-body.layout-code .app-window-shell-row:nth-child(2) {
      width: 78%;
    }

    .app-window-shell-body.layout-code .app-window-shell-row:nth-child(3) {
      width: 92%;
    }

    .app-window-shell-body.layout-code .app-window-shell-row:nth-child(4) {
      width: 66%;
    }

    .app-window-shell-actions {
      margin-top: auto;
      display: flex;
      gap: 0.55rem;
      position: relative;
      z-index: 1;
      padding-top: 0.35rem;
    }

    .app-window-shell-action {
      appearance: none;
      border: 0;
      border-radius: 0.68rem;
      font-size: 0.8rem;
      font-weight: 600;
      line-height: 1;
      padding: 0.64rem 0.78rem;
      cursor: pointer;
      transition: transform 120ms ease-out, opacity 120ms ease-out, filter 120ms ease-out;
    }

    .app-window-shell-action:active {
      transform: translateY(1px);
      filter: brightness(0.97);
    }

    .app-window-shell-action:disabled {
      opacity: 0.62;
      cursor: default;
      transform: none;
      filter: none;
    }

    .app-window-shell-action-primary {
      background: var(--shell-accent);
      color: #FFFFFF;
      box-shadow: 0 6px 18px rgba(2, 6, 23, 0.2);
    }

    .app-window-view.shell-default {
      --shell-accent: #64748B;
      --shell-header-bg: rgba(100, 116, 139, 0.08);
      --shell-chip-bg: rgba(100, 116, 139, 0.14);
      --shell-chip-text: #334155;
      --shell-status-color: rgba(51, 65, 85, 0.74);
      --shell-row-1: rgba(148, 163, 184, 0.2);
      --shell-row-2: rgba(148, 163, 184, 0.34);
      --shell-icon-bg: rgba(100, 116, 139, 0.14);
    }

    .app-window-view.shell-notes {
      --shell-accent: #F59E0B;
      --shell-header-bg: rgba(245, 158, 11, 0.12);
      --shell-chip-bg: rgba(245, 158, 11, 0.18);
      --shell-chip-text: #9A3412;
      --shell-status-color: rgba(146, 64, 14, 0.76);
      --shell-row-1: rgba(251, 191, 36, 0.2);
      --shell-row-2: rgba(251, 191, 36, 0.36);
      --shell-icon-bg: rgba(245, 158, 11, 0.2);
    }

    .app-window-view.shell-photos {
      --shell-accent: #0EA5E9;
      --shell-header-bg: rgba(14, 165, 233, 0.12);
      --shell-chip-bg: rgba(14, 165, 233, 0.18);
      --shell-chip-text: #075985;
      --shell-status-color: rgba(12, 74, 110, 0.76);
      --shell-row-1: rgba(56, 189, 248, 0.22);
      --shell-row-2: rgba(56, 189, 248, 0.38);
      --shell-icon-bg: rgba(14, 165, 233, 0.2);
    }

    .app-window-view.shell-mail {
      --shell-accent: #3B82F6;
      --shell-header-bg: rgba(59, 130, 246, 0.12);
      --shell-chip-bg: rgba(59, 130, 246, 0.18);
      --shell-chip-text: #1D4ED8;
      --shell-status-color: rgba(30, 64, 175, 0.78);
      --shell-row-1: rgba(96, 165, 250, 0.22);
      --shell-row-2: rgba(96, 165, 250, 0.4);
      --shell-icon-bg: rgba(59, 130, 246, 0.2);
    }

    .app-window-view.shell-files {
      --shell-accent: #22C55E;
      --shell-header-bg: rgba(34, 197, 94, 0.12);
      --shell-chip-bg: rgba(34, 197, 94, 0.18);
      --shell-chip-text: #166534;
      --shell-status-color: rgba(22, 101, 52, 0.78);
      --shell-row-1: rgba(74, 222, 128, 0.22);
      --shell-row-2: rgba(74, 222, 128, 0.38);
      --shell-icon-bg: rgba(34, 197, 94, 0.2);
    }

    .app-window-view.shell-code {
      --shell-accent: #8B5CF6;
      --shell-header-bg: rgba(139, 92, 246, 0.12);
      --shell-chip-bg: rgba(139, 92, 246, 0.2);
      --shell-chip-text: #6D28D9;
      --shell-status-color: rgba(76, 29, 149, 0.8);
      --shell-row-1: rgba(167, 139, 250, 0.24);
      --shell-row-2: rgba(167, 139, 250, 0.42);
      --shell-icon-bg: rgba(139, 92, 246, 0.22);
    }

    :root.theme-dark .app-window-view.shell-notes,
    html.theme-dark .app-window-view.shell-notes {
      --shell-chip-text: #FDE68A;
      --shell-status-color: rgba(254, 240, 138, 0.78);
    }

    :root.theme-dark .app-window-view.shell-photos,
    html.theme-dark .app-window-view.shell-photos {
      --shell-chip-text: #BAE6FD;
      --shell-status-color: rgba(186, 230, 253, 0.78);
    }

    :root.theme-dark .app-window-view.shell-mail,
    html.theme-dark .app-window-view.shell-mail {
      --shell-chip-text: #BFDBFE;
      --shell-status-color: rgba(191, 219, 254, 0.78);
    }

    :root.theme-dark .app-window-view.shell-files,
    html.theme-dark .app-window-view.shell-files {
      --shell-chip-text: #BBF7D0;
      --shell-status-color: rgba(187, 247, 208, 0.78);
    }

    :root.theme-dark .app-window-view.shell-code,
    html.theme-dark .app-window-view.shell-code {
      --shell-chip-text: #DDD6FE;
      --shell-status-color: rgba(221, 214, 254, 0.78);
    }

    @keyframes appWindowShellPulse {
      0% {
        transform: scale(1);
        opacity: 0.45;
      }
      100% {
        transform: scale(1.22);
        opacity: 0.95;
      }
    }

    @keyframes appWindowShellShimmer {
      0% {
        background-position: 200% 0;
      }
      100% {
        background-position: -20% 0;
      }
    }
    
    .app-window-view.is-loading:not(.is-shell-visible) .app-window-iframe,
    .app-window-view.is-loading:not(.is-shell-visible) iframe,
    .legacy-safari .app-window-view.is-loading:not(.is-shell-visible) .app-window-iframe,
    .legacy-safari .app-window-view.is-loading:not(.is-shell-visible) iframe {
      opacity: 0 !important;
      visibility: hidden !important;
      pointer-events: none !important;
    }
    
    /* Ensure iframe can receive touch events for scrolling */
    .app-window-stage .app-window-iframe {
      touch-action: pan-y pan-x pinch-zoom;
      pointer-events: auto;
    }
    
     /* Light mode: ensure rounded corners for stage - REMOVED clip-path for performance */
     :root.theme-light .app-window-stage {
       border-radius: 1.5rem !important;
       overflow: hidden !important;
    }
    
     :root.theme-dark .app-window-stage {
       border-radius: 1.5rem !important;
       overflow: hidden;
     }
     
     /* System theme: ensure rounded corners for stage - REMOVED clip-path for performance */
     @media (prefers-color-scheme: light) {
       .app-window-stage {
         border-radius: 1.5rem !important;
         overflow: hidden !important;
       }
     }
     
     @media (prefers-color-scheme: dark) {
       .app-window-stage {
         border-radius: 1.5rem !important;
         overflow: hidden !important;
       }
     }
    
    .app-window-iframe {
      width: 100%;
      height: 100%;
      border: none;
      display: block;
      background: var(--bg-card);
      flex: 1;
      border-radius: 1.5rem !important;
      overflow: hidden;
      /* NOTE: clip-path on an iframe re-clips its pixels every frame during
         scroll (notorious scroll-jank source). The iframe's parent
         (.app-window-card / .rounded-3xl) already has overflow:hidden +
         matching border-radius which clips the iframe correctly on modern
         Safari/Chrome — no clip-path needed. */
      -webkit-overflow-scrolling: touch;
      touch-action: pan-y pan-x pinch-zoom;
      overscroll-behavior: contain;
      /* Phase 1 will-change audit: removed permanent
         `transform: translate3d(0,0,0)` + `will-change: transform`
         from the iframe. Pinning a large cross-process iframe to its
         own GPU layer permanently was a real VRAM cost. The browser
         will still composite the iframe to its own surface naturally
         during animations; we don't need to force it always-on. */
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
    }

     /* Light mode: ensure rounded corners for iframe */
     :root.theme-light .app-window-iframe {
       border-radius: 1.5rem !important;
       overflow: hidden !important;
    }

     :root.theme-dark .app-window-iframe,
     html.theme-dark .app-window-iframe {
       border-radius: 1.5rem !important;
       overflow: hidden;
       /* Solid dark fill — was inheriting var(--bg-card) which is
          white at the global level, leaving a faint light bleed at
          the rounded corners while the iframe contents load. */
       background: #1a1f2e !important;
     }
     @media (prefers-color-scheme: dark) {
       html:not(.theme-light) .app-window-iframe {
         background: #1a1f2e !important;
       }
     }
     
     /* System theme: ensure rounded corners for iframe */
     @media (prefers-color-scheme: light) {
       .app-window-iframe {
         border-radius: 1.5rem !important;
         overflow: hidden !important;
         clip-path: inset(0 round 1.5rem);
       }
     }
     
     @media (prefers-color-scheme: dark) {
       .app-window-iframe {
         border-radius: 1.5rem !important;
         overflow: hidden !important;
         clip-path: inset(0 round 1.5rem);
       }
     }
    
    /* Mobile scrolling support for all apps */
    @media (max-width: 768px) {
      .app-window-iframe {
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-y pan-x pinch-zoom !important;
        overscroll-behavior: contain !important;
      }
      
      .app-window-stage {
        touch-action: none !important;
      }
      
      .app-window-stage .app-window-iframe {
        touch-action: pan-y pan-x pinch-zoom !important;
        pointer-events: auto !important;
      }
      
      /* Ensure app content can scroll */
      .app-window-view {
        touch-action: pan-y pan-x !important;
       }
     }
    
    @media (max-width: 767px) {
      .app-window-view {
        padding: 0;
        margin: 0;
        border-radius: 0;
      }
      
      .app-window-card {
        border-radius: 1.5rem !important;
        min-height: 0;
      }
      
      .app-window-card.is-closing {
        border-radius: 1.5rem !important;
      }
      
      .app-window-stage {
        border-radius: 1.5rem !important;
        overflow: hidden !important;
      }
      
      .app-window-iframe {
        border-radius: 1.5rem !important;
        overflow: hidden !important;
        clip-path: inset(0 round 1.5rem);
      }
      
      .app-window-close {
        top: 14px;
        right: 14px;
        width: 34px;
        height: 34px;
      }
    }
    
    /* Mobile: Ensure content adjusts to Safari's URL bar */
    @media (max-width: 640px) {
      /* Use position: fixed with top/bottom to naturally adjust to browser UI */
      #open-state {
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: auto !important;
        min-height: auto !important;
        /* Smooth animation when Safari toolbar appears/disappears */
        transition: none;
      }
      
      /* Smooth resize animation for content containers */
      .card-container {
        transition: height 0.25s cubic-bezier(0.25, 0.1, 0.25, 1), 
                    flex 0.25s cubic-bezier(0.25, 0.1, 0.25, 1);
      }
      
      .search-container {
        background-color: var(--bg-primary);
        position: relative;
        z-index: 10;
        /* More breathing room between the launcher card and the search
           pill on mobile — the previous 0.52rem from the desktop default
           made them look glued together on phones. */
        margin-top: 1.25rem;
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem);
        /* Smooth animation when browser UI changes */
        transition: padding-bottom 0.25s cubic-bezier(0.25, 0.1, 0.25, 1),
                    transform 0.25s cubic-bezier(0.25, 0.1, 0.25, 1);
      }
      /* Prevent search bar animation on mobile when app window is active */
      .search-container.app-window-active,
      #open-state:has(.app-window-view.is-active) .search-container,
      #open-state:has(.card-container.app-window-active) .search-container {
        animation: none !important;
      }
    }
    
    .discover-refresh-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      border-radius: 999px;
      border: 1px solid rgba(148,163,184,0.2);
      background: rgba(148,163,184,0.08);
      color: var(--text-secondary);
      transition: all 0.2s ease;
      flex-shrink: 0;
      cursor: pointer;
    }
    .discover-refresh-btn svg {
      width: 20px;
      height: 20px;
    }
    .discover-refresh-btn:hover {
      background: rgba(148,163,184,0.12);
      border-color: rgba(148,163,184,0.25);
      color: var(--text-primary);
      transform: rotate(90deg);
    }
    :root.theme-dark .discover-refresh-btn {
      border: 1px solid rgba(255,255,255,0.15);
      background: rgba(255,255,255,0.08);
      color: rgba(255,255,255,0.7);
    }
    :root.theme-dark .discover-refresh-btn:hover {
      background: rgba(255,255,255,0.12);
      border-color: rgba(255,255,255,0.2);
      color: rgba(255,255,255,0.9);
    }
    .discover-refresh-btn:active {
      transform: rotate(90deg) scale(0.95);
    }
    .discover-callout-main {
      display: flex;
      align-items: flex-start;
      gap: 0.875rem;
      flex: 1;
      background: transparent;
      border: 0;
      padding: 0;
      text-align: left;
      cursor: pointer;
    }
    .discover-callout-main:focus-visible,
    .discover-callout-arrow:focus-visible {
      outline: 2px solid rgba(59,130,246,0.45);
      outline-offset: 3px;
    }
    .discover-callout-arrow {
      background: transparent;
      border: 0;
      cursor: pointer;
    }

    /* Payment Form Styles */
    .payment-overlay {
      position: fixed;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 clamp(24px, 6vw, 120px);
      background: rgba(46, 52, 68, 0.58);
      backdrop-filter: blur(18px) saturate(125%);
      -webkit-backdrop-filter: blur(18px) saturate(125%);
      z-index: 150;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.25s ease;
    }
    .payment-overlay.payment-overlay-active {
      opacity: 1;
      pointer-events: auto;
    }
    body.payment-form-active {
      overflow: hidden;
    }
    .payment-dialog {
      --payment-pad: clamp(26px, 4vw, 38px);
      position: relative;
      width: min(600px, 94vw);
      max-height: min(92vh, 900px);
      background: var(--bg-card);
      border-radius: 26px;
      padding: var(--payment-pad);
      padding-bottom: calc(var(--payment-pad) + 10px);
      border: 1px solid var(--border-input);
      box-shadow:
        0 20px 52px rgba(5, 8, 20, 0.35),
        0 -10px 22px rgba(5, 8, 20, 0.2);
      display: flex;
      flex-direction: column;
      gap: 0;
      overflow: visible;
      margin: clamp(32px, 6vh, 56px) auto;
    }
    :root.theme-dark .payment-dialog {
      background: #1C1C1E;
      border: 1px solid rgba(148, 163, 184, 0.18);
    }
    :root.theme-light .payment-overlay {
      background: rgba(232, 232, 237, 0.72);
      backdrop-filter: blur(34px) saturate(145%);
      -webkit-backdrop-filter: blur(34px) saturate(145%);
    }
    :root.theme-light .payment-dialog {
      background: linear-gradient(180deg, #FFFFFF 0%, #F8F8FD 100%);
      border: 1px solid rgba(15, 23, 42, 0.06);
    }
    .payment-dialog-close {
      position: absolute;
      top: 24px;
      right: 24px;
      width: 38px;
      height: 38px;
      border-radius: 999px;
      border: 1px solid var(--border-input);
      background: var(--bg-button);
      color: var(--text-primary);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      z-index: 20;
      transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    }
    .payment-dialog-close:hover {
      background: var(--bg-button-hover);
      transform: scale(1.05);
    }
    .payment-dialog-close span {
      font-size: 1.5rem;
      line-height: 1;
      color: var(--text-primary);
    }
    .payment-dialog-body {
      display: flex;
      flex-direction: column;
      gap: 24px;
      flex: 1;
      padding: 6px 0 calc(140px + var(--payment-pad) + env(safe-area-inset-bottom));
      overflow-y: auto;
      overflow-x: hidden;
      scrollbar-width: none;
      -ms-overflow-style: none;
    }
    .payment-dialog-body::-webkit-scrollbar {
      width: 0;
      height: 0;
    }
    .payment-header {
      text-align: center;
      margin-bottom: 8px;
    }
    .payment-title {
      font-size: 1.75rem;
      font-weight: 700;
      color: var(--text-primary);
      margin: 0 0 8px 0;
      letter-spacing: -0.02em;
    }
    .payment-subtitle {
      font-size: 0.95rem;
      color: var(--text-secondary);
      margin: 0;
    }
    .payment-label {
      display: block;
      font-size: 0.875rem;
      font-weight: 600;
      color: var(--text-secondary);
      margin-bottom: 12px;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }
    .payment-plan-section {
      margin-bottom: 8px;
    }
    .payment-plan-choices {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .payment-plan-choice {
      position: relative;
      border-radius: 16px;
      padding: 14px 18px;
      border: 2px solid var(--border-input);
      background: var(--bg-button);
      display: flex;
      justify-content: space-between;
      align-items: center;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    .payment-plan-choice:hover {
      border-color: var(--border-color);
      background: var(--bg-button-hover);
    }
    .payment-plan-choice.is-selected {
      border-color: #007AFF;
      background: rgba(0, 122, 255, 0.1);
    }
    .payment-plan-choice-info {
      flex: 1;
    }
    .payment-plan-choice-name {
      font-size: 1rem;
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: 4px;
    }
    .payment-plan-choice-price {
      font-size: 0.875rem;
      color: var(--text-secondary);
    }
    .payment-plan-choice-radio {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      border: 2px solid var(--border-color);
      position: relative;
      flex-shrink: 0;
    }
    .payment-plan-choice.is-selected .payment-plan-choice-radio {
      border-color: #007AFF;
    }
    .payment-plan-choice.is-selected .payment-plan-choice-radio::after {
      content: "";
      position: absolute;
      inset: 4px;
      background: #007AFF;
      border-radius: 50%;
    }
    .payment-details-section {
      margin-top: 8px;
    }
    .payment-form-group {
      margin-bottom: 18px;
    }
    .payment-form-row {
      display: flex;
      gap: 12px;
    }
    .payment-form-group-half {
      flex: 1;
    }
    .payment-input-label {
      display: block;
      font-size: 0.875rem;
      font-weight: 500;
      color: var(--text-secondary);
      margin-bottom: 8px;
    }
    .payment-input {
      width: 100%;
      padding: 12px 16px;
      border-radius: 12px;
      border: 1.5px dashed var(--border-input);
      background: transparent;
      color: var(--text-primary);
      font-size: 1rem;
      transition: all 0.2s ease;
      box-sizing: border-box;
    }
    .payment-input:focus {
      outline: none;
      border-color: #007AFF;
      box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.10);
    }
    .payment-input::placeholder {
      color: var(--text-placeholder);
    }
    .stripe-card-container {
      width: 100%;
      min-height: 48px;
      padding: 12px 16px;
      border-radius: 12px;
      border: 1px solid var(--border-input);
      background: var(--bg-card);
      box-sizing: border-box;
    }
    .stripe-card-container:focus-within {
      border-color: #007AFF;
      box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
    }
    #stripe-card-element {
      width: 100%;
      min-height: 24px;
    }
    .payment-error-message {
      color: #ef4444;
      font-size: 0.875rem;
      margin-top: 8px;
      min-height: 20px;
    }
    .payment-error-message:empty {
      display: none;
    }
    .payment-summary-section {
      margin-top: 8px;
      padding-top: 20px;
      border-top: 1px solid var(--border-light);
    }
    .payment-summary {
      background: var(--bg-button);
      border-radius: 12px;
      padding: 16px;
    }
    .payment-summary-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px;
      font-size: 0.95rem;
      color: var(--text-secondary);
    }
    .payment-summary-row:last-child {
      margin-bottom: 0;
    }
    .payment-summary-trial {
      font-size: 0.875rem;
    }
    .payment-summary-free {
      color: #22c55e;
      font-weight: 600;
    }
    .payment-summary-divider {
      height: 1px;
      background: var(--border-light);
      margin: 16px 0;
    }
    .payment-summary-total {
      font-size: 1.1rem;
      font-weight: 700;
      color: var(--text-primary);
      margin-top: 8px;
    }
    .payment-bottom-bar {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      display: flex;
      flex-direction: column;
      gap: 12px;
      background: var(--bg-card);
      padding: 18px var(--payment-pad) calc(20px + env(safe-area-inset-bottom));
      border-radius: 0 0 26px 26px;
      border-top: 1px solid var(--border-light);
      z-index: 10;
    }
    :root.theme-dark .payment-bottom-bar {
      background: #1A1A1C;
    }
    :root.theme-light .payment-bottom-bar {
      background: #f5f5f7;
    }
    .payment-security-note {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      margin: 0;
      text-align: center;
      color: var(--text-tertiary);
      font-size: 0.85rem;
    }
    .payment-lock-icon {
      width: 16px;
      height: 16px;
      color: var(--text-tertiary);
    }
    .payment-submit-btn {
      width: 100%;
      border: none;
      border-radius: 18px;
      padding: 16px 24px;
      font-size: 1.05rem;
      font-weight: 600;
      background: #007AFF;
      color: white;
      cursor: pointer;
      transition: all 0.2s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      position: relative;
    }
    .payment-submit-btn:hover:not(:disabled) {
      background: #0056CC;
      transform: translateY(-1px);
    }
    .payment-submit-btn:active:not(:disabled) {
      transform: translateY(0);
    }
    .payment-submit-btn:disabled {
      opacity: 0.6;
      cursor: not-allowed;
    }
    :root.theme-dark .payment-submit-btn {
      background: #0A84FF;
    }
    :root.theme-dark .payment-submit-btn:hover:not(:disabled) {
      background: #007AFF;
    }
    .payment-submit-loading {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .payment-spinner {
      width: 20px;
      height: 20px;
      color: white;
    }
    @media (max-width: 640px) {
      .payment-overlay {
        padding: 0;
        align-items: stretch;
      }
      .payment-dialog {
        width: 100vw;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
        padding: 0;
        margin: 0;
        border: none;
      }
      .payment-dialog-body {
        padding: 18px 18px calc(140px + env(safe-area-inset-bottom));
        gap: 20px;
      }
      .payment-dialog-close {
        top: 10px;
        right: 12px;
        width: 34px;
        height: 34px;
      }
      .payment-bottom-bar {
        border-radius: 0;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
      }
      .payment-form-row {
        flex-direction: column;
        gap: 0;
      }
    }

    /* ── Publisher Menu ── */
    #launcher-view.pub-menu-blur {
      filter: blur(14px);
      transition: filter 0.2s ease;
    }
    #launcher-view.pub-menu-blur .launcher-grid::after {
      display: none !important;
    }
    .pub-menu-overlay {
      position: fixed; left: 0; right: 0; top: 0; bottom: 0;
      background: rgba(9, 14, 22, 0.18);
      z-index: 9999;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.2s ease, visibility 0.2s ease;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    html.theme-light .pub-menu-overlay,
    .theme-light .pub-menu-overlay {
      background: rgba(15, 23, 42, 0.12);
    }
    html.theme-dark .pub-menu-overlay,
    .theme-dark .pub-menu-overlay {
      background: rgba(5, 9, 16, 0.28);
    }
    .pub-menu-overlay.show { opacity: 1; visibility: visible; }
    .pub-menu-sheet {
      position: relative;
      width: 300px;
      max-width: calc(100vw - 48px);
      z-index: 10000;
      display: flex;
      flex-direction: column;
      gap: 12px;
      opacity: 0;
      transform: scale(0.96);
      transition: transform 0.15s ease, opacity 0.12s ease;
      -webkit-font-smoothing: subpixel-antialiased;
    }
    .pub-menu-overlay.show .pub-menu-sheet {
      transform: scale(1);
      opacity: 1;
    }
    .pub-menu-label {
      text-align: center;
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 0.02em;
      color: rgba(255,255,255,0.58);
      padding: 0 0 2px;
      text-transform: uppercase;
    }
    .pub-menu-stack {
      display: flex;
      flex-direction: column;
      overflow: hidden;
      border-radius: 16px;
      padding: 0;
      background: #1c1c1e;
      border: 1px solid rgba(255, 255, 255, 0.08);
      box-shadow:
        0 8px 30px rgba(0, 0, 0, 0.4),
        0 1px 4px rgba(0, 0, 0, 0.2);
    }
    html.theme-light .pub-menu-stack,
    .theme-light .pub-menu-stack {
      background: #ffffff;
      border: none;
      box-shadow:
        0 14px 34px rgba(15, 23, 42, 0.12),
        0 2px 8px rgba(15, 23, 42, 0.06);
    }
    .pub-menu-option {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      min-height: 52px;
      width: 100%;
      padding: 0 20px 0 16px;
      border: none;
      border-radius: 0;
      background: transparent;
      color: #e8ecf0;
      font-size: 15px;
      font-weight: 500;
      letter-spacing: 0;
      text-align: left;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      box-shadow: none;
      outline: none;
      appearance: none;
      -webkit-appearance: none;
      -webkit-tap-highlight-color: transparent;
      user-select: none;
      -webkit-user-select: none;
      touch-action: manipulation;
      gap: 10px;
      line-height: 1;
      transition: background-color 0.1s ease, color 0.08s ease;
    }
    html.theme-light .pub-menu-option,
    .theme-light .pub-menu-option {
      color: #111111;
    }
    .pub-menu-option > svg {
      width: 16px; height: 16px;
      flex-shrink: 0;
      opacity: 0.62;
      stroke-width: 1.8;
      pointer-events: none;
    }
    .pub-menu-option > .pub-opt-text {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 1px;
      pointer-events: none;
    }
    .pub-menu-option > .pub-opt-text .pub-opt-title {
      font-size: 15px;
      font-weight: 500;
      line-height: 1.2;
    }
    .pub-menu-option > .pub-opt-text .pub-opt-sub {
      font-size: 11px;
      font-weight: 500;
      opacity: 0.46;
      line-height: 1.2;
    }
    /* Blue press effect */
    .pub-menu-option:active,
    .pub-menu-option.pub-pressed {
      transform: none;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.05) 38%, transparent 39%) top / 100% 54% no-repeat,
        linear-gradient(180deg, #5aa7ff 0%, #0b85ff 52%, #005fd0 100%) !important;
      color: #ffffff;
      border: none !important;
      outline: none !important;
      box-shadow: none !important;
    }
    .pub-menu-option:active svg,
    .pub-menu-option.pub-pressed svg { opacity: 0.96; }
    .pub-menu-option:active span,
    .pub-menu-option.pub-pressed span { color: #ffffff !important; }
    .pub-menu-option:active .pub-opt-sub,
    .pub-menu-option.pub-pressed .pub-opt-sub { opacity: 0.78; }

    html.theme-dark .pub-menu-option:active,
    .theme-dark .pub-menu-option:active,
    html.theme-light .pub-menu-option:active,
    .theme-light .pub-menu-option:active,
    html.theme-dark .pub-menu-option.pub-pressed,
    .theme-dark .pub-menu-option.pub-pressed,
    html.theme-light .pub-menu-option.pub-pressed,
    .theme-light .pub-menu-option.pub-pressed {
      background:
        linear-gradient(180deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.05) 38%, transparent 39%) top / 100% 54% no-repeat,
        linear-gradient(180deg, #5aa7ff 0%, #0b85ff 52%, #005fd0 100%) !important;
      color: #ffffff;
    }
    html.theme-dark .pub-menu-option:active span,
    .theme-dark .pub-menu-option:active span,
    html.theme-light .pub-menu-option:active span,
    .theme-light .pub-menu-option:active span,
    html.theme-dark .pub-menu-option.pub-pressed span,
    .theme-dark .pub-menu-option.pub-pressed span,
    html.theme-light .pub-menu-option.pub-pressed span,
    .theme-light .pub-menu-option.pub-pressed span { color: #ffffff !important; }

    /* Cancel button — hidden, tap overlay to close */
    .pub-menu-cancel { display: none; }

    /* ═══ PUBLISH PANEL — slide-in within menu ═══ */
    /* ═══ PUBLISH PANEL — skeuomorphic multi-step ═══ */
    .pub-publish-panel {
      position: relative;
      width: 320px; max-width: calc(100vw - 48px);
      height: 426px; max-height: calc(100vh - 120px);
      display: none; flex-direction: column;
      background: #1c1c1e;
      border-radius: 16px;
      border: 1px solid rgba(255,255,255,0.08);
      box-shadow: 0 8px 40px rgba(0,0,0,0.3), 0 1px 3px rgba(0,0,0,0.14),
        inset 0 1px 0 rgba(255,255,255,0.04);
      overflow: hidden;
      transform: scale(0.95) translateY(8px); opacity: 0;
      transition: transform 0.2s cubic-bezier(0.25,0.46,0.45,0.94), opacity 0.2s ease;
      z-index: 10001;
    }
    html.theme-light .pub-publish-panel, .theme-light .pub-publish-panel {
      background: #fff; border: 1px solid rgba(0,0,0,0.06);
      box-shadow: 0 8px 40px rgba(0,0,0,0.1), 0 1px 3px rgba(0,0,0,0.06);
    }
    .pub-publish-panel.pub-panel-visible {
      display: flex; transform: scale(1) translateY(0); opacity: 1;
    }
    /* Back button — skeuomorphic */
    .pp-back {
      width: 30px; height: 30px; min-width: 30px;
      border-radius: 9px; border: none;
      background: rgba(255,255,255,0.07); color: #e8ecf0;
      cursor: pointer; display: flex; align-items: center; justify-content: center;
      box-shadow: 0 1px 3px rgba(0,0,0,0.16), inset 0 1px 0 rgba(255,255,255,0.06);
      transition: background 0.12s ease, box-shadow 0.12s ease, transform 0.1s ease;
      flex-shrink: 0; -webkit-tap-highlight-color: transparent;
    }
    html.theme-light .pp-back, .theme-light .pp-back {
      background: #f0f0f3; color: #1d1d1f;
      box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 0 0 0.5px rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.9);
    }
    .pp-back:hover { background: rgba(255,255,255,0.11); box-shadow: 0 2px 5px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.08); }
    html.theme-light .pp-back:hover, .theme-light .pp-back:hover { background: #e8e8ec; }
    .pp-back:active { transform: scale(0.92); }
    .pp-back svg { width: 16px; height: 16px; }
    .pp-top { display: flex; align-items: center; gap: 8px; padding: 12px 16px 8px; flex-shrink: 0; }
    /* Steps container */
    .pp-steps { flex: 1; overflow: hidden; position: relative; }
    .pp-step { position: absolute; inset: 0; display: none; flex-direction: column; overflow-y: auto; padding: 0 18px 14px; }
    .pp-step.pp-step-active { display: flex; }
    /* ─ Step 1: Source selection ─ */
    .pp-section-label {
      font-size: 10px; font-weight: 700; text-transform: uppercase;
      letter-spacing: 0.1em; color: rgba(255,255,255,0.36); padding: 6px 0 4px;
    }
    html.theme-light .pp-section-label, .theme-light .pp-section-label { color: rgba(0,0,0,0.36); }
    .pp-src-btn {
      display: flex; align-items: center; gap: 12px;
      width: 100%; padding: 10px 12px; border-radius: 14px;
      border: none; background: rgba(255,255,255,0.05);
      box-shadow: 0 1px 3px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.06);
      color: #e8ecf0; cursor: pointer; text-align: left;
      transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
      margin-bottom: 8px; -webkit-tap-highlight-color: transparent;
    }
    html.theme-light .pp-src-btn, .theme-light .pp-src-btn {
      background: #f5f5f7; color: #1d1d1f;
      box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 0 0 0.5px rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.9);
    }
    .pp-src-btn:hover { background: rgba(255,255,255,0.09); box-shadow: 0 2px 6px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.08); }
    html.theme-light .pp-src-btn:hover, .theme-light .pp-src-btn:hover { background: #ececef; box-shadow: 0 2px 6px rgba(0,0,0,0.10), inset 0 1px 0 rgba(255,255,255,1); }
    .pp-src-btn.pp-item-pressed {
      transform: none;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.05) 38%, transparent 39%) top / 100% 54% no-repeat,
        linear-gradient(180deg, #5aa7ff 0%, #0b85ff 52%, #005fd0 100%) !important;
      color: #ffffff !important;
      box-shadow: none !important;
    }
    .pp-src-btn.pp-item-pressed .pp-src-title,
    .pp-src-btn.pp-item-pressed .pp-src-sub { color: #fff !important; opacity: 1 !important; }
    .pp-src-btn.pp-item-pressed .pp-src-arrow { opacity: 0.7 !important; color: #fff; }
    html.theme-light .pp-src-btn.pp-item-pressed,
    .theme-light .pp-src-btn.pp-item-pressed {
      background:
        linear-gradient(180deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.05) 38%, transparent 39%) top / 100% 54% no-repeat,
        linear-gradient(180deg, #5aa7ff 0%, #0b85ff 52%, #005fd0 100%) !important;
      color: #ffffff !important;
    }
    html.theme-light .pp-src-btn.pp-item-pressed .pp-src-title,
    .theme-light .pp-src-btn.pp-item-pressed .pp-src-title,
    html.theme-light .pp-src-btn.pp-item-pressed .pp-src-sub,
    .theme-light .pp-src-btn.pp-item-pressed .pp-src-sub { color: #fff !important; opacity: 1 !important; }
    .pp-src-icon {
      width: 32px; height: 32px; min-width: 32px; border-radius: 9px;
      display: flex; align-items: center; justify-content: center;
      position: relative; overflow: hidden; color: #fff;
    }
    .pp-src-icon::after {
      content:''; position: absolute; inset: 0; border-radius: inherit;
      background: linear-gradient(180deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.08) 40%, transparent 70%);
      pointer-events: none;
    }
    .pp-src-icon.ic-codex { background: linear-gradient(135deg,#0a84ff,#5ac8fa); }
    .pp-src-icon.ic-claude { background: linear-gradient(135deg,#d97706,#f59e0b); }
    .pp-src-icon.ic-cursor { background: linear-gradient(135deg,#8b5cf6,#a78bfa); }
    .pp-src-icon.ic-upload { background: linear-gradient(135deg,#3fb950,#6bdf7a); }
    .pp-src-icon.ic-coder { background: linear-gradient(135deg,#d97706,#f59e0b); }
    .pp-src-text { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
    .pp-src-title { font-size: 13px; font-weight: 600; line-height: 1.3; }
    .pp-src-sub { font-size: 11px; font-weight: 500; opacity: 0.42; line-height: 1.3; }
    .pp-src-arrow { width: 14px; height: 14px; opacity: 0.25; flex-shrink: 0; }
    .pp-or { text-align: center; font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.18); padding: 2px 0; }
    html.theme-light .pp-or, .theme-light .pp-or { color: rgba(0,0,0,0.15); }
    /* ─ Step 2: Coder app list ─ */
    .pp-coder-list {
      display: flex; flex-direction: column; gap: 8px;
      overflow-y: auto; max-height: 320px; padding: 0;
    }
    #ppStep2.pp-step { padding-bottom: 0; }
    .pp-coder-item {
      display: flex; align-items: center; gap: 12px;
      width: 100%; padding: 10px 12px; border-radius: 14px;
      border: none; background: rgba(255,255,255,0.05);
      box-shadow: 0 1px 3px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.06);
      color: #e8ecf0; cursor: pointer; text-align: left;
      transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
    }
    html.theme-light .pp-coder-item, .theme-light .pp-coder-item {
      background: #f5f5f7; color: #1d1d1f;
      box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 0 0 0.5px rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.9);
    }
    .pp-coder-item:hover { background: rgba(255,255,255,0.09); box-shadow: 0 2px 6px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.08); }
    html.theme-light .pp-coder-item:hover, .theme-light .pp-coder-item:hover { background: #ececef; box-shadow: 0 2px 6px rgba(0,0,0,0.10), inset 0 1px 0 rgba(255,255,255,1); }
    .pp-coder-item.pp-item-pressed {
      transform: none;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.05) 38%, transparent 39%) top / 100% 54% no-repeat,
        linear-gradient(180deg, #5aa7ff 0%, #0b85ff 52%, #005fd0 100%) !important;
      color: #ffffff !important;
      box-shadow: none !important;
    }
    .pp-coder-item.pp-item-pressed .pp-coder-item-name { color: #fff !important; }
    .pp-coder-item.pp-item-pressed .pp-coder-item-meta { color: rgba(255,255,255,0.78) !important; opacity: 1; }
    .pp-coder-item.pp-item-pressed .pp-coder-item-arrow { opacity: 0.7; color: #fff; }
    html.theme-light .pp-coder-item.pp-item-pressed,
    .theme-light .pp-coder-item.pp-item-pressed {
      background:
        linear-gradient(180deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.05) 38%, transparent 39%) top / 100% 54% no-repeat,
        linear-gradient(180deg, #5aa7ff 0%, #0b85ff 52%, #005fd0 100%) !important;
      color: #ffffff !important;
    }
    html.theme-light .pp-coder-item.pp-item-pressed .pp-coder-item-name,
    .theme-light .pp-coder-item.pp-item-pressed .pp-coder-item-name { color: #fff !important; }
    html.theme-light .pp-coder-item.pp-item-pressed .pp-coder-item-meta,
    .theme-light .pp-coder-item.pp-item-pressed .pp-coder-item-meta { color: rgba(255,255,255,0.78) !important; opacity: 1; }
    .pp-coder-item-icon {
      width: 36px; height: 36px; min-width: 36px; border-radius: 10px;
      display: flex; align-items: center; justify-content: center;
      position: relative; overflow: hidden; color: #fff;
      background: linear-gradient(135deg,#58a6ff,#7cc4fa);
      font-size: 15px; font-weight: 700;
      box-shadow: 0 2px 6px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.2);
    }
    .pp-coder-item-icon::after {
      content:''; position: absolute; inset: 0; border-radius: inherit;
      background: linear-gradient(180deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0.10) 40%, transparent 70%);
      pointer-events: none;
    }
    .pp-coder-item-icon::before {
      content:''; position: absolute; inset: 0; border-radius: inherit;
      box-shadow: inset 0 1.5px 3px rgba(255,255,255,0.18), inset 0 -1.5px 3px rgba(0,0,0,0.10);
      border: 0.5px solid rgba(255,255,255,0.15); pointer-events: none; z-index: 1;
    }
    .pp-coder-item-icon img {
      width: 100%; height: 100%; object-fit: cover; border-radius: inherit; position: relative; z-index: 0;
    }
    .pp-coder-item-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
    .pp-coder-item-name { font-size: 13px; font-weight: 600; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .pp-coder-item-meta { font-size: 11px; font-weight: 500; opacity: 0.38; line-height: 1.3; }
    html.theme-light .pp-coder-item-meta, .theme-light .pp-coder-item-meta { opacity: 1; color: #86868b; }
    .pp-coder-item-arrow { width: 14px; height: 14px; opacity: 0.22; flex-shrink: 0; }
    .pp-coder-empty {
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      padding: 40px 20px; text-align: center;
    }
    .pp-coder-empty-icon { width: 40px; height: 40px; opacity: 0.25; margin-bottom: 10px; color: #e8ecf0; }
    html.theme-light .pp-coder-empty-icon, .theme-light .pp-coder-empty-icon { color: #111; }
    .pp-coder-empty-text { font-size: 14px; font-weight: 600; color: rgba(255,255,255,0.5); }
    html.theme-light .pp-coder-empty-text, .theme-light .pp-coder-empty-text { color: rgba(0,0,0,0.4); }
    .pp-coder-empty-sub { font-size: 12px; color: rgba(255,255,255,0.28); margin-top: 4px; }
    html.theme-light .pp-coder-empty-sub, .theme-light .pp-coder-empty-sub { color: rgba(0,0,0,0.25); }
    /* ─ Step 3: Publish settings (icon + radios + button) ─ */
    .pp-head {
      display: grid; grid-template-columns: auto 1fr; column-gap: 12px; row-gap: 1px;
      align-items: center; padding: 4px 0 10px;
    }
    .pp-app-icon {
      width: 52px; height: 52px; min-width: 52px; border-radius: 14px;
      overflow: hidden; position: relative; display: flex;
      align-items: center; justify-content: center;
      background: linear-gradient(135deg,#58a6ff,#7cc4fa);
      color: #fff; font-size: 20px; font-weight: 700;
      grid-row: 1 / span 2;
    }
    .pp-app-icon::after {
      content:''; position: absolute; inset: 0; border-radius: inherit;
      background: linear-gradient(180deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.1) 30%, transparent 60%);
      pointer-events: none;
    }
    .pp-app-icon::before {
      content:''; position: absolute; inset: 0; border-radius: inherit;
      box-shadow: inset 0 2px 4px rgba(255,255,255,0.2), inset 0 -2px 4px rgba(0,0,0,0.12);
      border: 1px solid rgba(255,255,255,0.18); pointer-events: none; z-index: 1;
    }
    .pp-app-icon img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; position: relative; z-index: 0; }
    .pp-kicker {
      font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
      color: rgba(255,255,255,0.4); align-self: end;
    }
    html.theme-light .pp-kicker, .theme-light .pp-kicker { color: rgba(0,0,0,0.36); }
    .pp-app-name {
      font-size: 15px; font-weight: 600; color: #e8ecf0;
      letter-spacing: -0.01em; align-self: start;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    html.theme-light .pp-app-name, .theme-light .pp-app-name { color: #1f2328; }
    .pp-divider {
      height: 1px; background: rgba(255,255,255,0.06); margin: 0 0 4px;
    }
    html.theme-light .pp-divider, .theme-light .pp-divider { background: rgba(0,0,0,0.06); }
    /* Radio options */
    .pp-options { display: flex; flex-direction: column; gap: 0; padding: 0 2px; }
    .pp-option {
      display: flex; align-items: center; gap: 10px;
      padding: 11px 0; cursor: pointer;
      border-bottom: 1px solid rgba(148,163,184,0.1);
    }
    .pp-option:last-child { border-bottom: none; }
    html.theme-light .pp-option { border-bottom-color: rgba(148,163,184,0.14); }
    .pp-option input { position: absolute; opacity: 0; pointer-events: none; }
    .pp-radio {
      width: 20px; height: 20px; min-width: 20px; border-radius: 50%;
      background: linear-gradient(180deg,#dce9f8,#b9cbe1);
      border: 1px solid rgba(13,85,160,0.18);
      box-shadow: 0 2px 6px rgba(15,23,42,0.16),
        inset 0 1px 0 rgba(255,255,255,0.92), inset 0 -1px 0 rgba(58,94,145,0.12);
      position: relative; flex-shrink: 0;
    }
    .pp-radio::after {
      content:''; position: absolute; inset: 4px; border-radius: 50%;
      background: linear-gradient(180deg,#2d9fff,#0a84ff 62%,#006de1);
      box-shadow: 0 1px 3px rgba(10,132,255,0.35),
        inset 0 1px 0 rgba(255,255,255,0.36), inset 0 -1px 0 rgba(0,71,160,0.2);
      opacity: 0; transform: scale(0.72);
      transition: opacity 0.18s ease, transform 0.18s ease;
    }
    .pp-option input:checked + .pp-radio::after { opacity: 1; transform: scale(1); }
    .pp-option-label { font-size: 14px; font-weight: 600; color: #e8ecf0; }
    html.theme-light .pp-option-label, .theme-light .pp-option-label { color: #1f2328; }
    .pp-note {
      font-size: 12px; line-height: 1.45; color: rgba(255,255,255,0.36);
      padding: 8px 2px 0; min-height: 30px;
    }
    html.theme-light .pp-note, .theme-light .pp-note { color: rgba(0,0,0,0.36); }
    /* Action button — grey skeuomorphic (matches Coder edit-action) */
    .pp-action {
      width: 100%; display: flex; align-items: center; justify-content: center;
      min-height: 44px; padding: 12px 18px; margin-top: auto;
      border-radius: 16px; border: 1px solid rgba(90,103,122,0.9);
      background: linear-gradient(180deg, #778493 0%, #677485 60%, #5d6a7b 100%);
      color: #fff; font-size: 14px; font-weight: 600;
      cursor: pointer; position: relative; overflow: hidden; isolation: isolate;
      box-shadow: 0 4px 12px rgba(33,41,54,0.24), 0 1px 2px rgba(0,0,0,0.12),
        inset 0 1px 0 rgba(255,255,255,0.24), inset 0 -1px 0 rgba(33,41,54,0.24);
      transition: transform 0.2s ease, box-shadow 0.2s ease;
      -webkit-tap-highlight-color: transparent;
    }
    .pp-action::before {
      content:''; position: absolute; left: 1px; right: 1px; top: 1px; height: 50%;
      border-radius: 15px 15px 12px 12px;
      background: linear-gradient(180deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0.12) 38%, rgba(255,255,255,0.04) 64%, transparent 100%);
      pointer-events: none; z-index: 0;
    }
    html.theme-light .pp-action, .theme-light .pp-action {
      border-color: rgba(97,106,120,0.82);
      background: linear-gradient(180deg, #7d8897 0%, #707a89 60%, #666f7d 100%);
      box-shadow: 0 4px 12px rgba(31,35,40,0.12), 0 1px 2px rgba(31,35,40,0.07),
        inset 0 1px 0 rgba(255,255,255,0.3), inset 0 -1px 0 rgba(74,85,101,0.18);
    }
    .pp-action:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(33,41,54,0.28), 0 1px 2px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.28), inset 0 -1px 0 rgba(33,41,54,0.24); }
    .pp-action:active { transform: translateY(0) scale(0.99); }
    .pp-action span { position: relative; z-index: 1; }
    /* Blue action button (Stripe) */
    .pp-action.pp-action-blue {
      border-color: rgba(10,132,255,0.7);
      background: linear-gradient(180deg, #3a9bff 0%, #0a84ff 52%, #006de1 100%);
      box-shadow: 0 4px 12px rgba(10,132,255,0.28), 0 1px 2px rgba(0,0,0,0.12),
        inset 0 1px 0 rgba(255,255,255,0.26), inset 0 -1px 0 rgba(0,71,160,0.24);
    }
    .pp-action.pp-action-blue::before {
      background: linear-gradient(180deg, rgba(255,255,255,0.32) 0%, rgba(255,255,255,0.14) 38%, rgba(255,255,255,0.04) 64%, transparent 100%);
    }
    html.theme-light .pp-action.pp-action-blue, .theme-light .pp-action.pp-action-blue {
      border-color: rgba(10,100,200,0.64);
      background: linear-gradient(180deg, #4da6ff 0%, #0a84ff 52%, #0070e0 100%);
      box-shadow: 0 4px 12px rgba(10,132,255,0.18), 0 1px 2px rgba(0,0,0,0.07),
        inset 0 1px 0 rgba(255,255,255,0.3), inset 0 -1px 0 rgba(0,71,160,0.18);
    }
    .pp-action.pp-action-blue:hover {
      box-shadow: 0 6px 16px rgba(10,132,255,0.34), 0 1px 2px rgba(0,0,0,0.12),
        inset 0 1px 0 rgba(255,255,255,0.28), inset 0 -1px 0 rgba(0,71,160,0.24);
    }

    /* ─ Step 4: Detail form ─ */
    .pp-detail-body {
      flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 14px;
      overflow-y: auto; padding-bottom: 6px;
    }
    .pp-form-block {
      border-top: 1px solid rgba(148,163,184,0.14);
      border-bottom: 1px solid rgba(148,163,184,0.14);
    }
    html.theme-light .pp-form-block, .theme-light .pp-form-block {
      border-top-color: rgba(148,163,184,0.16);
      border-bottom-color: rgba(148,163,184,0.16);
    }
    .pp-field-row {
      width: 100%; display: flex; align-items: center; justify-content: space-between;
      gap: 12px; padding: 14px 0; border: none; background: none;
      color: #e8ecf0; text-align: left; cursor: pointer;
    }
    html.theme-light .pp-field-row, .theme-light .pp-field-row { color: #1d1d1f; }
    .pp-field-row + .pp-field-row {
      border-top: 1px solid rgba(148,163,184,0.14);
    }
    html.theme-light .pp-field-row + .pp-field-row { border-top-color: rgba(148,163,184,0.16); }
    .pp-field-copy { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
    .pp-field-label {
      font-size: 11px; line-height: 1.2; letter-spacing: 0.12em; text-transform: uppercase;
      color: rgba(255,255,255,0.36); font-weight: 700;
    }
    html.theme-light .pp-field-label, .theme-light .pp-field-label { color: #86868b; }
    .pp-field-value {
      font-size: 14px; line-height: 1.4; color: #e8ecf0; font-weight: 500; word-break: break-word;
    }
    html.theme-light .pp-field-value, .theme-light .pp-field-value { color: #1d1d1f; }
    .pp-field-value.pp-field-empty { color: rgba(255,255,255,0.28); }
    html.theme-light .pp-field-value.pp-field-empty, .theme-light .pp-field-value.pp-field-empty { color: #86868b; }
    .pp-field-arrow {
      width: 18px; height: 18px; min-width: 18px; color: rgba(148,163,184,0.6);
    }
    /* Screenshots */
    .pp-screenshot-section { display: flex; flex-direction: column; gap: 0; }
    .pp-section-head {
      display: flex; align-items: center; justify-content: space-between; gap: 8px;
      margin-bottom: 10px;
    }
    .pp-screenshot-add-btn {
      display: flex; align-items: center; gap: 4px; padding: 5px 10px;
      border-radius: 8px; border: none; cursor: pointer;
      background: rgba(255,255,255,0.06); color: #e8ecf0;
      font-size: 12px; font-weight: 600; font-family: inherit;
      transition: background 0.12s ease;
    }
    html.theme-light .pp-screenshot-add-btn, .theme-light .pp-screenshot-add-btn {
      background: rgba(0,0,0,0.04); color: #1d1d1f;
    }
    .pp-screenshot-add-btn:hover { background: rgba(255,255,255,0.1); }
    html.theme-light .pp-screenshot-add-btn:hover { background: rgba(0,0,0,0.07); }
    .pp-screenshot-gallery {
      display: flex; gap: 8px; overflow-x: auto; padding: 0 0 6px;
      scrollbar-width: none; -ms-overflow-style: none;
    }
    .pp-screenshot-gallery::-webkit-scrollbar { display: none; }
    .pp-screenshot-placeholder {
      width: 100%; min-height: 100px; display: flex; flex-direction: column;
      align-items: center; justify-content: center; gap: 8px;
      border-radius: 16px; border: 1.5px dashed rgba(148,163,184,0.22);
      background: rgba(255,255,255,0.02); color: rgba(255,255,255,0.28);
      cursor: pointer; transition: background 0.12s ease, border-color 0.12s ease;
      padding: 20px;
    }
    html.theme-light .pp-screenshot-placeholder, .theme-light .pp-screenshot-placeholder {
      border-color: rgba(148,163,184,0.25); background: rgba(0,0,0,0.015); color: #86868b;
    }
    .pp-screenshot-placeholder:hover {
      background: rgba(255,255,255,0.04); border-color: rgba(148,163,184,0.35);
    }
    .pp-screenshot-placeholder svg { width: 28px; height: 28px; opacity: 0.5; }
    .pp-screenshot-placeholder span { font-size: 12px; font-weight: 500; }
    .pp-screenshot-thumb {
      width: 80px; height: 142px; min-width: 80px; border-radius: 12px;
      overflow: hidden; position: relative;
      border: 1px solid rgba(148,163,184,0.14);
      background: #0d1117;
      box-shadow: 0 2px 8px rgba(0,0,0,0.18);
    }
    html.theme-light .pp-screenshot-thumb, .theme-light .pp-screenshot-thumb {
      background: #f0f0f5; border-color: rgba(148,163,184,0.16);
      box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    }
    .pp-screenshot-thumb img {
      width: 100%; height: 100%; object-fit: cover;
    }
    .pp-screenshot-remove {
      position: absolute; top: 4px; right: 4px; width: 20px; height: 20px;
      border-radius: 50%; border: none; cursor: pointer;
      background: rgba(0,0,0,0.55); color: #fff;
      display: flex; align-items: center; justify-content: center;
      font-size: 12px; line-height: 1; opacity: 0;
      transition: opacity 0.12s ease;
    }
    .pp-screenshot-thumb:hover .pp-screenshot-remove { opacity: 1; }
    /* Monetization panel */
    .pp-monetization-panel {
      display: flex; flex-direction: column; gap: 12px;
      padding: 14px 0 0; border-top: 1px solid rgba(148,163,184,0.14);
    }
    html.theme-light .pp-monetization-panel, .theme-light .pp-monetization-panel { border-top-color: rgba(148,163,184,0.16); }
    /* Subscription toggle */
    .pp-sub-toggle-row {
      display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 2px 0;
    }
    .pp-sub-toggle-label {
      font-size: 11px; line-height: 1.2; letter-spacing: 0.12em; text-transform: uppercase;
      color: rgba(255,255,255,0.36); font-weight: 700;
    }
    html.theme-light .pp-sub-toggle-label, .theme-light .pp-sub-toggle-label { color: #86868b; }
    .pp-sub-toggle {
      display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
      -webkit-tap-highlight-color: transparent; user-select: none;
    }
    .pp-sub-toggle input { position: absolute; opacity: 0; pointer-events: none; }
    .pp-sub-toggle-text { font-size: 13px; font-weight: 700; color: #e8ecf0; min-width: 22px; text-align: right; }
    html.theme-light .pp-sub-toggle-text, .theme-light .pp-sub-toggle-text { color: #1d1d1f; }
    .pp-sub-toggle-track {
      position: relative; width: 48px; height: 28px; border-radius: 999px;
      border: 1px solid rgba(148,163,184,0.16);
      background: linear-gradient(180deg, rgba(34,42,57,0.94) 0%, rgba(17,24,39,0.98) 100%);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), inset 0 -1px 0 rgba(0,0,0,0.18);
      transition: background 0.2s ease, border-color 0.2s ease;
    }
    .pp-sub-toggle-track::after {
      content:''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
      border-radius: 50%;
      background: linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(224,229,236,0.96) 100%);
      box-shadow: 0 3px 8px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.9);
      transition: transform 0.2s ease;
    }
    .pp-sub-toggle input:checked + .pp-sub-toggle-track {
      border-color: rgba(10,132,255,0.28);
      background: linear-gradient(180deg, rgba(56,137,255,0.98) 0%, rgba(10,132,255,0.96) 100%);
    }
    .pp-sub-toggle input:checked + .pp-sub-toggle-track::after { transform: translateX(20px); }
    html.theme-light .pp-sub-toggle-track, .theme-light .pp-sub-toggle-track {
      background: linear-gradient(180deg, rgba(241,245,250,0.98) 0%, rgba(227,232,239,0.98) 100%);
      border-color: rgba(148,163,184,0.18);
    }
    html.theme-light .pp-sub-toggle-track::after, .theme-light .pp-sub-toggle-track::after {
      background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(236,240,245,0.98) 100%);
    }
    /* Money input */
    .pp-money-input-wrap {
      display: flex; align-items: center; gap: 10px; padding: 12px 14px;
      border-radius: 18px; border: 1px solid rgba(148,163,184,0.14);
      background: rgba(15,23,42,0.16); margin-bottom: 12px;
    }
    html.theme-light .pp-money-input-wrap, .theme-light .pp-money-input-wrap {
      background: rgba(255,255,255,0.78); border-color: rgba(148,163,184,0.16);
    }
    .pp-money-prefix { font-size: 21px; font-weight: 700; color: #e8ecf0; }
    html.theme-light .pp-money-prefix, .theme-light .pp-money-prefix { color: #1d1d1f; }
    .pp-money-input {
      width: 100%; border: none; outline: none; background: transparent;
      color: #e8ecf0; font-size: 21px; font-weight: 700; font-family: inherit;
    }
    html.theme-light .pp-money-input, .theme-light .pp-money-input { color: #1d1d1f; }
    .pp-money-input::placeholder { color: rgba(255,255,255,0.22); }
    html.theme-light .pp-money-input::placeholder, .theme-light .pp-money-input::placeholder { color: #bbb; }
    /* Billing picker */
    .pp-picker-shell {
      position: relative; display: flex; align-items: center; min-height: 52px;
      padding: 0 48px 0 18px; border-radius: 18px;
      border: 1px solid rgba(148,163,184,0.16); background: rgba(15,23,42,0.18); overflow: hidden;
    }
    html.theme-light .pp-picker-shell, .theme-light .pp-picker-shell {
      background: rgba(255,255,255,0.8); border-color: rgba(148,163,184,0.18);
    }
    .pp-picker-select {
      appearance: none; -webkit-appearance: none; width: 100%; border: none; outline: none;
      background: transparent; color: #e8ecf0; font-size: 15px; font-weight: 600;
      font-family: inherit; cursor: pointer; padding: 14px 0;
    }
    html.theme-light .pp-picker-select, .theme-light .pp-picker-select { color: #1d1d1f; }
    .pp-picker-icon {
      position: absolute; right: 16px; width: 18px; height: 18px;
      color: rgba(148,163,184,0.86); pointer-events: none;
    }
    /* Timer panel */
    .pp-timer-panel { display: flex; flex-direction: column; gap: 12px; }
    .pp-timer-row {
      display: flex; align-items: center; gap: 14px; padding: 14px 16px;
      border-radius: 20px; border: 1px solid rgba(148,163,184,0.14);
      background: rgba(15,23,42,0.14);
    }
    html.theme-light .pp-timer-row, .theme-light .pp-timer-row {
      border-color: rgba(148,163,184,0.18); background: rgba(255,255,255,0.84);
    }
    .pp-timer-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
    .pp-timer-title { margin: 0; font-size: 14px; font-weight: 700; color: #e8ecf0; letter-spacing: -0.01em; }
    html.theme-light .pp-timer-title, .theme-light .pp-timer-title { color: #1d1d1f; }
    .pp-timer-text { margin: 0; font-size: 12px; line-height: 1.45; color: rgba(255,255,255,0.36); }
    html.theme-light .pp-timer-text, .theme-light .pp-timer-text { color: #86868b; }
    .pp-timer-input {
      width: 74px; min-width: 74px; border: 1px solid rgba(148,163,184,0.16);
      border-radius: 16px; padding: 12px 10px; text-align: center;
      background: rgba(10,15,23,0.78); color: #e8ecf0;
      font-size: 17px; font-weight: 700; font-family: inherit; outline: none;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), inset 0 -1px 0 rgba(0,0,0,0.2);
    }
    html.theme-light .pp-timer-input, .theme-light .pp-timer-input {
      background: rgba(255,255,255,0.92); border-color: rgba(148,163,184,0.18); color: #1d1d1f;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.96), inset 0 -1px 0 rgba(148,163,184,0.08);
    }
    /* Subscription info + stripe */
    .pp-sub-info {
      padding: 13px 14px; border-radius: 18px;
      border: 1px solid rgba(88,166,255,0.12); background: rgba(56,139,253,0.08);
      color: #e8ecf0; font-size: 13px; line-height: 1.45;
    }
    html.theme-light .pp-sub-info, .theme-light .pp-sub-info { color: #1d1d1f; background: rgba(56,139,253,0.06); }
    .pp-app-icon-sm { width: 32px; height: 32px; min-width: 32px; font-size: 14px; }
    .pp-stripe-note { font-size: 12px; line-height: 1.45; color: rgba(255,255,255,0.36); margin-top: -2px; }
    html.theme-light .pp-stripe-note, .theme-light .pp-stripe-note { color: #86868b; }
    /* ─ Earnings panel ─ */
    .pub-earnings-panel { height: 480px; }
    .ep-title { font-size: 15px; font-weight: 700; color: #e8ecf0; }
    html.theme-light .ep-title, .theme-light .ep-title { color: #1d1d1f; }
    .ep-body {
      flex: 1; min-height: 0; overflow-y: auto; padding: 0 18px 14px;
      display: flex; flex-direction: column; gap: 14px;
    }
    .ep-loading {
      flex: 1; display: flex; flex-direction: column; align-items: center;
      justify-content: center; gap: 12px; color: rgba(255,255,255,0.36);
      font-size: 13px; font-weight: 500;
    }
    html.theme-light .ep-loading, .theme-light .ep-loading { color: #86868b; }
    .ep-spinner {
      width: 24px; height: 24px; border-radius: 50%;
      border: 2.5px solid rgba(255,255,255,0.1); border-top-color: #0a84ff;
      animation: epSpin 0.8s linear infinite;
    }
    @keyframes epSpin { to { transform: rotate(360deg); } }
    .ep-not-connected {
      flex: 1; display: flex; flex-direction: column; align-items: center;
      justify-content: center; gap: 10px; text-align: center; padding: 20px 0;
    }
    .ep-empty-icon { color: rgba(255,255,255,0.22); margin-bottom: 4px; }
    html.theme-light .ep-empty-icon, .theme-light .ep-empty-icon { color: #bbb; }
    .ep-empty-text { font-size: 15px; font-weight: 700; color: #e8ecf0; }
    html.theme-light .ep-empty-text, .theme-light .ep-empty-text { color: #1d1d1f; }
    .ep-empty-sub { font-size: 12px; line-height: 1.45; color: rgba(255,255,255,0.36); max-width: 240px; margin-bottom: 8px; }
    html.theme-light .ep-empty-sub, .theme-light .ep-empty-sub { color: #86868b; }
    .ep-status-row {
      display: flex; align-items: center; gap: 8px; padding: 8px 12px;
      border-radius: 12px; background: rgba(63,185,80,0.08);
      border: 1px solid rgba(63,185,80,0.14);
    }
    html.theme-light .ep-status-row, .theme-light .ep-status-row {
      background: rgba(63,185,80,0.06); border-color: rgba(63,185,80,0.12);
    }
    .ep-status-dot {
      width: 8px; height: 8px; border-radius: 50%; background: #3fb950;
      box-shadow: 0 0 6px rgba(63,185,80,0.4);
    }
    .ep-status-text { font-size: 12px; font-weight: 600; color: #3fb950; }
    .ep-stats-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
    .ep-stat-card {
      display: flex; flex-direction: column; gap: 4px; padding: 12px 10px;
      border-radius: 14px; border: 1px solid rgba(148,163,184,0.1);
      background: rgba(255,255,255,0.03);
    }
    html.theme-light .ep-stat-card, .theme-light .ep-stat-card {
      background: rgba(0,0,0,0.02); border-color: rgba(148,163,184,0.12);
    }
    .ep-stat-label {
      font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
      color: rgba(255,255,255,0.32);
    }
    html.theme-light .ep-stat-label, .theme-light .ep-stat-label { color: #86868b; }
    .ep-stat-value { font-size: 18px; font-weight: 800; color: #e8ecf0; letter-spacing: -0.02em; }
    html.theme-light .ep-stat-value, .theme-light .ep-stat-value { color: #1d1d1f; }
    .ep-chart-section { display: flex; flex-direction: column; gap: 8px; }
    .ep-chart-label {
      font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
      color: rgba(255,255,255,0.32);
    }
    html.theme-light .ep-chart-label, .theme-light .ep-chart-label { color: #86868b; }
    .ep-chart-wrap {
      border-radius: 14px; border: 1px solid rgba(148,163,184,0.1);
      background: rgba(255,255,255,0.02); padding: 12px 8px 8px; overflow: hidden;
    }
    html.theme-light .ep-chart-wrap, .theme-light .ep-chart-wrap {
      background: rgba(0,0,0,0.015); border-color: rgba(148,163,184,0.12);
    }
    .ep-txn-section { display: flex; flex-direction: column; gap: 8px; }
    .ep-txn-label {
      font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
      color: rgba(255,255,255,0.32);
    }
    html.theme-light .ep-txn-label, .theme-light .ep-txn-label { color: #86868b; }
    .ep-txn-list {
      border-radius: 14px; border: 1px solid rgba(148,163,184,0.1);
      background: rgba(255,255,255,0.02); overflow: hidden;
    }
    html.theme-light .ep-txn-list, .theme-light .ep-txn-list {
      background: rgba(0,0,0,0.015); border-color: rgba(148,163,184,0.12);
    }
    .ep-txn-empty {
      padding: 20px; text-align: center; font-size: 12px; color: rgba(255,255,255,0.24);
    }
    html.theme-light .ep-txn-empty, .theme-light .ep-txn-empty { color: #bbb; }
    .ep-txn-row {
      display: flex; align-items: center; justify-content: space-between; gap: 10px;
      padding: 11px 14px;
    }
    .ep-txn-row + .ep-txn-row { border-top: 1px solid rgba(148,163,184,0.08); }
    html.theme-light .ep-txn-row + .ep-txn-row { border-top-color: rgba(148,163,184,0.1); }
    .ep-txn-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
    .ep-txn-desc { font-size: 13px; font-weight: 600; color: #e8ecf0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    html.theme-light .ep-txn-desc, .theme-light .ep-txn-desc { color: #1d1d1f; }
    .ep-txn-date { font-size: 11px; color: rgba(255,255,255,0.3); }
    html.theme-light .ep-txn-date, .theme-light .ep-txn-date { color: #86868b; }
    .ep-txn-amount { font-size: 14px; font-weight: 700; color: #3fb950; white-space: nowrap; }
    .ep-txn-amount.refunded { color: #f85149; }
    /* ═══ PAYMENT SHEET — Apple Pay style (inside app window) ═══ */
    .pay-sheet-overlay {
      position: absolute; inset: 0; z-index: 200;
      display: none; align-items: flex-end; justify-content: center;
      background: rgba(0,0,0,0.55);
      border-radius: inherit;
      touch-action: auto;
    }
    .pay-sheet-overlay.show { display: flex; animation: payFadeIn 0.2s ease; }
    @keyframes payFadeIn { from { opacity: 0; } to { opacity: 1; } }
    @keyframes payScaleIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
    .pay-sheet {
      width: 100%; position: relative;
      background: #2c2c2e; border-radius: 20px 20px 0 0;
      box-shadow: 0 -4px 30px rgba(0,0,0,0.45);
      display: flex; flex-direction: column;
      animation: paySlideUp 0.32s cubic-bezier(0.32, 0.72, 0, 1);
      max-height: 92%; overflow: hidden;
    }
    @keyframes paySlideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
    html.theme-light .pay-sheet, .theme-light .pay-sheet {
      background: #FFFFFF;
      box-shadow: 0 -4px 30px rgba(0,0,0,0.10);
    }
    @media (min-width: 601px) {
      .pay-sheet-overlay { align-items: center; }
      .pay-sheet {
        max-width: 360px; width: 360px;
        border-radius: 14px;
        box-shadow: 0 4px 24px rgba(0,0,0,0.22), 0 0 0 0.5px rgba(0,0,0,0.08);
        animation: payScaleIn 0.28s cubic-bezier(0.32, 0.72, 0, 1);
      }
      html.theme-light .pay-sheet, .theme-light .pay-sheet {
        box-shadow: 0 4px 24px rgba(0,0,0,0.12), 0 0 0 0.5px rgba(0,0,0,0.06);
      }
      .pay-sheet-handle { display: none; }
    }
    .pay-sheet-handle {
      width: 36px; height: 4px; border-radius: 2px;
      background: rgba(255,255,255,0.22); margin: 8px auto 0; flex-shrink: 0;
    }
    html.theme-light .pay-sheet-handle, .theme-light .pay-sheet-handle { background: rgba(0,0,0,0.14); }
    /* Title bar: title + close X */
    .pay-sheet-titlebar {
      display: flex; align-items: center; justify-content: space-between; gap: 10px;
      padding: 16px 18px 14px; flex-shrink: 0;
    }
    .pay-sheet-titlebar-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
    .pay-sheet-title {
      font-size: 17px; font-weight: 700; color: #f5f5f7; letter-spacing: -0.01em;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    html.theme-light .pay-sheet-title, .theme-light .pay-sheet-title { color: #1d1d1f; }
    .pay-sheet-subtitle {
      font-size: 12px; font-weight: 500; color: rgba(255,255,255,0.45);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    html.theme-light .pay-sheet-subtitle, .theme-light .pay-sheet-subtitle { color: #86868b; }
    /* Item row: icon + name/meta + price */
    .pay-sheet-item {
      display: flex; align-items: center; gap: 12px;
      padding: 14px 18px; flex-shrink: 0;
      border-top: 1px solid rgba(255,255,255,0.06);
      border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    html.theme-light .pay-sheet-item, .theme-light .pay-sheet-item {
      border-top-color: rgba(0,0,0,0.07); border-bottom-color: rgba(0,0,0,0.07);
    }
    .pay-sheet-icon {
      width: 40px; height: 40px; min-width: 40px; border-radius: 11px;
      display: flex; align-items: center; justify-content: center;
      background: linear-gradient(135deg, #58a6ff, #7cc4fa);
      color: #fff; font-size: 17px; font-weight: 800;
      box-shadow: 0 2px 8px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.18);
      position: relative; overflow: hidden;
    }
    .pay-sheet-icon::after {
      content: ''; position: absolute; inset: 0; border-radius: inherit;
      background: linear-gradient(180deg, rgba(255,255,255,0.22) 0%, transparent 50%);
      pointer-events: none;
    }
    .pay-sheet-item-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
    .pay-sheet-item-name {
      font-size: 14px; font-weight: 600; color: #f5f5f7;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    html.theme-light .pay-sheet-item-name, .theme-light .pay-sheet-item-name { color: #1d1d1f; }
    .pay-sheet-item-meta {
      font-size: 12px; font-weight: 500; color: rgba(255,255,255,0.4);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    html.theme-light .pay-sheet-item-meta, .theme-light .pay-sheet-item-meta { color: #86868b; }
    .pay-sheet-item-price {
      display: flex; flex-direction: column; align-items: flex-end; gap: 0;
      flex-shrink: 0; text-align: right;
    }
    .pay-sheet-price {
      font-size: 17px; font-weight: 700; color: #f5f5f7; letter-spacing: -0.01em;
    }
    html.theme-light .pay-sheet-price, .theme-light .pay-sheet-price { color: #1d1d1f; }
    .pay-sheet-interval {
      font-size: 11px; font-weight: 500; color: rgba(255,255,255,0.4);
    }
    html.theme-light .pay-sheet-interval, .theme-light .pay-sheet-interval { color: #86868b; }
    /* Section label (e.g. CARD DETAILS) */
    .pay-sheet-section-label {
      font-size: 11px; font-weight: 700; color: rgba(255,255,255,0.4);
      text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: -4px;
    }
    html.theme-light .pay-sheet-section-label, .theme-light .pay-sheet-section-label { color: #86868b; }
    /* Total row */
    .pay-sheet-total-row {
      display: flex; align-items: center; justify-content: space-between;
      padding: 14px 0 4px; margin-top: 4px;
      border-top: 1px solid rgba(255,255,255,0.06);
    }
    html.theme-light .pay-sheet-total-row, .theme-light .pay-sheet-total-row {
      border-top-color: rgba(0,0,0,0.07);
    }
    .pay-sheet-total-label {
      font-size: 14px; font-weight: 600; color: rgba(255,255,255,0.65);
    }
    html.theme-light .pay-sheet-total-label, .theme-light .pay-sheet-total-label { color: #424245; }
    .pay-sheet-total-amount {
      font-size: 20px; font-weight: 800; color: #f5f5f7; letter-spacing: -0.02em;
    }
    html.theme-light .pay-sheet-total-amount, .theme-light .pay-sheet-total-amount { color: #1d1d1f; }
    .pay-sheet-body {
      flex: 1; min-height: 0; overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }
    .pay-sheet-form {
      padding: 16px 18px 20px;
      display: flex; flex-direction: column; gap: 14px;
    }
    .pay-sheet-field-label {
      font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.45);
      text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 5px;
    }
    html.theme-light .pay-sheet-field-label, .theme-light .pay-sheet-field-label { color: #86868b; }
    .pay-sheet-card-wrap {
      background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
      border-radius: 14px; padding: 14px 14px;
      transition: border-color 0.2s;
      position: relative; z-index: 1;
    }
    .pay-sheet-card-wrap iframe { pointer-events: auto !important; touch-action: auto !important; }
    .pay-sheet-card-wrap.focused { border-color: #58a6ff; }
    html.theme-light .pay-sheet-card-wrap, .theme-light .pay-sheet-card-wrap {
      background: #fff; border-color: rgba(0,0,0,0.12);
    }
    html.theme-light .pay-sheet-card-wrap.focused, .theme-light .pay-sheet-card-wrap.focused { border-color: #0a84ff; }
    .pay-sheet-card-row {
      display: flex; gap: 10px;
    }
    .pay-sheet-card-row > div { flex: 1; min-width: 0; }
    .pay-sheet-card-row .pay-sheet-card-wrap { width: 100%; }
    .pay-sheet-pay-btn {
      position: relative; overflow: hidden;
      width: 100%; padding: 15px 20px; border-radius: 12px; cursor: pointer;
      font-size: 16px; font-weight: 700; font-family: inherit;
      color: #000; display: flex; align-items: center; justify-content: center; gap: 8px;
      background: linear-gradient(180deg, #fcfcfd 0%, #e4e4ea 48%, #c4c4cc 100%);
      border: 0.5px solid rgba(0,0,0,0.18);
      text-shadow: 0 1px 0 rgba(255,255,255,0.75);
      box-shadow: 0 4px 16px rgba(0,0,0,0.45), 0 1px 3px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,1), inset 0 -1px 0 rgba(0,0,0,0.18), inset 0 -6px 14px rgba(0,0,0,0.08);
      transition: opacity 0.15s, transform 0.1s, box-shadow 0.15s;
    }
    .pay-sheet-pay-btn::before {
      content: ""; position: absolute; left: 0; right: 0; top: 0; height: 45%;
      background: linear-gradient(180deg, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.25) 55%, rgba(255,255,255,0) 100%);
      pointer-events: none; border-radius: 12px 12px 0 0;
    }
    .pay-sheet-pay-btn::after {
      content: ""; position: absolute; left: 10%; right: 10%; top: 1px; height: 1px;
      background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0) 100%);
      pointer-events: none;
    }
    .pay-sheet-pay-btn:active { transform: scale(0.97); box-shadow: 0 2px 8px rgba(0,0,0,0.35), inset 0 1px 2px rgba(0,0,0,0.15); }
    .pay-sheet-pay-btn:disabled { opacity: 0.5; pointer-events: none; }
    .pay-sheet-pay-btn .pay-lock-icon, .pay-sheet-pay-btn svg { opacity: 0.7; position: relative; z-index: 1; }
    .pay-sheet-pay-btn span { position: relative; z-index: 1; }
    html.theme-light .pay-sheet-pay-btn, .theme-light .pay-sheet-pay-btn {
      background: linear-gradient(180deg, #ffffff 0%, #f0f0f3 48%, #d4d4dc 100%);
      border: 0.5px solid rgba(0,0,0,0.22);
      box-shadow: 0 4px 14px rgba(0,0,0,0.18), 0 1px 3px rgba(0,0,0,0.14), inset 0 1px 0 rgba(255,255,255,1), inset 0 -1px 0 rgba(0,0,0,0.14), inset 0 -6px 14px rgba(0,0,0,0.05);
    }
    .pay-sheet-error {
      font-size: 13px; color: #ff453a; text-align: center;
      padding: 0 4px; min-height: 18px;
    }
    .pay-sheet-secure {
      display: flex; align-items: center; justify-content: center; gap: 5px;
      font-size: 11px; color: rgba(255,255,255,0.25); padding-bottom: 2px;
    }
    html.theme-light .pay-sheet-secure, .theme-light .pay-sheet-secure { color: #bbb; }
    .pay-sheet-loading {
      display: flex; flex-direction: column; align-items: center;
      justify-content: center; gap: 10px; padding: 44px 20px;
      color: rgba(255,255,255,0.38); font-size: 13px; font-weight: 500;
    }
    html.theme-light .pay-sheet-loading, .theme-light .pay-sheet-loading { color: #86868b; }
    .pay-sheet-loading .ep-spinner { width: 24px; height: 24px; }
    .pay-sheet-close {
      flex-shrink: 0;
      width: 28px; height: 28px; border-radius: 50%;
      background: rgba(255,255,255,0.1); border: none; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      color: rgba(255,255,255,0.55);
      transition: background 0.15s;
    }
    .pay-sheet-close:hover { background: rgba(255,255,255,0.16); }
    .pay-sheet-close:active { background: rgba(255,255,255,0.2); }
    html.theme-light .pay-sheet-close, .theme-light .pay-sheet-close {
      background: rgba(0,0,0,0.06); color: rgba(0,0,0,0.4);
    }
    html.theme-light .pay-sheet-close:hover, .theme-light .pay-sheet-close:hover { background: rgba(0,0,0,0.1); }
    .pay-sheet-success {
      display: none; flex-direction: column; align-items: center;
      justify-content: center; gap: 14px; padding: 36px 20px 40px;
      text-align: center;
    }
    .pay-sheet-success.show { display: flex; animation: paySuccessFadeIn 0.4s cubic-bezier(0.32,0.72,0,1); }
    @keyframes paySuccessFadeIn { from { opacity:0; transform:scale(0.92); } to { opacity:1; transform:scale(1); } }
    @keyframes payCheckDraw { from { stroke-dashoffset: 28; } to { stroke-dashoffset: 0; } }
    @keyframes payIconPop { 0% { transform:scale(0); opacity:0; } 50% { transform:scale(1.15); } 100% { transform:scale(1); opacity:1; } }
    .pay-sheet-success-icon {
      width: 56px; height: 56px; border-radius: 50%;
      background: linear-gradient(135deg, #34C759, #30D158);
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 4px 16px rgba(52,199,89,0.35), 0 0 0 4px rgba(52,199,89,0.12);
      animation: payIconPop 0.5s cubic-bezier(0.32,0.72,0,1) 0.1s both;
    }
    .pay-sheet-success.show .pay-sheet-success-icon svg path {
      stroke-dasharray: 28; stroke-dashoffset: 28;
      animation: payCheckDraw 0.4s ease-out 0.4s forwards;
    }
    .pay-sheet-success-icon svg { width: 28px; height: 28px; }
    .pay-sheet-success-title {
      font-size: 18px; font-weight: 700; color: #f5f5f7;
    }
    html.theme-light .pay-sheet-success-title, .theme-light .pay-sheet-success-title { color: #1d1d1f; }
    .pay-sheet-success-text {
      font-size: 13px; color: rgba(255,255,255,0.45); line-height: 1.5;
    }
    html.theme-light .pay-sheet-success-text, .theme-light .pay-sheet-success-text { color: #86868b; }
    @media (max-height: 700px) {
      .pay-sheet-titlebar { padding: 12px 16px 10px; }
      .pay-sheet-title { font-size: 15px; }
      .pay-sheet-subtitle { font-size: 11px; }
      .pay-sheet-item { padding: 10px 16px; gap: 10px; }
      .pay-sheet-icon { width: 34px; height: 34px; min-width: 34px; border-radius: 9px; font-size: 15px; }
      .pay-sheet-item-name { font-size: 13px; }
      .pay-sheet-item-meta { font-size: 11px; }
      .pay-sheet-price { font-size: 15px; }
      .pay-sheet-interval { font-size: 10px; }
      .pay-sheet-handle { margin-top: 6px; }
      .pay-sheet-total-amount { font-size: 18px; }
      .pay-sheet-checkout { padding: 8px 12px 12px; }
    }
    /* ═══ PUBLISH SUCCESS OVERLAY ═══ */
    #studio-step-publish-success.studio-step-active {
      display: flex; position: absolute; inset: 0; z-index: 60;
      border-radius: inherit; overflow: visible;
    }
    .publish-success-overlay {
      position: absolute; inset: 0; z-index: 60;
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      background: #fff; border-radius: inherit;
      animation: pubSuccFadeIn 0.3s ease; gap: 18px; padding: 24px;
    }
    .theme-dark .publish-success-overlay,
    html.theme-dark .publish-success-overlay {
      background: #1c1c1e;
    }
    @keyframes pubSuccFadeIn { from { opacity: 0; } to { opacity: 1; } }
    .publish-success-checkmark {
      width: 72px; height: 72px; border-radius: 50%;
      background: #34c759; display: flex; align-items: center; justify-content: center;
      animation: pubSuccBounce 0.5s cubic-bezier(0.34,1.56,0.64,1) 0.1s both;
      box-shadow: 0 4px 20px rgba(52,199,89,0.35);
    }
    @keyframes pubSuccBounce { from { opacity:0; transform: scale(0.3); } to { opacity:1; transform: scale(1); } }
    .publish-success-checkmark svg { width: 36px; height: 36px; }
    .publish-success-checkmark svg path {
      stroke-dasharray: 40; stroke-dashoffset: 40;
      animation: pubSuccDraw 0.4s ease 0.35s forwards;
    }
    @keyframes pubSuccDraw { to { stroke-dashoffset: 0; } }
    .publish-success-title {
      font-size: 1.35rem; font-weight: 700; letter-spacing: -0.02em; color: #1d1d1f;
      animation: pubSuccUp 0.4s ease 0.2s both; text-align: center;
    }
    .theme-dark .publish-success-title { color: #f5f5f7; }
    @keyframes pubSuccUp { from { opacity:0; transform: translateY(12px); } to { opacity:1; transform: translateY(0); } }
    .publish-success-link {
      font-family: 'SF Mono', 'Menlo', monospace; font-size: 0.9rem; font-weight: 500;
      background: rgba(0,0,0,0.04); border: 1px solid rgba(0,0,0,0.08);
      border-radius: 10px; padding: 10px 18px; color: #007aff;
      animation: pubSuccUp 0.4s ease 0.3s both; text-align: center; word-break: break-all;
    }
    .theme-dark .publish-success-link {
      background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.12); color: #58a6ff;
    }
    .publish-success-actions {
      display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;
      animation: pubSuccUp 0.4s ease 0.4s both;
    }
    .publish-success-btn {
      display: inline-flex; align-items: center; gap: 6px;
      font-size: 0.9rem; font-weight: 600; border-radius: 980px;
      padding: 10px 22px; border: none; cursor: pointer; transition: opacity 0.15s;
    }
    .publish-success-btn:hover { opacity: 0.85; }
    .publish-success-btn.ps-open { background: #007aff; color: #fff; }
    .theme-dark .publish-success-btn.ps-open { background: #0a84ff; }
    .publish-success-btn.ps-copy { background: rgba(0,0,0,0.06); color: #1d1d1f; border: 1px solid rgba(0,0,0,0.1); }
    .theme-dark .publish-success-btn.ps-copy {
      background: rgba(255,255,255,0.1); color: #f5f5f7; border-color: rgba(255,255,255,0.15);
    }
    .publish-success-btn.ps-share { background: rgba(0,0,0,0.06); color: #1d1d1f; border: 1px solid rgba(0,0,0,0.1); }
    .theme-dark .publish-success-btn.ps-share {
      background: rgba(255,255,255,0.1); color: #f5f5f7; border-color: rgba(255,255,255,0.15);
    }
    .publish-success-done {
      font-size: 0.85rem; font-weight: 500; color: #86868b; cursor: pointer;
      background: none; border: none; padding: 8px 16px; margin-top: 4px;
      animation: pubSuccUp 0.4s ease 0.5s both;
    }
    .publish-success-done:hover { color: #1d1d1f; }
    .theme-dark .publish-success-done:hover { color: #f5f5f7; }
    /* ═══ INSTALLED APPS — fills launcher card ═══ */
    .installed-apps-overlay {
      position: absolute; inset: 0;
      z-index: 20;
      display: none; flex-direction: column;
      background: var(--bg-card, #1c1c1e);
      border-radius: inherit;
      overflow: hidden;
    }
    .installed-apps-overlay.show { display: flex; }
    html.theme-light .installed-apps-overlay,
    .theme-light .installed-apps-overlay {
      background: var(--bg-card, #ffffff);
    }
    .installed-apps-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: 24px 28px 12px;
      flex-shrink: 0;
    }
    .installed-apps-title {
      font-size: 20px; font-weight: 700; color: #e8ecf0;
      letter-spacing: -0.02em;
    }
    html.theme-light .installed-apps-title,
    .theme-light .installed-apps-title { color: #1f2328; }
    .installed-apps-close {
      width: 30px; height: 30px; min-width: 30px;
      border-radius: 50%; border: 1px solid rgba(255,255,255,0.08);
      background: rgba(255,255,255,0.06);
      color: #e8ecf0; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      transition: background 0.12s ease, transform 0.1s ease;
    }
    html.theme-light .installed-apps-close,
    .theme-light .installed-apps-close {
      background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.08); color: #111;
    }
    .installed-apps-close:hover { background: rgba(255,255,255,0.1); }
    html.theme-light .installed-apps-close:hover,
    .theme-light .installed-apps-close:hover { background: rgba(0,0,0,0.08); }
    .installed-apps-close:active { transform: scale(0.92); }
    .installed-apps-close svg { width: 16px; height: 16px; }
    .installed-apps-count {
      font-size: 11px; font-weight: 600; text-transform: uppercase;
      letter-spacing: 0.06em;
      color: rgba(255,255,255,0.3);
      padding: 0 30px 8px;
    }
    html.theme-light .installed-apps-count,
    .theme-light .installed-apps-count { color: rgba(0,0,0,0.3); }
    .installed-apps-scroll {
      flex: 1; overflow-y: auto;
      padding: 0 28px 28px;
      -webkit-overflow-scrolling: touch;
    }
    /* ─ Grid: 2 columns on desktop, launcher-like tiles ─ */
    .installed-apps-grid {
      display: flex; flex-wrap: wrap;
      gap: 0; align-items: flex-start;
    }
    .installed-app-tile {
      flex: 0 0 50%; max-width: 50%; min-width: 0;
      display: flex; align-items: center; gap: 12px;
      padding: 12px 14px 12px 0;
      cursor: pointer;
      transition: background 0.12s ease;
      border: none; background: transparent;
      text-align: left; color: inherit;
      -webkit-tap-highlight-color: transparent;
    }
    .installed-app-tile:nth-child(2n) {
      padding: 12px 0 12px 20px;
    }
    .installed-app-tile:hover {
      background: rgba(255,255,255,0.03);
      border-radius: 12px;
    }
    html.theme-light .installed-app-tile:hover,
    .theme-light .installed-app-tile:hover {
      background: rgba(0,0,0,0.02);
    }
    .installed-app-tile:active { opacity: 0.7; }
    .installed-app-icon {
      width: 48px; height: 48px; min-width: 48px;
      border-radius: 12px; overflow: hidden;
      position: relative;
      display: flex; align-items: center; justify-content: center;
      background: linear-gradient(135deg, #58a6ff 0%, #7cc4fa 100%);
      box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    }
    .installed-app-icon::after {
      content: ''; position: absolute; inset: 0; border-radius: inherit;
      background: linear-gradient(180deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.08) 40%, transparent 70%);
      pointer-events: none;
    }
    .installed-app-icon img {
      width: 100%; height: 100%; object-fit: cover; border-radius: inherit;
    }
    .installed-app-info {
      flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px;
    }
    .installed-app-name {
      font-size: 14px; font-weight: 600; color: #e8ecf0;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    html.theme-light .installed-app-name,
    .theme-light .installed-app-name { color: #1f2328; }
    .installed-app-meta {
      font-size: 11px; font-weight: 500; color: rgba(255,255,255,0.36);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    html.theme-light .installed-app-meta,
    .theme-light .installed-app-meta { color: rgba(0,0,0,0.4); }
    .installed-app-remove {
      width: 28px; height: 28px; min-width: 28px;
      border-radius: 50%;
      border: 1px solid rgba(255,255,255,0.08);
      background: rgba(255,255,255,0.06);
      color: #ef4444; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      transition: background 0.12s ease, transform 0.15s cubic-bezier(0.4,0,0.2,1),
                  box-shadow 0.15s ease;
      flex-shrink: 0; margin-left: auto;
    }
    html.theme-light .installed-app-remove,
    .theme-light .installed-app-remove {
      background: linear-gradient(180deg, #fff 0%, #fafafa 100%);
      border-color: rgba(0,0,0,0.1);
      box-shadow: 0 2px 4px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04),
                  inset 0 1px 0 rgba(255,255,255,0.9);
      color: #ef4444;
    }
    html.theme-dark .installed-app-remove,
    .theme-dark .installed-app-remove {
      background: linear-gradient(180deg, #b0b0b0 0%, #9d9d9d 100%);
      border-color: rgba(0,0,0,0.12);
      box-shadow: 0 2px 4px rgba(0,0,0,0.15), 0 1px 2px rgba(0,0,0,0.1),
                  inset 0 1px 0 rgba(255,255,255,0.3);
      color: #000;
    }
    .installed-app-remove:hover { transform: scale(1.1); }
    .installed-app-remove svg { width: 13px; height: 13px; stroke-width: 2.5; }
    .installed-apps-empty {
      display: flex; flex-direction: column; align-items: center;
      justify-content: center; gap: 12px; padding: 48px 20px;
      text-align: center;
    }
    .installed-apps-empty-icon {
      width: 56px; height: 56px; border-radius: 14px;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.06);
      display: flex; align-items: center; justify-content: center;
      color: rgba(255,255,255,0.2);
    }
    html.theme-light .installed-apps-empty-icon,
    .theme-light .installed-apps-empty-icon {
      background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.06);
      color: rgba(0,0,0,0.2);
    }
    .installed-apps-empty-icon svg { width: 24px; height: 24px; }
    .installed-apps-empty-text {
      font-size: 15px; font-weight: 600; color: rgba(255,255,255,0.5);
    }
    html.theme-light .installed-apps-empty-text,
    .theme-light .installed-apps-empty-text { color: rgba(0,0,0,0.4); }
    .installed-apps-empty-sub {
      font-size: 12px; color: rgba(255,255,255,0.26);
    }
    html.theme-light .installed-apps-empty-sub,
    .theme-light .installed-apps-empty-sub { color: rgba(0,0,0,0.26); }
    /* Vertical divider like launcher */
    .installed-apps-grid::after {
      content: ''; position: absolute;
      top: 0; bottom: 0; left: 50%;
      transform: translateX(-50%); width: 1px;
      background-color: rgba(148,163,184,0.15);
      pointer-events: none;
    }
    .installed-apps-grid { position: relative; }

    @media (max-width: 640px) {
      .installed-apps-grid {
        display: flex;
        flex-direction: column;
        gap: 0;
      }
      .installed-apps-grid::after { display: none; }
      .installed-app-tile {
        flex: 1 1 auto !important;
        max-width: 100% !important;
        width: 100%;
        padding: 0.9rem 0 !important;
        border-bottom: 1px solid rgba(148,163,184,0.15);
      }
      .installed-app-tile:nth-child(2n) { padding: 0.9rem 0 !important; }
      .installed-app-tile:first-child {
        padding-top: 0.2rem !important;
      }
      .installed-app-tile:last-child {
        border-bottom: none;
      }
      .installed-apps-header { padding: 18px 20px 10px; }
      .installed-apps-scroll { padding: 0 20px 20px; }
      .installed-apps-count { padding: 0 22px 4px; }
    }
    /* ───────────────────────────────────────────────────────
       Soft elevation shadows — app window card, launcher card,
       and the "Ask me anything" pill. Three-stop layered shape:
         • 1px close-contact shadow (definition)
         • mid blur (depth)
         • broad diffuse ambient (lift)
       Triplet matches the iOS / macOS control feel — soft on
       all sides, no harsh 1px border that fights the rounded
       silhouette at desktop widths. The border was a hairline
       visible on Retina that made the pill feel boxed.

       Clip release: .card-container has `overflow-hidden` so its
       descendants' shadows get trimmed at the container edge.
       The launcher's overlay children (ai-chat-view, app-detail-
       view, app-window-view) all already self-clip with their own
       overflow:hidden, so dropping the outer clip while the
       launcher is open is safe and lets the elevation shadow
       breathe past the .rounded-3xl edge.
       ─────────────────────────────────────────────────────── */
    #open-state:not(.hidden) > .card-container:not(.is-flipping),
    #open-state:not(.hidden) > .card-container.app-window-active {
      overflow: visible !important;
    }
    :root.theme-light .card-container > .w-full.max-w-3xl > .rounded-3xl,
    html.theme-light .card-container > .w-full.max-w-3xl > .rounded-3xl {
      box-shadow:
        0 1px 2px rgba(0,0,0,0.05),
        0 6px 18px rgba(0,0,0,0.08),
        0 28px 64px rgba(0,0,0,0.12) !important;
      -webkit-box-shadow:
        0 1px 2px rgba(0,0,0,0.05),
        0 6px 18px rgba(0,0,0,0.08),
        0 28px 64px rgba(0,0,0,0.12) !important;
      border: 0.5px solid rgba(0,0,0,0.05) !important;
    }
    :root.theme-dark .card-container > .w-full.max-w-3xl > .rounded-3xl,
    html.theme-dark .card-container > .w-full.max-w-3xl > .rounded-3xl {
      box-shadow:
        0 1px 3px rgba(0,0,0,0.40),
        0 10px 26px rgba(0,0,0,0.45),
        0 30px 70px rgba(0,0,0,0.55) !important;
      -webkit-box-shadow:
        0 1px 3px rgba(0,0,0,0.40),
        0 10px 26px rgba(0,0,0,0.45),
        0 30px 70px rgba(0,0,0,0.55) !important;
      border: none !important;
    }
    :root.theme-light .search-container .rounded-3xl,
    html.theme-light .search-container .rounded-3xl {
      box-shadow:
        0 1px 2px rgba(0,0,0,0.04),
        0 5px 14px rgba(0,0,0,0.07),
        0 18px 40px rgba(0,0,0,0.10) !important;
      -webkit-box-shadow:
        0 1px 2px rgba(0,0,0,0.04),
        0 5px 14px rgba(0,0,0,0.07),
        0 18px 40px rgba(0,0,0,0.10) !important;
      border: 0.5px solid rgba(0,0,0,0.04) !important;
    }
    :root.theme-dark .search-container .rounded-3xl,
    html.theme-dark .search-container .rounded-3xl {
      box-shadow:
        0 1px 2px rgba(0,0,0,0.35),
        0 7px 18px rgba(0,0,0,0.40),
        0 22px 50px rgba(0,0,0,0.45) !important;
      -webkit-box-shadow:
        0 1px 2px rgba(0,0,0,0.35),
        0 7px 18px rgba(0,0,0,0.40),
        0 22px 50px rgba(0,0,0,0.45) !important;
      border: none !important;
    }
    /* System-theme fallback when no explicit class is set. */
    @media (prefers-color-scheme: light) {
      :root:not(.theme-dark) .card-container > .w-full.max-w-3xl > .rounded-3xl {
        box-shadow:
          0 1px 2px rgba(0,0,0,0.05),
          0 6px 18px rgba(0,0,0,0.08),
          0 28px 64px rgba(0,0,0,0.12) !important;
        -webkit-box-shadow:
          0 1px 2px rgba(0,0,0,0.05),
          0 6px 18px rgba(0,0,0,0.08),
          0 28px 64px rgba(0,0,0,0.12) !important;
        border: 0.5px solid rgba(0,0,0,0.05) !important;
      }
      :root:not(.theme-dark) .search-container .rounded-3xl {
        box-shadow:
          0 1px 2px rgba(0,0,0,0.04),
          0 5px 14px rgba(0,0,0,0.07),
          0 18px 40px rgba(0,0,0,0.10) !important;
        -webkit-box-shadow:
          0 1px 2px rgba(0,0,0,0.04),
          0 5px 14px rgba(0,0,0,0.07),
          0 18px 40px rgba(0,0,0,0.10) !important;
        border: 0.5px solid rgba(0,0,0,0.04) !important;
      }
    }
    @media (prefers-color-scheme: dark) {
      :root:not(.theme-light) .card-container > .w-full.max-w-3xl > .rounded-3xl {
        box-shadow:
          0 1px 3px rgba(0,0,0,0.40),
          0 10px 26px rgba(0,0,0,0.45),
          0 30px 70px rgba(0,0,0,0.55) !important;
        -webkit-box-shadow:
          0 1px 3px rgba(0,0,0,0.40),
          0 10px 26px rgba(0,0,0,0.45),
          0 30px 70px rgba(0,0,0,0.55) !important;
        border: none !important;
      }
      :root:not(.theme-light) .search-container .rounded-3xl {
        box-shadow:
          0 1px 2px rgba(0,0,0,0.35),
          0 7px 18px rgba(0,0,0,0.40),
          0 22px 50px rgba(0,0,0,0.45) !important;
        -webkit-box-shadow:
          0 1px 2px rgba(0,0,0,0.35),
          0 7px 18px rgba(0,0,0,0.40),
          0 22px 50px rgba(0,0,0,0.45) !important;
        border: none !important;
      }
    }
    /* App window card — matches the launcher .rounded-3xl shadow
       so the silhouette stays consistent during the open
       animation (the card scales 0.74 → 1 with its OWN shadow,
       then settles flush against the .rounded-3xl shadow at
       rest). The view's overflow:hidden would clip the card's
       shadow, so it switches to visible while active. */
    .app-window-view.is-active,
    .app-window-view.is-opening {
      overflow: visible;
    }
    :root.theme-light .app-window-view.is-active .app-window-card:not(.is-closing),
    :root.theme-light .app-window-view.is-opening .app-window-card:not(.is-closing),
    html.theme-light .app-window-view.is-active .app-window-card:not(.is-closing),
    html.theme-light .app-window-view.is-opening .app-window-card:not(.is-closing) {
      box-shadow:
        0 1px 2px rgba(0,0,0,0.05),
        0 6px 18px rgba(0,0,0,0.08),
        0 28px 64px rgba(0,0,0,0.12) !important;
      -webkit-box-shadow:
        0 1px 2px rgba(0,0,0,0.05),
        0 6px 18px rgba(0,0,0,0.08),
        0 28px 64px rgba(0,0,0,0.12) !important;
    }
    :root.theme-dark .app-window-view.is-active .app-window-card:not(.is-closing),
    :root.theme-dark .app-window-view.is-opening .app-window-card:not(.is-closing),
    html.theme-dark .app-window-view.is-active .app-window-card:not(.is-closing),
    html.theme-dark .app-window-view.is-opening .app-window-card:not(.is-closing) {
      box-shadow:
        0 1px 3px rgba(0,0,0,0.40),
        0 10px 26px rgba(0,0,0,0.45),
        0 30px 70px rgba(0,0,0,0.55) !important;
      -webkit-box-shadow:
        0 1px 3px rgba(0,0,0,0.40),
        0 10px 26px rgba(0,0,0,0.45),
        0 30px 70px rgba(0,0,0,0.55) !important;
    }
    @media (prefers-color-scheme: light) {
      :root:not(.theme-dark) .app-window-view.is-active .app-window-card:not(.is-closing),
      :root:not(.theme-dark) .app-window-view.is-opening .app-window-card:not(.is-closing) {
        box-shadow:
          0 1px 2px rgba(0,0,0,0.05),
          0 6px 18px rgba(0,0,0,0.08),
          0 28px 64px rgba(0,0,0,0.12) !important;
        -webkit-box-shadow:
          0 1px 2px rgba(0,0,0,0.05),
          0 6px 18px rgba(0,0,0,0.08),
          0 28px 64px rgba(0,0,0,0.12) !important;
      }
    }
    @media (prefers-color-scheme: dark) {
      :root:not(.theme-light) .app-window-view.is-active .app-window-card:not(.is-closing),
      :root:not(.theme-light) .app-window-view.is-opening .app-window-card:not(.is-closing) {
        box-shadow:
          0 1px 3px rgba(0,0,0,0.40),
          0 10px 26px rgba(0,0,0,0.45),
          0 30px 70px rgba(0,0,0,0.55) !important;
        -webkit-box-shadow:
          0 1px 3px rgba(0,0,0,0.40),
          0 10px 26px rgba(0,0,0,0.45),
          0 30px 70px rgba(0,0,0,0.55) !important;
      }
    }
    /* v599 — The block that previously LIVED here pinned
       .app-window-card to scale(1)/opacity(1) with !important on every
       viewport. That was the dominant blocker of the open animation on
       Android (and DevTools mobile emulation): per CSS cascade, an
       !important author rule wins over CSS Animations, so the
       @keyframes appWindowOpenAnim was applied but its 0% frame
       (scale 0.74) never took effect. Removed. The iOS-style scale +
       slide-up open is back on. */

    /* Honour reduced-motion: keep shadows static but they're
       already pure paint state, no animation work. Still drop
       them during the close transition so the dissolve looks
       clean (a fading dark card with a hanging shadow halo
       reads as "stuck"). */
    .app-window-view.is-active .app-window-card.is-closing,
    .app-window-view.is-opening .app-window-card.is-closing {
      box-shadow: none !important;
      -webkit-box-shadow: none !important;
    }
  
/* ═══════════════════════════════════════════════════════════════
   Daily AI Usage bar — sits at top of AI chat view, above
   answer view. Mirrors posts-app .ps-usage-block design.
   ═══════════════════════════════════════════════════════════════ */
.ai-usage-block {
  position: relative;
  z-index: 25;
  flex-shrink: 0;
  padding: 12px 18px 14px;
  background: var(--ai-bg-card, #fdfdff);
  border-bottom: 1px solid var(--ai-border, rgba(107, 125, 145, 0.15));
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.12s ease;
}
.ai-usage-block:hover  { background: var(--ai-bg-tertiary, rgba(120, 130, 145, 0.06)); }
.ai-usage-block:active { background: var(--ai-bg-tertiary, rgba(120, 130, 145, 0.12)); }
:root.theme-dark .ai-usage-block,
html.theme-dark  .ai-usage-block {
  background: var(--ai-bg-card-dark, #25282e);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
.ai-usage-block .ai-usage-label {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  color: #7b8593;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 8px 2px;
}
.ai-usage-block .ai-usage-strip {
  display: flex !important;
  align-items: center;
  gap: 12px;
  width: 100%;
}
.ai-usage-block .ai-usage-strip-bar {
  flex: 1 1 auto;
  min-width: 0;
  height: 12px;
  background: rgba(60, 70, 90, 0.14);
  border-radius: 999px;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.10),
              inset 0 0 0 0.5px rgba(60, 70, 90, 0.12);
}
:root.theme-dark .ai-usage-block .ai-usage-strip-bar,
html.theme-dark  .ai-usage-block .ai-usage-strip-bar {
  background: rgba(255, 255, 255, 0.10);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35),
              inset 0 0 0 0.5px rgba(255, 255, 255, 0.06);
}
.ai-usage-block .ai-usage-strip-fill {
  position: relative;
  height: 100%;
  background: linear-gradient(180deg, #34D058 0%, #1d9244 100%);
  border-radius: 999px;
  box-shadow: 0 0 0 0.5px rgba(20, 110, 50, 0.5),
              0 1px 3px rgba(31, 157, 77, 0.30),
              inset 0 1px 0 rgba(255, 255, 255, 0.30);
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  min-width: 0;
  overflow: hidden;
}
.ai-usage-block .ai-usage-strip-fill::before {
  content: '';
  position: absolute;
  left: 1px; right: 1px; top: 1px;
  height: 55%;
  border-radius: 999px 999px 40% 40%;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.42) 0%,
    rgba(255, 255, 255, 0.18) 42%,
    rgba(255, 255, 255, 0.06) 72%,
    transparent 100%);
  pointer-events: none;
}
.ai-usage-block .ai-usage-strip-fill.is-near { background: linear-gradient(180deg, #FFB933 0%, #E59500 100%); }
.ai-usage-block .ai-usage-strip-fill.is-full { background: linear-gradient(180deg, #FF453A 0%, #C92A21 100%); }
.ai-usage-block .ai-usage-strip-count {
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 700;
  color: var(--ai-text-primary, #2c2d30);
  font-variant-numeric: tabular-nums;
  min-width: 40px;
  text-align: right;
}
:root.theme-dark .ai-usage-block .ai-usage-strip-count,
html.theme-dark  .ai-usage-block .ai-usage-strip-count {
  color: var(--ai-text-primary-dark, #f0f2f5);
}
.ai-usage-block .ai-usage-strip-chev {
  flex: 0 0 16px;
  width: 16px !important;
  height: 16px !important;
  color: #7b8593;
}

/* ═══════════════════════════════════════════════════════════════
   Manage AI Usage pricing modal — overlay sheet (mirrors the
   posts-app Manage Usage design but single-stage, no platform
   picker).
   ═══════════════════════════════════════════════════════════════ */
.aiu-modal {
  position: fixed; inset: 0;
  z-index: 5000;
  background: rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s ease, visibility 0s linear 0.22s;
}
.aiu-modal.show {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.22s ease, visibility 0s linear 0s;
}
.aiu-modal-card {
  margin: 80px 0 40px;
  width: min(560px, 92%);
  max-height: calc(100vh - 120px);
  background: #fff;
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.25);
  transform: translateY(20px);
  transition: transform 0.28s cubic-bezier(0.18, 0.7, 0.2, 1);
}
.aiu-modal.show .aiu-modal-card { transform: translateY(0); }
:root.theme-dark .aiu-modal-card,
html.theme-dark  .aiu-modal-card { background: #1a1d22; color: #f0f2f5; }
.aiu-modal-header {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(120, 130, 145, 0.18);
}
.aiu-modal-back {
  width: 32px; height: 32px;
  border: none; background: transparent; color: inherit;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px;
  -webkit-tap-highlight-color: transparent;
}
.aiu-modal-back:hover { background: rgba(120, 130, 145, 0.12); }
.aiu-modal-back svg { width: 22px; height: 22px; }
.aiu-modal-title {
  font-size: 17px; font-weight: 700; letter-spacing: -0.005em;
}
.aiu-modal-list { flex: 1; min-height: 0; overflow-y: auto; }
.aiu-plan-row {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 20px;
  min-height: 68px;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(120, 130, 145, 0.15);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.12s ease;
}
.aiu-plan-row:hover  { background: rgba(120, 130, 145, 0.06); }
.aiu-plan-row:active { background: rgba(120, 130, 145, 0.12); }
.aiu-plan-row:last-child { border-bottom: none; }
.aiu-plan-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.aiu-plan-name { font-size: 16px; font-weight: 600; letter-spacing: -0.005em; }
.aiu-plan-desc { font-size: 13px; color: #7b8593; }
.aiu-plan-trial { font-size: 12px; font-weight: 600; color: #1f9d4d; margin-top: 2px; }
:root.theme-dark .aiu-plan-trial,
html.theme-dark  .aiu-plan-trial { color: #5de37c; }
.aiu-plan-price {
  font-size: 15.5px; font-weight: 600;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.aiu-plan-price.aiu-plan-included {
  color: #1f9d4d; font-weight: 700; font-size: 14px;
}
:root.theme-dark .aiu-plan-price.aiu-plan-included,
html.theme-dark  .aiu-plan-price.aiu-plan-included { color: #5de37c; }
.aiu-plan-check {
  width: 22px; height: 22px; min-width: 22px;
  border-radius: 50%;
  border: 1.8px solid rgba(120, 130, 145, 0.30);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s;
}
.aiu-plan-check svg { width: 13px; height: 13px; color: #fff; opacity: 0; transition: opacity 0.12s; }
.aiu-plan-check.selected { background: #2563eb; border-color: #2563eb; }
.aiu-plan-check.selected svg { opacity: 1; }
.aiu-modal-foot {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 20px 20px;
  border-top: 1px solid rgba(120, 130, 145, 0.18);
}
.aiu-foot-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.aiu-foot-label {
  font-size: 11.5px; font-weight: 700; color: #7b8593;
  text-transform: uppercase; letter-spacing: 0.07em;
}
.aiu-foot-amount {
  font-size: 26px; font-weight: 800;
  font-variant-numeric: tabular-nums; letter-spacing: -0.015em; line-height: 1.1;
}
.aiu-foot-pay {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  height: 44px; padding: 0 32px; min-width: 150px;
  background: linear-gradient(180deg, #3b7bf7 0%, #2563eb 100%);
  border: none; border-radius: 999px;
  color: #fff; font-family: inherit;
  font-size: 15.5px; font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.40),
              0 1px 3px rgba(0, 0, 0, 0.18),
              inset 0 1px 0 rgba(255, 255, 255, 0.38),
              inset 0 -1px 0 rgba(0, 0, 0, 0.16),
              0 0 0 0.5px rgba(30, 80, 200, 0.5);
}
.aiu-foot-pay.is-included {
  background: linear-gradient(180deg, #B6BFCC 0%, #7C8694 100%);
  cursor: default;
}
:root.theme-dark .aiu-foot-pay.is-included,
html.theme-dark  .aiu-foot-pay.is-included {
  background: linear-gradient(180deg, #5A6473 0%, #3D4654 100%);
}

/* ═══════════════════════════════════════════════════════════════
   Posts-app rule answer list — rendered by the iframe into
   #ai-answer-view-content. Lives in the bundle (not runtime
   injected) so mobile Safari renders it on first paint.
   ═══════════════════════════════════════════════════════════════ */
.ai-rule-list {
  display: flex;
  flex-direction: column;
  margin: -24px -20px -120px -20px;
  padding-bottom: 120px;
}
.ai-rule-row {
  padding: 16px 20px;
  border-bottom: 1px solid rgba(120, 130, 145, 0.15);
  background: var(--ai-bg-card, #fff);
  animation: airulein 0.28s ease-out;
}
.ai-rule-row:last-child { border-bottom: none; }
@keyframes airulein {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ai-rule-row-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--ai-text-primary, #2c2d30);
  margin-bottom: 6px;
}
.ai-rule-row-body {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ai-text-primary, #2c2d30);
  white-space: pre-wrap;
  word-wrap: break-word;
}
.ai-rule-row-body b { font-weight: 700; }
/* Skeleton state */
.ai-rule-row.skeleton .ai-rule-row-title {
  width: 110px;
  height: 12px;
  border-radius: 4px;
  background: linear-gradient(90deg,
    rgba(120, 130, 145, 0.10) 0%,
    rgba(120, 130, 145, 0.22) 50%,
    rgba(120, 130, 145, 0.10) 100%);
  background-size: 200% 100%;
  animation: airuleshim 1.2s linear infinite;
}
.ai-rule-row.skeleton .ai-rule-row-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ai-rule-row.skeleton .ai-rule-skel {
  height: 12px;
  border-radius: 4px;
  background: linear-gradient(90deg,
    rgba(120, 130, 145, 0.10) 0%,
    rgba(120, 130, 145, 0.22) 50%,
    rgba(120, 130, 145, 0.10) 100%);
  background-size: 200% 100%;
  animation: airuleshim 1.2s linear infinite;
}
.ai-rule-row.skeleton .ai-rule-skel:nth-child(1) { width: 96%; }
.ai-rule-row.skeleton .ai-rule-skel:nth-child(2) { width: 88%; }
.ai-rule-row.skeleton .ai-rule-skel:nth-child(3) { width: 70%; }
@keyframes airuleshim {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
:root.theme-dark .ai-rule-row,
html.theme-dark  .ai-rule-row {
  background: var(--ai-bg-card-dark, #1a1d22);
  border-color: rgba(255, 255, 255, 0.06);
}
:root.theme-dark .ai-rule-row-title,
html.theme-dark  .ai-rule-row-title,
:root.theme-dark .ai-rule-row-body,
html.theme-dark  .ai-rule-row-body {
  color: var(--ai-text-primary-dark, #f0f2f5);
}

/* Belt-and-suspenders: hide the chat-list-view bar when the chat
   list view is hidden. `display:none` on the parent should already
   hide children, but Safari has been seen to render the bar through
   under some conditions — this rule guarantees it. */
.ai-chat-list-view.hidden .ai-usage-block {
  display: none !important;
}
/* Remove the top padding gap on the answer-view bar so it sits flush
   against the title header. */
#ai-answer-view > .ai-usage-block {
  padding-top: 0;
}

/* Answer view: the title header has border-bottom, so the bar below
   should have NO border-top and a small breathing top padding so it
   doesn't look glued to the header. The earlier `padding-top: 0` was
   too aggressive. */
#ai-answer-view > .ai-usage-block {
  padding-top: 10px;
  border-top: none;
  z-index: auto;  /* no need to lift it above the answer view here */
}

/* (Mobile GPU layer promotion removed — added `will-change` to
   .ai-chat-view created a new 3D rendering context on mobile
   portrait that hid the message bubbles. Letting the bundle's
   original flip CSS run unmodified.) */

/* Mobile flip — match DESKTOP exactly: instant hide on close so
   the rotating card paints zero AI-view frames during the 0.4s
   rotation (which is what makes desktop feel lag-free). When
   opening, show after parent's rotation has completed.
   The mobile-specific block at line 1920-1935 still applies the
   counter-rotation transform; we just retune the timing here. */
@media (max-width: 768px) {
  .card-container.flipped .ai-chat-view {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transition: opacity 0.08s linear 0.42s,
                visibility 0s linear 0.42s,
                pointer-events 0s linear 0.42s !important;
    -webkit-transition: opacity 0.08s linear 0.42s,
                        visibility 0s linear 0.42s,
                        pointer-events 0s linear 0.42s !important;
  }
  .card-container:not(.flipped) .ai-chat-view {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: none !important;
    -webkit-transition: none !important;
  }

  /* Force user-message bubbles to render fully opaque on mobile.
     The fadeIn animation defined for `.ai-message` (line 2046+)
     was leaving bubbles invisible-but-clickable on some Safari
     builds — the animation completed but never settled at
     opacity:1 because the parent transitions were still running. */
  .ai-chat-view .ai-message,
  .ai-chat-view .ai-message * {
    opacity: 1 !important;
    visibility: visible !important;
    animation: none !important;
  }
  .ai-chat-view .ai-message.user .ai-message-content {
    color: #fff !important;
    background: linear-gradient(180deg, #5a8fa0 0%, #4a7a8a 100%) !important;
  }
}

/* Question/messages screen usage strip — only shown when neither
   the chat-list view nor the answer view is open (both of those
   render their own usage block). The strip is placed AFTER both
   sibling views in the DOM so a plain `~` combinator works
   without :has() (which mis-evaluates on some older Safari builds
   and was leaving the strip visible on top of the answer view).
   `order: -1` lifts it back to the top of the flex column visually. */
/* v647 — desired AI question-screen order:
   1. Search chats input (.ai-chat-search-container) at top
   2. DAILY AI USAGE (.ai-usage-block-questions) below search
   3. Welcome / chat messages (.ai-chat-messages) below usage
   DOM is search → list-view(hidden) → messages → answer-view(hidden)
   → usage. Use flex `order` to put usage between search and messages
   without rearranging the DOM. */
/* v648 — give the bottom +/gallery/Close/Done row a high order so
   it stays pinned at the bottom even with other items reordered. */
.ai-chat-search-container   { order: 0; }
.ai-usage-block-questions   { order: 1; }
.ai-chat-messages           { order: 2; }
.ai-answer-view             { order: 3; }
.ai-image-preview-container { order: 98; }
.ai-chat-input-container    { order: 99; }
.ai-chat-list-view:not(.hidden) ~ .ai-usage-block-questions,
.ai-answer-view:not(.hidden) ~ .ai-usage-block-questions {
  display: none !important;
}

/* AI view shadow — matches the desktop launcher card's 3-layer
   elevation. Safe now that mobile flip-back uses `transition: none`
   on .ai-chat-view: the shadow is never painted during the 0.4s
   rotation, so paint cost during the flip stays zero. */
:root.theme-light .ai-chat-view,
html.theme-light .ai-chat-view,
:root:not(.theme-dark) .ai-chat-view {
  box-shadow:
    0 1px 2px rgba(0,0,0,0.05),
    0 6px 18px rgba(0,0,0,0.08),
    0 28px 64px rgba(0,0,0,0.12) !important;
  -webkit-box-shadow:
    0 1px 2px rgba(0,0,0,0.05),
    0 6px 18px rgba(0,0,0,0.08),
    0 28px 64px rgba(0,0,0,0.12) !important;
  border: 0.5px solid rgba(0,0,0,0.05) !important;
}
:root.theme-dark .ai-chat-view,
html.theme-dark .ai-chat-view {
  box-shadow:
    0 1px 3px rgba(0,0,0,0.40),
    0 10px 26px rgba(0,0,0,0.45),
    0 30px 70px rgba(0,0,0,0.55) !important;
  -webkit-box-shadow:
    0 1px 3px rgba(0,0,0,0.40),
    0 10px 26px rgba(0,0,0,0.45),
    0 30px 70px rgba(0,0,0,0.55) !important;
  border: none !important;
}

/* =====================================================================
   v583 — Remove every shadow around the app window during open / active.
   These selectors are written more specific than every shadow rule
   earlier in the file so they win without `!important` games being
   re-overridden.
   ===================================================================== */
.app-window-view .app-window-card,
.app-window-view.is-opening .app-window-card,
.app-window-view.is-active  .app-window-card,
.app-window-view.is-opening .app-window-card:not(.is-closing),
.app-window-view.is-active  .app-window-card:not(.is-closing),
:root.theme-light .app-window-view.is-opening .app-window-card:not(.is-closing),
:root.theme-light .app-window-view.is-active  .app-window-card:not(.is-closing),
:root.theme-dark  .app-window-view.is-opening .app-window-card:not(.is-closing),
:root.theme-dark  .app-window-view.is-active  .app-window-card:not(.is-closing),
html.theme-light  .app-window-view.is-opening .app-window-card:not(.is-closing),
html.theme-light  .app-window-view.is-active  .app-window-card:not(.is-closing),
html.theme-dark   .app-window-view.is-opening .app-window-card:not(.is-closing),
html.theme-dark   .app-window-view.is-active  .app-window-card:not(.is-closing) {
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  filter: none !important;
}
@media (prefers-color-scheme: light) {
  :root:not(.theme-dark) .app-window-view.is-opening .app-window-card:not(.is-closing),
  :root:not(.theme-dark) .app-window-view.is-active  .app-window-card:not(.is-closing) {
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
  }
}
@media (prefers-color-scheme: dark) {
  :root:not(.theme-light) .app-window-view.is-opening .app-window-card:not(.is-closing),
  :root:not(.theme-light) .app-window-view.is-active  .app-window-card:not(.is-closing) {
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
  }
}

/* =====================================================================
   v586 — Kill every edge/corner artifact around the app window on
   Android (and everywhere else). Borders, outlines, ring shadows
   removed; only the rounded-corner clip stays.
   ===================================================================== */
.app-window-view,
.app-window-view.is-opening,
.app-window-view.is-active,
.app-window-view .app-window-card,
.app-window-view.is-opening .app-window-card,
.app-window-view.is-active .app-window-card,
.app-window-view.is-opening .app-window-card:not(.is-closing),
.app-window-view.is-active  .app-window-card:not(.is-closing) {
  border: none !important;
  outline: none !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  filter: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  -webkit-tap-highlight-color: transparent !important;
}
.app-window-stage,
.app-window-view .app-window-stage {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* =====================================================================
   v587 — Pure CSS keyframes opening animation for the app window.
   This bypasses Web Animations API and CSS transitions entirely.
   CSS @keyframes are the most reliable cross-browser path; Android
   Chrome, iOS Safari, desktop Chrome — all handle them identically.
   ===================================================================== */
@keyframes appWindowOpenAnim {
  0%   { transform: scale(0.74) translate3d(0, 36px, 0); opacity: 0; }
  100% { transform: scale(1) translate3d(0, 0, 0); opacity: 1; }
}
.app-window-view.is-opening .app-window-card,
.app-window-view.is-active  .app-window-card,
.app-window-view.is-opening .app-window-card:not(.is-closing),
.app-window-view.is-active  .app-window-card:not(.is-closing) {
  animation: appWindowOpenAnim 0.6s cubic-bezier(0.33, 1, 0.68, 1) both;
  will-change: transform, opacity;
}

/* =====================================================================
   v593 — Kill the square overlay/edge around #discover-view in every
   state (resting launcher, opening app, active app, closing). The
   discover-view itself is a square-cornered flex container; any
   background/box-shadow/outline it carries paints to its square edges
   and bleeds past the parent rounded card's clip on browsers that
   composite layers separately (Android Chrome especially).
   ===================================================================== */
#discover-view,
#discover-view.app-window-active,
#discover-view.app-detail-active,
#discover-view.flex-1 {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  outline: none !important;
  border: none !important;
  border-radius: 1.5rem !important;
  overflow: hidden !important;
}
#discover-view::before {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  outline: none !important;
}
/* Keep the desktop vertical divider — that's a real element we want.
   Only neutralize the corners/box where the square artifact lives. */
@media (max-width: 640px) {
  #discover-view::after {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    outline: none !important;
  }
}
/* Ensure any wrapper / sibling overlay that paints behind the launcher
   doesn't carry a visible square fringe. */
#open-state.app-window-active .card-container,
#open-state.app-window-active .card-container > .w-full.max-w-3xl,
#open-state:has(#discover-view.app-window-active) .card-container,
#open-state:has(#discover-view.app-window-active) .card-container > .w-full.max-w-3xl {
  background: transparent !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  outline: none !important;
  border: none !important;
}

/* =====================================================================
   v595 — Slim corner-bleed clip. Earlier v594 layered mask-image +
   clip-path on every container (and the iframe), which is GPU-heavy
   on Android. The corner bleed only escapes at the OUTERMOST rounded
   card, so clipping just that one layer is enough — everything
   inside is composited under it. mask-image dropped entirely
   (linear-gradient mask creates a full-size CPU bitmap on every
   paint). Just clip-path on the outermost rounded-3xl.
   ===================================================================== */
.card-container > .w-full.max-w-3xl > .rounded-3xl,
.card-container.app-window-active > .w-full > .rounded-3xl,
.card-container.app-window-active > .w-full.max-w-3xl > .rounded-3xl {
  border-radius: 1.5rem !important;
  overflow: hidden !important;
  clip-path: inset(0 round 1.5rem) !important;
  -webkit-clip-path: inset(0 round 1.5rem) !important;
  isolation: isolate !important;
}

/* =====================================================================
   v597 — Force the open-app animation to RUN even when reduce-motion is on.
   On Android, the system "Animation scale" dev option (and the
   accessibility "Remove animations" toggle) map to
   prefers-reduced-motion: reduce — which line 12156 of this bundle
   handles by killing ALL animation on .app-window-card. That's why
   the app appeared to "snap open" instantly on Android.
   The launcher-open IS functional motion (visual feedback for which
   tile you tapped) — it should always run. We restore the animation
   inside the reduce-motion media query for THIS one animation.
   Using higher specificity + !important to win over the line-12156
   "animation: none !important" guard.
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  html .app-window-view.is-opening .app-window-card:not(.is-closing),
  html .app-window-view.is-active  .app-window-card:not(.is-closing),
  :root .app-window-view.is-opening .app-window-card:not(.is-closing),
  :root .app-window-view.is-active  .app-window-card:not(.is-closing) {
    animation: appWindowOpenAnim 0.6s cubic-bezier(0.33, 1, 0.68, 1) both !important;
    -webkit-animation: appWindowOpenAnim 0.6s cubic-bezier(0.33, 1, 0.68, 1) both !important;
    transition: transform 0.6s cubic-bezier(0.33, 1, 0.68, 1), opacity 0.6s ease-out !important;
    will-change: transform, opacity !important;
  }
  /* Cancel the reduce-motion static transform: scale(1) snap so the
     keyframes can interpolate from 0% (scale 0.74) instead. */
  html .app-window-view.is-active .app-window-card:not(.is-closing) {
    transform: none !important;
  }
}

/* =====================================================================
   v597b — Belt-and-suspenders: the keyframes animation MUST win over
   the line-12101 static `transform: scale(1)` rule on .is-opening and
   .is-active. CSS animation wins over static transforms in cascade,
   but only if the animation is actually applied to the element — so
   re-declare the animation with higher specificity here, AFTER all
   the static rules, with !important to make absolutely sure.
   Applies to all viewports, not just reduce-motion.
   ===================================================================== */
html .app-window-view.is-opening .app-window-card:not(.is-closing),
html .app-window-view.is-active  .app-window-card:not(.is-closing),
:root .app-window-view.is-opening .app-window-card:not(.is-closing),
:root .app-window-view.is-active  .app-window-card:not(.is-closing) {
  animation: appWindowOpenAnim 0.6s cubic-bezier(0.33, 1, 0.68, 1) both !important;
  -webkit-animation: appWindowOpenAnim 0.6s cubic-bezier(0.33, 1, 0.68, 1) both !important;
  will-change: transform, opacity;
}

/* =====================================================================
   v601 — Open-animation perf pass (refined).
   Three lag sources during the 600ms scale animation on Android:
   1. Bundle paints a 3-layer box-shadow with a 64px blur on the card
      during BOTH .is-opening and .is-active. Box-shadow rasterizes on
      every paint; a 64px blur at 60fps while the card scales burns
      the GPU/raster budget.
   2. The v595 clip-path on the parent rounded-3xl forces a rounded-
      mask intersection with the scaling child every frame.
   3. 600ms is iOS-standard, but Android Chrome's compositor has a
      tighter frame budget — 380ms gives the same perceived motion
      with fewer frames to drop.
   v600's `contain: strict` was removed — strict requires explicit
   sizing which the card doesn't have, causing risky layout fallbacks.
   ===================================================================== */
html .app-window-view.is-opening .app-window-card,
html .app-window-view.is-opening .app-window-card:not(.is-closing),
:root .app-window-view.is-opening .app-window-card,
:root .app-window-view.is-opening .app-window-card:not(.is-closing) {
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  filter: none !important;
  -webkit-filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  will-change: transform, opacity !important;
}
/* v602 — Reverted the "drop clip-path during is-opening" trick from
   v601. It made the app window corners square again during the open
   animation. The parent clip-path stays applied throughout. */

/* Smooth shadow fade-in after the open animation completes. */
html .app-window-view.is-active .app-window-card:not(.is-closing),
:root .app-window-view.is-active .app-window-card:not(.is-closing) {
  transition: box-shadow 250ms ease-out 0ms;
}

/* v602 — Open animation is now 280ms (was 380ms in v601, 600ms originally).
   The animation feels "lag-free" not because frames are faster but
   because there's less time for the compositor to drop one. Same
   Apple curve. !important wins over earlier re-declarations. */
html .app-window-view.is-opening .app-window-card:not(.is-closing),
html .app-window-view.is-active  .app-window-card:not(.is-closing),
:root .app-window-view.is-opening .app-window-card:not(.is-closing),
:root .app-window-view.is-active  .app-window-card:not(.is-closing) {
  animation: appWindowOpenAnim 280ms cubic-bezier(0.33, 1, 0.68, 1) both !important;
  -webkit-animation: appWindowOpenAnim 280ms cubic-bezier(0.33, 1, 0.68, 1) both !important;
}

/* v602 — Force the launcher background to STOP painting during open.
   anim-suspend only pauses animations; the rendered tiles still
   participate in compositing on each frame, costing GPU time as the
   card scales over them. visibility:hidden takes them out of the
   paint tree entirely. (Cannot use display:none — that'd cancel the
   flex layout the card depends on.) */
#open-state.app-window-active .app-window-view.is-opening ~ *,
#discover-view.app-window-active .launcher-stack-wrapper,
#discover-view.app-window-active #discover-apps-container,
#discover-view.app-window-active #discover-apps-grid,
#discover-view.app-window-active #discover-top-charts,
#discover-view.app-window-active #discover-categories,
#discover-view.app-window-active #discover-pin-grid {
  visibility: hidden !important;
}

/* =====================================================================
   v602 — AI view corner-bleed fix (stronger).
   v601b's clip-path alone wasn't enough on Android — the flip's
   rotateY(180deg) gives ai-chat-view its own out-of-process
   compositor surface, and clip-path on the rotated layer doesn't
   propagate down to descendant layers (header bar, message list,
   composer). We add the legacy webkit-mask-image trick to FORCE
   compositor-level flatten-and-clip on every Blink build.
   ===================================================================== */
#ai-chat-view,
.ai-chat-view,
.card-container.flipped #ai-chat-view,
.card-container.flipped .ai-chat-view {
  clip-path: inset(0 round 1.5rem) !important;
  -webkit-clip-path: inset(0 round 1.5rem) !important;
  border-radius: 1.5rem !important;
  overflow: hidden !important;
  -webkit-mask-image: -webkit-linear-gradient(white, white) !important;
  mask-image: linear-gradient(white, white) !important;
  isolation: isolate !important;
}