/* ========================================================================
   Perceptron Web Application — Dashboard Stylesheet
   Fully self-contained (no shared main.css dependency).
   ========================================================================
   Design language: "Dark Glass" — glassmorphism over a static ember-lit
   gradient mesh. Three glass elevation tiers (sunken / raised / floating),
   top-light edges on every panel, and the amber brand accent glowing
   through the frost. Flexbox-only layout.

   Palette:
     #060607    page base (near-black)
     #f7f6f3    primary white text
     #fbbe51    amber accent (links, brand, active states, glows)
     #f28b82    danger / coral
     #7ee787    success / green
   ======================================================================== */

/* --- Design Tokens --- */

:root {
    /* Glass tiers */
    --glass-sunken: rgba(0, 0, 0, 0.28);
    --glass-raised: rgba(255, 255, 255, 0.045);
    --glass-raised-strong: rgba(255, 255, 255, 0.07);
    --glass-floating: rgba(255, 255, 255, 0.075);

    /* Light system */
    --edge-light: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    --edge-light-strong: inset 0 1px 0 rgba(255, 255, 255, 0.12);
    --glass-border: rgba(255, 255, 255, 0.09);
    --glass-border-hover: rgba(255, 255, 255, 0.18);
    --hairline: rgba(255, 255, 255, 0.06);

    /* Text */
    --text-primary: #f7f6f3;
    --text-secondary: rgba(255, 255, 255, 0.56);
    --text-dim: rgba(255, 255, 255, 0.34);

    /* Accent + state colors */
    --accent: #fbbe51;
    --accent-soft: rgba(251, 190, 81, 0.12);
    --accent-glow: rgba(251, 190, 81, 0.28);
    --danger: #f28b82;
    --danger-soft: rgba(242, 139, 130, 0.10);
    --success: #7ee787;
    --success-soft: rgba(126, 231, 135, 0.10);

    /* Scrollbar (thin, translucent amber, invisible track) */
    --scrollbar-thumb: rgba(251, 190, 81, 0.45);
    --scrollbar-thumb-hover: rgba(251, 190, 81, 0.7);

    /* Content-area horizontal inset (kept DRY so breakpoints only retune this) */
    --content-pad: 40px;

    /* Shadows */
    --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.35);
    --shadow-card-hover: 0 14px 44px rgba(0, 0, 0, 0.48), 0 0 28px rgba(251, 190, 81, 0.05);
    --shadow-floating: 0 24px 64px rgba(0, 0, 0, 0.52);

    /* Optics */
    --blur: blur(16px) saturate(160%);
    --blur-strong: blur(26px) saturate(170%);

    /* Geometry + motion */
    --radius-panel: 22px;
    --radius-control: 14px;
    --radius-pill: 999px;
    --radius-sheet: 20px;
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --dur: 0.28s;

    /* Manage modal (chat-session + persona overview) — shared sizing so the
       two modals are pixel-identical at every breakpoint. Retuned only in the
       ≤600 media query. */
    --manage-hero-pad: 16px 18px;
    --manage-row-pad: 14px 18px;
    --manage-label-width: 112px;
}

/* --- Fonts --- */

@font-face {
    font-family: 'JetBrains Mono';
    src: url('/static/fonts/jetbrains-mono/ttf/JetBrainsMono-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'JetBrains Mono';
    src: url('/static/fonts/jetbrains-mono/ttf/JetBrainsMono-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* --- Reset & Base --- */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    background: #060607;
    color-scheme: dark;
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) transparent;
    height: 100%;
    overflow: hidden;
}

body {
    background: transparent;
    color: var(--text-secondary);
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    line-height: 1.8;
    height: 100dvh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Static gradient mesh — an amber ember top-left, moonlight top-right,
   a warm depth pool below, and a cool slate whisper at the edge. Fixed
   behind all content so every frosted panel refracts it. */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(900px 620px at 10% -12%, rgba(251, 190, 81, 0.075), transparent 62%),
        radial-gradient(820px 620px at 90% -6%, rgba(255, 255, 255, 0.055), transparent 62%),
        radial-gradient(1080px 720px at 50% 118%, rgba(251, 190, 81, 0.05), transparent 62%),
        radial-gradient(640px 520px at 86% 58%, rgba(148, 163, 184, 0.04), transparent 66%);
}

/* A barely-there diagonal light beam crossing the mesh. */
body::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(115deg,
        transparent 30%,
        rgba(255, 255, 255, 0.014) 45%,
        rgba(255, 255, 255, 0.028) 50%,
        rgba(255, 255, 255, 0.014) 55%,
        transparent 70%);
}

/* Studio is a full-bleed canvas — drop the ambient gradient mesh so the
   stage reads as pure black. Scoped via :has() (matches the existing
   #spa-content:has(.studio) pattern). */
body:has(.studio)::before,
body:has(.studio)::after {
    display: none;
}

::selection {
    background: rgba(251, 190, 81, 0.28);
    color: #ffffff;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
    background-clip: padding-box;
}

a {
    color: var(--accent);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.hidden {
    display: none !important;
}

/* --- SPA Shell --- */

.app-root {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100dvh;
    min-height: 100dvh;
    overflow: hidden;
}

.spa-shell {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: 100dvh;
    overflow: hidden;
    margin-top: 52px;
}

.spa-shell.has-subnav {
    margin-top: 92px;
}

/* Studio: content floats up behind the translucent subnav so the showcase
   images are visible behind it (iOS-style). Only the navbar (opaque-ish)
   stays above the images; the subnav's rgba(0,0,0,0.21) lets them show
   through. */
.spa-shell.has-subnav:has(.studio) {
    margin-top: 40px;
}

/* Chat layouts span the full shell width — inner elements handle the inset. */
.spa-shell:has(.chat-layout) {
    padding-left: 0;
    padding-right: 0;
}

.spa-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    padding: 10px;
}

/* --- Navbar (dynamic, rendered by web.js into #app) --- */

.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 40px;
    border-bottom: 1px solid var(--hairline);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(8, 8, 9, 0.72);
    -webkit-backdrop-filter: var(--blur);
    backdrop-filter: var(--blur);
    z-index: 1600;
    height: 40px;
}

.navbar-title {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.5px;
    overflow: hidden;
}

.navbar-title-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Animated blobatar avatar shown before a persona name in the navbar. */
.navbar-blob {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    display: block;
}

.navbar-back {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid transparent;
    color: var(--text-secondary);
    font-size: 22px;
    font-weight: 700;
    cursor: pointer;
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    transition: color var(--dur) var(--ease), background var(--dur) var(--ease),
        border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
    line-height: 1;
    flex-shrink: 0;
}

.navbar-back:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.09);
    border-color: var(--glass-border);
    transform: translateX(-2px);
}

.navbar-back.disabled {
    color: var(--text-dim);
    cursor: default;
    background: transparent;
    border-color: transparent;
    transform: none;
    pointer-events: none;
    opacity: 0.5;
}

.navbar-logo-btn {
    display: flex;
    align-items: center;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    color: inherit;
    transition: opacity var(--dur) var(--ease);
    flex-shrink: 0;
}

.navbar-logo-btn:hover {
    opacity: 0.85;
}

.navbar-logo {
    height: 15px;
    width: auto;
    filter: drop-shadow(0 0 10px rgba(251, 190, 81, 0.25));
}

.logo-text {
    color: var(--text-primary);
    font-weight: bold;
    margin-left: 10px;
    font-size: 16px;
    letter-spacing: 3px;
}

/* --- Secondary Navbar (floating control zone) ---
   Transparent: no background, no bottom border. Its contents (segmented
   control + action buttons) float over the scrolling content like iOS
   liquid-glass controls. The content area reserves the vertical space via
   .spa-shell margin-top. */

.subnav {
    display: flex;
    align-items: center;
    padding: 8px 40px;
    position: fixed;
    top: 40px;
    left: 0;
    right: 0;
    z-index: 1499;
    background: #00000036;
}

.subnav.hidden {
    display: none;
}

.subnav-tabs {
    display: flex;
    align-items: center;
    min-height: 40px;
}

.subnav-actions {
    display: flex;
    align-items: center;
    margin-left: auto;
}

/* Table-cell tab style: continuous row, equally-sized cells, no rounded corners. */
.subnav-tab {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    background: transparent;
    border: none;
    border-right: 1px solid var(--hairline);
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.subnav-tab:last-child {
    border-right: none;
}

.subnav-tab:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.04);
}

.subnav-tab.active {
    color: var(--accent);
    background: var(--accent-soft);
    box-shadow: inset 0 2px 0 var(--accent), 0 0 16px rgba(251, 190, 81, 0.08);
}

.subnav-btn {
    padding: 8px 16px;
    background: var(--glass-raised);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-control);
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease),
        background var(--dur) var(--ease);
    white-space: nowrap;
    margin-left: 8px;
    height: 36px;
    display: flex;
    align-items: center;
    -webkit-backdrop-filter: var(--blur);
    backdrop-filter: var(--blur);
    box-shadow: var(--edge-light);
}

.subnav-btn:hover {
    border-color: var(--glass-border-hover);
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.08);
}

.subnav-btn.primary {
    color: #131313;
    border-color: transparent;
    background: linear-gradient(180deg, #ffffff 0%, #e9e7e2 100%);
    box-shadow: var(--edge-light), 0 2px 12px rgba(255, 255, 255, 0.08);
}

.subnav-btn.primary:hover {
    box-shadow: var(--edge-light), 0 6px 22px rgba(255, 255, 255, 0.16);
    transform: translateY(-1px);
}

.subnav-btn.danger {
    color: var(--danger);
    border-color: rgba(242, 139, 130, 0.4);
    background: var(--danger-soft);
}

.subnav-btn.danger:hover {
    background: rgba(242, 139, 130, 0.18);
}

/* Icon variant: square glass button holding a single SVG (used by the
   persona Manage button and the chat session New/Delete buttons). The icon
   is rendered as a CSS mask span so it inherits the button's `color` and
   themes correctly (amber on hover). */
.subnav-btn.subnav-btn-icon {
    padding: 0;
    width: 36px;
    justify-content: center;
}

.subnav-btn.subnav-btn-icon:hover {
    color: var(--accent);
}

.subnav-btn-icon-img {
    width: 16px;
    height: 16px;
    display: block;
    background: currentColor;
}

.subnav-btn-icon-manage {
    -webkit-mask: url("/static/web/icons/manage.svg") center / contain no-repeat;
    mask: url("/static/web/icons/manage.svg") center / contain no-repeat;
}

.subnav-btn-icon-plus {
    -webkit-mask: url("/static/web/icons/plus.svg") center / contain no-repeat;
    mask: url("/static/web/icons/plus.svg") center / contain no-repeat;
}

.subnav-btn-icon-trash {
    -webkit-mask: url("/static/web/icons/trash.svg") center / contain no-repeat;
    mask: url("/static/web/icons/trash.svg") center / contain no-repeat;
}

.subnav-btn-icon-folder {
    -webkit-mask: url("/static/web/icons/folder.svg") center / contain no-repeat;
    mask: url("/static/web/icons/folder.svg") center / contain no-repeat;
}

.subnav-btn-icon-camera {
    -webkit-mask: url("/static/web/icons/camera.svg") center / contain no-repeat;
    mask: url("/static/web/icons/camera.svg") center / contain no-repeat;
}

.subnav-btn-icon-speaker {
    -webkit-mask: url("/static/web/icons/speaker.svg") center / contain no-repeat;
    mask: url("/static/web/icons/speaker.svg") center / contain no-repeat;
}

/* Studio Showcase audio toggle (data-btn="studio-audio-btn"): the icon's
   only two visual states are white-when-enabled and a red top-left →
   bottom-right slash when disabled. All hover color changes and the amber
   active pill are neutralized for this button so the icon state is the
   sole visual signal. The slash is drawn as a rotated bar via ::after and
   hidden when the button is active (audio enabled). */
.subnav-btn[data-btn="studio-audio-btn"] {
    position: relative;
    color: #ffffff;
    background: var(--glass-raised);
    border-color: var(--glass-border);
}

.subnav-btn[data-btn="studio-audio-btn"]:hover,
.subnav-btn[data-btn="studio-audio-btn"].active,
.subnav-btn[data-btn="studio-audio-btn"].active:hover {
    color: #ffffff;
    background: var(--glass-raised);
    border-color: var(--glass-border);
}

.subnav-btn[data-btn="studio-audio-btn"]::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 2px;
    background: var(--danger);
    border-radius: 1px;
    transform: translate(-50%, -50%) rotate(45deg);
    pointer-events: none;
}

.subnav-btn[data-btn="studio-audio-btn"].active::after {
    display: none;
}

.subnav-btn-icon-mic {
    -webkit-mask: url("/static/web/icons/mic.svg") center / contain no-repeat;
    mask: url("/static/web/icons/mic.svg") center / contain no-repeat;
}

/* Active state for subnav buttons used as a tab pair (e.g. the Studio
   Showcase/Gallery surface switchers). Mirrors the .subnav-tab.active
   treatment so a left-side icon pair reads as a segmented control. */
.subnav-btn.active {
    color: var(--accent);
    background: var(--accent-soft);
    border-color: transparent;
}

.subnav-btn.active:hover {
    color: var(--accent);
    background: var(--accent-soft);
}

/* Inline label slot for a subnav button whose text is refreshed in place
   (e.g. the persona Sessions button showing the current session name). */
.subnav-btn .subnav-btn-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}

/* Flush the first left-side button to the subnav's left edge. */
.subnav-tabs .subnav-btn:first-child {
    margin-left: 0;
}

/* Override the above for the Studio Showcase button, which needs left
   margin to separate it from the preceding non-subnav elements. */
.subnav-tabs .subnav-btn.showcase-btn {
    margin-left: 30px;
}

/* --- Loading / Error States --- */

.loading {
    color: var(--text-secondary);
    text-align: center;
    padding: 80px 20px;
    font-size: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.spinner {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(255, 255, 255, 0.10);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.spinner.hidden {
    display: none;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.error-banner {
    background: var(--danger-soft);
    -webkit-backdrop-filter: var(--blur);
    backdrop-filter: var(--blur);
    border: 1px solid rgba(242, 139, 130, 0.4);
    border-radius: var(--radius-control);
    box-shadow: var(--edge-light), 0 0 24px rgba(242, 139, 130, 0.08);
    padding: 16px 20px;
    margin-bottom: 24px;
    color: var(--danger);
    font-size: 14px;
}

/* --- Slide-out Sidebar --- */

.sidebar {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    width: 280px;
    height: 100vh;
    height: 100dvh;
    background: rgba(0, 0, 0, 0.80);
    border-right: 1px solid var(--glass-border);
    box-shadow: 24px 0 64px rgba(0, 0, 0, 0.45);
    transform: translateX(-100%);
    transition: transform 0.3s var(--ease);
    z-index: 1501;
    overflow-y: auto;
    overflow-x: hidden;
}

.sidebar.open {
    transform: translateX(0);
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    padding: 72px 16px calc(24px + env(safe-area-inset-bottom)) 16px;
    gap: 4px;
}

.sidebar-link {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    text-decoration: none;
    border-radius: var(--radius-control);
    cursor: pointer;
    transition: color var(--dur) var(--ease), background var(--dur) var(--ease),
        transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
    background: var(--glass-raised);
    border: 1px solid transparent;
    margin-top: 10px;
}

.sidebar-link:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.06);
    transform: translateX(2px);
}

.sidebar-link.active {
    color: var(--accent);
    background: var(--accent-soft);
    box-shadow: var(--edge-light), 0 0 18px rgba(251, 190, 81, 0.10);
}

.sidebar-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--hairline), transparent);
    margin: 12px 16px;
}

.sidebar-logout {
    color: var(--danger);
}

.sidebar-logout:hover {
    color: #131313;
    background: var(--danger);
    transform: none;
}

/* --- Sidebar: dynamic sections (chats + personas) --- */

.sidebar-new-chat-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    margin-bottom: 16px;
    color: white;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-decoration: none;
    border-radius: var(--radius-control);
    cursor: pointer;
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
    background: var(--glass-raised);
    border: 1px solid rgba(251, 190, 81, 0.15);
}

.sidebar-new-chat-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 32px rgba(251, 190, 81, 0.28);
}

/* Empty-state "+ New Persona" button — mirrors the "+ New Chat" button. */
.sidebar-new-persona-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    margin-bottom: 16px;
    color: white;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-decoration: none;
    border-radius: var(--radius-control);
    cursor: pointer;
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
    background: var(--glass-raised);
    border: 1px solid rgba(251, 190, 81, 0.15);
    width: 100%;
}

.sidebar-new-persona-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 32px rgba(251, 190, 81, 0.28);
}

.sidebar-section-label {
    padding: 0 16px;
    margin-top: 12px;
    margin-bottom: 6px;
    color: var(--text-dim);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.sidebar-item {
    display: flex;
    align-items: center;
    padding: 9px 10px;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-decoration: none;
    border-radius: var(--radius-control);
    cursor: pointer;
    transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
    background: transparent;
    border: none;
    border-left: 3px solid transparent;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
    width: 100%;
}

.sidebar-item:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.06);
}

.sidebar-item.active {
    color: var(--accent);
    background: var(--accent-soft);
}

/* Opaque-glassy chat + persona cards in the sidebar. These keep the
   .sidebar-item base class for layout/hover/active, and add an opaque
   glassy background plus an avatar slot. */
.sidebar-chat,
.sidebar-persona {
    background: var(--glass-raised);
    margin-bottom: 10px;
}

.sidebar-chat:hover,
.sidebar-persona:hover {
    background: var(--glass-floating);
}

.sidebar-chat.active,
.sidebar-persona.active {
    background: var(--accent-soft);
}

.sidebar-chat-avatar,
.sidebar-persona-avatar {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
}

.sidebar-chat-avatar {
    background: black;
}

/* Animated blobatar avatar (inline <svg>). Sized to match the identicon box.
   No border-radius (the blob body is drawn by the SVG itself) and no
   object-fit (that only applies to replaced elements like <img>). */
.sidebar-chat-blob {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    display: block;
}

.sidebar-item-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
    margin-left: 5px;
}

/* Per-card action button (manage modal opener) aligned opposite the avatar.
   Uses the perceptron logo as its icon. Sits at the trailing edge of the
   sidebar item row. */
.sidebar-item-action {
    flex-shrink: 0;
    margin-left: auto;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    opacity: 0.55;
    transition: opacity var(--dur) var(--ease), background var(--dur) var(--ease);
}

.sidebar-item-action:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.08);
}

.sidebar-action-icon {
    width: 14px;
    height: 14px;
    object-fit: contain;
    pointer-events: none;
}

.sidebar-more-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    margin-top: 4px;
    color: var(--text-dim);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-decoration: none;
    border-radius: var(--radius-control);
    cursor: pointer;
    transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
    background: transparent;
    border: 1px solid var(--hairline);

    width: 100%;
    height: 20px;
}

.sidebar-more-btn:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.15);
}

.sidebar-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(4, 4, 5, 0.55);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s var(--ease), visibility 0.3s;
    z-index: 1500;
}

.sidebar-backdrop.open {
    opacity: 1;
    visibility: visible;
}

/* --- Dashboard Cards Grid --- */

.cards-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 24px;
    margin-top: 20px;
}

.card {
    display: flex;
    flex-direction: column;
    flex: 1 1 220px;
    position: relative;
    overflow: hidden;
    background: var(--glass-raised);
    -webkit-backdrop-filter: var(--blur);
    backdrop-filter: var(--blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-panel);
    box-shadow: var(--edge-light), var(--shadow-card);
    padding: 18px;
    transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease),
        box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}

.chat-cards {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

.chat-card {
    display: flex;
    flex-direction: column;
    background: var(--glass-raised);
    -webkit-backdrop-filter: var(--blur);
    backdrop-filter: var(--blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-panel);
    box-shadow: var(--edge-light), var(--shadow-card);
    padding: 18px;
    transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease),
        box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
    width: 200px;
    height: 118px;
    cursor: pointer;
    margin: 5px;
}

/* --- Special Credits Breakdown --- */

.special-breakdown {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--hairline);
}

.special-row {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.special-row span:last-child {
    color: var(--text-primary);
}

/* Clickable value inside a .special-row (e.g. domain link in the manage
   modal). Reads as a value, not a bright link — underline only on hover. */
.special-row-link {
    color: var(--text-primary);
    text-decoration: none;
    cursor: pointer;
    transition: color var(--dur) var(--ease);
}

.special-row-link:hover {
    color: var(--accent);
    text-decoration: underline;
}

/* --- Wallet address (small mono inside a stat cell) --- */

.wallet-address {
    font-size: 12px;
    color: var(--text-dim);
    margin-bottom: 8px;
    word-break: break-all;
}

/* --- Stat Panel (a group of related metrics in one glass panel) --- */

.stat-panel {
    display: flex;
    flex-wrap: wrap;
    background: var(--glass-raised);
    -webkit-backdrop-filter: var(--blur);
    backdrop-filter: var(--blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-panel);
    box-shadow: var(--edge-light), var(--shadow-card);
    overflow: hidden;
    margin-bottom: 20px;
    margin-top: 30px;
}

.stat {
    display: flex;
    flex-direction: column;
    flex: 1 1 140px;
    min-width: 0;
    padding: 14px 16px;
    transition: background var(--dur) var(--ease);
}

.stat + .stat {
    border-left: 1px solid var(--hairline);
}

/* The one primary number in a panel: wider cell, larger value. */
.stat-hero {
    flex: 1.5 1 200px;
}

.stat-label {
    color: var(--text-dim);
    font-size: 11px;
    margin-bottom: 6px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.stat-value {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.5px;
    background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.60) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.stat-value.muted {
    background: none;
    -webkit-text-fill-color: var(--text-secondary);
    color: var(--text-secondary);
}

.stat-hero .stat-value {
    font-size: 26px;
}

.stat-sub {
    color: var(--text-secondary);
    font-size: 13px;
    margin-top: 4px;
    overflow-wrap: break-word;
}

/* Clickable stat cell (navigates on click). */
.stat-link {
    cursor: pointer;
}

.stat-link:hover {
    background: rgba(255, 255, 255, 0.035);
}

/* Full-width detail block inside a stat-panel (spans all cells, top hairline). */
.stat-panel-details {
    flex: 1 1 100%;
    border-top: 1px solid var(--hairline);
    padding: 14px 20px;
}

/* --- Manage modal hero strip (chat-session + persona overview) ---
   A single glass panel holding N equal-width metric cells. Identical at
   every breakpoint: 3-across on desktop + tablet, vertical stack on mobile
   (retuned in the ≤600 media query). One shared sizing baseline so the two
   manage modals are pixel-identical. */
.manage-hero-grid {
    display: flex;
    flex-wrap: nowrap;
    background: var(--glass-raised);
    -webkit-backdrop-filter: var(--blur);
    backdrop-filter: var(--blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-panel);
    box-shadow: var(--edge-light), var(--shadow-card);
    margin-bottom: 16px;
}

.manage-hero-cell {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--manage-hero-pad);
}

.manage-hero-cell + .manage-hero-cell {
    border-left: 1px solid var(--hairline);
}

.manage-hero-label {
    color: var(--text-dim);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.manage-hero-value {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.5px;
    line-height: 1.15;
    color: var(--text-primary);
    background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.60) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.manage-hero-sub {
    color: var(--text-secondary);
    font-size: 12px;
    margin-top: 6px;
}

/* --- Feed Actions (inline cost + badge + toggle on one row) --- */

.feed-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.feed-cost {
    color: var(--text-secondary);
    font-size: 13px;
}

/* --- Keys View --- */

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.section-title {
    display: flex;
    align-items: center;
    color: var(--text-primary);
    font-size: 20px;
    font-weight: 700;
}

.section-title::before {
    content: "";
    width: 3px;
    height: 16px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--accent) 0%, rgba(251, 190, 81, 0.25) 100%);
    margin-right: 12px;
    box-shadow: 0 0 10px rgba(251, 190, 81, 0.4);
}

.chat-session-name {
    display: flex;
    align-items: center;
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 700;
}

.chat-session-name::before {
    content: "";
    width: 3px;
    height: 16px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--accent) 0%, rgba(251, 190, 81, 0.25) 100%);
    margin-right: 12px;
    box-shadow: 0 0 10px rgba(251, 190, 81, 0.4);
}

.generate-btn {
    padding: 10px;
    background: linear-gradient(180deg, #ffffff 0%, #e9e7e2 100%);
    color: #131313;
    font-weight: 700;
    font-size: 21px;
    border: none;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
        opacity var(--dur) var(--ease);
    box-shadow: 0 2px 12px rgba(255, 255, 255, 0.08);
    width: 40px;
    height: 40px;
    margin-left: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.generate-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 22px rgba(255, 255, 255, 0.16);
}

/* "New Session" action inside the Manage modal's Sessions tab. A distinct
   amber-glass pill — not the white circular .generate-btn, not a .modal-btn.
   Sits in the .section-header beside the "Sessions" title. */
.new-session-btn {
    padding: 8px 18px;
    background: var(--accent-soft);
    border: 1px solid rgba(251, 190, 81, 0.4);
    border-radius: var(--radius-pill);
    color: var(--accent);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
        color var(--dur) var(--ease), transform var(--dur) var(--ease),
        box-shadow var(--dur) var(--ease);
}

.new-session-btn:hover {
    background: rgba(251, 190, 81, 0.18);
    border-color: var(--accent);
    transform: translateY(-1px);
    box-shadow: 0 6px 22px rgba(251, 190, 81, 0.18);
}

.revoke-btn {
    padding: 5px 12px;
    background: var(--danger-soft);
    border: 1px solid rgba(242, 139, 130, 0.35);
    border-radius: var(--radius-pill);
    color: var(--danger);
    font-size: 12px;
    cursor: pointer;
    transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease),
        color var(--dur) var(--ease);
}

.revoke-btn:hover {
    background: var(--danger);
    border-color: var(--danger);
    color: #131313;
}

.empty-state {
    text-align: center;
    padding: 48px 20px;
    color: var(--text-dim);
    font-size: 14px;
    font-style: italic;
    border: 1px dashed rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-panel);
}

.picker-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 20px;
}

/* --- Modal --- */

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(4, 4, 5, 0.62);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    /* Fallback only — overridden per-open by OverlayStack inline z-index
       (modal.js) so modals + image/audio viewers stack in open order. */
    z-index: 2400;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.25s var(--ease);
}

.modal-overlay.open {
    opacity: 1;
}

.modal-overlay[aria-hidden="true"] {
    opacity: 0;
}

.modal {
    display: flex;
    flex-direction: column;
    width: calc(100% - 64px);
    max-width: 424px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.085) 0%, rgba(255, 255, 255, 0.04) 100%);
    -webkit-backdrop-filter: var(--blur-strong);
    backdrop-filter: var(--blur-strong);
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 20px;
    box-shadow: var(--edge-light-strong), var(--shadow-floating);
    padding: 32px;
    max-height: 95vh;
    transform: scale(0.96) translateY(10px);
    opacity: 0.9;
    transition: transform 0.25s var(--ease), opacity 0.25s var(--ease);
}

.modal-overlay.open .modal {
    transform: scale(1) translateY(0);
    opacity: 1;
}

.modal.modal-sm {
    max-width: 296px;
}

.modal.modal-lg {
    max-width: 600px;
    height: 80vh;
}

.modal.modal-xl {
    max-width: 1080px;
    height: 88vh;
}

.modal.modal-xl .modal-body {
    max-height: none;
}

.modal-title {
    color: var(--text-primary);
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 20px;
}

.modal-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: scroll;
    max-height: 60vh;
    margin-right: -32px;
    padding-right: 32px;
}

.modal-label {
    color: var(--text-secondary);
    font-size: 13px;
    margin-bottom: 8px;
}

.modal-input {
    padding: 11px 14px;
    background: var(--glass-sunken);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: var(--radius-control);
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.25);
    color: var(--text-primary);
    caret-color: var(--accent);
    font-size: 14px;
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
        background var(--dur) var(--ease);
}

.modal-input:focus {
    outline: none;
    border-color: rgba(251, 190, 81, 0.55);
    background: rgba(0, 0, 0, 0.34);
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.25), 0 0 0 3px rgba(251, 190, 81, 0.12);
}

.modal-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 20px;
}

.modal-btn {
    padding: 9px 20px;
    border: none;
    border-radius: var(--radius-pill);
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    transition: opacity var(--dur) var(--ease), background var(--dur) var(--ease),
        color var(--dur) var(--ease), border-color var(--dur) var(--ease),
        transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.modal-btn.primary {
    background: linear-gradient(180deg, #ffffff 0%, #e9e7e2 100%);
    color: #131313;
    box-shadow: 0 2px 12px rgba(255, 255, 255, 0.08);
}

.modal-btn.primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 22px rgba(255, 255, 255, 0.16);
}

.modal-btn.cancel {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--glass-border);
    color: var(--text-secondary);
}

.modal-btn.cancel:hover {
    border-color: var(--glass-border-hover);
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
}

.modal-btn.danger {
    background: var(--danger-soft);
    border: 1px solid rgba(242, 139, 130, 0.4);
    color: var(--danger);
}

.modal-btn.danger:hover {
    background: var(--danger);
    border-color: var(--danger);
    color: #131313;
}

.modal-btn.loading {
    opacity: 0.5;
    cursor: not-allowed;
}

.modal-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* --- Key Created Display --- */

.key-created {
    display: flex;
    flex-direction: column;
    margin-top: 16px;
    padding: 16px;
    background: var(--glass-sunken);
    border: 1px solid rgba(251, 190, 81, 0.45);
    border-radius: var(--radius-control);
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.25), 0 0 24px rgba(251, 190, 81, 0.10);
}

.key-created-label {
    color: var(--text-secondary);
    font-size: 13px;
    margin-bottom: 8px;
}

.key-created-value {
    color: var(--accent);
    font-size: 14px;
    word-break: break-all;
    margin-bottom: 12px;
}

.key-copy-btn {
    align-self: flex-start;
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-pill);
    color: var(--text-secondary);
    font-size: 12px;
    cursor: pointer;
    transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease),
        background var(--dur) var(--ease);
}

.key-copy-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-soft);
}

.key-copy-btn.copied {
    color: var(--success);
    border-color: rgba(126, 231, 135, 0.5);
    background: var(--success-soft);
}

.key-warning {
    color: var(--danger);
    font-size: 13px;
    margin-top: 10px;
}

/* --- Confirm Modal text --- */

.confirm-text {
    color: var(--text-secondary);
    font-size: 14px;
    margin-bottom: 24px;
    line-height: 1.6;
}

/* --- Shared View Components --- */

/* Secondary section title (below a view's main header). */
.sub-title {
    font-size: 16px;
    margin-bottom: 16px;
    margin-top: 32px;
}

/* Small neutral glass chip button (sibling of .revoke-btn which is danger). */
.action-btn {
    padding: 5px 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-pill);
    color: var(--text-primary);
    font-size: 12px;
    cursor: pointer;
    transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease),
        color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.action-btn:hover {
    border-color: rgba(251, 190, 81, 0.5);
    background: var(--accent-soft);
    color: var(--accent);
    box-shadow: 0 0 16px rgba(251, 190, 81, 0.10);
}

.action-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

/* Inline form error text (inside modals and forms). */
.form-error {
    color: var(--danger);
    font-size: 12px;
    min-height: 16px;
}

/* Clickable card (navigates on click): lift, glow, and a sheen of light
   sweeping across the frosted surface on hover. */
.card-link {
    cursor: pointer;
}

.card-link::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 55%;
    height: 100%;
    background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, 0.055) 50%, transparent 100%);
    transform: translateX(-220%) skewX(-18deg);
    transition: transform 0.8s var(--ease);
    pointer-events: none;
}

.card-link:hover {
    border-color: var(--glass-border-hover);
    background: var(--glass-raised-strong);
    transform: translateY(-3px);
    box-shadow: var(--edge-light-strong), var(--shadow-card-hover);
}

.card-link:hover::after {
    transform: translateX(340%) skewX(-18deg);
}

/* Space-between row inside a card. */
.card-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

/* Status dot + label line. */
.status-line {
    display: flex;
    align-items: center;
    color: var(--text-primary);
    font-size: 14px;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 8px;
    background: var(--text-dim);
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.2);
}

.status-dot.ok {
    background: var(--success);
    animation: status-pulse 2.6s var(--ease) infinite;
}

.status-dot.bad {
    background: var(--danger);
    box-shadow: 0 0 10px rgba(242, 139, 130, 0.6);
}

.status-dot.warn {
    background: var(--accent);
    box-shadow: 0 0 10px rgba(251, 190, 81, 0.6);
}

@keyframes status-pulse {
    0%, 100% { box-shadow: 0 0 6px rgba(126, 231, 135, 0.45); }
    50%      { box-shadow: 0 0 14px rgba(126, 231, 135, 0.85); }
}

/* Pill badge (subscription / state labels). */
.badge {
    padding: 3px 12px;
    border-radius: var(--radius-pill);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--glass-border);
    color: var(--text-secondary);
}

.badge.ok {
    color: var(--success);
    border-color: rgba(126, 231, 135, 0.4);
    background: var(--success-soft);
    box-shadow: 0 0 12px rgba(126, 231, 135, 0.12);
}

.badge.bad {
    color: var(--danger);
    border-color: rgba(242, 139, 130, 0.4);
    background: var(--danger-soft);
    box-shadow: 0 0 12px rgba(242, 139, 130, 0.12);
}

.badge.warn {
    color: var(--accent);
    border-color: rgba(251, 190, 81, 0.4);
    background: var(--accent-soft);
    box-shadow: 0 0 12px rgba(251, 190, 81, 0.14);
}

/* Inline "Cached" pill for inference transaction rows. A compact amber
   glass pill signalling the prompt was served from the upstream prefix
   cache (discounted input rate). Kept inline within `.row-list-sub`. */
.cached-badge {
    display: inline-block;
    padding: 1px 8px;
    margin-left: 4px;
    border-radius: var(--radius-pill);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--accent);
    background: var(--accent-soft);
    border: 1px solid rgba(251, 190, 81, 0.35);
    box-shadow: 0 0 8px rgba(251, 190, 81, 0.1);
    vertical-align: middle;
}

/* Generic row list (history, sessions, news, activity, workspace). */
.row-list {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: var(--glass-raised);
    -webkit-backdrop-filter: var(--blur);
    backdrop-filter: var(--blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-panel);
    box-shadow: var(--edge-light), var(--shadow-card);
    overflow: hidden;
}

.row-list-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 13px 14px;
    border-bottom: 1px solid var(--hairline);
    transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.row-list-row:last-child {
    border-bottom: none;
}

.row-list-row:hover {
    background: rgba(255, 255, 255, 0.035);
    box-shadow: inset 2px 0 0 var(--accent);
}

.row-list-row.clickable {
    cursor: pointer;
}

.row-list-row.clickable::after {
    content: "›";
    color: var(--text-dim);
    font-size: 16px;
    margin-left: 12px;
    transition: color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.row-list-row.clickable:hover::after {
    color: var(--accent);
    transform: translateX(3px);
}

/* Pagination controls for the wallet transaction history list. */
.tx-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 14px;
}

.tx-pagination-btn {
    padding: 6px 14px;
    background: var(--glass-raised);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 600;
    border: 1px solid var(--edge-light);
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: transform var(--dur) var(--ease), color var(--dur) var(--ease),
        border-color var(--dur) var(--ease);
}

.tx-pagination-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    color: var(--accent);
    border-color: rgba(251, 190, 81, 0.4);
}

.tx-pagination-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.tx-pagination-info {
    color: var(--text-dim);
    font-size: 12px;
}

.row-list-main {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-width: 0;
}

.row-list-title {
    color: var(--text-primary);
    font-size: 14px;
}

.row-list-sub {
    color: var(--text-secondary);
    font-size: 12px;
    margin-top: 2px;
    word-break: break-word;
}

.row-list-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex: 0 0 auto;
    margin-left: 16px;
    text-align: right;
}

.row-list-actions {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    margin-left: 16px;
}

/* Workspace explorer media thumbnails (images + videos). */
.row-list-thumb-wrap {
    position: relative;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    margin-right: 12px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--glass-sunken);
}

.row-list-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.row-list-thumb-wrap.video::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 11px solid rgba(255, 255, 255, 0.92);
    pointer-events: none;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}

/* Workspace explorer toolbar (view toggle). */
.workspace-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 16px;
}

.workspace-toolbar .segmented-control {
    max-width: 220px;
}

/* Workspace explorer thumbnail (grid) view — two files per row. */
.workspace-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    width: 100%;
}

.workspace-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    padding: 12px;
    background: var(--glass-raised);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-panel);
    box-shadow: var(--edge-light), var(--shadow-card);
    -webkit-backdrop-filter: var(--blur);
    backdrop-filter: var(--blur);
    cursor: pointer;
    transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease),
        box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.workspace-tile:hover {
    border-color: var(--glass-border-hover);
    background: rgba(255, 255, 255, 0.06);
    box-shadow: var(--edge-light), 0 6px 22px rgba(0, 0, 0, 0.25);
    transform: translateY(-1px);
}

.workspace-tile-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: 10px;
    overflow: hidden;
    background: var(--glass-sunken);
    margin-bottom: 8px;
}

.workspace-tile-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.workspace-tile-thumb.video::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 0;
    height: 0;
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
    border-left: 14px solid rgba(255, 255, 255, 0.92);
    pointer-events: none;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5));
}

.workspace-tile-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: 10px;
    background: var(--glass-sunken);
    margin-bottom: 8px;
    font-size: 40px;
    line-height: 1;
}

.workspace-tile-name {
    width: 100%;
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    word-break: break-word;
}

.workspace-tile-meta {
    width: 100%;
    color: var(--text-dim);
    font-size: 11px;
    text-align: center;
    margin-top: 2px;
    word-break: break-word;
}

/* Footer note under a view's content. */
.footer-note {
    margin-top: 16px;
    color: var(--text-dim);
}

/* Smaller value text (long addresses inside cards). */
.text-small {
    font-size: 14px;
    word-break: break-all;
}

/* --- Chart Canvas Container (Chart.js responsive mode) --- */

.chart-canvas-wrap {
    position: relative;
    height: 220px;
    width: 100%;
}

.chart-canvas-wrap.tall {
    height: 260px;
}

/* Pie chart canvas container (solid pie, no center text). Shorter than the
   time-series wraps so the wedges read large without dominating the card. */

.pie-canvas-wrap {
    position: relative;
    height: 260px;
    width: 100%;
}

.pie-chart-total {
    text-align: center;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
    margin: 4px 0 16px;
}

.chart-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 220px;
    color: var(--text-dim);
    font-size: 13px;
    gap: 12px;
}

/* --- Buy Credits Modal --- */

.buy-step {
    display: none;
}

.buy-step.active {
    display: flex;
    flex-direction: column;
}

.buy-info {
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.6;
    margin-top: 12px;
}

.chain-list {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-top: 4px;
}

.chain-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 11px 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-control);
    color: var(--text-primary);
    font-size: 13px;
    cursor: pointer;
    margin-bottom: 6px;
    transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease),
        box-shadow var(--dur) var(--ease);
}

.chain-btn:hover {
    border-color: rgba(251, 190, 81, 0.5);
    background: var(--accent-soft);
    box-shadow: 0 0 16px rgba(251, 190, 81, 0.08);
}

.chain-btn .chain-id {
    color: var(--text-dim);
    font-size: 11px;
}

.buy-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 20px;
}

/* --- Buy from Connected Wallet --- */

.buy-wallet-section {
    margin-top: 16px;
}

.buy-wallet-btn {
    width: 100%;
    margin-top: 4px;
}

.buy-wallet-picker {
    display: flex;
    flex-direction: row;
    gap: 8px;
    margin-top: 4px;
    width: 100%;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.buy-wallet-card {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 12px;
    background: var(--glass-raised);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-control);
    box-shadow: var(--edge-light);
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    font-family: 'JetBrains Mono', monospace;
    transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease),
        transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
    flex: 1 1 auto;
    min-width: 80px;
}

.buy-wallet-card-icon {
    width: 18px;
    height: 18px;
    margin-right: 6px;
    flex-shrink: 0;
}

.buy-wallet-card:hover {
    border-color: var(--glass-border-hover);
    background: var(--glass-raised-strong);
    transform: translateY(-1px);
    box-shadow: var(--edge-light), 0 6px 20px rgba(0,0,0,0.3);
    text-decoration: none;
}

.buy-wallet-status {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 8px;
    line-height: 1.5;
    min-height: 18px;
}

.buy-wallet-status.error {
    color: var(--danger);
}

.buy-wallet-status.success {
    color: var(--success);
}

.buy-wallet-divider,
.buy-paste-divider {
    display: flex;
    align-items: center;
    margin: 16px 0 4px 0;
    color: var(--text-dim);
    font-size: 11px;
}

.buy-wallet-divider::before,
.buy-wallet-divider::after,
.buy-paste-divider::before,
.buy-paste-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--hairline);
}

.buy-wallet-divider span,
.buy-paste-divider span {
    padding: 0 12px;
}

/* --- Buy from Wallet: deep-link fallback panel --- */

.buy-wallet-fallback {
    margin-top: 12px;
    padding: 12px;
    background: var(--glass-sunken);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-control);
}

.buy-wallet-fallback-text {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 10px;
}

.buy-wallet-fallback-btn {
    width: 100%;
    margin-bottom: 10px;
    padding: 10px 14px;
    background: var(--accent-soft);
    border: 1px solid var(--accent-glow);
    border-radius: var(--radius-control);
    color: var(--accent);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    font-family: 'JetBrains Mono', monospace;
    transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.buy-wallet-fallback-btn:hover {
    background: var(--accent-glow);
    border-color: var(--accent);
}

.buy-wallet-loading {
    width: 100%;
    padding: 16px;
    text-align: center;
    color: var(--text-dim);
    font-size: 12px;
}

/* --- Approval Banner (persona activity) --- */

.approval-banner {
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(251, 190, 81, 0.4);
    border-radius: var(--radius-panel);
    padding: 10px;
    background: linear-gradient(180deg, rgba(251, 190, 81, 0.09) 0%, rgba(251, 190, 81, 0.035) 100%);

    width: 90%;
}

#persona-chat-approval {
  display: flex;
  align-items: center;
  justify-content: center;
}

.approval-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

/* --- Persona Detail --- */

.persona-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 20px;
}

.persona-header-left {
    min-width: 0;
}

.persona-header-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.persona-actions {
    display: flex;
    align-items: center;
}

/* Full-width pill buttons inside a manage-modal action row. Each button
   grows to fill available width; explicit 8px left margin between siblings
   (no gap property — matches the iOS component-system convention). */
.persona-actions .modal-btn {
    padding: 11px 16px;
    font-size: 14px;
    width: 170px;
}

.persona-actions .modal-btn + .modal-btn {
    margin-left: 8px;
}

/* --- Picker Modals --- */

.picker-new-btn {
  width: 90%;
  margin-bottom: 16px;
  font-size: 16px;
  background: var(--glass-raised-strong);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  border: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
  font-weight: 700;
}

.picker-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 400px;
    overflow-y: auto;
    align-items: center;
}

.picker-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 12px 16px;
    background: var(--glass-raised);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-control);
    cursor: pointer;
    transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease),
        background var(--dur) var(--ease);
    box-shadow: var(--edge-light);
    width: 85%;
}

.picker-item:hover {
    transform: translateX(2px);
    border-color: rgba(251, 190, 81, 0.25);
    background: rgba(251, 190, 81, 0.04);
}

.picker-item-name {
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 700;
}

.picker-item-sub {
    color: var(--text-dim);
    font-size: 12px;
}

/* --- Workspace --- */

.permissions-note {
    margin-bottom: 16px;
    color: var(--text-secondary);
}

.breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
    color: var(--text-dim);
    font-size: 13px;
}

.breadcrumb-btn {
    background: transparent;
    border: none;
    color: var(--accent);
    font-size: 13px;
    cursor: pointer;
    padding: 0;
    transition: text-shadow var(--dur) var(--ease);
}

.breadcrumb-btn:hover {
    text-decoration: underline;
    text-shadow: 0 0 12px rgba(251, 190, 81, 0.5);
}

/* --- Option list (personality / model pickers inside modals) --- */

.option-list {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-bottom: 12px;
}

.option-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    padding: 11px 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-control);
    cursor: pointer;
    margin-bottom: 6px;
    transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease),
        box-shadow var(--dur) var(--ease);
    text-align: left;
}

.option-btn:hover {
    border-color: var(--glass-border-hover);
    background: rgba(255, 255, 255, 0.06);
}

.option-btn.selected {
    border-color: rgba(251, 190, 81, 0.5);
    background: var(--accent-soft);
    box-shadow: 0 0 18px rgba(251, 190, 81, 0.10);
}

.option-btn .option-title {
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 700;
}

.option-btn .option-sub {
    color: var(--text-secondary);
    font-size: 12px;
    margin-top: 2px;
}

/* --- Chat --- */

/* Chat landing page (empty state with model picker + example prompts) */
.chat-empty-state {
    align-items: center;
    justify-content: center;
}

.chat-landing-content {
    max-width: 640px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 0;
}

.chat-landing-prompts {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.chat-landing-prompts-label {
    color: var(--text-dim);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-align: center;
}

.chat-landing-prompts-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

.prompt-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    min-width: 260px;
    max-width: 300px;
    flex: 1 1 260px;
    color: var(--text-secondary);
    background: var(--glass-raised);
    -webkit-backdrop-filter: blur(var(--blur));
    backdrop-filter: blur(var(--blur));
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-control);
    cursor: pointer;
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
        color var(--dur) var(--ease), border-color var(--dur) var(--ease);
    box-shadow: var(--edge-light);
}

.prompt-card:hover {
    transform: translateY(-2px);
    color: var(--text-primary);
    border-color: rgba(251, 190, 81, 0.25);
    box-shadow: var(--edge-light), 0 6px 28px rgba(251, 190, 81, 0.08);
}

/* Persona template cards (used on the /web/personas landing page) — a
   column-oriented variant of .prompt-card with an avatar + name + personality
   pill + description. */
.persona-template-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 240px;
    max-width: 280px;
}

.persona-template-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 10px;
    flex-shrink: 0;
    box-shadow: 0 0 0 1px var(--glass-border), 0 4px 18px rgba(0, 0, 0, 0.35);
}

.prompt-card-sub {
    font-size: 11px;
    color: var(--text-dim);
    line-height: 1.4;
    margin-top: 4px;
}

/* Personality pill — a small amber-tinted label under the persona name. */
.personality-pill {
    margin-top: 6px;
    padding: 2px 10px;
    border-radius: var(--radius-pill);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--accent);
    background: var(--accent-soft);
    border: 1px solid rgba(251, 190, 81, 0.3);
}

/* Persona landing page — header + custom-name form. */
.persona-landing-header {
    text-align: center;
    color: var(--text-primary);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 20px;
    margin-top: 360px;
}

.persona-landing-form {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--hairline);
    max-width: 420px;
    width: 100%;
    align-self: center;
}

.persona-landing-name-input {
    width: 100%;
    margin-bottom: 16px;
}

.persona-landing-create-btn {
    width: 100%;
    height: 40px;
    margin-left: 0;
    margin-top: 8px;
}

.prompt-card-icon {
    font-size: 18px;
    flex-shrink: 0;
}

.prompt-card-text {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
}

.chat-header {
    display: none;
}

.chat-header-info {
    min-width: 0;
}

.chat-header-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.chat-layout {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1;
    overflow: hidden;
}

/* When #spa-content hosts a chat-layout (standalone /web/chat views and
   persona detail → Chat tab), disable its own scrolling — .chat-messages
   is the scroller — and drop the right padding so the chat scrollbar
   lands flush against the screen edge. */
#spa-content:has(.chat-layout) {
    overflow: hidden;
    padding-right: 0;
}

/* Studio: drop the inset padding so the showcase + gallery extend flush to
   the viewport edges; the floating strip + scrollbar sit at the screen edge.
   The showcase already floats up behind the translucent subnav. */
#spa-content:has(.studio) {
    padding: 0;
}

/* When #persona-section-content hosts a chat-layout (persona detail → Chat tab),
   make the intermediary slot a flex column that fills #spa-content. */
#persona-section-content:has(> .chat-layout) {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.chat-messages {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 18px var(--content-pad);
    flex: 1;
    width: 100%;
    min-height: 0;
}

/* Pin chat bubbles to the bottom of the scroll region so the conversation
   grows upward. Using `margin-top: auto` on the first child instead of
   `justify-content: flex-end` avoids a Blink/WebKit bug where overflowing
   content packed with justify-content becomes unreachable by scrolling:
   auto margins absorb positive free space (bubbles sit at the bottom when
   the chat is short) but resolve to 0 when content overflows, so the
   bubbles flow from the top and scroll normally. The landing/empty-state
   shells are excluded so their centered layout is preserved. */
.chat-messages:not(.chat-empty-state) > :first-child {
    margin-top: auto;
}

/* Landing / empty-state shells render `<div class="chat-messages chat-empty-state">`
   and want their content vertically centered rather than pinned to the bottom. */
.chat-messages.chat-empty-state {
    justify-content: center;
}

.chat-bubble {
    border-radius: var(--radius-control);
    border: 1px solid var(--glass-border);
    box-shadow: var(--edge-light);
    background: var(--glass-raised-strong);
    -webkit-backdrop-filter: blur(var(--blur));
    backdrop-filter: blur(var(--blur));
    word-wrap: break-word;
    font-size: 14px;
    color: var(--text-primary);
    padding: 10px;
    margin-top: 20px;
    max-width: 90%;
}

.chat-bubble.sent {
    align-self: flex-end;
    background: var(--accent-soft);
    border-color: rgba(251, 190, 81, 0.4);
    box-shadow: 0 0 12px rgba(251, 190, 81, 0.14), var(--edge-light);
}

.chat-bubble.received {
    align-self: flex-start;
}

.chat-bubble.queued {
    opacity: 0.6;
    font-style: italic;
    border-style: dashed;
    box-shadow: none;
}

.chat-bubble-queued-label {
    margin-top: 6px;
    font-size: 11px;
    color: var(--text-dim);
    font-style: italic;
}

.chat-bubble-tools {
    margin-bottom: 6px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--hairline);
}

.chat-bubble-tool {
    color: var(--text-dim);
    font-size: 11px;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Collapsible chain-of-thought block. Rendered distinct from (and above) the
   reply bubble so hidden reasoning never mixes into the assistant's answer.
   Flex-column card with a JS-toggled open state. */
.chat-thinking {
    display: flex;
    flex-direction: column;
    align-self: flex-start;
    min-width: 0;
    max-width: 90%;
    margin-top: 12px;
    border-radius: var(--radius-control);
    border: 1px solid var(--glass-border);
    background: var(--glass-raised);
    -webkit-backdrop-filter: blur(var(--blur));
    backdrop-filter: blur(var(--blur));
    box-shadow: var(--edge-light);
}

.chat-thinking-header {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    cursor: pointer;
    user-select: none;
    padding: 8px 12px;
    color: var(--text-dim);
    font-size: 12px;
    font-weight: 600;
    transition: color var(--dur) var(--ease);
}

.chat-thinking-header:hover {
    color: var(--text-secondary);
}

.chat-thinking-chevron {
    flex-shrink: 0;
    transition: transform 0.15s ease;
    color: var(--text-dim);
}

.chat-thinking.open .chat-thinking-chevron {
    transform: rotate(90deg);
}

.chat-thinking-label {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 10px;
}

.chat-thinking-body {
    display: none;
    max-height: 220px;
    overflow-y: auto;
    overscroll-behavior: contain;
    min-width: 0;
    padding: 0 12px 10px;
    border-top: 1px solid var(--hairline);
    color: #b6b6b6;
    font-size: 13px;
    line-height: 1.5;
    word-wrap: break-word;
    overflow-wrap: break-word;
    overflow-x: hidden;
}

.chat-thinking.open .chat-thinking-body {
    display: block;
}

.chat-thinking-body > *:first-child {
    margin-top: 8px;
}

.chat-thinking-body > *:last-child {
    margin-bottom: 0;
}

.chat-thinking-body p {
    margin: 0 0 8px;
}

.chat-thinking-body h1,
.chat-thinking-body h2,
.chat-thinking-body h3,
.chat-thinking-body h4 {
    margin: 12px 0 6px;
    line-height: 1.3;
    font-weight: 600;
    color: var(--text-primary);
}

.chat-thinking-body h1 { font-size: 1.1em; }
.chat-thinking-body h2 { font-size: 1.05em; }
.chat-thinking-body h3 { font-size: 1.02em; }
.chat-thinking-body h4 { font-size: 1em; }

.chat-thinking-body ul,
.chat-thinking-body ol {
    margin: 0 0 8px;
    padding-left: 20px;
}

.chat-thinking-body li {
    margin: 2px 0;
}

.chat-thinking-body blockquote {
    margin: 0 0 8px;
    padding: 2px 12px;
    border-left: 3px solid var(--accent);
    color: var(--text-secondary);
    background: rgba(0, 0, 0, 0.18);
    border-radius: 0 var(--radius-control) var(--radius-control) 0;
}

.chat-thinking-body a {
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px solid rgba(251, 190, 81, 0.3);
    transition: border-color var(--dur) var(--ease);
}

.chat-thinking-body a:hover {
    border-bottom-color: var(--accent);
}

.chat-thinking-body strong {
    font-weight: 600;
    color: var(--text-primary);
}

.chat-thinking-body em {
    font-style: italic;
}

.chat-thinking-body code {
    font-family: 'JetBrains Mono', ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 12px;
    padding: 1px 5px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.32);
    border: 1px solid var(--hairline);
    color: var(--text-primary);
}

.chat-thinking-body pre {
    margin: 0 0 8px;
    padding: 8px 10px;
    background: rgba(0, 0, 0, 0.30);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-control);
    overflow-x: auto;
    line-height: 1.45;
}

.chat-thinking-body pre code {
    padding: 0;
    background: transparent;
    border: none;
    font-size: 12px;
    color: var(--text-primary);
}

/* Markdown-rendered chat bubble content. Scoped under .chat-bubble-content
   so styles never leak into other surfaces. Both user and agent bubbles. */
.chat-bubble-content {
    line-height: 1.5;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.chat-bubble-content > *:first-child {
    margin-top: 0;
}

.chat-bubble-content > *:last-child {
    margin-bottom: 0;
}

.chat-bubble-content p {
    margin: 0 0 8px;
}

.chat-bubble-content h1,
.chat-bubble-content h2,
.chat-bubble-content h3,
.chat-bubble-content h4 {
    margin: 12px 0 6px;
    line-height: 1.3;
    font-weight: 600;
    color: var(--text-primary);
}

.chat-bubble-content h1 { font-size: 1.15em; }
.chat-bubble-content h2 { font-size: 1.1em; }
.chat-bubble-content h3 { font-size: 1.05em; }
.chat-bubble-content h4 { font-size: 1em; }

.chat-bubble-content ul,
.chat-bubble-content ol {
    margin: 0 0 8px;
    padding-left: 22px;
}

.chat-bubble-content li {
    margin: 2px 0;
}

.chat-bubble-content blockquote {
    margin: 0 0 8px;
    padding: 2px 12px;
    border-left: 3px solid var(--accent);
    color: var(--text-secondary);
    background: rgba(0, 0, 0, 0.18);
    border-radius: 0 var(--radius-control) var(--radius-control) 0;
}

.chat-bubble-content blockquote > *:last-child {
    margin-bottom: 0;
}

.chat-bubble-content a {
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px solid rgba(251, 190, 81, 0.3);
    transition: border-color var(--dur) var(--ease);
}

.chat-bubble-content a:hover {
    border-bottom-color: var(--accent);
}

.chat-bubble-content strong {
    font-weight: 600;
    color: var(--text-primary);
}

.chat-bubble-content em {
    font-style: italic;
}

.chat-bubble-content code {
    font-family: 'JetBrains Mono', ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.9em;
    padding: 1px 5px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.32);
    border: 1px solid var(--hairline);
    color: var(--text-primary);
}

.chat-bubble-content pre {
    margin: 0 0 8px;
    padding: 10px 12px;
    background: rgba(0, 0, 0, 0.42);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-control);
    overflow-x: auto;
    line-height: 1.45;
}

.chat-bubble-content pre code {
    padding: 0;
    background: transparent;
    border: none;
    font-size: 0.9em;
    color: var(--text-primary);
}

/* --- Syntax highlighting (highlight.js, base16-mocha) ---
   The theme CSS is injected dynamically when a chat view opens. These rules
   neutralize the theme's solid background + 1em padding so the glass `pre`
   background shows through, while preserving the theme's token colours. The
   `.hljs` class is added by `hljs.highlightElement` on the `<code>` element. */
.chat-bubble-content pre code.hljs,
.chat-thinking-body pre code.hljs {
    padding: 0;
    background: transparent;
    border: none;
    color: #d0c8c6; /* base16-mocha default text — only affects non-token text */
}

/* Copy-to-clipboard button wrapper (mirrors the docs site pattern). */
.chat-bubble-content .code-block-wrapper,
.chat-thinking-body .code-block-wrapper {
    position: relative;
    margin: 0 0 8px;
}

.chat-bubble-content .code-block-wrapper pre,
.chat-thinking-body .code-block-wrapper pre {
    margin: 0;
    padding-right: 36px; /* room for the copy button */
}

.chat-bubble-content .copy-btn,
.chat-thinking-body .copy-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--glass-raised-strong);
    border: 1px solid var(--hairline);
    border-radius: 6px;
    color: var(--text-dim);
    cursor: pointer;
    padding: 5px 7px;
    line-height: 0;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.chat-bubble-content .copy-btn:hover,
.chat-thinking-body .copy-btn:hover {
    background: var(--accent-soft);
    border-color: var(--accent-glow);
    color: var(--accent);
}

.chat-bubble-content .copy-btn.copied,
.chat-thinking-body .copy-btn.copied {
    color: #7bbda4; /* base16-mocha green — matches the theme */
    border-color: rgba(123, 189, 164, 0.4);
}

.chat-bubble-content hr,
.chat-thinking-body hr {
    margin: 10px 0;
    border: none;
    border-top: 1px solid var(--hairline);
}

.chat-bubble-content table,
.chat-thinking-body table {
    border-collapse: collapse;
    margin: 0 0 8px;
    width: 100%;
    font-size: 0.95em;
}

.chat-bubble-content th,
.chat-bubble-content td,
.chat-thinking-body th,
.chat-thinking-body td {
    border: 1px solid var(--hairline);
    padding: 4px 8px;
    text-align: left;
}

.chat-bubble-content th,
.chat-thinking-body th {
    background: rgba(0, 0, 0, 0.22);
    font-weight: 600;
}

.chat-bubble-content img,
.chat-thinking-body img {
    max-width: 100%;
    border-radius: var(--radius-control);
}

/* MathJax-rendered equations inside chat bubbles. MathJax emits
   <mjx-container> elements; display math gets display="true". */
.chat-bubble-content .math-display {
    display: block;
    margin: 8px 0;
    overflow-x: auto;
}

.chat-bubble-content mjx-container {
    color: inherit;
    font-size: 1.05em;
}

.chat-bubble-content mjx-container[display="true"] {
    margin: 8px 0;
    overflow-x: auto;
}

@keyframes chat-pulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

.chat-status {
    color: var(--text-dim);
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.chat-status.hidden {
    display: none;
}

.chat-status-clickable {
    cursor: pointer;
    transition: color var(--dur) var(--ease);
}

.chat-status-clickable:hover {
    color: var(--text-secondary);
}

.chat-status-dots {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    animation: chat-pulse 1.2s ease-in-out infinite;
}

.chat-composer {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    padding: 12px var(--content-pad) 4px;
    align-items: stretch;
    z-index: 10;
}

.chat-composer .modal-input {
    flex: 1;
}

.chat-composer textarea.chat-composer-input {
    resize: none;
    overflow-y: hidden;
    min-height: 44px;
    max-height: 132px;
    line-height: 1.5;
    /* Align with the send button (single-row baseline). */
    align-self: stretch;
}

.chat-composer-input-row {
    display: flex;
    width: 100%;
}

.chat-composer-controls-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    width: 100%;
    flex-wrap: wrap;
}

.chat-composer-controls-row .generate-btn {
    margin-left: auto;
}

.chat-model-btn {
    padding: 4px 12px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    background: var(--glass-raised);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-pill);
    cursor: pointer;
    max-width: 240px;
    -webkit-backdrop-filter: var(--blur);
    backdrop-filter: var(--blur);
    box-shadow: var(--edge-light);
    transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease),
        background var(--dur) var(--ease);
    display: inline-flex;
    align-items: center;
}

.chat-model-btn:hover {
    color: var(--text-primary);
    border-color: var(--glass-border-hover);
    background: rgba(255, 255, 255, 0.08);
}

.chat-model-btn::before {
    content: "◆ ";
    color: var(--accent);
    margin-right: 5px;
}

.chat-model-btn-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 9px;
}

/* ========================================================================
   iOS Liquid Glass Component System
   New component families for the mobile-app redesign. All spacing uses
   explicit margins/paddings (no gap property). Sizing uses explicit
   width/max-width/height (no flex shorthand).
   ======================================================================== */

/* --- iOS Segmented Control --- */

.segmented-control {
    display: flex;
    align-items: center;
    background: var(--glass-raised);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-control);
    padding: 2px;
    max-width: 420px;
    -webkit-backdrop-filter: var(--blur);
    backdrop-filter: var(--blur);
    box-shadow: var(--edge-light);
    flex-wrap: wrap;
    justify-content: left;
}

.segment {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 16px;
    background: transparent;
    border: none;
    border-radius: 10px;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: color var(--dur) var(--ease), background var(--dur) var(--ease),
        box-shadow var(--dur) var(--ease);
    white-space: nowrap;
    min-width: 80px;
}

.segment + .segment {
    margin-left: 2px;
}

.segment:hover {
    color: var(--text-primary);
}

.segment.active {
    color: var(--accent);
    background: var(--accent-soft);
}

/* --- Persona Manage Modal: floating tab bar (non-sticky) ---
   Negative right margin + matching right padding let the segmented control
   bleed to the modal's right edge (the modal body uses -32px right margin
   for its own scrollbar gutter). NOT sticky — scrolls with the body. The
   segmented control inherits `flex-wrap: wrap` from the base class so the
   tabs wrap to a second row when they run out of space — identical to the
   permissions tab's session tabs. On mobile a scoped override in the
   `max-width: 600px` block stacks the manage-modal tabs vertically (one
   per row) — see the mobile media query. */
.persona-manage-tabs-floating {
    margin-right: -32px;
    padding: 0 32px 12px 0;
}

.persona-manage-tabs-floating .segmented-control {
    margin: 0 auto;
    max-width: 100%;
}

/* --- Grouped List (iOS Settings pattern) --- */

.grouped-list {
    display: block;
    background: var(--glass-raised);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-panel);
    box-shadow: var(--edge-light), var(--shadow-card);
    -webkit-backdrop-filter: var(--blur);
    backdrop-filter: var(--blur);
    margin-bottom: 28px;
}

.list-row {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 15px 18px;
    border-bottom: 1px solid var(--hairline);
    transition: background var(--dur) var(--ease);
    cursor: default;
}

.list-row:last-child {
    border-bottom: none;
}

.list-row.clickable {
    cursor: pointer;
}

.list-row.clickable:active {
    transform: scale(0.99);
    background: rgba(255, 255, 255, 0.05);
}

.list-row.clickable:hover {
    background: rgba(255, 255, 255, 0.035);
}

/* Leading slot: icon circle or badge */
.list-row-leading {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    margin-right: 14px;
}

.list-row-leading svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Main slot: title + subtitle */
.list-row-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex-grow: 1;
}

.list-row-title {
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 600;
}

.list-row-subtitle {
    color: var(--text-secondary);
    font-size: 12px;
    margin-top: 2px;
}

/* Trailing slot: value + chevron */
.list-row-trailing {
    display: flex;
    align-items: center;
    margin-left: 14px;
}

.list-row-value {
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 600;
}

.list-row-chevron {
    color: var(--text-dim);
    font-size: 18px;
    margin-left: 8px;
    line-height: 1;
}

.list-row.clickable .list-row-chevron {
    transition: color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.list-row.clickable:hover .list-row-chevron {
    color: var(--accent);
    transform: translateX(2px);
}

/* --- List row: plain variant (manage-modal detail rows) ---
   No leading icon slot. Fixed-width label column on the left, value on the
   right with ellipsis truncation. The iOS Settings detail pattern — used by
   the chat-session + persona overview modals so every detail row lines up. */
.list-row.list-row-plain {
    padding: var(--manage-row-pad);
}

.list-row-plain .list-row-main {
    flex: 0 0 var(--manage-label-width);
    margin: 0;
}

.list-row-plain .list-row-title {
    color: var(--text-dim);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.2px;
    text-transform: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.list-row-plain .list-row-trailing {
    flex: 1 1 0;
    min-width: 0;
    margin-left: 16px;
    justify-content: flex-end;
}

.list-row-plain .list-row-value {
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 600;
    text-align: right;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- Wallet Points card: single shared icon + stacked lines ---
   One slightly-larger icon tile on the left, label/value lines stacked
   vertically to its right so the points read as a single united unit. */
.points-layout {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 18px;
    gap: 18px;
}

.points-layout-icon {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
}

.points-layout-icon svg {
    width: 24px;
    height: 24px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.points-layout-lines {
    flex-grow: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.points-layout-line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 3px;
}

.points-layout-label {
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 600;
}

.points-layout-value {
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 600;
    text-align: right;
    white-space: nowrap;
}

.points-layout-total .points-layout-label,
.points-layout-total .points-layout-value {
    color: var(--text-primary);
}

/* Icon circle background colors */
.icon-amber   { background: var(--accent-soft);  color: var(--accent); }
.icon-green   { background: var(--success-soft); color: var(--success); }
.icon-coral   { background: var(--danger-soft);  color: var(--danger); }
.icon-blue    { background: rgba(96, 165, 250, 0.12);  color: #60a5fa; }
.icon-purple  { background: rgba(168, 85, 247, 0.12);  color: #a855f7; }
.icon-cyan    { background: rgba(34, 211, 238, 0.12);  color: #22d3ee; }
.icon-pink    { background: rgba(236, 72, 153, 0.12);  color: #ec4899; }
.icon-orange  { background: rgba(249, 115, 22, 0.12);  color: #f97316; }

/* --- List Section Header (uppercase dim label above a grouped list) --- */

.list-section-header {
    color: var(--text-dim);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 0 18px;
    margin-bottom: 10px;
    margin-top: 28px;
}

.list-section-header:first-child {
    margin-top: 0;
}

/* --- Hero Card (stat hero, dashboard/wallet) --- */

.hero-card {
    display: flex;
    flex-direction: column;
    background: var(--glass-raised);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-panel);
    box-shadow: var(--edge-light), var(--shadow-card);
    padding: 28px 24px;
    margin-bottom: 28px;
    position: relative;
    overflow: hidden;
    -webkit-backdrop-filter: var(--blur);
    backdrop-filter: var(--blur);
}

.hero-card.clickable {
    cursor: pointer;
    transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.hero-card.clickable:active {
    transform: scale(0.99);
}

.hero-card.clickable:hover {
    border-color: var(--glass-border-hover);
}

.hero-label {
    color: var(--text-dim);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.hero-value {
    font-size: 42px;
    font-weight: 700;
    letter-spacing: -1px;
    line-height: 1.1;
    background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.55) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.hero-sub {
    color: var(--text-secondary);
    font-size: 13px;
    margin-top: 10px;
}

/* --- Stat Chips (compact side-by-side stats) --- */

.stat-chips {
    display: flex;
    align-items: stretch;
    margin-bottom: 28px;
}

.stat-chip {
    display: flex;
    flex-direction: column;
    background: var(--glass-raised);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-panel);
    box-shadow: var(--edge-light);
    padding: 16px 18px;
    -webkit-backdrop-filter: var(--blur);
    backdrop-filter: var(--blur);
    flex-basis: 0;
    flex-grow: 1;
}

.stat-chip + .stat-chip {
    margin-left: 14px;
}

.stat-chip-label {
    color: var(--text-dim);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.stat-chip-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
}

/* --- Wallet Glass Card (hero with identicon + balance + add funds) --- */

.wallet-card {
    display: block;
    position: relative;
    overflow: hidden;
    background: var(--glass-raised-strong);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-panel);
    box-shadow: var(--edge-light-strong), var(--shadow-card);
    padding: 32px 28px;
    margin-bottom: 28px;
    -webkit-backdrop-filter: var(--blur-strong);
    backdrop-filter: var(--blur-strong);
}

/* Clickable wallet card variant (dashboard hero → wallet route). */
.wallet-card.clickable {
    cursor: pointer;
    transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.wallet-card.clickable:active {
    transform: scale(0.99);
}

.wallet-card.clickable:hover {
    border-color: var(--glass-border-hover);
}

/* Diagonal light sheen across the card */
.wallet-card::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.035) 50%, transparent 60%);
    pointer-events: none;
}

.wallet-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 28px;
    position: relative;
}

.wallet-card-brand {
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    flex: 1;
    min-width: 0;
    margin-right: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--dur) var(--ease);
}

.wallet-card-brand:hover {
    color: var(--text-primary);
}

.wallet-card-identicon {
    width: 70px;
    height: auto;
    border-radius: 50%;
    border: 1px solid var(--glass-border);
    flex-shrink: 0;
    box-shadow: var(--edge-light);
}

.wallet-card-balance {
    font-size: 40px;
    font-weight: 700;
    letter-spacing: -1px;
    line-height: 1.1;
    background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.55) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    position: relative;
}

.wallet-card-address {
    font-size: 12px;
    color: var(--text-dim);
    margin-top: 10px;
    word-break: break-all;
    position: relative;
}

/* Small uppercase label under the balance value (replaces the address line
   on the dashboard + wallet hero cards). */
.wallet-card-balance-label {
    color: var(--text-dim);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    margin-top: 10px;
    position: relative;
}

/* Small uppercase title above a footer stat (e.g. "Points"). */
.wallet-card-burn-label {
    color: var(--text-dim);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.wallet-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 24px;
    position: relative;
}

.wallet-card-burn {
    font-size: 12px;
    color: var(--text-secondary);
}

/* Points value on the dashboard + wallet hero card footer. Overrides the
   base burn style with a larger font size and pure white color. */
.wallet-card-points {
    font-size: 16px;
    color: #ffffff;
}

.wallet-card-meta {
    font-size: 11px;
    color: var(--text-dim);
}

.wallet-card-add-funds {
    padding: 8px 18px;
    background: linear-gradient(180deg, #ffffff 0%, #e9e7e2 100%);
    color: #131313;
    font-weight: 700;
    font-size: 13px;
    border: none;
    border-radius: var(--radius-control);
    cursor: pointer;
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
    box-shadow: 0 2px 12px rgba(255, 255, 255, 0.08);
    height: 38px;
}

.wallet-card-add-funds:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 22px rgba(255, 255, 255, 0.16);
}

/* --- iOS Toggle Switch --- */

.ios-toggle {
    position: relative;
    width: 44px;
    height: 26px;
    background: rgba(120, 120, 128, 0.32);
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: background var(--dur) var(--ease);
    border: none;
    padding: 0;
    flex-shrink: 0;
}

.ios-toggle.on {
    background: var(--success);
}

.ios-toggle-knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 22px;
    height: 22px;
    background: #ffffff;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: transform var(--dur) var(--ease);
}

.ios-toggle.on .ios-toggle-knob {
    transform: translateX(18px);
}

/* --- Transaction Icon (+/- circle) --- */

.tx-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 15px;
    flex-shrink: 0;
    margin-right: 14px;
}

.tx-icon.credit {
    background: var(--success-soft);
    color: var(--success);
    border: 1px solid rgba(126, 231, 135, 0.35);
}

.tx-icon.debit {
    background: var(--danger-soft);
    color: var(--danger);
    border: 1px solid rgba(242, 139, 130, 0.35);
}

/* --- Transaction row (iOS-native-style card) ---
   Each card is a two-column flex row: [icon] [main: title + metadata lines]
   [trailing: amount + date + status]. The icon pins to the top so multi-line
   metadata doesn't center-vertically; cards occupy their natural height (no
   min-height, no equal-height forcing). Metadata fields render one per line
   as label/value pairs (dim label + brighter value). Date + price + status
   stack vertically in the right-aligned trailing column. */
.tx-row {
    align-items: flex-start;
}

.tx-meta {
    display: flex;
    flex-direction: column;
    margin-top: 6px;
    gap: 2px;
}

.tx-meta-line {
    font-size: 12px;
    line-height: 1.4;
    display: flex;
    gap: 6px;
    align-items: baseline;
}

.tx-meta-label {
    color: var(--text-dim);
    font-weight: 500;
    flex-shrink: 0;
}

.tx-meta-value {
    color: var(--text-secondary);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Trailing column for tx rows: vertical stack (amount / date / status),
   all right-aligned. Overrides the base .list-row-trailing row layout. */
.tx-trailing {
    flex-direction: column;
    align-items: flex-end;
    flex-shrink: 0;
}

.tx-meta-time {
    font-size: 11px;
    color: var(--text-dim);
    margin-top: 4px;
    text-align: right;
}

.tx-meta-status {
    font-size: 11px;
    color: var(--text-dim);
    text-align: right;
    margin-top: 2px;
}

/* --- Donut Chart (cost by service) --- */

.donut-chart {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
}

.donut-chart svg {
    width: 180px;
    height: 180px;
}

.donut-chart-center {
    fill: var(--text-primary);
    font-size: 18px;
    font-weight: 700;
    text-anchor: middle;
    dominant-baseline: central;
}

/* --- Service Bar (horizontal proportional bar) --- */

.service-bar-row {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}

.service-bar-label {
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 600;
    width: 90px;
    flex-shrink: 0;
}

.service-bar-track {
    flex-grow: 1;
    height: 8px;
    background: var(--glass-sunken);
    border-radius: 4px;
    overflow: hidden;
    margin-left: 12px;
}

.service-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.4s var(--ease);
}

.service-bar-amount {
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 700;
    margin-left: 12px;
    min-width: 60px;
    text-align: right;
}

/* Service colors */
.svc-chat        { background: var(--accent); }
.svc-stt         { background: #60a5fa; }
.svc-tts         { background: #a855f7; }
.svc-feed        { background: var(--success); }
.svc-domain      { background: #22d3ee; }
.svc-web-search  { background: #f97316; }
.svc-video       { background: #f87171; }
.svc-image       { background: #e879f9; }
.svc-vision      { background: #a3e635; }
.svc-animation   { background: #818cf8; }
.svc-storage     { background: #ec4899; }

.svc-chat-text        { color: var(--accent); }
.svc-stt-text         { color: #60a5fa; }
.svc-tts-text         { color: #a855f7; }
.svc-feed-text        { color: var(--success); }
.svc-domain-text      { color: #22d3ee; }
.svc-web-search-text  { color: #f97316; }
.svc-video-text       { color: #f87171; }
.svc-image-text       { color: #e879f9; }
.svc-vision-text      { color: #a3e635; }
.svc-animation-text   { color: #818cf8; }
.svc-storage-text     { color: #ec4899; }

/* --- Chart Card (iOS Health style) --- */

.chart-card {
    display: flex;
    flex-direction: column;
    background: var(--glass-raised);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-panel);
    box-shadow: var(--edge-light), var(--shadow-card);
    padding: 20px;
    margin-bottom: 28px;
    -webkit-backdrop-filter: var(--blur);
    backdrop-filter: var(--blur);
}

.chart-card-title {
    color: var(--text-dim);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.chart-card-summary {
    color: var(--text-primary);
    font-size: 18px;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
}

/* --- Bottom Sheet (slide-up modal) --- */

.bottom-sheet {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 480px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.085) 0%, rgba(255, 255, 255, 0.04) 100%);
    -webkit-backdrop-filter: var(--blur-strong);
    backdrop-filter: var(--blur-strong);
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
    box-shadow: var(--edge-light-strong), var(--shadow-floating);
    padding: 16px 24px 32px;
    transform: translateY(100%);
    opacity: 0.9;
    transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}

.modal-overlay.bottom-sheet-overlay {
    align-items: flex-end;
    padding: 0;
}

.modal-overlay.bottom-sheet-overlay .bottom-sheet {
    transform: translateY(100%);
}

.modal-overlay.bottom-sheet-overlay.open .bottom-sheet {
    transform: translateY(0);
    opacity: 1;
}

.bottom-sheet-handle {
    width: 36px;
    height: 5px;
    border-radius: 3px;
    background: var(--text-dim);
    margin: 0 auto 20px;
    flex-shrink: 0;
}

.bottom-sheet-title {
    color: var(--text-primary);
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 20px;
}

.bottom-sheet-body {
    display: flex;
    flex-direction: column;
}

.bottom-sheet-actions {
    display: flex;
    margin-top: 20px;
}

.bottom-sheet-actions .modal-btn + .modal-btn {
    margin-left: 12px;
}

/* iOS Action Sheet (confirmation: stacked choices + separated Cancel) */
.action-sheet-cancel {
    margin-top: 12px;
    width: 100%;
    padding: 14px;
    background: var(--glass-raised);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-control);
    color: var(--accent);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    -webkit-backdrop-filter: var(--blur);
    backdrop-filter: var(--blur);
}

.action-sheet-choice {
    width: 100%;
    padding: 14px;
    background: var(--glass-raised);
    border: none;
    border-bottom: 1px solid var(--hairline);
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
}

.action-sheet-choice:first-child {
    border-top-left-radius: var(--radius-control);
    border-top-right-radius: var(--radius-control);
}

.action-sheet-choice:last-of-type {
    border-bottom: none;
    border-bottom-left-radius: var(--radius-control);
    border-bottom-right-radius: var(--radius-control);
}

.action-sheet-choice.destructive {
    color: var(--danger);
}

/* --- Pricing Pill (model card inline pricing) --- */

.pricing-pills {
    display: flex;
    align-items: center;
    margin-top: 12px;
}

.pricing-pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    background: var(--accent-soft);
    border: 1px solid rgba(251, 190, 81, 0.30);
    border-radius: var(--radius-pill);
    color: var(--accent);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    margin: 3px;
}

/* Cached-price variant: softer amber tint to distinguish the discounted
   cache-read rate pill from the full input/output pills. */
.pricing-pill-cached {
    background: rgba(251, 190, 81, 0.10);
    border-color: rgba(251, 190, 81, 0.18);
    color: var(--text-secondary);
}

/* --- Model Card (iOS-native feel) ---
   Refined glass card for the Models view. Tighter padding than the generic
   `.card`, clearer typographic hierarchy, and a hairline separator above
   the pricing pills row. A subtle amber left accent bar appears on hover,
   mirroring the `.list-row` pattern. */

.model-card-ios {
    display: flex;
    flex-direction: column;
    background: var(--glass-raised);
    -webkit-backdrop-filter: var(--blur);
    backdrop-filter: var(--blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-panel);
    padding: 16px 18px;
    transition: border-color var(--dur) var(--ease),
        box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
    width: 100%;
}

.model-card-ios::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    opacity: 0;
    transition: opacity var(--dur) var(--ease);
}

.model-card-ios:hover {
    border-color: var(--glass-border-hover);
    background: rgba(255, 255, 255, 0.05);
}

.model-card-ios:hover::before {
    opacity: 1;
}

.model-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.model-card-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.model-card-rank {
    flex-shrink: 0;
}

.model-card-id {
    margin-top: 4px;
    font-size: 11px;
    font-family: monospace;
    color: var(--text-dim);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.model-card-meta {
    margin-top: 8px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.3px;
}

.model-card-meta-rows {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 8px;
}

.model-card-meta-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.model-card-meta-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-dim);
    letter-spacing: 0.4px;
    text-transform: uppercase;
    flex-shrink: 0;
}

.model-card-meta-value {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.model-card-ios .pricing-pills {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--hairline);
    justify-content: left;
}

/* --- Persona/Site badge (domain row) --- */

.domain-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-left: 8px;
}

.domain-badge.persona {
    background: var(--accent-soft);
    color: var(--accent);
    border: 1px solid rgba(251, 190, 81, 0.30);
}

.domain-badge.site {
    background: rgba(34, 211, 238, 0.12);
    color: #22d3ee;
    border: 1px solid rgba(34, 211, 238, 0.30);
}

/* --- Identicon (gradient circle from address hash) --- */

.identicon {
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: var(--edge-light);
}

/* --- Load More button (pagination) --- */

.load-more-btn {
    width: 100%;
    padding: 14px;
    background: var(--glass-raised);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-control);
    color: var(--accent);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
    margin-top: 16px;
}

.load-more-btn:hover {
    background: var(--accent-soft);
    border-color: rgba(251, 190, 81, 0.40);
}

/* --- Press feedback for all tappable rows --- */

.list-row.clickable:active,
.hero-card.clickable:active,
.grouped-list .list-row.clickable:active {
    transform: scale(0.99);
}

/* --- Reduced Motion --- */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .chat-status-dots {
        animation: none !important;
        opacity: 0.8;
    }
}

/* --- No backdrop-filter fallback: trade frost for near-opaque panels --- */

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    :root {
        --glass-raised: rgba(20, 20, 22, 0.94);
        --glass-raised-strong: rgba(26, 26, 28, 0.96);
        --glass-floating: rgba(24, 24, 26, 0.96);
    }

    .navbar { background: rgba(8, 8, 9, 0.96); }
    .sidebar { background: rgba(13, 13, 15, 0.97); }
    .modal { background: rgba(20, 20, 22, 0.97); }
    .bottom-sheet { background: rgba(20, 20, 22, 0.97); }
    .subnav-btn { background: rgba(20, 20, 22, 0.94); }
    .segmented-control { background: rgba(20, 20, 22, 0.94); }
}

/* --- Responsive (3 breakpoints: mobile ≤600, tablet 601-1023, desktop ≥1024) --- */

/* Tablet (601–1023px) */
@media (max-width: 1023px) {
    :root {
        --content-pad: 24px;
    }

    .navbar {
        padding: 14px 24px;
    }

    .subnav {
        padding: 8px 24px;
    }

    .cards-grid {
        flex-direction: row;
        justify-content: center;
    }

    .stat-panel {
        flex-direction: column;
    }

    .stat {
        flex: 0 0 auto;
    }

    .stat + .stat {
        border-left: none;
        border-top: 1px solid var(--hairline);
    }

    .stat-chips {
        flex-direction: column;
    }

    .stat-chip + .stat-chip {
        margin-left: 0;
        margin-top: 14px;
    }

    .segmented-control {
        max-width: none;
    }

    .bottom-sheet {
        max-width: 100%;
    }
}

/* Mobile (≤600px) */
@media (max-width: 600px) {
    :root {
        --blur: blur(10px) saturate(140%);
        --blur-strong: blur(18px) saturate(150%);
        --content-pad: 16px;
        --manage-row-pad: 12px 14px;
        --manage-label-width: 100px;
    }

    .navbar {
        padding: 12px 16px;
    }

    .subnav {
        padding: 8px 16px;
    }

    .logo-text {
        font-size: 14px;
        letter-spacing: 2px;
    }

    .card {
        padding: 16px;
        border-radius: 18px;
    }

    .stat {
        padding: 12px 14px;
    }

    .stat-value {
        font-size: 18px;
    }

    .stat-hero .stat-value {
        font-size: 22px;
    }

    .modal {
        padding: 24px;
        border-radius: 18px;
        width: 100%;
    }

    .modal-body {
        margin-right: -24px;
        padding-right: 24px;
    }

    /* iOS Safari auto-zooms focused inputs with font-size < 16px. Bumping to
       16px on mobile prevents the disorienting zoom; desktop stays at 14px. */
    .modal-input {
        font-size: 16px;
    }

    /* The composer textarea needs the same 16px floor. It's matched by
       `.chat-composer textarea.chat-composer-input` (specificity 0,2,1),
       which beats the bare `.modal-input` selector above, so it must be
       bumped with matching specificity or iOS Safari will still zoom on
       focus. Desktop stays at 14px (desktop rule is outside this query). */
    .chat-composer textarea.chat-composer-input {
        font-size: 16px;
    }

    /* The Studio strip input sits in a horizontal flex row (mode toggle
       left, input center, chevron toggle right). At 14px iOS Safari
       auto-zooms on focus, and the zoom centres rightward (toward the
       chevron), cutting off the left "Video" mode toggle. Same 16px floor
       as .modal-input / .studio-prompt. Desktop stays at 14px. */
    .studio-strip-input {
        font-size: 16px;
    }

    .persona-manage-tabs-floating {
        margin-right: -24px;
        padding-right: 24px;
    }

    /* Manage modal has 5 long-label tabs — too many to fit one row on a ~360px
       screen. Stack them vertically (one per row) by re-enabling wrap and
       forcing full-width segments. Scoped to the manage modal only; the
       global mobile `.segmented-control { flex-wrap: nowrap }` rule stays in
       place for session tabs / metrics windows / permission session tabs
       (few short tabs, fine on one row). */
    .persona-manage-tabs-floating .segmented-control {
        flex-wrap: wrap;
        max-width: 100%;
    }

    .persona-manage-tabs-floating .segment {
        flex: 0 0 100%;
        width: 100%;
        min-width: 0;
        padding: 10px 12px;
        font-size: 13px;
    }

    .persona-manage-tabs-floating .segment + .segment {
        margin-left: 0;
        margin-top: 2px;
    }

    .persona-actions {
        flex-wrap: wrap;
       justify-content: center;
    }

    .persona-actions .modal-btn {
        margin-top: 20px;
    }

    /* Manage modal hero strip: stack vertically below 600px. Each cell
       becomes full-width with a top hairline separator — iOS Settings
       detail-modal pattern. */
    .manage-hero-grid {
        flex-direction: column;
    }

    .manage-hero-cell + .manage-hero-cell {
        border-left: none;
        border-top: 1px solid var(--hairline);
    }

    .manage-hero-cell {
        align-items: flex-start;
        text-align: left;
    }

    .manage-hero-value {
        font-size: 20px;
    }

    /* Manage modal detail rows: tighten padding on narrow screens (the
       --manage-row-pad token is retuned in the :root block above). When
       space runs out, stack label above value, both left-aligned — no
       truncation. */
    .list-row.list-row-plain {
        padding: var(--manage-row-pad);
        flex-direction: column;
        align-items: flex-start;
    }

    .list-row-plain .list-row-main {
        flex: 0 0 auto;
        margin-bottom: 4px;
    }

    .list-row-plain .list-row-trailing {
        flex: 0 0 auto;
        margin-left: 0;
        justify-content: flex-start;
    }

    .list-row-plain .list-row-value {
        text-align: left;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }

    .sidebar {
        width: 240px;
    }

    .chat-bubble {
    }

    .chat-header {
        flex-direction: column;
    }

    .chat-header-actions {
        width: 100%;
    }

    /* New components — mobile adjustments */
    .hero-card {
        padding: 20px 18px;
    }

    .hero-value {
        font-size: 32px;
    }

    .wallet-card {
        padding: 24px 20px;
    }

    .wallet-card-balance {
        font-size: 32px;
    }

    .wallet-card-identicon {
        width: 36px;
        height: 36px;
    }

    .grouped-list {
        border-radius: 18px;
    }

    .list-row {
        padding: 14px 16px;
    }

    /* Stack the referral row vertically on mobile: label on line 1,
       copy button + full URL on line 2 (full-width, wraps as needed). */
    .list-row:has(.referral-code-value) {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
    .list-row:has(.referral-code-value) .list-row-trailing {
        margin-left: 0;
        width: 100%;
        max-width: 100%;
    }

    .list-row-leading {
        width: 32px;
        height: 32px;
        margin-right: 12px;
    }

    .points-layout {
        padding: 15px 16px;
        gap: 14px;
    }

    .points-layout-icon {
        width: 38px;
        height: 38px;
    }

    .points-layout-icon svg {
        width: 21px;
        height: 21px;
    }

    .points-layout-lines {
        gap: 8px;
    }

    /* Tighten tx metadata spacing on narrow screens. */
    .tx-meta-line {
        gap: 4px;
    }

    .segmented-control {
        max-width: none;
        flex-wrap: nowrap;
    }

    .segment {
        flex: 1 1 0;
        min-width: 0;
        padding: 6px 8px;
        font-size: 12px;
        width: auto;
    }

    .subnav-btn {
        height: 40px;
    }

    .donut-chart svg {
        width: 140px;
        height: 140px;
    }

    .pie-canvas-wrap {
        height: 200px;
    }

    .chart-canvas-wrap {
        height: 180px;
    }

    .chart-canvas-wrap.tall {
        height: 200px;
    }

    .chart-loading {
        height: 180px;
    }

    .service-bar-label {
        width: 70px;
        font-size: 11px;
    }

    .pricing-pills {
        flex-wrap: wrap;
    }

    .pricing-pill {
        font-size: 10px;
        padding: 3px 8px;
    }

    .bottom-sheet {
        border-radius: 16px 16px 0 0;
        padding: 12px 20px 24px;
        height: 100dvh;
        max-height: 100dvh;
        transition: transform 0.3s var(--ease), opacity 0.3s var(--ease),
                    height var(--dur) var(--ease), max-height var(--dur) var(--ease);
    }

    /* Collapsed-half snap (toggled by the drag handler) */
    .bottom-sheet[data-snap="partial"] {
        height: 50dvh;
        max-height: 50dvh;
    }

    /* Body scrolls so actions stay pinned at the bottom */
    .bottom-sheet-body {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
    }
}

/* --- Persistent sidebar on desktop --- */
@media (min-width: 1024px) {
    .sidebar,
    .sidebar.open {
        transform: none;
        box-shadow: none;
    }

    .navbar {
        margin-left: 280px;
    }

    .subnav {
        margin-left: 280px;
    }

    .spa-shell {
        margin-left: 280px;
        width: auto;
    }

    .sidebar-nav {
        padding-top: 24px;
    }

    .sidebar-backdrop,
    .sidebar-backdrop.open {
        display: none !important;
    }
}

/* ========================================================================
   Persona Chat Rich Widgets
   Tool-call cards, attachment cards (file/voice/image), and rich composer
   controls (attach/mic buttons, attachment chips, drag-drop). Uses the
   existing "Dark Glass" design tokens — flexbox-only, explicit margins.
   ======================================================================== */

/* --- Tool-call cards (one per non-respond/done tool call) --- */

.tool-card {
    align-self: flex-start;
    max-width: 90%;
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: var(--radius-control);
    border: 1px solid var(--glass-border);
    background: var(--glass-raised);
    -webkit-backdrop-filter: blur(var(--blur));
    backdrop-filter: blur(var(--blur));
    box-shadow: var(--edge-light);
}

.tool-card-header {
    display: flex;
    align-items: center;
}

.tool-card-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    margin-right: 10px;
}

.tool-card-icon svg {
    width: 15px;
    height: 15px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tool-card-main {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-width: 0;
}

.tool-card-label {
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 700;
}

.tool-card-subtitle {
    color: var(--text-dim);
    font-size: 11px;
    margin-top: 1px;
}

.tool-card-status {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-left: 10px;
    background: var(--text-dim);
}

.tool-card-status.tool-status-done {
    background: var(--success);
    box-shadow: 0 0 6px rgba(126, 231, 135, 0.4);
}

.tool-card-status.tool-status-error {
    background: var(--danger);
    box-shadow: 0 0 6px rgba(242, 139, 130, 0.4);
}

.tool-card-status.tool-status-running {
    background: var(--accent);
    box-shadow: 0 0 6px var(--accent-glow);
    animation: tool-pulse 1.4s ease-in-out infinite;
}

.tool-card.tool-live .tool-card-label {
    color: var(--accent);
}

.tool-card-body {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--hairline);
}

.tool-card-empty {
    color: var(--text-dim);
    font-size: 12px;
    font-style: italic;
}

@keyframes tool-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* --- Todo list (tasks_write / task_list) --- */

.todo-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.todo-row {
    display: flex;
    align-items: center;
    padding: 5px 0;
}

.todo-row + .todo-row {
    border-top: 1px solid var(--hairline);
}

.todo-glyph {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-right: 9px;
    color: var(--text-dim);
}

.todo-glyph svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.todo-row.todo-completed .todo-glyph { color: var(--success); }
.todo-row.todo-in_progress .todo-glyph { color: var(--accent); }
.todo-row.todo-cancelled .todo-glyph { color: var(--danger); }

.todo-text {
    flex-grow: 1;
    color: var(--text-primary);
    font-size: 13px;
    line-height: 1.4;
}

.todo-row.todo-completed .todo-text {
    text-decoration: line-through;
    color: var(--text-dim);
}

.todo-row.todo-cancelled .todo-text {
    color: var(--text-dim);
}

.priority-pill {
    flex-shrink: 0;
    margin-left: 10px;
    padding: 2px 7px;
    border-radius: var(--radius-pill);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.5px;
}

.priority-pill.priority-high { background: var(--accent-soft); color: var(--accent); }
.priority-pill.priority-low { background: rgba(255, 255, 255, 0.05); color: var(--text-dim); }

/* --- Search / link / file-op / domain / subagent / timer cards --- */

.search-card {
    display: flex;
    align-items: center;
}

.search-query {
    flex-grow: 1;
    color: var(--text-primary);
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-right: 10px;
}

.search-count-chip {
    flex-shrink: 0;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 11px;
    font-weight: 700;
}

.link-card {
    display: flex;
    flex-direction: column;
}

.link-card-url {
    color: var(--accent);
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.link-card-path {
    color: var(--text-dim);
    font-size: 11px;
    margin-top: 3px;
}

.link-card-action {
    align-self: flex-start;
    margin-top: 7px;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--glass-border);
    background: var(--glass-raised);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.link-card-action:hover {
    color: var(--accent);
    border-color: var(--glass-border-hover);
}

.file-op-card {
    display: flex;
    align-items: center;
}

.file-op-path {
    color: var(--text-primary);
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 70%;
}

.file-op-label {
    color: var(--text-dim);
    font-size: 11px;
    margin-left: 6px;
}

.domain-card, .subagent-card {
    display: flex;
    align-items: center;
}

.domain-action, .subagent-action {
    flex-shrink: 0;
    color: var(--text-dim);
    font-size: 11px;
    font-weight: 700;
    margin-right: 8px;
}

.domain-name, .subagent-name {
    color: var(--text-primary);
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.timer-card {
    display: flex;
    align-items: center;
}

.timer-ring {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid var(--accent);
    border-top-color: transparent;
    margin-right: 9px;
    animation: tool-spin 1.4s linear infinite;
}

.timer-card span {
    color: var(--text-secondary);
    font-size: 12px;
}

@keyframes tool-spin {
    to { transform: rotate(360deg); }
}

/* --- Attachment cards (persona → user: file / voice / image) --- */

.attachment-card {
    align-self: flex-start;
    max-width: 90%;
    margin-top: 12px;
    padding: 10px;
    border-radius: var(--radius-control);
    border: 1px solid var(--glass-border);
    background: var(--glass-raised);
    -webkit-backdrop-filter: blur(var(--blur));
    backdrop-filter: blur(var(--blur));
    box-shadow: var(--edge-light);
}

/* User-sent attachment cards (e.g. voice messages recorded in the web app)
   mirror the .chat-bubble.sent treatment: right-aligned + amber tint. */
.attachment-card.sent {
    align-self: flex-end;
    background: var(--accent-soft);
    border-color: rgba(251, 190, 81, 0.4);
    box-shadow: 0 0 12px rgba(251, 190, 81, 0.14), var(--edge-light);
}

.attachment-card.attachment-voice {
  min-width: 45%;
}

.attachment-image {
    margin-bottom: 8px;
}

.attachment-image-img {
    display: block;
    max-width: 100%;
    max-height: 240px;
    border-radius: 8px;
    cursor: pointer;
}

/* Video attachment: a 16/9 poster frame with a play-icon overlay (mirrors
   the Studio artifact card). Tapping opens the ImageViewer lightbox in
   video mode (lazy download with progress → unmuted playback). The inner
   container is `.attachment-video-frame` (NOT `.attachment-video`) to avoid
   colliding with the `attachment-{{kind}}` class the template puts on the
   card itself (`.attachment-card.attachment-video`). */
.attachment-video-frame {
    position: relative;
    width: 300px;
    max-width: 100%;
    aspect-ratio: 16 / 9;
    margin-bottom: 8px;
    background: var(--glass-sunken);
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
}

.attachment-video-poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
}

.attachment-video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid var(--glass-border);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
    transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}

.attachment-video-frame:hover .attachment-video-play {
    transform: translate(-50%, -50%) scale(1.06);
    background: rgba(0, 0, 0, 0.6);
}

.attachment-video-play svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.attachment-file-row {
    display: flex;
    align-items: center;
}

.attachment-file-icon {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--accent-soft);
    color: var(--accent);
    margin-right: 10px;
}

.attachment-file-icon svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.attachment-file-main {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-width: 0;
}

.attachment-file-name {
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.attachment-file-meta {
    color: var(--text-dim);
    font-size: 11px;
    margin-top: 1px;
}

.attachment-download-btn {
    flex-shrink: 0;
    margin-left: 10px;
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--glass-border);
    background: var(--glass-raised);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}

.attachment-download-btn:hover {
    color: var(--accent);
    border-color: var(--glass-border-hover);
}

.attachment-caption {
    color: var(--text-secondary);
    font-size: 12px;
    margin-top: 7px;
}

/* --- Voice card --- */

.voice-card {
    display: flex;
    align-items: center;
}

.voice-play-btn {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: none;
    background: var(--accent-soft);
    color: var(--accent);
    cursor: pointer;
    margin-right: 12px;
    transition: background var(--dur) var(--ease);
}

.voice-play-btn:hover {
    background: rgba(251, 190, 81, 0.2);
}

.voice-play-btn svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.voice-icon-play,
.voice-icon-pause {
    display: flex;
    align-items: center;
    justify-content: center;
}

.voice-icon-pause {
    display: none;
}

.voice-play-btn.playing .voice-icon-play {
    display: none;
}

.voice-play-btn.playing .voice-icon-pause {
    display: flex;
}

.voice-waveform {
    position: relative;
    flex: 0 0 90px;
    height: 24px;
    cursor: pointer;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

.voice-waveform-track,
.voice-waveform-progress {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}

.voice-waveform-progress {
    clip-path: inset(0 100% 0 0);
    -webkit-clip-path: inset(0 100% 0 0);
}

.voice-waveform-svg {
    width: 100%;
    height: 100%;
    preserveAspectRatio: none;
}

.voice-waveform-svg rect {
    fill: var(--text-dim);
    opacity: 0.5;
}

.voice-waveform-progress .voice-waveform-svg rect {
    fill: var(--accent);
    opacity: 1;
}

.voice-meta {
    flex-shrink: 0;
    color: var(--text-dim);
    font-size: 11px;
    margin-left: 12px;
}

/* --- User-bubble image thumbnails --- */

.chat-bubble-images {
    display: flex;
    flex-wrap: wrap;
    margin-top: 8px;
}

.chat-bubble-image-thumb {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 8px;
    margin-right: 6px;
    margin-bottom: 6px;
    cursor: pointer;
    background: var(--glass-sunken);
}

/* --- Rich composer controls --- */

.composer-icon-btn {
    flex-shrink: 0;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-control);
    background: var(--glass-raised);
    color: var(--text-secondary);
    cursor: pointer;
    transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease),
        background var(--dur) var(--ease);
}

.composer-icon-btn:hover {
    color: var(--accent);
    border-color: var(--glass-border-hover);
    background: rgba(255, 255, 255, 0.06);
}

.composer-icon-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.composer-icon-btn svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.composer-mic-btn.recording {
    color: var(--danger);
    border-color: rgba(242, 139, 130, 0.5);
    background: var(--danger-soft);
    animation: tool-pulse 1s ease-in-out infinite;
}

.chat-composer-attachments {
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 8px;
}

.composer-attachment-chip {
    display: flex;
    align-items: center;
    padding: 4px 8px;
    margin-right: 6px;
    margin-bottom: 4px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--glass-border);
    background: var(--glass-raised);
    font-size: 11px;
}

.composer-attachment-chip.uploading {
    border-color: var(--accent-glow);
}

.composer-attachment-chip.error {
    border-color: rgba(242, 139, 130, 0.5);
    background: var(--danger-soft);
}

.composer-attachment-name {
    color: var(--text-primary);
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-right: 6px;
}

.composer-attachment-status {
    color: var(--text-dim);
    margin-right: 6px;
}

.composer-attachment-chip.uploading .composer-attachment-status {
    color: var(--accent);
}

.composer-attachment-chip.error .composer-attachment-status {
    color: var(--danger);
}

.composer-attachment-remove {
    border: none;
    background: transparent;
    color: var(--text-dim);
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    padding: 0;
}

.composer-attachment-remove:hover {
    color: var(--danger);
}

.chat-composer.dropping {
    border-color: var(--accent);
    background: var(--accent-soft);
}

/* --- Reduced motion: disable pulses + spin --- */

@media (prefers-reduced-motion: reduce) {
    .tool-card-status.tool-status-running,
    .composer-mic-btn.recording {
        animation: none;
    }
    .timer-ring {
        animation: none;
    }
}

/* --- Mobile: full-width cards, larger touch targets --- */

@media (max-width: 600px) {
    .tool-card,
    .attachment-card {
        max-width: 100%;
    }

    .attachment-card.attachment-voice {
      min-width: 90%;
    }

    
    .voice-play-btn {
        width: 44px;
        height: 44px;
    }
    .voice-play-btn svg {
        width: 20px;
        height: 20px;
    }
    .chat-bubble-image-thumb {
        width: 100px;
        height: 100px;
    }
}

/* --- Image viewer (lightbox) --- */

.image-viewer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(4, 4, 5, 0.78);
    -webkit-backdrop-filter: var(--blur-strong);
    backdrop-filter: var(--blur-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    /* Fallback only — overridden per-open by OverlayStack inline z-index
       (image-viewer.js) so viewers stack in open order above modals. */
    z-index: 2100;
    opacity: 0;
    transition: opacity 0.25s var(--ease);
}

.image-viewer-overlay.open {
    opacity: 1;
}

.image-viewer-overlay[aria-hidden="true"] {
    opacity: 0;
}

.image-viewer-img {
    max-width: 92vw;
    max-height: 92vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: var(--shadow-floating);
    user-select: none;
    -webkit-user-drag: none;
}

/* Video variant of the lightbox media element. */
.image-viewer-video {
    background: #000;
}

/* Dimmed placeholder backdrop shown behind the spinner (single-image +
   multi-image lazy resolve) or behind the lazy-video Play button while the
   full-resolution media resolves. Typically a small thumbnail that is
   already cached from the gallery card hydration. */
.image-viewer-placeholder {
    opacity: 0.4;
    filter: blur(2px);
}

/* Lazy-video backdrop: an absolutely-positioned, centered, dimmed thumbnail
   sitting behind the Play button + progress inside `.image-viewer-lazy`. */
.image-viewer-video-backdrop {
    position: absolute;
    width: 95vw;
    height: auto;
}

/* Lazy-video state: centered Play button + progress below it. `position:
   relative` so the backdrop can be absolutely positioned within it. */
.image-viewer-lazy {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    max-width: 92vw;
    max-height: 92vh;
    text-align: center;
}

.image-viewer-play-btn {
    position: relative;
    z-index: 1;
    width: 88px;
    height: 88px;
    border: 1px solid rgba(251, 190, 81, 0.4);
    border-radius: 50%;
    background: var(--glass-raised);
    color: var(--accent);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
        border-color var(--dur) var(--ease);
}

.image-viewer-play-btn:hover:not(:disabled) {
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 12px 40px rgba(251, 190, 81, 0.35);
    border-color: var(--accent);
}

.image-viewer-play-btn:disabled {
    cursor: progress;
    opacity: 0.85;
}

.image-viewer-play-icon {
    width: 34px;
    height: 34px;
    margin-left: 4px;
}

/* Standalone spinner shown in place of the Play button while a lazy video
   downloads. Visually matches the image-loading spinner (same 40px ring,
   same amber tone) but is in-flow so it uses the plain-rotate keyframe.
   The download-stats text sits below it via the flex column layout of
   `.image-viewer-lazy`. */
.image-viewer-lazy-spinner {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 3px solid rgba(251, 190, 81, 0.22);
    border-top-color: var(--accent);
    animation: image-viewer-spin 0.9s linear infinite;
    pointer-events: none;
}

@keyframes image-viewer-spin {
    to { transform: rotate(360deg); }
}

.image-viewer-progress {
    position: relative;
    z-index: 1;
    font-size: 13px;
    color: var(--text-dim);
    font-variant-numeric: tabular-nums;
    min-height: 18px;
    max-width: 80vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.image-viewer-controls {
    position: absolute;
    top: 18px;
    right: 18px;
    display: flex;
    gap: 10px;
}

.image-viewer-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-pill);
    background: var(--glass-raised);
    -webkit-backdrop-filter: var(--blur);
    backdrop-filter: var(--blur);
    color: var(--text-primary);
    cursor: pointer;
    transition: background var(--dur) var(--ease),
        border-color var(--dur) var(--ease),
        transform var(--dur) var(--ease),
        box-shadow var(--dur) var(--ease);
}

.image-viewer-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: var(--glass-border-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.32);
}

.image-viewer-btn:focus-visible {
    outline: none;
    border-color: rgba(251, 190, 81, 0.55);
    box-shadow: 0 0 0 3px rgba(251, 190, 81, 0.18);
}

.image-viewer-btn svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.image-viewer-download svg {
    color: var(--accent);
}

.image-viewer-action {
    overflow: hidden;
}

.image-viewer-action .navbar-logo {
    height: 10px;
    width: auto;
    filter: drop-shadow(0 0 8px rgba(251, 190, 81, 0.45));
    pointer-events: none;
}

/* --- Multi-image mode: Prev/Next nav + counter + lazy spinner --- */
.image-viewer-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
}

.image-viewer-nav-left {
    left: 18px;
}

.image-viewer-nav-right {
    right: 18px;
}

.image-viewer-nav:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    transform: translateY(-50%);
}

.image-viewer-nav:disabled:hover {
    background: var(--glass-raised);
    border-color: var(--glass-border);
    transform: translateY(-50%);
    box-shadow: none;
}

.image-viewer-counter {
    position: absolute;
    bottom: 22px;
    left: 50%;
    transform: translateX(-50%);
    padding: 5px 14px;
    border-radius: var(--radius-pill);
    background: var(--glass-raised);
    border: 1px solid var(--glass-border);
    -webkit-backdrop-filter: var(--blur);
    backdrop-filter: var(--blur);
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
    user-select: none;
}

.image-viewer-loading-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 3px solid rgba(251, 190, 81, 0.22);
    border-top-color: var(--accent);
    animation: image-viewer-loading-spin 0.9s linear infinite;
    pointer-events: none;
}

/* Dedicated keyframe for the centered loading spinner. The element is
   positioned via a translate() transform; if the animation only sets
   rotate() (like image-viewer-spin) the browser interpolates both the
   translation and rotation via matrix decomposition, producing a
   spiralling slide across the screen instead of an in-place rotation.
   Composing both transforms in each keyframe keeps the spinner pinned
   at center while it spins. */
@keyframes image-viewer-loading-spin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to   { transform: translate(-50%, -50%) rotate(360deg); }
}

/* `image_view` / `video_watch` tool cards are clickable to open the lightbox. */
.image-view-card,
.video-watch-card {
    cursor: pointer;
    transition: background var(--dur) var(--ease),
        border-color var(--dur) var(--ease);
}

.image-view-card:hover,
.video-watch-card:hover {
    background: var(--accent-soft);
    border-color: rgba(251, 190, 81, 0.4);
}

/* `artifacts_create` tool card — green-tinted export action. */
.artifacts-create-card {
    border-color: rgba(126, 231, 135, 0.25);
}

.artifacts-create-card:hover {
    background: rgba(126, 231, 135, 0.08);
    border-color: rgba(126, 231, 135, 0.4);
}

/* `audio_transcribe` tool card — purple-tinted media-understanding action. */
.audio-transcribe-card {
    border-color: rgba(180, 160, 255, 0.25);
}

/* `studio_convert_video_to_audio` tool card — purple-tinted media transform. */
.studio-convert-video-to-audio-card {
    border-color: rgba(180, 160, 255, 0.25);
}

@media (prefers-reduced-motion: reduce) {
    .image-viewer-overlay {
        transition: none;
    }
    .image-viewer-btn,
    .image-view-card,
    .video-watch-card {
        transition: none;
    }
}

@media (max-width: 600px) {
    .image-viewer-img {
        max-width: 96vw;
        max-height: 88vh;
    }
    .image-viewer-controls {
        top: 12px;
        right: 12px;
        gap: 8px;
    }
    .image-viewer-btn {
        width: 44px;
        height: 44px;
    }
    .image-viewer-btn svg {
        width: 20px;
        height: 20px;
    }
    .image-viewer-nav {
        width: 44px;
        height: 44px;
    }
    .image-viewer-nav-left {
        left: 10px;
    }
    .image-viewer-nav-right {
        right: 10px;
    }
    .image-viewer-counter {
        bottom: 14px;
    }
}

/* ===========================================================================
   Perceptron Studio (unified canvas + dock)
   Mobile-first: a flex column filling the shell — a stage on top (empty /
   live-generation / result), a horizontal filmstrip of recent results, and a
   sticky bottom dock holding the unified composer (mode switch, prompt,
   reference drop-zones, params). On desktop (min-width) the dock expands to
   two columns and the params surface inline; on mobile they collapse into a
   bottom-sheet "Options" surface. A full-stage gallery (filter chips:
   All/Videos/Images/Uploads) replaces the old tabbed library.
   =========================================================================== */

.studio {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    position: relative;
}

/* --- Showcase (vertical infinite-scroll center-snapping carousel) -------- */

.studio-showcase {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 0 var(--content-pad);
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    scrollbar-width: none;
    -ms-overflow-style: none;
    display: flex;
    flex-direction: column;
    overflow-anchor: none;
    scroll-snap-type: y mandatory;
}

.studio-showcase::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.studio-showcase[hidden] { display: none; }

.studio-showcase-slide {
    flex: 0 0 100%;
    height: 100%;
    min-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

.studio-showcase-sentinel {
    flex: 0 0 auto;
    height: 0;
    width: 100%;
}

/* First-visits scroll hint overlay (Showcase). Pointer-transparent so it
   never blocks scrolling or slide taps; persists until the user scrolls. */
.studio-scroll-hint {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1400;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    pointer-events: none;
    color: var(--accent);
    opacity: 0;
    animation: studio-hint-in 0.5s var(--ease) 0.2s forwards;
}

.studio-scroll-hint-chevron {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--glass-raised);
    box-shadow: 0 0 0 1px var(--hairline), 0 0 18px rgba(251, 190, 81, 0.25);
}
.studio-scroll-hint-chevron svg {
    width: 20px;
    height: 20px;
}
.studio-scroll-hint-up   { animation: studio-hint-bob-up   1.6s var(--ease) infinite; }
.studio-scroll-hint-down { animation: studio-hint-bob-down 1.6s var(--ease) infinite; }

.studio-scroll-hint-label {
    font-size: 13px;
    color: var(--text-secondary);
    letter-spacing: 0.02em;
    background: var(--glass-raised);
    padding: 6px 14px;
    border-radius: 999px;
    box-shadow: 0 0 0 1px var(--hairline);
}

@keyframes studio-hint-in {
    from { opacity: 0; transform: translate(-50%, calc(-50% + 6px)); }
    to   { opacity: 1; transform: translate(-50%, -50%); }
}
@keyframes studio-hint-bob-up {
    0%, 100% { transform: translateY(2px); }
    50%      { transform: translateY(-3px); }
}
@keyframes studio-hint-bob-down {
    0%, 100% { transform: translateY(-3px); }
    50%      { transform: translateY(2px); }
}
@media (prefers-reduced-motion: reduce) {
    .studio-scroll-hint          { animation: none; opacity: 1; }
    .studio-scroll-hint-up,
    .studio-scroll-hint-down    { animation: none; }
}

.studio-showcase-img {
    max-width: 100%;
    max-height: 100%;
    display: block;
    border-radius: var(--radius-panel, 22px);
    object-fit: contain;
    cursor: pointer;
}

.studio-showcase-video {
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: 100%;
    display: block;
    border-radius: var(--radius-panel, 22px);
    object-fit: contain;
    background: #000;
    cursor: pointer;
}

.studio-showcase-video-pending,
.studio-showcase-image-pending {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* --- Progress spinner (used by gallery working cards) -------------------- */

.studio-progress,
.studio-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 40px 24px;
}

.studio-progress-spinner {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 3px solid var(--hairline);
    border-top-color: var(--accent);
    animation: studio-spin 0.9s linear infinite;
}

.studio-progress-spinner.small {
    width: 24px;
    height: 24px;
    border-width: 2px;
}

@keyframes studio-spin {
    to { transform: rotate(360deg); }
}

/* --- Gallery (full-stage library overlay) ------------------------------- */

.studio-gallery {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    margin-top: 52px;
    overflow-y: auto;
}

.studio-gallery[hidden] { display: none; }

.studio-gallery-filters {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    position: sticky;
    top: 0;
    z-index: 10;
    margin-bottom: 0;
    padding: 8px var(--content-pad);
    background: var(--glass-raised);
    -webkit-backdrop-filter: var(--blur);
    backdrop-filter: var(--blur);
    border-bottom: 1px solid var(--hairline);
}

.studio-gallery-filters .segmented-control {
    flex-wrap: nowrap;
}

.studio-gallery-actions {
    margin-left: auto;
    display: flex;
    gap: 8px;
}

.studio-upload-btn {
    padding: 7px 16px;
    background: var(--glass-raised-strong);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-pill);
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.studio-upload-btn:hover {
    background: var(--glass-floating);
    border-color: var(--glass-border-hover);
}

/* --- Prompt strip (always-visible, sticky bottom) ----------------------- */

.studio-strip {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    position: absolute;
    bottom: 10px;
    left: 20px;
    right: 20px;
    z-index: 1500;
    padding: 10px 10px calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--glass-raised);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-pill);
    backdrop-filter: var(--blur-strong);
    -webkit-backdrop-filter: var(--blur-strong);
    transition: border-color var(--dur) var(--ease);
}

.studio-strip:focus-within { border-color: var(--accent); }

.studio-strip[hidden] { display: none; }

.studio-strip-mode {
    flex-shrink: 0;
    padding: 2px;
    max-width: none;
    flex-wrap: nowrap;
    justify-content: center;
}

.studio-strip-mode .segment {
    padding: 4px 10px;
    font-size: 11px;
    min-width: 0;
    border-radius: 8px;
}

.studio-strip-mode .segment + .segment { margin-left: 1px; }

.studio-strip-input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    font-size: 16px;
    color: var(--text-primary);
    caret-color: var(--accent);
    cursor: text;
}

.studio-strip-input::placeholder { color: var(--text-dim); }
.studio-strip-input:focus { outline: none; }

.studio-strip-input::placeholder { color: var(--text-dim); }
.studio-strip-input:focus { outline: none; }

.studio-strip-summary {
    display: none;
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-dim);
    font-variant-numeric: tabular-nums;
}

.studio-strip-toggle {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--text-dim);
    cursor: pointer;
    border-radius: var(--radius-pill);
    transition: transform var(--dur) var(--ease), color var(--dur) var(--ease), background var(--dur) var(--ease);
    -webkit-user-select: none;
    user-select: none;
}

.studio-strip-toggle:hover { color: var(--text-primary); background: var(--glass-sunken); }
.studio-strip-toggle:active { transform: scale(0.92); }
.studio-strip-toggle.open { transform: rotate(180deg); }

.studio-strip-chevron {
    width: 18px;
    height: 18px;
    display: block;
}

/* --- Composer sheet (slide-up overlay, two snap levels) ----------------- */

.studio-sheet {
    position: fixed;
    inset: 0;
    z-index: 2300;
    pointer-events: none;
}

.studio-sheet[data-snap="closed"] { pointer-events: none; }
.studio-sheet[data-snap="partial"],
.studio-sheet[data-snap="full"] { pointer-events: auto; }

.studio-sheet-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(4, 4, 5, 0.26);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    opacity: 0;
    transition: opacity var(--dur) var(--ease);
}

.studio-sheet[data-snap="partial"] .studio-sheet-backdrop,
.studio-sheet[data-snap="full"] .studio-sheet-backdrop { opacity: 1; }

.studio-sheet-panel {
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 0;
    min-height: 45dvh;
    max-height: 90dvh;
    display: flex;
    flex-direction: column;
    background: var(--glass-raised);
    border-top: 1px solid var(--glass-border);
    border-radius: 22px 22px 0 0;
    backdrop-filter: var(--blur-strong);
    -webkit-backdrop-filter: var(--blur-strong);
    box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.5);
    transform: translateY(100%);
    transition: transform var(--dur) var(--ease), max-height var(--dur) var(--ease);
    overflow: hidden;
}

.studio-sheet[data-snap="partial"] .studio-sheet-panel {
    transform: translateY(calc(100% - 45dvh));
    max-height: 45dvh;
}
.studio-sheet[data-snap="full"] .studio-sheet-panel { transform: translateY(0); }

/* Mobile: taller partial sheet (~75% viewport) */
@media (max-width: 767px) {
    .studio-sheet[data-snap="partial"] .studio-sheet-panel {
        transform: translateY(calc(100% - 75dvh));
        min-height: 75dvh;
        max-height: 75dvh;
    }
}

/* Short screens (height < 610px): full snap fills the viewport */
@media (max-height: 609px) {
    .studio-sheet[data-snap="full"] .studio-sheet-panel {
        max-height: 100dvh;
    }
}

.studio-sheet-handle {
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    padding: 10px 0 4px;
    cursor: grab;
    touch-action: none;
}

.studio-sheet-handle:active { cursor: grabbing; }

.studio-sheet-handle span {
    width: 38px;
    height: 5px;
    border-radius: 999px;
    background: var(--glass-border-hover);
    transition: background var(--dur) var(--ease);
}

.studio-sheet-handle:hover span { background: var(--text-dim); }

.studio-sheet-top {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 16px 10px;
    justify-content: center;
}

.studio-mode { flex-shrink: 0; }

.studio-dock-model { flex: 1; min-width: 0; }
.studio-dock-model[hidden] { display: none; }

.studio-sheet-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 0 16px 12px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    -webkit-overflow-scrolling: touch;
}

.studio-prompt {
    width: 100%;
    resize: none;
    min-height: 68px;
    max-height: 156px;
    padding: 12px 14px;
    background: var(--glass-sunken);
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    color: var(--text-primary);
    font-size: 16px; /* >=16px prevents iOS auto-zoom on focus */
    font-family: inherit;
    line-height: 1.5;
    caret-color: var(--accent);
    outline: none;
    overflow-y: scroll;
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.studio-prompt:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.studio-sheet-footer {
    flex-shrink: 0;
    padding: 10px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--hairline);
}

/* --- Inline Options collapsible ----------------------------------------- */

.studio-options {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--hairline);
    padding-top: 12px;
}

.studio-options-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 6px 2px;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
}

.studio-options-summary {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-dim);
    font-variant-numeric: tabular-nums;
}

.studio-options-affordance {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.studio-options-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--text-dim);
}

.studio-options-chev {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    color: var(--text-dim);
    transition: transform var(--dur) var(--ease);
}

.studio-options-head[aria-expanded="true"] .studio-options-chev {
    transform: rotate(180deg);
}

.studio-options-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height var(--dur) var(--ease), opacity var(--dur) var(--ease),
        padding-top var(--dur) var(--ease);
}

.studio-options-body.open {
    max-height: 720px;
    opacity: 1;
    padding-top: 14px;
}

.studio-param {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.studio-param[hidden] { display: none; }

.studio-param-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.studio-extra-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

/* Per-image seed inputs: one field per image, laid out in a wrapping grid so
   n images → n compact inputs. */
.studio-seed-list {
    gap: 6px;
}
.studio-seed-input {
    flex: 1 1 90px;
    min-width: 90px;
}
.studio-seed-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.studio-seed-randomize {
    background: none;
    border: 1px solid var(--hairline);
    border-radius: var(--radius-pill);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    cursor: pointer;
    transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.studio-seed-randomize:hover {
    color: var(--accent);
    border-color: var(--accent-soft);
}

/* Generate button — full-width primary action on mobile. */
.studio-generate {
    width: 100%;
    min-height: 46px;
    padding: 13px 22px;
    background: linear-gradient(180deg, #ffffff 0%, #e9e7e2 100%);
    color: #131313;
    font-size: 15px;
    font-weight: 700;
    border: none;
    border-radius: var(--radius-pill);
    cursor: pointer;
    white-space: nowrap;
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
        opacity var(--dur) var(--ease);
    box-shadow: 0 2px 12px rgba(255, 255, 255, 0.08);
}

.studio-generate:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 6px 22px rgba(255, 255, 255, 0.16);
}

.studio-generate:disabled {
    opacity: 0.42;
    cursor: not-allowed;
}

/* --- Ratio picker (visual frame-shape tiles) ---------------------------- */

.ratio-picker {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 2px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}

.ratio-tile {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 8px;
    min-width: 60px;
    background: var(--glass-sunken);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-control);
    cursor: pointer;
    scroll-snap-align: start;
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.ratio-tile:hover { border-color: var(--glass-border-hover); }

.ratio-tile.active {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.ratio-tile-frame {
    display: block;
    width: 34px;
    max-width: 34px;
    max-height: 34px;
    border: 1.5px solid var(--text-secondary);
    border-radius: 3px;
    margin: auto 0;
}

.ratio-tile.active .ratio-tile-frame {
    border-color: var(--accent);
}

.ratio-tile-label {
    font-size: 11px;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

/* --- Param slider (duration / count + live price) ----------------------- */

.param-slider {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.param-slider-input {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 28px; /* generous touch target */
    background: transparent;
    cursor: pointer;
    margin: 0;
}

.param-slider-input::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 999px;
    background: var(--glass-floating);
    border: 1px solid var(--hairline);
}

.param-slider-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    margin-top: -9px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--glass-border);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.param-slider-input::-moz-range-track {
    height: 6px;
    border-radius: 999px;
    background: var(--glass-floating);
    border: 1px solid var(--hairline);
}

.param-slider-input::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--glass-border);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.param-slider-readout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.param-slider-value {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.param-price {
    font-size: 13px;
    font-weight: 600;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
}

/* --- Reference drop-zones ----------------------------------------------- */

.studio-ref-zones {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ref-zone {
    flex: 1 1 140px;
    min-width: 120px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 10px;
    background: var(--glass-sunken);
    border: 1px dashed var(--glass-border);
    border-radius: var(--radius-control);
    transition: border-color var(--dur) var(--ease);
}

.ref-zone.disabled { opacity: 0.45; }

.ref-zone-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.ref-zone-label {
    font-size: 11px;
    color: var(--text-dim);
    white-space: nowrap;
}

.ref-zone-add {
    padding: 3px 10px;
    border-radius: var(--radius-control);
    border: 1px solid var(--hairline);
    background: var(--glass-raised);
    color: var(--text-secondary);
    font-size: 11px;
    cursor: pointer;
    transition: border-color var(--dur) var(--ease);
}

.ref-zone-add:hover:not(:disabled) { border-color: var(--accent); }
.ref-zone-add:disabled { cursor: not-allowed; opacity: 0.5; }

.ref-zone-body {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ref-thumb {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--hairline);
}

.ref-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ref-thumb-clear {
    position: absolute;
    top: 1px;
    right: 1px;
    width: 16px;
    height: 16px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 9px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- Advanced controls (select, input, toggle) --------------------------- */

.studio-select, .studio-input {
    width: 100%;
    padding: 8px 10px;
    border-radius: var(--radius-control);
    border: 1px solid var(--hairline);
    background: var(--glass-sunken);
    color: var(--text-primary);
    font-size: 13px;
    font-family: inherit;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}
.studio-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23888' d='M3 4.5L6 8l3-3.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 28px;
    cursor: pointer;
}
.studio-model-btn {
    text-align: left;
}
.studio-model-btn-name {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.studio-input {
    /* inherits width: 100% from the shared .studio-select, .studio-input rule */
}
.studio-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
}
.studio-toggle input {
    width: 16px;
    height: 16px;
    accent-color: var(--accent);
    cursor: pointer;
}

/* --- Artifact Picker modal ---------------------------------------------- */

.artifact-picker {
    padding: 0;
}
.artifact-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 10px;
    max-height: 320px;
    overflow-y: auto;
    margin-bottom: 12px;
    padding: 2px;
}
.artifact-picker-tile {
    position: relative;
    border-radius: var(--radius-control);
    border: 2px solid var(--hairline);
    background: var(--glass-sunken);
    cursor: pointer;
    overflow: hidden;
    transition: border-color var(--dur) var(--ease);
}
.artifact-picker-tile:hover { border-color: var(--accent); }
.artifact-picker-tile.selected { border-color: var(--accent); }
.artifact-picker-thumb {
    width: 100%;
    height: 90px;
    object-fit: cover;
    display: block;
}
.artifact-picker-icon-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 90px;
    background: var(--glass-sunken);
    color: var(--text-dim);
}
.artifact-picker-icon-tile svg {
    width: 30px;
    height: 30px;
}
.artifact-picker-name {
    font-size: 11px;
    color: var(--text-secondary);
    padding: 6px 8px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.artifact-picker-meta {
    font-size: 10px;
    color: var(--text-dim);
    padding: 2px 8px 8px;
}
.artifact-picker-check {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--accent);
    color: #131313;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.artifact-picker-upload {
    display: flex;
    justify-content: center;
}
.artifact-picker-upload-btn {
    padding: 8px 18px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--hairline);
    background: var(--glass-raised);
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color var(--dur) var(--ease);
}
.artifact-picker-upload-btn:hover { border-color: var(--accent); }
.artifact-picker-empty, .artifact-picker-loading {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--text-dim);
    padding: 24px;
    font-size: 13px;
}

/* --- Studio ImageViewer action menu + persona target picker --- */
.studio-action-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.studio-action-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 32px 20px;
}
.studio-action-loading-text {
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
}
.studio-action-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 16px;
    border-radius: var(--radius-control);
    border: 1px solid var(--hairline);
    background: var(--glass-raised);
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: border-color var(--dur) var(--ease),
        background var(--dur) var(--ease),
        transform var(--dur) var(--ease);
}
.studio-action-btn:hover {
    border-color: var(--glass-border-hover);
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-1px);
}
.studio-action-btn:active { transform: translateY(0); }
.studio-action-btn .list-row-leading { margin-right: 0; }
.studio-action-btn.active {
    border-color: rgba(251, 190, 81, 0.55);
    background: var(--accent-soft);
}
.studio-action-btn.ghost {
    background: transparent;
    color: var(--text-secondary);
    font-weight: 500;
}
.studio-action-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.studio-action-sub {
    margin-left: auto;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-dim);
}
.studio-action-back {
    padding: 6px 4px 2px;
    font-size: 12px;
    color: var(--text-dim);
    cursor: pointer;
    user-select: none;
}
.studio-action-back:hover { color: var(--accent); }

/* --- Library (gallery grid) ---------------------------------------------- */

.studio-library {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    overflow: visible;
    flex: 1 1 auto;
    min-height: 0;
    align-content: start;
    padding: 0 var(--content-pad) calc(72px + env(safe-area-inset-bottom, 0px));
    margin-top: 10px;
}

.studio-card {
    display: flex;
    flex-direction: column;
    background: var(--glass-raised);
    border: 1px solid var(--glass-border);
    border-radius: 18px;
    overflow: hidden;
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
    transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease),
        box-shadow var(--dur) var(--ease);

    height: 340px;
    justify-content: space-around;
}

.studio-card:hover {
    transform: translateY(-2px);
    border-color: var(--glass-border-hover);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.studio-card-video {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 9;
    background: var(--glass-sunken);
    cursor: pointer;
}

.studio-card-working,
.studio-card-failed {
    cursor: default;
}

.studio-card-image {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 9;
    background: var(--glass-sunken);
    cursor: pointer;
}
.studio-card-image .studio-card-thumb {
    object-fit: contain;
}
.studio-card-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid var(--glass-border);
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
}

.studio-card-play-icon {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid var(--glass-border);
    color: #fff;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
    z-index: 1;
}

.studio-card-thumb {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.studio-card-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 14px;
}

.studio-card-prompt {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.studio-card-meta {
    font-size: 12px;
    color: var(--text-dim);
}

.studio-card-cost {
    color: var(--text-secondary);
    font-weight: 600;
}

.studio-card-footer {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
}

.studio-card-status {
    font-size: 12px;
    color: var(--text-secondary);
    text-transform: capitalize;
}

.studio-card-actions {
    margin-left: auto;
    display: flex;
    gap: 6px;
}

.studio-card-btn {
    padding: 5px 12px;
    background: var(--glass-raised-strong);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-pill);
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.studio-card-btn:hover {
    background: var(--glass-floating);
    border-color: var(--glass-border-hover);
}

.studio-card-btn.danger {
    color: var(--danger, #f28b82);
}

.studio-card-btn.danger:hover {
    background: var(--danger-soft, rgba(242, 139, 130, 0.14));
    border-color: var(--danger, #f28b82);
}

/* Infinite-scroll sentinel for the Studio gallery + artifact picker. Zero
   height (just an observation target); the end-of-list footer carries the
   visible "End of list" cue. */
.studio-gallery-sentinel,
.artifact-picker-sentinel {
    height: 1px;
    width: 100%;
    grid-column: 1 / -1;
}
.studio-gallery-end {
    grid-column: 1 / -1;
    text-align: center;
    padding: 18px 0 8px;
    color: var(--text-dim);
    font-size: 13px;
}
.studio-load-more {
    grid-column: 1 / -1;
    justify-self: center;
    margin: 8px 0 4px;
    padding: 8px 18px;
    border-radius: var(--radius-control);
    border: 1px solid var(--glass-border);
    background: var(--glass-raised);
    color: var(--text-secondary);
    cursor: pointer;
    font: inherit;
}
.studio-load-more:hover { border-color: var(--accent); color: var(--text-primary); }

.studio-card-file {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 9;
    background: var(--glass-sunken);
    cursor: pointer;
    gap: 8px;
    padding: 14px;
}

.studio-card-file-icon {
    width: 44px;
    height: 44px;
    color: var(--text-secondary);
}

.studio-card-file-label {
    font-size: 12px;
    color: var(--text-dim);
    text-align: center;
    word-break: break-all;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- Responsive: desktop caps the composer sheet width + enlarges thumbs - */

@media (min-width: 768px) {
    .studio-prompt {
        font-size: 14px;
    }

    .filmstrip-item {
        width: 96px;
        height: 96px;
    }

    .studio-library {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    }

    /* Center the composer sheet on wide screens so it reads as a panel. */
    .studio-sheet-panel {
        left: 50%;
        right: auto;
        transform: translate(-50%, 100%);
        width: 640px;
        max-width: calc(100vw - 40px);
        border-radius: 22px;
        border: 1px solid var(--glass-border);
        box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.5), 0 20px 60px rgba(0, 0, 0, 0.4);
    }

    .studio-sheet[data-snap="partial"] .studio-sheet-panel {
        transform: translate(-50%, calc(100% - 45dvh));
        max-height: 45dvh;
    }
    .studio-sheet[data-snap="full"] .studio-sheet-panel { transform: translate(-50%, 0); }
}

/* Cap the whole studio width on large desktop and center it. */
@media (min-width: 1200px) {
    .studio {
        max-width: 1140px;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .studio-progress-spinner {
        animation: none;
    }

    .image-viewer-lazy-spinner {
        animation: none;
    }

    .image-viewer-loading-spinner {
        animation: none;
    }

    .studio-sheet-panel,
    .studio-sheet-backdrop,
    .studio-options-body {
        transition: none;
    }
}

/* ========================================================================
   Studio Universe Button
   The sidebar Studio button cycles through 28 visual "universes" (one every
   30s, driven by StudioButton in web.js). Each universe is a full re-skin:
   background, border, text treatment, decorative layers, a subtle idle
   animation, and a dramatic per-universe entrance transition (.studio-tx).
   Decorative layers are absolutely positioned spans injected by JS
   (.studio-layer) plus the button's own ::before/::after. All layers are
   pointer-events: none so the button stays fully clickable.
   ======================================================================== */

.studio-universe-btn {
    position: relative;
    overflow: hidden;
    justify-content: center;
    isolation: isolate;
}

.studio-universe-label {
    position: relative;
    z-index: 3;
    display: inline-block;
}

.studio-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

/* --- Shared transition machinery ---------------------------------------
   One keyframe set, parameterized per universe via custom properties.
   --tx-* : the button frame's entrance transform/filter/clip
   --lbl-*: the label's entrance transform/opacity/letter-spacing        */

.studio-universe-btn.studio-tx {
    animation: studio-tx-frame 0.7s var(--ease) both;
}

.studio-universe-btn.studio-tx .studio-universe-label {
    animation: studio-tx-label 0.7s var(--ease) both;
}

@keyframes studio-tx-frame {
    0% {
        transform: var(--tx-from, translateY(-10px));
        filter: var(--tx-filter-from, brightness(2.2) saturate(0));
        opacity: 0.35;
        clip-path: var(--tx-clip-from, inset(0 0 0 0 round var(--radius-control)));
    }
    55% {
        transform: var(--tx-mid, translateY(2px));
        filter: var(--tx-filter-mid, brightness(1.6));
        opacity: 1;
        clip-path: var(--tx-clip-to, inset(0 0 0 0 round var(--radius-control)));
    }
    100% {
        transform: none;
        filter: none;
        opacity: 1;
        clip-path: var(--tx-clip-to, inset(0 0 0 0 round var(--radius-control)));
    }
}

@keyframes studio-tx-label {
    0% {
        transform: var(--lbl-from, translateY(6px));
        opacity: 0;
    }
    60% { opacity: 1; }
    100% {
        transform: none;
        opacity: 1;
    }
}

/* ========================================================================
   Universe 0 — Deep Ocean
   Dark water gradient, rising bubbles, drifting caustic light sheet.
   ======================================================================== */

.studio-u-0 {
    background: rgba(110, 200, 255, 0.08);
    backdrop-filter: blur(6px) saturate(1.1);
    -webkit-backdrop-filter: blur(6px) saturate(1.1);
    border-color: rgba(110, 200, 255, 0.35);
    box-shadow:
        inset 0 1px 0 rgba(160, 220, 255, 0.25),
        inset 0 -14px 28px rgba(2, 18, 32, 0.9),
        0 4px 22px rgba(20, 120, 190, 0.25);
}

.studio-u-0 .studio-universe-label {
    color: #cfeeff;
    text-shadow:
        0 0 12px rgba(110, 200, 255, 0.65),
        0 2px 6px rgba(1, 12, 22, 0.8);
}

/* Caustic light sheet */
.studio-u-0::before {
    content: "";
    position: absolute;
    inset: -40%;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(ellipse 42% 26% at 24% 18%, rgba(140, 215, 255, .20), transparent 70%),
        radial-gradient(ellipse 36% 22% at 68% 8%, rgba(140, 215, 255, .14), transparent 70%),
        radial-gradient(ellipse 30% 20% at 46% 38%, rgba(90, 180, 240, .10), transparent 70%);
    animation: studio-caustics 6s ease-in-out infinite alternate;
}

@keyframes studio-caustics {
    from { transform: translate3d(-4%, -2%, 0) scale(1); }
    to { transform: translate3d(4%, 3%, 0) scale(1.08); }
}

/* Bubbles — dots rising at different rates (geometry set inline by JS) */
.studio-u-0 .studio-bubble {
    position: absolute;
    bottom: -8px;
    border-radius: 50%;
    background: radial-gradient(circle at 32% 30%, rgba(220,245,255,.9), rgba(140,210,255,.25) 62%, transparent);
    animation: studio-bubble-rise linear infinite;
}

@keyframes studio-bubble-rise {
    from { transform: translateY(0) translateX(0); opacity: 0; }
    12% { opacity: .9; }
    to { transform: translateY(-64px) translateX(6px); opacity: 0; }
}

.studio-u-0.studio-tx {
    --tx-from: translateY(-14px) scaleY(1.25);
    --tx-mid: translateY(2px) scaleY(.97);
    --tx-filter-from: brightness(1.9) blur(3px);
    --tx-filter-mid: brightness(1.25);
    --tx-clip-from: inset(100% -2% -20% -2% round var(--radius-control));
}

/* ========================================================================
   Universe 3 — Neon Grid
   Synthwave: magenta/cyan neon frame over a scrolling perspective grid.
   ======================================================================== */

.studio-u-3 {
    background: linear-gradient(180deg, #12001f 0%, #060010 100%);
    border-color: #ff2bd6;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.14),
        inset 0 -12px 24px rgba(255, 43, 214, .16),
        0 0 14px rgba(255, 43, 214, .55),
        0 0 34px rgba(64, 224, 255, .22);
}

.studio-u-3 .studio-universe-label {
    color: #ffe6fb;
    font-weight: 800;
    letter-spacing: 3px;
    text-transform: uppercase;
    text-shadow:
        -2px 0 rgba(64,224,255,.8),
        2px 0 rgba(255,43,214,.8),
        0 0 14px rgba(255,43,214,.9);
}

/* Perspective grid floor scrolling toward the viewer */
.studio-u-3::before {
    content: "";
    position: absolute;
    left: -25%;
    right: -25%;
    bottom: -30%;
    height: 130%;
    z-index: 1;
    pointer-events: none;
    background:
        repeating-linear-gradient(90deg, rgba(64,224,255,.28) 0 1px, transparent 1px 22px),
        repeating-linear-gradient(0deg, rgba(255,43,214,.30) 0 1px, transparent 1px 12px);
    transform: perspective(90px) rotateX(52deg);
    transform-origin: center bottom;
    animation: studio-grid-scroll .9s linear infinite;
}

@keyframes studio-grid-scroll {
    from { background-position: 0 0, 0 -12px; }
    to { background-position: 0 0, 0 -24px; }
}

/* Scanline sweep */
.studio-u-3::after {
    content: "";
    position: absolute;
    inset: -20% -5%;
    z-index: 2;
    pointer-events: none;
    background: repeating-linear-gradient(180deg,
        transparent 0,
        transparent calc(var(--radius-control) * .9),
        rgba(0, 0, 0, .22) calc(var(--radius-control) * .95));
    animation: studio-scanlines 5s linear infinite;
}

@keyframes studio-scanlines {
    from { transform: translateY(-6%); }
    to { transform: translateY(6%); }
}

.studio-u-3.studio-tx {
    --tx-from: translateX(-3px);
    --tx-mid: translateX(2px);
    --tx-filter-from: brightness(2.4) hue-rotate(40deg) contrast(1.6);
    --tx-filter-mid: brightness(1.4);
}

.studio-u-3.studio-tx .studio-universe-label {
    --lbl-from: translateX(-8px);
}

/* ========================================================================
   Universe 4 — Origami
   Folded paper facets with crisp crease shadows and a gentle 3D sway.
   ======================================================================== */

.studio-u-4 {
    background:
        linear-gradient(115deg, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, .9) 34%, transparent 34.5%),
        linear-gradient(245deg, rgba(230, 251, 255, .85) 0%, rgba(230, 251, 255, .85) 52%, transparent 52.5%),
        linear-gradient(160deg, rgba(240, 253, 255, .7), rgba(200, 244, 251, .6)),
        rgba(6, 182, 212, 0.08);
    backdrop-filter: blur(6px) saturate(1.1);
    -webkit-backdrop-filter: blur(6px) saturate(1.1);
    border-color: rgba(6, 182, 212, .55);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.9),
        inset 0 -8px 16px rgba(6,182,212,.18),
        0 6px 18px rgba(0,0,0,.35);
}

.studio-u-4 .studio-universe-label {
    color: #06b6d4;
    font-weight: 700;
    letter-spacing: 2px;
    text-shadow: 0 1px 0 rgba(255,255,255,.7);
}

/* Crease shadow sweeping across the facets */
.studio-u-4::before {
    content: "";
    position: absolute;
    inset: -10%;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(115deg,
        transparent 30%,
        rgba(6,182,212,.18) 44%,
        rgba(255,255,255,.4) 50%,
        rgba(6,182,212,.18) 56%,
        transparent 70%);
    animation: studio-fold-sway 5.2s ease-in-out infinite alternate;
}

@keyframes studio-fold-sway {
    from { transform: translateX(-7%) skewX(-2deg); }
    to { transform: translateX(7%) skewX(2deg); }
}

.studio-u-4.studio-tx {
    --tx-from: perspective(300px) rotateX(-72deg);
    --tx-mid: perspective(300px) rotateX(10deg);
    --tx-filter-from: brightness(1.35);
    --tx-filter-mid: brightness(1.05);
}

/* ========================================================================
   Universe 5 — Aurora
   Flowing green/violet light ribbons over a star-speckled night sky.
   ======================================================================== */

.studio-u-5 {
    background: rgba(126, 231, 190, 0.08);
    backdrop-filter: blur(6px) saturate(1.1);
    -webkit-backdrop-filter: blur(6px) saturate(1.1);
    border-color: rgba(126, 231, 190, .32);
    box-shadow:
        inset 0 1px 0 rgba(180,255,225,.14),
        inset 0 -10px 26px rgba(126,231,190,.10),
        0 4px 22px rgba(90, 120, 255, .18);
}

.studio-u-5 .studio-universe-label {
    color: #eafff5;
    text-shadow:
        0 0 10px rgba(126,231,190,.75),
        0 0 26px rgba(140,120,255,.45);
}

/* Aurora ribbons — two blurred gradient bands undulating */
.studio-u-5::before {
    content: "";
    position: absolute;
    inset: -55% -25%;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(ellipse 46% 30% at 30% 40%, rgba(126,231,135,.34), transparent 70%),
        radial-gradient(ellipse 40% 26% at 68% 55%, rgba(150,120,255,.30), transparent 70%);
    filter: blur(6px);
    animation: studio-aurora-sway 7s ease-in-out infinite alternate;
}

@keyframes studio-aurora-sway {
    from { transform: translate3d(-6%, -4%, 0) rotate(-3deg) scaleY(1); }
    to { transform: translate3d(6%, 5%, 0) rotate(3deg) scaleY(1.14); }
}

/* Star specks (geometry set inline by JS) — gentle drift, no twinkle */
.studio-u-5 .studio-speck {
    position: absolute;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: #eafff5;
    animation: studio-speck-drift ease-in-out infinite alternate;
}

@keyframes studio-speck-drift {
    0% { transform: translate(0, 0); opacity: .4; }
    50% { opacity: .85; }
    100% { transform: translate(5px, -4px); opacity: .4; }
}

.studio-u-5.studio-tx {
    --tx-from: scaleY(.35);
    --tx-mid: scaleY(1.06);
    --tx-filter-from: brightness(2.6) saturate(.4) blur(2px);
    --tx-filter-mid: brightness(1.5);
}

/* ========================================================================
   Universe 6 — Terminal
   Phosphor green on black with a blinking cursor and CRT scanlines.
   ======================================================================== */

.studio-u-6 {
    background: linear-gradient(180deg, #04140a 0%, #020a05 100%);
    border-color: rgba(74, 255, 138, .38);
    border-radius: calc(var(--radius-control) * .5);
    box-shadow:
        inset 0 1px 0 rgba(74,255,138,.16),
        inset 0 -10px 24px rgba(74,255,138,.07),
        0 0 16px rgba(74,255,138,.22);
}

.studio-u-6 .studio-universe-label {
    color: #4aff8a;
    font-family: 'JetBrains Mono', ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-shadow: 0 0 8px rgba(74,255,138,.8);
}

.studio-u-6 .studio-universe-label::before {
    content: "> ";
}

.studio-u-6 .studio-universe-label::after {
    content: "_";
    margin-left: 2px;
}

/* CRT scanlines — gently float up/down so the screen stays alive */
.studio-u-6::before {
    content: "";
    position: absolute;
    inset: -10%;
    z-index: 2;
    pointer-events: none;
    background: repeating-linear-gradient(180deg,
        transparent 0,
        transparent calc(var(--radius-control) * .9),
        rgba(0, 0, 0, .28) calc(var(--radius-control) * .95));
    animation: studio-scan-drift 8s ease-in-out infinite alternate;
}

@keyframes studio-scan-drift {
    from { transform: translateY(-3%); }
    to { transform: translateY(3%); }
}

.studio-u-6.studio-tx {
    --tx-from: scaleY(.06);
    --tx-mid: scaleY(1.08);
    --tx-filter-from: brightness(3);
    --tx-filter-mid: brightness(1.6);
}

.studio-u-6.studio-tx .studio-universe-label {
    --lbl-from: translateX(-14px);
}

/* ========================================================================
   Universe 7 — Candy Pop
   Glossy pink candy with floating sprinkles and a jelly squish.
   ======================================================================== */

.studio-u-7 {
    background: rgba(239, 61, 143, 0.08);
    backdrop-filter: blur(6px) saturate(1.1);
    -webkit-backdrop-filter: blur(6px) saturate(1.1);
    border-color: #c22a72;
    border-radius: var(--radius-pill);
    box-shadow:
        inset 0 3px 4px rgba(255,255,255,.55),
        inset 0 -8px 14px rgba(168,24,96,.5),
        0 6px 20px rgba(239,61,143,.38);
}

.studio-u-7 .studio-universe-label {
    color: #fff;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-shadow:
        0 2px 4px rgba(140, 16, 74, .55),
        0 0 12px rgba(255,255,255,.35);
    animation: studio-jelly 2.8s ease-in-out infinite;
}

@keyframes studio-jelly {
    0%, 100% { transform: translateY(0); }
    30% { transform: translateY(-2px); }
    55% { transform: translateY(1px); }
    75% { transform: translateY(-1px);
    }
}

/* Glossy highlight sweep */
.studio-u-7::before {
    content: "";
    position: absolute;
    top: -60%;
    bottom: -60%;
    width: 34%;
    left: -40%;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent);
    transform: skewX(-18deg);
    animation: studio-gloss-sweep 3.6s ease-in-out infinite;
}

@keyframes studio-gloss-sweep {
    0%, 55% { left: -40%; }
    85%, 100% { left: 110%; }
}

/* Sprinkles (geometry set inline by JS) */
.studio-u-7 .studio-sprinkle {
    position: absolute;
    width: 7px;
    height: 2.5px;
    border-radius: 2px;
    animation: studio-sprinkle-float ease-in-out infinite alternate;
}

@keyframes studio-sprinkle-float {
    from { transform: translateY(0) rotate(var(--sprinkle-rot, 20deg)); }
    to { transform: translateY(-5px) rotate(calc(var(--sprinkle-rot, 20deg) + 14deg)); }
}

.studio-u-7.studio-tx {
    --tx-from: translateY(6px);
    --tx-mid: translateY(-2px);
    --tx-filter-from: brightness(1.6) saturate(1.6);
    --tx-filter-mid: brightness(1.15);
    --tx-clip-from: inset(0 50% 0 50% round var(--radius-pill));
}

/* ========================================================================
   Universe 8 — Blueprint
   Technical drawing: blueprint blue, white linework, dashed border, ticks.
   ======================================================================== */

.studio-u-8 {
    background:
        repeating-linear-gradient(90deg, rgba(214, 232, 255, .18) 0 1px, transparent 1px 18px),
        repeating-linear-gradient(0deg, rgba(214, 232, 255, .18) 0 1px, transparent 1px 18px),
        rgba(214, 232, 255, 0.08);
    backdrop-filter: blur(6px) saturate(1.1);
    -webkit-backdrop-filter: blur(6px) saturate(1.1);
    border: 1px dashed rgba(214, 232, 255, .75);
    border-radius: calc(var(--radius-control) * .35);
    box-shadow:
        inset 0 1px 0 rgba(214,232,255,.14),
        0 4px 18px rgba(9, 26, 54, .5);
}

.studio-u-8 .studio-universe-label {
    color: #d6e8ff;
    font-family: 'JetBrains Mono', ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
}

/* Slow pan across the drawing */
.studio-u-8::before {
    content: "";
    position: absolute;
    inset: -30%;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(90deg, transparent 46%, rgba(214,232,255,.16) 50%, transparent 54%),
        linear-gradient(0deg, transparent 42%, rgba(214,232,255,.10) 50%, transparent 58%);
    animation: studio-blueprint-pan 8s linear infinite alternate;
}

@keyframes studio-blueprint-pan {
    from { transform: translateX(-6%); }
    to { transform: translateX(6%); }
}

/* Ruler ticks along the bottom edge */
.studio-u-8::after {
    content: "";
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 3px;
    height: 5px;
    z-index: 2;
    pointer-events: none;
    background: repeating-linear-gradient(90deg,
        rgba(214,232,255,.6) 0 1px,
        transparent 1px calc(var(--radius-control) * .9));
}

.studio-u-8.studio-tx {
    --tx-from: translateX(-12px);
    --tx-mid: translateX(2px);
    --tx-filter-from: brightness(2) saturate(.3);
    --tx-filter-mid: brightness(1.3);
    --tx-clip-from: inset(0 80% 0 0 round calc(var(--radius-control) * .35));
}

.studio-u-8.studio-tx .studio-universe-label {
    --lbl-from: translateX(-12px);
}

/* ========================================================================
   Universe 9 — Lava Lamp
   Near-black glass with orange/red goo blobs drifting and merging.
   ======================================================================== */

.studio-u-9 {
    background: linear-gradient(180deg, #160b04 0%, #0b0503 100%);
    border-color: rgba(255, 122, 48, .4);
    box-shadow:
        inset 0 1px 0 rgba(255,170,110,.2),
        inset 0 -12px 26px rgba(255, 90, 20, .16),
        0 4px 22px rgba(255, 100, 30, .22);
}

.studio-u-9 .studio-universe-label {
    color: #ffa64d;
    font-weight: 800;
    letter-spacing: 2px;
    text-shadow:
        0 0 14px rgba(255,122,48,.95),
        0 0 28px rgba(255,80,20,.6),
        0 2px 6px rgba(20, 6, 0, .8);
}

/* Goo blobs (geometry set inline by JS) */
.studio-u-9 .studio-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(3px);
    background: radial-gradient(circle at 38% 32%, #ffb066, #ff6a1e 55%, #d63c08);
    animation: studio-blob-drift ease-in-out infinite alternate;
}

@keyframes studio-blob-drift {
    from { transform: translate3d(0, 12%, 0) scale(1); }
    to { transform: translate3d(10%, -46%, 0) scale(1.18); }
}

/* Warm under-glow */
.studio-u-9::before {
    content: "";
    position: absolute;
    inset: auto -10% -45% -10%;
    height: 80%;
    z-index: 1;
    pointer-events: none;
    background: radial-gradient(ellipse 60% 100% at 50% 100%, rgba(255,106,30,.4), transparent 70%);
    animation: studio-lava-glow 4.5s ease-in-out infinite alternate;
}

@keyframes studio-lava-glow {
    from { opacity: .55; }
    to { opacity: 1; }
}

.studio-u-9.studio-tx {
    --tx-from: translateY(16px) scaleY(.5);
    --tx-mid: translateY(-2px) scaleY(1.05);
    --tx-filter-from: brightness(2.2) saturate(1.8) blur(2px);
    --tx-filter-mid: brightness(1.35);
}

/* ========================================================================
   Universe 1 — Neon Grid
   Synthwave wireframe: a glowing perspective grid receding to an amber
   horizon, with a slow scanline sweep. Pure CSS (no decorative layers).
   ======================================================================== */

.studio-u-1 {
    background: rgba(255, 122, 200, 0.08);
    backdrop-filter: blur(6px) saturate(1.1);
    -webkit-backdrop-filter: blur(6px) saturate(1.1);
    border-color: rgba(255, 122, 200, .38);
    box-shadow:
        inset 0 1px 0 rgba(255, 160, 220, .18),
        inset 0 -14px 28px rgba(255, 90, 180, .14),
        0 4px 22px rgba(255, 80, 190, .22);
    overflow: hidden;
}

.studio-u-1 .studio-universe-label {
    color: #ffd9f2;
    font-weight: 800;
    letter-spacing: 2px;
    text-shadow:
        0 0 12px rgba(255, 122, 200, .9),
        0 0 30px rgba(255, 90, 180, .55),
        0 2px 6px rgba(20, 4, 18, .85);
}

/* Perspective grid: two repeating-linear-gradient sheets (vertical +
   horizontal lines) skewed into a floor that recedes to the horizon. */
.studio-u-1::before {
    content: "";
    position: absolute;
    left: -50%;
    right: -50%;
    bottom: -30%;
    height: 90%;
    z-index: 1;
    pointer-events: none;
    background:
        repeating-linear-gradient(90deg, rgba(255, 122, 200, .35) 0 1px, transparent 1px 18px),
        repeating-linear-gradient(0deg, rgba(150, 120, 255, .28) 0 1px, transparent 1px 12px);
    transform: perspective(220px) rotateX(58deg);
    transform-origin: bottom center;
    filter: drop-shadow(0 0 4px rgba(255, 122, 200, .45));
    animation: studio-grid-scroll 3.2s linear infinite;
}

@keyframes studio-grid-scroll {
    from { background-position: 0 0, 0 0; }
    to { background-position: 0 0, 0 12px; }
}

/* Horizon glow + slow scanline sweep. */
.studio-u-1::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        linear-gradient(180deg, transparent 42%, rgba(255, 170, 90, .34) 55%, transparent 66%),
        linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, .06) 50%, transparent 100%);
    background-size: 100% 100%, 100% 220%;
    animation: studio-grid-scan 4.5s ease-in-out infinite;
}

@keyframes studio-grid-scan {
    0%, 100% { background-position: 0 0, 0 -110%; }
    50% { background-position: 0 0, 0 110%; }
}

.studio-u-1.studio-tx {
    --tx-from: translateY(14px) scaleX(.92);
    --tx-mid: translateY(-2px) scaleX(1.03);
    --tx-filter-from: brightness(2.4) saturate(1.6) hue-rotate(12deg);
    --tx-filter-mid: brightness(1.35);
}

/* ========================================================================
   Universe 2 — Nebula
   Deep-space violet/teal gas clouds with drifting twinkling star specks
   (reuses the shared .studio-speck layer spans).
   ======================================================================== */

.studio-u-2 {
    background: rgba(150, 140, 255, 0.08);
    backdrop-filter: blur(6px) saturate(1.1);
    -webkit-backdrop-filter: blur(6px) saturate(1.1);
    border-color: rgba(150, 140, 255, .36);
    box-shadow:
        inset 0 1px 0 rgba(190, 180, 255, .16),
        inset 0 -12px 28px rgba(90, 200, 220, .12),
        0 4px 22px rgba(120, 100, 255, .22);
}

.studio-u-2 .studio-universe-label {
    color: #e6e2ff;
    text-shadow:
        0 0 12px rgba(160, 150, 255, .85),
        0 0 28px rgba(90, 200, 220, .5);
}

/* Gas clouds — two large blurred radial blooms drifting slowly. */
.studio-u-2::before {
    content: "";
    position: absolute;
    inset: -50% -30%;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(ellipse 48% 34% at 30% 38%, rgba(150, 110, 255, .34), transparent 70%),
        radial-gradient(ellipse 42% 30% at 70% 60%, rgba(70, 200, 220, .28), transparent 70%);
    filter: blur(10px);
    animation: studio-nebula-drift 9s ease-in-out infinite alternate;
}

@keyframes studio-nebula-drift {
    from { transform: translate3d(-4%, -3%, 0) scale(1); }
    to { transform: translate3d(5%, 4%, 0) scale(1.1); }
}

/* Distant bright core glow. */
.studio-u-2::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: radial-gradient(ellipse 30% 42% at 56% 50%, rgba(230, 226, 255, .14), transparent 70%);
}

/* Star specks (geometry set inline by JS, shared with Aurora) — gentle drift */
.studio-u-2 .studio-speck {
    position: absolute;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: #e6e2ff;
    animation: studio-speck-drift ease-in-out infinite alternate;
}

.studio-u-2.studio-tx {
    --tx-from: translateY(-14px) scale(1.06);
    --tx-mid: translateY(2px) scale(.99);
    --tx-filter-from: brightness(2.1) saturate(1.4) blur(3px);
    --tx-filter-mid: brightness(1.3);
}

/* ========================================================================
   Universe 10 — Holographic Prism
   Iridescent holographic foil: a rotating conic-gradient rainbow sheen
   over black, a chromatic shimmer sweep, and prismatic edge refraction.
   The label breathes with an RGB-split chromatic-aberration text-shadow.
   ======================================================================== */

.studio-u-10 {
    background:
        radial-gradient(ellipse 70% 120% at 50% 50%, rgba(255,255,255,.04), transparent 70%),
        rgba(180, 200, 255, 0.08);
    backdrop-filter: blur(6px) saturate(1.1);
    -webkit-backdrop-filter: blur(6px) saturate(1.1);
    border-color: rgba(180, 200, 255, .25);
    box-shadow:
        inset 0 1px 0 rgba(220, 230, 255, .14),
        inset 0 -10px 24px rgba(60, 80, 160, .18),
        0 4px 22px rgba(120, 90, 220, .22);
    overflow: hidden;
}

.studio-u-10 .studio-universe-label {
    color: #f4f6ff;
    font-weight: 800;
    letter-spacing: 3px;
    text-shadow:
        -1.5px 0 rgba(255, 60, 120, .85),
        1.5px 0 rgba(60, 220, 255, .85),
        0 0 14px rgba(180, 140, 255, .6);
    animation: studio-prism-breathe 3.2s ease-in-out infinite;
}

@keyframes studio-prism-breathe {
    0%, 100% { letter-spacing: 3px; }
    50% { letter-spacing: 4.5px; }
}

/* Rotating conic-gradient rainbow foil */
.studio-u-10::before {
    content: "";
    position: absolute;
    inset: -60%;
    z-index: 1;
    pointer-events: none;
    background: conic-gradient(
        from 0deg at 50% 50%,
        rgba(255, 60, 120, .32),
        rgba(255, 200, 60, .26),
        rgba(120, 255, 140, .30),
        rgba(60, 220, 255, .32),
        rgba(160, 100, 255, .30),
        rgba(255, 60, 120, .32));
    filter: blur(8px);
    mix-blend-mode: screen;
    animation: studio-prism-rotate 8s linear infinite;
}

@keyframes studio-prism-rotate {
    from { transform: rotate(0deg) scale(1.1); }
    to { transform: rotate(360deg) scale(1.1); }
}

/* Chromatic shimmer sweep — a skewed translucent band crossing the foil */
.studio-u-10::after {
    content: "";
    position: absolute;
    top: -80%;
    bottom: -80%;
    width: 40%;
    left: -50%;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(100deg,
        transparent,
        rgba(255, 100, 180, .22) 30%,
        rgba(120, 255, 220, .28) 50%,
        rgba(180, 120, 255, .22) 70%,
        transparent);
    transform: skewX(-22deg);
    mix-blend-mode: screen;
    animation: studio-prism-sweep 4.5s ease-in-out infinite;
}

@keyframes studio-prism-sweep {
    0%, 60% { left: -50%; }
    90%, 100% { left: 110%; }
}

.studio-u-10.studio-tx {
    --tx-from: scale(.6) rotate(-8deg);
    --tx-mid: scale(1.04) rotate(2deg);
    --tx-filter-from: brightness(2.6) saturate(2.2) hue-rotate(40deg);
    --tx-filter-mid: brightness(1.3) saturate(1.3);
}

/* ========================================================================
   Universe 11 — Kintsugi
   Japanese golden-repair ceramics: deep obsidian ceramic with luminous gold
   crack veins and a slow shimmer rolling across the gold. Wabi-sabi luxury.
   ======================================================================== */

.studio-u-11 {
    background:
        radial-gradient(ellipse 60% 80% at 30% 20%, rgba(60, 50, 40, .5), transparent 60%),
        radial-gradient(ellipse 70% 90% at 80% 90%, rgba(40, 30, 25, .6), transparent 65%),
        rgba(212, 175, 55, 0.08);
    backdrop-filter: blur(6px) saturate(1.1);
    -webkit-backdrop-filter: blur(6px) saturate(1.1);
    border-color: rgba(212, 175, 55, .35);
    box-shadow:
        inset 0 1px 0 rgba(212, 175, 55, .14),
        inset 0 -10px 24px rgba(0, 0, 0, .6),
        0 4px 18px rgba(0, 0, 0, .5);
}

.studio-u-11 .studio-universe-label {
    color: #f0d98a;
    font-weight: 700;
    letter-spacing: 2px;
    text-shadow:
        0 0 10px rgba(212, 175, 55, .7),
        0 0 22px rgba(180, 140, 40, .4),
        0 2px 4px rgba(10, 8, 5, .9);
}

/* Gold crack veins — sharp angular linear-gradient fractures with glow */
.studio-u-11::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(115deg, transparent 38%, rgba(240, 200, 90, .85) 39%, rgba(240, 200, 90, .85) 39.4%, transparent 40%),
        linear-gradient(72deg, transparent 22%, rgba(220, 180, 70, .7) 23%, rgba(220, 180, 70, .7) 23.3%, transparent 24%),
        linear-gradient(128deg, transparent 58%, rgba(200, 160, 55, .6) 59%, rgba(200, 160, 55, .6) 59.3%, transparent 60%),
        linear-gradient(95deg, transparent 72%, rgba(230, 190, 80, .75) 73%, rgba(230, 190, 80, .75) 73.4%, transparent 74%);
    filter: drop-shadow(0 0 3px rgba(240, 200, 90, .8)) drop-shadow(0 0 6px rgba(212, 175, 55, .4));
    animation: studio-kintsugi-shimmer 6s ease-in-out infinite alternate;
}

@keyframes studio-kintsugi-shimmer {
    0% { opacity: .7; filter: drop-shadow(0 0 2px rgba(240, 200, 90, .5)) brightness(.9); }
    100% { opacity: 1; filter: drop-shadow(0 0 4px rgba(240, 200, 90, .95)) drop-shadow(0 0 8px rgba(212, 175, 55, .6)) brightness(1.2); }
}

/* Warm ceramic sheen rolling across the surface */
.studio-u-11::after {
    content: "";
    position: absolute;
    top: -60%;
    bottom: -60%;
    width: 30%;
    left: -45%;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(100deg, transparent, rgba(255, 230, 150, .18), transparent);
    transform: skewX(-16deg);
    animation: studio-kintsugi-sheen 7s ease-in-out infinite;
}

@keyframes studio-kintsugi-sheen {
    0%, 55% { left: -45%; }
    85%, 100% { left: 115%; }
}

.studio-u-11.studio-tx {
    --tx-from: translateY(12px) scaleY(.4);
    --tx-mid: translateY(-2px) scaleY(1.06);
    --tx-filter-from: brightness(2.2) saturate(1.8);
    --tx-filter-mid: brightness(1.3);
}

/* ========================================================================
   Universe 12 — Ember Forge
   A blacksmith's forge at night: pulsing forge glow at the base, many tiny
   rising ember sparks that flicker and fade as they climb, and a heat-shimmer
   distortion. Romantic, dangerous warmth. (Embers are JS-injected spans.)
   ======================================================================== */

.studio-u-12 {
    background:
        radial-gradient(ellipse 80% 50% at 50% 100%, rgba(255, 90, 20, .22), transparent 60%),
        rgba(255, 120, 40, 0.08);
    backdrop-filter: blur(6px) saturate(1.1);
    -webkit-backdrop-filter: blur(6px) saturate(1.1);
    border-color: rgba(255, 120, 40, .35);
    box-shadow:
        inset 0 1px 0 rgba(255, 160, 80, .16),
        inset 0 -14px 28px rgba(255, 70, 15, .14),
        0 4px 22px rgba(255, 90, 20, .2);
    overflow: hidden;
}

.studio-u-12 .studio-universe-label {
    color: #ffb066;
    font-weight: 800;
    letter-spacing: 2px;
    text-shadow:
        0 0 12px rgba(255, 120, 40, .9),
        0 0 24px rgba(255, 80, 20, .5),
        0 2px 6px rgba(15, 5, 0, .9);
}

/* Pulsing forge glow at the base */
.studio-u-12::before {
    content: "";
    position: absolute;
    inset: auto -15% -50% -15%;
    height: 80%;
    z-index: 1;
    pointer-events: none;
    background: radial-gradient(ellipse 70% 100% at 50% 100%, rgba(255, 100, 30, .5), rgba(255, 60, 10, .2) 50%, transparent 75%);
    animation: studio-forge-pulse 3.4s ease-in-out infinite alternate;
}

@keyframes studio-forge-pulse {
    from { opacity: .5; transform: scaleY(.95); }
    to { opacity: 1; transform: scaleY(1.08); }
}

/* Heat shimmer distortion — a faint wavy band above the forge */
.studio-u-12::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 18%;
    height: 40%;
    z-index: 1;
    pointer-events: none;
    background: repeating-linear-gradient(180deg,
        transparent 0,
        transparent 3px,
        rgba(255, 140, 50, .04) 4px,
        transparent 5px);
    animation: studio-heat-shimmer 2.2s ease-in-out infinite;
}

@keyframes studio-heat-shimmer {
    0%, 100% { transform: translateX(-2px); }
    50% { transform: translateX(2px); }
}

/* Rising ember sparks (geometry set inline by JS) */
.studio-u-12 .studio-ember {
    position: absolute;
    bottom: -6px;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 35%, #fff0c8, #ffb050 50%, #ff6020 80%, transparent);
    box-shadow: 0 0 6px rgba(255, 130, 40, .8), 0 0 12px rgba(255, 90, 20, .5);
    animation: studio-ember-rise linear infinite;
}

@keyframes studio-ember-rise {
    0% { transform: translateY(0) translateX(0); opacity: 0; }
    10% { opacity: 1; }
    40% { opacity: .8; }
    70% { opacity: .4; }
    100% { transform: translateY(-58px) translateX(4px); opacity: 0; }
}

.studio-u-12.studio-tx {
    --tx-from: translateY(16px) scaleY(.5);
    --tx-mid: translateY(-2px) scaleY(1.05);
    --tx-filter-from: brightness(2.4) saturate(1.8) blur(2px);
    --tx-filter-mid: brightness(1.35);
}

/* ========================================================================
   Universe 13 — Crystal Geode
   Looking into a cut geode: translucent faceted conic-gradient panels with
   prismatic drop-shadow edges, a slow-rotating internal core glow, and
   refractive spectral highlights sweeping the facets.
   ======================================================================== */

.studio-u-13 {
    background:
        radial-gradient(ellipse 60% 70% at 50% 50%, rgba(90, 60, 160, .25), transparent 65%),
        linear-gradient(180deg, #0e0820 0%, #060410 100%);
    border-color: rgba(150, 120, 255, .4);
    box-shadow:
        inset 0 1px 0 rgba(190, 170, 255, .2),
        inset 0 -10px 24px rgba(60, 40, 120, .25),
        0 4px 22px rgba(120, 90, 220, .3);
}

.studio-u-13 .studio-universe-label {
    color: #e8e0ff;
    font-weight: 700;
    letter-spacing: 2px;
    text-shadow:
        0 0 10px rgba(180, 150, 255, .85),
        0 0 22px rgba(120, 90, 220, .5),
        0 2px 6px rgba(8, 4, 20, .9);
}

/* Faceted conic-gradient panels with prismatic edges */
.studio-u-13::before {
    content: "";
    position: absolute;
    inset: -30%;
    z-index: 1;
    pointer-events: none;
    background: conic-gradient(
        from 0deg at 50% 50%,
        rgba(120, 90, 220, .35),
        rgba(70, 180, 220, .25),
        rgba(180, 120, 240, .3),
        rgba(90, 130, 200, .28),
        rgba(150, 90, 200, .32),
        rgba(120, 90, 220, .35));
    filter: blur(2px) drop-shadow(0 0 6px rgba(180, 150, 255, .5));
    -webkit-mask: repeating-conic-gradient(from 0deg at 50% 50%, #000 0 45deg, transparent 45deg 60deg);
    mask: repeating-conic-gradient(from 0deg at 50% 50%, #000 0 45deg, transparent 45deg 60deg);
    animation: studio-crystal-rotate 12s linear infinite;
}

@keyframes studio-crystal-rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Slow-rotating internal core glow + refractive sweep */
.studio-u-13::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        radial-gradient(ellipse 30% 40% at 50% 50%, rgba(220, 200, 255, .25), transparent 70%),
        linear-gradient(110deg, transparent 40%, rgba(180, 150, 255, .18) 50%, transparent 60%);
    mix-blend-mode: screen;
    animation: studio-cractal-core 5s ease-in-out infinite alternate;
}

@keyframes studio-cractal-core {
    0% { transform: rotate(0deg) scale(1); opacity: .6; }
    100% { transform: rotate(180deg) scale(1.15); opacity: 1; }
}

.studio-u-13.studio-tx {
    --tx-from: perspective(300px) rotateY(-80deg);
    --tx-mid: perspective(300px) rotateY(12deg);
    --tx-filter-from: brightness(2.4) saturate(1.6);
    --tx-filter-mid: brightness(1.3);
}

/* ========================================================================
   Universe 14 — Rain Window
   Cinematic rainy night through glass: rain streaks running down (droplets
   form, accelerate, trail, fade) behind a soft bokeh of distant city lights.
   Moody and filmic. (Raindrops are JS-injected spans.)
   ======================================================================== */

.studio-u-14 {
    background:
        radial-gradient(circle at 20% 30%, rgba(255, 180, 80, .14), transparent 18%),
        radial-gradient(circle at 75% 25%, rgba(255, 140, 60, .1), transparent 14%),
        radial-gradient(circle at 55% 70%, rgba(120, 200, 255, .12), transparent 16%),
        radial-gradient(circle at 85% 75%, rgba(255, 200, 100, .08), transparent 12%),
        rgba(120, 180, 230, 0.08);
    backdrop-filter: blur(6px) saturate(1.1);
    -webkit-backdrop-filter: blur(6px) saturate(1.1);
    border-color: rgba(120, 180, 230, .3);
    box-shadow:
        inset 0 1px 0 rgba(160, 210, 255, .16),
        inset 0 -10px 24px rgba(20, 40, 70, .4),
        0 4px 22px rgba(30, 60, 100, .3);
    overflow: hidden;
}

.studio-u-14 .studio-universe-label {
    color: #d4e8ff;
    font-weight: 700;
    letter-spacing: 2px;
    text-shadow:
        0 0 10px rgba(120, 180, 230, .7),
        0 0 20px rgba(80, 140, 200, .4),
        0 2px 6px rgba(5, 10, 20, .9);
}

/* Soft bokeh blur of distant city lights drifting */
.studio-u-14::before {
    content: "";
    position: absolute;
    inset: -20%;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(circle at 20% 30%, rgba(255, 180, 80, .2), transparent 20%),
        radial-gradient(circle at 75% 25%, rgba(255, 140, 60, .14), transparent 16%),
        radial-gradient(circle at 55% 70%, rgba(120, 200, 255, .16), transparent 18%),
        radial-gradient(circle at 85% 75%, rgba(255, 200, 100, .12), transparent 14%);
    filter: blur(6px);
    animation: studio-bokeh-drift 14s ease-in-out infinite alternate;
}

@keyframes studio-bokeh-drift {
    from { transform: translate3d(-3%, -2%, 0) scale(1); }
    to { transform: translate3d(4%, 3%, 0) scale(1.08); }
}

/* Glass frost sheen — a faint diagonal haze over the pane */
.studio-u-14::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(135deg, transparent 40%, rgba(180, 220, 255, .06) 50%, transparent 60%);
    animation: studio-frost-sheen 9s ease-in-out infinite;
}

@keyframes studio-frost-sheen {
    0%, 100% { opacity: .4; }
    50% { opacity: .8; }
}

/* Raindrops running down glass (geometry set inline by JS) */
.studio-u-14 .studio-raindrop {
    position: absolute;
    top: -10px;
    width: 1.5px;
    height: 14px;
    border-radius: 2px;
    background: linear-gradient(180deg, transparent, rgba(200, 230, 255, .7) 40%, rgba(220, 240, 255, .9) 80%, transparent);
    box-shadow: 0 0 3px rgba(160, 210, 255, .5);
    animation: studio-raindrop-fall linear infinite;
}

@keyframes studio-raindrop-fall {
    0% { transform: translateY(0); height: 4px; opacity: 0; }
    12% { opacity: .9; height: 12px; }
    30% { height: 18px; opacity: 1; }
    70% { height: 22px; opacity: .8; }
    90% { opacity: .3; }
    100% { transform: translateY(64px); height: 8px; opacity: 0; }
}

.studio-u-14.studio-tx {
    --tx-from: translateY(-16px) scaleY(1.3);
    --tx-mid: translateY(2px) scaleY(.97);
    --tx-filter-from: brightness(1.9) saturate(.5) blur(3px);
    --tx-filter-mid: brightness(1.2);
}

/* ========================================================================
   Universe 15 — Solar Corona
   A total solar eclipse: a black moon disc with a blazing white-gold corona
   radiating outward, licking solar flares, and rotating prominence rays.
   ======================================================================== */

.studio-u-15 {
    background:
        radial-gradient(ellipse 55% 65% at 50% 50%, rgba(8, 8, 16, .55), transparent 65%),
        rgba(255, 240, 200, 0.08);
    backdrop-filter: blur(6px) saturate(1.1);
    -webkit-backdrop-filter: blur(6px) saturate(1.1);
    border-color: rgba(255, 240, 200, .3);
    box-shadow:
        inset 0 1px 0 rgba(255, 240, 200, .16),
        inset 0 -10px 24px rgba(40, 30, 10, .3),
        0 0 18px rgba(255, 220, 150, .25),
        0 4px 22px rgba(0, 0, 0, .5);
    overflow: hidden;
}

.studio-u-15 .studio-universe-label {
    color: #fff4d6;
    font-weight: 700;
    letter-spacing: 3px;
    text-shadow:
        0 0 12px rgba(255, 230, 160, .95),
        0 0 26px rgba(255, 180, 80, .5),
        0 2px 6px rgba(5, 5, 10, .9);
}

/* Blazing corona radiating outward + rotating prominence rays */
.studio-u-15::before {
    content: "";
    position: absolute;
    inset: -40%;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 50%, rgba(255, 245, 200, .9) 18%, rgba(255, 220, 140, .4) 22%, rgba(255, 180, 80, .2) 30%, transparent 45%),
        conic-gradient(from 0deg at 50% 50%,
            transparent 0deg, rgba(255, 230, 150, .25) 8deg, transparent 16deg,
            transparent 30deg, rgba(255, 220, 130, .2) 38deg, transparent 46deg,
            transparent 60deg, rgba(255, 240, 170, .28) 68deg, transparent 76deg,
            transparent 90deg, rgba(255, 210, 120, .22) 98deg, transparent 106deg,
            transparent 120deg, rgba(255, 235, 160, .26) 128deg, transparent 136deg,
            transparent 150deg, rgba(255, 220, 130, .2) 158deg, transparent 166deg,
            transparent 180deg, rgba(255, 240, 170, .24) 188deg, transparent 196deg,
            transparent 210deg, rgba(255, 215, 125, .22) 218deg, transparent 226deg,
            transparent 240deg, rgba(255, 235, 160, .26) 248deg, transparent 256deg,
            transparent 270deg, rgba(255, 220, 130, .2) 278deg, transparent 286deg,
            transparent 300deg, rgba(255, 240, 170, .24) 308deg, transparent 316deg,
            transparent 330deg, rgba(255, 215, 125, .22) 338deg, transparent 346deg);
    filter: drop-shadow(0 0 8px rgba(255, 220, 140, .6));
    animation: studio-corona-rotate 16s linear infinite;
}

@keyframes studio-corona-rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Black moon disc + licking solar flares */
.studio-u-15::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 38%;
    aspect-ratio: 1;
    z-index: 2;
    pointer-events: none;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, #000 70%, rgba(0,0,0,.85) 78%, transparent 82%);
    box-shadow:
        0 0 12px 4px rgba(255, 230, 150, .9),
        0 0 28px 8px rgba(255, 190, 90, .5),
        0 0 50px 14px rgba(255, 150, 60, .25);
}

.studio-u-15.studio-tx {
    --tx-from: scale(.3);
    --tx-mid: scale(1.08);
    --tx-filter-from: brightness(3) saturate(.4);
    --tx-filter-mid: brightness(1.4);
}

/* ========================================================================
   Universe 16 — Stained Glass
   A leaded stained-glass window: geometric translucent color panels divided
   by dark lead lines, with light slowly shifting through the panes.
   ======================================================================== */

.studio-u-16 {
    background:
        linear-gradient(115deg, rgba(180, 40, 80, .55) 0%, rgba(180, 40, 80, .55) 33%, transparent 33.5%),
        linear-gradient(115deg, transparent 33%, rgba(40, 80, 160, .55) 33.5%, rgba(40, 80, 160, .55) 66%, transparent 66.5%),
        linear-gradient(115deg, transparent 66%, rgba(180, 140, 40, .55) 66.5%, rgba(180, 140, 40, .55) 100%),
        linear-gradient(245deg, rgba(60, 140, 80, .5) 0%, rgba(60, 140, 80, .5) 50%, transparent 50.5%),
        linear-gradient(245deg, transparent 50%, rgba(120, 60, 140, .5) 50.5%, rgba(120, 60, 140, .5) 100%),
        rgba(180, 140, 40, 0.08);
    backdrop-filter: blur(6px) saturate(1.1);
    -webkit-backdrop-filter: blur(6px) saturate(1.1);
    border: 1.5px solid rgba(20, 20, 28, .9);
    border-radius: calc(var(--radius-control) * .5);
    box-shadow:
        inset 0 0 0 1px rgba(20, 20, 28, .9),
        inset 0 1px 0 rgba(255, 255, 255, .14),
        0 4px 18px rgba(0, 0, 0, .5);
}

.studio-u-16 .studio-universe-label {
    color: #f0e8d0;
    font-weight: 700;
    letter-spacing: 2px;
    text-shadow:
        0 0 8px rgba(255, 230, 180, .6),
        0 2px 4px rgba(10, 10, 20, .95);
}

/* Lead dividing lines + light shifting through the panes */
.studio-u-16::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(115deg, transparent 33%, rgba(15, 15, 22, .95) 33%, rgba(15, 15, 22, .95) 33.5%, transparent 33.5%),
        linear-gradient(115deg, transparent 66%, rgba(15, 15, 22, .95) 66%, rgba(15, 15, 22, .95) 66.5%, transparent 66.5%),
        linear-gradient(245deg, transparent 50%, rgba(15, 15, 22, .95) 50%, rgba(15, 15, 22, .95) 50.5%, transparent 50.5%),
        linear-gradient(180deg, rgba(255, 240, 180, .12) 0%, transparent 50%);
    animation: studio-stained-light 7s ease-in-out infinite alternate;
}

@keyframes studio-stained-light {
    0% { filter: brightness(.9) hue-rotate(0deg); }
    100% { filter: brightness(1.2) hue-rotate(12deg); }
}

/* Outer lead frame edge */
.studio-u-16::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    border: 1px solid rgba(15, 15, 22, .9);
    border-radius: calc(var(--radius-control) * .5);
}

.studio-u-16.studio-tx {
    --tx-from: translateY(-14px) scaleY(1.4);
    --tx-mid: translateY(2px) scaleY(.96);
    --tx-filter-from: brightness(2.4) saturate(1.6);
    --tx-filter-mid: brightness(1.3);
}

/* ========================================================================
   Universe 17 — VHS Glitch
   Analog tape decay: chromatic-aberration bands that jitter, horizontal
   hold-sync displacement glitches, tracking-noise bars sweeping, and a label
   that stutters with periodic glitch skips.
   ======================================================================== */

.studio-u-17 {
    background:
        repeating-linear-gradient(180deg,
            rgba(255, 255, 255, .02) 0 1px,
            transparent 1px 3px),
        linear-gradient(180deg, #14101a 0%, #0a0810 100%);
    border-color: rgba(200, 160, 220, .3);
    box-shadow:
        inset 0 1px 0 rgba(220, 200, 240, .14),
        inset 0 -10px 24px rgba(60, 40, 80, .25),
        0 4px 22px rgba(80, 60, 120, .22);
    overflow: hidden;
}

.studio-u-17 .studio-universe-label {
    color: #e8dcf0;
    font-weight: 700;
    letter-spacing: 2px;
    text-shadow:
        -2px 0 rgba(255, 60, 120, .8),
        2px 0 rgba(60, 220, 255, .8),
        0 0 8px rgba(180, 140, 220, .5);
}

/* Chromatic-aberration bands — gentle horizontal drift (no jitter) */
.studio-u-17::before {
    content: "";
    position: absolute;
    inset: -10%;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(90deg,
            rgba(255, 60, 120, .14) 0%,
            transparent 2%,
            transparent 98%,
            rgba(60, 220, 255, .14) 100%),
        repeating-linear-gradient(180deg,
            transparent 0 20px,
            rgba(255, 255, 255, .03) 20px 22px);
    animation: studio-glitch-drift-x 5s ease-in-out infinite alternate;
}

@keyframes studio-glitch-drift-x {
    from { transform: translateX(-2px); }
    to { transform: translateX(2px); }
}

/* Tracking bars — slow vertical drift (no hold-sync jumps) */
.studio-u-17::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        linear-gradient(180deg, transparent 30%, rgba(255, 255, 255, .08) 31%, transparent 32%),
        linear-gradient(180deg, transparent 60%, rgba(255, 60, 120, .1) 61%, transparent 62%);
    background-size: 100% 100%, 100% 100%;
    animation: studio-glitch-drift-y 10s ease-in-out infinite alternate;
}

@keyframes studio-glitch-drift-y {
    from { transform: translateY(-2%); }
    to { transform: translateY(2%); }
}

.studio-u-17.studio-tx {
    --tx-from: translateX(-8px) skewX(-3deg);
    --tx-mid: translateX(2px) skewX(1deg);
    --tx-filter-from: brightness(2.4) saturate(2) hue-rotate(20deg);
    --tx-filter-mid: brightness(1.3) saturate(1.3);
}

/* ========================================================================
   Universe 18 — Bioluminescent Abyss
   Deep-sea darkness with drifting bioluminescent particles that pulse on and
   off, faint jellyfish-tentacle tendrils swaying, and a neural-node flicker.
   Ethereal alien life. (Glows are JS-injected spans.)
   ======================================================================== */

.studio-u-18 {
    background:
        radial-gradient(ellipse 80% 100% at 50% 0%, rgba(10, 40, 70, .4), transparent 60%),
        radial-gradient(ellipse 70% 80% at 30% 100%, rgba(20, 60, 90, .3), transparent 65%),
        rgba(80, 220, 200, 0.08);
    backdrop-filter: blur(6px) saturate(1.1);
    -webkit-backdrop-filter: blur(6px) saturate(1.1);
    border-color: rgba(80, 220, 200, .3);
    box-shadow:
        inset 0 1px 0 rgba(120, 230, 210, .14),
        inset 0 -12px 28px rgba(10, 30, 50, .5),
        0 4px 22px rgba(20, 80, 100, .22);
    overflow: hidden;
}

.studio-u-18 .studio-universe-label {
    color: #aef5e8;
    font-weight: 700;
    letter-spacing: 2px;
    text-shadow:
        0 0 10px rgba(80, 230, 200, .8),
        0 0 22px rgba(40, 180, 200, .45),
        0 2px 6px rgba(1, 4, 10, .95);
}

/* Faint jellyfish-tentacle tendrils swaying in the current */
.studio-u-18::before {
    content: "";
    position: absolute;
    inset: -20%;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(ellipse 6% 40% at 24% 0%, rgba(120, 230, 210, .22), transparent 60%),
        radial-gradient(ellipse 5% 36% at 62% 0%, rgba(80, 200, 230, .18), transparent 60%),
        radial-gradient(ellipse 4% 32% at 84% 0%, rgba(140, 240, 220, .16), transparent 60%);
    filter: blur(4px);
    animation: studio-abyss-current 8s ease-in-out infinite alternate;
}

@keyframes studio-abyss-current {
    from { transform: skewX(-3deg) translateY(-2%); }
    to { transform: skewX(3deg) translateY(2%); }
}

/* Deep glow halo behind the drifting particles */
.studio-u-18::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: radial-gradient(ellipse 50% 60% at 50% 60%, rgba(40, 120, 140, .18), transparent 70%);
    animation: studio-abyss-halo 5s ease-in-out infinite alternate;
}

@keyframes studio-abyss-halo {
    from { opacity: .5; }
    to { opacity: 1; }
}

/* Bioluminescent particles (geometry set inline by JS) */
.studio-u-18 .studio-glow {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%, #c8fff0, rgba(80, 230, 200, .5) 40%, transparent 70%);
    box-shadow: 0 0 8px rgba(80, 230, 200, .7), 0 0 16px rgba(40, 180, 200, .4);
    mix-blend-mode: screen;
    animation: studio-glow-pulse ease-in-out infinite;
}

@keyframes studio-glow-pulse {
    0%, 100% { opacity: 0; transform: scale(.6); }
    50% { opacity: 1; transform: scale(1.2); }
}

.studio-u-18.studio-tx {
    --tx-from: translateY(-14px) scaleY(.5);
    --tx-mid: translateY(2px) scaleY(1.06);
    --tx-filter-from: brightness(2.4) saturate(1.6) blur(3px);
    --tx-filter-mid: brightness(1.35);
}

/* ========================================================================
   Universe 19 — Analog Snow
   Black-and-white TV white-noise dither with a horizontal sync-roll drift,
   periodic ghost frames, and a faint scanline crawl. Haunting dead-channel
   aesthetic.
   ======================================================================== */

.studio-u-19 {
    background:
        repeating-linear-gradient(0deg, rgba(160, 160, 160, .16) 0 1px, rgba(80, 80, 80, .12) 1px 2px),
        repeating-linear-gradient(90deg, rgba(170, 170, 170, .16) 0 1px, rgba(80, 80, 80, .10) 1px 2px),
        rgba(200, 200, 200, 0.08);
    backdrop-filter: blur(6px) saturate(1.1);
    -webkit-backdrop-filter: blur(6px) saturate(1.1);
    border-color: rgba(200, 200, 200, .25);
    box-shadow:
        inset 0 1px 0 rgba(220, 220, 220, .14),
        inset 0 -10px 24px rgba(0, 0, 0, .6),
        0 4px 18px rgba(0, 0, 0, .5);
    overflow: hidden;
}

.studio-u-19 .studio-universe-label {
    color: #e0e0e0;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    text-shadow:
        0 0 6px rgba(220, 220, 220, .5),
        0 2px 4px rgba(0, 0, 0, .9);
}

/* Sync-roll drift: the noise hash scrolls vertically at a slow, uneven rate */
.studio-u-19::before {
    content: "";
    position: absolute;
    inset: -10%;
    z-index: 1;
    pointer-events: none;
    background:
        repeating-linear-gradient(0deg,
            rgba(220, 220, 220, .08) 0 1px,
            transparent 1px 2px,
            rgba(200, 200, 200, .06) 2px 3px,
            transparent 3px 4px),
        repeating-linear-gradient(90deg,
            rgba(200, 200, 200, .05) 0 1px,
            transparent 1px 3px);
    animation: studio-snow-roll 0.6s steps(4) infinite, studio-snow-sync 7s ease-in-out infinite;
}

@keyframes studio-snow-roll {
    from { background-position: 0 0, 0 0; }
    to { background-position: 0 -4px, 0 -3px; }
}

@keyframes studio-snow-sync {
    0%, 70%, 100% { transform: translateY(0); }
    72% { transform: translateY(-6px); }
    74% { transform: translateY(4px); }
    76% { transform: translateY(-2px); }
    78% { transform: translateY(0); }
}

/* Scanline crawl + periodic ghost frame (a brighter band skipping) */
.studio-u-19::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        linear-gradient(180deg, transparent 30%, rgba(255, 255, 255, .1) 31%, transparent 33%),
        linear-gradient(180deg, transparent 55%, rgba(255, 255, 255, .06) 56%, transparent 58%);
    animation: studio-snow-scan 3.5s steps(1) infinite;
}

@keyframes studio-snow-scan {
    0%, 60%, 100% { transform: translateY(0); opacity: .6; }
    62% { transform: translateY(-8px); opacity: 1; }
    64% { transform: translateY(6px); opacity: .8; }
    66% { transform: translateY(0); opacity: .6; }
}

.studio-u-19.studio-tx {
    --tx-from: scaleY(.1);
    --tx-mid: scaleY(1.1);
    --tx-filter-from: brightness(2.4) saturate(0);
    --tx-filter-mid: brightness(1.3);
}

/* ========================================================================
   Universe 20 — Sakura Drift
   Falling cherry blossom petals tumbling diagonally over a warm pink
   gradient, with dappled golden light shifting through unseen branches.
   Romantic, seasonal, painterly. (Petals are JS-injected spans.)
   ======================================================================== */

.studio-u-20 {
    background:
        radial-gradient(ellipse 60% 50% at 30% 20%, rgba(255, 220, 230, .3), transparent 65%),
        radial-gradient(ellipse 70% 60% at 75% 80%, rgba(255, 200, 180, .25), transparent 70%),
        rgba(220, 130, 160, 0.08);
    backdrop-filter: blur(6px) saturate(1.1);
    -webkit-backdrop-filter: blur(6px) saturate(1.1);
    border-color: rgba(220, 130, 160, .45);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .9),
        inset 0 -8px 16px rgba(220, 130, 160, .18),
        0 6px 18px rgba(200, 100, 130, .25);
    overflow: hidden;
}

.studio-u-20 .studio-universe-label {
    color: #b04060;
    font-weight: 700;
    letter-spacing: 2px;
    text-shadow:
        0 1px 0 rgba(255, 255, 255, .8),
        0 2px 4px rgba(180, 80, 110, .3);
}

/* Dappled golden light shifting through unseen branches */
.studio-u-20::before {
    content: "";
    position: absolute;
    inset: -30%;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(circle at 20% 30%, rgba(255, 230, 160, .28), transparent 18%),
        radial-gradient(circle at 65% 25%, rgba(255, 220, 140, .22), transparent 16%),
        radial-gradient(circle at 45% 70%, rgba(255, 240, 180, .2), transparent 20%),
        radial-gradient(circle at 85% 75%, rgba(255, 220, 150, .18), transparent 14%);
    filter: blur(4px);
    animation: studio-sakura-dapple 9s ease-in-out infinite alternate;
}

@keyframes studio-sakura-dapple {
    from { transform: translate3d(-4%, -3%, 0) scale(1); }
    to { transform: translate3d(5%, 4%, 0) scale(1.1); }
}

/* Warm soft glow over the whole surface */
.studio-u-20::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: radial-gradient(ellipse 70% 90% at 50% 50%, rgba(255, 240, 220, .2), transparent 75%);
    animation: studio-sakura-glow 6s ease-in-out infinite alternate;
}

@keyframes studio-sakura-glow {
    from { opacity: .5; }
    to { opacity: 1; }
}

/* Falling petals (geometry set inline by JS) */
.studio-u-20 .studio-petal {
    position: absolute;
    top: -12px;
    width: 8px;
    height: 6px;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    background: radial-gradient(ellipse at 50% 30%, #ffd0e0, #ff9fb8 70%, #ff7aa0);
    box-shadow: 0 1px 3px rgba(200, 100, 130, .3);
    animation: studio-petal-fall linear infinite;
}

@keyframes studio-petal-fall {
    0% {
        transform: translateY(0) translateX(0) rotate(var(--petal-rot, 0deg));
        opacity: 0;
    }
    10% { opacity: 1; }
    50% {
        transform: translateY(32px) translateX(8px) rotate(calc(var(--petal-rot, 0deg) + 180deg));
    }
    90% { opacity: 1; }
    100% {
        transform: translateY(64px) translateX(-4px) rotate(calc(var(--petal-rot, 0deg) + 360deg));
        opacity: 0;
    }
}

.studio-u-20.studio-tx {
    --tx-from: translateY(-14px) scale(1.1);
    --tx-mid: translateY(2px) scale(.98);
    --tx-filter-from: brightness(1.5) saturate(1.6) blur(2px);
    --tx-filter-mid: brightness(1.1);
}

/* ========================================================================
   Universe 21 — Spiral Galaxy
   A top-down spiral galaxy: rotating spiral arms (conic-gradient with dust
   lanes), a blazing bright core, and scattered foreground stars. Cosmic
   grandeur.
   ======================================================================== */

.studio-u-21 {
    background:
        radial-gradient(ellipse 80% 90% at 50% 50%, rgba(40, 30, 80, .3), transparent 70%),
        rgba(180, 160, 255, 0.08);
    backdrop-filter: blur(6px) saturate(1.1);
    -webkit-backdrop-filter: blur(6px) saturate(1.1);
    border-color: rgba(180, 160, 255, .3);
    box-shadow:
        inset 0 1px 0 rgba(200, 180, 255, .16),
        inset 0 -12px 28px rgba(40, 30, 80, .3),
        0 4px 22px rgba(100, 80, 200, .25);
    overflow: hidden;
}

.studio-u-21 .studio-universe-label {
    color: #f0e8ff;
    font-weight: 700;
    letter-spacing: 2px;
    text-shadow:
        0 0 10px rgba(200, 180, 255, .85),
        0 0 22px rgba(140, 120, 240, .5),
        0 2px 6px rgba(5, 4, 16, .95);
}

/* Rotating spiral arms — a conic-gradient masked to a pinwheel shape */
.studio-u-21::before {
    content: "";
    position: absolute;
    inset: -40%;
    z-index: 1;
    pointer-events: none;
    background: conic-gradient(
        from 0deg at 50% 50%,
        rgba(180, 140, 255, .4) 0deg,
        rgba(120, 100, 220, .2) 30deg,
        transparent 60deg,
        rgba(160, 120, 240, .35) 120deg,
        rgba(100, 80, 200, .18) 150deg,
        transparent 180deg,
        rgba(200, 160, 255, .4) 240deg,
        rgba(130, 110, 230, .2) 270deg,
        transparent 300deg,
        rgba(180, 140, 255, .35) 360deg);
    filter: blur(3px) drop-shadow(0 0 8px rgba(180, 150, 255, .5));
    -webkit-mask: radial-gradient(circle at 50% 50%, transparent 12%, #000 18%, #000 70%, transparent 78%);
    mask: radial-gradient(circle at 50% 50%, transparent 12%, #000 18%, #000 70%, transparent 78%);
    mix-blend-mode: screen;
    animation: studio-galaxy-spin 22s linear infinite;
}

@keyframes studio-galaxy-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Blazing bright core + dust lane refraction */
.studio-u-21::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 30%;
    aspect-ratio: 1;
    z-index: 2;
    pointer-events: none;
    transform: translate(-50%, -50%);
    background:
        radial-gradient(circle, #fff8e0 0%, rgba(255, 240, 200, .8) 30%, rgba(220, 200, 255, .4) 55%, transparent 75%);
    box-shadow:
        0 0 14px 4px rgba(255, 240, 200, .9),
        0 0 30px 10px rgba(200, 180, 255, .5);
    mix-blend-mode: screen;
    animation: studio-galaxy-core 4.5s ease-in-out infinite alternate;
}

@keyframes studio-galaxy-core {
    0% { box-shadow: 0 0 14px 4px rgba(255, 240, 200, .9), 0 0 30px 10px rgba(200, 180, 255, .5); transform: translate(-50%, -50%) scale(1); }
    100% { box-shadow: 0 0 20px 6px rgba(255, 245, 210, 1), 0 0 40px 14px rgba(210, 190, 255, .65); transform: translate(-50%, -50%) scale(1.1); }
}

.studio-u-21.studio-tx {
    --tx-from: scale(.2);
    --tx-mid: scale(1.08);
    --tx-filter-from: brightness(3) saturate(1.4);
    --tx-filter-mid: brightness(1.4);
}

/* ========================================================================
   Universe 22 — Marble Vein
   Polished white Carrara marble with thin gray-gold veins branching
   organically and a slow specular shimmer rolling across the surface.
   Classical luxury.
   ======================================================================== */

.studio-u-22 {
    background:
        radial-gradient(ellipse 70% 90% at 30% 20%, rgba(255, 255, 255, .5), transparent 60%),
        radial-gradient(ellipse 60% 80% at 70% 80%, rgba(230, 230, 235, .4), transparent 65%),
        rgba(220, 220, 225, 0.08);
    backdrop-filter: blur(6px) saturate(1.1);
    -webkit-backdrop-filter: blur(6px) saturate(1.1);
    border-color: rgba(180, 180, 190, .55);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .9),
        inset 0 -8px 16px rgba(160, 160, 170, .2),
        0 6px 18px rgba(0, 0, 0, .25);
}

.studio-u-22 .studio-universe-label {
    color: #404048;
    font-weight: 700;
    letter-spacing: 2px;
    text-shadow:
        0 1px 0 rgba(255, 255, 255, .8),
        0 2px 4px rgba(120, 120, 130, .3);
}

/* Thin gray-gold veins branching organically */
.studio-u-22::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(118deg, transparent 28%, rgba(120, 120, 130, .5) 28.3%, rgba(120, 120, 130, .5) 28.6%, transparent 29%),
        linear-gradient(74deg, transparent 18%, rgba(140, 140, 150, .4) 18.3%, rgba(140, 140, 150, .4) 18.5%, transparent 19%),
        linear-gradient(132deg, transparent 52%, rgba(160, 140, 90, .35) 52.3%, rgba(160, 140, 90, .35) 52.6%, transparent 53%),
        linear-gradient(96deg, transparent 68%, rgba(130, 130, 140, .45) 68.3%, rgba(130, 130, 140, .45) 68.6%, transparent 69%),
        linear-gradient(140deg, transparent 42%, rgba(150, 130, 80, .3) 42.3%, rgba(150, 130, 80, .3) 42.5%, transparent 43%);
    filter: drop-shadow(0 0 1px rgba(120, 120, 130, .3));
}

/* Slow specular shimmer rolling across the polished surface */
.studio-u-22::after {
    content: "";
    position: absolute;
    top: -80%;
    bottom: -80%;
    width: 36%;
    left: -50%;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent);
    transform: skewX(-16deg);
    animation: studio-marble-sheen 8s ease-in-out infinite;
}

@keyframes studio-marble-sheen {
    0%, 55% { left: -50%; }
    85%, 100% { left: 115%; }
}

.studio-u-22.studio-tx {
    --tx-from: translateY(12px) scaleY(.4);
    --tx-mid: translateY(-2px) scaleY(1.06);
    --tx-filter-from: brightness(1.5) saturate(.4);
    --tx-filter-mid: brightness(1.1);
}

/* ========================================================================
   Universe 23 — Mizuhiki
   Japanese decorative cord-work: interlocking amber and crimson cord loops
   tied in ceremonial knots, with a slow gold shimmer rolling across. Pure
   CSS cord lines over a glassy amber base. Wabi elegance.
   ======================================================================== */

.studio-u-23 {
    background: rgba(212, 160, 70, 0.08);
    backdrop-filter: blur(6px) saturate(1.1);
    -webkit-backdrop-filter: blur(6px) saturate(1.1);
    border-color: rgba(212, 160, 70, .45);
    box-shadow:
        inset 0 1px 0 rgba(255, 220, 160, .18),
        inset 0 -10px 24px rgba(140, 90, 30, .25),
        0 4px 18px rgba(180, 120, 50, .28);
    overflow: hidden;
}

.studio-u-23 .studio-universe-label {
    color: #f0d088;
    font-weight: 700;
    letter-spacing: 2px;
    text-shadow:
        0 0 10px rgba(212, 160, 70, .8),
        0 0 22px rgba(180, 120, 40, .45),
        0 2px 4px rgba(10, 6, 2, .9);
}

/* Interlocking cord loops — layered diagonal amber + crimson lines */
.studio-u-23::before {
    content: "";
    position: absolute;
    inset: -20%;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(58deg, transparent 22%, rgba(212, 160, 70, .85) 22.4%, rgba(212, 160, 70, .85) 23%, transparent 23.4%),
        linear-gradient(58deg, transparent 46%, rgba(212, 160, 70, .85) 46.4%, rgba(212, 160, 70, .85) 47%, transparent 47.4%),
        linear-gradient(58deg, transparent 70%, rgba(212, 160, 70, .85) 70.4%, rgba(212, 160, 70, .85) 71%, transparent 71.4%),
        linear-gradient(122deg, transparent 22%, rgba(180, 40, 50, .8) 22.4%, rgba(180, 40, 50, .8) 23%, transparent 23.4%),
        linear-gradient(122deg, transparent 46%, rgba(180, 40, 50, .8) 46.4%, rgba(180, 40, 50, .8) 47%, transparent 47.4%),
        linear-gradient(122deg, transparent 70%, rgba(180, 40, 50, .8) 70.4%, rgba(180, 40, 50, .8) 71%, transparent 71.4%);
    filter: drop-shadow(0 0 2px rgba(212, 160, 70, .6));
    animation: studio-mizuhiki-sway 7s ease-in-out infinite alternate;
}

@keyframes studio-mizuhiki-sway {
    from { transform: translateX(-3%) skewX(-1deg); }
    to { transform: translateX(3%) skewX(1deg); }
}

/* Gold shimmer sweeping across the cords */
.studio-u-23::after {
    content: "";
    position: absolute;
    top: -60%;
    bottom: -60%;
    width: 32%;
    left: -45%;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(100deg, transparent, rgba(255, 230, 160, .28), transparent);
    transform: skewX(-18deg);
    animation: studio-mizuhiki-sheen 8s ease-in-out infinite;
}

@keyframes studio-mizuhiki-sheen {
    0%, 55% { left: -45%; }
    85%, 100% { left: 115%; }
}

.studio-u-23.studio-tx {
    --tx-from: translateY(14px) scaleY(.5);
    --tx-mid: translateY(-2px) scaleY(1.06);
    --tx-filter-from: brightness(2.2) saturate(1.6);
    --tx-filter-mid: brightness(1.3);
}

/* ========================================================================
   Universe 24 — Topographic Map
   Survey cartography: concentric contour lines tracing terrain elevation
   over a glassy moss-green base, with a route line slowly drawing across.
   Rugged and contemplative.
   ======================================================================== */

.studio-u-24 {
    background: rgba(120, 160, 90, 0.08);
    backdrop-filter: blur(6px) saturate(1.1);
    -webkit-backdrop-filter: blur(6px) saturate(1.1);
    border-color: rgba(120, 160, 90, .4);
    box-shadow:
        inset 0 1px 0 rgba(180, 220, 150, .16),
        inset 0 -10px 24px rgba(60, 90, 40, .25),
        0 4px 18px rgba(80, 120, 60, .25);
    overflow: hidden;
}

.studio-u-24 .studio-universe-label {
    color: #d8ecb8;
    font-family: 'JetBrains Mono', ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-shadow:
        0 0 8px rgba(150, 200, 110, .7),
        0 2px 4px rgba(10, 20, 6, .9);
}

/* Concentric contour rings — repeating-radial-gradient elevation bands */
.studio-u-24::before {
    content: "";
    position: absolute;
    inset: -30%;
    z-index: 1;
    pointer-events: none;
    background:
        repeating-radial-gradient(circle at 32% 40%,
            rgba(150, 200, 110, .35) 0 1px,
            transparent 1px 9px),
        repeating-radial-gradient(circle at 70% 65%,
            rgba(180, 220, 140, .28) 0 1px,
            transparent 1px 11px);
    filter: drop-shadow(0 0 1px rgba(150, 200, 110, .4));
    animation: studio-topo-pan 10s ease-in-out infinite alternate;
}

@keyframes studio-topo-pan {
    from { transform: translate3d(-3%, -2%, 0) scale(1); }
    to { transform: translate3d(3%, 3%, 0) scale(1.06); }
}

/* A surveyor's route line slowly tracing diagonally across the map */
.studio-u-24::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        linear-gradient(115deg, transparent 28%, rgba(255, 200, 80, .85) 28.3%, rgba(255, 200, 80, .85) 28.6%, transparent 29%),
        linear-gradient(115deg, transparent 54%, rgba(255, 200, 80, .7) 54.3%, rgba(255, 200, 80, .7) 54.6%, transparent 55%),
        linear-gradient(115deg, transparent 76%, rgba(255, 200, 80, .6) 76.3%, rgba(255, 200, 80, .6) 76.6%, transparent 77%);
    filter: drop-shadow(0 0 3px rgba(255, 200, 80, .7));
    animation: studio-topo-route 9s ease-in-out infinite;
}

@keyframes studio-topo-route {
    0%, 100% { opacity: .5; transform: translateX(-2%); }
    50% { opacity: 1; transform: translateX(2%); }
}

.studio-u-24.studio-tx {
    --tx-from: translateY(-14px) scaleY(1.3);
    --tx-mid: translateY(2px) scaleY(.97);
    --tx-filter-from: brightness(1.9) saturate(.6) blur(2px);
    --tx-filter-mid: brightness(1.2);
}

/* ========================================================================
   Universe 25 — Morpho Wing
   Iridescent structural-color butterfly scales: a conic-gradient microscale
   mosaic in electric morpho-blue that slowly rotates, with a prismatic
   shimmer sweep. Jewel-like.
   ======================================================================== */

.studio-u-25 {
    background: rgba(40, 160, 220, 0.08);
    backdrop-filter: blur(6px) saturate(1.1);
    -webkit-backdrop-filter: blur(6px) saturate(1.1);
    border-color: rgba(40, 180, 240, .4);
    box-shadow:
        inset 0 1px 0 rgba(120, 220, 255, .18),
        inset 0 -10px 24px rgba(20, 90, 150, .25),
        0 4px 22px rgba(40, 160, 220, .25);
    overflow: hidden;
}

.studio-u-25 .studio-universe-label {
    color: #b8ecff;
    font-weight: 700;
    letter-spacing: 2px;
    text-shadow:
        0 0 12px rgba(40, 180, 240, .9),
        0 0 26px rgba(80, 220, 255, .5),
        0 2px 6px rgba(2, 12, 22, .9);
}

/* Rotating microscale mosaic — masked conic-gradient of morpho-blue hues */
.studio-u-25::before {
    content: "";
    position: absolute;
    inset: -50%;
    z-index: 1;
    pointer-events: none;
    background: conic-gradient(
        from 0deg at 50% 50%,
        rgba(40, 180, 240, .42),
        rgba(80, 220, 255, .3),
        rgba(20, 120, 200, .36),
        rgba(140, 230, 255, .28),
        rgba(40, 180, 240, .42));
    filter: blur(3px) drop-shadow(0 0 6px rgba(40, 180, 240, .5));
    -webkit-mask: repeating-conic-gradient(from 0deg at 50% 50%, #000 0 8deg, transparent 8deg 12deg);
    mask: repeating-conic-gradient(from 0deg at 50% 50%, #000 0 8deg, transparent 8deg 12deg);
    mix-blend-mode: screen;
    animation: studio-morpho-rotate 14s linear infinite;
}

@keyframes studio-morpho-rotate {
    from { transform: rotate(0deg) scale(1.05); }
    to { transform: rotate(360deg) scale(1.05); }
}

/* Prismatic shimmer sweep across the scales */
.studio-u-25::after {
    content: "";
    position: absolute;
    top: -80%;
    bottom: -80%;
    width: 38%;
    left: -50%;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(100deg,
        transparent,
        rgba(180, 240, 255, .22) 30%,
        rgba(220, 200, 255, .3) 50%,
        rgba(140, 230, 255, .22) 70%,
        transparent);
    transform: skewX(-22deg);
    mix-blend-mode: screen;
    animation: studio-morpho-sweep 5s ease-in-out infinite;
}

@keyframes studio-morpho-sweep {
    0%, 55% { left: -50%; }
    85%, 100% { left: 110%; }
}

.studio-u-25.studio-tx {
    --tx-from: scale(.5) rotate(-6deg);
    --tx-mid: scale(1.04) rotate(2deg);
    --tx-filter-from: brightness(2.4) saturate(1.8) hue-rotate(30deg);
    --tx-filter-mid: brightness(1.3) saturate(1.3);
}

/* ========================================================================
   Universe 26 — Bauhaus
   Primary-color geometric abstraction: a red circle, yellow triangle, and
   blue square overlapping in Constructivist composition over a glassy
   neutral base. Forms gently float and re-settle. Modernist discipline.
   ======================================================================== */

.studio-u-26 {
    background: rgba(40, 40, 50, 0.08);
    backdrop-filter: blur(6px) saturate(1.1);
    -webkit-backdrop-filter: blur(6px) saturate(1.1);
    border-color: rgba(20, 20, 28, .5);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .14),
        inset 0 -10px 24px rgba(0, 0, 0, .3),
        0 6px 18px rgba(0, 0, 0, .25);
    overflow: hidden;
}

.studio-u-26 .studio-universe-label {
    color: #f0e8d0;
    font-weight: 800;
    letter-spacing: 3px;
    text-transform: uppercase;
    text-shadow:
        0 0 8px rgba(220, 60, 50, .7),
        0 2px 4px rgba(10, 10, 18, .9);
}

/* Red circle + yellow triangle + blue square overlapping */
.studio-u-26::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(circle at 28% 38%, rgba(220, 60, 50, .85) 0%, rgba(220, 60, 50, .85) 9%, transparent 9.5%),
        linear-gradient(45deg, transparent 24%, rgba(245, 200, 60, .85) 24%, rgba(245, 200, 60, .85) 38%, transparent 38.5%),
        linear-gradient(180deg, transparent 56%, rgba(40, 90, 200, .85) 56%, rgba(40, 90, 200, .85) 78%, transparent 78.5%);
    animation: studio-bauhaus-float 9s ease-in-out infinite alternate;
}

@keyframes studio-bauhaus-float {
    0% { transform: translate3d(-2%, -1%, 0); }
    100% { transform: translate3d(2%, 2%, 0); }
}

/* Vertical rule column — the typographic grid line */
.studio-u-26::after {
    content: "";
    position: absolute;
    top: 8%;
    bottom: 8%;
    left: 72%;
    width: 2px;
    z-index: 2;
    pointer-events: none;
    background: rgba(20, 20, 28, .9);
    animation: studio-bauhaus-rule 7s ease-in-out infinite;
}

@keyframes studio-bauhaus-rule {
    0%, 100% { opacity: .6; transform: translateX(0); }
    50% { opacity: 1; transform: translateX(-2%); }
}

.studio-u-26.studio-tx {
    --tx-from: translateX(-14px) skewX(-4deg);
    --tx-mid: translateX(2px) skewX(1deg);
    --tx-filter-from: brightness(2.2) saturate(1.6);
    --tx-filter-mid: brightness(1.25);
}

/* ========================================================================
   Universe 27 — Halftone Print
   CMYK offset-print dot rosettes: four color-separated radial-dot screens
   slightly misregistered, drifting against each other over a glassy cyan
   base. Print-shop texture.
   ======================================================================== */

.studio-u-27 {
    background: rgba(60, 180, 220, 0.08);
    backdrop-filter: blur(6px) saturate(1.1);
    -webkit-backdrop-filter: blur(6px) saturate(1.1);
    border-color: rgba(60, 180, 220, .35);
    box-shadow:
        inset 0 1px 0 rgba(140, 220, 255, .16),
        inset 0 -10px 24px rgba(20, 80, 110, .25),
        0 4px 18px rgba(40, 130, 170, .22);
    overflow: hidden;
}

.studio-u-27 .studio-universe-label {
    color: #c8ecff;
    font-family: 'JetBrains Mono', ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-shadow:
        0 0 8px rgba(60, 180, 220, .7),
        0 0 18px rgba(255, 80, 160, .35),
        0 2px 4px rgba(2, 14, 22, .9);
}

/* CMYK dot rosettes — four offset radial-dot screens drifting apart */
.studio-u-27::before {
    content: "";
    position: absolute;
    inset: -10%;
    z-index: 1;
    pointer-events: none;
    background:
        repeating-radial-gradient(circle at 30% 35%, rgba(0, 160, 220, .55) 0 1.2px, transparent 1.2px 6px),
        repeating-radial-gradient(circle at 32% 33%, rgba(220, 70, 160, .5) 0 1.2px, transparent 1.2px 6px),
        repeating-radial-gradient(circle at 33% 36%, rgba(240, 220, 60, .45) 0 1.2px, transparent 1.2px 6px),
        repeating-radial-gradient(circle at 31% 34%, rgba(40, 40, 50, .5) 0 1.2px, transparent 1.2px 6px);
    animation: studio-halftone-drift 8s ease-in-out infinite alternate;
}

@keyframes studio-halftone-drift {
    from { transform: translate3d(-1%, -1%, 0); }
    to { transform: translate3d(2%, 1%, 0); }
}

/* Registration sweep — a thin registration-cross band scanning the sheet */
.studio-u-27::after {
    content: "";
    position: absolute;
    top: -10%;
    bottom: -10%;
    width: 4%;
    left: -8%;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(100deg,
        transparent,
        rgba(255, 255, 255, .14) 40%,
        rgba(255, 80, 160, .18) 50%,
        rgba(255, 255, 255, .14) 60%,
        transparent);
    animation: studio-halftone-scan 6s ease-in-out infinite;
}

@keyframes studio-halftone-scan {
    0%, 55% { left: -8%; }
    85%, 100% { left: 104%; }
}

.studio-u-27.studio-tx {
    --tx-from: scaleY(.1);
    --tx-mid: scaleY(1.1);
    --tx-filter-from: brightness(2.4) saturate(.4);
    --tx-filter-mid: brightness(1.3);
}

/* ========================================================================
   Glassy fallback — when backdrop-filter is unsupported, bump the base
   tint alpha so the glassy universes still read distinctly against the
   dark sidebar without the blur frost. The opaque minority (U3, U6, U9,
   U13, U17) are excluded — they keep their own solid backgrounds.
   ======================================================================== */

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .studio-u-0  { background: rgba(110, 200, 255, 0.18); }
    .studio-u-1  { background: rgba(255, 122, 200, 0.18); }
    .studio-u-2  { background: rgba(150, 140, 255, 0.18); }
    .studio-u-4  {
        background:
            linear-gradient(115deg, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, .9) 34%, transparent 34.5%),
            linear-gradient(245deg, rgba(230, 251, 255, .85) 0%, rgba(230, 251, 255, .85) 52%, transparent 52.5%),
            linear-gradient(160deg, rgba(240, 253, 255, .7), rgba(200, 244, 251, .6)),
            rgba(6, 182, 212, 0.18);
    }
    .studio-u-5  { background: rgba(126, 231, 190, 0.18); }
    .studio-u-7  { background: rgba(239, 61, 143, 0.18); }
    .studio-u-8  {
        background:
            repeating-linear-gradient(90deg, rgba(214, 232, 255, .18) 0 1px, transparent 1px 18px),
            repeating-linear-gradient(0deg, rgba(214, 232, 255, .18) 0 1px, transparent 1px 18px),
            rgba(214, 232, 255, 0.18);
    }
    .studio-u-10 {
        background:
            radial-gradient(ellipse 70% 120% at 50% 50%, rgba(255,255,255,.04), transparent 70%),
            rgba(180, 200, 255, 0.18);
    }
    .studio-u-11 {
        background:
            radial-gradient(ellipse 60% 80% at 30% 20%, rgba(60, 50, 40, .5), transparent 60%),
            radial-gradient(ellipse 70% 90% at 80% 90%, rgba(40, 30, 25, .6), transparent 65%),
            rgba(212, 175, 55, 0.18);
    }
    .studio-u-12 {
        background:
            radial-gradient(ellipse 80% 50% at 50% 100%, rgba(255, 90, 20, .22), transparent 60%),
            rgba(255, 120, 40, 0.18);
    }
    .studio-u-14 {
        background:
            radial-gradient(circle at 20% 30%, rgba(255, 180, 80, .14), transparent 18%),
            radial-gradient(circle at 75% 25%, rgba(255, 140, 60, .1), transparent 14%),
            radial-gradient(circle at 55% 70%, rgba(120, 200, 255, .12), transparent 16%),
            radial-gradient(circle at 85% 75%, rgba(255, 200, 100, .08), transparent 12%),
            rgba(120, 180, 230, 0.18);
    }
    .studio-u-15 {
        background:
            radial-gradient(ellipse 55% 65% at 50% 50%, rgba(8, 8, 16, .55), transparent 65%),
            rgba(255, 240, 200, 0.18);
    }
    .studio-u-16 {
        background:
            linear-gradient(115deg, rgba(180, 40, 80, .55) 0%, rgba(180, 40, 80, .55) 33%, transparent 33.5%),
            linear-gradient(115deg, transparent 33%, rgba(40, 80, 160, .55) 33.5%, rgba(40, 80, 160, .55) 66%, transparent 66.5%),
            linear-gradient(115deg, transparent 66%, rgba(180, 140, 40, .55) 66.5%, rgba(180, 140, 40, .55) 100%),
            linear-gradient(245deg, rgba(60, 140, 80, .5) 0%, rgba(60, 140, 80, .5) 50%, transparent 50.5%),
            linear-gradient(245deg, transparent 50%, rgba(120, 60, 140, .5) 50.5%, rgba(120, 60, 140, .5) 100%),
            rgba(180, 140, 40, 0.18);
    }
    .studio-u-18 {
        background:
            radial-gradient(ellipse 80% 100% at 50% 0%, rgba(10, 40, 70, .4), transparent 60%),
            radial-gradient(ellipse 70% 80% at 30% 100%, rgba(20, 60, 90, .3), transparent 65%),
            rgba(80, 220, 200, 0.18);
    }
    .studio-u-19 {
        background:
            repeating-linear-gradient(0deg, rgba(160, 160, 160, .16) 0 1px, rgba(80, 80, 80, .12) 1px 2px),
            repeating-linear-gradient(90deg, rgba(170, 170, 170, .16) 0 1px, rgba(80, 80, 80, .10) 1px 2px),
            rgba(200, 200, 200, 0.18);
    }
    .studio-u-20 {
        background:
            radial-gradient(ellipse 60% 50% at 30% 20%, rgba(255, 220, 230, .3), transparent 65%),
            radial-gradient(ellipse 70% 60% at 75% 80%, rgba(255, 200, 180, .25), transparent 70%),
            rgba(220, 130, 160, 0.18);
    }
    .studio-u-21 {
        background:
            radial-gradient(ellipse 80% 90% at 50% 50%, rgba(40, 30, 80, .3), transparent 70%),
            rgba(180, 160, 255, 0.18);
    }
    .studio-u-22 {
        background:
            radial-gradient(ellipse 70% 90% at 30% 20%, rgba(255, 255, 255, .5), transparent 60%),
            radial-gradient(ellipse 60% 80% at 70% 80%, rgba(230, 230, 235, .4), transparent 65%),
            rgba(220, 220, 225, 0.18);
    }
    .studio-u-23 { background: rgba(212, 160, 70, 0.18); }
    .studio-u-24 { background: rgba(120, 160, 90, 0.18); }
    .studio-u-25 { background: rgba(40, 160, 220, 0.18); }
    .studio-u-26 { background: rgba(40, 40, 50, 0.18); }
    .studio-u-27 { background: rgba(60, 180, 220, 0.18); }
}

/* ========================================================================
   Reduced motion — freeze all universes into their static theme.
   ======================================================================== */

@media (prefers-reduced-motion: reduce) {
    .studio-universe-btn,
    .studio-universe-btn.studio-tx,
    .studio-universe-btn .studio-universe-label,
    .studio-universe-btn::before,
    .studio-universe-btn::after,
    .studio-universe-btn .studio-layer,
    .studio-universe-btn .studio-bubble,
    .studio-universe-btn .studio-star,
    .studio-universe-btn .studio-stud,
    .studio-universe-btn .studio-speck,
    .studio-universe-btn .studio-sprinkle,
    .studio-universe-btn .studio-blob,
    .studio-universe-btn .studio-ember,
    .studio-universe-btn .studio-raindrop,
    .studio-universe-btn .studio-glow,
    .studio-universe-btn .studio-petal {
        animation: none !important;
        transition: none !important;
    }
}

/* --- Skills tab (persona manage modal) --- */
.skills-section {
    margin-bottom: 20px;
}
.skills-section .section-title {
    font-size: 16px;
    margin-bottom: 14px;
}
.skills-section + .skills-section {
    margin-top: 8px;
}
.skills-grid {
    margin-bottom: 0;
}
.skill-card {
    padding: 18px;
    flex-basis: 240px;
}
.skill-card .card-label {
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 700;
    text-transform: capitalize;
    margin-bottom: 8px;
}
.skill-card .card-value-sm {
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
    -webkit-background-clip: initial;
    background-clip: initial;
    background: none;
    -webkit-text-fill-color: initial;
    margin-bottom: 14px;
}
.skill-card .card-actions {
    display: flex;
    justify-content: flex-end;
}
.skill-card .skill-btn {
    padding: 8px 14px;
    font-size: 13px;
    width: auto;
    min-width: 90px;
}
.skill-card .skill-btn:disabled {
    opacity: 0.6;
    cursor: default;
}

/* --- Referral link row (wallet page) --- */
.referral-value-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.referral-copy-btn {
    flex-shrink: 0;
    padding: 5px 7px;
    line-height: 0;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--glass-border);
    border-radius: 4px;
    color: var(--text-dim);
    cursor: pointer;
    transition: background var(--dur) var(--ease),
        color var(--dur) var(--ease),
        border-color var(--dur) var(--ease);
}

.referral-copy-btn svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.referral-copy-btn:hover {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent);
}

.referral-copy-btn.copied {
    color: var(--success);
    border-color: rgba(126, 231, 135, 0.5);
    background: var(--success-soft);
}

.referral-code-value {
    font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
    font-size: 13px;
    letter-spacing: 0.5px;
    color: var(--text-primary);
    user-select: all;
    display: block;
    white-space: normal;
    word-break: break-all;
    overflow-wrap: anywhere;
    max-width: 100%;
}

/* Allow the trailing value column to shrink so the referral URL can wrap
   onto multiple lines instead of overflowing the row on narrow viewports.
   Scoped to rows that contain the referral code value. */
.list-row:has(.referral-code-value) .list-row-trailing {
    flex-shrink: 1;
    min-width: 0;
    max-width: 100%;
}
.list-row:has(.referral-code-value) .list-row-value {
    min-width: 0;
    max-width: 100%;
}

/* ==========================================================================
   Support tickets (dedicated .support-* classes — intentionally independent
   from the chat view styles so the two surfaces can diverge).
   ========================================================================== */

.support-layout {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1;
    overflow: hidden;
}

/* The support detail view owns its scrolling (like chat); drop the content
   shell's own scroll + right padding so the scrollbar hugs the screen edge. */
#spa-content:has(.support-layout) {
    overflow: hidden;
    padding-right: 0;
}

.support-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-shrink: 0;
    padding: 14px var(--content-pad);
    border-bottom: 1px solid var(--hairline);
    background: var(--glass-sunken);
    -webkit-backdrop-filter: blur(var(--blur));
    backdrop-filter: blur(var(--blur));
}

.support-header-info {
    min-width: 0;
    flex: 1;
}

.support-header-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    word-wrap: break-word;
}

.support-header-sub {
    margin-top: 4px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--text-secondary);
    word-wrap: break-word;
}

.support-header-actions {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.support-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    border: 1px solid var(--hairline);
}

.support-status-badge.open {
    color: var(--accent);
    border-color: rgba(251, 190, 81, 0.5);
    background: rgba(251, 190, 81, 0.12);
}

.support-status-badge.closed {
    color: var(--text-dim);
    border-color: var(--hairline);
    background: var(--glass-raised);
}

.support-messages {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 18px var(--content-pad);
    flex: 1;
    width: 100%;
    min-height: 0;
}

/* Pin the conversation to the bottom of the scroll region (grows upward). */
.support-messages > .support-bubble:first-child {
    margin-top: auto;
}

.support-bubble {
    align-self: flex-start;
    border-radius: var(--radius-control);
    border: 1px solid var(--glass-border);
    box-shadow: var(--edge-light);
    background: var(--glass-raised-strong);
    -webkit-backdrop-filter: blur(var(--blur));
    backdrop-filter: blur(var(--blur));
    word-wrap: break-word;
    font-size: 14px;
    color: var(--text-primary);
    padding: 10px 12px;
    margin-top: 12px;
    max-width: 90%;
}

.support-bubble.sent {
    align-self: flex-end;
    background: var(--accent-soft);
    border-color: rgba(251, 190, 81, 0.4);
    box-shadow: 0 0 12px rgba(251, 190, 81, 0.14), var(--edge-light);
}

/* System notices (e.g. inactivity auto-close) render as a centered
   italic caption rather than a chat bubble. */
.support-bubble.system {
    align-self: center;
    background: transparent;
    border: none;
    box-shadow: none;
    color: var(--text-dim);
    font-size: 12px;
    font-style: italic;
    text-align: center;
    max-width: 100%;
    padding: 8px 0;
}

.support-bubble-meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}

.support-bubble.system .support-bubble-meta {
    display: none;
}

.support-bubble-author {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: var(--text-secondary);
}

.support-bubble.sent .support-bubble-author {
    color: var(--accent);
}

.support-bubble-time {
    font-size: 10px;
    color: var(--text-dim);
}

.support-bubble-content {
    line-height: 1.5;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.support-composer {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    padding: 12px var(--content-pad) 4px;
    align-items: stretch;
    z-index: 10;
}

.support-composer .modal-input {
    flex: 1;
}

.support-composer textarea.support-composer-input {
    resize: none;
    overflow-y: hidden;
    min-height: 44px;
    max-height: 160px;
    line-height: 1.5;
    align-self: stretch;
}

.support-composer-input-row {
    display: flex;
    width: 100%;
}

.support-composer-controls-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    width: 100%;
    flex-wrap: wrap;
}

.support-composer-status {
    font-size: 11px;
    color: var(--text-dim);
    font-style: italic;
    flex: 1;
}

.support-send-btn {
    padding: 8px 16px;
    border-radius: var(--radius-control);
    border: none;
    background: var(--accent);
    color: var(--text-on-accent, #1a1406);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.support-send-btn:hover:not(:disabled) {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

.support-send-btn:disabled {
    opacity: 0.6;
    cursor: default;
}

.support-closed-notice {
    flex-shrink: 0;
    text-align: center;
    padding: 14px var(--content-pad);
    font-size: 13px;
    color: var(--text-dim);
    font-style: italic;
}

/* --- Ticket list --- */

.support-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px var(--content-pad);
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.support-ticket-card {
    display: flex;
    align-items: center;
    gap: 12px;
    border-radius: var(--radius-control);
    border: 1px solid var(--glass-border);
    box-shadow: var(--edge-light);
    background: var(--glass-raised-strong);
    -webkit-backdrop-filter: blur(var(--blur));
    backdrop-filter: blur(var(--blur));
    padding: 14px 16px;
    cursor: pointer;
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
        border-color var(--dur) var(--ease);
}

.support-ticket-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-raised);
    border-color: rgba(251, 190, 81, 0.45);
}

.support-ticket-card-main {
    flex: 1;
    min-width: 0;
}

.support-ticket-card-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.support-ticket-card-meta {
    margin-top: 4px;
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.support-ticket-card-trailing {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.support-chevron {
    color: var(--text-dim);
    font-size: 18px;
    line-height: 1;
}

.support-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex: 1;
    min-height: 180px;
    gap: 6px;
}

.support-empty-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}

.support-empty-sub {
    font-size: 13px;
    color: var(--text-dim);
    max-width: 340px;
}

/* New-ticket modal description textarea. */
.support-description-input {
    resize: vertical;
    min-height: 120px;
}

@media (max-width: 600px) {
    .support-bubble {
        max-width: 100%;
    }
    .support-ticket-card {
        padding: 12px 14px;
    }
}

/* --- Extract Frames modal --- */
.extract-frames {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.extract-frames-loading {
    padding: 32px 16px;
    text-align: center;
    color: var(--text-dim);
    font-size: 14px;
}

.extract-frames-video {
    width: 100%;
    max-height: 40vh;
    object-fit: contain;
    border-radius: var(--radius-control);
    background: var(--glass-sunken);
    border: 1px solid var(--hairline);
}

.extract-frames-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

.extract-frames-time-input {
    width: 96px;
    flex-shrink: 0;
    padding: 8px 10px;
    background: var(--glass-sunken);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-control);
    color: var(--text-primary);
    font-size: 13px;
    font-family: inherit;
}

.extract-frames-time-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.extract-frames-slider {
    flex: 1;
    min-width: 0;
    height: 36px;
    accent-color: var(--accent);
    cursor: pointer;
}

.extract-frames-add-btn {
    flex-shrink: 0;
    padding: 8px 14px;
    background: var(--accent-soft);
    border: 1px solid var(--accent);
    border-radius: var(--radius-control);
    color: var(--accent);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.extract-frames-add-btn:hover {
    background: var(--accent-glow);
    box-shadow: 0 0 12px var(--accent-glow);
}

.extract-frames-hint {
    font-size: 12px;
    color: var(--text-dim);
    line-height: 1.4;
}

.extract-frames-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.extract-frames-chip {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 6px;
    background: var(--glass-raised);
    border: 1px solid var(--hairline);
    border-radius: 10px;
    transition: border-color var(--dur) var(--ease);
}

.extract-frames-chip:hover {
    border-color: var(--accent-glow);
}

.extract-frames-chip-thumb,
.extract-frames-chip-placeholder {
    width: 72px;
    height: 44px;
    object-fit: cover;
    border-radius: 6px;
    background: var(--glass-sunken);
}

.extract-frames-chip-placeholder {
    border: 1px solid var(--hairline);
}

.extract-frames-chip-time {
    font-size: 11px;
    color: var(--text-dim);
    font-variant-numeric: tabular-nums;
}

.extract-frames-chip-remove {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid var(--hairline);
    border-radius: 50%;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.extract-frames-chip-remove:hover {
    background: rgba(255, 80, 80, 0.85);
    color: #fff;
}

@media (max-width: 600px) {
    .extract-frames-controls {
        flex-wrap: wrap;
    }
    .extract-frames-slider {
        order: 3;
        flex-basis: 100%;
    }
    .extract-frames-video {
        max-height: 30vh;
    }
}

/* --- Extract Audio modal ---
   Mirrors the extract-frames layout: video preview, format selector,
   optional segment timestamps, hint, and an error slot. */

.extract-audio {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.extract-audio-loading {
    padding: 32px 16px;
    text-align: center;
    color: var(--text-dim);
    font-size: 14px;
}

.extract-audio-video {
    width: 100%;
    max-height: 40vh;
    object-fit: contain;
    border-radius: var(--radius-control);
    background: var(--glass-sunken);
    border: 1px solid var(--hairline);
}

.extract-audio-controls {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.extract-audio-format-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.extract-audio-segment-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.extract-audio-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.extract-audio-label {
    font-size: 12px;
    color: var(--text-dim);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.extract-audio-format .segment {
    padding: 6px 14px;
    font-size: 13px;
}

.extract-audio-time-input {
    width: 120px;
    padding: 8px 10px;
    background: var(--glass-sunken);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-control);
    color: var(--text-primary);
    font-size: 13px;
    font-family: inherit;
}

.extract-audio-time-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.extract-audio-hint {
    font-size: 12px;
    color: var(--text-dim);
    line-height: 1.4;
}

.extract-audio-error {
    padding: 10px 12px;
    background: rgba(255, 80, 80, 0.1);
    border: 1px solid rgba(255, 80, 80, 0.4);
    border-radius: var(--radius-control);
    color: #ff8a8a;
    font-size: 13px;
    line-height: 1.4;
}

@media (max-width: 600px) {
    .extract-audio-segment-row {
        flex-direction: column;
        gap: 10px;
    }
    .extract-audio-time-input {
        width: 100%;
    }
    .extract-audio-video {
        max-height: 30vh;
    }
}

/* --- First-login coach tour (guide.js) ---
   A movable, collapsible circular FAB anchors the tour. Each step is a bare
   tooltip docked beside its target - no dim, no blur, no highlight ring, so
   the rest of the page stays fully clickable. Collapsing the FAB hides the
   tooltip so the user can interact freely. */

.tour-layer {
    position: fixed;
    inset: 0;
    z-index: 2500;
    pointer-events: none;
    transition: opacity 0.22s var(--ease);
}

.tour-layer[aria-hidden="true"] {
    opacity: 0;
    pointer-events: none;
}

/* Hidden layer must never intercept - when collapsed the user interacts
   freely, so neutralize the tooltip. */
.tour-layer[aria-hidden="true"] .tour-tooltip {
    pointer-events: none;
}

.tour-tooltip {
    position: absolute;
    width: 260px;
    max-width: calc(100vw - 32px);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.05) 100%);
    -webkit-backdrop-filter: var(--blur-strong);
    backdrop-filter: var(--blur-strong);
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 16px;
    box-shadow: var(--edge-light-strong), var(--shadow-floating);
    padding: 16px 18px;
    z-index: 2501;
    pointer-events: auto;
    visibility: hidden;
}

.tour-tooltip-title {
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.3px;
    margin-bottom: 6px;
}

.tour-tooltip-body {
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.5;
}
.tour-tooltip-body b {
    color: var(--accent);
    font-weight: 700;
}

.tour-tooltip-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
}

.tour-tooltip-progress {
    color: var(--text-dim);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tour-tooltip-next {
    border: none;
    background: var(--glass-raised);
    border: 1px solid var(--glass-border);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 6px 12px;
    border-radius: var(--radius-pill);
    cursor: pointer;
    flex-shrink: 0;
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
        border-color var(--dur) var(--ease);
}

.tour-tooltip-next:hover {
    background: var(--glass-raised-strong);
    color: var(--text-primary);
    border-color: var(--glass-border-hover);
}

/* Tooltip arrow - rotated square pointing at the target. */
.tour-tooltip::before {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    background: inherit;
    border: 1px solid rgba(255, 255, 255, 0.13);
    transform: rotate(45deg);
}

.tour-tooltip.below::before {
    top: -6px;
    left: 50%;
    margin-left: -5px;
    border-right: none;
    border-bottom: none;
}

.tour-tooltip.above::before {
    bottom: -6px;
    left: 50%;
    margin-left: -5px;
    border-top: none;
    border-left: none;
}

.tour-tooltip.right::before {
    left: -6px;
    top: 50%;
    margin-top: -5px;
    border-right: none;
    border-bottom: none;
}

.tour-tooltip.left::before {
    right: -6px;
    top: 50%;
    margin-top: -5px;
    border-top: none;
    border-left: none;
}

/* Centered final slide has no target, so no arrow. */
.tour-tooltip.centered::before {
    display: none;
}

/* --- Movable circular FAB (pill with dot + progress label) --- */

.tour-fab {
    position: fixed;
    z-index: 2600;
    width: auto;
    height: 40px;
    padding: 0 16px;
    box-sizing: border-box;
    border-radius: 20px;
    border: 1px solid rgba(251, 190, 81, 0.35);
    background: rgba(13, 13, 15, 0.92);
    -webkit-backdrop-filter: var(--blur-strong);
    backdrop-filter: var(--blur-strong);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5), 0 0 20px rgba(251, 190, 81, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.10);
    cursor: grab;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease),
        padding 0.2s var(--ease), border-radius 0.2s var(--ease);
}

.tour-fab:hover {
    transform: scale(1.04);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55), 0 0 28px rgba(251, 190, 81, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.tour-fab.dragging {
    cursor: grabbing;
    transform: scale(1.05);
}

.tour-fab-dot {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 10px rgba(251, 190, 81, 0.9);
    animation: tour-fab-pulse 2.2s var(--ease) infinite;
}

@keyframes tour-fab-pulse {
    0%, 100% { box-shadow: 0 0 8px rgba(251, 190, 81, 0.55); }
    50%      { box-shadow: 0 0 18px rgba(251, 190, 81, 0.95); }
}

.tour-fab-label {
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.4px;
    white-space: nowrap;
}

/* Collapsed: shrink to a quiet dot so the page is fully interactive. */
.tour-fab.collapsed {
    width: 38px;
    height: 38px;
    padding: 0;
    border-radius: 50%;
    justify-content: center;
}

.tour-fab.collapsed .tour-fab-label {
    display: none;
}

.tour-fab.collapsed .tour-fab-dot {
    width: 12px;
    height: 12px;
    animation: none;
    opacity: 0.75;
}

@media (prefers-reduced-motion: reduce) {
    .tour-fab-dot {
        animation: none;
    }
}

@media (max-width: 600px) {
    .tour-tooltip {
        width: 230px;
        padding: 14px 16px;
    }
}

/* --- Beta disclaimer modal (first-login onboarding) --- */

.onboarding-disclaimer {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.onboarding-disclaimer-heading {
    color: var(--accent);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.5px;
    margin-top: 8px;
}

.onboarding-disclaimer-heading:first-child {
    margin-top: 0;
}

.onboarding-disclaimer-text {
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.55;
    margin: 4px 0 0;
}

.onboarding-disclaimer-accept {
    color: var(--text-primary);
    font-weight: 600;
}

/* ============================================================================
   Audio Viewer — full-screen audio playback overlay (mirrors ImageViewer)
   ============================================================================ */

.audio-viewer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(4, 4, 5, 0.78);
    -webkit-backdrop-filter: var(--blur-strong);
    backdrop-filter: var(--blur-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    /* Fallback only — overridden per-open by OverlayStack inline z-index
       (audio-viewer.js) so the audio viewer stacks in open order. */
    z-index: 2100;
    opacity: 0;
    transition: opacity 0.25s var(--ease);
}

.audio-viewer-overlay.open {
    opacity: 1;
}

.audio-viewer-overlay[aria-hidden="true"] {
    opacity: 0;
}

.audio-viewer-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width: min(560px, 92vw);
    padding: 32px 28px 28px;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-control);
    background: var(--glass-raised);
    -webkit-backdrop-filter: var(--blur-strong);
    backdrop-filter: var(--blur-strong);
    box-shadow: var(--shadow-floating);
}

.audio-viewer-filename {
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    word-break: break-all;
    max-width: 100%;
}

.audio-viewer-audio {
    width: 100%;
    max-width: 480px;
}

.audio-viewer-loading-spinner {
    width: 28px;
    height: 28px;
    border: 2px solid var(--glass-border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: audio-viewer-spin 0.8s linear infinite;
}

@keyframes audio-viewer-spin {
    to { transform: rotate(360deg); }
}

.audio-viewer-controls {
    position: absolute;
    top: 18px;
    right: 18px;
    display: flex;
    gap: 10px;
}

.audio-viewer-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-pill);
    background: var(--glass-raised);
    -webkit-backdrop-filter: var(--blur);
    backdrop-filter: var(--blur);
    color: var(--text-primary);
    cursor: pointer;
    transition: background var(--dur) var(--ease),
        border-color var(--dur) var(--ease),
        transform var(--dur) var(--ease),
        box-shadow var(--dur) var(--ease);
}

.audio-viewer-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: var(--glass-border-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.32);
}

.audio-viewer-btn:focus-visible {
    outline: none;
    border-color: rgba(251, 190, 81, 0.55);
    box-shadow: 0 0 0 3px rgba(251, 190, 81, 0.18);
}

.audio-viewer-btn svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.audio-viewer-download svg {
    color: var(--accent);
}

.audio-viewer-delete svg {
    color: #ef4444;
}

.audio-viewer-action {
    overflow: hidden;
}

.audio-viewer-action .navbar-logo {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

/* ============================================================================
   Studio Sound surface — Speak + Transcribe panels
   ============================================================================ */

.studio-sound[hidden] { display: none; }

.studio-sound-panel[hidden] { display: none; }

.studio-transcribe-empty[hidden] { display: none; }

.studio-transcribe-loaded[hidden] { display: none; }

.studio-sound {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    margin-top: 52px;
    overflow-y: auto;
}

.studio-sound-filters {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--glass-raised);
    -webkit-backdrop-filter: var(--blur);
    backdrop-filter: var(--blur);
    border-bottom: 1px solid var(--hairline);
    padding: 12px 16px;
    display: flex;
    justify-content: center;
}

.studio-sound-panel {
    flex: 1;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 32px 20px 96px;
}

.studio-sound-form {
    width: min(640px, 100%);
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* --- Panel header (amber-tick section title + sub line) ------------------- */

.studio-sound-head {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-bottom: 2px;
}

.studio-sound-sub {
    color: var(--text-dim);
    font-size: 13px;
}

/* --- Speak textarea + footer (char counter + live cost) ------------------ */

.studio-speak-input-wrap {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--hairline);
    border-radius: var(--radius-control);
    background: var(--glass-sunken);
    overflow: hidden;
    transition: border-color var(--dur) var(--ease),
        box-shadow var(--dur) var(--ease);
}

.studio-speak-input-wrap:focus-within {
    border-color: rgba(251, 190, 81, 0.5);
    box-shadow: 0 0 0 3px rgba(251, 190, 81, 0.12);
}

.studio-speak-input {
    width: 100%;
    min-height: 140px;
    padding: 16px;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-size: 15px;
    line-height: 1.55;
    resize: vertical;
    box-sizing: border-box;
    font-family: inherit;
}

.studio-speak-input:focus {
    outline: none;
}

.studio-speak-input::placeholder {
    color: var(--text-dim);
}

.studio-speak-input-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 14px;
    border-top: 1px solid var(--hairline);
    color: var(--text-dim);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.studio-speak-count {
    font-weight: 600;
}

.studio-speak-cost {
    color: var(--accent);
    font-weight: 700;
}

.studio-speak-cost:empty::before {
    content: "\2014";
    color: var(--text-dim);
    font-weight: 400;
}

/* --- Speak controls (voice select + submit) ------------------------------- */

.studio-speak-controls {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    flex-wrap: wrap;
}

.studio-speak-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.studio-speak-label {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-dim);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.studio-speak-label-icon {
    width: 13px;
    height: 13px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.studio-speak-controls .studio-select {
    min-width: 180px;
    padding: 10px 14px;
    border: 1px solid var(--hairline);
    border-radius: var(--radius-control);
    background: var(--glass-sunken);
    color: var(--text-primary);
    font-size: 14px;
    cursor: pointer;
}

.studio-speak-submit {
    margin-left: auto;
    padding: 11px 28px;
    border: none;
    border-radius: var(--radius-pill);
    background: var(--accent);
    color: #1a0f00;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: opacity var(--dur) var(--ease),
        transform var(--dur) var(--ease),
        box-shadow var(--dur) var(--ease);
}

.studio-speak-submit:hover:not(:disabled) {
    opacity: 0.95;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(251, 190, 81, 0.28);
}

.studio-speak-submit:active:not(:disabled) {
    transform: translateY(0);
}

.studio-speak-submit:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.studio-speak-hint {
    color: var(--text-dim);
    font-size: 13px;
    min-height: 18px;
}

.studio-speak-error,
.studio-transcribe-error {
    color: var(--danger);
    font-size: 13px;
    padding: 10px 14px;
    border: 1px solid rgba(242, 139, 130, 0.3);
    border-radius: var(--radius-control);
    background: var(--danger-soft);
}

/* --- Transcribe inline audio player -------------------------------------- */

.studio-transcribe-player {
    display: flex;
    flex-direction: column;
    min-height: 280px;
    padding: 24px;
    border-radius: var(--radius-control);
    background: var(--glass-sunken);
    transition: border-color var(--dur) var(--ease),
        background var(--dur) var(--ease),
        box-shadow var(--dur) var(--ease);
}

.studio-transcribe-player.is-empty {
    border: 1px dashed rgba(255, 255, 255, 0.14);
    background: transparent;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.studio-transcribe-player.is-empty:hover {
    border-color: rgba(251, 190, 81, 0.45);
    background: rgba(251, 190, 81, 0.04);
    box-shadow: 0 0 0 3px rgba(251, 190, 81, 0.08);
}

.studio-transcribe-player.is-loaded {
    border: 1px solid var(--hairline);
    align-items: stretch;
    justify-content: flex-start;
    gap: 18px;
}

/* --- Record card (mic recording → upload → auto-transcribe) -------------- */

.studio-transcribe-record-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 220px;
    padding: 24px;
    border: 1px dashed rgba(255, 255, 255, 0.14);
    border-radius: var(--radius-control);
    background: transparent;
    transition: border-color var(--dur) var(--ease),
        background var(--dur) var(--ease),
        box-shadow var(--dur) var(--ease);
}

.studio-transcribe-record-card.is-recording {
    border: 1px solid var(--hairline);
    background: var(--glass-sunken);
}

.studio-transcribe-record-icon {
    width: 56px;
    height: 56px;
    color: var(--accent);
    stroke: currentColor;
    fill: none;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
    opacity: 0.85;
    transition: color var(--dur) var(--ease);
}

.studio-transcribe-record-card.is-recording .studio-transcribe-record-icon {
    color: var(--danger);
    animation: tool-pulse 1s ease-in-out infinite;
}

.studio-transcribe-record-label {
    color: var(--text-primary);
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.studio-transcribe-record-hint {
    color: var(--text-dim);
    font-size: 13px;
    text-align: center;
}

.studio-transcribe-record-time {
    color: var(--text-secondary);
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

.studio-transcribe-record-time[hidden] { display: none; }

button.studio-transcribe-record {
    padding: 11px 28px;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-pill);
    background: var(--glass-raised);
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: opacity var(--dur) var(--ease),
        transform var(--dur) var(--ease),
        box-shadow var(--dur) var(--ease),
        background var(--dur) var(--ease),
        border-color var(--dur) var(--ease),
        color var(--dur) var(--ease);
}

button.studio-transcribe-record:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(255, 255, 255, 0.06);
}

button.studio-transcribe-record:active:not(:disabled) {
    transform: translateY(0);
}

button.studio-transcribe-record.recording {
    color: var(--danger);
    border-color: rgba(242, 139, 130, 0.5);
    background: var(--danger-soft);
    animation: tool-pulse 1s ease-in-out infinite;
}

button.studio-transcribe-record:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* --- Empty state (drop-zone) --------------------------------------------- */

.studio-transcribe-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 20px;
}

.studio-transcribe-empty-icon {
    width: 56px;
    height: 56px;
    color: var(--accent);
    stroke: currentColor;
    fill: none;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
    opacity: 0.85;
}

.studio-transcribe-empty-text {
    color: var(--text-primary);
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.studio-transcribe-empty-hint {
    color: var(--text-dim);
    font-size: 13px;
}

/* --- Loaded state (player card) ------------------------------------------ */

.studio-transcribe-loaded {
    display: flex;
    flex-direction: column;
    gap: 18px;
    width: 100%;
}

.studio-transcribe-loaded-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
}

.studio-transcribe-file {
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.studio-transcribe-play {
    align-self: center;
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--glass-border);
    border-radius: 50%;
    background: var(--accent);
    color: #1a0f00;
    cursor: pointer;
    transition: background var(--dur) var(--ease),
        transform var(--dur) var(--ease),
        box-shadow var(--dur) var(--ease),
        opacity var(--dur) var(--ease);
}

.studio-transcribe-play:hover:not(:disabled) {
    transform: scale(1.06);
    box-shadow: 0 4px 18px rgba(251, 190, 81, 0.34);
}

.studio-transcribe-play:active:not(:disabled) {
    transform: scale(1);
}

.studio-transcribe-play:disabled {
    opacity: 0.4;
    cursor: default;
}

.studio-transcribe-play-icon,
.studio-transcribe-pause-icon {
    width: 22px;
    height: 22px;
}

.studio-transcribe-pause-icon {
    display: none;
}

.studio-transcribe-player.is-playing .studio-transcribe-play-icon {
    display: none;
}

.studio-transcribe-player.is-playing .studio-transcribe-pause-icon {
    display: block;
}

/* --- Progress bar (seek) ------------------------------------------------- */

.studio-transcribe-progress {
    position: relative;
    width: 100%;
    height: 22px;
    display: flex;
    align-items: center;
    cursor: pointer;
    touch-action: none;
    outline: none;
}

.studio-transcribe-progress:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 4px;
    border-radius: var(--radius-pill);
}

.studio-transcribe-progress-track {
    position: absolute;
    left: 0;
    right: 0;
    height: 4px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.1);
    transition: height var(--dur) var(--ease);
}

.studio-transcribe-progress:hover .studio-transcribe-progress-track,
.studio-transcribe-progress:focus-visible .studio-transcribe-progress-track {
    height: 6px;
}

.studio-transcribe-progress-fill {
    position: absolute;
    left: 0;
    height: 4px;
    border-radius: var(--radius-pill);
    background: var(--accent);
    width: 0%;
    transition: height var(--dur) var(--ease), width 0.1s linear;
    box-shadow: 0 0 8px rgba(251, 190, 81, 0.3);
}

.studio-transcribe-progress:hover .studio-transcribe-progress-fill,
.studio-transcribe-progress:focus-visible .studio-transcribe-progress-fill {
    height: 6px;
}

.studio-transcribe-progress-thumb {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--accent);
    transform: translate(-50%, 0);
    left: 0%;
    opacity: 0;
    transition: opacity var(--dur) var(--ease);
    box-shadow: 0 0 6px rgba(251, 190, 81, 0.5);
}

.studio-transcribe-progress:hover .studio-transcribe-progress-thumb,
.studio-transcribe-progress:focus-visible .studio-transcribe-progress-thumb {
    opacity: 1;
}

.studio-transcribe-player.is-playing .studio-transcribe-progress-fill {
    transition: height var(--dur) var(--ease);
}

/* --- Meta row (size + EQ + time) ----------------------------------------- */

.studio-transcribe-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: var(--text-dim);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.studio-transcribe-size {
    color: var(--text-dim);
}

.studio-transcribe-time {
    margin-left: auto;
    color: var(--text-secondary);
    font-weight: 600;
}

/* Equalizer bars — only animate while playing; static when paused */
.studio-transcribe-eq {
    display: inline-flex;
    align-items: flex-end;
    gap: 2px;
    height: 12px;
}

.studio-transcribe-eq span {
    width: 2px;
    height: 100%;
    background: var(--accent);
    border-radius: 1px;
    transform-origin: bottom;
    transform: scaleY(0.35);
}

.studio-transcribe-player.is-playing .studio-transcribe-eq span {
    animation: studio-transcribe-eq 0.9s ease-in-out infinite;
}

.studio-transcribe-player.is-playing .studio-transcribe-eq span:nth-child(2) {
    animation-delay: 0.15s;
}

.studio-transcribe-player.is-playing .studio-transcribe-eq span:nth-child(3) {
    animation-delay: 0.3s;
}

@keyframes studio-transcribe-eq {
    0%, 100% { transform: scaleY(0.35); }
    50% { transform: scaleY(1); }
}

.studio-transcribe-clear {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-dim);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: background var(--dur) var(--ease),
        color var(--dur) var(--ease),
        transform var(--dur) var(--ease);
}

.studio-transcribe-clear:hover {
    background: var(--danger-soft);
    color: var(--danger);
    transform: rotate(90deg);
}

.studio-transcribe-player.is-empty .studio-transcribe-clear {
    display: none;
}

.studio-transcribe-player audio {
    display: none;
}

/* --- Transcribe controls + result ---------------------------------------- */

.studio-transcribe-controls {
    display: flex;
    justify-content: center;
}

.studio-transcribe-submit {
    padding: 11px 28px;
    border: none;
    border-radius: var(--radius-pill);
    background: var(--accent);
    color: #1a0f00;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: opacity var(--dur) var(--ease),
        transform var(--dur) var(--ease),
        box-shadow var(--dur) var(--ease);
}

.studio-transcribe-submit:hover:not(:disabled) {
    opacity: 0.95;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(251, 190, 81, 0.28);
}

.studio-transcribe-submit:active:not(:disabled) {
    transform: translateY(0);
}

.studio-transcribe-submit:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.studio-transcribe-result {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px 20px;
    border: 1px solid var(--hairline);
    border-radius: var(--radius-control);
    background: var(--glass-sunken);
}

.studio-transcribe-result-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.studio-transcribe-result-label {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--text-dim);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.studio-transcribe-result-icon {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.studio-transcribe-copy {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-pill);
    background: var(--glass-raised);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--dur) var(--ease),
        color var(--dur) var(--ease),
        border-color var(--dur) var(--ease);
}

.studio-transcribe-copy:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
    border-color: var(--glass-border-hover);
}

.studio-transcribe-copy.copied {
    background: var(--success-soft);
    border-color: rgba(126, 231, 135, 0.3);
    color: var(--success);
}

.studio-transcribe-copy-icon {
    width: 13px;
    height: 13px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.studio-transcribe-result-text {
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 10px 12px;
    border: 1px solid var(--hairline);
    border-radius: var(--radius-control);
    background: var(--glass-raised);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 15px;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 400px;
    overflow-y: auto;
    resize: vertical;
    transition: border-color var(--dur) var(--ease),
                box-shadow var(--dur) var(--ease);
}

.studio-transcribe-result-text:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.studio-transcribe-result-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 10px;
    border-top: 1px solid var(--hairline);
    color: var(--text-dim);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.studio-transcribe-result-sep {
    color: var(--text-dim);
    opacity: 0.6;
}

.studio-transcribe-result-meta:empty {
    display: none;
}

/* ============================================================================
   Studio gallery audio card
   ============================================================================ */

.studio-card-audio {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    aspect-ratio: 1;
    border-radius: var(--radius-control);
    background: var(--glass-sunken);
    cursor: pointer;
    transition: background var(--dur) var(--ease);
}

.studio-card-audio:hover {
    background: rgba(251, 190, 81, 0.06);
}

.studio-card-audio-icon {
    width: 48px;
    height: 48px;
    color: var(--accent);
    stroke: currentColor;
    fill: none;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.studio-card-audio-label {
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    padding: 0 12px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ============================================================================
   Reduced motion + mobile adaptations
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
    .audio-viewer-overlay,
    .audio-viewer-btn,
    .studio-speak-submit,
    .studio-transcribe-submit,
    .studio-transcribe-copy,
    .studio-transcribe-clear,
    .studio-transcribe-play,
    .studio-transcribe-player,
    .studio-transcribe-progress-fill,
    .studio-transcribe-progress-track,
    .studio-transcribe-progress-thumb,
    .studio-card-audio {
        transition: none;
    }

    .audio-viewer-loading-spinner {
        animation-duration: 1.5s;
    }

    /* Equalizer bars stay static under reduced-motion. */
    .studio-transcribe-player.is-playing .studio-transcribe-eq span {
        animation: none;
        transform: scaleY(0.6);
    }
}

@media (max-width: 600px) {
    .audio-viewer-panel {
        width: 94vw;
        padding: 24px 18px 20px;
    }

    .audio-viewer-controls {
        top: 12px;
        right: 12px;
        gap: 8px;
    }

    .audio-viewer-btn {
        width: 36px;
        height: 36px;
    }

    .studio-sound-panel {
        padding: 24px 16px 88px;
    }

    .studio-speak-controls {
        flex-direction: column;
        align-items: stretch;
    }

    .studio-speak-submit {
        margin-left: 0;
        width: 100%;
    }

    .studio-speak-controls .studio-select {
        min-width: 0;
        width: 100%;
    }

    .studio-transcribe-player {
        min-height: 220px;
        padding: 20px 16px;
    }

    .studio-transcribe-record-card {
        min-height: 180px;
        padding: 20px 16px;
    }

    .studio-transcribe-record-icon {
        width: 48px;
        height: 48px;
    }

    .studio-transcribe-record-label {
        font-size: 17px;
    }

    .studio-transcribe-record-hint {
        display: none;
    }

    .studio-transcribe-empty-icon {
        width: 48px;
        height: 48px;
    }

    .studio-transcribe-empty-text {
        font-size: 17px;
    }

    .studio-transcribe-empty-hint {
        display: none;
    }

    .studio-transcribe-play {
        width: 50px;
        height: 50px;
    }

    .studio-transcribe-file {
        max-width: 100%;
    }
}

/* --- Referral Tree View --- */
/*
   Full-screen interactive exploration of the user's referral subtree. The
   canvas hosts a D3-rendered horizontal tidy tree; pan/zoom + collapse make
   deep networks explorable. Nodes are anonymous (labelled "#N"; root "You").
   Mirrors the chat-layout full-bleed pattern: drop #spa-content padding +
   scrolling so the svg owns the surface.
*/

#spa-content:has(.referral-tree-page) {
    overflow: hidden;
    padding: 0;
}

.referral-tree-page {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    position: relative;
    overflow: hidden;
}

.referral-tree-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--hairline);
    background: var(--glass-sunken);
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
    flex-shrink: 0;
}

.referral-tree-stats {
    display: flex;
    gap: 22px;
}

.referral-tree-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.referral-tree-stat-label {
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-dim);
}

.referral-tree-stat-value {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}

.referral-tree-truncated {
    font-size: 12px;
    color: var(--accent);
    background: var(--accent-soft);
    border: 1px solid var(--accent-glow);
    padding: 5px 10px;
    border-radius: var(--radius-pill);
    opacity: 0;
    transition: opacity var(--dur) var(--ease);
    pointer-events: none;
}

.referral-tree-truncated.visible {
    opacity: 1;
    pointer-events: auto;
}

.referral-tree-canvas {
    flex: 1;
    min-height: 0;
    position: relative;
    overflow: hidden;
}

.referral-tree-svg {
    display: block;
    width: 100%;
    height: 100%;
    cursor: grab;
    touch-action: none;
}

.referral-tree-svg:active {
    cursor: grabbing;
}

.referral-tree-bg {
    fill: transparent;
}

.referral-tree-link {
    fill: none;
    stroke: rgba(255, 255, 255, 0.18);
    stroke-width: 1.5px;
}

.referral-tree-node-circle {
    fill: var(--glass-raised-strong);
    stroke: var(--glass-border-hover);
    stroke-width: 1.5px;
    cursor: pointer;
    transition: fill var(--dur) var(--ease), stroke var(--dur) var(--ease);
}

.referral-tree-node-circle:hover {
    fill: var(--accent-soft);
    stroke: var(--accent);
}

.referral-tree-node-circle.is-collapsed {
    fill: var(--accent-soft);
    stroke: var(--accent);
}

.referral-tree-node-circle.is-root {
    fill: var(--accent);
    stroke: var(--accent-glow);
    stroke-width: 2px;
}

.referral-tree-node-badge {
    font-size: 9px;
    font-weight: 700;
    text-anchor: middle;
    fill: var(--accent);
    pointer-events: none;
}

.referral-tree-node-label {
    font-size: 12px;
    font-weight: 500;
    fill: var(--text-secondary);
    pointer-events: none;
    user-select: none;
}

/* Floating zoom controls (bottom-right glass pill cluster). */
.referral-tree-controls {
    position: absolute;
    right: 16px;
    bottom: 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 6px;
    background: var(--glass-floating);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-control);
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
    box-shadow: var(--shadow-card);
    z-index: 2;
}

.referral-tree-ctrl-btn {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 10px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.referral-tree-ctrl-btn:hover {
    background: var(--glass-raised-strong);
    color: var(--text-primary);
    border-color: var(--glass-border-hover);
}

.referral-tree-ctrl-btn svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    stroke-width: 2px;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Floating anonymous node info card (top-right). */
.referral-tree-info {
    position: absolute;
    top: 16px;
    right: 16px;
    min-width: 220px;
    max-width: 280px;
    padding: 14px 16px;
    background: var(--glass-floating);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-control);
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
    box-shadow: var(--shadow-floating);
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
    transform-origin: top right;
    pointer-events: none;
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
    z-index: 3;
}

.referral-tree-info.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.referral-tree-info-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.referral-tree-info-label {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}

.referral-tree-info-close {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--text-dim);
    cursor: pointer;
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.referral-tree-info-close:hover {
    background: var(--glass-raised-strong);
    color: var(--text-primary);
}

.referral-tree-info-close svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    stroke-width: 2px;
    fill: none;
    stroke-linecap: round;
}

.referral-tree-info-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 0;
    border-top: 1px solid var(--hairline);
    font-size: 13px;
}

.referral-tree-info-row:first-of-type {
    border-top: none;
}

.referral-tree-info-row span:first-child {
    color: var(--text-dim);
}

.referral-tree-info-row span:last-child {
    color: var(--text-primary);
    font-weight: 500;
}

.referral-tree-info-hint {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--hairline);
    font-size: 11px;
    color: var(--text-dim);
    line-height: 1.4;
}

.referral-tree-page .empty-state {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 32px;
    text-align: center;
}

.referral-tree-page .empty-state-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    background: var(--accent-soft);
    border-radius: var(--radius-pill);
}

.referral-tree-page .empty-state-icon svg {
    width: 28px;
    height: 28px;
    stroke: currentColor;
    stroke-width: 1.6px;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.referral-tree-page .empty-state-title {
    font-size: 17px;
    font-weight: 600;
    color: var(--text-primary);
}

.referral-tree-page .empty-state-sub {
    font-size: 13px;
    color: var(--text-dim);
    max-width: 320px;
    line-height: 1.5;
}

@media (max-width: 600px) {
    .referral-tree-header {
        padding: 10px 12px;
    }

    .referral-tree-stats {
        gap: 16px;
    }

    .referral-tree-stat-value {
        font-size: 16px;
    }

    .referral-tree-truncated {
        display: none;
    }

    .referral-tree-info {
        top: 12px;
        right: 12px;
        left: 12px;
        max-width: none;
    }

    .referral-tree-controls {
        right: 12px;
        bottom: 12px;
    }

    .referral-tree-ctrl-btn {
        width: 34px;
        height: 34px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .referral-tree-node-circle,
    .referral-tree-truncated,
    .referral-tree-info,
    .referral-tree-ctrl-btn,
    .referral-tree-info-close {
        transition: none;
    }
}

.studio-animate-video-card { border-left: 3px solid var(--accent); }
.studio-animate-gif-card { border-left: 3px solid #06b6d4; }
.studio-animate-frame-card { border-left: 3px solid #a855f7; }