/* =====================================================================
   Vack Voice — one theme only: deep navy glass
   Loaded after app.css on every surface (app, auth, console, guest).
   ===================================================================== */

:root,
html[data-theme="dark"],
html[data-theme="light"] {
    --brand: #4C9BFF;
    --brand-dark: #6FB1FF;
    --navy: #0B1F3A;
    --tint: #122238;
    --tint-2: #0F1D31;

    --bg: #070D18;
    --bg-soft: #0B1526;
    --surface: #0E1A2E;
    --surface-2: #12213A;
    --line: rgba(255, 255, 255, .09);
    --line-strong: rgba(255, 255, 255, .17);
    --ink: #F2F7FC;
    --ink-2: #D5E2F2;
    --muted: #93A7C0;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
    --shadow-md: 0 12px 32px rgba(0, 0, 0, .42);
    --shadow-lg: 0 30px 70px rgba(0, 0, 0, .55);

    color-scheme: dark;
}

body,
body.studio {
    background:
        radial-gradient(900px 480px at 10% -6%, rgba(38, 86, 140, .40) 0%, rgba(38, 86, 140, 0) 60%),
        radial-gradient(720px 420px at 108% 4%, rgba(20, 55, 95, .50) 0%, rgba(20, 55, 95, 0) 58%),
        linear-gradient(180deg, #070D18 0%, #0A1424 55%, #081120 100%);
    background-attachment: fixed;
    color: var(--ink);
}

/* Surfaces: glass, not flat slabs */
.card,
.promptpanel,
.feature,
.panel,
.box,
.authcard,
.sheet,
.list {
    background: rgba(255, 255, 255, .045);
    border: 1px solid rgba(255, 255, 255, .09);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    box-shadow: 0 18px 44px rgba(0, 0, 0, .32), inset 0 1px 0 rgba(255, 255, 255, .05);
}

.card:hover,
.feature:hover,
.box:hover {
    border-color: rgba(255, 255, 255, .16);
}

.feature .ficon,
.picon {
    background: rgba(76, 155, 255, .14);
    color: #9CC6FF;
    border: 1px solid rgba(76, 155, 255, .22);
}

/* Inputs */
input,
textarea,
select,
.input {
    color: var(--ink);
}

input::placeholder,
textarea::placeholder {
    color: #7E93AE;
}

.input,
.promptpanel textarea,
.promptpanel input[type=text].promptinput,
select,
textarea {
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .12);
}

.input:focus,
textarea:focus,
select:focus {
    border-color: rgba(76, 155, 255, .55);
    box-shadow: 0 0 0 3px rgba(76, 155, 255, .14);
    outline: none;
}

/* Buttons */
.btn-ghost {
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .12);
    color: var(--ink);
}

.btn-ghost:hover {
    background: rgba(255, 255, 255, .09);
}

.btn-blue {
    background: linear-gradient(135deg, #3C8CE7, #1B5FA8);
    color: #fff;
    border: 0;
    box-shadow: 0 10px 24px rgba(27, 95, 168, .38);
}

/* Tables and lists */
table,
.table {
    color: var(--ink);
}

th {
    color: var(--muted);
    border-color: rgba(255, 255, 255, .08);
}

td {
    border-color: rgba(255, 255, 255, .06);
}

/* Auth surfaces */
.auth-side,
.auth-wrap,
.auth-panel {
    background: transparent;
    color: var(--ink);
}

.authh1,
.authsub {
    color: var(--ink);
}

.authsub {
    color: var(--muted);
}

/* Scrollbars */
* {
    scrollbar-color: rgba(255, 255, 255, .18) transparent;
}

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

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .16);
    border-radius: 8px;
}

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

body.studio {
    --glass: rgba(10, 18, 32, .88);
    --glass-line: rgba(255, 255, 255, .08);
}

/* Banners in dark glass */
.banner {
    background: rgba(255, 255, 255, .045);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    color: #C7D6E8;
    backdrop-filter: blur(16px);
}
.banner a { color: #8ABBF5; }
.banner.warn {
    background: rgba(201, 138, 27, .14);
    border-bottom: 1px solid rgba(201, 138, 27, .28);
    color: #F0D7A8;
}
.banner.warn a { color: #FFD79A; }
.banner.warn .bdot { background: #E0A83C; }

@media (max-height: 1000px) {
    .side { padding-top: 14px; padding-bottom: 12px; }
    .side .navlist a { padding-top: 6px; padding-bottom: 6px; }
    .side .group { margin: 9px 0 3px; }
    .upgrade { padding: 10px; }
    .upgrade .upbody { display: none; }
}

@media (max-height: 900px) {
    .helloblock { display: none; }
}

/* Landing page in the same dark glass theme */
.landing { background: radial-gradient(900px 500px at 12% -10%, rgba(38,86,140,.45), transparent 60%), linear-gradient(180deg,#070D18,#0A1424 60%,#081120); color: var(--ink); }
.landing .ghead { background: rgba(8,15,26,.88); border-bottom: 1px solid rgba(255,255,255,.07); backdrop-filter: blur(18px); }
.landing .ghead a, .landing .gnav a { color: #C3D4E8; }
.landing .ghead a:hover, .landing .gnav a:hover { color: #fff; }
.landing .lhero { background: transparent; }
.landing .lsection { background: transparent; border-top: 1px solid rgba(255,255,255,.06); }
.landing .lsection-alt { background: rgba(255,255,255,.028); }
.landing .lbadge, .landing .lic { background: rgba(76,155,255,.14); border: 1px solid rgba(76,155,255,.24); color: #A8CCFA; }
.landing .lcard, .landing .ltry-card, .landing .lprice, .landing .lshot, .landing .lfaq details, .landing .artcard {
    background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.09); backdrop-filter: blur(16px);
    box-shadow: 0 18px 40px rgba(0,0,0,.3);
}
.landing .lprice-hot { border-color: rgba(76,155,255,.45); box-shadow: 0 0 0 1px rgba(76,155,255,.25), 0 22px 50px rgba(27,95,168,.3); }
.landing .lhero-copy p[style] { background: rgba(76,155,255,.12) !important; border-color: rgba(76,155,255,.26) !important; color: #DCE9F8 !important; }
.landing .lproof div b, .landing .lnum { color: #F2F7FC; }
.landing .lproof div span, .landing .llead, .landing .lhead p { color: var(--muted); }
.landing h1, .landing h2, .landing h3, .landing h4 { color: var(--ink); }
.landing .lcta { background: rgba(255,255,255,.035); border-top: 1px solid rgba(255,255,255,.08); }
.landing .artcard { color: #EAF2FB; }
.landing .arttag { background: rgba(11,31,58,.7); color: #CFE0F5; }
.landing footer, .landing .gfoot { background: transparent; border-top: 1px solid rgba(255,255,255,.07); color: var(--muted); }
.landing .input { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); color: var(--ink); }


html body.landing {
    background:
        radial-gradient(900px 500px at 12% -10%, rgba(38, 86, 140, .45), transparent 60%),
        linear-gradient(180deg, #070D18 0%, #0A1424 60%, #081120 100%) !important;
    background-attachment: fixed !important;
    color: var(--ink);
}


/* Mobile drawer: full nav, readable, closable */
.drawer {
    width: min(322px, 86vw);
    background: linear-gradient(180deg, #0A1424, #070E18) !important;
    border-right: 1px solid rgba(255, 255, 255, .08);
    padding: 14px 12px calc(20px + env(safe-area-inset-bottom));
    gap: 0;
}
.drawer .brandrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 2px 0 12px; padding: 0 4px; }
.drawer .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.drawer .mark { width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(135deg, #3C8CE7, #1B5FA8); display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #fff; }
.drawer .brandtext b { display: block; font-size: 13px; color: #F2F7FC; }
.drawer .brandtext small { display: block; font-size: 10px; color: #93A7C0; }
.drawer .dclose { width: 32px; height: 32px; border-radius: 9px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); color: #C7D6E8; display: grid; place-items: center; }
.drawer .dclose svg { width: 15px; height: 15px; }
.drawer .helloblock { padding: 2px 6px 10px; }
.drawer .hellotop, .drawer .hellosub { margin: 0; font-size: 10.5px; color: #93A7C0; }
.drawer .helloname { margin: 1px 0 2px; font-size: 16px; font-weight: 650; color: #F2F7FC; }
.drawer .group { margin: 12px 0 4px; padding: 0 8px; font-size: 9px; letter-spacing: .13em; text-transform: uppercase; color: #7E93AE; font-weight: 700; }
.drawer .navlist { display: flex; flex-direction: column; gap: 2px; }
.drawer .navlist a { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 9px; color: #C3D4E8; text-decoration: none; font-size: 13px; font-weight: 500; }
.drawer .navlist a svg { width: 18px; height: 18px; flex: none; opacity: .9; }
.drawer .navlist a.on { background: #1B5FA8; color: #fff; }
.drawer .navlist a.on svg { opacity: 1; }
.drawer .sidefoot { margin-top: auto; padding-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.drawer .merow { display: flex; align-items: center; gap: 9px; padding: 8px; border-radius: 10px; text-decoration: none; }
.drawer .merow .avatar { width: 34px; height: 34px; border-radius: 50%; background: #1B5FA8; color: #fff; display: grid; place-items: center; font-size: 11px; font-weight: 700; }
.drawer .merow .mename { font-size: 13px; font-weight: 600; color: #EAF2FB; }
.drawer .merow .memail { display: block; font-size: 10px; color: #93A7C0; font-weight: 400; }
.drawer .signout { display: flex; align-items: center; gap: 8px; padding: 8px; border: 0; background: none; color: #A9BCD4; font: inherit; font-size: 12px; cursor: pointer; }
.drawer .signout svg { width: 16px; height: 16px; }
.drawer .upgrade { margin-top: 2px; }


@media (max-width: 900px) {
    .appbar .search input { font-size: 12.5px; }
    .appbar .search input::placeholder { text-overflow: ellipsis; }
    .pplan { white-space: nowrap; font-size: 9.5px; padding: 2px 6px; }
    #composeText { min-height: 44px; font-size: 13px; }
    .cinefoot { padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
    .appbar { padding-top: calc(10px + env(safe-area-inset-top)); }
}


/* Locked nav item (feature not on this plan) */
.navlist a.locked, .drawer .navlist a.locked { color: #8AA0BA; }
.navlist a.locked .lockmark, .drawer .navlist a.locked .lockmark {
    width: 13px; height: 13px; margin-left: auto; opacity: .75; flex: none;
}
.navlist a.locked:hover { background: rgba(255,255,255,.05); color: #C7D6E8; }


/* Landing legibility */
.landing .llead, .landing .lhead p, .landing .lcard p, .landing .lstep p { color: #B7C8DD; }
.landing .artmeta, .landing .lproof span { color: #A9BCD4; }
.landing .ghead a, .landing .gnav a { color: #D2DFEF; }


/* Keep the hero collage inside its section */
.landing .lhero { padding-bottom: 84px; }
.landing .lhero-art { height: 460px; }
.landing .artcard { box-shadow: 0 22px 50px rgba(0, 0, 0, .45); }


/* Pricing legibility and honest markers */
.landing .lamount { color: #F2F7FC !important; }
.landing .lamount span { color: #A9BCD4 !important; font-weight: 500; }
.landing .lprice h3 { color: #F2F7FC; }
.landing .lprice li { color: #C7D6E8; }
.landing .lprice li.off { color: #8FA3BC; }
.landing .lprice li.off::before { content: "\2013"; color: #8FA3BC; }
.landing .lcenter.small { color: #A9BCD4; }
.landing details summary { color: #E4EEF9; }
.landing details p { color: #B7C8DD; }


/* Dashboard composer: same material as the studio panels */
.promptpanel { position: relative; }
.promptpanel .cbar.dash {
    background: transparent; border: 0; box-shadow: none; backdrop-filter: none;
    padding: 2px 0 0; align-items: flex-end;
}
.promptpanel #promptBox {
    flex: 1; min-width: 0; min-height: 34px; max-height: 150px; padding: 7px 2px;
    background: transparent; border: 0; outline: none; resize: none;
    color: #F2F8FF; font: inherit; font-size: 14px; line-height: 1.55;
}
.promptpanel #promptBox::placeholder { color: #7E93AE; }
.dashpop {
    width: min(340px, calc(100vw - 48px));
    position: absolute; left: 0; bottom: calc(100% + 8px);
    z-index: 900; max-height: 52vh; overflow: auto;
}
.crow {
    display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
    padding: 9px 10px; border: 0; border-radius: 9px; background: none; cursor: pointer;
    font: inherit; color: #E6EEF9; font-size: 12.5px;
}
.crow:hover, .crow.on { background: rgba(255,255,255,.08); }
.crow.back { color: #9FB2C9; font-size: 11px; }
.cric { width: 18px; flex: none; display: grid; place-items: center; color: #9FB2C9; font-size: 13px; }
.crlabel { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crval { color: #8296B0; font-size: 11px; flex: none; }
.crchev { width: 13px; height: 13px; color: #6F839D; flex: none; }
.crtick { width: 14px; height: 14px; color: #6FB1FF; flex: none; }
.crnote { padding: 12px 10px; font-size: 11.5px; color: #8296B0; }
.promptrow .crlabel { white-space: normal; line-height: 1.4; }


/* Round avatars, uploaded photos */
.avatar { border-radius: 50% !important; overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar.big { width: 64px; height: 64px; font-size: 18px; }
.avatarrow { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }

/* Reel caption field */
.popfield { padding: 8px 8px 2px; }
.popfield input {
    width: 100%; padding: 9px 10px; border-radius: 9px; font: inherit; font-size: 12px;
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); color: #F2F8FF; outline: none;
}
.popfield input::placeholder { color: #7E93AE; }

/* Panels sit a little higher, with room under the composer */
.cinefoot { padding-bottom: 26px; }
.cinebody { padding-bottom: 8px; }
@media (max-width: 900px) { .cinefoot { padding-bottom: calc(20px + env(safe-area-inset-bottom)); } }


/* Dashboard composer: clearer field, stronger contrast */
.promptpanel .cbar.dash {
    background: rgba(255,255,255,.035);
    border: 1px solid rgba(255,255,255,.09);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
    border-radius: 15px;
    padding: 7px 9px;
}
.promptpanel #promptBox::placeholder { color: #9FB2C9; }
.ctag { color: #B7C8DD; }
.ctag:hover { color: #fff; }
.pmode.on, .pmode[aria-pressed="true"] { color: #fff; }
.appbar .search input::placeholder { color: #93A7C0; }


/* Banner CTA reads as a button, not a text link */
.banner > a {
    margin-left: auto; flex: none; padding: 5px 11px; border-radius: 8px;
    background: #2E7BD0; color: #fff !important; font-weight: 600; font-size: 11.5px;
    text-decoration: none; border: 1px solid rgba(255,255,255,.14);
}
.banner > a:hover { background: #3C8CE7; }


/* Library polish */
.libthumb .ph {
    background: linear-gradient(160deg, rgba(46,123,208,.22), rgba(8,14,26,.9));
    color: #B7C8DD; border: 1px solid rgba(255,255,255,.08);
    display: grid; place-items: center; text-align: center; padding: 10px; font-size: 11px;
}
.libtitle { color: #EAF2FB; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.libmeta { color: #9FB2C9; }
.libbadge { background: rgba(8,14,26,.72); color: #CFE0F5; border: 1px solid rgba(255,255,255,.12); }
.libcard { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); }
.iconact { color: #A9BCD4; }
.iconact:hover { color: #fff; }
.tabs a { color: #B7C8DD; }
.tabs a.on { background: #2E7BD0; color: #fff; }

/* Warning banners keep the palette */
.banner.warn {
    background: rgba(255, 176, 32, .1); border-bottom: 1px solid rgba(255, 176, 32, .22); color: #F4E3C2;
}
.banner.warn .bdot { background: #FFB020; }
.banner.warn a { background: #B97A12; color: #fff; }


/* Global text that arrived from the light theme */
.stat .label { color: #A9BCD4 !important; }
.stat .value { color: #F2F7FC !important; }
.card h3, .card h4 { color: #EAF2FB; }
.card p { color: #C3D4E8; }
.plan-card h3 { color: #F2F7FC; font-size: 15px; letter-spacing: -.01em; }
.plan-card ul li, .plan-card .small { color: #C7D6E8 !important; }
.plan-card .muted { color: #A9BCD4 !important; }
.plan-card .price, .plan-card .lamount { color: #fff; }
.urow .uline span { color: #B7C8DD; }
.urow .uline b { color: #F2F7FC; }
.page-sub, .muted { color: #A9BCD4; }


#studioform { position: relative; }

/* Popovers must sit above banners and panels */
.banner { position: relative; z-index: 1; }
.pop { z-index: 900; }

/* Profile pill: round avatar, no square plate */
.profile .avatar {
    border-radius: 50% !important; overflow: hidden; background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.14); color: #E6EEF9;
}
.profile .avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.profile { border-radius: 999px; }

/* Collapsed rail: name pops out on hover */
.shell.collapsed .navlist a { position: relative; }
.shell.collapsed .navlist a:hover::after {
    content: attr(data-label);
    position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%);
    padding: 6px 10px; border-radius: 8px; white-space: nowrap; z-index: 400;
    background: #0F1827; color: #EAF2FB; font-size: 12px; font-weight: 500;
    border: 1px solid rgba(255,255,255,.14); box-shadow: 0 10px 24px rgba(0,0,0,.45);
    pointer-events: none;
}


/* Mobile pass */
@media (max-width: 900px) {
    .appbar .search { display: none; }
    .profile .avatar { width: 30px; height: 30px; font-size: 10px; }
    .profile .pname { font-size: 12px; }
    .pplan { font-size: 9px; }
    .banner { flex-wrap: wrap; gap: 8px; padding: 10px 14px; }
    .banner > span:nth-child(2) { flex: 1 1 100%; }
    .banner > a { margin-left: 0; width: 100%; text-align: center; }
    .promptpanel .pmodes { gap: 6px; }
    .pmode.on { background: rgba(46,123,208,.26); color: #fff; border-color: rgba(120,180,255,.5); }
    .ctags { gap: 4px; }
    .ctag { font-size: 11px; padding: 4px 6px; }
    .dashpop { max-height: 46vh; left: 0; }
    .pop { max-height: 54vh; }

    /* Reel controls: stack, bigger taps */
    .reelctl { width: 100%; flex-wrap: wrap; gap: 6px; }
    .rctl, .rbuild { min-height: 40px; }
    .rctl { flex: 1 1 45%; justify-content: space-between; }
    .rbuild { flex: 1 1 100%; }
    .reelbar { gap: 10px; }
    .clipgrid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
    .rwin { min-height: 36px; padding: 8px 12px; }
    .cliptick { display: grid; opacity: .0; }
    .clipcard.on .cliptick { opacity: 1; }
}

@media (max-width: 560px) {
    .features { grid-template-columns: 1fr !important; }
    .grid-2 { grid-template-columns: 1fr !important; }
    .plan-card { padding: 16px; }
}

.reelhint { margin: 8px 0 0; font-size: 11.5px; color: #9FB2C9; }

@media (max-width: 900px) {
    .promptpanel #promptBox { min-height: 46px; font-size: 13.5px; }
    .promptpanel .cbar.dash { padding: 8px 10px; }
}


/* Generating state: a ring of glass with water flowing inside it. No frame. */
.cwait {
    display: flex; align-items: center; justify-content: center;
    width: 100%; padding: 26px 0 52px;
    background: none; border: 0; box-shadow: none;
}
.corbwrap { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.corb {
    position: relative; width: 190px; height: 190px; border-radius: 50%;
    display: grid; place-items: center;
    filter: drop-shadow(0 0 34px rgba(46,123,214,.30));
}
.corbcv { position: absolute; inset: 0; width: 100%; height: 100%; display: none; }
.corb.has-gl .corbcv { display: block; }
.corb.has-gl .corbfallback { display: none; }
.corbfallback {
    position: absolute; inset: 17px; border-radius: 50%; overflow: hidden;
    background:
        radial-gradient(circle at 32% 26%,
            rgba(255,255,255,.52) 0%,
            rgba(190,225,255,.18) 18%,
            rgba(40,95,160,.20) 48%,
            rgba(8,20,38,.42) 78%,
            rgba(3,9,18,.55) 100%);
    border: 1px solid rgba(190,225,255,.28);
    backdrop-filter: blur(10px) saturate(150%);
    -webkit-backdrop-filter: blur(10px) saturate(150%);
    box-shadow:
        inset 0 0 0 1px rgba(226,244,255,.18),
        inset -22px -26px 46px rgba(0,0,0,.42),
        inset 16px 18px 40px rgba(170,220,255,.24),
        0 0 70px rgba(46,123,214,.34);
}
.corbfallback::before {
    content: ''; position: absolute; inset: -12%;
    border-radius: 50%;
    background: conic-gradient(from 0deg,
        rgba(124,192,255,0) 0deg,
        rgba(150,210,255,.55) 80deg,
        rgba(46,123,214,.28) 170deg,
        rgba(255,255,255,.38) 252deg,
        rgba(124,192,255,0) 360deg);
    filter: blur(15px);
    animation: corbspin 3.4s linear infinite;
}
.corbfallback::after {
    content: ''; position: absolute; top: 11%; left: 15%;
    width: 44%; height: 30%; border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.62), rgba(255,255,255,0) 72%);
    filter: blur(4px); pointer-events: none;
}
.ctime {
    position: relative; z-index: 4;
    font-size: 17px; font-weight: 600; letter-spacing: .4px;
    color: #F2FAFF; font-variant-numeric: tabular-nums;
    text-shadow: 0 1px 8px rgba(0,0,0,.55);
}
.clabel { display: block; color: #EAF2FB; font-size: 13px; font-weight: 600; letter-spacing: .2px; }
.csub { display: block; color: #8FA6BE; font-size: 11.5px; margin-top: 6px; max-width: 340px; line-height: 1.5; }
@keyframes corbspin { to { transform: rotate(360deg); } }

/* Long prompts fold down so the work stays the star of the thread. */
.mtxt-clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.msee {
    display: block; margin-top: 6px; padding: 0; background: none; border: 0;
    color: #8CC4FF; font-size: 11.5px; font-weight: 600; cursor: pointer;
}
.msee:hover { color: #BFE0FF; }
@keyframes cdot { 0%, 60%, 100% { opacity: .25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-2px); } }

.csend.busy { position: relative; color: transparent !important; }
.csend.busy::after {
    content: ''; position: absolute; inset: 0; margin: auto; width: 14px; height: 14px;
    border-radius: 50%; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff;
    animation: cspin .8s linear infinite;
}

/* The queued video card also gets a live indicator */
.mpend .cspin {
    width: 18px; height: 18px; flex: none; border-radius: 50%;
    border: 2px solid rgba(255,255,255,.16); border-top-color: #5AA6F0;
    animation: cspin .8s linear infinite;
}


/* Results sit smaller in the thread so two or three fit on one screen */
.thread .mcard.image img, .thread .mmedia img, .cine .mcard.image img {
    max-height: 34vh; width: auto; max-width: 100%;
    border-radius: 12px; display: block; margin: 0 auto;
}
.thread .mcard { width: fit-content; max-width: 100%; }

/* One picture viewer, over the page */
.lbox { position: fixed; inset: 0; z-index: 1500; display: none; align-items: center; justify-content: center; }
.lbox.on { display: flex; }
.lbox .lbd { position: absolute; inset: 0; background: rgba(3, 7, 14, .82); backdrop-filter: blur(10px); }
.lbox .lpanel { position: relative; z-index: 2; max-width: 94vw; max-height: 92vh; display: flex; flex-direction: column; gap: 10px; }
.lbox img { max-width: 94vw; max-height: 82vh; border-radius: 14px; box-shadow: 0 40px 90px rgba(0,0,0,.6); background: #0a1220; }
.lbox .lbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; color: #cfdcec; font-size: 13px; }
.lbox .lname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 62vw; }
.lbox .ldl { color: #9ecbff; text-decoration: none; border: 1px solid rgba(120,180,255,.35); padding: 6px 14px; border-radius: 999px; }
.lbox .ldl:hover { background: rgba(120,180,255,.14); }
.lbox .lclose {
    position: absolute; top: -14px; right: -14px; z-index: 3; width: 36px; height: 36px;
    border-radius: 50%; border: 1px solid rgba(255,255,255,.18); background: #101c2e; color: #dfe9f6;
    font-size: 20px; line-height: 1; cursor: pointer;
}
@media (max-width: 700px) {
    .lbox img { max-height: 74vh; }
    .lbox .lclose { top: -10px; right: -6px; }
}


/* Tighter thread so two results sit in view without scrolling */
.thread > * + *, .cine main > * + * { margin-top: 10px; }
.thread .mrow { margin: 4px 0; }


/* Voice result: one quiet glass bar, blue, with a real progress line */
.mvoice {
    display: flex; align-items: center; gap: 14px;
    padding: 12px 14px; border-radius: 16px;
    background: linear-gradient(120deg, rgba(34,62,102,.55), rgba(13,23,39,.72));
    border: 1px solid rgba(130,190,255,.24);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 12px 30px rgba(0,0,0,.28);
    min-width: 300px; max-width: 560px; width: 100%;
}
.mvoice .playbtn {
    flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(140,195,255,.35);
    background: radial-gradient(circle at 30% 25%, #3E86D6, #1B4F8C);
    color: #fff; display: grid; place-items: center; cursor: pointer;
    box-shadow: 0 8px 20px rgba(20,70,130,.45);
}
.mvoice .playbtn svg { width: 18px; height: 18px; }
.mvoice .mvinfo { flex: 1; min-width: 0; }
.mvoice .mvtop { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.mvoice .mvtop b { color: #EAF2FB; font-size: 13px; font-weight: 600; }
.mvoice .mvtime { color: #9FB2C9; font-size: 11px; font-variant-numeric: tabular-nums; }
.mvoice .mvbar {
    display: block; width: 100%; height: 4px; padding: 0; border: 0; border-radius: 99px;
    background: rgba(255,255,255,.12); cursor: pointer; overflow: hidden;
}
.mvoice .mvbar i {
    display: block; height: 100%; width: 0%; border-radius: 99px;
    background: linear-gradient(90deg, #3C7FCC, #7CC0FF);
    box-shadow: 0 0 10px rgba(110,180,255,.6); transition: width .15s linear;
}
.mvoice .mvdwn {
    flex: none; width: 34px; height: 34px; border-radius: 50%;
    display: grid; place-items: center; color: #9FB2C9;
    border: 1px solid rgba(255,255,255,.12); text-decoration: none;
}
.mvoice .mvdwn:hover { color: #EAF2FB; border-color: rgba(140,195,255,.4); background: rgba(120,180,255,.12); }
.mvoice .mvdwn svg { width: 16px; height: 16px; }

.playbtn svg[hidden], .mvoice svg[hidden] { display: none !important; }


/* Attached reference pictures sit just above the composer */
.refchips { display: flex; gap: 8px; padding: 0 4px 8px; flex-wrap: wrap; }
.refchip { position: relative; width: 56px; height: 56px; border-radius: 10px; overflow: hidden; border: 1px solid rgba(120,180,255,.3); }
.refchip img { width: 100%; height: 100%; object-fit: cover; display: block; }
.refchip button {
    position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; border-radius: 50%;
    border: 0; background: rgba(6,12,22,.8); color: #EAF2FB; font-size: 13px; line-height: 1; cursor: pointer;
}


/* Reel Builder: one picker, three tabs, mixed pieces */
.reeltabs { display: flex; gap: 8px; margin: 4px 0 10px; }
.reeltabs .rtab {
    border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04);
    color: #A9B9CC; padding: 7px 14px; border-radius: 999px; font-size: 12.5px; cursor: pointer;
}
.reeltabs .rtab.on { color: #EAF2FB; border-color: rgba(120,180,255,.55); background: rgba(80,140,220,.22); }
.cliptab[hidden] { display: none; }
.vthumb { display: grid; place-items: center; background: linear-gradient(135deg, rgba(40,70,110,.7), rgba(16,28,46,.9)); }
.vthumb svg { width: 26px; height: 26px; color: #8FC4FF; }


/* Team seats */
.teamwrap { max-width: 720px; margin: 0 auto; padding: 28px 20px 40px; }
.teamhead h1 { color: #EAF2FB; font-size: 26px; margin: 0 0 6px; }
.teamhead p { color: #A9B9CC; font-size: 13.5px; margin: 0 0 20px; max-width: 56ch; }
.teamcard { background: rgba(20,34,54,.65); border: 1px solid rgba(120,180,255,.16); border-radius: 16px; padding: 18px; backdrop-filter: blur(14px); }
.teamrow { margin-bottom: 12px; color: #EAF2FB; }
.teamline { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-top: 1px solid rgba(255,255,255,.07); }
.teamline b { color: #EAF2FB; font-size: 13.5px; display: block; }
.teamline small { color: #93A6BD; font-size: 12px; }
.teamdrop { background: transparent; border: 1px solid rgba(255,120,120,.35); color: #FF9B9B; border-radius: 8px; padding: 6px 10px; font-size: 12px; cursor: pointer; }
.teamform { display: flex; gap: 8px; margin-top: 14px; }
.teamform input { flex: 1; background: rgba(8,16,28,.8); border: 1px solid rgba(120,180,255,.2); border-radius: 10px; color: #EAF2FB; padding: 10px 12px; font-size: 13.5px; }
.teambtn { display: inline-block; background: linear-gradient(135deg,#2F6FB8,#1B4F8C); color: #fff; border: 0; border-radius: 10px; padding: 10px 16px; font-size: 13px; text-decoration: none; cursor: pointer; }
.teamhint { color: #8FA2B9; font-size: 12px; margin: 10px 0 0; }
.teammember .teamempty, .teamempty { color: #93A6BD; font-size: 13px; }
.teamnote { border-radius: 10px; padding: 10px 12px; font-size: 13px; margin-bottom: 14px; }
.teamnote.ok { background: rgba(60,160,110,.16); color: #9BE7C0; border: 1px solid rgba(80,200,140,.25); }
.teamnote.bad { background: rgba(200,70,70,.16); color: #FFB3B3; border: 1px solid rgba(255,110,110,.25); }

/* Mobile: composer sits clear of the edge, menu stays compact */
@media (max-width: 760px) {
    .cinefoot { padding-bottom: max(14px, env(safe-area-inset-bottom)); }
    .cinefoot .cbar { padding: 6px 8px 6px 10px; border-radius: 14px; }
    .cinefoot textarea, .cinefoot .cinput { font-size: 13.5px; min-height: 38px; padding: 8px 4px; }
    .cinefoot .csend { width: 38px; height: 38px; }
    .cinefoot .cplus, .cinefoot .cmic { width: 34px; height: 34px; }
    .cinefoot .ctags { margin-top: 6px; font-size: 11.5px; }
    .dashpop, .pop {
        width: min(84vw, 300px);
        max-height: 40vh;
        overflow-y: auto;
        border-radius: 14px;
        padding: 6px;
    }
    .dashpop .poprow, .pop .poprow { padding: 8px 10px; }
    .dashpop .poprow b, .pop .poprow b { font-size: 12.5px; }
    .dashpop .poprow small, .pop .poprow small { font-size: 11px; }
}


.teamcounts { display:block; color:#7E93AB; font-size:11.5px; margin-top:2px; }
.teamactions { display:flex; align-items:center; gap:8px; }
.teamview { color:#8CC4FF; font-size:12px; text-decoration:none; border:1px solid rgba(120,180,255,.3); border-radius:8px; padding:6px 10px; }
.teamback { color:#8CC4FF; font-size:12.5px; text-decoration:none; }
.teamh2 { color:#EAF2FB; font-size:15px; margin:22px 0 10px; }
.teamgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:10px; }
.teamcell { display:block; border-radius:12px; overflow:hidden; border:1px solid rgba(120,180,255,.15); background:rgba(10,20,34,.7); }
.teamcell img, .teamcell video { width:100%; height:140px; object-fit:cover; display:block; }
.teamvoices { display:grid; gap:10px; }
.teamvoice { display:flex; align-items:center; gap:12px; background:rgba(20,34,54,.6); border:1px solid rgba(120,180,255,.15); border-radius:12px; padding:10px; }
.teamvoice audio { flex:1; height:34px; }
.teamvoice a { color:#8CC4FF; font-size:12px; }




/* ---- Reel Builder: media panel, stage, two tracks ---- */
.rx [hidden], .cwait[hidden] { display: none !important; }
.rx { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 18px; padding: 12px 22px 70px; max-width: 1400px; margin: 0 auto; }
.rxmedia { background: rgba(12,20,33,.72); border: 1px solid rgba(130,190,255,.16); border-radius: 18px; padding: 12px; max-height: calc(100vh - 120px); overflow: auto; position: sticky; top: 82px; align-self: start; }
.rxchips { display: flex; gap: 6px; margin-bottom: 10px; }
.rxchip { flex: 1; outline: none; padding: 9px 6px; border-radius: 10px; border: 1px solid transparent; background: rgba(255,255,255,.04); color: #c9d8ea; font-size: 12.5px; cursor: pointer; }
.rxchip.on { background: rgba(46,123,214,.22); border-color: rgba(130,190,255,.4); color: #fff; }
.rxgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(94px, 1fr)); gap: 8px; }
.rxempty { grid-column: 1/-1; font-size: 11.5px; color: #7f93a9; line-height: 1.5; padding: 10px 4px; }
.rxcard { border: 0; background: rgba(255,255,255,.03); border-radius: 12px; padding: 6px; text-align: left; cursor: pointer; }
.rxcard:hover { background: rgba(46,123,214,.14); }
.rxthumb { position: relative; display: block; aspect-ratio: 1/1; border-radius: 9px; overflow: hidden; background: #0a1422; }
.rxthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rxthumb i { position: absolute; right: 5px; bottom: 5px; font-style: normal; font-size: 10px; color: #dbe9f8; background: rgba(0,0,0,.55); padding: 1px 5px; border-radius: 5px; }
.rxthumb.vid, .rxthumb.aud { display: grid; place-items: center; background: linear-gradient(135deg, rgba(46,123,214,.3), rgba(8,16,28,.9)); }
.rxthumb.aud { background: linear-gradient(135deg, rgba(120,90,220,.3), rgba(8,16,28,.9)); }
.rxthumb b { font-size: 20px; color: #dceaf9; }
.rxname { display: block; font-size: 10.5px; color: #b9cbe0; margin-top: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.rxstagecol { min-width: 0; }
.rxstagewrap { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 16px; align-items: start; }
.rxstage { position: relative; height: min(52vh, 470px); aspect-ratio: 9/16; margin: 0 auto; border-radius: 18px; overflow: hidden; background: #070d17; border: 1px solid rgba(130,190,255,.16); box-shadow: 0 20px 60px rgba(0,0,0,.45); }
.rxstage img, .rxstage video { width: 100%; height: 100%; object-fit: cover; display: block; }
.rxcap { position: absolute; left: 6%; right: 6%; text-align: center; font-weight: 700; font-size: 15px; line-height: 1.3; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,.65); padding: 7px 10px; border-radius: 10px; }
.rxcap.boxed { background: rgba(8,15,26,.55); backdrop-filter: blur(6px); }
.rxcap.bold { background: rgba(0,0,0,.8); font-size: 16.5px; }
.rxcap.top { top: 6%; } .rxcap.middle { top: 50%; transform: translateY(-50%); } .rxcap.bottom { bottom: 7%; }
.rxplay { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 58px; height: 58px; border-radius: 50%; background: rgba(10,20,35,.55); border: 1px solid rgba(180,220,255,.35); color: #fff; backdrop-filter: blur(10px); cursor: pointer; display: grid; place-items: center; }
.rxplay svg { width: 22px; height: 22px; margin-left: 3px; }
.rxclock { position: absolute; left: 10px; bottom: 10px; font-size: 10px; padding: 4px 9px; color: #cfe0f2; background: rgba(0,0,0,.5); padding: 3px 8px; border-radius: 7px; }

.rxgroup { margin-bottom: 12px; background: rgba(12,20,33,.62); border: 1px solid rgba(130,190,255,.14); border-radius: 14px; padding: 12px; }
.rxlabel { font-size: 10.5px; text-transform: uppercase; letter-spacing: 1.2px; color: #8fa6be; margin: 0 0 8px; }
.rxchips.small { gap: 6px; flex-wrap: wrap; margin: 8px 0 0; }
.rxchip2 { outline: none; padding: 6px 10px; border-radius: 9px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); color: #c9d8ea; font-size: 11.5px; cursor: pointer; }
.rxchip2.on { background: rgba(46,123,214,.25); border-color: rgba(130,190,255,.45); color: #fff; }
.rxinput { width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 11px; border: 1px solid rgba(130,190,255,.2); background: rgba(6,12,22,.7); color: #eaf3ff; font-size: 13px; }
.rxmeter { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.rxmeter span { font-size: 20px; font-weight: 700; color: #EAF4FF; }
.rxmeter span.over { color: #ff8a8a; }
.rxmeter small { font-size: 11.5px; color: #8fa6be; }
.rxbuild { width: 100%; padding: 13px; border-radius: 12px; border: 0; background: linear-gradient(135deg,#2E7BD6,#1B5FA8); color: #fff; font-weight: 700; font-size: 13.5px; cursor: pointer; }
.rxbuild:disabled { opacity: .45; cursor: not-allowed; }
.rxhint { font-size: 11.5px; color: #8fa6be; margin: 8px 0 0; line-height: 1.5; }

.rxtracks { margin-top: 14px; display: grid; gap: 10px; }
.rxtrackrow { display: grid; grid-template-columns: 52px minmax(0,1fr); gap: 10px; align-items: center; }
.rxtracklbl { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: #8fa6be; }
.rxtrack { display: flex; gap: 8px; min-height: 68px; padding: 8px; border-radius: 14px; background: rgba(10,18,30,.72); border: 1px dashed rgba(130,190,255,.22); overflow-x: auto; }
.rxtrackempty { font-size: 11.5px; color: #6f849c; margin: auto 6px; }
.rxtile { position: relative; flex: 1 1 110px; min-width: 96px; max-width: 260px; border-radius: 10px; padding: 8px 22px 8px 9px; background: linear-gradient(135deg, rgba(46,123,214,.3), rgba(12,22,38,.92)); border: 1px solid rgba(130,190,255,.3); cursor: grab; }
.rxtile.voice { background: linear-gradient(135deg, rgba(120,90,220,.3), rgba(12,22,38,.92)); }
.rxtile.dragging { opacity: .45; }
.rxtiledur { font-size: 10px; color: #bcd3ea; }
.rxtilename { display: block; font-size: 11px; color: #eaf3ff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rxtilex { position: absolute; top: 1px; right: 4px; background: none; border: 0; color: #cfe0f2; font-size: 15px; line-height: 1; cursor: pointer; }

.rxresult { margin-top: 14px; }
.rxresult video { width: 100%; max-height: 420px; border-radius: 14px; background: #000; }
.rxresultbar { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 8px; font-size: 12.5px; color: #cfe0f2; }
.rxbtn { display: inline-block; padding: 8px 14px; border-radius: 10px; background: rgba(46,123,214,.3); border: 1px solid rgba(130,190,255,.35); color: #eaf4ff; text-decoration: none; font-size: 12px; }
.rxbtn.ghost { background: transparent; }

@media (max-width: 900px) {
    .rx { grid-template-columns: 1fr; padding: 8px 12px 90px; }
    .rxmedia { position: static; height: auto; max-height: 34vh; }
    .rxstagewrap { grid-template-columns: 1fr; }
    .rxstage { height: 44vh; }
    .rxgrid { grid-template-columns: repeat(3, 1fr); }
}


/* ============ Reel Builder home ============ */
.rxbody [hidden] { display: none !important; }
.rdash { max-width: 1180px; margin: 0 auto; padding: 26px 24px 70px; }
.rdhead { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.rdeyebrow { margin: 0 0 6px; font-size: 11px; letter-spacing: 1.7px; text-transform: uppercase; color: #7fb2e8; }
.rdhead h1 { margin: 0; font-size: 34px; letter-spacing: -.6px; color: #F2F8FF; }
.rdsub { margin: 8px 0 0; font-size: 13px; color: #93a8bf; max-width: 520px; line-height: 1.5; }
.rdplan { font-size: 11.5px; color: #bcd3ea; background: rgba(46,123,214,.16); border: 1px solid rgba(130,190,255,.26); padding: 7px 12px; border-radius: 999px; }
.rdcreate { display: flex; align-items: center; gap: 16px; padding: 20px 22px; border-radius: 18px; background: linear-gradient(120deg, rgba(46,123,214,.24), rgba(10,18,30,.92)); border: 1px solid rgba(130,190,255,.3); color: #eaf4ff; text-decoration: none; margin-bottom: 26px; transition: transform .15s, border-color .15s; }
.rdcreate:hover { transform: translateY(-1px); border-color: rgba(160,210,255,.55); }
.rdplus { width: 46px; height: 46px; border-radius: 14px; background: rgba(46,123,214,.4); display: grid; place-items: center; font-size: 24px; line-height: 1; }
.rdcreatetxt { display: flex; flex-direction: column; gap: 3px; }
.rdcreatetxt b { font-size: 16px; }
.rdcreatetxt small { font-size: 12px; color: #93a8bf; }
.rdarrow { margin-left: auto; font-size: 18px; color: #9cc8f5; }
.rdreelshead { display: flex; justify-content: space-between; align-items: center; margin: 8px 0 12px; }
.rdreelshead h2 { margin: 0; font-size: 15px; letter-spacing: .3px; color: #dbe9f8; }
.rdlink { font-size: 12px; color: #8fc3ff; text-decoration: none; }
.rdgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.rdcard { background: rgba(12,20,33,.66); border: 1px solid rgba(130,190,255,.14); border-radius: 16px; padding: 8px; }
.rdcard video { width: 100%; aspect-ratio: 9/16; object-fit: cover; border-radius: 12px; background: #000; display: block; }
.rdcardmeta { display: flex; justify-content: space-between; font-size: 11px; color: #93a8bf; padding: 8px 4px 6px; }
.rdcardacts { display: flex; justify-content: flex-end; }
.rdempty { border: 1px dashed rgba(130,190,255,.24); border-radius: 16px; padding: 34px 20px; text-align: center; color: #93a8bf; }
.rdempty p { margin: 0 0 6px; color: #dbe9f8; font-size: 14px; }
.rdempty small { font-size: 12px; }

/* ============ Reel editor ============ */
html:has(body.rxbody) { height: 100%; }
body.rxbody { height: 100%; overflow: hidden; background: radial-gradient(1200px 600px at 50% -10%, #0d1b2e 0%, #060b14 55%) fixed; color: #e8f1fb; }
.rxe { max-width: 1500px; margin: 0 auto; padding: 0 18px 40px; }
.rxebar { height: 64px; display: flex; align-items: center; gap: 14px; border-bottom: 1px solid rgba(130,190,255,.12); margin-bottom: 16px; }
.rxback { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; background: rgba(255,255,255,.05); border: 1px solid rgba(130,190,255,.18); color: #cfe0f2; }
.rxback svg { width: 18px; height: 18px; }
.rxetitle b { display: block; font-size: 15px; }
.rxetitle span { font-size: 11.5px; color: #8fa6be; }
.rxecount { margin-left: auto; font-size: 12px; color: #cfe0f2; background: rgba(46,123,214,.16); border: 1px solid rgba(130,190,255,.22); padding: 6px 12px; border-radius: 999px; }
.rxecount.over { color: #ffb4b4; border-color: rgba(255,120,120,.45); background: rgba(255,80,80,.12); }
.rxegrid { display: grid; grid-template-columns: 258px minmax(0,1fr) 268px; gap: 16px; align-items: start; }
.rximport { background: rgba(12,20,33,.7); border: 1px solid rgba(130,190,255,.14); border-radius: 16px; padding: 12px; position: sticky; top: 12px; }
.rximportbig { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 18px 10px; border-radius: 13px; border: 1px dashed rgba(130,190,255,.42); background: rgba(46,123,214,.09); color: #eaf4ff; cursor: pointer; }
.rximportbig:hover { background: rgba(46,123,214,.16); }
.rxibico { font-size: 20px; color: #9cc8f5; }
.rximportbig b { font-size: 13px; }
.rximportbig small { color: #8fa6be; font-size: 11px; }
.rxthree { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; margin-top: 10px; }
.rxmini { padding: 10px 4px; border-radius: 11px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.03); color: #cfe0f2; cursor: pointer; font-size: 10.5px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.rxmini:hover { border-color: rgba(130,190,255,.4); }
.rxmini span { font-size: 14px; }
.rxtray { margin-top: 4px; display: flex; flex-direction: column; gap: 6px; max-height: 44vh; overflow: auto; }
.rxtrayitem { display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: 10px; background: rgba(255,255,255,.03); border: 1px solid rgba(130,190,255,.16); cursor: grab; }
.rxtrayitem:hover { border-color: rgba(130,190,255,.4); }
.rxtrayart { width: 34px; height: 34px; border-radius: 7px; background: rgba(46,123,214,.25); display: grid; place-items: center; font-size: 13px; overflow: hidden; flex: 0 0 auto; }
.rxtrayitem.voice .rxtrayart { background: rgba(120,90,220,.28); }
.rxtrayart img { width: 100%; height: 100%; object-fit: cover; }
.rxtrayname { font-size: 11px; color: #dbe9f8; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rxtrayact { color: #8fc3ff; font-size: 15px; padding-right: 4px; }
.rxtrayempty { font-size: 11.5px; color: #7f93a9; padding: 8px 4px; margin: 0; }

.rxmid { min-width: 0; }
.rxright .rxgroup { background: rgba(12,20,33,.66); }
.rxbuildgroup { display: flex; flex-direction: column; gap: 8px; }
.rxstage.shake { animation: rxshake .4s ease; }
@keyframes rxshake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-5px)} 50%{transform:translateX(5px)} 75%{transform:translateX(-3px)} }
.rxtrack.over { border-color: rgba(140,200,255,.6); background: rgba(46,123,214,.12); }

/* picker */
.rxmodal { position: fixed; inset: 0; z-index: 80; background: rgba(3,7,14,.74); backdrop-filter: blur(10px); display: grid; place-items: center; padding: 20px; }
.rxmodalsheet { width: min(820px, 100%); max-height: 84vh; display: flex; flex-direction: column; background: #0b1524; border: 1px solid rgba(130,190,255,.22); border-radius: 18px; overflow: hidden; box-shadow: 0 30px 90px rgba(0,0,0,.55); }
.rxmodalhead { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid rgba(130,190,255,.12); }
.rxmodalhead b { font-size: 14px; }
.rxmodalx { background: none; border: 0; color: #cfe0f2; font-size: 22px; line-height: 1; cursor: pointer; }
.rxmodgrid { padding: 14px 16px; overflow: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.rxmodcard { position: relative; border: 1px solid rgba(130,190,255,.16); background: rgba(255,255,255,.03); border-radius: 12px; padding: 7px; text-align: left; cursor: pointer; }
.rxmodcard.on { border-color: #4a9bff; box-shadow: 0 0 0 1px rgba(74,155,255,.6) inset; background: rgba(46,123,214,.16); }
.rxtick { position: absolute; top: 8px; right: 8px; width: 20px; height: 20px; border-radius: 50%; background: #2E7BD6; color: #fff; font-size: 12px; display: none; place-items: center; }
.rxmodcard.on .rxtick { display: grid; }
.rxmodalempty { grid-column: 1/-1; color: #8fa6be; font-size: 12.5px; padding: 20px 4px; }
.rxmodalfoot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-top: 1px solid rgba(130,190,255,.12); font-size: 12px; color: #93a8bf; }
.rxmodalfoot .rxbuild { width: auto; padding: 10px 18px; }

/* build overlay */
.rxoverlay { position: fixed; inset: 0; z-index: 90; background: rgba(4,8,15,.9); backdrop-filter: blur(14px); display: grid; place-items: center; padding: 24px; }
.rxorbwrap { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.rxorbwrap .corb { width: 150px; height: 150px; position: relative; display: grid; place-items: center; }
.rxdone { display: flex; flex-direction: column; align-items: center; gap: 12px; width: min(460px, 100%); text-align: center; }
.rxcheck { width: 54px; height: 54px; border-radius: 50%; background: rgba(46,196,125,.16); border: 1px solid rgba(70,220,150,.55); color: #7ff0b5; display: grid; place-items: center; font-size: 26px; }
.rxdone b { font-size: 18px; color: #F2F8FF; }
.rxdone video { width: 100%; max-height: 52vh; border-radius: 14px; background: #000; }
.rxdoneacts { display: flex; gap: 8px; }

@media (max-width: 1100px) {
    .rxegrid { grid-template-columns: 1fr; }
    .rximport { position: static; }
    .rxstage { height: 46vh; }
    .rxright { order: 3; }
}


/* ================= Clean reel editor ================= */
.rle { height: 100dvh; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.rle [hidden] { display: none !important; }
.rlebar { flex: 0 0 auto; border-bottom: 1px solid rgba(255,255,255,.06); }
.rlebarin { max-width: 860px; margin: 0 auto; height: 58px; display: flex; align-items: center; gap: 12px; padding: 0 16px; }
.rleback { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; background: #12243B; border: 1px solid #263A55; color: #cfe0f2; }
.rleback svg { width: 17px; height: 17px; }
.rletitle b { display: block; font-size: 13.5px; color: #EAF3FF; font-weight: 600; }
.rletitle small { font-size: 10.5px; color: #7f93a9; }
.rledur { margin-left: auto; font-size: 11.5px; color: #b9cbe0; font-variant-numeric: tabular-nums; }
.rledur.over { color: #ff9c9c; }
.rleprimary { border: 0; border-radius: 9px; background: #2E7BD6; color: #fff; font-size: 12.5px; font-weight: 600; padding: 9px 18px; cursor: pointer; text-decoration: none; display: inline-block; }
.rleprimary:disabled { opacity: .38; cursor: not-allowed; }
.rleprimary.wide { width: 100%; text-align: center; margin-top: 8px; padding: 12px; }

.rlemain { flex: 1; min-height: 0; overflow: hidden; width: 100%; max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 12px 14px max(12px, env(safe-area-inset-bottom)); }
.rlestagewrap { flex: 1 1 auto; min-height: 0; width: 100%; display: flex; align-items: center; justify-content: center; }
.rlestage { position: relative; height: 100%; width: auto; max-height: 100%; aspect-ratio: 9/16; border-radius: 12px; overflow: hidden; background: #04080f; box-shadow: 0 18px 50px rgba(0,0,0,.55); }
.rlestage.shake { animation: rleShake .4s ease; }
@keyframes rleShake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-5px)} 50%{transform:translateX(5px)} 75%{transform:translateX(-3px)} }
.rlestage img, .rlestage video { width: 100%; height: 100%; object-fit: cover; display: block; }
.rleplay { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 54px; height: 54px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); background: rgba(8,14,24,.5); backdrop-filter: blur(8px); color: #fff; display: grid; place-items: center; cursor: pointer; }
.rleplay svg { width: 20px; height: 20px; margin-left: 3px; }
.rleclock { position: absolute; left: 8px; bottom: 8px; font-size: 10px; color: #dbe9f8; background: rgba(0,0,0,.5); padding: 3px 7px; border-radius: 5px; }
.rlecap { position: absolute; left: 7%; right: 7%; text-align: center; font-size: 13px; font-weight: 700; line-height: 1.3; color: #fff; padding: 6px 9px; border-radius: 8px; background: rgba(0,0,0,.22); text-shadow: 0 2px 6px rgba(0,0,0,.75); }
.rlecap.boxed { background: rgba(0,0,0,.5); backdrop-filter: blur(4px); }
.rlecap.bold { background: #000; font-size: 14px; }
.rlecap.top { top: 7%; } .rlecap.middle { top: 50%; transform: translateY(-50%); } .rlecap.bottom { bottom: 9%; }

.rletimeline { flex: 0 0 auto; position: relative; width: 100%; background: rgba(255,255,255,.022); border: 1px solid rgba(255,255,255,.06); border-radius: 12px; padding: 8px 8px 8px 2px; }
.rleruler { display: flex; justify-content: space-between; padding: 0 8px 5px 40px; font-size: 9px; color: #6d829a; letter-spacing: .3px; }
.rlerow { display: flex; align-items: center; gap: 8px; height: 50px; }
.rlerow + .rlerow { margin-top: 4px; }
.rlelabel { width: 20px; text-align: center; font-size: 9.5px; color: #6d829a; }
.rleclips { flex: 1; height: 100%; display: flex; gap: 3px; padding: 2px; border-radius: 8px; background: rgba(255,255,255,.045); overflow-x: auto; }
.rleclips.over { background: rgba(46,123,214,.16); }
.rleempty { margin: auto; padding-left: 8px; font-size: 10.5px; color: #6d829a; }
.rleclip { position: relative; min-width: 46px; border-radius: 6px; overflow: hidden; background: #131d2b; border: 1px solid rgba(255,255,255,.07); cursor: grab; }
.rleclip img, .rleclip video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .78; }
.rleclip.voice { background: linear-gradient(135deg, #2a2250, #131a2b); }
.rleclip.dragging { opacity: .4; }
.rleclipdur { position: absolute; left: 5px; bottom: 3px; z-index: 2; font-size: 9px; color: #e4eefb; text-shadow: 0 1px 4px #000; }
.rleclip::after { content: ''; position: absolute; inset: auto 0 0 0; height: 46%; background: linear-gradient(to top, rgba(0,0,0,.6), transparent); pointer-events: none; }
.rleclipx { position: absolute; top: 2px; right: 2px; z-index: 3; width: 15px; height: 15px; border-radius: 50%; border: 0; background: rgba(0,0,0,.6); color: #fff; font-size: 10px; line-height: 1; cursor: pointer; opacity: 0; }
.rleclip:hover { border-color: rgba(90,168,255,.55); }
.rleclip:hover .rleclipx { opacity: 1; }
.rlewave { display: flex; align-items: center; gap: 2px; height: 24px; }
.rlewave i { width: 2px; height: 30%; background: #8f7df0; border-radius: 2px; }
.rlewave i:nth-child(2n) { height: 72%; }
.rlewave i:nth-child(3n) { height: 46%; }
.rleplayhead { position: absolute; top: 24px; bottom: 8px; width: 1px; background: #5aa8ff; box-shadow: 0 0 7px rgba(90,168,255,.9); z-index: 4; pointer-events: none; }

.rletools { flex: 0 0 auto; display: flex; gap: 6px; width: 100%; }
.rletool { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 6px; border-radius: 10px; border: 1px solid rgba(255,255,255,.07); background: rgba(255,255,255,.03); color: #cfe0f2; font-size: 11.5px; cursor: pointer; }
.rletool span { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; background: rgba(46,123,214,.26); font-size: 10px; color: #cfe6ff; }
.rletool:hover { border-color: rgba(90,168,255,.35); }
.rletool.primary { background: rgba(46,123,214,.2); border-color: rgba(90,168,255,.4); color: #fff; }
.rletool.primary span { background: #2E7BD6; color: #fff; }
.rleplaceholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; padding: 20px; background: radial-gradient(120% 90% at 50% 0%, rgba(46,123,214,.14), rgba(4,8,15,.2) 60%); }
.rleplaceholder span { font-size: 26px; color: #3f6f9f; }
.rleplaceholder b { font-size: 12.5px; color: #b9cbe0; font-weight: 600; }
.rleplaceholder small { font-size: 10.5px; color: #6d829a; max-width: 210px; line-height: 1.5; }

.rletoast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 120; background: rgba(12,20,33,.94); border: 1px solid rgba(255,255,255,.12); color: #eaf3ff; font-size: 11px; padding: 8px 12px; border-radius: 8px; max-width: 88%; text-align: center; transition: opacity .3s; z-index: 6; }
.rletoast.out { opacity: 0; }

.rlesheet[hidden] { display: none !important; }
.rlesheet { position: fixed; inset: 0; z-index: 70; background: rgba(3,7,14,.72); backdrop-filter: blur(10px); display: flex; align-items: flex-end; justify-content: center; }
.rlesheetbox { width: min(540px, 100%); max-height: 84vh; overflow: auto; background: #0a1421; border: 1px solid rgba(255,255,255,.08); border-radius: 16px 16px 0 0; padding: 14px; }
.rlesheethead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.rlesheethead b { font-size: 13.5px; color: #EAF3FF; }
.rlesheetx { background: none; border: 0; color: #9fb2c9; font-size: 20px; line-height: 1; cursor: pointer; }
.rleupbtn { width: 100%; margin: 10px 0 12px; padding: 13px; border-radius: 11px; border: 1px dashed rgba(90,168,255,.45); background: rgba(46,123,214,.07); color: #eaf3ff; font-size: 12px; display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer; }
.rleupbtn small { font-size: 10px; color: #8fa6be; }
.rletabs { display: flex; gap: 5px; margin-bottom: 10px; }
.rletab { flex: 1; padding: 7px 4px; border-radius: 8px; border: 1px solid transparent; background: rgba(255,255,255,.03); color: #b9cbe0; font-size: 11px; cursor: pointer; }
.rletab.on { background: rgba(46,123,214,.22); border-color: rgba(90,168,255,.4); color: #fff; }
.rlegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 7px; max-height: 40vh; overflow: auto; }
.rlecard { padding: 4px; border-radius: 9px; border: 1px solid rgba(255,255,255,.07); background: rgba(255,255,255,.02); text-align: left; cursor: pointer; }
.rlecard:hover { border-color: rgba(90,168,255,.4); }
.rleart { position: relative; display: block; aspect-ratio: 1/1; border-radius: 6px; overflow: hidden; background: #101a26; }
.rleart img, .rleart video { width: 100%; height: 100%; object-fit: cover; }
.rleart i { position: absolute; right: 3px; bottom: 3px; font-style: normal; font-size: 8.5px; color: #dbe9f8; background: rgba(0,0,0,.55); padding: 1px 4px; border-radius: 4px; }
.rlearticon { display: grid; place-items: center; height: 100%; font-size: 18px; color: #a99cff; }
.rlcname { display: block; margin-top: 4px; font-size: 9.5px; color: #b9cbe0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rlehint { font-size: 10px; color: #6f849c; margin: 9px 0 0; }
.rleempty { color: #6f849c; font-size: 11px; padding: 14px 4px; }

.rlegen { width: 100%; margin-top: 10px; padding: 11px; border-radius: 10px; border: 1px solid rgba(90,168,255,.4); background: rgba(46,123,214,.12); color: #eaf3ff; font-size: 12px; display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer; }
.rlegen small { font-size: 9.5px; color: #8fa6be; }
.rlegen:disabled { opacity: .6; cursor: wait; }
.rlearea { resize: vertical; min-height: 74px; line-height: 1.45; }
.rleinput { width: 100%; box-sizing: border-box; margin: 10px 0; padding: 11px; border-radius: 10px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.03); color: #eaf3ff; font-size: 13px; }
.rlechips { display: flex; gap: 5px; margin-bottom: 8px; }
.rlechip { flex: 1; padding: 8px; border-radius: 8px; border: 1px solid rgba(255,255,255,.09); background: rgba(255,255,255,.03); color: #b9cbe0; font-size: 11px; cursor: pointer; }
.rlechip.on { background: rgba(46,123,214,.24); border-color: rgba(90,168,255,.45); color: #fff; }
.rleopts { display: flex; flex-direction: column; gap: 5px; margin: 10px 0; }
.rleopt { display: flex; flex-direction: column; gap: 1px; padding: 11px; border-radius: 10px; border: 1px solid rgba(255,255,255,.09); background: rgba(255,255,255,.03); color: #eaf3ff; text-align: left; font-size: 12px; cursor: pointer; }
.rleopt small { color: #8fa6be; font-size: 10px; }
.rleopt.on { border-color: rgba(90,168,255,.5); background: rgba(46,123,214,.16); }

.rleoverlay { position: fixed; inset: 0; z-index: 90; background: rgba(4,8,15,.94); backdrop-filter: blur(14px); display: grid; place-items: center; padding: 20px; }
.rleorb { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.rleorb .corb { width: 140px; height: 140px; }
.rleorb b { font-size: 14px; color: #EAF3FF; }
.rleorb small { font-size: 11px; color: #8fa6be; }
.rledone { display: flex; flex-direction: column; align-items: center; gap: 10px; width: min(400px, 100%); text-align: center; }
.rlecheck { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: rgba(60,200,130,.14); border: 1px solid rgba(80,220,150,.5); color: #7ff0b5; font-size: 22px; }
.rledone b { font-size: 15px; color: #EAF3FF; }
.rledone video { width: 100%; max-height: 48vh; border-radius: 10px; background: #000; }
.rledoneacts { display: flex; gap: 7px; }
.rleghost { padding: 9px 16px; border-radius: 9px; border: 1px solid rgba(255,255,255,.16); color: #dbe9f8; font-size: 12px; text-decoration: none; }

@media (min-width: 760px) {
    .rlesheet { align-items: center; padding: 24px; }
    .rlesheetbox { border-radius: 16px; }
}
@media (max-width: 640px) {
    .rlebar { height: 50px; padding: 0 10px; gap: 8px; }
    .rlebarin { height: 50px; padding: 0 2px; }
    .rlemain { padding: 8px 10px max(8px, env(safe-area-inset-bottom)); gap: 8px; }
    .rleruler { display: none; }
    .rlerow { height: 40px; }
    .rlerow + .rlerow { margin-top: 3px; }
    .rletimeline { padding: 6px 6px 6px 0; }
    .rletool { padding: 9px 4px; font-size: 10.5px; }
    .rletitle small { display: block; font-size: 9.5px; line-height: 1.2; }
    .rledur { font-size: 10.5px; }
    .rleprimary { padding: 8px 14px; font-size: 12px; }
    .rleplay { width: 46px; height: 46px; }
    .rleplay svg { width: 17px; height: 17px; }
    .rlecap { font-size: 12px; }
}

@media (max-height: 720px) and (max-width: 640px) {
    .rlerow { height: 34px; }
    .rletool { padding: 7px 4px; }
    .rlecap { font-size: 11px; }
}


/* Mobile build action: one full width button, header keeps the word */
.rleheadlabel { display: none; font-size: 12.5px; font-weight: 600; color: #9fb6cc; letter-spacing: .2px; }
.rlebuildbig { display: none; }

@media (max-width: 640px) {
    .rleheadlabel { display: inline-block; margin-left: auto; margin-right: 10px; }
    .rlebar #rleBuild { display: inline-flex; padding: 7px 12px; font-size: 12px; }
    .rlebar .rledur { display: none; }
    .rlebuildbig {
        display: block; flex: 0 0 auto; width: 100%; padding: 13px;
        border: 0; border-radius: 12px; background: #2E7BD0; color: #fff;
        font-size: 13.5px; font-weight: 700; letter-spacing: .2px;
        box-shadow: 0 8px 22px rgba(46,123,208,.28);
    }
    .rlebuildbig:disabled { opacity: .45; box-shadow: none; }
}

/* Trial and plan bar: compact, two parts, turns red near the end */
.trialbar {
    display: flex; align-items: center; gap: 10px;
    padding: 6px 14px; font-size: 11.5px;
    background: rgba(201,138,27,.12); border-bottom: 1px solid rgba(201,138,27,.26);
    color: #F0D7A8;
}
.trialbar .tb { display: flex; align-items: center; gap: 7px; min-width: 0; }
.trialbar .tb b { font-weight: 650; color: #FFD79A; }
.trialbar .tb em { font-style: normal; color: #D9BE8C; }
.trialbar a, .trialbar button {
    margin-left: auto; flex: none; padding: 4px 11px; border-radius: 7px;
    background: rgba(201,138,27,.22); border: 1px solid rgba(224,168,60,.35);
    color: #FFE0AE; font-size: 11px; font-weight: 600; text-decoration: none; cursor: pointer;
}
.trialbar.hot { background: rgba(198,60,52,.14); border-bottom-color: rgba(198,60,52,.32); color: #F6C9C4; }
.trialbar.hot .tb b { color: #FFB3AA; }
.trialbar.hot .tb em { color: #EDA9A2; }
.trialbar.hot a, .trialbar.hot button { background: rgba(198,60,52,.24); border-color: rgba(230,110,100,.4); color: #FFD2CC; }
.trialbar.paid { background: rgba(255,255,255,.04); border-bottom-color: rgba(255,255,255,.07); color: #A9BDD2; }
.trialbar.paid .tb b { color: #DCEAF8; }
.trialbar.paid button { background: transparent; border-color: rgba(255,255,255,.16); color: #C7D6E8; }
.trialbar form { margin-left: auto; display: flex; }

@media (max-width: 640px) {
    .trialbar { padding: 5px 11px; font-size: 10.5px; gap: 8px; }
    .trialbar .tb { gap: 6px; }
    .trialbar a, .trialbar button { padding: 3px 9px; font-size: 10px; }
}


/* Pick several at once; voices are long audio rows */
.rlegrid { align-content: start; }
.rlecard { position: relative; }
.rlecard.picked { border-color: rgba(90,168,255,.65); background: rgba(46,123,214,.16); }
.rlecheck { position: absolute; top: 4px; left: 4px; width: 15px; height: 15px; border-radius: 4px; border: 1.5px solid rgba(255,255,255,.45); background: rgba(0,0,0,.35); }
.rlecheck.on { background: #2E7BD0; border-color: #2E7BD0; }
.rlecheck.on::after { content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }

.rlegrid.voices { grid-template-columns: 1fr; gap: 6px; }
.rlevrow { display: flex; align-items: center; gap: 10px; padding: 7px 9px; border-radius: 10px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.025); cursor: pointer; position: relative; }
.rlevrow.picked { border-color: rgba(90,168,255,.6); background: rgba(46,123,214,.15); }
.rlevplay { flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(255,255,255,.14); background: rgba(46,123,214,.28); color: #dbeaff; display: grid; place-items: center; cursor: pointer; }
.rlevplay svg { width: 12px; height: 12px; }
.rlevplay.playing { background: #2E7BD0; color: #fff; }
.rlevtext { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 1px; }
.rlevtext b { font-size: 11.5px; font-weight: 600; color: #e4eefb; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rlevtext small { font-size: 9.5px; color: #7e93aa; }
.rlevrow .rlecheck { position: static; margin-left: auto; flex: none; }
.rleaddbar { margin-top: 10px; }
.rleaddbar .rleprimary { width: 100%; padding: 12px; font-size: 12.5px; }
.rleaddbar .rleprimary:disabled { opacity: .4; }


/* Reel size picker */
.rleopt b em { font-style: normal; font-weight: 500; font-size: 10.5px; color: #8fb3d6; margin-left: 6px; }
.rleopt.on b em { color: #cfe6ff; }
.rletool b { font-weight: 600; }

@media (max-width: 640px) {
    .rlemain { padding: 10px 14px max(10px, env(safe-area-inset-bottom)); }
    .rletool { font-size: 10px; gap: 5px; padding: 9px 2px; }
    .rletool span { width: 17px; height: 17px; font-size: 9.5px; }
}


/* Sign out inside the profile dropdown: quiet blue, not an alarm */
.pmenu .pout {
    display: flex; align-items: center; gap: 8px; width: 100%;
    margin-top: 6px; padding: 9px 10px;
    border: 0; border-top: 1px solid rgba(255,255,255,.07); border-radius: 0 0 10px 10px;
    background: transparent; color: #5FA8F0; font-size: 12.5px; font-weight: 550;
    text-align: left; cursor: pointer;
}
.pmenu .pout svg { width: 14px; height: 14px; opacity: .85; }
.pmenu .pout:hover { background: rgba(46,123,208,.14); color: #8CC4FF; }


/* Mobile menu button: impossible to miss */
.iconbtn.menu-only .mlabel { display: none; }
@media (max-width: 860px) {
    .iconbtn.menu-only {
        display: inline-flex; align-items: center; gap: 6px;
        width: auto; height: 36px; padding: 0 12px;
        border-radius: 10px; border: 1px solid rgba(90,168,255,.45);
        background: rgba(46,123,208,.18); color: #cfe6ff;
        font-size: 12px; font-weight: 600; letter-spacing: .2px;
    }
    .iconbtn.menu-only svg { width: 16px; height: 16px; }
    .iconbtn.menu-only .mlabel { display: inline; }
}
/* When the rail is closed, the whole strip opens it */
.shell.collapsed .side:hover { background: rgba(46,123,208,.10); }


/* Honest "not yet" panel for engines that are off */
.soonbox { width: min(680px, 100%); margin: 0 auto; padding: 16px 18px; border-radius: 14px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.03); }
.soonbox b { display: block; font-size: 13.5px; color: #EAF3FF; margin-bottom: 5px; }
.soonbox p { margin: 0 0 11px; font-size: 12px; line-height: 1.55; color: #93A8BF; }
.soonacts { display: flex; gap: 8px; flex-wrap: wrap; }
.soonacts a { padding: 8px 13px; border-radius: 9px; background: rgba(46,123,208,.18); border: 1px solid rgba(90,168,255,.4); color: #CFE6FF; font-size: 12px; text-decoration: none; }
.soonacts a:hover { background: rgba(46,123,208,.3); }

/* --- contrast + dashboard recent/continue (Nov 2026) --- */
.side .group { color: #9FB4CE !important; }
.drawer .group { color: #9FB4CE; }
.soon { display:inline-block; margin-left:6px; padding:2px 7px; border-radius:99px; font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; background:rgba(46,123,208,.18); border:1px solid rgba(90,168,255,.32); color:#9FC7F2; vertical-align:middle; }
.contcard { border-color: rgba(90,168,255,.28); }
.recentwrap { margin-top: 4px; }
.recentgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:10px; }
.recentcard { display:flex; flex-direction:column; gap:2px; padding:8px; border-radius:12px; background:rgba(12,20,33,.62); border:1px solid rgba(130,190,255,.14); text-decoration:none; color:inherit; transition:border-color .15s ease, transform .15s ease; }
.recentcard:hover { border-color: rgba(90,168,255,.42); transform: translateY(-1px); }
.rthumb { display:flex; align-items:center; justify-content:center; aspect-ratio:1/1; border-radius:8px; overflow:hidden; background:rgba(255,255,255,.04); margin-bottom:6px; }
.rthumb img { width:100%; height:100%; object-fit:cover; display:block; }
.rkind { font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:#8FB2D6; }
.rtitle { font-size:12.5px; color:#E8F1FB; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rmeta { font-size:11px; color:#8CA2BC; }

/* --- clip trim/split + caption error + export panel (Nov 2026) --- */
.rlemark { position:absolute; top:26px; bottom:8px; width:2px; background:#FFB454; box-shadow:0 0 0 3px rgba(255,180,84,.16); border-radius:2px; pointer-events:none; z-index:6; }
.rlefield { display:block; margin:10px 0 4px; font-size:12px; color:#A9C0D8; }
.rlefield span { display:flex; justify-content:space-between; margin-bottom:6px; }
.rlefield b { color:#EAF3FF; font-weight:600; }
.rlefield input[type=range] { width:100%; accent-color:#4C9BE8; }
.rlecaperr { margin:10px 0 4px; padding:10px 12px; border-radius:10px; background:rgba(190,60,60,.13); border:1px solid rgba(255,120,120,.34); }
.rlecaperr p { margin:0 0 8px; font-size:12px; line-height:1.5; color:#FFC9C9; }
.rlecaperracts { display:flex; gap:8px; flex-wrap:wrap; }
.rleclipacts { display:flex; gap:8px; margin:12px 0 6px; }
.rleclipacts .rleghost { flex:1; }
.rleghost.danger { color:#FFB4B4; border-color:rgba(255,120,120,.3); }
.rledonesub { margin:-6px 0 10px; font-size:12px; color:#9FB6CE; }

.rlebuildinsheet { width:100%; margin-top:8px; }

/* --- text overlays + music sheet (Nov 2026) --- */
.rleoverlays { position:absolute; inset:0; pointer-events:none; z-index:4; }
.rlov { position:absolute; transform:translate(-50%,-50%); max-width:86%; text-align:center; line-height:1.15;
  font-weight:700; letter-spacing:-.01em; text-shadow:0 2px 10px rgba(0,0,0,.55); white-space:pre-wrap; pointer-events:auto; cursor:pointer; }
.rlov.plate { background:rgba(0,0,0,.55); padding:.18em .42em; border-radius:.18em; text-shadow:none; }
.rletextlist { margin-top:10px; display:grid; gap:6px; }
.rlerowline { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:7px 9px; border-radius:9px; background:rgba(255,255,255,.04); border:1px solid rgba(130,190,255,.14); font-size:12px; color:#DCE9F7; }
.rlerowline span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rlecheckrow { display:flex; align-items:flex-start; gap:8px; margin:10px 0 4px;
    font-size:12px; line-height:1.5; color:#A9C0D8; }
.rlecheckrow input { accent-color:#4C9BE8; margin:2px 0 0; flex:none; }
.rlecheckrow span { display:block; }
.rletools { overflow-x:auto; }

/* --- caption styles + plates (Nov 2026) --- */
.rlecap.creator { font-weight:800; letter-spacing:-.015em; text-shadow:0 3px 14px rgba(0,0,0,.62); }
.rlecap.professional { font-weight:600; text-shadow:0 2px 9px rgba(0,0,0,.55); }
.rlecap.classic { font-weight:500; }
.rlecap.plate { background:rgba(0,0,0,.6); padding:.16em .42em; border-radius:.18em; text-shadow:none; }

/* --- save to project modal --- */
.modal { position:fixed; inset:0; z-index:120; background:rgba(3,10,20,.72); display:flex; align-items:center; justify-content:center; padding:18px; }
.modal[hidden] { display:none; }
.modalbox { width:min(460px,100%); background:#0F2138; border:1px solid rgba(130,190,255,.18); border-radius:16px; padding:20px; }

/* --- safe zones --- */
.rleguides { position:absolute; inset:0; z-index:5; pointer-events:none; }
.rleguides:before, .rleguides:after { content:''; position:absolute; left:6%; right:6%; height:0; border-top:1px dashed rgba(255,255,255,.45); }
.rleguides:before { top:12%; }
.rleguides:after { bottom:18%; }
.rleguidebtn { position:absolute; right:8px; top:8px; z-index:6; font-size:10.5px; padding:5px 8px; border-radius:8px;
  background:rgba(4,12,22,.55); border:1px solid rgba(160,200,255,.28); color:#BFD6EE; cursor:pointer; }

/* --- project bar, save state, playback row, lanes (Nov 2026) --- */
.rlename { background:transparent; border:0; color:#EAF2FB; font-size:14.5px; font-weight:700; padding:2px 0; width:min(38vw,320px); }
.rlename:focus { outline:none; border-bottom:1px solid rgba(120,180,255,.5); }
#rleSaved { cursor:default; }
#rleSaved[data-state="saving"] { color:#8FB6DC; }
#rleSaved[data-state="saved"] { color:#7FD1A8; }
#rleSaved[data-state="error"] { color:#F0A0A0; cursor:pointer; text-decoration:underline; }

.rleplayrow { display:flex; align-items:center; gap:10px; padding:8px 12px 2px; }
.rleplaysmall { width:34px; height:34px; border-radius:50%; border:1px solid rgba(140,185,235,.28); background:rgba(16,38,60,.75); color:#DCEBF9; display:grid; place-items:center; flex:0 0 auto; }
.rleplaysmall svg { width:14px; height:14px; }
.rletimecode { font-variant-numeric:tabular-nums; font-size:11.5px; color:#9FB6CC; flex:0 0 auto; min-width:78px; }
.rlescrub { flex:1 1 auto; -webkit-appearance:none; height:4px; border-radius:3px; background:rgba(120,165,215,.25); }
.rlescrub::-webkit-slider-thumb { -webkit-appearance:none; width:14px; height:14px; border-radius:50%; background:#4E9BE0; border:2px solid #0B1F3A; }
.rlefull { width:32px; height:32px; border-radius:8px; border:1px solid rgba(140,185,235,.22); background:transparent; color:#B7CCE2; display:grid; place-items:center; flex:0 0 auto; }
.rlefull svg { width:15px; height:15px; }

.rlelanechip { position:absolute; top:3px; bottom:3px; border-radius:6px; font-size:10px; line-height:1; padding:5px 7px;
  overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:#EAF3FF; }
.rlelanechip.is-text { background:linear-gradient(180deg,#4B3E8F,#3A3172); border:1px solid #6A5BC0; }
.rlelanechip.is-voice { background:linear-gradient(180deg,#1E6B5C,#175448); border:1px solid #2E9C86; }
.rlelanechip.is-music { background:linear-gradient(180deg,#245A93,#1B446F); border:1px solid #3C82C4; }
.rlerow .rleclips { position:relative; }

@media (max-width: 640px) {
  .rlename { width:44vw; font-size:13px; }
  .rleplayrow { padding:6px 10px 0; }
  .rletimecode { min-width:70px; font-size:10.5px; }
}

/* --- desktop three-panel workspace (Nov 2026) --- */
.rlerail { display: none; }
.rlerailhead { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.rlerailhead b { font-size:12.5px; color:#EAF3FF; }
.rlerailup { border:1px solid rgba(90,168,255,.35); background:rgba(46,123,214,.16); color:#DCEBFF; font-size:11px; padding:5px 9px; border-radius:8px; cursor:pointer; }
.rlerailsearch { width:100%; margin-bottom:8px; padding:8px 10px; border-radius:9px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.04); color:#E7F1FB; font-size:11.5px; }
.rlerailsearch:focus { outline:none; border-color:rgba(90,168,255,.45); }
.rlerailtabs { display:flex; gap:4px; margin-bottom:8px; }
.rlerailtabs button { flex:1; padding:6px 2px; font-size:10.5px; border-radius:7px; border:1px solid transparent; background:rgba(255,255,255,.03); color:#B9CBE0; cursor:pointer; }
.rlerailtabs button.on { background:rgba(46,123,214,.2); border-color:rgba(90,168,255,.4); color:#fff; }
.rlerailgrid { flex:1 1 auto; min-height:0; overflow:auto; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:7px; align-content:start; }
.rlerailcard { position:relative; border-radius:9px; overflow:hidden; border:1px solid rgba(255,255,255,.07); background:#0A1626; cursor:pointer; padding:0; }
.rlerailcard img, .rlerailcard video { width:100%; height:74px; object-fit:cover; display:block; }
.rlerailcard .rt { display:block; padding:5px 6px; font-size:9.5px; color:#A9BED3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rlerailcard .rbadge { position:absolute; top:4px; left:4px; font-size:8.5px; padding:2px 5px; border-radius:5px; background:rgba(4,12,22,.7); color:#CFE3F7; }
.rlerailcard.vaudio { display:flex; flex-direction:column; justify-content:flex-end; height:96px; background:linear-gradient(160deg,#153A33,#0C211D); }
.rlerailempty { grid-column:1/-1; font-size:11px; color:#8FA6BE; padding:14px 4px; }
.rlerailhint { font-size:9.5px; color:#6F849C; margin:8px 2px 0; }

@media (min-width: 1024px) {
    .rlemain { max-width:none; display:grid; grid-template-columns:252px minmax(0,1fr);
        grid-template-rows:minmax(0,1fr) auto auto auto;
        grid-template-areas:"rail stage" "rail play" "rail timeline" "tools tools";
        gap:10px 12px; padding:12px 16px 14px; align-items:stretch; }
    .rlerail { grid-area:rail; display:flex; flex-direction:column; }
    .rlestagewrap { grid-area:stage; }
    .rleplayrow { grid-area:play; }
    .rletimeline { grid-area:timeline; }
    .rletools { grid-area:tools; }
    .rlebuildbig { display:none; }

    /* Sheets become a docked inspector instead of a phone-style bottom sheet. */
    .rlesheet { background:transparent; backdrop-filter:none; pointer-events:none; justify-content:flex-end; align-items:stretch; }
    .rlesheetbox { pointer-events:auto; width:360px; max-height:none; height:auto; margin:64px 12px 12px 0; border-radius:14px; padding:16px; }
    .rletools .rletool { padding:10px 8px; font-size:12px; }
}

/* --- export card --- */
.rleexport { position:fixed; inset:0; z-index:90; background:rgba(3,7,14,.72); backdrop-filter:blur(8px); display:flex; align-items:center; justify-content:center; padding:16px; }
.rleexport[hidden] { display:none; }
.rleexportbox { width:min(400px,100%); background:#0B1726; border:1px solid rgba(255,255,255,.09); border-radius:16px; padding:18px; }
.rleexportlabel { font-size:10.5px; letter-spacing:.4px; text-transform:uppercase; color:#8FA6BE; margin:12px 0 6px; }
.rleexportrows { margin:14px 0 6px; border-top:1px solid rgba(255,255,255,.07); }
.rleexportrows > div { display:flex; justify-content:space-between; padding:9px 0; border-bottom:1px solid rgba(255,255,255,.06); font-size:12px; color:#A9BED3; }
.rleexportrows b { color:#EAF3FF; font-weight:600; }
.rleexportgo { width:100%; margin-top:14px; }
.rlerail.flash { box-shadow:0 0 0 2px rgba(90,168,255,.55); border-radius:12px; }

/* --- persistent inspector column --- */
.rleinspector { display:none; }
@media (min-width: 1024px) {
    .rlemain { grid-template-columns:252px minmax(0,1fr) 330px;
        grid-template-areas:"rail stage insp" "rail play insp" "timeline timeline timeline" "tools tools tools"; }
    .rleinspector { grid-area:insp; display:flex; flex-direction:column; min-height:0; overflow:auto;
        background:rgba(255,255,255,.022); border:1px solid rgba(255,255,255,.06); border-radius:12px; padding:12px; }
    .rleinsphead { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
    .rleinsphead b { font-size:12.5px; color:#EAF3FF; }
    .rleinsphead span { font-size:9.5px; letter-spacing:.4px; text-transform:uppercase; color:#7F94AC; }
    .rleinspbody .rleinsprow { display:flex; justify-content:space-between; gap:10px; padding:8px 0; border-bottom:1px solid rgba(255,255,255,.06); font-size:11.5px; color:#9FB6CC; }
    .rleinspbody .rleinsprow b { color:#E7F1FB; font-weight:600; text-align:right; }
}

/* --- clip edge resize + export failure --- */
.rleclip { position:relative; }
.rleedge { position:absolute; top:0; right:0; width:12px; height:100%; cursor:ew-resize; z-index:3; display:flex; align-items:center; justify-content:center; }
.rleedge::after { content:''; width:3px; height:58%; border-radius:2px; background:rgba(255,255,255,.55); box-shadow:0 0 0 1px rgba(4,12,22,.5); }
.rlefail { text-align:center; padding:18px; max-width:340px; }
.rlefail b { display:block; font-size:15px; color:#FFD7D7; margin-bottom:6px; }
.rlefail p { font-size:12px; color:#B7C7D8; margin:0 0 14px; }

/* ============================================================
   PROJECT 02 — mobile Reel Builder (design system v1.0)
   Scoped to <= 720px so the desktop workspace is untouched.
   ============================================================ */

/* Desktop keeps today's toolbar, gutter letters and sheet layout */
.ticon { display: none; }
.rlaneicon, .rlelabel i { display: none; }
.rlehandle, .rlekick { display: none; }
.rlefoot { display: contents; }
#rleVoiceBtn { display: none; }
.rletool .tlabel { width: auto; height: auto; border-radius: 0; background: none; font-size: inherit; color: inherit; }

@media (max-width: 720px) {
  /* ---- canvas + type tokens ---- */
  .rle { background: #071426; }
  .rlebar { height: 56px; padding: 0 10px; gap: 8px; background: #0E1C31; border-bottom: 1px solid #263A55; }
  .rlebarin { height: 56px; padding: 0; gap: 10px; }
  .rleback { width: 36px; height: 36px; border-radius: 10px; border: 1px solid #263A55; display: grid; place-items: center; color: #F3F7FC; }
  .rleback svg { width: 18px; height: 18px; }
  .rletitle { min-width: 0; }
  .rlename { font-size: 18px; font-weight: 650; letter-spacing: -.2px; width: 100%; }
  .rletitle small { font-size: 11px; color: #A8B7CA; margin-top: 1px; }
  .rletitle small::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #4CAF7D; margin-right: 6px; vertical-align: 1px; }
  #rleSaved[data-state="saving"]::before { background: #E0A33E; }
  #rleSaved[data-state="error"]::before { background: #E05656; }
  .rleprimary { height: 46px; border-radius: 11px; background: #2588F5; border: 1px solid #2588F5; font-size: 13.5px; font-weight: 600; }
  #rleBuild { height: 38px; padding: 0 14px; border-radius: 11px; font-size: 13px; }
  .rlemain { padding: 10px 12px max(10px, env(safe-area-inset-bottom)); gap: 10px; }

  /* ---- preview keeps room for the timeline and tools ---- */
  .rlestagewrap { flex: 1 1 auto; height: auto; min-height: 180px; max-height: 46svh; }
  .rlestage { height: 100%; max-height: 100%; border-radius: 12px; box-shadow: none; border: 1px solid #263A55; }
  .rleplayrow { padding: 8px 2px 0; gap: 8px; }
  .rletimecode { font-size: 11.5px; color: #A8B7CA; }
  .rleplaysmall, .rlefull { width: 36px; height: 36px; border-radius: 10px; border: 1px solid #263A55; background: transparent; }

  /* ---- icon-only tool rail ---- */
  .rletools {
    display: flex; gap: 6px; padding: 6px; overflow-x: auto; position: static; flex: 0 0 auto; width: 100%; margin-top: auto;
    background: #0E1C31; border: 1px solid #263A55; border-radius: 12px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .rletools::-webkit-scrollbar { display: none; }
  #rleVoiceBtn { display: grid; }
  #rleRatioBtn { display: none; }
  .rletool {
    flex: 0 0 auto; width: 44px; height: 44px; padding: 0; display: grid; place-items: center;
    border-radius: 11px; border: 1px solid #263A55; background: transparent; color: #A8B7CA;
  }
  .rletool:hover, .rletool:focus-visible { border-color: #3B5C86; background: rgba(37,136,245,.10); color: #6FB2FF; }
  .rletool:active { border-color: #2588F5; background: rgba(37,136,245,.26); color: #8CC4FF; }
  .rletool.primary { background: transparent; border-color: #263A55; color: #F3F7FC; }
  .rletool.primary:active { border-color: #2588F5; background: rgba(37,136,245,.26); }
  .rletool .tlabel, .rletool .tglyph, .rlesr { display: none; }
  .ticon { display: block; width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .rlebuildbig { display: none; }

  /* ---- timeline panel ---- */
  .rletimeline { width: 100%; background: #0E1C31; border: 1px solid #263A55; border-radius: 12px; padding: 6px 6px 8px; overflow: hidden; }
  .rleruler { display: flex; padding: 2px 6px 6px 64px; font-size: 10.5px; color: #A8B7CA; font-variant-numeric: tabular-nums; letter-spacing: .2px; }
  .rlerow { height: 42px; gap: 8px; }
  .rlerow + .rlerow { margin-top: 4px; }
  .rlelabel { width: 56px; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; color: #A8B7CA; }
  .rleletter { display: none; }
  .rlaneicon { display: block; width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .rlelabel i { display: block; font-style: normal; font-size: 11px; letter-spacing: .2px; color: #A8B7CA; }
  .rleclips { background: #12243B; border: 1px solid #263A55; border-radius: 8px; padding: 2px; }
  .rleempty { font-size: 10px; color: #7C8DA4; }
  .rleclip { border-radius: 6px; border-color: #263A55; }
  .rleclip.on, .rleclip.selected { border: 2px solid #2588F5; }
  .rleplayhead { top: 4px; bottom: 8px; width: 2px; background: #2588F5; box-shadow: none; pointer-events: auto; cursor: ew-resize; }
  .rleplayhead::before { content: ''; position: absolute; top: 0; left: -5px; width: 12px; height: 10px; border-radius: 3px; background: #2588F5; }
  .rlemark { top: 16px; bottom: 8px; width: 2px; background: #2588F5; box-shadow: none; border-radius: 1px; pointer-events: auto; cursor: ew-resize; z-index: 8; }
  .rlemark::before { content: ''; position: absolute; top: 0; left: -5px; width: 12px; height: 10px; border-radius: 3px; background: #2588F5; }

  /* ---- bottom sheets ---- */
  .rlesheet { background: rgba(3,7,14,.62); }
  .rlesheetbox {
    background: #0E1C31; border: 1px solid #263A55; border-bottom: 0;
    border-radius: 18px 18px 0 0; padding: 6px 16px calc(10px + env(safe-area-inset-bottom));
    max-height: 88svh; overflow-y: auto; overscroll-behavior: contain;
  }
  .rlehandle { display: block; width: 38px; height: 4px; border-radius: 2px; background: #3A4E68; margin: 6px auto 10px; flex: 0 0 auto; }
  .rlesheethead { align-items: flex-start; margin-bottom: 10px; }
  .rleh { display: flex; flex-direction: column; gap: 1px; }
  .rlekick { display: block; font-size: 9.5px; letter-spacing: 1.4px; text-transform: uppercase; color: #7C8DA4; }
  .rlesheethead b { font-size: 16px; color: #F3F7FC; }
  .rlesheetx { width: 32px; height: 32px; border-radius: 9px; border: 1px solid #263A55; background: transparent; color: #A8B7CA; font-size: 18px; line-height: 1; }
  .rlefoot {
    display: block; position: sticky; bottom: calc(-10px - env(safe-area-inset-bottom));
    background: #0E1C31; margin: 10px -16px 0; padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    border-top: 1px solid #263A55; z-index: 3;
  }
  .rlefoot .rlehint { margin: 6px 0 0; }
  .rleinput, .rlearea { background: #12243B; border: 1px solid #263A55; border-radius: 10px; color: #F3F7FC; font-size: 13.5px; }
  .rleinput:focus, .rlearea:focus { border-color: #2588F5; box-shadow: 0 0 0 3px rgba(37,136,245,.22); outline: none; }
  .rleinput { height: 44px; }
  .rleupbtn, .rlegen { border-radius: 11px; border: 1px solid #263A55; background: #12243B; color: #F3F7FC; }
  .rlechip { border-radius: 9px; border: 1px solid #263A55; background: #12243B; color: #A8B7CA; min-height: 34px; }
  .rlechip.on { border-color: #2588F5; background: rgba(37,136,245,.18); color: #BFDCFF; }
  .rleghost { border-radius: 11px; border: 1px solid #263A55; background: transparent; color: #F3F7FC; min-height: 42px; }
  .rleghost.danger { color: #F08C8C; border-color: rgba(224,86,86,.35); }
  .rleclipacts { gap: 8px; }
  .rlefield span { font-size: 11.5px; color: #A8B7CA; }
  .rlehint { font-size: 11.5px; color: #7C8DA4; }
}

@media (max-width: 720px) and (max-height: 700px) {
  .rlerow { height: 34px; }
  .rletimeline { padding: 4px 4px 6px; }
  .rleruler { font-size: 9.5px; padding-left: 60px; }
  .rlelabel i { font-size: 10px; }
  .rleclips { border-radius: 7px; }
}

@media (max-width: 380px) {
  .rletools { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 14px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 14px), transparent); }
}

/* ============================================================
   PROJECT 02 FINAL — sheet hierarchy, provider state, 360 rail
   ============================================================ */
.rlesec { margin: 0 0 14px; }
.rlesech { font-size: 11px; letter-spacing: .9px; text-transform: uppercase; color: #7C8DA4; margin: 0 0 8px; font-weight: 600; }
.rlesubh { font-size: 11px; color: #A8B7CA; margin: 10px 0 6px; font-weight: 600; }
.rlesel { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: #12243B;
  border: 1px solid #263A55; border-radius: 10px; padding: 10px 12px; font-size: 12.5px; color: #F3F7FC; }
.rlesel span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
details.rleadv { margin: 0 0 12px; border: 1px solid #263A55; border-radius: 10px; background: #0B1728; padding: 0 12px; }
details.rleadv summary { cursor: pointer; list-style: none; padding: 12px 0; font-size: 12.5px; font-weight: 600; color: #F3F7FC;
  display: flex; align-items: center; justify-content: space-between; }
details.rleadv summary::-webkit-details-marker { display: none; }
details.rleadv summary::after { content: '+'; color: #A8B7CA; font-size: 15px; line-height: 1; }
details.rleadv[open] summary::after { content: '\2212'; }
details.rleadv > *:not(summary) { margin-top: 8px; }
details.rleadv > *:last-child { margin-bottom: 10px; }
.rleunavail { font-size: 11.5px; color: #EFC98B; background: rgba(224,163,62,.10); border: 1px solid rgba(224,163,62,.28);
  border-radius: 9px; padding: 8px 10px; margin: 8px 0 0; }
.rlegen.off { opacity: .5; pointer-events: none; }
@media (min-width: 721px) {
  details.rleadv { border: 0; background: none; padding: 0; margin-bottom: 10px; }
  details.rleadv summary { display: none; }
  details.rleadv > * { margin-top: 8px; }
}
@media (max-width: 380px) {
  .rletools { padding: 2px; gap: 4px; }
  .rletools { -webkit-mask-image: none; mask-image: none; }
}
@media (max-width: 360px) {
  .rletools { padding: 1px; }
}

@media (max-width: 720px) {
  #rleTextPreset { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  #rleTextPreset .rlechip { min-height: 38px; }
}

@media (max-width: 720px) {
  .rlearea { resize: none; font-family: inherit; line-height: 1.5; }
  #rleMusicList { max-height: 132px; overflow-y: auto; }
}

/* ============================================================
   PROJECT 03 — desktop Reel Builder (design system v1.0)
   Scope: min-width 1024px. Mobile (<=720) is untouched.
   ============================================================ */
@media (min-width: 1024px) {

  .rle {
    display: flex; flex-direction: column; height: 100dvh; overflow: hidden;
    background: #071426; color: #F3F7FC;
    font-family: Inter, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
  }

  /* ---- header ---- */
  .rlebar {
    flex: 0 0 auto; height: 60px; background: #0A1626; border-bottom: 1px solid #1D2E45;
    position: relative; z-index: 6;
  }
  .rlebarin { height: 60px; max-width: none; padding: 0 20px; gap: 14px; display: flex; align-items: center; }
  .rleback {
    width: 36px; height: 36px; flex: 0 0 auto; border-radius: 10px; border: 1px solid #263A55;
    background: #0E1C31; color: #A8B7CA; display: grid; place-items: center;
  }
  .rleback:hover { border-color: #3B5C86; color: #F3F7FC; }
  .rleback svg { width: 17px; height: 17px; }

  .rletitle { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .rlecrumb { display: block; font-size: 10.5px; letter-spacing: .02em; color: #7C8DA4; }
  .rlename {
    width: min(46vw, 560px); font-size: 19px; font-weight: 600; letter-spacing: -.2px;
    color: #F3F7FC; background: transparent; border: 0; padding: 0; line-height: 1.3;
  }
  .rlename:focus { outline: none; border-bottom: 1px solid #2588F5; }
  #rleSaved { font-size: 11px; color: #A8B7CA; display: inline-flex; align-items: center; gap: 6px; }
  #rleSaved::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%; background: #4CAF7D; display: inline-block;
  }
  #rleSaved[data-state="saving"]::before { background: #E0A33E; }
  #rleSaved[data-state="error"]::before { background: #E06C6C; }

  .rlemetabar { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
  .rlepill {
    height: 28px; padding: 0 10px; border-radius: 8px; border: 1px solid #263A55; background: #0E1C31;
    display: inline-flex; align-items: center; font-size: 11.5px; color: #A8B7CA; font-variant-numeric: tabular-nums;
  }
  #rleBuild {
    height: 38px; padding: 0 18px; border-radius: 10px; border: 1px solid #2588F5; background: #2588F5;
    color: #FFFFFF; font-size: 13px; font-weight: 600; flex: 0 0 auto;
  }
  #rleBuild:hover { background: #3A96FF; border-color: #3A96FF; }
  #rleBuild:disabled { opacity: .45; }

  /* ---- three-column workspace ---- */
  .rlemain {
    flex: 1 1 auto; min-height: 0; max-width: none; padding: 0; gap: 0;
    display: grid;
    grid-template-columns: 276px minmax(0, 1fr) 328px;
    grid-template-rows: minmax(0, 1fr) auto auto minmax(206px, 24vh);
    grid-template-areas:
      "rail stage insp"
      "rail play  insp"
      "tools tools tools"
      "timeline timeline timeline";
    align-items: stretch;
  }

  /* ---- left media panel ---- */
  .rlerail {
    grid-area: rail; display: flex; flex-direction: column; gap: 10px; min-height: 0;
    padding: 14px 12px 12px; background: #0A1626; border-right: 1px solid #1D2E45; overflow-y: auto;
    border-radius: 0;
  }
  .rlerailhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .rlerailhead b { font-size: 13px; font-weight: 600; color: #F3F7FC; letter-spacing: -.1px; }
  .rlerailup {
    height: 30px; padding: 0 11px; border-radius: 8px; border: 1px solid #263A55; background: transparent;
    color: #A8B7CA; font-size: 11.5px; font-weight: 500;
  }
  .rlerailup:hover { border-color: #3B5C86; color: #F3F7FC; background: rgba(37,136,245,.08); }
  .rlerailsearch {
    height: 36px; padding: 0 11px; border-radius: 9px; border: 1px solid #263A55; background: #0E1C31;
    color: #F3F7FC; font-size: 12px; font-family: inherit;
  }
  .rlerailsearch::placeholder { color: #7C8DA4; }
  .rlerailsearch:focus { outline: none; border-color: #2588F5; box-shadow: 0 0 0 3px rgba(37,136,245,.16); }
  .rlerailtabs { display: flex; gap: 4px; padding: 3px; background: #0E1C31; border: 1px solid #263A55; border-radius: 9px; }
  .rlerailtabs button {
    flex: 1 1 auto; height: 28px; border: 0; border-radius: 6px; background: transparent;
    color: #A8B7CA; font-size: 11.5px; font-weight: 500; cursor: pointer; font-family: inherit;
  }
  .rlerailtabs button.on { background: #12243B; color: #F3F7FC; box-shadow: inset 0 0 0 1px #2C4767; }
  .rlerailgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-content: start; flex: 0 0 auto; grid-auto-rows: min-content; }
  .rlerailcard { display: block; min-height: 104px; border-radius: 9px; border: 1px solid #1F3350; background: #0E1C31; }
  .rlerailcard:hover { border-color: #3B5C86; }
  .rlerailcard img, .rlerailcard video { height: 78px; }
  .rlerailcard.vaudio { height: 96px; min-height: 96px; }
  .rlerailcard .rt { font-size: 10px; color: #A8B7CA; padding: 6px 7px; }
  .rlerailcard .rbadge { background: rgba(7,20,38,.82); border: 1px solid #263A55; font-size: 9px; letter-spacing: .3px; text-transform: uppercase; }
  .rlerailcard .rdur { position: absolute; top: 4px; right: 4px; font-size: 9px; padding: 2px 5px; border-radius: 5px;
    background: rgba(7,20,38,.82); border: 1px solid #263A55; color: #DCE9F7; font-variant-numeric: tabular-nums; }
  .rlerailcard.sel { border-color: #2588F5; box-shadow: 0 0 0 1px #2588F5 inset; }
  .rlerailcard.sel .rt { color: #F3F7FC; }
  .rlerailempty { font-size: 11.5px; color: #7C8DA4; }
  .rlerailhint { font-size: 10.5px; color: #7C8DA4; margin: 2px 2px 0; }

  /* ---- centre canvas ---- */
  .rlestagewrap {
    grid-area: stage; min-height: 0; display: flex; align-items: center; justify-content: center;
    padding: 14px 18px; background: #050F1D; overflow: hidden;
  }
  .rlestage {
    height: auto; width: auto; max-width: 100%; max-height: 100%;
    border-radius: 10px; border: 1px solid #1D2E45;
    box-shadow: 0 18px 50px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.02) inset;
  }
  .rleguidebtn { font-size: 10.5px; padding: 5px 9px; border-radius: 7px; background: rgba(7,20,38,.72); border: 1px solid #263A55; color: #A8B7CA; }
  .rleclock { font-size: 10.5px; background: rgba(7,20,38,.8); border: 1px solid #263A55; }

  /* ---- transport ---- */
  .rleplayrow {
    grid-area: play; display: flex; align-items: center; gap: 12px;
    padding: 8px 20px 9px; background: #050F1D; border-top: 1px solid #14263C;
  }
  .rleplaysmall {
    width: 34px; height: 34px; border-radius: 9px; border: 1px solid #263A55; background: #0E1C31; color: #F3F7FC;
  }
  .rleplaysmall:hover { border-color: #3B5C86; }
  .rletimecode { font-size: 11.5px; color: #A8B7CA; min-width: 92px; font-variant-numeric: tabular-nums; }
  .rlescrub { height: 4px; background: #1D2E45; }
  .rlescrub::-webkit-slider-thumb { width: 13px; height: 13px; background: #2588F5; border: 2px solid #050F1D; }
  .rlefull { width: 32px; height: 32px; border-radius: 8px; border: 1px solid #263A55; background: #0E1C31; color: #A8B7CA; }
  .rlefull:hover { border-color: #3B5C86; color: #F3F7FC; }

  /* ---- right inspector ---- */
  .rleinspector {
    grid-area: insp; display: flex; flex-direction: column; min-height: 0; overflow-y: auto;
    background: #0A1626; border-left: 1px solid #1D2E45; border-radius: 0; padding: 14px 14px 16px;
  }
  .rleinsphead { display: flex; align-items: center; justify-content: space-between; margin: 0 0 14px; }
  .rleinsphead b { font-size: 13px; font-weight: 600; color: #F3F7FC; }
  .rleinsphead span {
    font-size: 9.5px; letter-spacing: .9px; text-transform: uppercase; color: #6FB2FF;
    background: rgba(37,136,245,.12); border: 1px solid rgba(37,136,245,.3); border-radius: 6px; padding: 3px 7px;
  }
  .rleinspsec { margin-bottom: 18px; }
  .rleinspsec h4 {
    font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: #7C8DA4;
    margin: 0 0 8px; font-weight: 600;
  }
  .rleinspbody .rleinsprow {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 9px 0; border-bottom: 1px solid #16283E; font-size: 12px; color: #A8B7CA;
  }
  .rleinspbody .rleinsprow:last-child { border-bottom: 0; }
  .rleinspbody .rleinsprow b { color: #F3F7FC; font-weight: 500; text-align: right; }
  .rleinspbody .rlehint { font-size: 11.5px; line-height: 1.6; color: #7C8DA4; margin: 0 0 10px; }
  .rleinspbody .rlechip {
    height: 34px; padding: 0 12px; border-radius: 9px; border: 1px solid #263A55; background: transparent;
    color: #A8B7CA; font-size: 12px;
  }
  .rleinspbody .rlechip:hover { border-color: #3B5C86; color: #F3F7FC; }

  /* ---- tool bar (icon only) ---- */
  .rletools {
    grid-area: tools; display: flex; align-items: center; gap: 8px; padding: 6px 20px;
    background: #0A1626; border-top: 1px solid #1D2E45; border-bottom: 1px solid #1D2E45;
    overflow: visible; width: auto; margin: 0;
  }
  .rletool {
    flex: 0 0 40px; width: 40px; height: 40px; min-width: 40px; padding: 0;
    border-radius: 10px; border: 1px solid #263A55;
    background: transparent; color: #A8B7CA; display: grid; place-items: center; gap: 0;
  }
  .rletool:hover { border-color: #3B5C86; color: #F3F7FC; background: rgba(37,136,245,.08); }
  .rletool:active { background: rgba(37,136,245,.2); }
  .rletool .tglyph, .rletool .tlabel, .rletool .rlesr { display: none; }
  .rletool .ticon { display: block; width: 19px; height: 19px; stroke: currentColor; fill: none;
    stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  #rleVoiceBtn { display: grid; }
  #rleRatioBtn { display: grid; }
  .rletool.primary { background: transparent; border-color: #263A55; color: #A8B7CA; }
  .rletool.primary:hover { background: rgba(37,136,245,.08); }

  /* ---- timeline ---- */
  .rletimeline {
    grid-area: timeline; min-height: 0; overflow-y: auto; overflow-x: hidden;
    background: #0A1626; border-top: 0; padding: 10px 16px 14px;
  }
  .rleruler {
    display: flex; justify-content: space-between; padding: 0 6px 8px 72px;
    font-size: 10px; color: #7C8DA4; font-variant-numeric: tabular-nums;
  }
  .rlerow { display: flex; align-items: center; gap: 10px; height: 40px; }
  .rlelabel {
    width: 62px; flex: 0 0 62px; display: flex; align-items: center; gap: 7px; color: #A8B7CA;
  }
  .rleletter { display: none; }
  .rlaneicon { display: block; width: 15px; height: 15px; stroke: currentColor; fill: none;
    stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; color: #7C8DA4; }
  .rlelabel i { display: block; font-style: normal; font-size: 11px; color: #A8B7CA; }
  .rleclips {
    position: relative; flex: 1 1 auto; height: 32px; border-radius: 8px;
    background: #0E1C31; border: 1px solid #16283E; padding: 2px;
  }
  .rlesep { width: 1px; height: 24px; background: #1D2E45; margin: 0 4px; flex: 0 0 auto; }
  .rleempty { font-size: 10.5px; color: #5F738B; display: flex; align-items: center; height: 100%; padding-left: 8px; }
  .rleclip { border-radius: 6px; }
  .rleplayhead { background: #2588F5; width: 2px; }
  .rlemark { background: #2588F5; box-shadow: none; }
}

@media (min-width: 1440px) {
  .rlemain { grid-template-columns: 296px minmax(0, 1fr) 344px; }
}

@media (max-width: 720px) {
  .rlesep { display: none; }
}

/* PROJECT 03 — docked sheet covers the inspector column exactly */
@media (min-width: 1024px) {
  .rlesheet { justify-content: flex-end; align-items: stretch; padding: 0; }
  .rlesheetbox {
    pointer-events: auto; width: 344px; margin: 64px 0 0; height: auto;
    max-height: calc(100dvh - 64px); overflow-y: auto; padding: 16px;
    border-radius: 0; border-left: 1px solid #1D2E45;
    border-top: 0; border-right: 0; border-bottom: 0;
  }
  .rleclip.sel { outline: 2px solid #2588F5; outline-offset: 1px; }
}

/* Export completion: preview must decode before "ready" is shown */
.rledone video { background: #000; min-height: 180px; }
.rleouterr { margin: 8px 0 4px; padding: 10px 12px; border-radius: 10px;
  background: rgba(224,163,62,.10); border: 1px solid rgba(224,163,62,.30); }
.rleouterr p { margin: 0 0 8px; font-size: 12px; line-height: 1.5; color: #EFC98B; }
@media (min-width: 1024px) {
  .rletool { flex: 0 0 40px !important; width: 40px !important; max-width: 40px; }
}


/* Project 07: the caption sheet may cover at most 56% of a phone screen, so
   the preview above it stays visible while the caption is edited. */
@media (max-width: 1023px) {
  #rleCapSheet { align-items: flex-end; justify-content: center; }
  #rleCapSheet .rlesheetbox {
    max-height: 56dvh; overflow-y: auto; width: 100%;
    border-radius: 18px 18px 0 0;
    padding-bottom: max(14px, env(safe-area-inset-bottom));
  }
  #rleCapSheet .rlesheethead {
    position: sticky; top: 0; z-index: 2; background: #0a1421;
    padding-bottom: 6px;
  }
}


/* ============================================================
   Stage D — Reel Builder tool rail and editing panels
   ============================================================ */

.rletools {
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    padding-bottom: 2px;
}
.rletools::-webkit-scrollbar { display: none; }

.rletool {
    flex: 0 0 auto;
    height: 44px;
    min-width: 46px;
    padding: 0 11px;
    gap: 7px;
    border-radius: 11px;
    border: 1px solid rgba(255, 255, 255, .08);
    background: rgba(255, 255, 255, .035);
    color: #CFE0F2;
    font-size: 11px;
    line-height: 1;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.rletool .ticon { width: 18px; height: 18px; flex: none; color: #9CC3EA; }
.rletool .tlabel { font-size: 11px; white-space: nowrap; }
.rletool:hover { border-color: rgba(90, 168, 255, .4); color: #fff; }
.rletool.on,
.rletool[aria-pressed="true"] {
    background: rgba(37, 136, 245, .22);
    border-color: #2588F5;
    color: #fff;
    box-shadow: 0 0 0 1px rgba(37, 136, 245, .35) inset;
}
.rletool.on .ticon,
.rletool[aria-pressed="true"] .ticon { color: #fff; }
.rletool:focus-visible { outline: 2px solid #6FB2FF; outline-offset: 2px; }

/* Media selection checkbox */
.rlecard, .rlevrow { position: relative; }
.rlepick {
    position: absolute;
    top: 7px;
    right: 7px;
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: #2588F5;
    cursor: pointer;
    z-index: 2;
}
.rlevrow .rlepick { top: 50%; right: 10px; transform: translateY(-50%); }
.rlecard.picked, .rlevrow.picked {
    border-color: #2588F5;
    box-shadow: 0 0 0 1px rgba(37, 136, 245, .45);
    background: rgba(37, 136, 245, .10);
}

/* Panels sit under the editor bar on desktop and above the tool rail on phones. */
.rlesheetbox {
    border: 1px solid #263A55;
    border-radius: 12px;
    box-shadow: 0 -18px 50px rgba(0, 0, 0, .45);
    background: #0A1727;
}
.rleexportbox {
    border: 1px solid #263A55;
    border-radius: 12px;
    background: #0A1727;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .55);
}

@media (max-width: 899px) {
    .rletool { padding: 0; width: 44px; min-width: 44px; justify-content: center; }
    .rletool .tlabel {
        position: absolute;
        width: 1px; height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
    .rlesheet { align-items: flex-end; padding-bottom: calc(6px + env(safe-area-inset-bottom)); }
    .rlesheetbox {
        max-height: min(72dvh, calc(100dvh - 132px));
        border-radius: 12px 12px 0 0;
        padding-bottom: calc(14px + env(safe-area-inset-bottom));
    }
}

@media (min-width: 900px) {
    .rlesheet {
        background: rgba(3, 7, 14, .38);
        backdrop-filter: blur(2px);
        align-items: flex-start;
        justify-content: flex-end;
        padding: 0;
        pointer-events: auto;
    }
    .rlesheetbox {
        width: 380px;
        max-width: 380px;
        margin-top: 60px;
        height: calc(100dvh - 60px - var(--rle-timeline-h, 200px));
        max-height: none;
        border-radius: 12px 0 0 0;
        border-right: 0;
        border-bottom: 0;
        overflow-y: auto;
        padding: 18px 18px 24px;
        box-shadow: -24px 0 60px rgba(0, 0, 0, .5);
    }
    .rlesheetbox .rlefoot {
        position: sticky;
        bottom: 0;
        background: #0A1727;
        padding-top: 10px;
    }
}


/* Stage D: every tool stays reachable on small screens, icon only. */
@media (max-width: 1023px) {
    #rleRatioBtn { display: inline-flex; }
}

/* ============================================================
   Reel Builder — contextual inspector panes (Nov 2026)
   The tool controls dock into the right column on wide screens.
   ============================================================ */

@font-face { font-family:'VV Sans'; src:url('/fonts/VV-Sans-Bold.ttf') format('truetype'); font-weight:700; font-display:swap; }
@font-face { font-family:'VV Serif'; src:url('/fonts/VV-Serif-Bold.ttf') format('truetype'); font-weight:700; font-display:swap; }
@font-face { font-family:'VV Display'; src:url('/fonts/VV-Display-Bold.ttf') format('truetype'); font-weight:700; font-display:swap; }

.rleinspheadr { display:flex; align-items:center; gap:8px; }
.rleinsphead #rleInspMode { max-width:140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rleinspx { width:22px; height:22px; border-radius:6px; border:1px solid rgba(255,255,255,.14); background:transparent; color:#B7CCE2; font-size:15px; line-height:1; cursor:pointer; display:grid; place-items:center; padding:0; }
.rleinspx:hover { border-color:#4E9BE0; color:#fff; }

#rleInspTool { display:flex; flex-direction:column; min-height:0; }
.rlepanehead { display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin:0 0 8px; }
.rlepanehead b { font-size:12.5px; color:#EAF3FF; }
.rlepanehead span { font-size:9.5px; color:#7F94AC; text-transform:uppercase; letter-spacing:.4px; text-align:right; }
.rlesep2 { height:1px; background:rgba(255,255,255,.07); margin:12px 0; }
.rlepaneacts { margin-top:12px; }
.rlepanename { font-size:11.5px; color:#CFE3F7; margin:0 0 6px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rlecropchips .rlechip { flex:1 1 0; text-align:center; }

.rlevoiceitem { border:1px solid rgba(255,255,255,.07); background:rgba(255,255,255,.03); border-radius:10px; padding:9px; margin-bottom:8px; }
.rlevoicehead { display:flex; align-items:center; gap:8px; margin-bottom:7px; }
.rlevoicehead b { font-size:11.5px; color:#E7F1FB; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1 1 auto; }
.rlevoicehead small { font-size:10px; color:#8FA6BE; }
.rlevoiceno { width:18px; height:18px; border-radius:50%; background:rgba(46,123,214,.25); color:#CFE3FF; font-size:10px; display:grid; place-items:center; flex:0 0 auto; }
.rlevoiceacts { display:flex; gap:5px; flex-wrap:wrap; margin-bottom:6px; }
.rlevoiceacts .rlechip { font-size:10px; padding:4px 8px; }
.rlevoiceacts .rlechip[disabled] { opacity:.35; cursor:default; }

.rletextfoot { display:flex; gap:8px; align-items:center; }
.rletextpick { flex:1 1 auto; display:flex; flex-direction:column; align-items:flex-start; gap:2px; background:none; border:0; color:inherit; text-align:left; cursor:pointer; padding:0; min-width:0; }
.rletextpick span { font-size:11.5px; color:#E7F1FB; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }
.rletextpick small { font-size:10px; color:#8FA6BE; }
.rlerowline.sel { border-color:#2588F5; background:rgba(37,136,245,.12); }
.rlov.editing { outline:1px dashed rgba(120,185,255,.8); outline-offset:3px; }

@media (min-width: 1024px) {
    #rleInspTool .rlesheetx, #rleInspTool .rlehandle { display:none; }
    #rleInspTool .rlesec:first-of-type { margin-top:2px; }
    #rleInspTool .rlefoot { position:sticky; bottom:-12px; background:#0B1726; padding:10px 0 2px; margin-top:10px; display:block; }
    #rleInspTool .rlegrid { grid-template-columns:repeat(2, minmax(0,1fr)); }
    #rleInspTool .rlearea, #rleInspTool .rleinput { width:100%; }
    #rleInspTool .rleunavail { font-size:10.5px; }
    #rleInspTool .rleopts { display:grid; gap:6px; }
    #rleInspTool .rleopt { padding:9px 10px; }
    #rleInspTool .rleopt b { font-size:11.5px; }
    #rleInspTool .rleopt small { font-size:10px; }
    #rleInspTool .rleadv { margin-bottom:10px; }
    #rleInspTool .rlesubh { margin-top:10px; }
}

@media (min-width: 1024px) {
    #rleInspTool .rlechips { flex-wrap: wrap; }
    #rleInspTool #rleTextPreset { display:grid; grid-template-columns:1fr 1fr; gap:5px; }
    #rleInspTool #rleTextPreset .rlechip { text-align:center; white-space:nowrap; }
    #rleInspTool .rlechips .rlechip { white-space:nowrap; }
}

/* ---------- media rail: tick, preview, add together ---------- */

.rlerailcard {
    display: flex; flex-direction: column;
    position: relative; padding: 0; cursor: pointer;
    border-radius: 10px; overflow: hidden;
    border: 1px solid rgba(255,255,255,.08); background: #0A1626;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.rlerailcard:hover { border-color: rgba(120,175,235,.45); }
.rlerailcard.picked { border-color: #4C9BFF; box-shadow: 0 0 0 1px #4C9BFF inset; }
.rlerailcard .rleArt { display: block; position: relative; }
.rlerailcard img, .rlerailcard video { width: 100%; height: 74px; object-fit: cover; display: block; }
.rlerailcard .rleCardMeta { display: block; padding: 5px 7px; min-width: 0; }
.rlerailcard .rleCardMeta b {
    display: block; font-size: 10px; font-weight: 600; color: #D6E6F7;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rlerailcard .rleCardMeta small { display: block; font-size: 9px; color: #7E93AE; margin-top: 1px; }

.rleTick {
    position: absolute; top: 5px; left: 5px; z-index: 2;
    width: 18px; height: 18px; border-radius: 5px;
    border: 1.5px solid rgba(255,255,255,.55);
    background: rgba(4,12,22,.55);
    display: grid; place-items: center; color: #fff;
}
.rleTick svg { width: 11px; height: 11px; opacity: 0; }
.rleTick.on { background: #1B5FA8; border-color: #4C9BFF; }
.rleTick.on svg { opacity: 1; }

.rlePeek {
    position: absolute; top: 4px; right: 4px; z-index: 2;
    width: 24px; height: 24px; border-radius: 7px; padding: 0;
    display: grid; place-items: center;
    background: rgba(4,12,22,.66); border: 1px solid rgba(255,255,255,.16);
    color: #DCE9F8; cursor: pointer; opacity: 0; transition: opacity .15s ease;
}
.rlePeek svg { width: 13px; height: 13px; }
.rlerailcard:hover .rlePeek, .rlePeek:focus-visible { opacity: 1; }
@media (pointer: coarse) { .rlePeek { opacity: 1; } }

/* Voices are a list you can play, not a picture tile. */
.rleVoiceRow {
    grid-column: 1 / -1;
    display: flex; align-items: center; gap: 9px;
    padding: 7px 8px; border-radius: 9px; cursor: pointer;
    border: 1px solid rgba(255,255,255,.08); background: #0A1626;
}
.rleVoiceRow:hover { border-color: rgba(120,175,235,.45); }
.rleVoiceRow.picked { border-color: #4C9BFF; background: #0E2137; }
.rleVoiceRow .rleTick { position: static; flex: none; }
.rleVoicePlay {
    width: 28px; height: 28px; flex: none; border-radius: 50%; padding: 0;
    display: grid; place-items: center; cursor: pointer;
    border: 1px solid rgba(255,255,255,.18);
    background: linear-gradient(135deg, #3C8CE7, #1B5FA8); color: #fff;
}
.rleVoicePlay svg { width: 11px; height: 11px; }
.rleVoiceMeta { min-width: 0; }
.rleVoiceMeta b { display: block; font-size: 10.5px; color: #DCE9F8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rleVoiceMeta small { font-size: 9px; color: #7E93AE; }

.rlerailadd { position: sticky; bottom: 0; padding: 8px 0 6px; background: linear-gradient(180deg, rgba(8,18,32,0), #081220 40%); }
.rlerailadd .rleprimary { width: 100%; }

/* Quick preview before anything is added. */
.rlequick {
    position: fixed; inset: 0; z-index: 1400;
    display: grid; place-items: center;
    background: rgba(3,8,16,.82); backdrop-filter: blur(6px);
}
.rlequickbox {
    position: relative; max-width: min(880px, 92vw); max-height: 88vh;
    padding: 12px; border-radius: 14px;
    background: #08121F; border: 1px solid #22374F;
    box-shadow: 0 30px 80px rgba(0,0,0,.6);
}
.rlequickbody img, .rlequickbody video { display: block; max-width: 100%; max-height: 72vh; border-radius: 9px; }
.rlequickbody audio { width: min(520px, 80vw); }
.rlequickcap { margin: 9px 2px 0; font-size: 11.5px; color: #A9BDD3; }
.rlequickx {
    position: absolute; top: -12px; right: -12px;
    width: 32px; height: 32px; border-radius: 50%;
    border: 1px solid #2A415C; background: #0E1C2E; color: #E6F0FB;
    font-size: 18px; line-height: 1; cursor: pointer;
}

/* ---------- timeline reads a little larger ---------- */

.rlerow { height: 62px; }
.rleclip { min-width: 58px; }
.rleclipdur { font-size: 9.5px; }

/* ---------- music picker rows: the Use button was pushed off ---------- */

.rlerowline { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 6px 2px; }
.rlerowline > span {
    flex: 1; min-width: 0;
    font-size: 11.5px; color: #D6E6F7;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rlerowline > button { flex: none; }

.rlesel { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rlesel > span {
    flex: 1; min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rlesel > button, .rlesel > .rlechip { flex: none; }

/* ---------- timeline: taller lanes, tighter stack ---------- */

@media (min-width: 900px) {
    .rlerow { height: 76px; }
    .rlerow + .rlerow { margin-top: 3px; }
    .rleruler { font-size: 10.5px; padding: 0 8px 7px 44px; }
    .rletl { padding-top: 2px; }
}

/* Viewer: image or clip, one close, straight back to the page. */
.lbox .lstage { display: flex; align-items: center; justify-content: center; }
.lbox .lstage img, .lbox .lstage video {
    max-width: 92vw; max-height: 78vh; display: block;
    border-radius: 14px; background: #050A12;
    box-shadow: 0 40px 90px rgba(0,0,0,.6);
}
.lbox .lfoot { display: flex; align-items: center; justify-content: space-between; gap: 14px; color: #cfdcec; font-size: 13px; }
.lbox .lget {
    color: #9ecbff; text-decoration: none; white-space: nowrap;
    border: 1px solid rgba(120,180,255,.35); padding: 6px 14px; border-radius: 999px;
}
.lbox .lget[hidden] { display: none; }
.lbox .lclose {
    position: absolute; top: -14px; right: -14px; z-index: 3;
    width: 38px; height: 38px; border-radius: 50%;
    border: 1px solid rgba(255,255,255,.16); background: #0E1C31; color: #E8F1FB;
    font-size: 22px; line-height: 1; display: grid; place-items: center; cursor: pointer;
}
.lbox .lclose:hover { background: #16283F; }

/* Clips read smaller in the thread, the viewer is where they get watched. */
.cinethread .mcard video { max-height: 240px; }

/* Timeline: full-height rectangular lanes, stacked tight, all of them in view. */
@media (min-width: 1024px) {
    .rlemain { grid-template-rows: minmax(0, 1fr) auto auto 228px; }
    .rletimeline { height: 100%; overflow: hidden; padding: 5px 8px; }
    .rlerow { height: 48px; align-items: stretch; }
    .rlerow + .rlerow { margin-top: 2px; }
    .rlerow + .rlerow { margin-top: 2px; }
    .rlerow > * { align-self: stretch; }
    .rlerow .rleclips { height: auto; min-height: 0; }
    .rlerow .rlelabel, .rlerow .rlerowlab { display: flex; align-items: center; }
}

/* Full screen carries its own way out. */
.rlefsx {
    display: none; position: fixed; top: 14px; right: 16px; z-index: 9;
    width: 40px; height: 40px; border-radius: 50%;
    border: 1px solid rgba(255,255,255,.22); background: rgba(10,18,30,.72);
    color: #fff; font-size: 24px; line-height: 1; cursor: pointer;
    align-items: center; justify-content: center;
}
html.rle-fs .rlefsx, .rlestagewrap:fullscreen .rlefsx { display: flex; }

/* Rail: the add bar sits on the floor of the panel, hint tucked away. */
.rlerail:has(#rleRailAddBar:not([hidden])) .rlerailhint { display: none; }
.rlerailadd { margin-bottom: 0; border-radius: 0 0 10px 10px; }

/* Preview: quieter controls, smaller play disc. */
.rleplay { width: 44px; height: 44px; }
.rleplay svg { width: 17px; height: 17px; margin-left: 2px; }

/* Media rail stacks properly: the grid scrolls, the add bar is the floor. */
@media (min-width: 1024px) {
    .rlerail { display: flex; flex-direction: column; min-height: 0; }
    .rlerailgrid { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
    .rlerailadd {
        position: relative; z-index: 5; margin: -10px -12px 0 !important;
        padding: 8px 12px 10px; background: #0C1A2C;
        border-top: 1px solid rgba(255,255,255,.08);
        border-radius: 0 0 10px 10px;
    }
    .rlerail:has(#rleRailAddBar:not([hidden])) .rlerailhint { display: none; }
    .rlerail:has(#rleRailAddBar:not([hidden])) { padding-bottom: 0; }

    /* Inspector: content fills the panel and the actions land on the floor. */
    .rleinspbody { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
    #rleInspTool { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
    #rleInspTool > * { flex: 0 0 auto; }
    #rleInspTool > *:last-child { margin-top: auto; }
}

/* ============================================================
   Reel Builder: desktop breakpoints.
   Every column keeps a real minimum, the preview keeps the rest,
   and nothing is scaled down to fit a smaller screen.
   ============================================================ */
@media (min-width: 1024px) {
    /* The workspace is exactly as tall as the space under the header, so the
       grid always fits inside its own padding and the timeline keeps its gap. */
    .rlemain { height: calc(100dvh - var(--d2-header-h)); box-sizing: border-box; padding: 12px 16px 14px; }
    .rlemain > *, .rlerail, .rleinspector, .rlestagewrap, .rletimeline, .rletools { min-width: 0; }
    .rleinspector { overflow: hidden; }
    .rleinspbody { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
    #rleInspTool { flex: 1 1 auto; min-height: 0; }
    .rletools { flex-wrap: nowrap; }
}

/* Large desktop */
@media (min-width: 1440px) {
    .rlemain { grid-template-columns: 360px minmax(0, 1fr) 300px; }
}

/* Standard desktop */
@media (min-width: 1280px) and (max-width: 1439px) {
    .rlemain { grid-template-columns: 320px minmax(0, 1fr) 264px; gap: 9px 11px; }
}

/* Compact desktop */
@media (min-width: 1120px) and (max-width: 1279px) {
    .rlemain { grid-template-columns: 300px minmax(0, 1fr) 232px; gap: 8px 10px; padding: 10px 12px 12px; }
}

/* Narrow desktop */
@media (min-width: 1024px) and (max-width: 1119px) {
    .rlemain { grid-template-columns: 262px minmax(0, 1fr) 220px; gap: 7px 9px; padding: 9px 10px 11px; }
}

/* ---- tool panes must always be scrollable to their last control ---- */
#rleInspTool { flex: 0 0 auto; min-height: 0; }
.rleinspbody { overscroll-behavior: contain; }
.rlesheetbox { -webkit-overflow-scrolling: touch; }
.rlelanechip.sel { outline: 2px solid #7FB2FF; outline-offset: 1px; }


/* ---- media rail: tabs first, everything pulled tight, more room for media ---- */
@media (min-width: 1024px) {
    .rlerailhead { margin-bottom: 6px; }
    .rlerailtabs { margin-bottom: 6px; gap: 5px; }
    .rlerailtabs button { padding: 5px 2px; font-size: 10.5px; min-height: 28px; }
    .rlerailsearch {
        height: 34px; min-height: 34px; margin-bottom: 7px;
        padding: 0 10px; font-size: 11.5px; border-radius: 9px;
    }
    .rlerailgrid { gap: 6px; }
}


/* Media rail: more cards in view, smaller thumbnails, chrome out of the way. */
@media (min-width: 1024px) {
    .rlerailhead { margin-bottom: 4px; }
    .rlerailgrid { grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 6px; }
    .rlerailcard { min-height: 84px; }
    .rlerailcard img, .rlerailcard video { height: 60px; }
    .rlerailcard .rt { font-size: 9.5px; padding: 4px 5px; }
    .rlerailcard.vaudio { height: 84px; min-height: 84px; }
}
@media (min-width: 1024px) and (max-height: 830px) {
    .rlerailhint { display: none; }
}

/* ============================================================
   Reel Builder workspace: compact media chrome, media grid that
   scrolls on its own, balanced three columns, toolbar and
   timeline pinned to a predictable height.
   ============================================================ */
@media (min-width: 1024px) {
    .rlemain {
        gap: 0;
        grid-template-rows: minmax(0, 1fr) auto auto minmax(190px, 22vh);
    }

    /* ---- media panel ---- */
    .rlerail {
        gap: 10px; padding: 12px 12px 10px;
        overflow: hidden;              /* only the asset grid scrolls */
    }
    .rlerailhead { height: 42px; min-height: 42px; margin: 0; }
    .rlerailhead b { font-size: 13.5px; }
    .rlerailup { height: 32px; padding: 0 12px; font-size: 12px; }

    .rlerailsearch {
        height: 38px; min-height: 38px; margin: 0; padding: 0 11px 0 32px;
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237C8DA4' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
        background-repeat: no-repeat; background-position: 10px center; background-size: 15px 15px;
        font-size: 12.5px;
    }
    .rlerailtabs { height: 36px; min-height: 36px; margin: 0; padding: 3px; gap: 4px; }
    .rlerailtabs button { height: 30px; min-height: 30px; font-size: 11.5px; padding: 0 4px; }

    .rlerailgrid {
        flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden;
        grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
        align-content: start; padding-right: 2px;
        scrollbar-width: thin; scrollbar-color: #24384F transparent;
        overscroll-behavior: contain;
    }
    .rlerailgrid::-webkit-scrollbar { width: 8px; }
    .rlerailgrid::-webkit-scrollbar-thumb { background: #24384F; border-radius: 8px; }

    .rlerailcard { min-height: 0; border-radius: 10px; overflow: hidden; position: relative; }
    .rlerailcard .rleArt { position: relative; aspect-ratio: 4 / 3; width: 100%; overflow: hidden; background: #0B1728; }
    .rlerailcard .rleArt img,
    .rlerailcard .rleArt video {
        position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
    }
    .rlerailcard .rleCardMeta { padding: 6px 8px 7px; }
    .rlerailcard .rleCardMeta b {
        font-size: 11px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .rlerailcard.picked { background: rgba(37, 136, 245, .08); }

    .rlerailadd { flex: 0 0 auto; }
    .rlerailhint { flex: 0 0 auto; margin: 0; }

    /* ---- preview column is free to shrink, never overflows ---- */
    .rlestagewrap { min-width: 0; padding: 16px 20px; }
    .rlestage { max-width: 100%; max-height: 100%; }

    /* ---- inspector ---- */
    .rleinspector { padding: 16px 16px 18px; overflow: hidden; }
    .rleinspbody { padding-right: 2px; }
    .rleinspbody::-webkit-scrollbar { width: 8px; }
    .rleinspbody::-webkit-scrollbar-thumb { background: #24384F; border-radius: 8px; }

    /* ---- toolbar and timeline ---- */
    .rletools { min-height: 66px; padding: 10px 20px; gap: 10px; }
    .rletool { flex: 0 0 44px; width: 44px; height: 44px; min-width: 44px; }
    .rletimeline { min-width: 0; }
}

/* Wide desktop */
@media (min-width: 1600px) {
    .rlemain { grid-template-columns: 356px minmax(0, 1fr) 336px; }
}

/* Large desktop */
@media (min-width: 1440px) and (max-width: 1599px) {
    .rlemain { grid-template-columns: 340px minmax(0, 1fr) 316px; }
}

/* Standard desktop */
@media (min-width: 1280px) and (max-width: 1439px) {
    .rlemain { grid-template-columns: 320px minmax(0, 1fr) 288px; }
}

/* Compact desktop */
@media (min-width: 1152px) and (max-width: 1279px) {
    .rlemain { grid-template-columns: 300px minmax(0, 1fr) 272px; }
    .rletools { gap: 8px; padding: 9px 14px; }
}

/* Narrow desktop: smallest usable panels, preview keeps its shape */
@media (min-width: 1024px) and (max-width: 1151px) {
    .rlemain { grid-template-columns: 274px minmax(0, 1fr) 262px; }
    .rlerail { padding: 10px 10px 8px; gap: 8px; }
    .rlerailgrid { gap: 8px; }
    .rleinspector { padding: 14px 12px 16px; }
    .rletools { gap: 6px; padding: 8px 10px; }
    .rletool { flex: 0 0 40px; width: 40px; height: 40px; min-width: 40px; }
}

/* Rendering placeholder: the result's own shape, a soft shimmer and the
   standard spinner. No frame, no wording, no orb. */
.mhold {
    width: min(58vw, 240px);
    aspect-ratio: var(--ar, 9 / 16);
    margin: 6px auto 10px;
    display: grid; place-items: center;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02));
    animation: mholdPulse 1.9s ease-in-out infinite;
}
.mhold .cspin {
    width: 20px; height: 20px; border-radius: 50%;
    border: 2px solid rgba(255,255,255,.18); border-top-color: #5AA6F0;
    animation: cspin .8s linear infinite;
}
@keyframes mholdPulse { 0%,100% { opacity:.55 } 50% { opacity:1 } }
.mfail { font-size:12.5px; color:#F0A9A9; padding:6px 2px; max-width:44ch; line-height:1.45; }

/* While a render is in flight the card is just the loader. No frame. */
.mcard:has(.mhold) {
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    width: auto !important;
    max-width: 100%;
}
.mgen { background: none; border: 0; color: #8FC0F2; font-size: 12px; padding: 0; cursor: pointer; }
.mgen:hover { text-decoration: underline; }

/* Mobile Reel Builder media sheet: pull the controls up, tighten the chrome. */
@media (max-width: 1023px) {
    .rlesheetbox { padding: 12px 14px calc(16px + env(safe-area-inset-bottom)); border-radius: 20px 20px 0 0; }
    .rlehandle { margin: 2px auto 8px; }
    .rlesheethead { margin-bottom: 2px; }
    .rleh { font-size: 15px; }
    .rlekick { font-size: 10.5px; }
    .rleupbtn { padding: 5px 9px; font-size: 11.5px; }
    .rletabs { margin: 6px 0 8px; gap: 6px; }
    .rletab { padding: 7px 4px; font-size: 12px; }
    .rlegrid { gap: 8px; }
    .rlefoot { margin-top: 8px; }
    .rleaddbar { margin: 8px 0 6px; }
    .rlehint { font-size: 11px; }
}

/* The pending placeholder carries the same glass loader as the live job. */
.mpendingwait { padding: 18px 0 26px; }
.mpendingwait .corb { width: 118px; height: 118px; }
.mpendingwait .clabel { font-size: 13px; }