/* ============================================================================
   EVE - EDITORIN TYYLIT (kerrokset 3-6)
   Passi 2b / 2026-09-02 - KONSOLIDOITU kayttosailyvasti:
   - :root-tokenit ja TEEMAT-osio siirretty static/css/eve-theme.css:aan
     (index.html lataa sen ENNEN tata tiedostoa - ainoa token-lahde)
   - saman selektorin duplikaatit yhdistetty (deklaraatiot lahdejarjestyksessa)
   - YHTAAN muuta saantoa ei poistettu eika jarjestelty uudelleen
   - validointi: computed-style-diff selaimessa (ennen/jalkeen) = 0 eroa
   ============================================================================ */

/* ============================================================================
   EVE - EDITORIN TYYLIT (kerrokset 3-6)
   Passi 2b / 2026-09-02 - KONSOLIDOITU kayttosailyvasti:
   - :root-tokenit ja TEEMAT-osio siirretty static/css/eve-theme.css:aan
     (index.html lataa sen ENNEN tata tiedostoa - ainoa token-lahde)
   - saman selektorin duplikaatit yhdistetty (deklaraatiot lahdejarjestyksessa)
   - YHTAAN muuta saantoa ei poistettu eika jarjestelty uudelleen
   - validointi: computed-style-diff selaimessa (ennen/jalkeen) = 0 eroa
   ============================================================================ */

/* ==========================================================================
   EVE — eve.css (REBUILT 2026-08-30)
   Six-layer architecture replacing the 33 stacked "design pass" layers:
   1 TOKENS · 2 BASE · 3 LAYOUT · 4 COMPONENTS · 5 PAGES · 6 UTILITIES
   Rules:
   - Every value comes from a token in :root (layer 1).
   - !important is forbidden by default — the surviving flags are documented
     base-era overrides, icon font-size:0 masks and media guards.
   - No selector was renamed or removed that JS or index.html references
     (hook contract EVE_CSS_REFAKTOROINTI_PASSI1_KOUKKUSOPIMUS_2026-08-30).
   Base: hiljaisuudet generation 2026-08-29 (the user's current system).
   ========================================================================== */


/* ==========================================================================
   2. BASE — elements, body, focus, scrollbars
   ========================================================================== */
input:focus,
    textarea:focus,
    select:focus {
    border-color: var(--beige);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    scrollbar-color: #42556d #0a111c;
    scrollbar-width: thin;
}

select {
    cursor: pointer;
}

input:disabled,
    select:disabled,
    textarea:disabled {
    opacity: .48;
    cursor: not-allowed;
    background: #0a1320;
}

a {
    color: #a9c3d6;
}

a:hover {
    color: var(--eve-gold-soft);
}

body,
    button,
    input,
    select,
    textarea {
    font-family: Inter, "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

html,
    body {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
}

label {
    line-height: var(--eve-lh-ui);
}

input,
    select,
    textarea {
    background-color: #0d1827;
    color: var(--eve-frost);
    border-color: #31455e;
    font-size: var(--eve-fs-sm);
}

textarea {
    line-height: var(--eve-lh-body);
    padding: 9px 10px;
}

input:hover,
    select:hover,
    textarea:hover {
    border-color: rgba(185,205,220,.24);
}

input:focus,
    select:focus,
    textarea:focus {
    outline: none;
    border-color: rgba(212,175,55,.42);
    box-shadow: 0 0 0 1px rgba(212,175,55,.08);
}

progress {
    height: 5px;
    border: none;
    border-radius: 999px;
    overflow: hidden;
    background: #162337;
}

progress::-webkit-progress-bar {
    background: #162337;
}

progress::-webkit-progress-value {
    background: linear-gradient(90deg, #829fb6, #b9cddc);
}

progress::-moz-progress-bar {
    background: linear-gradient(90deg, #829fb6, #b9cddc);
}

input::placeholder,
    textarea::placeholder {
    color: #5f7487;
    opacity: 1;
}

button:disabled,
    input:disabled,
    select:disabled,
    textarea:disabled {
    box-shadow: none;
    transform: none;
    filter: saturate(.45);
    cursor: not-allowed;
    opacity: .38;
}

html {
    font-size: var(--eve-fs-lg);
    color-scheme: dark;
}

body {
    font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    height: 100vh;
    display: flex;
    overflow-x: hidden;   /* 2026-09-02: vasen reuna ei voi kadota vaakavieritykseen */
    flex-direction: column;
    color: var(--text);
    letter-spacing: 0.002em;
    min-height: 100vh;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow: hidden;
    font-size: var(--eve-fs-lg);
    line-height: var(--eve-lh-ui);
    background: var(--eve-night-900);
}

button,
    input,
    select,
    textarea {
    line-height: var(--eve-lh-tight);
    font: inherit;
}

button:disabled {
    opacity: 0.48;
}

/* ==========================================================================
   3. LAYOUT — 100vh shell, header, columns, timeline section
   ========================================================================== */
.full-preview-section.transcript-collapsed #transcriptColumn {
    display: none;
}

.full-preview-section.transcript-collapsed #transcriptReopenTab {
    display: block;
}

.full-preview-section.avatar-collapsed #avatarColumn {
    display: none;
}

.full-preview-section.avatar-collapsed #avatarReopenTab {
    display: block;
}

.full-preview-section.transcript-expanded #avatarColumn,
    .full-preview-section.transcript-expanded #avatarReopenTab {
    display: none;
}

/* Transcript expanded to full width (P14): preview + candidates hide */
.full-preview-section.transcript-expanded #previewColumn,
    .full-preview-section.transcript-expanded #candidatesColumn,
    .full-preview-section.transcript-expanded #transcriptReopenTab,
    .full-preview-section.transcript-expanded #candidatesReopenTab {
    display: none;
}

.full-preview-section.transcript-expanded #transcriptColumn {
    width: 100%;
    min-width: 0;
    max-height: calc(100vh - 150px);
}

#candidatesColumn .suggestions-panel::-webkit-scrollbar {
    display: none;
}

/* P17: collapsible candidates column (mirrors the transcript panel) */
.full-preview-section.candidates-collapsed #candidatesColumn {
    display: none;
}

/* P36 (2026-08-17): the trim panel's reopen label is a vertical icon-only tab again — stacked UNDER the Clips tab in #candTabStack, right of the candidates column (no longer a horizontal button above the timeline). Visible ONLY when the panel is hidden. */
#candTabStack {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-self: flex-start;
    flex-shrink: 0;
}

#timelineRow .timeline {
    flex: 1;
    min-width: 0;
}

.full-preview-section.candidates-collapsed #candidatesReopenTab {
    display: block;
}

#avatarColumn,
    #transcriptColumn,
    #candidatesColumn,
    #previewColumn,
    #trimPanel,
    .timeline-section {
    border-color: rgba(185, 205, 220, 0.12);
}

/* P32-13: circular handle on the right edge, vertically centered */
#transcriptColumn {
    width: 38%;
    min-width: 280px;
    max-height: calc(100vh - 150px);
    display: flex;
    flex-direction: column;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--eve-radius-md);
    overflow: hidden;
    position: relative;
    box-shadow: inset -1px 0 0 rgba(255,255,255,.01),
        8px 0 24px rgba(0,0,0,.05);
}

#avatarColumn {
    width: 250px;
    min-width: 220px;
    max-height: calc(100vh - 150px);
    display: flex;
    flex-direction: column;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--eve-radius-md);
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
    box-shadow: inset -1px 0 0 rgba(255,255,255,.01),
        6px 0 20px rgba(0,0,0,.04);
}

.app-header,
    .full-preview-section,
    .timeline-section {
    min-width: 0;
}

#avatarColumn,
    #transcriptColumn,
    #previewColumn,
    #candidatesColumn {
    min-width: 0;
    min-height: 0;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 7px;
}

#avatarColumn,
    #transcriptColumn,
    #candidatesColumn,
    #trimPanel,
    .timeline-section {
    background: linear-gradient(180deg, rgba(17, 29, 46, 0.94) 0%, rgba(9, 17, 29, 0.96) 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.012),
        0 0 0 1px rgba(255,255,255,.004);
}

#avatarColumn,
    #transcriptColumn,
    #candidatesColumn {
    background: #0a1320;
    border: 0;
    box-shadow: none;
}

#timelineRow {
    display: flex;
    align-items: stretch;
    min-width: 0;
    overflow: hidden;
    padding: 5px 16px 8px;
}

.full-preview-section {
    border-bottom: 1px solid var(--border);
    display: flex;
    gap: 14px;
    align-items: stretch;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    background: #050a12;
    padding: 16px 20px 0;
}

.full-preview-section::before,
    .full-preview-section::after {
    content: none;
}

.app-header h1,
    #renderBtn,
    #trimReopenTab,
    #autoclipReopenTab,
    .scene-block.active::before {
    --eve-signature-accent: var(--eve-gold);
}

#reopenTabStack button,
    #candTabStack button,
    #seekStartBtn,
    #playPauseBtn,
    #fullscreenBtn,
    #undoBtn,
    #redoBtn {
    font-size: 0 !important;
    line-height: 1;
}

.transcript-toolbar > span[title],
    #avatarColumn .transcript-toolbar > span[title] {
    opacity: .55;
    filter: grayscale(.25) saturate(.60);
    font-size: 0 !important;
    width: 12px;
    min-width: 12px;
    height: 12px;
    position: relative;
}

#transcriptColumn .transcript-toolbar > span[title]::before {
    content: "";
    display: block;
    width: 12px;
    height: 12px;
    background: #8fa6b8;
    -webkit-mask: url("icons/transcript.svg") center/contain no-repeat;
    mask: url("icons/transcript.svg") center/contain no-repeat;
}

#avatarColumn .transcript-toolbar > span[title]::before {
    content: "";
    display: block;
    width: 12px;
    height: 12px;
    background: #8fa6b8;
    -webkit-mask: url("icons/speaker.svg") center/contain no-repeat;
    mask: url("icons/speaker.svg") center/contain no-repeat;
}

#reopenTabStack button:hover,
    #candTabStack button:hover {
    color: var(--eve-gold-soft);
    background: #101c2b;
    border-color: rgba(185,205,220,.23);
    transform: none;
    opacity: 1;
}

#reopenTabStack,
    #candTabStack {
    gap: 6px;
    padding-top: 3px;
}

.app-header input,
    .app-header select,
    .timeline-section input,
    .timeline-section select {
    border-color: rgba(185,205,220,.08);
}

.app-header input:focus,
    .app-header select:focus,
    .timeline-section input:focus,
    .timeline-section select:focus {
    border-color: rgba(212,175,55,.32);
}

#reopenTabStack button,
    #candTabStack button,
    .panel-guide,
    #ownVideoBox,
    .candidate-card,
    .pool-card,
    .insert-result-card {
    border-radius: var(--eve-radius-md);
}

#avatarColumn,
    #transcriptColumn {
    border-right: 1px solid rgba(185,205,220,.055);
}

.timeline-section {
    padding: 12px 20px;
    flex-shrink: 0;
    max-height: 38vh;
    overflow-y: auto;
    flex: 0 0 auto;
    min-height: 0;
    overflow: hidden;
    box-shadow: none;
    background: #050a12;
    border-top: 1px solid rgba(185,205,220,.075);
    border-bottom: 1px solid rgba(185,205,220,.045);
    padding-top: 9px;
    padding-bottom: 8px;
}

/* P17: 2×2 grid — two cards side by side keeps the column short so the timeline stays visible on smaller screens */
#candidatesColumn .suggestions-panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: none;
    /* 2026-09-10 (AUDITTI korttikollapsi, kayttajan hyvaksyma): auto-rivit
       painuivat kasaan aina kun paneelin korkeus alitti sisallon — kortin
       korkeus tulee pelkasta aspect-ratio:16/9 -mediasta (P32-16 poisti
       kiintean px-korkeuden), eika aspect-ratio-media anna gridille
       sisaltokorkeutta, joten rivit romahtivat muutaman pikselin
       viuhkoiksi (overflow:hidden leikkasi median). Isolla ruudulla rivit
       SATUIVAT olemaan sisallon kokoiset — siksi vika nakyi vain
       toisinaan ("aina saannollisin valiajoin"). max-content pakottaa
       jokaisen rivin sisallon kokoiseksi; ylimaarainen sisalto vierittyy
       kuten ennenkin. Sama kaava kuin textfx-korttien vastaava korjaus
       (grid-auto-rows: max-content, 2026-09-01). Ei kiinteita px-kokoja. */
    grid-auto-rows: max-content;
    align-content: start;
    overflow-y: auto;
    max-height: none;
    flex: 1;
    scrollbar-width: none;
    -ms-overflow-style: none;
    position: relative;
    gap: 7px;
}

#candidatesColumn .suggestion-card:hover {
    border-color: rgba(212,175,55,.24);
    transform: none;
}

#trimPanel button,
    #candidatesColumn button {
    text-shadow: none;
}

#trimPanel hr,
    #candidatesColumn hr,
    #avatarColumn hr,
    #transcriptColumn hr {
    border-top-color: rgba(185,205,220,.065);
}

#candidatesColumn .suggestion-card .sugg-info {
    background: #0b1624;
    color: #94a6b5;
    padding: 3px 5px;
    font-size: var(--eve-fs-xs);
    line-height: var(--eve-lh-tight);
}

#candidatesColumn .suggestion-card .sugg-info > * {
    color: #879aab;
}

#candidatesColumn .suggestion-card:hover .sugg-info > * {
    color: #a9bac7;
}

#trimPanel label,
    #candidatesColumn label,
    #avatarColumn label {
    color: #8397a8;
    font-size: var(--eve-fs-xs);
}

#trimPanel small,
    #candidatesColumn small,
    #avatarColumn small {
    color: #708496;
}

#trimPanel .status,
    #trimPanel .note,
    #candidatesColumn .status,
    #candidatesColumn .note {
    color: #7f93a4;
}

.empty-state,
    .pool-empty,
    #candidatesColumn .empty-state,
    #transcriptColumn .empty-state,
    #avatarColumn .empty-state {
    background: transparent;
    border: 0;
    box-shadow: none;
    color: #708495;
    text-align: center;
}

/* P32-16: no fixed pixel height — the media box keeps its 16:9 SHAPE at any panel width (aspect-ratio scales with the card). A fixed 120px height made cards turn into tall strips when the panel was dragged narrower. */
#candidatesColumn .suggestion-card img,
    #candidatesColumn .suggestion-card video {
    width: 100%;
    aspect-ratio: 16/9;
    height: auto;
    object-fit: cover;
    display: block;
    background: #000;
    border-bottom: 1px solid rgba(185,205,220,.055);
}

#candidatesColumn .suggestion-card:hover img,
    #candidatesColumn .suggestion-card:hover video {
    filter: brightness(1.035) contrast(1.01);
}

#candidatesColumn > :last-child,
    #avatarColumn > :last-child,
    #transcriptColumn > :last-child {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

#transcriptColumn,
    #avatarColumn {
    border-right: 1px solid rgba(185,205,220,.10);
}

/* P14: clip candidates as a vertical column right of the preview */
#candidatesColumn {
    display: flex;
    flex-direction: column;
    gap: 8px;
    border: 1px solid var(--border);
    border-radius: var(--eve-radius-md);
    padding: 8px;
    max-height: calc(100vh - 150px);
    width: var(--cand-w, 220px);
    min-width: 180px;
    max-width: 480px;
    position: relative;
    box-shadow: inset 1px 0 0 rgba(255,255,255,.01),
        -8px 0 24px rgba(0,0,0,.05);
    background: #0a1320;
    border-left: 1px solid rgba(185,205,220,.10);
}

#transcriptColumn .transcript-toolbar,
    #avatarColumn .transcript-toolbar {
    min-height: 39px;
    padding: 7px 10px;
    background: var(--eve-night-850);
    border-bottom: 1px solid rgba(185,205,220,.085);
    position: relative;
}

/* ===== P13 Transcript panel (text-based editing) ===== */
#previewColumn {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
    /* 2026-09-05 (VILKKU-JUURISYY, kolmas yritys): container-type: size
       POISTETTU. Chromium kaynnisti kontin SISALLA olevat CSS-animaatiot
       (esim. tekstiefektin fadeRise) uudestaan JOKA KERTA kun kontin
       DOM:ia mutatoitiin — onAudioTimeUpdate kirjoittaa #currentTime:aan
       4 Hz -> tekstiefekti valkkyi koko toiston. Pienennyspiilotus hoituu
       nyt .preview-too-small-luokalla (ResizeObserver 21_init.js:ssa). */
    align-items: center;
    overflow: hidden;
    background: transparent;
    padding-left: 2px;
    padding-right: 2px;
}

#transcriptColumn .tt-btn,
    #avatarColumn .tt-btn,
    #candidatesColumn .tt-btn {
    min-height: 27px;
}

#transcriptColumn .tt-btn:hover,
    #avatarColumn .tt-btn:hover,
    #candidatesColumn .tt-btn:hover {
    background: rgba(185,205,220,.05);
}

#transcriptColumn .panel-header-name,
    #avatarColumn .panel-header-name,
    #candidatesColumn .panel-header-name {
    color: var(--eve-moon);
    font-weight: 600;
    font-size: var(--eve-fs-lg);
    line-height: var(--eve-lh-tight);
    letter-spacing: 0.01em;
}

#transcriptColumn .transcript-toolbar::before,
    #avatarColumn .transcript-toolbar::before {
    content: "";
    position: absolute;
    left: 10px;
    bottom: -1px;
    width: 26px;
    height: 1px;
    background: rgba(212,175,55,.42);
    pointer-events: none;
    opacity: .70;
}

#candidatesColumn .suggestion-card.selected {
    box-shadow: inset 0 0 0 1px rgba(212,175,55,.07);
    border-color: rgba(212,175,55,.32);
}

#transcriptColumn > :last-child,
    #avatarColumn > :last-child,
    #candidatesColumn > :last-child {
    border-bottom-color: rgba(185,205,220,.055);
}

.app-header .header-btn:not(#renderBtn) {
    font-size: var(--eve-fs-xs);
    letter-spacing: .002em;
}

/* 2026-09-03 (kayttajan pyynto): every header button shares one height
   and vertical centering — Export included. Icon-only buttons (settings
   gear, bug report, undo/redo) are fixed squares without text. */
.app-header .header-btn:not(.auth-user-chip) {
    height: 34px;
    min-height: 34px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-sizing: border-box;
    white-space: nowrap;
}

.app-header .header-btn.icon-only {
    width: 34px;
    padding: 0;
    flex-shrink: 0;
}

/* Id-specificity overrides (beat the legacy 42px square rule for
   undo/redo/logout and the Export min-height/padding rules) so EVERY
   header-bar button really shares the same 34px height. */
.app-header #undoBtn,
    .app-header #redoBtn,
    .app-header #logoutBtn,
    .app-header #settingsBtn,
    .app-header #bugReportBtn {
    width: 34px;
    height: 34px;
    min-width: 34px;
    min-height: 34px;
    padding: 0;
}

.app-header #renderBtn {
    height: 34px;
    min-height: 34px;
    padding: 0 12px;
}

/* The uniform header-bar sizing above must NOT leak into the dropdown
   menus that live under .app-header — menu rows keep their own look
   (full-width, left-aligned, taller touch targets). */
.app-header .insert-menu .header-btn,
    .app-header .file-menu .header-btn {
    height: auto;
    min-height: 38px;
    padding: 7px 9px;
    justify-content: flex-start;
}

.app-header .header-btn:not(#renderBtn):active {
    transform: translateY(0);
}

#candidatesColumn .suggestion-card,
    .pool-card {
    transition: border-color 120ms ease, background-color 120ms ease;
}

#candidatesColumn .suggestion-card:hover img,
    #candidatesColumn .suggestion-card:hover video,
    .pool-card:hover img,
    .pool-card:hover video {
    filter: saturate(.98) brightness(1.03);
}

#candidatesColumn .suggestion-card.selected,
    .pool-card.selected {
    border-color: rgba(212,175,55,.34);
}

.app-header,
    .transcript-toolbar,
    .timeline-header {
    align-items: center;
}

#transcriptColumn,
    #avatarColumn,
    #candidatesColumn,
    #trimPanel,
    .timeline-section {
    box-sizing: border-box;
}

.transcript-toolbar,
    .timeline-section,
    #trimPanel,
    #ttFindBar,
    .panel-guide {
    border-color: var(--eve-soft-line);
}

#transcriptColumn button:hover,
    #avatarColumn button:hover,
    #candidatesColumn button:hover,
    #trimPanel button:hover {
    border-color: var(--eve-soft-line-hover);
}

#reopenTabStack button,
    #candTabStack button,
    .full-preview-controls .control-btn {
    -webkit-tap-highlight-color: transparent;
}

#candidatesColumn .suggestion-card img,
    #candidatesColumn .suggestion-card video,
    .pool-card img,
    .pool-card video {
    filter: saturate(.92) brightness(.98);
    display: block;
    width: 100%;
    background: #050a11;
}

#candidatesColumn .suggestion-card {
    background: #0f1c2d;
    border: 1px solid rgba(185,205,220,.07);
    border-radius: var(--eve-radius-sm);
    box-shadow: none;
    overflow: hidden;
}

#candidatesColumn .suggestion-card .sugg-info,
    .pool-card .pool-meta {
    border-top: 1px solid rgba(185,205,220,.045);
}

#transcriptColumn,
    #avatarColumn,
    #candidatesColumn {
    background: #09131f;
    border-radius: var(--eve-radius-md);
    overflow: hidden;
    position: relative;
}

#transcriptColumn::after,
    #avatarColumn::after {
    content: "";
    position: absolute;
    top: 42px;
    right: 0;
    bottom: 8px;
    width: 1px;
    background: rgba(185,205,220,.10);
    pointer-events: none;
}

#candidatesColumn::before {
    content: "";
    position: absolute;
    top: 42px;
    left: 0;
    bottom: 8px;
    width: 1px;
    background: rgba(185,205,220,.10);
    pointer-events: none;
}

#transcriptColumn:hover::after,
    #avatarColumn:hover::after,
    #candidatesColumn:hover::before {
    background: rgba(185,205,220,.17);
}

.app-header h1,
    .scene-block.active::before,
    #transcriptColumn .transcript-toolbar::before,
    #avatarColumn .transcript-toolbar::before {
    pointer-events: none;
}

.app-header h1 {
    color: var(--eve-gold);
    font-size: var(--eve-fs-lg);
    font-weight: 680;
    letter-spacing: .018em;
    text-shadow: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    text-indent: -9999px;
    white-space: nowrap;
    background-image: url("eve-logo-header.png");
    background-repeat: no-repeat;
    width: 138px;
    min-width: 138px;
    height: 40px;
    flex: 0 0 138px;
    background-size: contain;
    background-position: left center;
    opacity: .96;
}

/* P24: Avatar + Transcript labels share ONE narrow vertical stack on the left edge (Avatar below Transcript) instead of each taking its own horizontal slot. */
#reopenTabStack {
    display: flex;
    flex-direction: column;
    align-self: flex-start;
    flex-shrink: 0;
    gap: 12px;
    padding-top: 10px;
    align-items: center;
}

#reopenTabStack button {
    width: 46px;
    height: 46px;
    min-width: 46px;
    min-height: 46px;
    border-radius: var(--eve-radius-lg);
    background: #0a1522;
    border: 1px solid rgba(185,205,220,.12);
    box-shadow: none;
}

#reopenTabStack button:hover {
    background: #101d2d;
    border-color: rgba(185,205,220,.24);
}

#reopenTabStack button:hover::before {
    background: #dce6ec;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.app-header .header-btn,
    .app-header button,
    .app-header .menu-trigger {
    font-size: var(--eve-fs-sm);
}

.app-header .header-btn:not(#newProjectBtn):not(#renderBtn),
    .app-header .menu-trigger {
    font-size: var(--eve-fs-sm);
    line-height: var(--eve-lh-tight);
}

.app-header .user-email,
    .app-header .account-email,
    .app-header [class*="email"] {
    font-size: var(--eve-fs-xs);
}

#reopenTabStack button,
    #candTabStack button {
    box-shadow: none;
    padding: 0;
    border-radius: var(--eve-radius-md);
    background: #09131f;
    border: 1px solid rgba(185,205,220,.105);
    opacity: .78;
    width: 50px;
    height: 50px;
    min-width: 50px;
    min-height: 50px;
    font-size: 0 !important;
    color: transparent;
    position: relative;
}

/* 2026-09-03 (pyyntosetti 3): :not(:has(img)) — tama maski-::before kuuluu VAIN
   nappeihin, joissa ei ole <img>-kuvaketta. Uusi nappi jossa <img> ei enaa
   koskaan saa tata umpinaista laatikkoa paalleen (toistuva valkoinen ruutu
   korjattu juurisyysta; #toolsReopenTab oli viimeisin uhri). */
#reopenTabStack button:not(#transcriptReopenTab):not(#avatarReopenTab):not(#trimReopenTab):not(:has(img))::before,
    #candTabStack button:not(#candidatesReopenTab):not(#autoclipReopenTab):not(#musicReopenTab):not(#eveTIcon):not(:has(img))::before {
    content: "";
    width: var(--eve-icon-size-panel);
    height: var(--eve-icon-size-panel);
    display: block;
    margin: auto;
    background: var(--eve-icon-moonlight);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

#avatarColumn .avatar-btn::before,
    #avatarColumn .avatar-btn::after,
    #avatarColumn .speaker-method-btn::before,
    #avatarColumn .speaker-method-btn::after,
    #avatarColumn .eve-choice-label::before,
    #avatarColumn .eve-choice-label::after,
    #trimPanel .avatar-btn::before,
    #trimPanel .avatar-btn::after,
    #trimPanel .eve-choice-label::before,
    #trimPanel .eve-choice-label::after {
    content: none;
    display: none;
}

#avatarColumn .avatar-btn,
    #avatarColumn .speaker-method-btn,
    #trimPanel .avatar-btn {
    gap: 10px;
}

#avatarColumn .avatar-btn > .eve-ui-icon,
    #avatarColumn .speaker-method-btn > .eve-ui-icon,
    #avatarColumn .eve-action-icon > .eve-ui-icon,
    #avatarColumn .eve-choice-label > .eve-ui-icon,
    #trimPanel .avatar-btn > .eve-ui-icon,
    #trimPanel .eve-action-icon > .eve-ui-icon,
    #trimPanel .eve-choice-label > .eve-ui-icon {
    width: 25px;
    height: 25px;
    min-width: 25px;
    flex-basis: 25px;
}

#candidatesColumn .cand-tab > .eve-ui-icon {
    width: 23px;
    height: 23px;
    min-width: 23px;
    flex-basis: 23px;
}

#candidatesColumn .cand-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-flow: row nowrap;
    gap: 9px;
    font-size: var(--eve-fs-md);
    line-height: var(--eve-lh-tight);
    min-height: 48px;
    white-space: nowrap;
    overflow: hidden;
}

#candidatesColumn .cand-tabs {
    align-items: stretch;
}

#candidatesColumn #candTabStock,
    #candidatesColumn #candTabOwn {
    text-align: center;
}

#candidatesColumn .cand-tab::before,
    #candidatesColumn .cand-tab::after {
    content: none;
    display: none;
}

.app-header {
    display: flex;
    flex-shrink: 0;
    justify-content: space-between;
    align-items: center;
    box-shadow: none;
    background: #050a12;
    border-bottom: 1px solid rgba(185,205,220,.075);
    min-height: 64px;
    padding: 8px 12px;
    gap: 8px;
    flex-wrap: nowrap;   /* 2026-09-03 (kayttajan pyynto): kaikki yhdelle riville */
}


#avatarColumn [style*="font-size: 0.5"],
    #avatarColumn [style*="font-size: 0.6"],
    #avatarColumn [style*="font-size: 0.7"],
    #transcriptColumn [style*="font-size: 0.5"],
    #transcriptColumn [style*="font-size: 0.6"],
    #transcriptColumn [style*="font-size: 0.7"],
    #candidatesColumn [style*="font-size: 0.5"],
    #candidatesColumn [style*="font-size: 0.6"],
    #candidatesColumn [style*="font-size: 0.7"],
    #trimPanel [style*="font-size: 0.5"],
    #trimPanel [style*="font-size: 0.6"],
    #trimPanel [style*="font-size: 0.7"] {
    font-size: var(--eve-fs-sm);
    line-height: var(--eve-lh-ui);
}

#transcriptColumn > .transcript-toolbar {
    display: flex;
    align-items: center;
    align-content: flex-start;
    flex-wrap: wrap;
    column-gap: 8px;
    row-gap: 7px;
    overflow: visible;
}

#transcriptColumn > .transcript-toolbar > .panel-header-name {
    order: 1;
    flex: 0 0 auto;
}

#transcriptColumn > .transcript-toolbar > .panel-header-name + span:not(.tt-fontsize-wrap) {
    order: 2;
    flex: 0 0 auto;
}

#transcriptColumn .tt-fontsize-wrap {
    order: 3;
    flex: 0 0 auto;
    position: relative;
    z-index: 8;
    margin: 0;
    min-width: 102px;
    background: #0b1725;
}

#transcriptColumn #ttHelpBtn {
    order: 4;
    margin-left: auto;
    flex: 0 0 40px;
}

/* 2026-09-02 (user request): #ttCollapseBtn and the #ttToolbarBtns
   full-row/order rules are GONE — the editing buttons moved into the
   Edit/Actions dropdown menus (see TOOLBAR MENUS at the end of this file). */

#avatarColumn .avatar-photo-row {
    display: grid;
    grid-template-columns: 44px minmax(145px, 1fr) auto;
    align-items: center;
    gap: 9px;
    width: 100%;
    min-width: 0;
}

#avatarColumn .avatar-photo-row > label.avatar-btn.avatar-btn-inline {
    min-width: 0;
    width: 100%;
    max-width: none;
    margin: 0;
    white-space: nowrap;
}

#avatarColumn .avatar-photo-row > button.avatar-btn.avatar-btn-inline {
    min-width: 98px;
    margin: 0;
    white-space: nowrap;
}

#avatarColumn .avatar-photo-row > label.avatar-btn.avatar-btn-inline::before,
    #avatarColumn .avatar-photo-row > label.avatar-btn.avatar-btn-inline::after,
    #avatarColumn .avatar-photo-row > button.avatar-btn.avatar-btn-inline::before,
    #avatarColumn .avatar-photo-row > button.avatar-btn.avatar-btn-inline::after,
    #avatarColumn .avatar-photo-row .eve-action-icon::before,
    #avatarColumn .avatar-photo-row .eve-action-icon::after {
    content: none;
    display: none;
    width: 0;
    height: 0;
    background: none;
    background-image: none;
    -webkit-mask-image: none;
    mask-image: none;
}

#avatarColumn .avatar-photo-row .eve-action-icon,
    #avatarColumn .avatar-photo-row .eve-ui-icon {
    width: 26px;
    height: 26px;
    min-width: 26px;
    flex-basis: 26px;
}

/* ==========================================================================
   4. COMPONENTS — buttons, panels, tabs, menus, modals, transcript, timeline, preview
   ========================================================================== */
.header-btn:disabled {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
}

.header-btn:hover {
    border-color: var(--beige);
    color: var(--beige);
}

.header-btn .icon {
    font-size: var(--eve-fs-lg);
}

/* Insert dropdown (P15 header reorganization) */
.insert-dropdown {
    position: relative;
}

/* File menu (2026-08-18): sits in header-LEFT, so it opens rightward (the Insert menu's menus are right-aligned). */
.file-menu {
    left: 0;
    right: auto;
    min-width: 210px;
}

.file-submenu::before {
    left: auto;
    right: 100%;
}

#fileMenu .ai-cost-badge {
    padding: 8px 10px;
    font-size: var(--eve-fs-sm);
    text-align: center;
}

#fileMenu .file-menu-code {
    padding: 6px 10px;
    font-size: var(--eve-fs-xs);
    color: var(--text-dim);
    cursor: pointer;
    border-bottom: 1px solid var(--border);
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#fileMenu .file-menu-code:hover {
    color: var(--beige);
}

#transcribeChip {
    align-items: center;
    gap: 6px;
    background: #22303f;
    color: #7cc7ff;
    border: 1px solid #35506b;
    border-radius: var(--eve-radius-sm);
    padding: 3px 10px;
    font-size: var(--eve-fs-xs);
    font-weight: 600;
    white-space: nowrap;
    animation: transcribe-chip-pulse 1.6s ease-in-out infinite;
}

.status-idle {
    background: #3a3a5a;
    color: var(--text-dim);
}

.status-analyzing {
    background: #3a4a6a;
    color: var(--accent);
}

.status-fetching {
    background: #4a3a6a;
    color: var(--warning);
}

.status-preview {
    background: #2a4a3a;
    color: var(--success);
}

.status-rendering {
    background: #4a3a2a;
    color: var(--warning);
}

.status-done {
    background: #2a4a2a;
    color: var(--success);
}

.status-error {
    background: #4a2a2a;
    color: var(--error);
}

.status-brainstorm_ready {
    background: #4a3a5a;
    color: var(--beige-light);
}

.status-brainstorm_approved {
    background: #3a4a5a;
    color: var(--accent);
}

.status-uploaded {
    background: #3a5a4a;
    color: var(--success);
}

.ai-cost-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: var(--eve-radius-sm);
    font-size: var(--eve-fs-xs);
    font-weight: 600;
    font-family: 'Segoe UI', monospace;
    background: #2a3a2a;
    color: #4ade80;
    border: 1px solid #3a5a3a;
    white-space: nowrap;
}

.main-container {
    display: flex;
    flex-direction: column;
    gap: 0;
}

#transcriptReopenTab {
    display: none;
    align-self: flex-start;
    writing-mode: vertical-rl;
    text-orientation: upright;
    letter-spacing: 2px;
    padding: 12px 6px;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--eve-radius-sm);
    color: var(--beige);
    cursor: pointer;
    font-size: var(--eve-fs-xs);
}

/* P40 (2026-08-17): every open panel shows its NAME in the header again, with the icon on the name's right side */
.panel-header-name {
    white-space: nowrap;
    color: var(--eve-moon);
    font-weight: 600;
    font-size: var(--eve-fs-lg);
    line-height: var(--eve-lh-tight);
    letter-spacing: 0.01em;
}

.panel-arrow-btn {
    width: 32px;
    min-width: 32px;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--beige);
    border: 1px solid var(--beige);
    border-radius: var(--eve-radius-md);
    cursor: pointer;
    transition: background 0.15s, transform 0.15s, opacity 0.15s;
}

.panel-arrow-btn:hover {
    background: var(--beige-light);
    border-color: var(--beige-light);
}

.panel-arrow-btn:active {
    transform: scale(0.96);
}

.panel-arrow-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

.panel-arrow-btn::before {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 11px solid #101018;
}

.panel-arrow-btn.arrow-left::before {
    border-left: 0;
    border-right: 11px solid #101018;
}

.panel-arrow-btn.arrow-up::before {
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 0;
    border-bottom: 11px solid #101018;
}

.panel-arrow-btn.arrow-down::before {
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 0;
    border-top: 11px solid #101018;
}

#ttFindBar input {
    font-size: var(--eve-fs-xs);
    padding: 3px 7px;
    width: 110px;
    background: var(--bg-card);
    color: var(--text, #e8e4dc);
    border: 1px solid var(--border);
    border-radius: var(--eve-radius-sm);
    outline: none;
}

#ttFindBar input:focus {
    border-color: var(--beige);
}

#ttFindCount {
    font-size: var(--eve-fs-xs);
    color: var(--text-dim);
    min-width: 32px;
    text-align: center;
}

.tw.find-hit {
    background: rgba(251, 191, 36, 0.25);
    border-radius: var(--eve-radius-sm);
}

.tw.find-current {
    background: rgba(251, 191, 36, 0.55);
    border-radius: var(--eve-radius-sm);
}

#transcriptBody::-webkit-scrollbar {
    display: none;
}

#transcriptBody p {
    margin: 0 0 0.9em 0;
}

#transcriptBody .tw:hover {
    background: rgba(212,165,116,0.15);
}

#transcriptBody .tw.playing {
    background: var(--beige);
    color: #1a1a1a;
}

#transcriptBody .tw.muted:hover {
    background: none;
}

#faceBox {
    display: none;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-top: 1px solid var(--border);
    cursor: pointer;
    flex-shrink: 0;
}

#faceBox:hover {
    background: rgba(212,165,116,0.08);
}

#faceBoxMedia video,
    #faceBoxMedia img {
    width: 72px;
    height: 48px;
    object-fit: cover;
    border-radius: var(--eve-radius-sm);
    background: #000;
    display: block;
}

#faceBoxLabel {
    font-size: var(--eve-fs-xs);
    color: var(--text-dim);
}

.tt-caret {
    display: inline-block;
    width: 2px;
    height: 1.1em;
    background: var(--beige);
    vertical-align: text-bottom;
    margin: 0 -1px;
}

#avatarReopenTab {
    display: none;
    align-self: flex-start;
    writing-mode: vertical-rl;
    text-orientation: upright;
    letter-spacing: 2px;
    padding: 12px 6px;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--eve-radius-sm);
    color: var(--beige);
    cursor: pointer;
    font-size: var(--eve-fs-xs);
}

#avatarPanelBody::-webkit-scrollbar {
    display: none;
}

#avatarEdgeHandle:hover {
    border-color: var(--beige);
    background: var(--bg-panel);
}

#avatarEdgeHandle.dragging {
    cursor: grabbing;
}

#avatarScrollBtn {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--bg-darker);
    border: 1px solid var(--border);
    color: var(--beige);
    font-size: var(--eve-fs-sm);
    cursor: pointer;
    z-index: 25;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.45);
}

#avatarScrollBtn:hover {
    border-color: var(--beige);
    background: var(--bg-panel);
}

.speaker-help-h {
    margin: 12px 0 4px;
    color: var(--beige);
    font-weight: 700;
    font-size: var(--eve-fs-xs);
}

.avatar-section {
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.avatar-section:last-child {
    border-bottom: none;
}

.avatar-sec-title {
    margin-bottom: 8px;
    color: var(--text-dim);
    font-weight: 600;
    font-size: var(--eve-fs-xs);
}

.avatar-btn-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.avatar-btn {
    font-size: var(--eve-fs-xs);
    padding: 7px 10px;
    width: 100%;
    background: var(--bg-card);
    color: var(--text, #e8e4dc);
    border: 1px solid var(--border);
    border-radius: var(--eve-radius-sm);
    cursor: pointer;
    text-align: left;
}

.avatar-btn:hover {
    border-color: var(--beige);
}

.avatar-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

.avatar-btn-inline {
    width: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    font-size: var(--eve-fs-xs);
}

label.avatar-btn {
    cursor: pointer;
    margin: 0;
}

label.avatar-btn input[type="file"] {
    display: none;
}

/* P32-6: FACE panel — drop zone for My clips explainer */
.face-drop-zone {
    border: 1.5px dashed var(--border);
    border-radius: var(--eve-radius-md);
    padding: 9px 8px;
    text-align: center;
    font-size: var(--eve-fs-xs);
    color: var(--text-dim);
    margin-top: 8px;
}

.face-drop-zone.drop-target {
    outline: 2px dashed var(--success);
    outline-offset: -3px;
    color: var(--success);
}

.face-placement-info {
    font-size: var(--eve-fs-xs);
    color: var(--text-dim);
    margin-top: 8px;
    line-height: var(--eve-lh-ui);
}

.speaker-placement label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.speaker-placement label.disabled {
    opacity: 0.4;
    cursor: default;
}

.speaker-align-thumb:hover {
    outline: 2px solid var(--beige);
    outline-offset: -2px;
}

.tt-empty {
    color: var(--text-dim);
    font-size: var(--eve-fs-sm);
    padding: 12px;
}

/* 2026-09-02 (user request): the .tt-empty-help empty-state styles are GONE
   together with the "Your words control the video…" text itself. */

.panel-guide b {
    color: var(--beige);
}

.panel-guide ul {
    margin: 8px 0 0 20px;
    padding: 0;
}

.panel-guide li {
    margin-bottom: 6px;
}

#guidePreview {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    max-width: 74%;
    background: rgba(18,18,26,0.88);
    border: 1px solid var(--border);
    border-radius: var(--eve-radius-lg);
    z-index: 8;
    pointer-events: none;
    text-align: center;
}

#trimPanel.guide-mode {
    display: block !important;
}

#trimPanel.guide-mode > *:not(#guideScene) {
    display: none !important;
}

#trimPanel:not(.guide-mode) #guideScene {
    /* 2b-3: !important poistettu — todistettu turhaksi (ei kilpailevaa voittajaa, ks. loki 2026-09-02) */
    display: none;
}

/* 2026-09-02 (user request): .tt-empty-help ul/li, the collapsible .tt-btns
   row and #ttCollapseBtn are GONE — replaced by the Edit/Actions menus. */

#ttHelpBtn {
    font-weight: 700;
    flex-shrink: 0;
}

#ttEdgeHandle:hover {
    border-color: var(--beige);
    background: var(--bg-panel);
}

#ttEdgeHandle.dragging {
    cursor: grabbing;
}

#candEdgeHandle:hover {
    border-color: var(--beige);
    background: var(--bg-panel);
}

#candEdgeHandle.dragging {
    cursor: grabbing;
}

#trimEdgeHandle.dragging {
    cursor: grabbing;
}

.trim-audio-track-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}

.trim-audio-state {
    font-size: var(--eve-fs-xs);
    color: var(--text-dim);
}

#audioTrackCanvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.trim-audio-words {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 2px;
    height: 15px;
    pointer-events: none;
    overflow: hidden;
    white-space: nowrap;
}

.trim-audio-words .atw {
    position: absolute;
    font-size: var(--eve-fs-xs);
    color: var(--text);
    text-shadow: 0 1px 2px var(--bg-darker);
}

.trim-audio-words .atw.muted {
    color: var(--text-dim);
    text-decoration: line-through;
    opacity: 0.6;
}

.trim-audio-playhead {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    margin-left: -1px;
    background: #fff;
    box-shadow: 0 0 4px rgba(0,0,0,0.6);
    pointer-events: none;
}

.trim-audio-controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.trim-audio-controls .atc-btn {
    padding: 4px 8px;
    font-size: var(--eve-fs-xs);
    background: var(--bg-card);
    color: var(--text);
    border: 1px dashed var(--border);
    border-radius: var(--eve-radius-sm);
    cursor: pointer;
}

.trim-audio-controls .atc-btn:disabled {
    opacity: 0.45;
    cursor: default;
}

.trim-audio-controls label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--eve-fs-xs);
    color: var(--text);
    cursor: pointer;
}

.trim-audio-controls .atc-vol {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--eve-fs-xs);
    color: var(--text-dim);
}

.trim-audio-controls .atc-vol input[type="range"] {
    width: 90px;
}

.trim-audio-controls .atc-note {
    font-size: var(--eve-fs-xs);
    color: var(--text-dim);
}

/* P32-13: shortcuts table in the ? help popup */
.tt-shortcuts {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--eve-fs-xs);
}

.tt-shortcuts td {
    padding: 3px 6px;
    border-bottom: 1px solid var(--border);
}

.tt-shortcuts td:first-child {
    color: var(--beige);
    font-weight: 600;
    white-space: nowrap;
    width: 90px;
}

.dl-file {
    margin-bottom: 10px;
    padding: 8px 10px;
    background: var(--bg-card);
    border-radius: var(--eve-radius-sm);
}

.dl-file-name {
    font-size: var(--eve-fs-sm);
    font-weight: 700;
    margin-bottom: 3px;
}

.dl-file-desc {
    font-size: var(--eve-fs-xs);
    color: var(--text-dim);
    line-height: var(--eve-lh-body);
}

.dl-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
}

.dl-fact {
    font-size: var(--eve-fs-xs);
    background: var(--bg-card);
    padding: 4px 10px;
    border-radius: var(--eve-radius-lg);
}

.dl-coming-soon {
    border: 1px dashed var(--beige);
    border-radius: var(--eve-radius-md);
    padding: 10px 12px;
    color: var(--text-dim);
    background: rgba(212,165,116,0.05);
}

#candidatesReopenTab {
    display: none;
    align-self: flex-start;
    writing-mode: vertical-rl;
    text-orientation: upright;
    letter-spacing: 2px;
    padding: 12px 6px;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--eve-radius-sm);
    color: var(--beige);
    cursor: pointer;
    font-size: var(--eve-fs-xs);
}

#trimReopenTab:hover {
    border-color: var(--beige);
}

#buildSuggBox[style*="display: none"],
    #analyzeSplitBox[style*="display: none"] {
    display: none;
}

.build-sugg-title {
    font-size: var(--eve-fs-xs);
    font-weight: 700;
    color: var(--beige);
}

.build-sugg-desc {
    font-size: var(--eve-fs-xs);
    color: var(--text-dim);
    line-height: var(--eve-lh-ui);
}

.build-sugg-scope {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: var(--eve-fs-xs);
    color: var(--text);
}

.build-sugg-scope label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

#suggRangeInput {
    flex: 1;
    min-width: 0;
    padding: 3px 6px;
    border-radius: var(--eve-radius-sm);
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text);
    font-size: var(--eve-fs-xs);
}

#buildSuggBtn {
    width: 100%;
}

/* P41 (2026-08-17): the Analyze…/Build… option sheets — hidden until the button is clicked (JS toggles display to flex) */
.cand-details {
    display: none;
    flex-direction: column;
    gap: 8px;
    margin-top: 6px;
    border: 1px dashed var(--border);
    border-radius: var(--eve-radius-sm);
    padding: 8px;
}

#stockPanelPane {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    min-height: 0;
}

#stockPanelPane.hidden-pane {
    display: none;
}

#ownClipsPanel {
    display: none;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    min-height: 0;
}

#ownClipsPanel.active {
    display: flex;
}

#ownClipsPanel.drop-target {
    outline: 2px dashed var(--success);
    outline-offset: -4px;
    border-radius: var(--eve-radius-sm);
}

/* 2026-09-05: AI clips panel visibility — mirrors #ownClipsPanel.
   The .active rule was lost pre-2026-08-31 (the inline display:none on
   #clipGenPanel always won), which left the AI clips tab permanently
   empty. The inline style is removed in the same build. */
#clipGenPanel {
    display: none;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    min-height: 0;
}

#clipGenPanel.active {
    display: flex;
}

.pool-toolbar .btn {
    flex: 1;
}

.folder-chip {
    padding: 3px 8px;
    font-size: var(--eve-fs-xs);
    border-radius: var(--eve-radius-lg);
    cursor: pointer;
    background: var(--bg-card);
    color: var(--text-dim);
    border: 1px solid var(--border);
    white-space: nowrap;
}

.folder-chip.active {
    color: var(--beige);
    border-color: var(--beige);
    font-weight: 600;
}

.folder-chip.drop-hover {
    border-color: var(--success);
    color: var(--success);
}

#ownClipsGrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
    align-content: start;
    min-width: 0;
    gap: 8px;
    overflow-y: auto;
    flex: 1;
    scrollbar-width: none;
}

#ownClipsGrid::-webkit-scrollbar {
    display: none;
}

.pool-card:hover {
    border-color: var(--beige);
}

.pool-card.dragging {
    opacity: 0.4;
}

.pool-card img,
    .pool-card video {
    width: 100%;
    aspect-ratio: 16/9;
    height: auto;
    object-fit: cover;
    display: block;
    background: #000;
}

.pool-thumb-fallback {
    width: 100%;
    aspect-ratio: 16/9;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--eve-fs-display);
    background: #111;
}

.pool-card.pool-face img {
    border-radius: 50%;
    aspect-ratio: 1;
    width: 64%;
    margin: 8px auto 0;
    border: 2px solid var(--beige);
    object-fit: cover;
}

.pool-card.pool-face .pool-thumb-fallback {
    border-radius: 50%;
    aspect-ratio: 1;
    width: 64%;
    margin: 8px auto 0;
    border: 2px solid var(--beige);
}

.pool-face-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 3;
    background: var(--beige);
    color: #1a1a1a;
    font-size: var(--eve-fs-xs);
    font-weight: 700;
    border-radius: 999px;
    padding: 1px 7px;
    pointer-events: none;
}

/* rvm_matte (2026-08-24): per-card background-removal button + "BG removed" badge for '{stem}_matted.webm' derivatives. */
/* 2026-09-07 (lisäys 14, BUGI 2): the badge moved DOWN from the top-left
   corner — it shared that corner with the folder tag (and, on hover, the
   share button), so the labels painted on top of each other. */
.pool-matted-badge {
    position: absolute;
    top: 22px;
    left: 4px;
    z-index: 3;
    background: var(--success, #4a9e4a);
    color: #fff;
    font-size: var(--eve-fs-xs);
    font-weight: 700;
    border-radius: 999px;
    padding: 1px 7px;
    pointer-events: none;
}

.pool-matte-btn {
    position: absolute;
    bottom: 22px;
    right: 4px;
    z-index: 4;
    background: rgba(0,0,0,0.65);
    color: var(--beige);
    border: 1px solid var(--beige);
    border-radius: var(--eve-radius-sm);
    font-size: var(--eve-fs-xs);
    line-height: 1;
    padding: 3px 5px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s;
}

.pool-card:hover .pool-matte-btn {
    opacity: 1;
}

/* 2026-09-08 (BUGI — käyttäjän raportti "kaksi esikatselua limittäin"):
   button[title] { position: relative } (specificity 0,1,1) voitti
   .pool-matte-btn / .pool-share-btn -sääntöjen position:absolute (0,1,0),
   koska molemmilla on title-attribuutti. Matte-nappi muuttui virta-
   elementiksi kortin ylälaitaan ja työnsi pikkukuvan ~31 px alemmaksi,
   kun taas absoluuttinen .pool-hover-video jäi top:0:hon — hoverissa
   näkyi KAKSI esikatselua limittäin. Palautetaan absolute korkeammalla
   spesifisyydellä (0,2,1). */
.pool-card button.pool-matte-btn,
.pool-card button.pool-share-btn {
    position: absolute;
}

.pool-matte-btn:disabled {
    opacity: 0.5;
    cursor: wait;
}

.pool-hover-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    aspect-ratio: 16/9;
    height: auto;
    object-fit: cover;
    background: #000;
    z-index: 2;
    pointer-events: none;
}

.pool-card .pool-label {
    padding: 3px 5px;
    font-size: var(--eve-fs-xs);
    color: var(--text-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pool-empty {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--text-dim);
    font-size: var(--eve-fs-xs);
    padding: 24px 8px;
}

.scene-block.drop-target {
    outline: 2px dashed var(--success);
    outline-offset: -2px;
    background: rgba(46,204,113,0.12);
}

#transcriptBody.drop-target {
    outline: 2px dashed var(--success);
    outline-offset: -2px;
}

#fullPreviewWrapper.drop-target {
    outline: 3px dashed var(--success);
    outline-offset: -3px;
}

#dropSceneBadge {
    position: fixed;
    display: none;
    z-index: 3000;
    pointer-events: none;
    background: var(--bg-panel);
    border: 1px solid var(--success);
    color: var(--success);
    padding: 4px 10px;
    border-radius: var(--eve-radius-sm);
    font-size: var(--eve-fs-xs);
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

.full-preview-wrapper.portrait {
    aspect-ratio: 9/16;
    max-width: none;
    width: min(100%, max(90px, calc((100cqh - 48px) * 9 / 16)));
}

.format-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: var(--eve-radius-sm);
    font-size: var(--eve-fs-xs);
    font-weight: 600;
    font-family: 'Segoe UI', monospace;
    background: #2a3242;
    color: #7ab3ff;
    border: 1px solid #3a4a5a;
    white-space: nowrap;
}

#ownVideoBoxLabel {
    font-size: var(--eve-fs-xs);
    color: var(--text-dim);
}

.full-preview-wrapper video.video-a,
    .full-preview-wrapper video.video-b {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 1.0s ease;
}

/* BR12 (2026-09-15): kuvaelementtien contain-koko CSS:aan — aiemmin se oli
   VAIN index.html:n inline-tyyli, ja 0911k:n _pvCropClearAll pyyhki inline-
   tyylit jokaisessa skenenvaihdossa (myos croppaamattomilla skeneilla),
   jolloin kuva palautui luonnolliseen kokoonsa ja rajautui valtavasti.
   Sama kaava kuin videoilla ylla: 0911k:n crop-matikka asettaa tarvittaessa
   inline-pikselityylit taman saannon YLI, ja pyyhinta palauttaa aina
   normaalin contain-nayton. */
.full-preview-wrapper #imgA,
    .full-preview-wrapper #imgB {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* 2026-09-15 (pyyntosetti): esikatselun oikean napin kontekstivalikko —
   rajaus / kopioi / liita / piilota skene / poista skene. Sama ilme kuin
   ehdotuskorttien #contextMenu:ssa. */
#previewCtxMenu {
    position: fixed;
    display: none;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 4px 0;
    z-index: 2100;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    min-width: 200px;
}
.pv-ctx-item {
    padding: 8px 16px;
    cursor: pointer;
    font-size: 0.8rem;
    color: var(--text);
    transition: background 0.15s;
    user-select: none;
}
.pv-ctx-item:hover {
    background: var(--bg-card);
}
.pv-ctx-item.pv-ctx-danger {
    color: var(--danger, #e06060);
    border-top: 1px solid var(--border);
    margin-top: 2px;
    padding-top: 9px;
}

.full-preview-wrapper .video-a {
    z-index: 2;
    opacity: 1;
}

.full-preview-wrapper .video-b {
    z-index: 1;
    opacity: 0;
}

.next-sugg-btn {
    background: transparent;
    border: 1px solid var(--beige);
    color: var(--beige);
    padding: 4px 10px;
    border-radius: var(--eve-radius-sm);
    font-size: var(--eve-fs-xs);
    cursor: pointer;
    transition: all 0.2s;
}

.next-sugg-btn:hover {
    background: var(--beige);
    color: var(--bg-darker);
}

.next-sugg-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.time-display {
    font-family: monospace;
    color: var(--beige);
    font-size: var(--eve-fs-sm);
    min-width: 62px;
    text-align: center;
}

.autoscroll-toggle input {
    accent-color: var(--beige);
}

.trim-panel-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 6px;
}

.trim-slider-labels .right-label {
    margin-left: auto;
}

/* P32-10: the audio section sits next to the video trim, same width model */
.trim-panel-body #trimAudioSection {
    flex: 1;
    min-width: 0;
    margin-bottom: 0;
}

.trim-audio-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.trim-audio-title {
    color: var(--beige);
    font-weight: 600;
    font-size: var(--eve-fs-xs);
}

.trim-slider-range.audio-range {
    background: #7cc4a8;
}

/* 2026-08-22: collapsed face section — title row only */
#trimFaceSection.face-collapsed #trimFaceBody,
    #trimFaceSection.face-collapsed .trim-face-layout-row {
    display: none;
}

#trimFaceHead:hover .trim-audio-title {
    color: var(--beige-light, #e8dcc4);
}

.trim-face-toggle-inline {
    flex: 0 0 auto;
}

.trim-face-layout-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

#trimFaceThumbSlot:empty {
    display: none;
}

#trimFaceSection.drop-target {
    outline: 2px dashed var(--success);
    outline-offset: -3px;
}

/* P38: Replace is a three-way chooser — Record / Upload / drag&drop. Native <details> dropdown so no JS open/close logic is needed. */
.replace-chooser {
    position: relative;
}

.replace-chooser > summary::-webkit-details-marker {
    display: none;
}

/* P38: comment recording watches the scene preview BEHIND the modal — the dimming overlay must neither hide it nor eat its clicks. */
.modal-overlay.rec-comment-mode {
    background: transparent;
    pointer-events: none;
    justify-content: flex-end;
    padding-right: 28px;
}

.modal-overlay.rec-comment-mode .modal {
    pointer-events: auto;
    box-shadow: 0 10px 44px rgba(0,0,0,0.65);
}

.insert-handle.insert-handle-end {
    flex: 0 0 18px;
    width: 18px;
}

.drop-choice-title {
    font-size: var(--eve-fs-sm);
    font-weight: 600;
    color: var(--beige);
}

.drop-choice-btn {
    text-align: left;
    font-size: var(--eve-fs-sm);
    line-height: var(--eve-lh-ui);
    padding: 8px 10px;
}

.drop-choice-btn small {
    color: rgba(30, 22, 12, 0.75);
    font-size: var(--eve-fs-xs);
}

.drop-choice-note {
    font-size: var(--eve-fs-xs);
    color: var(--text-dim);
    padding: 4px 2px;
    line-height: var(--eve-lh-ui);
}

.drop-choice-hint {
    font-size: var(--eve-fs-xs);
    color: var(--text-dim);
    border-top: 1px solid var(--border);
    padding-top: 6px;
}

.insert-results {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    min-height: 0;
}

.insert-results:empty {
    display: none;
}

.insert-result-card {
    position: relative;
    border: 2px solid transparent;
    border-radius: var(--eve-radius-sm);
    overflow: hidden;
    cursor: pointer;
    background: var(--bg-card);
}

.insert-result-card:hover {
    border-color: var(--text-dim);
}

.insert-result-card img,
    .insert-result-card video {
    width: 100%;
    aspect-ratio: 16/9;
    height: auto;
    object-fit: cover;
    display: block;
}

.insert-result-card .src-tag {
    position: absolute;
    bottom: 2px;
    left: 2px;
    font-size: var(--eve-fs-xs);
    background: rgba(0,0,0,0.7);
    padding: 1px 4px;
    border-radius: var(--eve-radius-sm);
    color: var(--beige-light);
}

.scene-block.muted {
    opacity: 0.4;
}

/* Timeline image mode (2026-08-27): the still takes the place of .scene-text. Fixed 16:9 box (same aspect-ratio approach as the suggestion cards, no inline sizes); object-fit:cover keeps the clip's vertical center visible at any source aspect ratio. Inherits .scene-block.muted opacity and the hover-dim override automatically — no duplicate rules needed. */
.scene-block .scene-thumb {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--eve-radius-sm);
    overflow: hidden;
    background: #000;
    position: relative;
}

.scene-block .scene-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
}

.scene-block.scene-block-fill {
    padding: 0;
    height: 96px;
    overflow: hidden;
    gap: 0;
}

.scene-block.scene-block-fill .scene-thumb {
    position: absolute;
    inset: 0;
    border-radius: 0;
    aspect-ratio: auto;
}

.scene-block .scene-type.detail {
    background: #4a3a2a;
    color: #fbbf24;
}

.scene-block .scene-type.thumb {
    background: #4a2a4a;
    color: #c084fc;
}

.scene-block .mute-btn {
    position: absolute;
    top: 2px;
    right: 2px;
    font-size: var(--eve-fs-xs);
    padding: 1px 3px;
    border-radius: var(--eve-radius-sm);
    background: var(--bg-panel);
    color: var(--text-dim);
    border: none;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s;
    z-index: 2;
}

.scene-block:hover .mute-btn {
    opacity: 1;
}

.scene-block .mute-btn:hover {
    color: var(--error);
}

.scene-block.muted .mute-btn {
    opacity: 1;
    color: var(--error);
}

.scene-block .copy-btn {
    position: absolute;
    bottom: 2px;
    right: 2px;
    font-size: var(--eve-fs-xs);
    padding: 1px 3px;
    border-radius: var(--eve-radius-sm);
    background: var(--bg-panel);
    color: var(--text-dim);
    border: none;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s;
}

.scene-block:hover .copy-btn {
    opacity: 1;
}

.scene-block .copy-btn:hover {
    color: var(--beige);
}

.scene-block .split-btn {
    position: absolute;
    bottom: 2px;
    left: 2px;
    font-size: var(--eve-fs-xs);
    padding: 1px 4px;
    border-radius: var(--eve-radius-sm);
    background: var(--bg-panel);
    color: var(--text-dim);
    border: none;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s;
    z-index: 2;
}

.scene-block:hover .split-btn {
    opacity: 1;
}

.scene-block .split-btn:hover {
    color: var(--accent);
}

.scene-block .merge-btn {
    position: absolute;
    top: 2px;
    left: 2px;
    font-size: var(--eve-fs-xs);
    padding: 1px 3px;
    border-radius: var(--eve-radius-sm);
    background: var(--bg-panel);
    color: var(--text-dim);
    border: none;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s;
    z-index: 2;
}

.scene-block:hover .merge-btn {
    opacity: 1;
}

.scene-block .merge-btn:hover {
    color: var(--warning);
}

.cand-search-row button {
    padding: 5px 10px;
    font-size: var(--eve-fs-xs);
    flex-shrink: 0;
}

/* P16: scene trim button on timeline blocks */
.scene-block .trim-btn {
    position: absolute;
    top: 2px;
    right: 20px;
    font-size: var(--eve-fs-xs);
    padding: 1px 3px;
    border-radius: var(--eve-radius-sm);
    background: var(--bg-panel);
    color: var(--text-dim);
    border: none;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s;
    z-index: 2;
}

.scene-block:hover .trim-btn {
    opacity: 1;
}

.scene-block .trim-btn:hover {
    color: var(--beige);
}

/* P32-14: per-scene delete (undo-safe via timeline/remove) */
.scene-block .delete-btn {
    position: absolute;
    bottom: 2px;
    right: 2px;
    font-size: var(--eve-fs-xs);
    padding: 1px 3px;
    border-radius: var(--eve-radius-sm);
    background: var(--bg-panel);
    color: var(--text-dim);
    border: none;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s;
    z-index: 2;
}

.scene-block:hover .delete-btn {
    opacity: 1;
}

.scene-block .delete-btn:hover {
    color: var(--error);
}

/* 0911j (2026-09-11, käyttäjän tarkennus): "+1 s" -pidennysnappi
   SKENEPANEELIIN klipin janan perään — timeline-scene-blockien
   hover-nuoli (.scene-block .extend-btn) poistettu kokonaan. Nappi
   näkyy vain klipillisille skeneille (trimSliderSectionin näkyvyys-
   ehto hoitaa). */
.trim-extend-btn {
    display: block;
    margin: 6px 0 0 auto;
    font-size: var(--eve-fs-xs);
}

.trim-extend-btn:hover {
    color: var(--accent);
}

/* ===== P16/P20: TRIM SLIDER (dual-handle) — lives in #trimPanel ===== */
.trim-slider-section {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--eve-radius-md);
    padding: 10px 12px;
    margin-bottom: 8px;
}

.trim-slider-labels {
    display: flex;
    justify-content: space-between;
    font-size: var(--eve-fs-xs);
    color: var(--text-dim);
    margin-bottom: 4px;
}

.trim-slider-window::after {
    content: '';
    width: 16px;
    height: 10px;
    border-left: 2px solid rgba(16, 16, 24, 0.7);
    border-right: 2px solid rgba(16, 16, 24, 0.7);
    opacity: 0.8;
}

.trim-slider-window.dragging {
    cursor: grabbing;
    border-color: #101018;
}

/* B6/C8 (2026-08-22): freeze_at marker + trim action bar */
.trim-freeze-marker {
    position: absolute;
    top: -8px;
    z-index: 4;
    cursor: pointer;
    font-size: var(--eve-fs-sm);
    transform: translateX(-50%);
    display: none;
    user-select: none;
    filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.9));
}

.trim-action-bar button {
    font-size: var(--eve-fs-xs);
    padding: 3px 10px;
    border-radius: var(--eve-radius-sm);
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text);
    cursor: pointer;
}

.trim-action-bar button:hover {
    border-color: var(--beige);
}

.trim-action-bar button.on {
    border-color: var(--beige);
    color: var(--beige);
}

.trim-action-bar button:disabled {
    opacity: 0.4;
    cursor: default;
}

.trim-action-bar .tab-note {
    font-size: var(--eve-fs-xs);
    color: var(--text-dim);
    margin-left: auto;
}

.trim-slider input[type=range] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    pointer-events: none;
}

.trim-slider input[type=range]::-webkit-slider-runnable-track {
    background: transparent;
}

.trim-slider input[type=range]::-moz-range-track {
    background: transparent;
}

.trim-readouts {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 8px;
    margin-top: 8px;
}

.trim-readout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: var(--eve-fs-xs);
}

.trim-readout .label {
    color: var(--text-dim);
    font-size: var(--eve-fs-xs);
    margin-right: 2px;
}

.trim-readout input {
    width: 56px;
    padding: 3px 5px;
    border-radius: var(--eve-radius-sm);
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text);
    font-size: var(--eve-fs-xs);
    text-align: center;
}

.trim-readout .value {
    color: var(--beige);
    font-weight: 600;
    font-size: var(--eve-fs-xs);
}

.trim-nudge {
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--beige);
    border-radius: var(--eve-radius-sm);
    width: 20px;
    height: 20px;
    font-size: var(--eve-fs-xs);
    cursor: pointer;
    line-height: 1;
    padding: 0;
}

.trim-nudge:hover {
    border-color: var(--beige);
}

.effect-badge-freeze {
    color: #4a9eff;
    font-weight: 600;
}

.effect-badge-loop {
    color: #fbbf24;
    font-weight: 600;
}

.effect-badge-slow {
    color: #4ade80;
    font-weight: 600;
}

.effect-badge-ken {
    color: #c084fc;
    font-weight: 600;
}

.effect-badge-still {
    color: #a0a0b0;
    font-weight: 600;
}

.suggestion-card {
    background: var(--bg-card);
    border-radius: var(--eve-radius-sm);
    overflow: clip;
    min-width: 0;
    cursor: pointer;
    transition: all 0.2s;
    border: 2px solid transparent;
    position: relative;
}

.suggestion-card:hover {
    border-color: var(--beige);
}

.suggestion-card.selected {
    border-color: var(--success);
}

.suggestion-card img,
    .suggestion-card video {
    width: 100%;
    aspect-ratio: 16/9;
    height: auto;
    object-fit: cover;
    display: block;
}

.suggestion-card .sugg-info {
    padding: 4px 6px;
    font-size: var(--eve-fs-xs);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-panel);
}

.suggestion-card .sugg-source {
    color: var(--beige);
    font-weight: 600;
}

.suggestion-card .sugg-author {
    color: var(--text-dim);
}

.suggestion-card .sugg-duration {
    color: var(--text-dim);
    font-size: var(--eve-fs-xs);
}

.suggestion-card .import-own-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0,0,0,0.7);
    color: var(--beige);
    border: 1px solid var(--beige);
    padding: 4px 8px;
    border-radius: var(--eve-radius-sm);
    font-size: var(--eve-fs-xs);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s;
}

.suggestion-card:hover .import-own-btn {
    opacity: 1;
}

.suggestion-card .import-own-btn:hover {
    background: var(--beige);
    color: var(--bg-darker);
}

.bottom-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 12px 20px;
    background: var(--bg-dark);
    min-height: 200px;
}

.bottom-panel {
    background: var(--bg-panel);
    border-radius: var(--eve-radius-md);
    padding: 12px;
    border: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bottom-panel .panel-title {
    color: var(--beige);
    font-weight: 600;
    font-size: var(--eve-fs-sm);
}

.modal-overlay.hidden {
    display: none;
}

/* 2026-08-22: busy shield — blocks ALL stray clicks on the main UI while a New Project pipeline runs (import / transcribe / build / enhance). Sits UNDER the modals (z 1000) so progress dialogs stay usable, with a small status pill at the bottom. */
#npBusyShield {
    position: fixed;
    inset: 0;
    z-index: 900;
    display: none;
    background: rgba(8,10,14,0.35);
    cursor: wait;
}

#npBusyPill {
    position: absolute;
    left: 50%;
    bottom: 26px;
    transform: translateX(-50%);
    background: var(--bg-panel);
    border: 1px solid var(--beige);
    border-radius: 999px;
    padding: 8px 18px;
    font-size: var(--eve-fs-xs);
    color: var(--text);
    box-shadow: 0 6px 20px rgba(0,0,0,0.5);
    white-space: nowrap;
    max-width: 86vw;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* PHASE 5 (2026-08-20): New Project popup grew to 7 start-mode buttons — two columns, two-line-tall buttons, wider modal. */
.modal.modal-np {
    max-width: 620px;
}

.modal .modal-head h2 {
    margin: 0;
    flex: 1;
}

/* P22: cancel/close sits left in quiet gray (margin-right:auto pushes it away from the right-aligned primary group), primary stays right */
.modal-buttons .btn-cancel {
    background: var(--bg-card) !important;
    color: var(--text) !important;
    margin-right: auto;
    font-weight: 400 !important;
}

.modal .project-item:hover {
    border-color: var(--beige);
}

.modal .project-item {
    background: var(--bg-card);
    padding: 10px 12px;
    border-radius: var(--eve-radius-sm);
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid transparent;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.modal .project-item .project-info {
    flex: 1;
    min-width: 0;
}

.modal .project-action {
    background: none;
    border: 1px solid var(--border, #3a3a4a);
    border-radius: var(--eve-radius-sm);
    color: var(--text-dim);
    cursor: pointer;
    padding: 3px 7px;
    font-size: var(--eve-fs-xs);
    opacity: 0.55;
    flex-shrink: 0;
}

.modal .project-action:hover {
    opacity: 1;
    border-color: var(--beige);
    color: var(--beige);
}

.modal .project-action.danger:hover {
    border-color: var(--error, #e06060);
    color: var(--error, #e06060);
}

.modal .project-name {
    font-weight: 600;
    color: var(--beige);
    font-size: var(--eve-fs-md);
}

.modal .project-meta {
    font-size: var(--eve-fs-xs);
    color: var(--text-dim);
    margin-top: 2px;
}

.rate-select:hover,
    .rate-select:focus {
    color: var(--beige);
    border-color: var(--beige);
    outline: none;
}

.caption-style-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.caption-style-row label {
    color: var(--text);
    font-size: var(--eve-fs-sm);
    flex-shrink: 0;
}

.caption-style-row input[type="range"] {
    flex: 1;
}

.caption-style-row .val {
    color: var(--text-dim);
    font-size: var(--eve-fs-xs);
    width: 40px;
    text-align: right;
}

.btn:hover {
    background: var(--beige-light);
    transform: translateY(-1px);
}

/* Nocturne Cinema (P29) */
.btn-secondary {
    background: transparent;
    border: 1px solid var(--beige);
    color: var(--beige);
}

.btn-secondary:hover {
    background: var(--beige);
    color: var(--bg-darker);
}

.btn.panel-arrow-btn {
    padding: 0;
    border: 1px solid var(--beige);
    border-radius: var(--eve-radius-md);
}

.scene-block.playing {
    border-color: var(--success) !important;
    box-shadow: 0 0 8px rgba(74, 222, 128, 0.3);
    animation: pulse-playing 1s ease-in-out infinite alternate;
}

/* P21: camera recorder modal */
.rec-video-wrap {
    position: relative;
    background: #000;
    border-radius: var(--eve-radius-md);
    overflow: hidden;
    aspect-ratio: 16/9;
    margin-bottom: 10px;
}

.rec-video-wrap video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.rec-video-wrap .rec-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-dim);
    font-size: var(--eve-fs-sm);
    text-align: center;
    padding: 0 24px;
}

.rec-status-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: var(--eve-fs-sm);
}

#recTimer {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.rec-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--error);
    animation: rec-pulse 1s ease-in-out infinite alternate;
}

/* 2026-09-07: kelluva nauhoitusilmaisin (HUD) — nauhoitus jatkuu kun
   popup on piilotettu (ruutu/dual-otos: popup ei peitä kuvattavaa ruutua).
   Samassa paikassa ja samoilla perussäännöillä kuin #transcribeIndicator. */
.rec-hud {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 10001;   /* modal-overlayn (9999/10000) yläpuolelle */
    align-items: center;
    gap: 10px;
    background: var(--bg-card);
    color: var(--text);
    border: 1px solid var(--error);
    border-radius: var(--eve-radius-lg);
    padding: 10px 14px;
    font-size: var(--eve-fs-sm);
    font-variant-numeric: tabular-nums;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
}
.rec-hud .rec-dot { display: inline-block; flex: 0 0 auto; }
.rec-hud-stop { padding: 4px 12px; font-size: var(--eve-fs-sm); }

#transcribeIndicator {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bg-card);
    color: var(--text);
    border: 1px solid var(--accent);
    border-radius: var(--eve-radius-lg);
    padding: 12px 18px;
    font-size: var(--eve-fs-sm);
    box-shadow: 0 6px 24px rgba(0,0,0,0.5);
}

#transcribeIndicator .transcribe-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    border: 2px solid var(--text-dim);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: transcribe-spin 0.8s linear infinite;
}

.rec-toggle {
    background: var(--error);
    color: #fff;
    font-weight: 700;
}

.rec-toggle:hover {
    background: #c0392b;
}

.rec-toggle.recording {
    background: var(--bg-card);
    color: var(--error);
    border: 1px solid var(--error);
}

/* P48: four mode buttons — wrap 2x2 on narrow (mobile) screens */
.rec-mode-row {
    display: flex;
    gap: 6px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.rec-mode {
    flex: 1 1 40%;
    padding: 7px 10px;
    border-radius: var(--eve-radius-sm);
    cursor: pointer;
    background: var(--bg-card);
    color: var(--text-dim);
    border: 1px solid var(--border);
    font-size: var(--eve-fs-sm);
    font-weight: 600;
}

.rec-mode.active {
    background: var(--beige);
    color: var(--bg-darker);
    border-color: var(--beige);
}

.rec-mode:not(.active):hover {
    border-color: var(--beige);
}

.empty-state {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-dim);
    font-size: var(--eve-fs-sm);
}

.empty-state .icon {
    font-size: var(--eve-fs-display);
    margin-bottom: 8px;
}

input[type="file"] {
    display: none;
}

/* Nocturne Cinema (P29): global scrollbar + focus styles — panels that hide their scrollbars keep their own rules (higher specificity) */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: var(--bg-darker);
}

::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: var(--eve-radius-sm);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--beige-dark);
}

.brainstorm-theme-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    background: var(--bg-card);
    border-radius: var(--eve-radius-sm);
    margin-bottom: 8px;
    border: 1px solid transparent;
    transition: all 0.2s;
}

.brainstorm-theme-item:hover {
    border-color: var(--beige);
}

.brainstorm-theme-item input[type="checkbox"] {
    accent-color: var(--beige);
    width: 18px;
    height: 18px;
    margin-top: 2px;
    cursor: pointer;
    flex-shrink: 0;
}

.brainstorm-theme-item .theme-text {
    flex: 1;
    font-size: var(--eve-fs-sm);
    color: var(--text);
}

.brainstorm-theme-item .theme-desc {
    font-size: var(--eve-fs-xs);
    color: var(--text-dim);
    margin-top: 2px;
}

.brainstorm-theme-item.excluded {
    opacity: 0.5;
}

.brainstorm-theme-item.excluded .theme-text {
    text-decoration: line-through;
    color: var(--text-dim);
}

.brainstorm-custom-row {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.brainstorm-custom-row input {
    flex: 1;
    padding: 8px 10px;
    border-radius: var(--eve-radius-sm);
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text);
    font-size: var(--eve-fs-sm);
}

.brainstorm-stats {
    font-size: var(--eve-fs-xs);
    color: var(--text-dim);
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}

.batch-import-area {
    background: var(--bg-card);
    border: 2px dashed var(--border);
    border-radius: var(--eve-radius-md);
    padding: 16px;
    text-align: center;
    margin-bottom: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.batch-import-area:hover {
    border-color: var(--beige);
    background: var(--bg-panel);
}

.batch-import-area .icon {
    font-size: var(--eve-fs-display);
    margin-bottom: 6px;
}

.batch-import-area p {
    font-size: var(--eve-fs-sm);
    color: var(--text-dim);
}

#projectStartSummary b {
    color: var(--text);
    font-weight: 600;
}

/* MIXED-IMPORT v2 (spec 2026-08-22): the big "Arrange your files" panel — sections with radio rows, a numbered drag list and a Not-used tray. NO dropdowns anywhere. */
.npa-wrap {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 4px;
}

.npa-wrap:empty {
    display: none;
}

.npa-section {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--eve-radius-lg);
    padding: 10px 12px;
}

.npa-sec-title {
    font-size: var(--eve-fs-sm);
    font-weight: 700;
    color: var(--text);
    margin-bottom: 2px;
}

.npa-sec-hint {
    font-size: var(--eve-fs-xs);
    color: var(--text-dim);
    line-height: var(--eve-lh-ui);
    margin-bottom: 8px;
}

.npa-row {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 9px;
    border-radius: var(--eve-radius-md);
    border: 1px solid transparent;
    font-size: var(--eve-fs-sm);
    color: var(--text);
    cursor: pointer;
}

.npa-row:hover {
    background: var(--bg-darker);
}

.npa-row.sel {
    border-color: var(--beige);
    background: var(--bg-darker);
}

.npa-row input[type="radio"],
    .npa-row input[type="checkbox"] {
    accent-color: var(--beige);
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    cursor: pointer;
}

.npa-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}

.npa-meta {
    font-size: var(--eve-fs-xs);
    color: var(--text-dim);
    flex-shrink: 0;
}

.npa-cap-line {
    font-size: var(--eve-fs-xs);
    color: var(--text-dim);
    padding: 4px 9px 0 34px;
}

.npa-ord-row {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-darker);
    border: 1px solid var(--border);
    border-radius: var(--eve-radius-md);
    padding: 7px 9px;
    margin-bottom: 5px;
    font-size: var(--eve-fs-sm);
    color: var(--text);
}

.npa-ord-row.later {
    opacity: 0.55;
}

.npa-ord-row.dragging {
    opacity: 0.4;
    border-style: dashed;
}

.npa-ord-row.dragover {
    border-color: var(--beige);
}

.npa-grip {
    cursor: grab;
    color: var(--text-dim);
    font-size: var(--eve-fs-md);
    flex-shrink: 0;
    user-select: none;
}

.npa-num {
    min-width: 22px;
    height: 22px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--beige);
    color: #1a1a1a;
    font-weight: 700;
    font-size: var(--eve-fs-xs);
}

.npa-ord-row.later .npa-num {
    background: var(--bg-card);
    color: var(--text-dim);
    border: 1px solid var(--border);
}

.npa-arrows {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex-shrink: 0;
}

.npa-arrows button {
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text);
    cursor: pointer;
    padding: 0 6px;
    border-radius: var(--eve-radius-sm);
    font-size: var(--eve-fs-xs);
    line-height: var(--eve-lh-tight);
}

.npa-arrows button:hover {
    background: var(--beige);
    color: #1a1a1a;
}

.npa-pl {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: var(--eve-fs-xs);
    color: var(--text-dim);
    cursor: pointer;
    flex-shrink: 0;
}

.npa-rm {
    background: none;
    border: none;
    color: var(--text-dim);
    cursor: pointer;
    padding: 2px 6px;
    border-radius: var(--eve-radius-sm);
    flex-shrink: 0;
    font-size: var(--eve-fs-xs);
}

.npa-rm:hover {
    background: var(--bg-darker);
    color: var(--error);
}

.npa-script-btn {
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text);
    cursor: pointer;
    padding: 3px 9px;
    border-radius: var(--eve-radius-sm);
    font-size: var(--eve-fs-xs);
    flex-shrink: 0;
}

.npa-script-btn:hover {
    border-color: var(--beige);
}

.own-clips-section {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--eve-radius-md);
    padding: 12px;
    margin-bottom: 12px;
    max-height: 420px;
    overflow-y: auto;
}

.own-clips-header {
    font-size: var(--eve-fs-sm);
    color: var(--beige);
    font-weight: 600;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.own-clips-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.own-clip-card {
    position: relative;
    border-radius: var(--eve-radius-md);
    overflow: hidden;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s;
    background: var(--bg-darker);
}

.own-clip-card:hover {
    border-color: var(--beige);
}

.own-clip-card.selected {
    border-color: var(--success);
    box-shadow: 0 0 0 2px rgba(74, 222, 128, 0.2);
}

.own-clip-card input[type="checkbox"] {
    position: absolute;
    top: 6px;
    left: 6px;
    width: 20px;
    height: 20px;
    accent-color: var(--success);
    cursor: pointer;
    z-index: 2;
}

.own-clip-card .thumb-wrap {
    position: relative;
    width: 100%;
    height: 90px;
    background: var(--bg-darker);
}

.own-clip-card .thumb-wrap img,
    .own-clip-card .thumb-wrap video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.own-clip-card .play-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: var(--eve-fs-display);
    opacity: 0.8;
    pointer-events: none;
}

.own-clip-card .clip-label {
    padding: 6px 8px;
    font-size: var(--eve-fs-xs);
    color: var(--text);
    line-height: var(--eve-lh-tight);
    max-height: 2.6em;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

#verifyBanner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9000;
    display: none;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: var(--bg-panel);
    border-bottom: 1px solid var(--beige);
    color: var(--text);
    padding: 8px 16px;
    font-size: var(--eve-fs-md);
}

#verifyBanner button {
    background: none;
    border: 1px solid var(--beige);
    color: var(--beige);
    border-radius: var(--eve-radius-sm);
    padding: 3px 10px;
    cursor: pointer;
    font-size: var(--eve-fs-sm);
}

#usageBanner button {
    background: none;
    border: 1px solid var(--beige);
    color: var(--beige);
    border-radius: var(--eve-radius-sm);
    padding: 3px 10px;
    cursor: pointer;
    font-size: var(--eve-fs-sm);
}

#usageModal .usage-bar-track {
    height: 8px;
    background: var(--bg-darker);
    border-radius: var(--eve-radius-sm);
    overflow: hidden;
}

#usageModal .usage-bar-fill {
    height: 100%;
}

.tw.ac-suggested {
    background: rgba(251,191,36,0.30);
    border-radius: var(--eve-radius-sm);
}

.tw.ac-suggested:hover {
    background: rgba(251,191,36,0.55);
}

.ac-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--eve-radius-md);
    padding: 10px 12px;
    margin-bottom: 10px;
}

.ac-card.accepted {
    opacity: 0.65;
}

.ac-card-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.ac-card-title {
    font-weight: 700;
    color: var(--text);
    flex: 1;
}

.ac-card-dur {
    font-size: var(--eve-fs-xs);
    color: var(--text-dim);
    white-space: nowrap;
}

.ac-card-score {
    font-size: var(--eve-fs-xs);
    color: var(--warning);
    font-weight: 700;
}

.ac-card-reason {
    font-size: var(--eve-fs-xs);
    color: var(--text-dim);
    margin: 4px 0 8px;
    line-height: var(--eve-lh-ui);
}

.ac-card-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.ac-fmt-row {
    display: flex;
    gap: 6px;
    margin-top: 6px;
}

.ac-estimate {
    font-size: var(--eve-fs-sm);
    color: var(--text-dim);
    margin: 8px 0;
    line-height: var(--eve-lh-body);
}

::selection {
    background: rgba(212, 175, 55, 0.28);
    color: var(--eve-frost);
}

:focus-visible {
    outline: 2px solid rgba(212, 175, 55, 0.72);
    outline-offset: 2px;
}

*::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}

*::-webkit-scrollbar-track {
    background: #0a111c;
}

*::-webkit-scrollbar-thumb {
    background: #42556d;
    border: 2px solid #0a111c;
    border-radius: 999px;
}

*::-webkit-scrollbar-thumb:hover {
    background: #59708c;
}

.header-btn,
    .tt-btn,
    .control-btn,
    .btn,
    .trim-head-btn,
    .trim-nudge {
    border-color: #31455e;
    transition: background-color 0.16s ease,
        border-color 0.16s ease,
        color 0.16s ease,
        box-shadow 0.16s ease,
        transform 0.12s ease;
}

.header-btn:hover,
    .tt-btn:hover:not(:disabled),
    .btn:hover:not(:disabled),
    .trim-head-btn:hover,
    .trim-nudge:hover {
    border-color: rgba(185, 205, 220, 0.72);
    color: var(--eve-frost);
    background: #172438;
}

.header-btn.primary:hover {
    background: #cfdee8;
    border-color: #cfdee8;
}.trim-audio-title,
    .speaker-help-h{
    color: var(--eve-moon);
    font-weight: 600;
    font-size: var(--eve-fs-lg);
    line-height: var(--eve-lh-tight);
    letter-spacing: 0.01em;
}

#ttEdgeHandle:hover,
    #avatarEdgeHandle:hover,
    #candEdgeHandle:hover,
    #trimEdgeHandle:hover {
    color: var(--eve-gold-soft);
}

.cand-tab:hover {
    color: var(--eve-frost);
    background: #172438;
}

.control-btn {
    border: 1px solid var(--border);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--eve-fs-lg);
    transition: all 0.2s;
    color: var(--eve-moonlight);
    background: rgba(17, 29, 46, 0.78);
}

.control-btn:hover {
    background: var(--eve-moonlight);
    border-color: var(--eve-moonlight);
    color: #07101a;
}

.tt-btn {
    font-size: var(--eve-fs-xs);
    padding: 3px 8px;
    border: 1px solid var(--border);
    cursor: pointer;
    background: rgba(15, 25, 40, 0.72);
    color: #9eafbe;
    border-radius: var(--eve-radius-sm);
}

.tt-btn:disabled {
    cursor: default;
    opacity: 0.30;
}

.speaker-method-btn:hover {
    border-color: rgba(185, 205, 220, 0.72);
    color: var(--eve-frost);
}

/* 2026-09-09 (user request): the Avatar method button carries a small
   "Coming soon" badge; the method descriptions moved to hover titles. */
.coming-soon-badge {
    display: inline-block;
    margin-left: 5px;
    padding: 1px 6px;
    font-size: 0.58rem;
    font-weight: 600;
    line-height: 1.4;
    vertical-align: middle;
    color: var(--text-dim);
    border: 1px solid var(--border);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    pointer-events: none;
}

.suggestions-panel,
    #ownClipsGrid {
    background: transparent;
}

.pool-card,
    .candidate-card,
    .insert-result-card,
    .ac-card {
    background: #122034;
    border-color: #293e56;
    box-shadow: 0 5px 16px rgba(0, 0, 0, 0.12);
}

.pool-card:hover,
    .candidate-card:hover,
    .insert-result-card:hover {
    border-color: rgba(185, 205, 220, 0.70);
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.20);
}

.insert-result-card.selected {
    border-color: var(--eve-gold);
    box-shadow: var(--eve-shadow-gold);
}

.trim-panel-body #sceneSettingsBody > div,
    .trim-slider-section,
    .trim-audio-section,
    .trim-face-section {
    background: #101c2d;
    border-color: #2d425a;
    border-radius: var(--eve-radius-md);
}

.trim-head-btn,
    .trim-face-toggle button,
    .trim-audio-controls .atc-btn {
    background: #101c2d;
    color: #aebcc8;
    border-color: #31455e;
}

.trim-slider,
    .trim-audio-lane {
    background: #07101b;
    border-color: #2d425a;
}

.trim-playhead,
    .trim-audio-playhead {
    background: #f5f7f8;
    box-shadow: 0 0 7px rgba(255, 255, 255, 0.48);
}

.timeline-empty-start {
    flex: 1;
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px dashed var(--beige);
    border-radius: var(--eve-radius-md);
    cursor: pointer;
    font-size: var(--eve-fs-xs);
    border-color: rgba(212, 175, 55, 0.52);
    color: var(--eve-gold-soft);
    background: rgba(212, 175, 55, 0.035);
}

.timeline-empty-start:hover {
    background: rgba(212, 175, 55, 0.075);
}

.eve-css-icon,
    #transcriptReopenTab,
    #avatarReopenTab,
    #trimReopenTab,
    #candidatesReopenTab,
    #autoclipReopenTab,
    #undoBtn,
    #redoBtn,
    #seekStartBtn,
    #playPauseBtn,
    #fullscreenBtn {
    position: relative;
}

#transcriptReopenTab,
    #avatarReopenTab,
    #trimReopenTab,
    #candidatesReopenTab,
    #autoclipReopenTab,
    #undoBtn,
    #redoBtn,
    #seekStartBtn,
    #playPauseBtn,
    #fullscreenBtn {
    color: transparent;
    text-shadow: none;
}

#undoBtn::before,


    #redoBtn::before,


    #seekStartBtn::before,


    #playPauseBtn::before,


    #fullscreenBtn::before


{
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    margin: auto;
    background: var(--eve-icon-color);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

#undoBtn:hover::before,


    #redoBtn:hover::before,


    #seekStartBtn:hover::before,


    #playPauseBtn:hover::before,


    #fullscreenBtn:hover::before


{
    background: var(--eve-gold-soft);
}


.header-btn > .icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.15rem;
    height: 1.15rem;
    color: transparent;
    font-size: 0;
    flex: 0 0 1.15rem;
    position: relative;
}

#settingsBtn > .icon::before {
    -webkit-mask-image: url("icons/settings.svg");
    mask-image: url("icons/settings.svg");
}

#usageBtn > .icon::before {
    -webkit-mask-image: url("icons/help.svg");
    mask-image: url("icons/help.svg");
}

/* 2026-09-03: user menu — Change picture (profile photo) */
#avatarChangeBtn > .icon::before {
    -webkit-mask-image: url("icons/portrait.svg");
    mask-image: url("icons/portrait.svg");
}

#downloadBtn > .icon::before {
    -webkit-mask-image: url("icons/export.svg");
    mask-image: url("icons/export.svg");
}

#enhanceVoiceoverBtn > .icon::before {
    -webkit-mask-image: url("icons/enhance_speech.svg");
    mask-image: url("icons/enhance_speech.svg");
}

#recordBtn > .icon::before {
    -webkit-mask-image: url("icons/speaker.svg");
    mask-image: url("icons/speaker.svg");
}

button[onclick*="openSpeakerPanel"] > .icon::before {
    -webkit-mask-image: url("icons/speaker.svg");
    mask-image: url("icons/speaker.svg");
}

button[onclick*="openExportModal"] > .icon::before {
    -webkit-mask-image: url("icons/export.svg");
    mask-image: url("icons/export.svg");
    background: #111;
}

#renderBtn:hover > .icon::before {
    background: #070b11;
}

/* 2026-09-03 (pyyntosetti 3): teemavariatetyt paanapit (New/Old Projects +
   Export) rajattu pois tasta vanhasta tekstivari-ohituksesta — niiden
   kulta/tumma tekstivari asetetaan omassa lohkossa tiedoston lopussa. */
.header-btn:not(#undoBtn):not(#redoBtn):not(#logoutBtn):not(#renderBtn):not([onclick*="showNewProjectModal"]):not([onclick*="showOldProjects"]) {
    color: #aebbc7;
}

.header-btn.primary {
    background: var(--eve-moonlight);
    border-color: var(--eve-moonlight);
    font-weight: 700;
    box-shadow: 0 5px 18px rgba(80, 116, 145, 0.16);
    color: #07101a;
}

button,
    .header-btn,
    .tt-btn,
    .btn,
    .control-btn,
    .trim-head-btn,
    .trim-nudge,
    .speaker-method-btn,
    .cand-tab {
    -webkit-tap-highlight-color: transparent;
}

button:active:not(:disabled),
    .header-btn:active:not(:disabled),
    .tt-btn:active:not(:disabled),
    .btn:active:not(:disabled),
    .control-btn:active:not(:disabled),
    .trim-head-btn:active:not(:disabled),
    .trim-nudge:active:not(:disabled),
    .speaker-method-btn:active:not(:disabled) {
    transform: translateY(1px);
}

button:disabled,
    .header-btn:disabled,
    .tt-btn:disabled,
    .btn:disabled,
    .control-btn:disabled,
    .trim-head-btn:disabled,
    .trim-nudge:disabled,
    .speaker-method-btn:disabled {
    cursor: not-allowed;
    filter: saturate(.65);
}

.btn {
    padding: 8px 16px;
    font-size: var(--eve-fs-sm);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    background: #122033;
    color: #b8c5d0;
    border: 1px solid #31455e;
    border-radius: var(--eve-radius-md);
    box-shadow: none;
}

.btn:hover:not(:disabled) {
    background: #18283d;
    color: var(--eve-frost);
    border-color: rgba(185, 205, 220, .72);
}

.btn:focus-visible,
    .header-btn:focus-visible,
    .tt-btn:focus-visible,
    .control-btn:focus-visible,
    .trim-head-btn:focus-visible {
    outline: 2px solid rgba(212, 175, 55, .68);
    outline-offset: 2px;
}

.btn-success {
    background: linear-gradient(180deg, #c9d9e5 0%, #a9c0d1 100%);
    border-color: #c9d9e5;
    color: #07101a;
    font-weight: 700;
}

.btn-success:hover:not(:disabled) {
    background: linear-gradient(180deg, #d7e3eb 0%, #b9cddd 100%);
    border-color: #d7e3eb;
    color: #050b12;
}

.btn-secondary,
    .btn-cancel {
    background: #0e1928;
    color: #9eafbd;
    border-color: #2c4158;
}

.btn-secondary:hover:not(:disabled),
    .btn-cancel:hover:not(:disabled) {
    color: var(--eve-frost);
    background: #17263a;
    border-color: #465d76;
}

.btn-danger,
    .danger,
    button[style*="var(--error)"] {
    --_danger: #d97070;
}

.btn-danger {
    color: #f0b2b2;
    border-color: rgba(217, 112, 112, .55);
    background: rgba(86, 24, 30, .28);
}

.btn-danger:hover:not(:disabled) {
    color: #ffd1d1;
    background: rgba(114, 31, 38, .38);
    border-color: rgba(232, 128, 128, .78);
}

.is-selected,
    .is-active,
    .active,
    .selected {
    --eve-selection-ring: rgba(212, 175, 55, .62);
}

.header-btn:hover:not(:disabled) {
    box-shadow: 0 5px 16px rgba(0, 0, 0, .14);
}

.header-btn[aria-pressed="true"],
    .header-btn.active {
    color: var(--eve-gold-soft);
    border-color: rgba(212, 175, 55, .62);
    background: #182437;
    box-shadow: var(--eve-shadow-gold);
}

.tt-btn,
    .control-btn {
    min-width: 30px;
    min-height: 30px;
    padding: 5px 8px;
}

.tt-btn.on,
    .tt-btn.active,
    .control-btn.on,
    .control-btn.active {
    color: var(--eve-gold-soft);
    border-color: rgba(212, 175, 55, .58);
    background: #172437;
    box-shadow: inset 0 0 0 1px rgba(212, 175, 55, .08);
}

input[readonly],
    textarea[readonly] {
    background: #0a1421;
    color: #9cafbf;
}

label:has(input[type="checkbox"]),
    label:has(input[type="radio"]) {
    color: #aebac6;
}

label:has(input[type="checkbox"]:checked),
    label:has(input[type="radio"]:checked) {
    color: var(--eve-frost);
}

input[type="range"] {
    accent-color: var(--eve-gold);
}

input[type="range"]::-webkit-slider-runnable-track {
    background: #223248;
    border-radius: 999px;
    height: 5px;
}

input[type="range"]::-webkit-slider-thumb {
    margin-top: -5px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--eve-moonlight);
    border: 2px solid #07101a;
    box-shadow: 0 0 0 1px rgba(185,205,220,.35),
        0 2px 7px rgba(0,0,0,.35);
}

input[type="range"]::-moz-range-track {
    background: #223248;
    border-radius: 999px;
    height: 5px;
}

input[type="range"]::-moz-range-thumb {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--eve-moonlight);
    border: 2px solid #07101a;
    box-shadow: 0 0 0 1px rgba(185,205,220,.35),
        0 2px 7px rgba(0,0,0,.35);
}

.trim-face-toggle,
    .speaker-methods {
    gap: 5px;
}

.trim-face-toggle button,
    .speaker-method-btn,
    .atc-source button {
    min-height: 30px;
    border-radius: var(--eve-radius-md);
}

.trim-face-toggle button:hover,
    .speaker-method-btn:hover,
    .atc-source button:hover {
    background: #18273b;
    color: var(--eve-frost);
}

.trim-face-toggle button.active,
    .speaker-method-btn.active,
    .atc-source button.active,
    .atc-source button.on {
    color: var(--eve-gold-soft);
    border-color: rgba(212, 175, 55, .64);
    background: #182539;
    box-shadow: 0 0 0 1px rgba(212,175,55,.08),
        inset 0 -1px 0 rgba(212,175,55,.36);
}

.cand-search-row input,
    #ttFindBar input {
    background: #0a1421;
}

.cand-search-row:focus-within,
    #ttFindBar:focus-within {
    filter: drop-shadow(0 0 8px rgba(212, 175, 55, .05));
}

.insert-menu .header-btn:focus-visible,
    .file-menu .header-btn:focus-visible {
    outline-offset: -2px;
}

.project-item,
    .pool-card,
    .candidate-card,
    .insert-result-card {
    transition: background-color .16s ease,
        border-color .16s ease,
        box-shadow .16s ease,
        transform .12s ease;
}

.project-item:focus-within {
    outline: 1px solid rgba(212,175,55,.45);
}

#transcriptBody .tt-word,
    #transcriptBody span {
    border-radius: var(--eve-radius-sm);
}

#transcriptBody .active,
    #transcriptBody .selected {
    background: rgba(212, 175, 55, .14);
    color: #f2e6b7;
}

#ownVideoBox:hover {
    background: rgba(212,165,116,0.08);
    border-color: rgba(212, 175, 55, .46);
    box-shadow: 0 0 0 1px rgba(212,175,55,.06);
}

#avatarPanelBody > div,
    #avatarPanelBody .speaker-section,
    #avatarPanelBody .face-card {
    border-color: rgba(185,205,220,.11);
}

.candidate-card,
    .pool-card,
    .insert-result-card {
    border-radius: var(--eve-radius-lg);
    overflow: hidden;
    background: linear-gradient(180deg, rgba(20, 34, 54, .96), rgba(14, 24, 39, .98));
}

.candidate-card img,
    .pool-card img,
    .insert-result-card img {
    background: #050a11;
}

.candidate-card:hover,
    .pool-card:hover,
    .insert-result-card:hover {
    border-color: rgba(212, 175, 55, .34);
}

.candidate-card.selected,
    .pool-card.selected,
    .insert-result-card.selected {
    border-color: rgba(212, 175, 55, .76);
    box-shadow: 0 0 0 1px rgba(212,175,55,.12),
        0 8px 24px rgba(0,0,0,.22);
}

.trim-slider-section,
    .trim-audio-section,
    .trim-face-section {
    box-shadow: inset 0 1px 0 rgba(255,255,255,.012),
        0 6px 18px rgba(0,0,0,.08);
}

.trim-audio-controls-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 7px;
    gap: 6px;
}

.scene-block::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.015);
}

.empty-state,
    .panel-guide,
    .pool-empty {
    color: #8496a7;
    border-radius: var(--eve-radius-lg);
}

.empty-state .icon,
    .panel-guide .icon {
    filter: saturate(.6) brightness(.92);
}

.pg-title {
    color: var(--eve-gold-soft);
}

#startLightbox {
    position: fixed;
    inset: 0;
    z-index: 9600;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
    background: rgba(2, 5, 10, .86);
    backdrop-filter: blur(7px);
}

#startLightbox img {
    max-width: 96vw;
    max-height: 96vh;
    border-radius: var(--eve-radius-lg);
    border: 1px solid rgba(212,175,55,.24);
    box-shadow: 0 26px 80px rgba(0,0,0,.58);
}

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    background: rgba(1, 5, 11, .78);
    backdrop-filter: blur(5px);
}

/* P22: one header for every modal — emoji + title left, ✕ right */
.modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
    border-color: rgba(185, 205, 220, 0.12);
    background: rgba(7, 13, 22, .34);
    border-bottom: 1px solid rgba(185,205,220,.10);
}

.modal-head h2,
    .modal h2,
    .modal h3 {
    color: var(--eve-moonlight);
    letter-spacing: .01em;
}

.modal-x {
    font-size: var(--eve-fs-sm);
    cursor: pointer;
    padding: 5px 9px;
    line-height: 1;
    flex-shrink: 0;
    color: #8396a8;
    border-radius: var(--eve-radius-md);
    background: rgba(14, 25, 40, .55);
    border: 1px solid transparent;
}

.modal-x:hover {
    background: #17263a;
    border-color: rgba(212,175,55,.30);
    color: var(--eve-gold-soft);
}

/* P32-11: drop-on-scene replace chooser */
.drop-choice-pop {
    position: fixed;
    z-index: 4000;
    width: 280px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: #0d1827;
    border: 1px solid #334960;
    border-radius: var(--eve-radius-lg);
    box-shadow: 0 18px 44px rgba(0,0,0,.44);
}

.drop-choice-pop button:hover {
    background: #17273b;
}

#usageBanner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 8999;
    display: none;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: var(--bg-panel);
    border-bottom: 1px solid var(--beige);
    color: var(--text);
    padding: 8px 16px;
    font-size: var(--eve-fs-md);
    border-color: rgba(212,175,55,.22);
}

#analysisProgressOverlay,
    #audioOnlyOverlay,
    #previewErrorBanner {
    backdrop-filter: blur(5px);
    box-shadow: 0 16px 42px rgba(0,0,0,.34);
}

#analysisProgressTitle {
    color: var(--eve-gold-soft);
}

#audioOnlyOverlay {
    background: rgba(10, 18, 30, .95);
    border-color: rgba(185,205,220,.24);
}

.project-item {
    border-radius: var(--eve-radius-md);
    border: 1px solid rgba(185,205,220,.08);
    background: #101c2d;
}

.project-item:hover {
    background: #16263a;
    border-color: rgba(185,205,220,.26);
}

.project-name {
    color: var(--eve-frost);
}

.project-meta {
    color: #7f91a1;
}

.project-action {
    border-radius: var(--eve-radius-md);
    color: #91a4b4;
}

.project-action:hover {
    color: var(--eve-gold-soft);
    background: rgba(212,175,55,.06);
}

.modal-head h2,
    .modal h2 {
    font-size: var(--eve-fs-lg);
    font-weight: 650;
}

.modal h3 {
    font-size: var(--eve-fs-md);
    font-weight: 650;
}

.header-btn,
    .btn,
    .tt-btn,
    .control-btn,
    .speaker-method-btn,
    .trim-head-btn {
    letter-spacing: .004em;
}

.header-btn,
    .btn {
    font-size: var(--eve-fs-sm);
}

.tt-btn,
    .control-btn,
    .trim-head-btn,
    .trim-nudge {
    font-size: var(--eve-fs-xs);
}

#avatarPanelBody,
    #transcriptBody,
    #stockPanelPane,
    #ownClipsPanel {
    scrollbar-gutter: stable;
    min-height: 0;
}

.cand-search-row input {
    flex: 1;
    padding: 5px 8px;
    border-radius: var(--eve-radius-sm);
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text);
    font-size: var(--eve-fs-xs);
    min-width: 0;
}

input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="search"],
    select {
    padding-top: 6px;
    padding-bottom: 6px;
}

/* P22: three size classes — sm for settings dialogs, lg for content-heavy ones; md needs no class */
.modal.modal-sm {
    max-width: min(520px, 92vw);
}

.modal.modal-lg {
    max-width: min(920px, 95vw);
}

.modal-buttons {
    display: flex;
    justify-content: flex-end;
    margin-top: 16px;
    border-top-color: rgba(185,205,220,.10);
    gap: 8px;
}

button,
    .header-btn,
    .btn,
    .tt-btn,
    .control-btn,
    .cand-tab,
    .speaker-method-btn,
    .trim-head-btn,
    .trim-nudge,
    .project-item,
    .pool-card,
    .candidate-card,
    .insert-result-card,
    .scene-block,
    input,
    select,
    textarea {
    transition: background-color var(--eve-normal) var(--eve-ease),
        border-color var(--eve-normal) var(--eve-ease),
        color var(--eve-normal) var(--eve-ease),
        box-shadow var(--eve-normal) var(--eve-ease),
        opacity var(--eve-fast) var(--eve-ease),
        transform var(--eve-fast) var(--eve-ease);
}

.header-btn:hover:not(:disabled),
    .btn:hover:not(:disabled),
    .tt-btn:hover:not(:disabled),
    .control-btn:hover:not(:disabled),
    .speaker-method-btn:hover:not(:disabled),
    .trim-head-btn:hover:not(:disabled),
    .trim-nudge:hover:not(:disabled) {
    transform: translateY(-1px);
}

.header-btn:active:not(:disabled),
    .btn:active:not(:disabled),
    .tt-btn:active:not(:disabled),
    .control-btn:active:not(:disabled),
    .speaker-method-btn:active:not(:disabled),
    .trim-head-btn:active:not(:disabled),
    .trim-nudge:active:not(:disabled) {
    transform: translateY(0);
}

.scene-block.active,
    .candidate-card.selected,
    .pool-card.selected,
    .insert-result-card.selected,
    .cand-tab.active,
    .speaker-method-btn.active,
    .trim-face-toggle button.active {
    box-shadow: 0 0 0 1px rgba(212,175,55,.12),
        0 7px 20px rgba(0,0,0,.16),
        0 0 18px rgba(212,175,55,.045);
}

button:focus-visible,
    a:focus-visible,
    input:focus-visible,
    select:focus-visible,
    textarea:focus-visible,
    [tabindex]:focus-visible {
    outline: 2px solid rgba(230,198,122,.78);
    outline-offset: 2px;
}

.full-preview-controls:hover .control-btn:not(:disabled) {
    border-color: #38506a;
}

/* P32-6: Ctrl/Cmd+click multi-selection (FACE panel "Add to selected scenes") */
.scene-block.multi-selected {
    outline-color: rgba(212, 175, 55, 0.78);
    outline: 1px solid rgba(230,198,122,.72);
    outline-offset: 2px;
}

.drag-over,
    .drop-target,
    .drop-active {
    border-color: rgba(212,175,55,.72);
    box-shadow: inset 0 0 0 1px rgba(212,175,55,.16),
        0 0 18px rgba(212,175,55,.07);
}

#transcriptBody::-webkit-scrollbar-thumb:hover,
    #avatarPanelBody::-webkit-scrollbar-thumb:hover,
    #stockPanelPane::-webkit-scrollbar-thumb:hover,
    #ownClipsPanel::-webkit-scrollbar-thumb:hover,
    .trim-panel-body::-webkit-scrollbar-thumb:hover,
    .timeline::-webkit-scrollbar-thumb:hover {
    background: #526b85;
}

.transcript-toolbar,
    .timeline-header {
    border-color: rgba(185, 205, 220, 0.12);
    backdrop-filter: blur(3px);
    position: relative;
    min-height: 36px;
    background: transparent;
    box-shadow: none;
}

.transcript-toolbar::after,
    .timeline-header::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(185, 205, 220, .12) 18%,
        rgba(212, 175, 55, .28) 50%,
        rgba(185, 205, 220, .12) 82%,
        transparent
    );
    pointer-events: none;
    display: none;
}

.panel-guide,
    .speaker-status,
    .speaker-methods,
    #ownVideoBox {
    box-shadow: none;
}

.header-btn:not(.primary):not(#renderBtn):not([onclick*="showOldProjects"]),
    .tt-btn,
    .control-btn,
    .btn:not(.btn-success):not(.btn-danger),
    .trim-head-btn,
    .trim-nudge,
    .speaker-method-btn {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}

.header-btn:not(.primary):not(#renderBtn):not([onclick*="showOldProjects"]):hover,
    .tt-btn:hover:not(:disabled),
    .control-btn:hover:not(:disabled),
    .btn:not(.btn-success):not(.btn-danger):hover:not(:disabled),
    .trim-head-btn:hover:not(:disabled),
    .trim-nudge:hover:not(:disabled),
    .speaker-method-btn:hover:not(:disabled) {
    background: rgba(185,205,220,.065);
    border-color: rgba(185,205,220,.12);
    box-shadow: none;
}

.header-btn.active,
    .tt-btn.active,
    .tt-btn.on,
    .control-btn.active,
    .control-btn.on,
    .speaker-method-btn.active,
    .trim-face-toggle button.active {
    background: rgba(212,175,55,.055);
    border-color: rgba(212,175,55,.28);
    box-shadow: none;
}
#ownVideoBox {
    display: none;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    cursor: pointer;
    flex-shrink: 0;
    border-radius: var(--eve-radius-md);
    color: #a9b8c5;
    background: transparent;
    border: 1px dashed rgba(185,205,220,.16);
}

/* ===== P16: candidates column search row ===== */
.cand-search-row {
    display: flex;
    padding: 8px 10px 4px;
    gap: 6px;
    padding-top: 5px;
}

.suggestions-panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    overflow-y: auto;
    max-height: 360px;
    position: relative;
    padding: 8px 10px 10px;
    gap: 9px;
    padding-top: 6px;
}

.pool-empty,
    .empty-state {
    background: transparent;
    border: 0;
    box-shadow: none;
    color: #748697;
}

input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="search"],
    select,
    textarea {
    border-radius: var(--eve-radius-md);
    min-height: 34px;
    border: 1px solid #30455d;
    color: var(--eve-frost);
    background: rgba(13,24,39,.72);
    border-color: rgba(185,205,220,.12);
    box-shadow: none;
}

.header-btn:not(.primary):not(#renderBtn):not([onclick*="showOldProjects"]) {
    color: #a7b5c1;
}

.header-btn:not(.primary):not(#renderBtn):not([onclick*="showOldProjects"]):hover {
    color: #e3ebf0;
    background: rgba(185,205,220,.055);
}

.full-preview-controls .control-btn:hover:not(:disabled) {
    color: var(--eve-gold-soft);
    background: rgba(185,205,220,.045);
}

.progress-track {
    flex: 1;
    min-width: 50px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    height: 5px;
    background: #1c2b3d;
    border-radius: 999px;
}

.progress-fill {
    height: 100%;
    border-radius: var(--eve-radius-sm);
    transition: width 0.1s linear;
    width: 0%;
    background: linear-gradient(
        90deg,
        #7c9bb3 0%,
        #b9cddc 85%,
        #d4af37 100%
    );
}

.autoscroll-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--eve-fs-xs);
    cursor: pointer;
    color: #a4b2be;
}
.scene-block.active::after {
    box-shadow: none;
}

.header-btn > .icon::before,


    #undoBtn::before,


    #redoBtn::before,


    #seekStartBtn::before,


    #playPauseBtn::before,


    #fullscreenBtn::before


{
    background: #b8c9d5;
}


.header-btn:hover > .icon::before,


    #undoBtn:hover::before,


    #redoBtn:hover::before,


    #seekStartBtn:hover::before,


    #playPauseBtn:hover::before,


    #fullscreenBtn:hover::before


{
    background: #e4c66f;
}

button[onclick*="Thumbnail"],
    button[onclick*="thumbnail"] {
    --eve-menu-icon: "icons/scene.svg";
}

.insert-menu .header-btn:hover,
    .file-menu .header-btn:hover {
    border-color: transparent;
    color: #edf2f5;
    background: rgba(185,205,220,.055);
}#autoclipReopenTab{
    text-shadow: none;
}

.header-btn .icon,
    .transcript-toolbar .icon {
    font-size: 0 !important;
}

.insert-menu .header-btn + .header-btn,
    .file-menu .header-btn + .header-btn {
    margin-top: 2px;
}

.insert-menu hr,
    .file-menu hr {
    margin: 5px 2px;
    border-color: rgba(185,205,220,.08);
}

#ttHelpBtn,
    #speakerHelpBtn {
    border-radius: 50%;
    width: 28px;
    height: 28px;
    min-width: 28px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #9fb0be;
    border: 1px solid rgba(185,205,220,.10);
    background: transparent;
}

#ttHelpBtn:hover,
    #speakerHelpBtn:hover {
    color: var(--eve-gold-soft);
    border-color: rgba(212,175,55,.26);
    background: rgba(212,175,55,.04);
}

#ttDlSrtBtn:hover,
    #ttDlTxtBtn:hover {
    color: var(--eve-gold-soft);
}

#analyzeSplitBtn,
    #buildSuggBtn {
    background: rgba(185,205,220,.045);
    border: 1px solid rgba(185,205,220,.10);
    color: #adbbc7;
}

#analyzeSplitBtn:hover,
    #buildSuggBtn:hover {
    background: rgba(185,205,220,.075);
    border-color: rgba(185,205,220,.18);
    color: #e2e9ee;
}

#buildRunBtn,
    #splitRunBtn {
    box-shadow: none;
}

.panel-header-name,
    .panel-title {
    text-shadow: none;
    color: var(--eve-moon);
    font-weight: 600;
    font-size: var(--eve-fs-lg);
    line-height: var(--eve-lh-tight);
    letter-spacing: 0.01em;
}.speaker-method-btn.active,
    .trim-face-toggle button.active,
    .scene-block.active{
    text-shadow: none;
}

button:disabled:hover,
    .header-btn:disabled:hover,
    .tt-btn:disabled:hover,
    .control-btn:disabled:hover,
    .btn:disabled:hover {
    transform: none;
    background: transparent;
    box-shadow: none;
}

.success,
    .status-success,
    .toast-success {
    color: var(--eve-ok);
}

.status-badge.success {
    background: rgba(111,207,151,.07);
    border-color: rgba(111,207,151,.26);
    color: #91ddb0;
}

.warning,
    .status-warning {
    color: var(--eve-warn);
}

.status-badge.warning {
    background: rgba(216,179,92,.07);
    border-color: rgba(216,179,92,.26);
    color: #e2c77f;
}

.status-badge.error {
    background: rgba(217,109,114,.075);
    border-color: rgba(217,109,114,.30);
    color: #eca5a8;
}

#previewErrorBanner {
    background: rgba(48, 17, 23, .95);
    border-color: rgba(217,109,114,.42);
    box-shadow: 0 14px 34px rgba(0,0,0,.30);
}

/* P46 (2026-08-18): indeterminate progress bars — analysis overlay over the preview + the "Preparing preview audio" indicator */
.indeterminate-bar {
    height: 8px;
    border-radius: var(--eve-radius-sm);
    background: #152236;
    overflow: hidden;
}

.indeterminate-fill {
    width: 40%;
    height: 100%;
    border-radius: var(--eve-radius-sm);
    animation: indet-slide 1.2s ease-in-out infinite;
    background: linear-gradient(
            90deg,
            transparent 0%,
            rgba(185,205,220,.20) 25%,
            rgba(212,175,55,.52) 50%,
            rgba(185,205,220,.20) 75%,
            transparent 100%
        );
}

#audioPrepIndicator {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    padding: 6px 14px;
    font-size: var(--eve-fs-sm);
    z-index: 12;
    pointer-events: none;
    display: none;
    min-width: 260px;
    text-align: center;
    color: #9fb1bf;
    background: rgba(9,18,30,.92);
    border: 1px solid rgba(185,205,220,.11);
    border-radius: var(--eve-radius-md);
    box-shadow: 0 10px 24px rgba(0,0,0,.20);
}

#analysisProgressOverlay {
    background: rgba(7, 14, 24, .92);
    border-color: rgba(212,175,55,.48);
    color: #b7c4ce;
}

#toast {
    background: rgba(11, 21, 34, .97);
    border-radius: var(--eve-radius-md);
    border-width: 1px;
    box-shadow: 0 18px 42px rgba(0,0,0,.44);
    backdrop-filter: blur(6px);
    color: #d8e1e8;
    border-color: rgba(185,205,220,.16);
}

#toast[style*="var(--success)"] {
    background: rgba(8,26,20,.96);
}

#toast[style*="var(--error)"] {
    background: rgba(42,15,20,.96);
}

.speaker-status,
    .trim-audio-state,
    #ttSelInfo {
    font-size: var(--eve-fs-xs);
    color: #8194a5;
}

.speaker-status:empty,
    .trim-audio-state:empty,
    #ttSelInfo:empty {
    display: none;
}

.header-btn:not(#renderBtn) {
    min-height: 30px;
    opacity: .88;
}

.header-btn:not(#renderBtn):hover {
    opacity: 1;
}

.timeline-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    padding-top: 7px;
    padding-bottom: 7px;
    min-height: var(--eve-header-h);
    padding: 0 var(--eve-space-3);
    background: var(--eve-night-850);
    border-bottom: 1px solid var(--eve-line);
    gap: var(--eve-space-2);
    opacity: 1;
}

.scene-block.active .scene-type {
    color: #9eb2c2;
}

.header-btn.active:not(#renderBtn),
    .tt-btn.active,
    .control-btn.active {
    box-shadow: none;
}

.header-btn,
    .tt-btn,
    .control-btn,
    .btn,
    input,
    select,
    textarea,
    .speaker-method-btn,
    .trim-head-btn,
    .trim-nudge {
    border-radius: var(--eve-radius-sm);
}

.panel-title,
    .panel-header-name {
    text-transform: none;
    color: var(--eve-moon);
    font-weight: 600;
    font-size: var(--eve-fs-lg);
    line-height: var(--eve-lh-tight);
    letter-spacing: 0.01em;
}

#transcriptBody,
    #avatarPanelBody,
    .suggestions-panel {
    color: #cdd7de;
}

.insert-menu,
    .file-menu,
    .drop-choice-pop {
    border-radius: var(--eve-radius-md);
}

#transcriptBody::-webkit-scrollbar,
    #avatarPanelBody::-webkit-scrollbar,
    #stockPanelPane::-webkit-scrollbar,
    #ownClipsPanel::-webkit-scrollbar,
    .trim-panel-body::-webkit-scrollbar,
    .timeline::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

#transcriptBody::-webkit-scrollbar-track,
    #avatarPanelBody::-webkit-scrollbar-track,
    #stockPanelPane::-webkit-scrollbar-track,
    #ownClipsPanel::-webkit-scrollbar-track,
    .trim-panel-body::-webkit-scrollbar-track,
    .timeline::-webkit-scrollbar-track {
    background: transparent;
}

/* P20: persistent trim & effect strip between preview and timeline */
#trimPanel {
    flex-shrink: 0;
    position: relative;
    min-height: 0;
    overflow: hidden;
    padding: 7px 18px 9px;
    background: var(--eve-night-850);
    border-top: 1px solid rgba(185,205,220,.08);
    border-bottom: 1px solid rgba(185,205,220,.07);
    box-shadow: none;
}

.trim-panel-body {
    display: flex;
    flex-wrap: wrap;
    padding-top: 8px;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    gap: 12px;
    align-items: flex-start;
}

.trim-slider-section,
    .trim-audio-section,
    .trim-face-section,
    .trim-panel-body #sceneSettingsBody > div {
    border-color: rgba(185,205,220,.085);
    background: transparent;
    box-shadow: none;
}

/* 2026-08-22: the bubble box's right edge is aligned with the Speaker panel's right edge AT RUNTIME (_alignFaceSectionWidth measures the real geometry) — this is just the fallback width before the first measurement. */
.trim-panel-body #trimFaceSection {
    flex: 0 0 290px;
    width: 290px;
    margin-bottom: 0;
    border: 0;
    border-right: 1px solid rgba(185,205,220,.08);
    border-radius: 0;
    padding-right: 14px;
}

.trim-panel-body .trim-slider-section {
    flex: 1;
    min-width: 0;
    margin-bottom: 0;
    border: 0;
    border-radius: 0;
    padding-left: 2px;
    padding-right: 2px;
}

/* JARJESTYS 2026-09-04 (kayttajan pyynto): skenepaneelin AIKAJANAT
   pinottuna paallekkain, kaikki saman levyisia (koko paneelin leveys) —
   efektit / klippi / puhe / musiikki. Muut osiot (speaker bubble,
   skene-asetukset) saavat edelleen jakaa rivit flex-wrap:illa.
   Nuolinapeille jaetaan reunoilta tilaa, etteivat ne peita janoja. */
#trimPanel .trim-panel-body > #sceneEffectsLayer,
#trimPanel .trim-panel-body > #trimSliderSection,
#trimPanel .trim-panel-body > #sceneMusicLayer {
    flex: 1 1 100%;
}
#trimPanel .trim-panel-body {
    padding-left: 26px;
    padding-right: 26px;
}

/* P36 (2026-08-17): align-self: flex-start — the body's align-items: stretch stretched the Effect box to the whole scene panel's height whenever a sibling (trim slider, speaker box) grew taller. Now the box is only as tall as its own content. */
.trim-panel-body #sceneSettingsBody {
    width: fit-content;
    flex-shrink: 0;
    display: flex;
    align-self: flex-start;
    min-width: 145px;
    padding-left: 3px;
}

.trim-panel-body #sceneSettingsBody > div {
    flex: 1;
    border: 0;
    border-left: 1px solid rgba(185,205,220,.08);
    border-radius: 0;
    padding-left: 14px;
}

#trimFaceSection .trim-audio-head {
    margin-bottom: 7px;
}

#trimFaceSection .trim-audio-title {
    color: #becdd8;
}

.trim-face-toggle {
    display: flex;
    gap: 4px;
}

.trim-face-toggle button {
    flex: 1;
    font-size: var(--eve-fs-xs);
    border-radius: var(--eve-radius-sm);
    cursor: pointer;
    white-space: nowrap;
    min-height: 28px;
    padding: 4px 8px;
    background: rgba(185,205,220,.035);
    border: 1px solid rgba(185,205,220,.095);
    color: #9dafbc;
    box-shadow: none;
}

.trim-face-toggle button:hover {
    background: rgba(185,205,220,.065);
    border-color: rgba(185,205,220,.18);
    color: #e1e8ed;
}

.trim-face-toggle button.active {
    font-weight: 600;
    background: rgba(212,175,55,.05);
    border-color: rgba(212,175,55,.25);
    color: var(--eve-gold-soft);
    box-shadow: none;
}

.trim-panel-clip-info b {
    color: #b8c8d4;
    font-weight: 590;
}

/* P33H (2026-08-16): the title "Scene #N — Trim & Effect" is INLINE on the Source row — no own row, so the panel is one text line shorter. The ✕ close button instead floats at the panel's top-right corner so it stays reachable for audio scenes too (their video trim section — and with it the Source row — is hidden). */
.trim-panel-title {
    font-size: var(--eve-fs-xs);
    white-space: nowrap;
    color: var(--eve-gold-soft);
    font-weight: 650;
}

/* 2026-08-22: Split here / Remove this half on the scene-number row */
.trim-head-btn {
    font-size: var(--eve-fs-xs);
    border-radius: var(--eve-radius-sm);
    cursor: pointer;
    white-space: nowrap;
    align-self: center;
    min-height: 23px;
    padding: 2px 7px;
    background: transparent;
    border: 1px solid rgba(185,205,220,.08);
    color: #91a4b4;
}

.trim-head-btn:hover {
    background: rgba(185,205,220,.05);
    border-color: rgba(185,205,220,.16);
    color: #dbe4ea;
}

.trim-slider {
    position: relative;
    height: 29px;
    background: #07101a;
    border: 1px solid rgba(185,205,220,.10);
    border-radius: var(--eve-radius-sm);
    box-shadow: inset 0 1px 5px rgba(0,0,0,.24);
}

.trim-slider-range {
    position: absolute;
    top: 2px;
    bottom: 2px;
    opacity: 0.75;
    pointer-events: none;
    background: rgba(154,181,201,.34);
    border-radius: var(--eve-radius-sm);
}

.trim-slider-window {
    position: absolute;
    top: 2px;
    bottom: 2px;
    z-index: 1;
    border-radius: var(--eve-radius-sm);
    cursor: grab;
    touch-action: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(185,205,220,.62);
    background: rgba(185,205,220,.055);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.025);
}

.trim-slider input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    pointer-events: auto;
    cursor: ew-resize;
    width: 9px;
    height: 24px;
    border-radius: var(--eve-radius-sm);
    background: #b9cddc;
    border: 1px solid #506a80;
    box-shadow: 0 1px 5px rgba(0,0,0,.32);
}

.trim-slider input[type=range]::-moz-range-thumb {
    pointer-events: auto;
    cursor: ew-resize;
    width: 9px;
    height: 24px;
    border-radius: var(--eve-radius-sm);
    background: #b9cddc;
    border: 1px solid #506a80;
    box-shadow: 0 1px 5px rgba(0,0,0,.32);
}

.trim-playhead {
    position: absolute;
    top: -3px;
    bottom: -3px;
    border-radius: var(--eve-radius-sm);
    pointer-events: none;
    z-index: 3;
    display: none;
    transform: translateX(-1px);
    width: 1px;
    background: rgba(232,238,243,.82);
    box-shadow: 0 0 5px rgba(255,255,255,.26);
}

.trim-action-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

#sceneSettingsBody select:hover {
    border-color: rgba(185,205,220,.20);
}

.scene-block:hover {
    box-shadow: none;
    border-color: rgba(185,205,220,.17);
    background: #15263c;
}

.scene-block.active::before {
    pointer-events: none;
    content: "";
    position: absolute;
    right: auto;
    border-radius: 999px;
    opacity: .82;
    width: 20px;
    height: 2px;
    left: 7px;
    top: 3px;
    background: rgba(212,175,55,.86);
}

.scene-block .scene-type {
    display: inline-block;
    align-self: center;
    border-radius: var(--eve-radius-sm);
    font-size: var(--eve-fs-xs);
    background: transparent;
    color: #70889b;
    padding: 0 2px;
    font-weight: 500;
}

.scene-block .scene-type.hook {
    background: transparent;
    color: #7ea98f;
}

.scene-block .scene-type.detail,
    .scene-block .scene-type.thumb {
    background: transparent;
    color: #8296a6;
}

.scene-block .scene-num {
    text-align: center;
    border: 1px solid rgba(185,205,220,.08);
    border-radius: 999px;
    padding: 1px 5px;
    font-size: var(--eve-fs-xs);
    border-color: rgba(185,205,220,.07);
    opacity: .92;
    font-weight: 650;
    color: #9eb0be;
    background: rgba(4,9,16,.68);
}

.scene-block.active .scene-num {
    border-color: rgba(212,175,55,.18);
    color: var(--eve-gold-soft);
}

#timeline:hover .insert-handle {
    opacity: .16;
}

.insert-handle:hover {
    transform: scale(1.03);
    opacity: .92 !important;
}

.insert-handle span {
    border-radius: 50%;
    text-align: center;
    font-weight: bold;
    pointer-events: auto;
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    line-height: 15px;
    font-size: var(--eve-fs-xs);
    background: rgba(212,175,55,.78);
    color: #070b11;
    box-shadow: 0 0 0 2px #050a12;
}

/* P32-7: PRO clip-suggestion builder (scoped, context persisted) */
#buildSuggBox,
    #analyzeSplitBox {
    border: 1px solid var(--border);
    border-radius: var(--eve-radius-md);
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
    box-sizing: border-box;
    padding: 7px 0 0;
    border-top: 1px solid rgba(185,205,220,.07);
    background: transparent;
}

.trim-panel-x:hover {
    background: rgba(185,205,220,.045);
    border-color: rgba(185,205,220,.10);
    color: #c9d6df;
}

#trimSplitBtn,
    #trimRemoveHalfBtn,
    #trimFreezeBtn,
    #trimAudioTrackBtn {
    border-radius: var(--eve-radius-sm);
    min-height: 24px;
    background: transparent;
    border: 1px solid rgba(185,205,220,.08);
    color: #8fa2b2;
    box-shadow: none;
}

#trimSplitBtn:hover,
    #trimRemoveHalfBtn:hover,
    #trimFreezeBtn:hover,
    #trimAudioTrackBtn:hover {
    background: rgba(185,205,220,.045);
    border-color: rgba(185,205,220,.16);
    color: #dbe4ea;
}

#trimRemoveHalfBtn {
    color: #bd8d92;
}

#trimRemoveHalfBtn:hover {
    background: rgba(217,109,114,.055);
    border-color: rgba(217,109,114,.18);
    color: #e6a5a8;
}

#trimAudioTrackBtn.on {
    color: var(--eve-gold-soft);
    border-color: rgba(212,175,55,.24);
    background: rgba(212,175,55,.045);
}

.replace-chooser > summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    border-radius: var(--eve-radius-sm);
}

.replace-chooser[open] > summary {
    color: var(--eve-gold-soft);
}

.replace-chooser-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 40;
    border: 1px solid var(--border);
    border-radius: var(--eve-radius-md);
    display: flex;
    flex-direction: column;
    background: #0c1725;
    border-color: rgba(185,205,220,.13);
    box-shadow: 0 14px 32px rgba(0,0,0,.34);
    min-width: 150px;
    padding: 5px;
    gap: 2px;
}

.replace-chooser-menu button,
    .replace-chooser-menu label {
    border-radius: var(--eve-radius-sm);
    padding: 7px 9px;
}

.replace-chooser-menu button:hover,
    .replace-chooser-menu label:hover {
    background: rgba(185,205,220,.055);
}

.file-menu hr,
    .insert-menu hr {
    margin: 4px 2px;
}

#sceneSettingsBody label {
    color: #8397a8;
    font-size: var(--eve-fs-xs);
}

#sceneSettingsBody select {
    background: rgba(13,24,39,.62);
    border-color: rgba(185,205,220,.10);
    min-height: 29px;
    padding: 4px 8px;
    color: #b6c5cf;
}

/* ===== PHASE 6 (2026-08-22): per-scene AUDIO TRACK (inside #trimSliderSection, under the clip trim slider) ===== */
.trim-audio-track {
    /* JARJESTYS 2026-09-04: puherata on yksi pinon saman levyisista
       aikajanoista — laatikon reunus ja sivupadding pois, jotta kaista
       on tasmalleen klippijanan levyinen. */
    border: 0;
    border-radius: 0;
    padding: 7px 0 0;
    margin-top: 8px;
    border-top: 1px solid rgba(185,205,220,.07);
    background: transparent;
}

.atc-source {
    display: inline-flex;
    border: 1px solid var(--border);
    overflow: hidden;
    border-color: rgba(185,205,220,.10);
    border-radius: var(--eve-radius-sm);
}

.atc-source button {
    border: none;
    padding: 2px 8px;
    font-size: var(--eve-fs-xs);
    cursor: pointer;
    background: transparent;
    color: #8498a9;
}

.atc-source button.on {
    font-weight: 600;
    background: rgba(212,175,55,.05);
    color: var(--eve-gold-soft);
}

.trim-audio-lane {
    position: relative;
    height: 62px;
    border: 1px solid var(--border);
    cursor: crosshair;
    border-radius: var(--eve-radius-md);
    overflow: hidden;
    background: #07101a;
    border-color: rgba(185,205,220,.10);
    box-shadow: inset 0 1px 5px rgba(0,0,0,.22);
}

.trim-panel-clip-info {
    display: flex;
    overflow: hidden;
    white-space: nowrap;
    align-items: baseline;
    gap: 9px;
    margin-bottom: 7px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(185,205,220,.065);
    color: #8295a5;
    font-size: var(--eve-fs-xs);
    letter-spacing: .004em;
}

.trim-panel-clip-info > span,
    .trim-panel-clip-info > div {
    color: #7e92a3;
}

.trim-panel-clip-info b,
    .trim-panel-clip-info strong {
    color: #aebfcb;
}

.trim-panel-clip-info .trim-clip-len {
    margin-left: auto;
    color: #93a7b7;
    font-variant-numeric: tabular-nums;
}

.scene-block .scene-time {
    text-align: center;
    color: #6f8496;
    font-size: var(--eve-fs-xs);
    font-variant-numeric: tabular-nums;
}

.scene-block.active .scene-text {
    color: #e2e9ee;
}

.pool-card .pool-folder-tag,
    .pool-card .pool-use-badge {
    font-size: var(--eve-fs-xs);
    border-radius: var(--eve-radius-sm);
    box-shadow: none;
}

.pool-card .pool-folder-tag {
    position: absolute;
    top: 3px;
    left: 3px;
    font-size: var(--eve-fs-xs);
    padding: 1px 5px;
    border-radius: var(--eve-radius-sm);
    background: rgba(5,10,18,.76);
    color: #a8bac7;
}

.scene-block .scene-time,
    .trim-panel-clip-info,
    .trim-readout,
    .trim-audio-state {
    font-variant-numeric: tabular-nums;
}

.scene-block.active .scene-time,
    .scene-block.active .scene-type {
    opacity: .92;
}

.trim-panel-body > * {
    margin-top: 0;
    margin-bottom: 0;
}

#sceneSettingsBody {
    color: #9dafbc;
    margin-left: auto;
}

.empty-state .icon,
    .pool-empty .icon {
    opacity: .48;
    filter: grayscale(.25) saturate(.55);
}

.empty-state p,
    .pool-empty p {
    margin-top: 5px;
    color: #748899;
    line-height: var(--eve-lh-ui);
}

#buildSuggBtn,
    #analyzeSplitBtn,
    #buildRunBtn,
    #splitRunBtn {
    font-weight: 560;
    letter-spacing: .003em;
}

#buildSuggBtn,
    #analyzeSplitBtn {
    min-height: 34px;
    border: 1px solid rgba(185,205,220,.10);
    border-radius: var(--eve-radius-md);
    box-shadow: none;
    background: transparent;
    border-color: rgba(185,205,220,.09);
    color: #9aabba;
}

#buildSuggBtn:hover,
    #analyzeSplitBtn:hover {
    background: rgba(185,205,220,.045);
    border-color: rgba(185,205,220,.16);
    color: #d8e2e8;
}

[aria-busy="true"],
    .loading,
    .is-loading {
    cursor: progress;
}

.loading,
    .is-loading {
    color: #8498a9;
}

.loading::after,
    .is-loading::after {
    opacity: .65;
}

.panel-guide .pg-title {
    margin-bottom: 8px;
    color: #aebfcb;
    font-size: var(--eve-fs-xs);
    font-weight: 620;
}

.panel-guide p,
    .panel-guide li {
    color: #768a9b;
    line-height: var(--eve-lh-ui);
}

/* P39: same circular edge handle for the Clips panel (left edge) and the Scene panel (top edge) — click hides, drag resizes, identical interaction to the transcript handle above */
#candEdgeHandle {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--bg-darker);
    border: 1px solid var(--border);
    color: var(--beige);
    font-size: var(--eve-fs-sm);
    line-height: 24px;
    text-align: center;
    cursor: ew-resize;
    z-index: 31;
    user-select: none;
    left: -13px;
}

#ttEdgeHandle {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--bg-darker);
    border: 1px solid var(--border);
    color: var(--beige);
    font-size: var(--eve-fs-sm);
    line-height: 24px;
    text-align: center;
    cursor: ew-resize;
    z-index: 30;
    user-select: none;
    right: -13px;
}

#avatarEdgeHandle {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--bg-darker);
    border: 1px solid var(--border);
    color: var(--beige);
    font-size: var(--eve-fs-sm);
    line-height: 24px;
    text-align: center;
    cursor: ew-resize;
    z-index: 30;
    user-select: none;
    right: -13px;
}

#candEdgeHandle.dragging,
    #trimEdgeHandle.dragging,
    #ttEdgeHandle.dragging,
    #avatarEdgeHandle.dragging {
    background: #182940;
    border-color: var(--eve-gold);
    color: #f0d985;
}

#avatarPanelBody {
    flex: 1;
    overflow-y: auto;
    font-size: var(--eve-fs-sm);
    color: var(--text, #e8e4dc);
    scrollbar-width: none;
    -ms-overflow-style: none;
    line-height: var(--eve-lh-body);
    padding: 10px 11px;
    padding-top: 10px;
}

#stockPanelPane,
    #ownClipsPanel {
    background: transparent;
    padding-top: 2px;
}

#ttEdgeHandle,
    #avatarEdgeHandle,
    #candEdgeHandle {
    background: #0b1725;
    border-color: rgba(185,205,220,.44);
}

#ttEdgeHandle:hover,
    #avatarEdgeHandle:hover,
    #candEdgeHandle:hover {
    background: #132337;
    border-color: rgba(212,175,55,.70);
}

/* P39: the old #candResizeHandle drag strip is gone — the circular #candEdgeHandle (click = hide, drag = resize) replaced it */
.cand-tabs {
    display: flex;
    border-radius: var(--eve-radius-md);
    padding-bottom: 2px;
    min-height: var(--eve-header-h);
    padding: 0 var(--eve-space-3);
    background: var(--eve-night-850);
    border-bottom: 1px solid var(--eve-line);
    margin: 0;
    gap: var(--eve-space-3);
}

.cand-tab {
    flex: 1;
    padding: 6px 4px;
    text-align: center;
    cursor: pointer;
    min-height: 31px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    border-radius: 0;
    padding-left: 2px;
    padding-right: 2px;
    box-shadow: none;
    color: #7f93a4;
    font-size: var(--eve-fs-sm);
}

#trimEdgeHandle {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid var(--border);
    color: var(--beige);
    font-size: var(--eve-fs-sm);
    line-height: 24px;
    text-align: center;
    cursor: ns-resize;
    z-index: 31;
    user-select: none;
    top: -13px;
    background: #0b1725;
    border-color: rgba(185,205,220,.44);
}

#trimEdgeHandle:hover {
    background: #132337;
    border-color: rgba(212,175,55,.70);
}

#ttToolbarBtns,
    .pool-toolbar,
    .cand-search-row,
    .trim-action-bar,
    .trim-audio-controls-row {
    gap: 5px;
}

#ttToolbarBtns .tt-btn,
    .pool-toolbar .btn,
    .pool-toolbar .tt-btn,
    .cand-search-row .btn,
    .trim-action-bar .btn,
    .trim-action-bar .trim-head-btn {
    background: transparent;
    border-color: rgba(185,205,220,.075);
    color: #879bab;
    box-shadow: none;
}

#ttToolbarBtns .tt-btn:hover,
    .pool-toolbar .btn:hover,
    .pool-toolbar .tt-btn:hover,
    .cand-search-row .btn:hover,
    .trim-action-bar .btn:hover,
    .trim-action-bar .trim-head-btn:hover {
    background: rgba(185,205,220,.045);
    border-color: rgba(185,205,220,.15);
    color: #d5dfe6;
}

#ttSelInfo {
    margin-left: auto;
    color: #73889a;
    font-size: var(--eve-fs-xs);
}

.pool-toolbar {
    display: flex;
    padding: 8px 10px 6px;
    gap: 6px;
    padding-top: 6px;
    padding-bottom: 5px;
}

.pool-toolbar input,
    .cand-search-row input {
    background: rgba(13,24,39,.58);
    border-color: rgba(185,205,220,.09);
}

.pool-toolbar input:focus,
    .cand-search-row input:focus {
    border-color: rgba(212,175,55,.28);
}

.pool-folder-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    padding: 2px 10px 6px;
    color: #7f93a4;
    font-size: var(--eve-fs-xs);
}

.pool-folder-row .active,
    .pool-folder-row button.active {
    color: var(--eve-gold-soft);
}

#avatarPanelBody button:not(.speaker-method-btn) {
    box-shadow: none;
}

#avatarPanelBody button:not(.speaker-method-btn):not(.btn-success):not(.btn-danger) {
    background: transparent;
    border-color: rgba(185,205,220,.075);
    color: #8da0b0;
}

#avatarPanelBody button:not(.speaker-method-btn):not(.btn-success):not(.btn-danger):hover {
    background: rgba(185,205,220,.045);
    border-color: rgba(185,205,220,.15);
    color: #d8e1e7;
}

#avatarPanelBody .btn-danger,
    #trimPanel .btn-danger {
    background: transparent;
    border-color: rgba(217,109,114,.16);
    color: #bd8b90;
}

#avatarPanelBody .btn-danger:hover,
    #trimPanel .btn-danger:hover {
    background: rgba(217,109,114,.05);
    border-color: rgba(217,109,114,.26);
    color: #e3a1a5;
}

#ttToolbarBtns::after,
    .pool-toolbar::after {
    content: "";
    display: block;
    height: 1px;
    background: rgba(185,205,220,.045);
    margin-top: 5px;
}

#ttToolbarBtns::after {
    flex-basis: 100%;
}

#avatarPanelBody,
    #stockPanelPane,
    #ownClipsPanel {
    padding-bottom: 12px;
}

#ttFindBar,
    .pool-folder-row,
    .cand-search-row {
    background: transparent;
    box-shadow: none;
}

#ttFindBar {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--border);
    background: #0b1522;
    margin: 8px 10px 6px;
    padding: 8px;
    border-radius: var(--eve-radius-md);
    box-shadow: none;
    border-color: rgba(185,205,220,.08);
}

.speaker-methods {
    display: flex;
    margin-bottom: 12px;
    border-radius: var(--eve-radius-md);
    background: transparent;
    border: 0;
    padding: 0;
    gap: 3px;
}

.speaker-method-btn.active {
    font-weight: 600;
    box-shadow: var(--eve-shadow-gold);
    border-color: rgba(212,175,55,.28);
    background: rgba(212,175,55,.045);
    color: var(--eve-gold-soft);
}.speaker-status,
    .empty-state,
    .pool-empty,
    #ttSelInfo{
    text-shadow: none;
}

/* 2026-08-22: PANEL GUIDES — with no project open every panel stays OPEN and explains itself in large text; the guides vanish the moment real content arrives (_updatePanelGuides). */
.panel-guide {
    font-size: var(--eve-fs-md);
    line-height: var(--eve-lh-body);
    color: var(--text-dim);
    border: 1px solid rgba(185,205,220,.09);
    box-shadow: none;
    padding: 10px 11px;
    background: rgba(185,205,220,.02);
    border-color: rgba(185,205,220,.075);
    border-radius: var(--eve-radius-md);
}

.cand-tab.active {
    font-weight: 600;
    background: #17273b;
    border-color: transparent;
    color: #c7d5de;
    box-shadow: inset 0 -2px 0 rgba(212,175,55,.66);
}

#ttDlSrtBtn,
    #ttDlTxtBtn,
    #ttHelpBtn,
    #speakerHelpBtn {
    min-height: 27px;
}

#ttDlSrtBtn,
    #ttDlTxtBtn {
    color: #91a6b7;
    padding-left: 6px;
    padding-right: 6px;
}

#ttEdgeHandle,
    #avatarEdgeHandle,
    #candEdgeHandle,
    #trimEdgeHandle {
    color: #61758c;
    font-family: Inter, "Segoe UI", system-ui, sans-serif;
}

.full-preview-controls .control-btn {
    color: #aebdca;
    background: transparent;
    border-color: transparent;
    min-width: 28px;
    min-height: 28px;
    opacity: .84;
}

.full-preview-controls .control-btn:hover {
    opacity: 1;
}

.full-preview-controls .time-display,
    .full-preview-controls #currentTime,
    .full-preview-controls #totalTime {
    color: #9fb0be;
    font-variant-numeric: tabular-nums;
    font-size: var(--eve-fs-xs);
    letter-spacing: .012em;
}

.rate-select {
    border: 1px solid var(--border, #3a3a4a);
    border-radius: var(--eve-radius-sm);
    font-size: var(--eve-fs-xs);
    padding: 2px 4px;
    cursor: pointer;
    background: transparent;
    border-color: rgba(185,205,220,.12);
    color: #92a5b5;
}

.scene-block .scene-text {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-align: center;
    color: #d3dde4;
    font-size: var(--eve-fs-xs);
    line-height: var(--eve-lh-tight);
    text-shadow: 0 1px 1px rgba(0,0,0,.18);
}

.scene-block:not(.active) .scene-num {
    opacity: .82;
}

.scene-block:not(.active) .scene-type {
    opacity: .72;
}

.scene-block:hover .scene-num,
    .scene-block:hover .scene-type {
    opacity: 1;
}

/* P19: insert handles between scene blocks (+ at the end). Zero-width: scenes sit flush against each other and the + overlays the boundary (still fully clickable, on top). */
.insert-handle {
    flex: 0 0 0;
    width: 0;
    overflow: visible;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 6;
    opacity: .08;
    transition: opacity 130ms ease;
    filter: none;
}

.modal-header,
    .modal .modal-header {
    border-bottom: 1px solid rgba(185,205,220,.075);
}

.modal-footer,
    .modal .modal-footer {
    border-top: 1px solid rgba(185,205,220,.075);
}

.modal .close,
    .modal-close {
    color: #8397a8;
}

.modal .close:hover,
    .modal-close:hover {
    color: var(--eve-gold-soft);
}

button:focus-visible,
    input:focus-visible,
    select:focus-visible,
    textarea:focus-visible,
    [tabindex]:focus-visible {
    outline: 2px solid rgba(230,198,122,.72);
    outline-offset: 2px;
}

#ttFindBar input,
    .cand-search-row input,
    .pool-toolbar input,
    #sceneSettingsBody select {
    border-radius: var(--eve-radius-sm);
    min-height: 30px;
}

#ttFindBar input:hover,
    .cand-search-row input:hover,
    .pool-toolbar input:hover,
    #sceneSettingsBody select:hover {
    border-color: rgba(185,205,220,.18);
}

#ttFindBar input:focus,
    .cand-search-row input:focus,
    .pool-toolbar input:focus,
    #sceneSettingsBody select:focus {
    border-color: rgba(212,175,55,.34);
    box-shadow: 0 0 0 1px rgba(212,175,55,.07);
}

#trimPanel button.active,
    #trimPanel button.on,
    #trimPanel .active {
    box-shadow: none;
}

#trimPanel button.active,
    #trimPanel button.on {
    color: var(--eve-gold-soft);
    border-color: rgba(212,175,55,.24);
    background: rgba(212,175,55,.045);
}

#trimPanel button:not(.active):not(.on):hover {
    color: #dbe4ea;
}

.scene-block .used-clip-indicator,
    .pool-card .pool-use-badge,
    .status-badge {
    box-shadow: none;
}

.scene-block .used-clip-indicator {
    position: absolute;
    border-radius: 50%;
    width: 4px;
    height: 4px;
    top: 3px;
    right: 3px;
    background: #65bf91;
    box-shadow: none;
    opacity: .64;
}

.status-badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: var(--eve-radius-sm);
    font-weight: 600;
    background: #101c2d;
    border-color: #2d425a;
    font-size: var(--eve-fs-xs);
}

/* P49: clip is used in one or more projects — green link badge, tooltip lists the projects (title attr on the card) */
.pool-card .pool-use-badge {
    position: absolute;
    bottom: 3px;
    right: 3px;
    font-size: var(--eve-fs-xs);
    padding: 1px 5px;
    border-radius: var(--eve-radius-sm);
    font-weight: 700;
    z-index: 3;
    background: rgba(80,158,116,.78);
    color: #07110b;
    opacity: .86;
}

#ttToolbarBtns,
    .pool-toolbar,
    .cand-search-row,
    .trim-action-bar {
    align-items: center;
}

/* P40 (2026-08-17): scene number + type on ONE row (no # sign) */
.scene-block .scene-head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    min-height: 15px;
}.timeline-header .panel-title{
    color: var(--eve-moon);
    font-weight: 600;
    font-size: var(--eve-fs-lg);
    line-height: var(--eve-lh-tight);
    letter-spacing: 0.01em;
}

.header-btn,
    .tt-btn,
    .control-btn,
    .btn,
    .trim-head-btn,
    .speaker-method-btn {
    white-space: nowrap;
}
#transcriptBody,
    .scene-block .scene-text,
    .panel-guide,
    .speaker-status {
    letter-spacing: .002em;
}

.project-meta,
    .trim-panel-clip-info,
    .pool-folder-row,
    .scene-block .scene-time {
    opacity: .88;
}

#transcriptBody,
    #avatarPanelBody,
    #stockPanelPane,
    #ownClipsPanel,
    .trim-panel-body,
    .timeline {
    overscroll-behavior: contain;
}

#transcriptBody,
    #avatarPanelBody,
    #stockPanelPane,
    #ownClipsPanel,
    .trim-panel-body {
    scrollbar-gutter: stable;
}

#transcriptBody::-webkit-scrollbar-thumb,
    #avatarPanelBody::-webkit-scrollbar-thumb,
    #stockPanelPane::-webkit-scrollbar-thumb,
    #ownClipsPanel::-webkit-scrollbar-thumb,
    .trim-panel-body::-webkit-scrollbar-thumb,
    .timeline::-webkit-scrollbar-thumb {
    background: rgba(126,151,172,.34);
    border-radius: 999px;
    min-height: 28px;
}

.header-btn,
    .tt-btn,
    .control-btn,
    .btn,
    .trim-head-btn,
    .trim-nudge,
    .speaker-method-btn,
    .cand-tab {
    cursor: pointer;
}

.header-btn:disabled,
    .tt-btn:disabled,
    .control-btn:disabled,
    .btn:disabled,
    .trim-head-btn:disabled,
    .trim-nudge:disabled,
    .speaker-method-btn:disabled {
    cursor: not-allowed;
}

button:not(:disabled):hover {
    text-decoration: none;
}

button:not(:disabled):active {
    filter: brightness(.985);
}

.transcript-toolbar,
    .timeline-header,
    .trim-panel-body {
    box-sizing: border-box;
}

#transcriptBody,
    #avatarPanelBody,
    #stockPanelPane,
    #ownClipsPanel {
    background: transparent;
    line-height: var(--eve-lh-body);
    box-sizing: border-box;
}

.cand-search-row,
    .pool-toolbar,
    #ttToolbarBtns,
    .trim-action-bar {
    row-gap: 5px;
}

.scene-block.active::before,
    #renderBtn,
    #trimReopenTab,
    .cand-tab.active {
    text-shadow: none;
}

button[title],
    [role="button"][title] {
    position: relative;
}

button[title]:not(:disabled) {
    cursor: pointer;
}

.pool-card {
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--eve-radius-sm);
    cursor: grab;
    transition: border-color 0.15s;
    min-width: 0;
    overflow: clip;
}

#transcriptBody ::selection {
    background: rgba(212,175,55,.22);
    color: #f2f5f7;
}

#transcriptBody a {
    color: #9eb8ca;
}

#transcriptBody a:hover {
    color: var(--eve-gold-soft);
}

#renderBtn,
    .scene-block.active::before,
    .cand-tab.active,
    #trimReopenTab {
    --eve-current-accent: var(--eve-gold);
}

.header-btn:not(#renderBtn):not(.active),
    .tt-btn:not(.active):not(.on),
    .control-btn:not(.active):not(.on),
    .panel-guide,
    .pool-toolbar,
    .cand-search-row {
    text-shadow: none;
}

.timeline {
    display: flex;
    align-items: stretch;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    border: 0;
    box-shadow: none;
    min-height: 62px;
    padding: 4px;
    background: #050910;
    border-radius: var(--eve-radius-sm);
    gap: 4px;
    scrollbar-gutter: stable both-edges;
    scroll-behavior: smooth;
}

.scene-block {
    min-width: 80px;
    padding: 8px 6px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: relative;
    border: 1px solid rgba(185,205,220,.08);
    min-height: 50px;
    box-shadow: none;
    border-radius: var(--eve-radius-sm);
    border-width: 1px;
    border-color: rgba(185,205,220,.065);
    background: #112036;
    transition: background-color 120ms ease, border-color 120ms ease;
    outline: 1px solid transparent;
    outline-offset: -1px;
}

.scene-block:focus-visible {
    outline-color: rgba(230,198,122,.68);
}

.scene-block.active {
    z-index: 1;
    outline: none;
    border-color: rgba(185,205,220,.14);
    background: #15263b;
    box-shadow: none;
    color: #e3ebf0;
}

.scene-block.active .scene-time {
    color: #899dad;
}

.timeline:hover .scene-block:not(:hover):not(.active) {
    border-color: rgba(185,205,220,.055);
}

.file-menu,
    .insert-menu,
    .replace-chooser-menu,
    .drop-choice-pop {
    box-shadow: 0 18px 42px rgba(0,0,0,.38),
        0 1px 0 rgba(255,255,255,.025) inset;
    color: #b4c3ce;
}

.file-menu button:focus-visible,
    .insert-menu button:focus-visible,
    .replace-chooser-menu button:focus-visible,
    .drop-choice-pop button:focus-visible {
    outline-offset: -1px;
}

.full-preview-wrapper {
    position: relative;
    margin: 0 auto;
    aspect-ratio: 16/9;
    overflow: hidden;
    flex: 0 0 auto;
    border: 1px solid rgba(185,205,220,.10);
    border-radius: 10px 10px 0 0;
    border-color: rgba(185,205,220,.12);
    box-shadow: 0 16px 42px rgba(0,0,0,.22);
    background: #03070d;
    width: min(100%, max(120px, calc((100cqh - 48px) * 16 / 9)));
}

/* ALFA-TESTING-KYLTTI (2026-09-04): centered badge over the preview area.
   Wide landscape image — object-fit: contain, never stretched. Visible
   whenever the preview is NOT playing (including the empty state); JS
   adds .badge-hidden during playback. pointer-events: none — never
   blocks clicks. z-index 8: above video/image (1-2), below watermark
   (9), caption (10) and the status overlays (11-13). background:
   transparent overrides the generic .full-preview-wrapper img rule in
   case the PNG has alpha. */
#alfaTestingBadge {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 55%;
    max-height: 45%;
    width: auto;
    height: auto;
    object-fit: contain;
    background: transparent;
    pointer-events: none;
    z-index: 8;
}
#alfaTestingBadge.badge-hidden {
    display: none;
}

.full-preview-wrapper video,
    .full-preview-wrapper canvas,
    .full-preview-wrapper img {
    background: #03070d;
}

.full-preview-wrapper video:focus-visible {
    outline: none;
}

.full-preview-controls {
    flex-shrink: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 8px 0 0;
    flex-wrap: wrap;
    row-gap: 6px;
    margin-top: 0;
    background: #08111b;
    border: 1px solid rgba(185,205,220,.10);
    border-top: 0;
    border-radius: 0 0 10px 10px;
    box-shadow: none;
    min-height: 38px;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 9px;
    padding-right: 9px;
    border-top-color: rgba(185,205,220,.07);
}

/* Preview shrink/hide (2026-08-30): the wrapper may now shrink to a ~120px
   thumbnail; below that the preview + controls hide instead of painting over
   the panels, and a small note takes their place.
   2026-09-05 (VILKKU-JUURISYY): toteutus vaihdettu @container-kyselyista
   .preview-too-small-luokkaan — container-type: size pakotti Chromiumin
   restarttaamaan kontin sisalla olevat animaatiot jokaisella
   DOM-mutaatiolla (kellonajan 4 Hz -paivitys -> tekstiefekti valkkyi).
   Luokkaa togglaa ResizeObserver 21_init.js:ssa; kynnykset ennallaan:
   170px height = thumbnail (120x68) + controls (~47px) + slack;
   150px width = thumbnail + horizontal slack. */
#previewHiddenNote {
    display: none;
    margin: auto;
    color: var(--eve-muted);
    font-size: var(--eve-fs-sm);
    line-height: var(--eve-lh-ui);
    text-align: center;
    padding: var(--eve-space-2);
}

#previewColumn.preview-too-small .full-preview-wrapper,
#previewColumn.preview-too-small .full-preview-controls {
    display: none;
}

#previewColumn.preview-too-small #previewHiddenNote {
    display: block;
}

.full-preview-controls input[type="range"] {
    accent-color: #a9bdcb;
}

#candEdgeHandle:hover,
    #trimEdgeHandle:hover,
    #ttEdgeHandle:hover,
    #avatarEdgeHandle:hover {
    box-shadow: 0 0 0 2px rgba(5,10,18,.95),
        0 0 0 3px rgba(212,175,55,.12),
        0 5px 16px rgba(0,0,0,.38);
    background: #15263b;
    color: #f0d985;
    border-color: rgba(212,175,55,.80);
}

:focus:not(:focus-visible) {
    outline: none;
}

.file-menu,
    .insert-menu {
    backdrop-filter: blur(10px);
    padding: 10px;
    min-width: 210px;
    background: #0a1523;
    border: 1px solid rgba(185,205,220,.13);
    border-radius: var(--eve-radius-md);
}

.file-menu .header-btn:hover,
    .insert-menu .header-btn:hover {
    background: rgba(185,205,220,.055);
    color: #e4ebf0;
}

.file-menu .header-btn > .icon,
    .insert-menu .header-btn > .icon {
    width: 12px;
    min-width: 12px;
    opacity: .36;
}

.file-menu .header-btn > .icon::before,
    .insert-menu .header-btn > .icon::before {
    background: #8197a8;
}

.ai-cost-badge,
    #aiCostBadge {
    background: rgba(111,207,151,.045);
    color: #aebbc6;
    border: 1px solid rgba(111,207,151,.16);
    border-radius: var(--eve-radius-md);
    font-weight: 600;
    box-shadow: none;
}

.ai-cost-badge::before,
    #aiCostBadge::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-right: 7px;
    background: var(--eve-ok);
    vertical-align: middle;
}

#renderBtn:hover {
    filter: brightness(1.06);
    background: linear-gradient(180deg, #d6e2e9 0%, #bacbd6 100%);
    border-color: #d6e2e9;
    color: #050b12;
    box-shadow: 0 6px 20px rgba(79,104,124,.22),
        inset 0 1px 0 rgba(255,255,255,.34);
}

.header-btn > .icon::before {
    content: "";
    width: 17px;
    height: 17px;
    display: block;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    background: #aebfcb;
}

.header-btn:hover > .icon::before {
    background: #e0e8ed;
}

.header-btn.active > .icon::before,
    .header-btn[aria-pressed="true"] > .icon::before {
    background: var(--eve-gold-soft);
}

#undoBtn,
    #redoBtn,
    #seekStartBtn,
    #playPauseBtn,
    #fullscreenBtn {
    background: transparent;
    border-color: transparent;
}

#undoBtn:hover,
    #redoBtn:hover,
    #seekStartBtn:hover,
    #playPauseBtn:hover,
    #fullscreenBtn:hover {
    background: rgba(185,205,220,.055);
    border-color: rgba(185,205,220,.10);
}

.insert-menu .header-btn > .icon,
    .insert-menu .header-btn svg,
    .insert-menu .header-btn img,
    .insert-menu .header-btn i {
    display: none;
}

.insert-menu .menu-icon {
    display: none;
}

.insert-menu .header-btn {
    width: 100%;
    font-size: var(--eve-fs-sm);
    line-height: var(--eve-lh-ui);
    min-height: 42px;
    padding: 10px 13px;
    gap: 0;
    justify-content: flex-start;
}

#currentProjectName:hover {
    color: #e3eaee !important;
}

button[onclick*="showNewProjectModal"],
    #newProjectBtn {
    min-height: 36px;
    padding: 8px 14px;
    border-radius: var(--eve-radius-md);
    background: #b9cbd7;
    border: 1px solid #c7d6df;
    color: #18222b;
    font-size: var(--eve-fs-xs);
    font-weight: 650;
    box-shadow: none;
}

button[onclick*="showNewProjectModal"]:hover,
    #newProjectBtn:hover {
    background: #c9d7df;
    border-color: #d4e0e6;
    color: #0d151c;
}

button[onclick*="showNewProjectModal"]:disabled,
    #newProjectBtn:disabled {
    background: #9cafbd;
    color: rgba(16,25,32,.50);
    border-color: #a9bac6;
    opacity: .78;
}


#trimReopenTab {
    /* 2026-09-09 (bugiraportti "scene-nappi ei nay"): display:none POIS —
       TOOLS-GATE-apuri kirjoittaa nakyvana '', jolloin tama CSS voitti ja
       nappi ei nakynyt KOSKAAN ruksista huolimatta. Nakyvyys on nyt
       taysin _trimTabApply / _toolsGate('trim') -portin kasissa. */
    align-self: flex-start;
    writing-mode: vertical-rl;
    text-orientation: upright;
    letter-spacing: 2px;
    padding: 12px 6px;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--eve-radius-sm);
    color: var(--beige);
    cursor: pointer;
    font-size: var(--eve-fs-xs);
    flex-shrink: 0;
    opacity: .92;
    position: relative;
    border-color: rgba(212,175,55,.18);
}

#trimReopenTab::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 10px;
    bottom: 10px;
    width: 2px;
    border-radius: 999px;
    background: rgba(212,175,55,.78);
    opacity: .78;
}

#transcriptReopenTab,
    #avatarReopenTab {
    color: transparent;
}

#newProjectBtn,
    button[onclick*="showNewProjectModal"] {
    border-color: rgba(185,205,220,.20);
}

#newProjectBtn:hover:not(:disabled),
    button[onclick*="showNewProjectModal"]:hover:not(:disabled) {
    background: linear-gradient(180deg,
            rgba(31,49,67,.98) 0%,
            rgba(15,30,45,.99) 100%);
    border-color: rgba(203,220,230,.36);
    color: #f1f5f7;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.075),
        0 7px 18px rgba(0,0,0,.23);
    transform: translateY(-1px);
}

#renderBtn::after {
    background: linear-gradient(
        90deg,
        transparent,
        rgba(230,198,122,.48),
        transparent
    );
}

#renderBtn:hover:not(:disabled) {
    background: linear-gradient(180deg,
            rgba(35,48,57,.99) 0%,
            rgba(18,29,39,.99) 100%);
    border-color: rgba(230,198,122,.66);
    color: #f5e8bd;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.07),
        0 8px 20px rgba(0,0,0,.24),
        0 0 16px rgba(212,175,55,.055);
    transform: translateY(-1px);
}

#newProjectBtn > .icon::before,
    button[onclick*="showNewProjectModal"] > .icon::before {
    background: #afc2ce;
}

#newProjectBtn:focus-visible,
    button[onclick*="showNewProjectModal"]:focus-visible {
    outline: 2px solid rgba(185,205,220,.52);
    outline-offset: 2px;
}

#renderBtn:focus-visible {
    outline: 2px solid rgba(230,198,122,.68);
    outline-offset: 2px;
}

#newProjectBtn,
    button[onclick*="showNewProjectModal"],
    #renderBtn {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    transition: background-color 140ms ease,
        border-color 140ms ease,
        box-shadow 140ms ease,
        transform 140ms ease;
    min-height: 40px;
    padding: 0 18px;
    border-radius: var(--eve-radius-lg);
    background: linear-gradient(180deg,
            rgba(27,43,59,.98) 0%,
            rgba(13,27,41,.99) 100%);
    border: 1px solid rgba(190,211,224,.27);
    color: #e6eef3;
    font-size: var(--eve-fs-sm);
    font-weight: 650;
    letter-spacing: .01em;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.065),
        inset 0 -1px 0 rgba(0,0,0,.18),
        0 5px 14px rgba(0,0,0,.18);
    text-shadow: none;
}

#newProjectBtn::after,
    button[onclick*="showNewProjectModal"]::after,
    #renderBtn::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 8px;
    right: 8px;
    top: 0;
    height: 1px;
    pointer-events: none;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(225,237,244,.28),
        transparent
    );
}

#newProjectBtn > .icon::before,
    button[onclick*="showNewProjectModal"] > .icon::before,
    #renderBtn > .icon::before {
    background: #b9cbd6;
}

#newProjectBtn:hover:not(:disabled),
    button[onclick*="showNewProjectModal"]:hover:not(:disabled),
    #renderBtn:hover:not(:disabled) {
    background: linear-gradient(180deg,
            rgba(36,55,73,.99) 0%,
            rgba(17,34,50,.99) 100%);
    border-color: rgba(207,223,233,.42);
    color: #f3f7f9;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.085),
        0 7px 18px rgba(0,0,0,.23);
    transform: translateY(-1px);
}

#newProjectBtn:active:not(:disabled),
    button[onclick*="showNewProjectModal"]:active:not(:disabled),
    #renderBtn:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: inset 0 2px 5px rgba(0,0,0,.20),
        0 2px 7px rgba(0,0,0,.16);
}

#newProjectBtn:focus-visible,
    button[onclick*="showNewProjectModal"]:focus-visible,
    #renderBtn:focus-visible {
    outline: 2px solid rgba(190,211,224,.62);
    outline-offset: 2px;
}

#newProjectBtn:disabled,
    button[onclick*="showNewProjectModal"]:disabled {
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
    background: linear-gradient(180deg,
            rgba(22,35,48,.82) 0%,
            rgba(12,24,36,.84) 100%);
    border-color: rgba(185,205,220,.12);
    color: rgba(190,205,215,.40);
    opacity: 1;
}

.file-menu .header-btn,
    .insert-menu .header-btn {
    min-height: 40px;
    padding: 10px 12px;
    border-radius: var(--eve-radius-md);
    background: transparent;
    border-color: transparent;
    color: #aebcc8;
    gap: 10px;
    font-size: var(--eve-fs-sm);
    line-height: var(--eve-lh-ui);
}

#undoBtn .icon,
    #redoBtn .icon,
    #seekStartBtn .icon,
    #undoBtn i,
    #redoBtn i,
    #seekStartBtn i,
    #undoBtn svg,
    #redoBtn svg,
    #seekStartBtn svg {
    display: none;
}

#undoBtn,
    #redoBtn,
    #seekStartBtn {
    position: relative;
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;
    padding: 0;
    border-radius: 50%;
    background: rgba(18,32,47,.98);
    border: 1px solid rgba(185,205,220,.18);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05),
        0 3px 10px rgba(0,0,0,.18);
}

#undoBtn:hover,
    #redoBtn:hover,
    #seekStartBtn:hover {
    background: rgba(28,45,63,.98);
    border-color: rgba(190,211,224,.34);
}

#undoBtn::before,
    #redoBtn::before,
    #seekStartBtn::before {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 18px;
    height: 18px;
    background: #c7d6df;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
    mask-size: contain;
    -webkit-mask-size: contain;
}

#undoBtn::before {
    mask-image: url("icons/undo.svg");
    -webkit-mask-image: url("icons/undo.svg");
}

#redoBtn::before {
    mask-image: url("icons/redo.svg");
    -webkit-mask-image: url("icons/redo.svg");
}

#undoBtn:hover::before,
    #redoBtn:hover::before,
    #seekStartBtn:hover::before {
    background: #eef5f8;
}

#undoBtn:active,
    #redoBtn:active,
    #seekStartBtn:active {
    transform: translateY(1px);
}

#undoBtn:focus-visible,
    #redoBtn:focus-visible,
    #seekStartBtn:focus-visible {
    outline: 2px solid rgba(185,205,220,.55);
    outline-offset: 2px;
}

.header-btn > .icon,
    .eve-icon-slot {
    width: var(--eve-icon-size-header);
    height: var(--eve-icon-size-header);
    min-width: var(--eve-icon-size-header);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0 !important;
    color: transparent;
    position: relative;
}

.header-btn > .icon::before,
    .eve-icon-slot::before {
    content: "";
    width: 100%;
    height: 100%;
    display: block;
    background: var(--eve-icon-moonlight);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

button[onclick*="showNewProjectModal"] > .icon::before {
    -webkit-mask-image: url("icons/new-project.svg?v=20260903");
    mask-image: url("icons/new-project.svg?v=20260903");
}

button[onclick*="showOldProjects"] > .icon::before {
    -webkit-mask-image: url("icons/old-projects.svg?v=20260903");
    mask-image: url("icons/old-projects.svg?v=20260903");
}

#fileBtn > .icon::before {
    -webkit-mask-image: url("icons/file.svg");
    mask-image: url("icons/file.svg");
}

button[onclick*="toggleInsertMenu"] > .icon::before {
    -webkit-mask-image: url("icons/insert.svg");
    mask-image: url("icons/insert.svg");
}

button[onclick*="help.html"] > .icon::before {
    -webkit-mask-image: url("icons/guide.svg");
    mask-image: url("icons/guide.svg");
}

button[onclick*="openContactModal"] > .icon::before {
    -webkit-mask-image: url("icons/contact.svg");
    mask-image: url("icons/contact.svg");
}

#renderBtn > .icon::before {
    background: #e1c66f;
    -webkit-mask-image: url("icons/export.svg");
    mask-image: url("icons/export.svg");
}

#signInBtn > .icon::before {
    -webkit-mask-image: url("icons/signin.svg");
    mask-image: url("icons/signin.svg");
}

#logoutBtn > .icon::before {
    transform: rotate(180deg);
    -webkit-mask-image: url("icons/signout.svg");
    mask-image: url("icons/signout.svg");
}

#undoBtn,
    #redoBtn,
    #logoutBtn {
    width: 42px;
    height: 42px;
    min-width: 42px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#undoBtn .icon,
    #redoBtn .icon,
    #logoutBtn .icon {
    width: 24px;
    height: 24px;
    min-width: 24px;
}

/* 2026-09-01 (tuplaikonien pysyva poisto, kayttajan palaute): undo/redo
   saavat ikoninsa napin omasta ::before-maskijarjestelmasta (yllaa) —
   .icon-spanin duplikaattimaski poistettu ja itse span piilotettu
   (sen vanha ↶/↷-emoji poistuu siivouksessa). logoutBtn jatkaa
   .icon::before-jarjestelmallaan (silla EI ole ::before-maskia). */
#undoBtn > .icon,
    #redoBtn > .icon {
    display: none;
}

.insert-menu .header-btn > .icon,
    .file-menu .header-btn > .icon {
    opacity: .96;
    display: none;
}


/* Icon trial (2026-08-30): image icons in BOTH edge stacks. The old SVG mask
   ::before rules for these tabs were REMOVED above (image trial) — this guard
   (specificity 2,0,2, beats the generic button::before) is the final word so
   no ::before box can render on top of the <img>. Revert = delete this block
   and restore the mask rules from git/backup. */
#reopenTabStack button#transcriptReopenTab::before,
#reopenTabStack button#avatarReopenTab::before,
#reopenTabStack button#trimReopenTab::before,
#reopenTabStack button#toolsReopenTab::before,
#candTabStack button#candidatesReopenTab::before,
#candTabStack button#autoclipReopenTab::before,
#candTabStack button#musicReopenTab::before,
#candTabStack button#eveTIcon::before {
    content: none;
}

#reopenTabStack button img,
#candTabStack button img {
    width: 44px;
    height: 44px;
    border-radius: var(--eve-radius-sm);
    display: block;
    margin: auto;
}

#seekStartBtn,
    #playPauseBtn,
    #fullscreenBtn {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    font-size: 0 !important;
    color: transparent;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#seekStartBtn::before,
    #playPauseBtn::before,
    #fullscreenBtn::before {
    content: "";
    width: 24px;
    height: 24px;
    display: block;
    background: var(--eve-icon-moonlight);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

#seekStartBtn::before {
    background: linear-gradient(90deg, currentColor 0 2px, transparent 2px 100%),
        linear-gradient(135deg, transparent 0 42%, currentColor 42% 58%, transparent 58% 100%),
        linear-gradient(225deg, transparent 0 42%, currentColor 42% 58%, transparent 58% 100%);
    color: var(--eve-icon-color);
    width: 20px;
    height: 20px;
    -webkit-mask-image: url("icons/seek-start.svg");
    mask-image: url("icons/seek-start.svg");
}

#fullscreenBtn::before {
    -webkit-mask-image: url("icons/fullscreen.svg");
    mask-image: url("icons/fullscreen.svg");
}

#playPauseBtn {
    font-size: var(--eve-fs-display);
    color: var(--eve-icon-moonlight);
    font-family: "Segoe UI Symbol",sans-serif;
}

#playPauseBtn::before {
    -webkit-mask-image: url("icons/play.svg");
    mask-image: url("icons/play.svg");
}

/* 2026-09-03 (pyyntosetti 3): play-nappi oli taysin nakymaton — tekstiglyyfi
   on font-size:0 !important -säännön alla ja ::before oli display:none.
   Maskikuvake naytetaan nyt; toiston aikana JS laittaa .playing-luokan
   (16_preview.js/11_scenes.js/02_core_state.js) ja kuvake vaihtuu pauseen. */
#playPauseBtn.playing::before {
    -webkit-mask-image: url("icons/pause.svg");
    mask-image: url("icons/pause.svg");
}

#ttToolbarBtns .tt-btn::before {
    content: "";
    position: absolute;
    left: 7px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 30px;
    background: #09131f;
    z-index: 1;
    pointer-events: none;
}

#ttToolbarBtns .tt-btn::after {
    content: "";
    position: absolute;
    left: 9px;
    top: 50%;
    transform: translateY(-50%);
    width: 23px;
    height: 23px;
    background: var(--eve-icon-muted);
    z-index: 2;
    pointer-events: none;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

#ttDeleteBtn::after {
    -webkit-mask-image: url("icons/delete.svg");
    mask-image: url("icons/delete.svg");
}

#ttMuteBtn::after {
    -webkit-mask-image: url("icons/mute.svg");
    mask-image: url("icons/mute.svg");
}

#ttCutBtn::after {
    -webkit-mask-image: url("icons/cut.svg");
    mask-image: url("icons/cut.svg");
}

#ttCopyBtn::after {
    -webkit-mask-image: url("icons/copy.svg");
    mask-image: url("icons/copy.svg");
}

#ttPasteBtn::after {
    -webkit-mask-image: url("icons/paste.svg");
    mask-image: url("icons/paste.svg");
}

#ttSpellBtn::after {
    -webkit-mask-image: url("icons/spell.svg");
    mask-image: url("icons/spell.svg");
}

#ttFindBtn::after {
    -webkit-mask-image: url("icons/find-replace.svg");
    mask-image: url("icons/find-replace.svg");
}

#ttSplitBtn::after {
    -webkit-mask-image: url("icons/split.svg");
    mask-image: url("icons/split.svg");
}

#ttDlSrtBtn::after,
    #ttDlTxtBtn::after {
    -webkit-mask-image: url("icons/download.svg");
    mask-image: url("icons/download.svg");
}

#ttUndoBtn,
    #ttRedoBtn,
    #ttHelpBtn {
    width: 40px;
    height: 40px;
    min-width: 40px;
    padding: 0;
    font-size: 0 !important;
    color: transparent;
    position: relative;
}

#ttUndoBtn::before,
    #ttRedoBtn::before,
    #ttHelpBtn::before {
    content: "";
    position: absolute;
    inset: 8px;
    background: var(--eve-icon-muted);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

#ttUndoBtn::before {
    -webkit-mask-image: url("icons/undo.svg");
    mask-image: url("icons/undo.svg");
}

#ttRedoBtn::before {
    -webkit-mask-image: url("icons/redo.svg");
    mask-image: url("icons/redo.svg");
}

#ttHelpBtn::before {
    -webkit-mask-image: url("icons/help.svg");
    mask-image: url("icons/help.svg");
}

/* 2026-09-02: #ttCollapseBtn icon rules removed with the button. */

#speakerHelpBtn {
    width: 40px;
    height: 40px;
    min-width: 40px;
    padding: 0;
    font-size: 0 !important;
    color: transparent;
    position: relative;
}

#speakerHelpBtn::before {
    content: "";
    position: absolute;
    inset: 8px;
    background: var(--eve-icon-muted);
    -webkit-mask: url("icons/help.svg") center/contain no-repeat;
    mask: url("icons/help.svg") center/contain no-repeat;
}

.cand-search-row button[onclick*="doManualSearch"] {
    width: 42px;
    height: 42px;
    min-width: 42px;
    padding: 0;
    font-size: 0 !important;
    color: transparent;
    position: relative;
}

.cand-search-row button[onclick*="doManualSearch"]::before {
    content: "";
    position: absolute;
    inset: 9px;
    background: var(--eve-icon-moonlight);
    -webkit-mask: url("icons/search.svg") center/contain no-repeat;
    mask: url("icons/search.svg") center/contain no-repeat;
}

.pool-toolbar button {
    min-height: 40px;
    font-size: var(--eve-fs-xs);
    position: relative;
}

.pool-toolbar button[onclick*="poolUploadFile"] {
    padding-left: 40px;
}

.pool-toolbar button[onclick*="poolUploadFile"]::before {
    content: "";
    position: absolute;
    left: 7px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 30px;
    background: #09131f;
    z-index: 1;
}

.pool-toolbar button[onclick*="poolUploadFile"]::after {
    content: "";
    position: absolute;
    left: 9px;
    top: 50%;
    transform: translateY(-50%);
    width: 23px;
    height: 23px;
    background: var(--eve-icon-muted);
    z-index: 2;
    -webkit-mask: url("icons/upload.svg") center/contain no-repeat;
    mask: url("icons/upload.svg") center/contain no-repeat;
}

.pool-toolbar button[onclick*="createPoolFolder"] {
    width: 42px;
    height: 42px;
    min-width: 42px;
    padding: 0;
    font-size: 0 !important;
    color: transparent;
}

.pool-toolbar button[onclick*="createPoolFolder"]::before {
    content: "";
    display: block;
    width: 24px;
    height: 24px;
    margin: auto;
    background: var(--eve-icon-muted);
    -webkit-mask: url("icons/folder-add.svg") center/contain no-repeat;
    mask: url("icons/folder-add.svg") center/contain no-repeat;
}

#analyzeSplitBtn,
    #buildSuggBtn,
    #buildRunBtn,
    #splitRunBtn {
    border-radius: var(--eve-radius-md);
    min-height: 44px;
    padding-left: 45px;
    font-size: var(--eve-fs-sm);
    position: relative;
}

#analyzeSplitBtn::before,
    #buildSuggBtn::before,
    #buildRunBtn::before,
    #splitRunBtn::before {
    content: "";
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 32px;
    background: #09131f;
    z-index: 1;
}

#analyzeSplitBtn::after,
    #buildSuggBtn::after,
    #buildRunBtn::after,
    #splitRunBtn::after {
    content: "";
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    background: var(--eve-icon-muted);
    z-index: 2;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

#analyzeSplitBtn::after {
    -webkit-mask-image: url("icons/analyze.svg");
    mask-image: url("icons/analyze.svg");
}

#buildSuggBtn::after,
    #buildRunBtn::after {
    -webkit-mask-image: url("icons/build.svg");
    mask-image: url("icons/build.svg");
}

#splitRunBtn::after {
    -webkit-mask-image: url("icons/play.svg");
    mask-image: url("icons/play.svg");
}

#trimFaceOnBtn {
    min-height: 38px;
    padding-left: 38px;
    position: relative;
}

#trimFaceOnBtn::before {
    content: "";
    position: absolute;
    left: 8px;
    width: 22px;
    height: 22px;
    background: var(--eve-icon-muted);
    -webkit-mask: url("icons/eye.svg") center/contain no-repeat;
    mask: url("icons/eye.svg") center/contain no-repeat;
}

.trim-panel-x {
    position: absolute;
    z-index: 6;
    top: 5px;
    right: 8px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid transparent;
    width: 40px;
    height: 40px;
    min-width: 40px;
    padding: 0;
    font-size: 0 !important;
    color: transparent;
}

.trim-panel-x::before {
    content: "";
    display: block;
    width: 22px;
    height: 22px;
    margin: auto;
    background: var(--eve-icon-muted);
    -webkit-mask: url("icons/close.svg") center/contain no-repeat;
    mask: url("icons/close.svg") center/contain no-repeat;
}

#candEdgeHandle,
    #trimEdgeHandle,
    #ttEdgeHandle,
    #avatarEdgeHandle {
    line-height: 24px;
    font-weight: 700;
    visibility: visible;
    background: #0d1a29;
    box-shadow: 0 0 0 2px rgba(5,10,18,.92),
        0 5px 15px rgba(0,0,0,.36);
    z-index: 60;
    width: 30px;
    height: 30px;
    min-width: 30px;
    min-height: 30px;
    font-size: var(--eve-fs-xl);
    color: #d6e2e9;
    opacity: 1;
    border: 2px solid rgba(201,216,225,.58);
}

.header-btn,
    .control-btn,
    .tt-btn {
    min-height: 40px;
}

.eve-action-icon,
    .eve-panel-icon,
    .eve-icon-action::before,
    .speaker-method-btn.eve-i-avatar::before,
    .speaker-method-btn.eve-i-bubble::before,
    .cand-tab.eve-i-stock::before,
    .cand-tab.eve-i-clips::before,
    .pool-thumb-fallback::before {
    content: "";
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;
    background: center / contain no-repeat;
    filter: drop-shadow(0 0 6px rgba(212,178,106,.16));
}

.eve-panel-icon {
    margin: 0 0 0 7px;
}

.eve-icon-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}

.eve-icon-action::before {
    margin-right: 0;
}

.speaker-method-btn {
    flex: 1;
    padding: 6px 4px;
    cursor: pointer;
    color: #a7b5c2;
    border-radius: var(--eve-radius-md);
    background: #0f1b2b;
    border: 1px solid rgba(185,205,220,.09);
    min-height: 29px;
    font-size: var(--eve-fs-xs);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.speaker-method-btn::before {
    width: 20px;
    height: 20px;
    flex-basis: 20px;
    margin-right: 6px;
}

.eve-i-avatar::before,
    .eve-action-icon.eve-i-avatar {
    background-image: url("avatar.svg");
}

.eve-i-bubble::before {
    background-image: url("bubble-video.svg");
}

.eve-i-adjust::before,
    .eve-action-icon.eve-i-adjust {
    background-image: url("adjust.svg");
}

.eve-action-icon.eve-i-scenes {
    background-image: url("add-scenes.svg");
}

.eve-i-record::before,
    .eve-action-icon.eve-i-record {
    background-image: url("record.svg");
}

.eve-i-upload::before,
    .eve-action-icon.eve-i-upload {
    background-image: url("upload.svg");
}

.eve-i-replace::before,
    .eve-action-icon.eve-i-replace {
    background-image: url("replace.svg");
}

.eve-i-regenerate::before,
    .eve-action-icon.eve-i-regenerate {
    background-image: url("regenerate.svg");
}

.eve-i-delete::before,
    .eve-action-icon.eve-i-delete {
    background-image: url("delete.svg");
}

.eve-action-icon.eve-i-placement {
    background-image: url("placement.svg");
}

.eve-action-icon.eve-i-transcript {
    background-image: url("transcript.svg");
}

.eve-i-folder::before,
    .eve-action-icon.eve-i-folder,
    .cand-tab.eve-i-clips::before {
    background-image: url("clip-folder.svg");
}

.eve-action-icon.eve-i-clips {
    background-image: url("clip-folder.svg");
}

.eve-i-stock::before,
    .eve-panel-icon.eve-i-stock,
    .cand-tab.eve-i-stock::before {
    background-image: url("clip-stock.svg");
}

.cand-tab.eve-i-stock,
    .cand-tab.eve-i-clips {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cand-tab.eve-i-stock::before,
    .cand-tab.eve-i-clips::before {
    width: 21px;
    height: 21px;
    flex-basis: 21px;
    margin-right: 7px;
}

.pool-thumb-fallback::before {
    width: 40px;
    height: 40px;
    margin: 0;
}

.pool-thumb-fallback.eve-media-audio::before {
    background-image: url("audio-track.svg");
}

.pool-thumb-fallback.eve-media-image::before {
    background-image: url("avatar.svg");
}

.pool-thumb-fallback.eve-media-video::before {
    background-image: url("clip-stock.svg");
}

.speaker-placement {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: var(--eve-fs-xs);
    color: var(--text, #e8e4dc);
    margin-bottom: 4px;
    padding: 9px 10px;
    border: 1px solid rgba(185,205,220,.10);
    border-radius: var(--eve-radius-md);
    background: rgba(8,18,30,.52);
}

.speaker-placement::before {
    content: "";
    width: 22px;
    height: 22px;
    margin-bottom: 3px;
    background: url("placement.svg") center/contain no-repeat;
}

/* Speaker redesign (2026-08-16): status line, method selector, placement radios, clickable align thumbnails */
.speaker-status {
    line-height: var(--eve-lh-ui);
    border-radius: var(--eve-radius-md);
    margin-bottom: 8px;
    background: transparent;
    border: 0;
    padding: 5px 1px 9px;
    color: #8498a9;
    font-size: var(--eve-fs-xs);
    position: relative;
    padding-left: 31px;
}

.speaker-status::before {
    content: "";
    position: absolute;
    left: 7px;
    top: 50%;
    width: 18px;
    height: 18px;
    transform: translateY(-50%);
    background: url("status-ready.svg") center/contain no-repeat;
}

.eve-choice-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.eve-choice-label::before {
    content: "";
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    background: center/contain no-repeat;
}

.eve-choice-label.eve-i-avatar::before {
    background-image: url("avatar.svg");
}

.eve-choice-label.eve-i-bubble::before {
    background-image: url("bubble-video.svg");
}

.transcribe-progress:not(:empty)::before {
    content: "";
    display: inline-block;
    width: 19px;
    height: 19px;
    margin-right: 7px;
    vertical-align: middle;
    background: url("status-working.svg") center/contain no-repeat;
}

button.eve-delete-control::before,
    button.eve-delete-control::after,
    summary.eve-delete-control::before,
    summary.eve-delete-control::after {
    content: none;
    display: none;
}

button.eve-delete-control,
    summary.eve-delete-control {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

button.eve-delete-control > .eve-ui-icon,
    summary.eve-delete-control > .eve-ui-icon {
    width: 23px;
    height: 23px;
    min-width: 23px;
    flex-basis: 23px;
}

.project-action.eve-delete-control,
    .delete-btn.eve-delete-control,
    .modal-x {
    justify-content: center;
}

.tt-fontsize-wrap select:hover,
    .tt-fontsize-wrap select:focus {
    border-color: var(--beige, #d4a574);
    outline: none;
}

#ttUndoBtn::after,
    #ttRedoBtn::after {
    content: none;
    display: none;
}

#ttUndoBtn::before,
    #ttRedoBtn::before {
    background: var(--eve-icon-color);
}

#ttUndoBtn:hover::before,
    #ttRedoBtn:hover::before {
    background: var(--eve-gold-soft);
}

.insert-menu .header-btn,
    .file-menu .header-btn {
    width: 100%;
    justify-content: flex-start;
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    color: #aebcc8;
    min-height: 42px;
    padding: 8px 11px;
    gap: 8px;
    font-size: var(--eve-fs-md);
    line-height: var(--eve-lh-tight);
    border-radius: var(--eve-radius-md);
}

.header-btn {
    border: 1px solid var(--border);
    border-radius: var(--eve-radius-sm);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    background: rgba(15, 25, 40, 0.62);
    color: #aebbc7;
    font-weight: 550;
    letter-spacing: .006em;
    white-space: nowrap;
    gap: 7px;
    min-height: 38px;
    padding: 7px 9px;
    font-size: var(--eve-fs-md);
    line-height: var(--eve-lh-tight);
}

.insert-menu,
    .file-menu {
    border-radius: var(--eve-radius-lg);
    background: #0b1522;
    border-color: rgba(185,205,220,.14);
    box-shadow: 0 16px 38px rgba(0,0,0,.38);
    min-width: 190px;
    gap: 2px;
    padding: 5px;
}

.insert-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--eve-radius-md);
    display: flex;
    flex-direction: column;
    z-index: 100;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    min-width: 220px;
    padding: var(--eve-space-2);
    gap: var(--eve-space-1);
}

.file-submenu {
    left: calc(100% - 2px);
    right: auto;
    min-width: 285px;
}

.panel-header-name,
    .trim-panel-title,
    .avatar-sec-title,
    .cand-panel-title {
    color: var(--eve-moon);
    font-weight: 600;
    font-size: var(--eve-fs-lg);
    line-height: var(--eve-lh-tight);
    letter-spacing: 0.01em;
}

.transcript-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding-top: 6px;
    padding-bottom: 6px;
    min-height: var(--eve-header-h);
    padding: 0 var(--eve-space-3);
    background: var(--eve-night-850);
    border-bottom: 1px solid var(--eve-line);
    gap: var(--eve-space-2);
    opacity: 1;
}

.btn,
    .tt-btn,
    .avatar-btn,
    .trim-head-btn,
    .trim-audio-controls button,
    .cand-search-row button,
    .project-action,
    .modal-x {
    min-height: 40px;
    font-size: var(--eve-fs-md);
    line-height: var(--eve-lh-tight);
}

.btn-small {
    padding: 5px 10px;
    min-height: 36px;
    font-size: var(--eve-fs-sm);
}

select,
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    textarea {
    min-height: 40px;
    font-size: var(--eve-fs-lg);
    line-height: var(--eve-lh-ui);
}

.speaker-help-h,
    .speaker-placement,
    .face-placement-info,
    .trim-audio-state,
    .trim-audio-controls label,
    .trim-audio-controls .atc-vol,
    .trim-audio-controls .atc-note,
    .dl-file-desc,
    .dl-fact,
    .project-meta,
    .npa-sec-hint,
    .npa-meta,
    .npa-cap-line,
    .ac-card-dur,
    .ac-card-score,
    .ac-card-reason,
    .sugg-info,
    .sugg-source,
    .sugg-duration,
    .pool-meta,
    .pool-name,
    #ttSelInfo,
    #ttFindCount,
    #faceBoxLabel,
    #ownVideoBoxLabel {
    font-size: var(--eve-fs-xs);
    line-height: var(--eve-lh-ui);
}

.eve-ui-icon {
    width: 24px;
    height: 24px;
    min-width: 24px;
    flex: 0 0 24px;
    display: inline-block;
    overflow: visible;
    color: currentColor;
    vertical-align: middle;
    pointer-events: none;
}

.header-btn > .eve-ui-icon {
    width: 23px;
    height: 23px;
    flex-basis: 23px;
}

#fileBtn::after,
    #insertDropdown > .header-btn::after {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-left: 2px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
}

.btn > .eve-ui-icon,
    .tt-btn > .eve-ui-icon,
    .avatar-btn > .eve-ui-icon {
    width: 21px;
    height: 21px;
    flex-basis: 21px;
}

.icon,
    .eve-action-icon,
    .eve-panel-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    min-width: 24px;
    font-size: 0 !important;
    background: none;
    background-image: none;
}

.icon::before,
    .icon::after,
    .eve-action-icon::before,
    .eve-action-icon::after,
    .eve-panel-icon::before,
    .eve-panel-icon::after,
    [class*="eve-i-"]::before {
    content: none;
    display: none;
}

:where(button, [role="button"], a, input, select, textarea, summary):focus-visible {
    outline: 3px solid var(--eve-focus);
    outline-offset: 3px;
    box-shadow: 0 0 0 1px var(--eve-night-950);
}

button:not(:disabled):hover,
    .header-btn:not(:disabled):hover {
    border-color: var(--eve-gold);
    color: var(--eve-gold-bright);
}

input[type="checkbox"],
    input[type="radio"] {
    width: 19px;
    height: 19px;
    min-width: 19px;
    accent-color: var(--eve-gold);
}


#renderBtn {
    border-radius: var(--eve-radius-md);
    background: linear-gradient(180deg, #c8d8e3 0%, #aebfca 100%);
    border: 1px solid #c8d8e3;
    text-shadow: none;
    border-color: rgba(212,175,55,.40);
    color: #f0e2b7;
    padding-left: 19px;
    padding-right: 19px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.055),
        inset 0 -1px 0 rgba(0,0,0,.20),
        0 5px 16px rgba(0,0,0,.20),
        0 0 0 1px rgba(212,175,55,.025);
    min-height: 44px;
    padding-inline: 15px;
}

#avatarPanelBody,
    #trimPanelBody {
    line-height: var(--eve-lh-ui);
}

.avatar-section,
    .trim-section {
    margin-bottom: 10px;
}

.speaker-methods,
    .speaker-placement,
    .trim-audio-controls {
    gap: 7px;
}

.modal {
/* Passi 2b: yhdistetty 2 saman selektorin saantoa (lahtojarjestys sailytetty). */
overscroll-behavior: contain;
padding: 20px;
    max-width: 560px;
    width: 90%;
    background: linear-gradient(180deg, rgba(15, 27, 43, .985), rgba(8, 16, 27, .99));
    border: 1px solid rgba(185,205,220,.16);
    border-radius: var(--eve-radius-lg);
    box-shadow: 0 28px 76px rgba(0,0,0,.56),
        inset 0 1px 0 rgba(255,255,255,.018);
    max-height: min(86vh, 900px);
    overflow-y: auto;
    font-size: var(--eve-fs-md);
}

.modal h2 {
    color: var(--beige);
    margin-bottom: 12px;
    font-size: var(--eve-fs-xl);
    line-height: var(--eve-lh-tight);
}

button > .eve-ui-icon + .icon,
    button > .eve-ui-icon + .eve-action-icon,
    button > .eve-ui-icon + .eve-panel-icon {
    display: none;
}

#transcriptBody {
    flex: 1;
    overflow-y: auto;
    outline: none;
    user-select: text;
    scrollbar-width: none;
    -ms-overflow-style: none;
    background: transparent;
    text-wrap: pretty;
    font-size: var(--eve-fs-xl);
    line-height: var(--eve-lh-body);
    letter-spacing: 0.005em;
    padding: 18px 18px 24px;
    color: #e4edf4;
}

#transcriptBody .tw {
    cursor: pointer;
    border-radius: var(--eve-radius-sm);
    padding: 1px 2px;
}

#transcriptBody .tw.muted {
    text-decoration: line-through;
    cursor: default;
    opacity: 0.68;
    color: #c0ccd5;
    text-decoration-thickness: 1px;
    text-decoration-color: rgba(192, 204, 213, 0.72);
}

#ttToolbarBtns {
    display: flex;
    align-items: center;
    align-content: flex-start;
    flex-wrap: wrap;
    gap: 7px;
    padding: 7px 0;
}

#ttToolbarBtns .tt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 7px;
    min-height: 42px;
    min-width: 42px;
    padding: 8px 11px;
    border: 1px solid rgba(150, 174, 193, 0.16);
    border-radius: var(--eve-radius-md);
    background: rgba(10, 23, 37, 0.72);
    color: #b9c9d5;
    font-size: var(--eve-fs-md);
    line-height: var(--eve-lh-tight);
    position: relative;
}

#ttToolbarBtns .tt-btn::before,
    #ttToolbarBtns .tt-btn::after {
    content: none;
    display: none;
}

#ttToolbarBtns .tt-btn > .eve-ui-icon {
    width: 23px;
    height: 23px;
    min-width: 23px;
    flex-basis: 23px;
    color: #b9cad6;
}

#ttToolbarBtns .tt-btn:hover:not(:disabled) {
    background: rgba(25, 44, 62, 0.9);
    border-color: rgba(228, 183, 100, 0.48);
    color: #f4f7f9;
}

#ttToolbarBtns .tt-btn:hover:not(:disabled) > .eve-ui-icon {
    color: var(--eve-gold-bright);
}

#ttToolbarBtns .tt-btn:disabled {
    opacity: 0.48;
    background: rgba(8, 18, 29, 0.5);
}

#ttUndoBtn,
    #ttRedoBtn {
    justify-content: center;
    width: 42px;
    padding: 8px;
    font-size: 0 !important;
    color: #b9cad6;
}

/* ---- Transcript font-size selector (2026-08-27) ------------------------- Small A/AA + size dropdown in the transcript toolbar; matches the tt-btn look so it blends into the existing toolbar. */
.tt-fontsize-wrap {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: 6px;
    color: var(--text-dim, #9eafbe);
    line-height: 1;
    min-height: 36px;
    padding: 4px 7px;
    border: 1px solid rgba(150, 174, 193, 0.14);
    border-radius: var(--eve-radius-md);
    background: rgba(10, 23, 37, 0.65);
}

.tt-fontsize-wrap select {
    background: rgba(15, 25, 40, 0.72);
    color: #9eafbe;
    border: 1px solid var(--border, #31455e);
    border-radius: var(--eve-radius-sm);
    cursor: pointer;
    min-height: 28px;
    font-size: var(--eve-fs-md);
    padding: 3px 7px;
}

#buildSuggBtn,
    #buildRunBtn,
    button.eve-i-build-clips {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-flow: row nowrap;
    gap: 10px;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    min-height: 56px;
    height: auto;
    padding: 10px 12px;
    font-size: var(--eve-fs-md);
    line-height: var(--eve-lh-tight);
    text-align: left;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
}

#buildSuggBtn::before,
    #buildSuggBtn::after,
    #buildRunBtn::before,
    #buildRunBtn::after,
    button.eve-i-build-clips::before,
    button.eve-i-build-clips::after {
    content: none;
    display: none;
}

#buildSuggBtn > .eve-ui-icon,
    #buildRunBtn > .eve-ui-icon,
    button.eve-i-build-clips > .eve-ui-icon {
    width: 27px;
    height: 27px;
    min-width: 27px;
    flex-basis: 27px;
    flex-shrink: 0;
}

/* ================= AI clips (LTX-2.5 clipgen, 2026-08-27) ================= */
.clipgen-form {
    padding: 8px 10px 6px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.clipgen-form textarea {
    width: 100%;
    box-sizing: border-box;
    resize: vertical;
    min-height: 56px;
    background: var(--bg-card, #1a1a1a);
    color: var(--text, #eee);
    border: 1px solid var(--border, #333);
    border-radius: var(--eve-radius-sm);
    padding: 8px;
    font-size: var(--eve-fs-sm);
    font-family: inherit;
}

.clipgen-img-row {
    display: flex;
    gap: 8px;
}

.clipgen-img-slot {
    flex: 1;
    border: 1px dashed var(--border, #333);
    border-radius: var(--eve-radius-sm);
    padding: 6px;
    text-align: center;
}

.clipgen-img-label {
    font-size: var(--eve-fs-xs);
    color: var(--text-dim, #999);
    margin-bottom: 4px;
}

.clipgen-img-preview {
    min-height: 0;
}

.clipgen-img-preview img {
    max-width: 100%;
    max-height: 80px;
    border-radius: var(--eve-radius-sm);
}

.clipgen-img-btns {
    display: flex;
    gap: 4px;
    justify-content: center;
    margin-top: 4px;
}

.clipgen-controls {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

/* 2026-09-05 (user request): when the clip panel is dragged narrow
   (150-480 px), the AI clips controls must WRAP inside the panel instead
   of sliding past its edge — every child may shrink, the slider gives
   way first, and the estimate text breaks instead of pushing Generate
   out of view. */
.clipgen-controls > * {
    min-width: 0;
}

.clipgen-ctl {
    display: flex;
    gap: 6px;
    align-items: center;
    font-size: var(--eve-fs-xs);
    color: var(--text-dim, #999);
    flex-wrap: wrap;
}

.clipgen-ctl input[type="range"] {
    width: 90px;
    flex: 0 1 90px;
    min-width: 48px;
}

.clipgen-estimate {
    flex: 1 1 auto;
    min-width: 60px;
    overflow-wrap: anywhere;
}

.clipgen-ctl select {
    background: var(--bg-card, #1a1a1a);
    color: var(--text, #eee);
    border: 1px solid var(--border, #333);
    border-radius: var(--eve-radius-sm);
    font-size: var(--eve-fs-xs);
}

.clipgen-audio {
    gap: 4px;
}

.clipgen-estimate {
    font-size: var(--eve-fs-xs);
    color: var(--text-dim, #999);
    min-height: 1em;
    text-align: right;
}

.clipgen-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 4px 10px 10px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.clipgen-list::-webkit-scrollbar {
    display: none;
}

.clipgen-card {
    position: relative;
    border: 1px solid var(--border, #333);
    border-radius: var(--eve-radius-md);
    overflow: hidden;
    cursor: pointer;
    background: var(--bg-card, #1a1a1a);
    flex-shrink: 0;
}

.clipgen-card:hover {
    border-color: var(--beige, #d8c8a8);
}

.clipgen-thumb {
    width: 100%;
    display: block;
    background: #000;
    aspect-ratio: 16/9;
    object-fit: cover;
}

.clipgen-meta {
    position: absolute;
    top: 6px;
    right: 6px;
    font-size: var(--eve-fs-xs);
    background: rgba(0,0,0,0.65);
    color: #eee;
    padding: 2px 6px;
    border-radius: var(--eve-radius-sm);
}

.clipgen-prompt {
    padding: 6px 8px;
    font-size: var(--eve-fs-xs);
    color: var(--text-dim, #999);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.clipgen-card-actions {
    display: flex;
    gap: 6px;
    padding: 0 8px 8px;
    justify-content: flex-end;
}

.clipgen-generating,
    .clipgen-failed {
    cursor: default;
    padding: 10px;
}

.clipgen-status {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--eve-fs-sm);
    color: var(--text, #eee);
}

.clipgen-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid var(--border, #333);
    border-top-color: var(--beige, #d8c8a8);
    border-radius: 50%;
    animation: clipgen-spin 0.9s linear infinite;
    flex-shrink: 0;
}

.clipgen-empty {
    padding: 14px 10px;
    font-size: var(--eve-fs-xs);
    color: var(--text-dim, #999);
    text-align: center;
}

/* ============================================================ NP-LAUNCHER (2026-08-29) — night-coast "new project" launcher + files popup. Ported from the approved dummy design with .npd- prefixes. Background: /static/newproject/eve-night-coast.jpg ============================================================ */
#npLauncher {
    --npd-night-0: var(--eve-night-950);
    --npd-night-1: #081321;
    --npd-gold: #d3ac68;
    --npd-gold-light: #ecd09b;
    position: fixed;
    inset: 0;
    z-index: 950;
    overflow: hidden;
    background: linear-gradient(rgba(2,7,14,.10), rgba(2,7,14,.18)),
      url("/static/newproject/eve-night-coast.jpg") center center / cover no-repeat,
      var(--npd-night-0);
    display: grid;
    place-items: center;
    isolation: isolate;
    color: #fff;
    font-family: Inter, "Segoe UI", system-ui, sans-serif;
}

#npLauncher.hidden {
    display: none;
}

#npLauncher::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 48%, rgba(4,10,18,.08) 0 32%, rgba(2,6,12,.27) 70%, rgba(2,6,12,.48) 100%);
    pointer-events: none;
    z-index: -1;
}

.npd-outer-ring {
    position: absolute;
    inset: 10%;
    border-radius: 50%;
    border: 2px solid rgba(214,177,111,.70);
    background: transparent;
    box-shadow: inset 0 0 0 12px rgba(7,18,31,.44),
      inset 0 0 0 14px rgba(236,208,155,.11),
      inset 0 0 0 30px rgba(7,17,29,.27),
      0 0 0 1px rgba(6,12,20,.92),
      0 12px 32px rgba(0,0,0,.32);
}

.npd-outer-ring::before {
    content: "";
    position: absolute;
    inset: 7%;
    border-radius: 50%;
    border: 1px solid rgba(214,177,111,.45);
    box-shadow: 0 0 20px rgba(211,172,104,.06);
}

.npd-drop-zone {
    --npd-horizon-y: 58%;
    position: absolute;
    width: 50%;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 2px dashed rgba(225,194,135,.72);
    background: rgba(3,10,18,.08);
    box-shadow: inset 0 0 0 9px rgba(4,12,22,.18),
      inset 0 0 26px rgba(0,0,0,.27),
      0 3px 0 rgba(236,208,155,.10),
      0 18px 36px rgba(0,0,0,.20);
    cursor: pointer;
    transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
    z-index: 4;
}

.npd-drop-zone:hover,
    .npd-drop-zone.drag-over,
    .npd-drop-zone:focus-visible {
    transform: scale(1.015);
    border-color: rgba(242,211,151,.98);
    background: rgba(15,31,47,.20);
    box-shadow: inset 0 0 0 9px rgba(4,12,22,.20),
      inset 0 0 26px rgba(0,0,0,.25),
      0 0 0 2px rgba(211,172,104,.10),
      0 18px 38px rgba(0,0,0,.22);
    outline: none;
}

.npd-cloud {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.npd-cloud svg {
    --npd-upload-icon-size: 27%;
    position: absolute;
    width: var(--npd-upload-icon-size);
    height: auto;
    left: 50%;
    top: calc(var(--npd-horizon-y) - 37.375% - 3px);
    transform: translateX(-50%);
    overflow: visible;
}

.npd-cloud svg path {
    fill: none;
}

.npd-file-status {
    position: absolute;
    left: 50%;
    top: 68%;
    transform: translateX(-50%);
    width: 75%;
    text-align: center;
    pointer-events: none;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: clamp(14px, calc(var(--npd-size) * .020), 17px);
    line-height: var(--eve-lh-tight);
    letter-spacing: .01em;
    color: rgba(255,255,255,.96);
    text-shadow: 0 2px 3px rgba(0,0,0,.98),
      0 5px 14px rgba(0,0,0,.90),
      0 0 22px rgba(0,0,0,.72);
    white-space: normal;
}

/* 2026-09-09 (käyttäjän vaatimus): jo stagatut tiedostot näkyvät
   listana YMPYRÄN KESKELLÄ — kuvake + tiedostonimi + pääte per rivi,
   keskitettynä sarakkeena. Pilvi-ikoni himmenee listan ollessa
   näkyvissä, jotta rivit erottuvat. */
.npd-staged-list {
    position: absolute;
    left: 50%;
    top: 47%;
    transform: translate(-50%, -50%);
    width: 76%;
    max-height: 42%;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    pointer-events: none;
    z-index: 2;
}

.npd-staged-list:empty {
    display: none;
}

.npd-staged-row {
    display: flex;
    align-items: center;
    gap: 7px;
    max-width: 100%;
    padding: 3px 11px;
    border-radius: 999px;
    background: rgba(7,18,31,.72);
    border: 1px solid rgba(225,194,135,.34);
    box-shadow: 0 2px 8px rgba(0,0,0,.35);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: clamp(10px, calc(var(--npd-size) * .015), 13px);
    line-height: var(--eve-lh-tight);
    color: rgba(255,255,255,.95);
}

.npd-staged-icon {
    flex: none;
    font-size: 1.05em;
}

.npd-staged-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.npd-staged-ext {
    flex: none;
    font-size: .82em;
    font-weight: 700;
    letter-spacing: .06em;
    color: rgba(236,208,155,.92);
}

.npd-drop-zone.has-staged .npd-cloud svg {
    opacity: .16;
}

.npd-orbit-button {
    position: absolute;
    width: 29%;
    height: 29%;
    aspect-ratio: 1 / 1;
    flex: 0 0 auto;
    border: 1px solid rgba(229,199,143,.72);
    border-radius: 50%;
    background: linear-gradient(180deg, transparent 0 57%, rgba(4,12,22,.22) 72%, rgba(4,12,22,.48) 100%),
      radial-gradient(circle at 48% 22%, rgba(35,63,91,.70) 0%, rgba(11,27,45,.94) 47%, rgba(5,14,25,.99) 100%);
    color: var(--npd-gold-light);
    box-shadow: inset 0 0 0 5px rgba(8,18,31,.90),
      inset 0 0 0 6px rgba(220,182,112,.22),
      0 12px 28px rgba(0,0,0,.42);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    overflow: hidden;
    transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
    z-index: 6;
}

.npd-orbit-button::before {
    content: "";
    position: absolute;
    inset: 2.2%;
    border-radius: 50%;
    border: 1px solid rgba(241,213,160,.28);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
    pointer-events: none;
    z-index: 4;
}

.npd-orbit-button:hover,
    .npd-orbit-button:focus-visible {
    transform: translateY(-2px) scale(1.025);
    border-color: rgba(244,217,164,.94);
    box-shadow: inset 0 0 0 5px rgba(8,18,31,.90),
      inset 0 0 0 6px rgba(230,195,127,.31),
      0 15px 32px rgba(0,0,0,.46),
      0 0 20px rgba(211,172,104,.08);
    outline: none;
}

.npd-orbit-button:active {
    transform: scale(.995);
}

.npd-orbit-art {
    position: absolute;
    z-index: 1;
    top: 4.5%;
    left: 15%;
    width: 70%;
    height: 55%;
    object-fit: contain;
    display: block;
    pointer-events: none;
    filter: drop-shadow(0 8px 12px rgba(0,0,0,.28))
      saturate(.92)
      brightness(.97);
    transition: transform .16s ease, filter .16s ease;
}

.npd-orbit-button:hover .npd-orbit-art,
    .npd-orbit-button:focus-visible .npd-orbit-art {
    transform: translateY(-2px) scale(1.025);
    filter: drop-shadow(0 10px 14px rgba(0,0,0,.34))
      saturate(.98)
      brightness(1.025);
}

.npd-orbit-label {
    position: absolute;
    z-index: 3;
    left: 18%;
    right: 18%;
    bottom: 13.5%;
    width: 64%;
    min-height: 23%;
    max-height: 29%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: normal;
    overflow: visible;
    padding: 0;
    margin: 0 auto;
    background: none;
    border: 0;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: clamp(15px, calc(var(--npd-size) * .0205), 19px);
    font-weight: 500;
    line-height: var(--eve-lh-tight);
    letter-spacing: .002em;
    color: #efd39a;
    text-shadow: 0 2px 3px rgba(0,0,0,.96),
      0 5px 13px rgba(0,0,0,.72);
    hyphens: auto;
}

.npd-orbit-label.lines-1,
    .npd-orbit-label.lines-2,
    .npd-orbit-label.lines-3 {
    line-height: var(--eve-lh-tight);
}

.npd-orbit-label .npd-label-line {
    display: block;
    width: 100%;
    white-space: nowrap;
    text-align: center;
    margin: 0;
    padding: 0;
}

.npd-orbit-label .npd-label-line + .npd-label-line {
    margin-top: .10em;
}

.npd-orbit-label.fit-small {
    font-size: clamp(12px, calc(var(--npd-size) * .018), 16px);
}

.npd-btn-files {
    left: 35.5%;
    top: 0.2%;
}

.npd-btn-ai {
    left: 2.5%;
    bottom: 5.2%;
}

.npd-btn-record {
    right: 2.5%;
    bottom: 5.2%;
}

.npd-btn-files::after {
    content: "";
    position: absolute;
    z-index: 10;
    width: 12px;
    height: 12px;
    min-width: 12px;
    min-height: 12px;
    border-radius: 50%;
    left: 50%;
    top: auto;
    bottom: -7px;
    transform: translateX(-50%);
    background: radial-gradient(circle at 35% 28%, #fff4d6 0 10%, #e7bd72 35%, #9d713c 72%, #6e4b28 100%);
    border: 1px solid rgba(247,219,163,.90);
    box-shadow: 0 0 11px rgba(211,172,104,.34);
    pointer-events: none;
}

.npd-close {
    position: fixed;
    top: 28px;
    right: 30px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid rgba(201,215,225,.26);
    background: rgba(5,13,23,.58);
    color: #d8e3ea;
    font-size: var(--eve-fs-display);
    line-height: 1;
    cursor: pointer;
    backdrop-filter: blur(9px);
    z-index: 20;
}

.npd-close:hover {
    border-color: rgba(230,203,149,.60);
    color: #f0d79e;
}

#npdSeaCanvas {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity .45s ease;
}

#npLauncher.npd-awake #npdSeaCanvas {
    opacity: .88;
}

#npdLighthouseHotspot {
    position: fixed;
    z-index: 12;
    cursor: pointer;
    border: 0;
    padding: 0;
    margin: 0;
    background: transparent;
    border-radius: 48%;
    outline: none;
}

#npdLighthouseHotspot:focus-visible {
    box-shadow: 0 0 0 2px rgba(235,208,151,.62);
}

#npdLighthouseGlow {
    position: fixed;
    z-index: 1;
    pointer-events: none;
    width: 1px;
    height: 1px;
    opacity: 0;
    transition: opacity .32s ease;
}

#npdLighthouseGlow::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 96px;
    height: 96px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(
      circle,
      rgba(255,238,184,.92) 0 3%,
      rgba(240,195,105,.52) 9%,
      rgba(228,174,80,.22) 24%,
      rgba(228,174,80,.06) 45%,
      transparent 70%
    );
    filter: blur(.2px);
}

#npdLighthouseGlow::after {
    content: "";
    position: absolute;
    left: 2px;
    top: -10px;
    width: min(34vw, 520px);
    height: 38px;
    transform-origin: left center;
    transform: rotate(-6deg);
    background: linear-gradient(
      90deg,
      rgba(245,215,152,.20),
      rgba(245,215,152,.07) 38%,
      transparent 100%
    );
    clip-path: polygon(0 44%, 100% 0, 100% 100%, 0 56%);
    filter: blur(5px);
    opacity: .45;
}

#npLauncher.npd-awake #npdLighthouseGlow {
    opacity: 1;
    animation: npdLighthouseBlink 1.35s ease-in-out infinite;
}

.npd-popup-overlay {
    backdrop-filter: blur(3px);
}

.npd-popup {
    --npd-gold: #d3ac68;
    --npd-gold-light: #ecd09b;
    width: min(980px, 94vw);
    max-height: 88vh;
    overflow-y: auto;
    border-radius: var(--eve-radius-lg);
    border: 1px solid rgba(214,177,111,.38);
    background: linear-gradient(180deg, rgba(16,30,46,.96), rgba(6,14,25,.97));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05),
      0 30px 70px rgba(0,0,0,.55);
    padding: 22px 24px 18px;
    color: #e8eef3;
    font-family: Inter, "Segoe UI", system-ui, sans-serif;
}

.npd-popup-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.npd-popup-head h2 {
    margin: 0;
    font-size: var(--eve-fs-xl);
    font-weight: 600;
    color: var(--npd-gold-light);
    letter-spacing: .01em;
}

.npd-close-sm {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid rgba(201,215,225,.22);
    background: rgba(5,13,23,.50);
    color: #d8e3ea;
    font-size: var(--eve-fs-xl);
    line-height: 1;
    cursor: pointer;
}

.npd-close-sm:hover {
    border-color: rgba(230,203,149,.60);
    color: #f0d79e;
}

.npd-drop-area {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px;
    margin-bottom: 16px;
    border: 2px dashed rgba(225,194,135,.55);
    border-radius: var(--eve-radius-lg);
    background: rgba(3,10,18,.28);
    color: rgba(231,222,204,.88);
    font-size: var(--eve-fs-md);
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease;
}

.npd-drop-area:hover,
    .npd-drop-area.drag-over {
    border-color: rgba(242,211,151,.95);
    background: rgba(15,31,47,.34);
}

.npd-drop-cloud {
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
}

.npd-drop-cloud path {
    fill: none;
}

.npd-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 14px;
    margin-bottom: 16px;
}

.npd-cards:empty {
    display: none;
}

.npd-card {
    position: relative;
    border-radius: var(--eve-radius-lg);
    border: 1px solid rgba(201,215,225,.16);
    background: rgba(8,18,31,.72);
    overflow: hidden;
    cursor: grab;
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.npd-card:hover {
    border-color: rgba(230,203,149,.45);
    box-shadow: 0 8px 22px rgba(0,0,0,.35);
}

.npd-card.dragging {
    opacity: .45;
    cursor: grabbing;
}

.npd-card.npd-card-dim {
    opacity: .55;
    cursor: not-allowed;
}

.npd-card.drop-target {
    border-color: rgba(242,211,151,.95);
}

.npd-card-preview {
    position: relative;
    aspect-ratio: 16 / 10;
    background: rgba(2,8,15,.85);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.npd-card-preview video,
    .npd-card-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.npd-card-preview audio {
    width: 92%;
}

.npd-card-icon {
    font-size: var(--eve-fs-display);
    line-height: 1;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,.5));
}

.npd-card-excerpt {
    padding: 10px 12px;
    font-family: ui-monospace, Consolas, monospace;
    font-size: var(--eve-fs-xs);
    line-height: var(--eve-lh-ui);
    color: rgba(200,213,221,.85);
    white-space: pre-wrap;
    word-break: break-word;
    overflow: hidden;
    max-height: 100%;
}

.npd-card-body {
    padding: 9px 11px 11px;
}

.npd-card-name {
    font-size: var(--eve-fs-sm);
    font-weight: 550;
    color: #e8eef3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 3px;
}

.npd-card-meta {
    font-size: var(--eve-fs-xs);
    color: rgba(143,163,177,.95);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.npd-card .npd-card-remove {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid rgba(201,215,225,.30);
    background: rgba(4,10,18,.78);
    color: #d8e3ea;
    font-size: var(--eve-fs-md);
    line-height: 1;
    cursor: pointer;
    z-index: 3;
}

.npd-card-remove:hover {
    border-color: #e09a8a;
    color: #f2b1a1;
}

.npd-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: 3;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: var(--eve-fs-xs);
    font-weight: 650;
    letter-spacing: .04em;
    text-transform: uppercase;
    background: rgba(4,10,18,.80);
    border: 1px solid rgba(230,203,149,.55);
    color: var(--npd-gold-light);
}

.npd-badge.npd-badge-dim {
    border-color: rgba(143,163,177,.40);
    color: rgba(143,163,177,.95);
}

.npd-role-row {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}

.npd-role-btn {
    flex: 1;
    padding: 4px 6px;
    border-radius: var(--eve-radius-md);
    border: 1px solid rgba(201,215,225,.20);
    background: rgba(5,13,23,.55);
    color: rgba(200,213,221,.85);
    font-size: var(--eve-fs-xs);
    font-weight: 600;
    cursor: pointer;
    transition: border-color .14s ease, color .14s ease, background .14s ease;
}

.npd-role-btn:hover {
    border-color: rgba(230,203,149,.55);
    color: #e8eef3;
}

.npd-role-btn.active {
    border-color: rgba(230,203,149,.85);
    background: rgba(211,172,104,.16);
    color: var(--npd-gold-light);
}

.npd-empty {
    padding: 26px 12px;
    text-align: center;
    color: rgba(143,163,177,.85);
    font-size: var(--eve-fs-md);
    border: 1px dashed rgba(201,215,225,.14);
    border-radius: var(--eve-radius-lg);
    margin-bottom: 16px;
}

.npd-script-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

#npScriptHint {
    color: rgba(143,220,160,.95);
}

.npd-link-btn {
    border: 0;
    background: none;
    padding: 0;
    color: var(--npd-gold-light, #ecd09b);
    font-size: var(--eve-fs-sm);
    font-weight: 550;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(211,172,104,.45);
}

.npd-link-btn:hover {
    color: #f4d9a4;
    text-decoration-color: rgba(244,217,164,.8);
}

.npd-settings-row {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 14px;
}

.npd-name-wrap {
    flex: 1 1 240px;
    min-width: 200px;
}

.npd-name-wrap label {
    display: block;
    font-size: var(--eve-fs-xs);
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: rgba(143,163,177,.95);
    margin-bottom: 5px;
}

.npd-name-wrap input {
    width: 100%;
    padding: 9px 12px;
    border-radius: var(--eve-radius-md);
    border: 1px solid rgba(201,215,225,.22);
    background: rgba(3,10,18,.55);
    color: #e8eef3;
    font-size: var(--eve-fs-md);
}

.npd-name-wrap input:focus {
    outline: none;
    border-color: rgba(230,203,149,.65);
    box-shadow: 0 0 0 2px rgba(211,172,104,.12);
}

.npd-autobuild {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--eve-fs-sm);
    color: rgba(231,222,204,.90);
    cursor: pointer;
    padding-bottom: 8px;
}

.npd-autobuild input {
    accent-color: #d3ac68;
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.npd-popup-foot {
    display: flex;
    align-items: center;
    gap: 10px;
    border-top: 1px solid rgba(201,215,225,.10);
    padding-top: 14px;
}

.npd-foot-gap {
    flex: 1;
}

.npd-create-btn {
    padding: 10px 22px;
    border-radius: var(--eve-radius-lg);
    border: 1px solid rgba(247,219,163,.75);
    background: linear-gradient(160deg, #e7c37e, #b98a45);
    color: #1c1206;
    font-size: var(--eve-fs-md);
    font-weight: 650;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(0,0,0,.35);
    transition: filter .14s ease, transform .14s ease;
}

.npd-create-btn:hover {
    filter: brightness(1.07);
    transform: translateY(-1px);
}

.npd-create-btn:disabled {
    opacity: .55;
    cursor: default;
    transform: none;
}

/* ===================================================================== SPECS hiljaisuudet 2026-08-29: silence handling K4 purple transcript chips + detection modal (14_transcript.js) ===================================================================== */
.sil-gap {
    display: inline-block;
    background: rgba(167, 139, 250, 0.16);
    border: 1px solid rgba(167, 139, 250, 0.65);
    color: #c4b5fd;
    border-radius: var(--eve-radius-md);
    padding: 0 6px;
    margin: 0 2px;
    font-size: 0.78em;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.sil-gap:hover {
    background: rgba(167, 139, 250, 0.32);
}

.sil-gap-b {
    border-style: dashed;
}

.sil-gap-c {
    opacity: 0.75;
}

.sil-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10, 10, 16, 0.72);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.sil-modal {
    background: var(--bg-panel, #1b1b26);
    border: 1px solid var(--beige);
    border-radius: var(--eve-radius-lg);
    width: min(640px, calc(100vw - 20px));
    max-height: min(80vh, 100dvh - 20px);
    display: flex;
    flex-direction: column;
    padding: 14px 16px;
    color: var(--text, #e8e4dc);
}

.sil-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--eve-fs-lg);
    font-weight: 600;
    margin-bottom: 10px;
}

.sil-controls {
    margin-bottom: 8px;
}

.sil-slider-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sil-slider-row input[type="range"] {
    flex: 1;
    accent-color: #a78bfa;
}

.sil-slider-end {
    font-size: var(--eve-fs-sm);
    opacity: 0.8;
}

#silSensitivityVal {
    min-width: 2.2em;
    text-align: right;
    color: #c4b5fd;
    font-weight: 600;
}

.sil-slider-label {
    font-size: var(--eve-fs-xs);
    opacity: 0.75;
    margin: 2px 0 8px;
}

.sil-num-row {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.sil-num-row label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--eve-fs-sm);
}

.sil-num-row input {
    width: 64px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--eve-radius-sm);
    color: inherit;
    padding: 3px 6px;
}

.sil-summary {
    font-size: var(--eve-fs-sm);
    color: #c4b5fd;
    margin: 6px 0;
    min-height: 1.2em;
}

.sil-bulk-row {
    display: flex;
    gap: 10px;
    margin-bottom: 8px;
}

.sil-list {
    overflow-y: auto;
    flex: 1;
    min-height: 80px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 6px;
}

.sil-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 4px;
    border-radius: var(--eve-radius-md);
    font-size: var(--eve-fs-md);
}

.sil-row:hover {
    background: rgba(167, 139, 250, 0.08);
}

.sil-row.sil-flash {
    animation: silFlash 1.6s ease-out;
}

.sil-cb {
    accent-color: #a78bfa;
    width: 16px;
    height: 16px;
}

.sil-cb-none {
    opacity: 0.4;
    width: 16px;
    text-align: center;
}

.sil-time {
    flex: 1;
    font-variant-numeric: tabular-nums;
}

.sil-dur {
    opacity: 0.65;
}

.sil-badge {
    border-radius: var(--eve-radius-sm);
    padding: 1px 7px;
    font-size: var(--eve-fs-xs);
    font-weight: 700;
}

.sil-badge-a {
    background: rgba(167, 139, 250, 0.25);
    color: #c4b5fd;
}

.sil-badge-b {
    background: rgba(74, 158, 255, 0.22);
    color: #8fc3ff;
}

.sil-badge-c {
    background: rgba(232, 201, 160, 0.18);
    color: var(--beige-light);
}

.sil-row-btns {
    display: flex;
    gap: 6px;
}

.sil-prev.sil-playing {
    background: rgba(167, 139, 250, 0.4);
    border-color: #a78bfa;
}

.sil-busy {
    padding: 18px;
    text-align: center;
    opacity: 0.75;
}

#captionsGroup {
    display: flex;
    flex-direction: column;
    gap: var(--eve-space-1);
}

#userMenu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--eve-radius-md);
    padding: var(--eve-space-2);
    display: flex;
    flex-direction: column;
    gap: var(--eve-space-1);
    min-width: 220px;
    z-index: 100;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}

.user-menu-row {
    display: flex;
    align-items: center;
    gap: var(--eve-space-2);
    padding: var(--eve-space-1) var(--eve-space-2);
    font-size: var(--eve-fs-sm);
    color: var(--text);
}

/* ==========================================================================
   5. PAGES/VIEWS — start screen, auth, guest states
   ========================================================================== */
/* 2026-08-22: New Project — visual format cards + per-button ? help */
.np-format-row {
    display: flex;
    gap: 10px;
}

.np-format-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    padding: 10px 6px;
    border: 2px solid var(--border);
    border-radius: var(--eve-radius-lg);
    background: var(--bg-card);
    color: var(--text);
    cursor: pointer;
    transition: border-color 0.15s;
}

.np-format-card:hover {
    border-color: rgba(212,165,116,0.55);
}

.np-format-card.selected {
    border-color: var(--beige);
    background: rgba(212,165,116,0.12);
}

.np-format-shape {
    border: 2px solid var(--beige);
    border-radius: var(--eve-radius-sm);
    background: rgba(212,165,116,0.15);
    display: block;
}

.np-shape-land {
    width: 46px;
    height: 26px;
}

.np-shape-port {
    width: 20px;
    height: 35px;
}

.np-format-num {
    font-weight: 700;
    font-size: var(--eve-fs-md);
}

.np-mode-cell {
    position: relative;
    display: flex;
    height: 100%;
}

.np-mode-cell > .btn {
    flex: 1;
}

.np-help-dot {
    position: absolute;
    top: -7px;
    right: -7px;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: var(--bg-panel);
    border: 1px solid var(--beige);
    color: var(--beige);
    font-size: var(--eve-fs-xs);
    font-weight: 700;
    cursor: pointer;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.np-help-dot:hover {
    background: var(--beige);
    color: var(--bg-darker);
}

.np-mode-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 1fr;
    gap: 8px;
    margin-bottom: 12px;
}

.np-mode-grid .btn {
    white-space: normal;
    line-height: var(--eve-lh-tight);
    min-height: 46px;
    height: 100%;
    width: 100%;
    padding: 8px 8px;
    font-size: var(--eve-fs-sm);
}

/* 2026-08-22: four start modes — title + short description inside the button, left-aligned, every cell exactly the same size */
.np-mode-label {
    font-size: var(--eve-fs-sm);
    font-weight: 600;
    color: var(--text);
    margin: 0 0 8px;
}

.np-mode-grid .np-mode-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 4px;
    text-align: left;
    padding: 10px 12px;
}

.np-mode-grid .np-mode-btn b {
    font-size: var(--eve-fs-md);
    font-weight: 700;
}

.np-mode-grid .np-mode-btn span {
    font-size: var(--eve-fs-xs);
    font-weight: 400;
    color: var(--text-dim);
    line-height: var(--eve-lh-ui);
}

.project-start-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
    max-height: 112px;
    overflow-y: auto;
    margin-bottom: 2px;
}

.project-start-list:empty {
    display: none;
}

.project-start-file {
    display: flex;
    align-items: center;
    gap: 7px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--eve-radius-sm);
    padding: 6px 8px;
    font-size: var(--eve-fs-xs);
    color: var(--text);
}

.project-start-file span {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.project-start-file button {
    background: none;
    border: none;
    color: var(--text-dim);
    cursor: pointer;
    padding: 2px 5px;
    border-radius: var(--eve-radius-sm);
}

.project-start-file button:hover {
    background: var(--bg-darker);
    color: var(--text);
}

.project-start-file select {
    background: var(--bg-darker);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--eve-radius-sm);
    font-size: var(--eve-fs-xs);
    padding: 1px 4px;
    cursor: pointer;
}

.project-start-file .psr-fixed {
    font-size: var(--eve-fs-xs);
    color: var(--text-dim);
}

.project-start-file.skipped {
    opacity: 0.6;
}

.auth-gate.auth-modal {
    background: rgba(8, 8, 10, 0.62);
}

.auth-dismiss {
    display: block;
    text-align: center;
    margin-top: 14px;
    font-size: var(--eve-fs-sm);
    color: var(--text-dim, #9a938a);
    text-decoration: underline;
    cursor: pointer;
}

.auth-dismiss:hover {
    color: var(--beige);
}

.auth-sub {
    text-align: center;
    color: var(--text);
    opacity: 0.6;
    margin: 4px 0 20px;
    font-size: var(--eve-fs-md);
}

.auth-card input:focus {
    outline: none;
    border-color: var(--beige);
}

.auth-links {
    display: flex;
    justify-content: space-between;
    margin-top: 14px;
    font-size: var(--eve-fs-sm);
}

.auth-error {
    color: var(--error);
    font-size: var(--eve-fs-sm);
    min-height: 1.1em;
    margin-bottom: 8px;
}

.auth-note {
    color: var(--success);
    font-size: var(--eve-fs-sm);
    min-height: 1.1em;
    margin-bottom: 8px;
}

.auth-hint {
    color: var(--text);
    opacity: 0.65;
    font-size: var(--eve-fs-sm);
    margin: 0 0 12px;
}

/* 2026-08-22: OAuth sign-in (Google / Apple) — shown only for providers the server has configured (env-gated) */
.oauth-row {
    margin-bottom: 4px;
}

.auth-user-chip {
    color: var(--text);
    font-size: 0.8rem;
    font-weight: 700;
    opacity: 0.95;
    width: 34px;
    height: 34px;
    min-height: 34px;
    padding: 0;
    border-radius: 50%;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    flex-shrink: 0;
    align-self: center;
}

/* The uploaded profile picture fills the whole circle */
.auth-user-chip img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

#guestBanner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 8998;
    display: none;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: var(--bg-panel);
    border-bottom: 1px solid var(--border);
    color: var(--text);
    padding: 6px 16px;
    font-size: var(--eve-fs-sm);
}

#guestBanner button {
    background: none;
    border: 1px solid var(--beige);
    color: var(--beige);
    border-radius: var(--eve-radius-sm);
    padding: 3px 10px;
    cursor: pointer;
    font-size: var(--eve-fs-sm);
}

/* 2026-09-08 (OHJEET KOODARILLE, ongelma 2): untranscribed_audio-
   kehoitebanneri. Sama kieli kuin #guestBanner; JS asettaa top-offsetin
   kun muita ylareunan bannereita on nahtavissa (10_projects.js). */
#untranscribedBanner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 8997;
    display: none;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: linear-gradient(90deg, rgba(13, 24, 39, .98), rgba(17, 30, 47, .98));
    border-bottom: 1px solid rgba(228, 183, 100, .35);
    color: var(--eve-moon, #eef5fb);
    padding: 6px 16px;
    font-size: var(--eve-fs-sm);
}

#untranscribedBanner .ub-cta {
    background: none;
    border: 1px solid var(--beige);
    color: var(--beige);
    border-radius: var(--eve-radius-sm);
    padding: 3px 12px;
    cursor: pointer;
    font-size: var(--eve-fs-sm);
}

#untranscribedBanner .ub-cta:hover {
    background: rgba(228, 183, 100, .12);
}

#untranscribedBanner .ub-dismiss {
    background: none;
    border: none;
    color: var(--text-dim);
    cursor: pointer;
    font-size: var(--eve-fs-sm);
    padding: 2px 6px;
}

#untranscribedBanner .ub-dismiss:hover {
    color: var(--eve-moon, #eef5fb);
}

.start-card .start-sub {
    color: var(--text);
    opacity: 0.75;
    margin: 0 0 18px;
    font-size: var(--eve-fs-md);
}

#startScreenPlaceholder {
    display: none;
    align-items: center;
    justify-content: center;
    min-height: 220px;
    border: 1px dashed var(--border);
    border-radius: var(--eve-radius-lg);
    color: var(--text);
    opacity: 0.7;
    font-size: var(--eve-fs-md);
    padding: 20px;
}

.modal,
    .auth-card,
    .drop-choice-pop {
    background: #0e1928;
    border-color: #334961;
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.54);
}

#verifyBanner,
    #guestBanner,
    #usageBanner {
    background: #0d1827;
    border-color: #31455e;
}

#verifyBanner button,
    #guestBanner button,
    #usageBanner button {
    border-color: rgba(212, 175, 55, 0.56);
    color: var(--eve-gold-soft);
}

#startScreen.eve-landing-soft {
    background: linear-gradient(180deg, rgba(18, 31, 48, .02) 0%, rgba(10, 22, 37, .10) 56%, rgba(3, 8, 16, .56) 100%),
        url("eve-landing-bg-4k.webp") center / cover no-repeat,
        #08121f;
}

/* 2026-09-03 (kayttajan pyynto): teemanvalitsin on pelkka
   sivellinkuvake — tekstit pois. Klikkaus avaa pienen valikon, jossa
   kaytetty teema on aktiivisena. */
#startScreen .start-theme-wrap {
    position: fixed;
    top: 24px;
    right: clamp(22px, 4vw, 66px);
    z-index: 2;
}

#startScreen .start-theme-toggle {
    width: 40px;
    height: 40px;
    min-height: 40px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(229,237,242,.84);
    background: rgba(5,13,23,.38);
    border: 1px solid transparent;
    border-radius: var(--eve-radius-md);
    cursor: pointer;
    backdrop-filter: blur(6px);
}

#startScreen .start-theme-toggle > .icon::before {
    content: "";
    width: 20px;
    height: 20px;
    display: block;
    background: currentColor;
    -webkit-mask: url("icons/brush.svg") center / contain no-repeat;
    mask: url("icons/brush.svg") center / contain no-repeat;
}

#startScreen .start-theme-toggle:hover,
    #startScreen .start-theme-toggle[aria-expanded="true"] {
    color: #f0d18d;
    border-color: rgba(212,178,106,.30);
    background: rgba(12,25,41,.70);
}

#startScreen .start-theme-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    flex-direction: column;
    min-width: 150px;
    padding: 5px;
    gap: 2px;
    background: rgba(10,21,35,.92);
    border: 1px solid rgba(185,205,220,.14);
    border-radius: var(--eve-radius-md);
    box-shadow: 0 16px 38px rgba(0,0,0,.38);
    backdrop-filter: blur(10px);
}

/* 2026-09-05: unscoped from #startScreen — the settings menu (header gear)
   hosts the same theme choices now; styles must apply in both places. */
.start-theme-choice {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--eve-radius-sm);
    color: rgba(229,237,242,.84);
    font: 500 .82rem/1.2 Inter, system-ui, sans-serif;
    letter-spacing: .04em;
    cursor: pointer;
    text-align: left;
    white-space: nowrap;
}

.start-theme-choice:hover {
    background: rgba(185,205,220,.07);
    color: #f1f5f7;
}

.start-theme-choice.active {
    color: #f0d18d;
    border-color: rgba(212,178,106,.38);
    background: rgba(212,178,106,.10);
}

.start-card img {
    max-width: 100%;
    border: 1px solid var(--border);
    cursor: zoom-in;
    border-color: rgba(212, 175, 55, 0.22);
    border-radius: var(--eve-radius-lg);
    box-shadow: 0 12px 38px rgba(0, 0, 0, 0.30);
}

.start-cta button:hover {
    background: #cfdee8;
}

.start-cta button.start-secondary {
    border: 1px solid var(--beige);
    color: var(--eve-gold-soft);
    border-color: rgba(212, 175, 55, 0.62);
    background: rgba(12, 21, 34, 0.78);
}

.start-cta button.start-secondary:hover {
    background: rgba(212, 175, 55, 0.075);
}

.start-card {
    max-width: 860px;
    margin: 24px auto;
    padding: 28px 32px;
    text-align: center;
    border-color: rgba(185, 205, 220, 0.20);
    width: min(880px, 92vw);
    background: linear-gradient(180deg, rgba(10, 18, 30, .95), rgba(7, 13, 22, .97));
    border: 1px solid rgba(185, 205, 220, .16);
    border-radius: var(--eve-radius-lg);
    box-shadow: 0 28px 80px rgba(0,0,0,.50),
        inset 0 1px 0 rgba(255,255,255,.018);
    backdrop-filter: blur(7px);
}

.start-card h2 {
    margin: 0 0 6px;
    font-size: var(--eve-fs-display);
    color: var(--eve-gold);
    font-weight: 650;
    letter-spacing: .025em;
    text-shadow: 0 0 16px rgba(212,175,55,.08);
}

.start-sub {
    color: #a7b6c3;
    line-height: var(--eve-lh-body);
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
}

#startScreenImg {
    border: 1px solid rgba(212,175,55,.22);
    border-radius: var(--eve-radius-lg);
    background: #050a11;
    box-shadow: 0 16px 42px rgba(0,0,0,.36),
        0 0 0 1px rgba(185,205,220,.025);
}

#startScreenImg:hover {
    border-color: rgba(212,175,55,.38);
}

/* Language flags on the start screen (2026-08-24) */
.start-lang-flags {
    display: flex;
    justify-content: center;
    margin: 0 0 14px;
    flex-wrap: wrap;
    gap: 6px;
}

.start-lang-flags button:hover {
    transform: translateY(-1px);
    opacity: .96;
    filter: saturate(.86) brightness(.90);
    border-color: rgba(185,205,220,.60);
    background: #142236;
}

.start-lang-flags button.active {
    opacity: 1;
    filter: saturate(.90) brightness(.90);
    border-color: rgba(212,175,55,.72);
    background: #172337;
    box-shadow: 0 0 0 1px rgba(212,175,55,.12),
        0 0 14px rgba(212,175,55,.06);
}

.start-lang-flags button {
    font-size: var(--eve-fs-xl);
    line-height: 1;
    padding: 5px 8px;
    cursor: pointer;
    border-color: #31455e;
    min-width: 38px;
    min-height: 30px;
    border-radius: var(--eve-radius-md);
    background: rgba(11, 20, 33, .84);
    border: 1px solid #30445b;
    opacity: .72;
    filter: saturate(.72) brightness(.82);
    transition: opacity .15s ease,
        filter .15s ease,
        border-color .15s ease,
        background-color .15s ease,
        box-shadow .15s ease;
    text-shadow: 0 1px 2px rgba(0,0,0,.22);
}

.start-cta {
    display: flex;
    justify-content: center;
    margin: 20px 0 12px;
    flex-wrap: wrap;
    gap: 10px;
}

.start-cta button {
    border: none;
    font-size: var(--eve-fs-md);
    cursor: pointer;
    background: var(--eve-moonlight);
    color: #07101a;
    border-radius: var(--eve-radius-md);
    box-shadow: 0 6px 20px rgba(70, 105, 132, 0.15);
    min-height: 38px;
    padding: 9px 17px;
    font-weight: 650;
}

.start-freemium {
    opacity: 0.65;
    font-size: var(--eve-fs-sm);
    margin-top: 4px;
    color: #8293a3;
}

.start-card .auth-dismiss {
    color: #9eb5c7;
}

.start-card .auth-dismiss:hover {
    color: var(--eve-gold-soft);
}

/* ===== 3A AUTH (2026-08-19) ===== */
.auth-gate {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    background: radial-gradient(circle at 50% 12%, rgba(67, 95, 125, .16), transparent 34%),
        rgba(2, 6, 12, .88);
    backdrop-filter: blur(7px);
}

.auth-card {
    padding: 32px;
    width: 380px;
    max-width: 92vw;
    background: linear-gradient(180deg, rgba(14, 25, 40, .98), rgba(8, 15, 25, .99));
    border: 1px solid rgba(185,205,220,.16);
    border-radius: var(--eve-radius-lg);
    box-shadow: 0 28px 78px rgba(0,0,0,.56),
        inset 0 1px 0 rgba(255,255,255,.018);
}

.auth-logo {
    font-size: var(--eve-fs-display);
    text-align: center;
    color: var(--eve-gold);
    font-weight: 650;
    letter-spacing: .02em;
    text-shadow: 0 0 18px rgba(212,175,55,.08);
}

.auth-sub,
    .auth-hint,
    .auth-note {
    color: #93a4b3;
}

.auth-card h2 {
    font-size: var(--eve-fs-xl);
    margin: 0 0 16px;
    color: var(--eve-moonlight);
}

.auth-card input {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    margin-bottom: 10px;
    border-radius: var(--eve-radius-md);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: var(--eve-fs-md);
    background: #0a1522;
    border-color: #30455d;
}

.auth-btn {
    width: 100%;
    padding: 11px;
    font-size: var(--eve-fs-md);
    cursor: pointer;
    margin-top: 4px;
    background: linear-gradient(180deg, #c9d9e5, #a9c0d1);
    color: #07101a;
    border: 1px solid #c9d9e5;
    border-radius: var(--eve-radius-md);
    font-weight: 700;
}

.auth-btn:hover {
    filter: brightness(1.1);
    background: linear-gradient(180deg, #d7e3eb, #b9cddd);
}

.auth-links a {
    text-decoration: none;
    color: #9fb7ca;
}

.auth-links a:hover {
    text-decoration: underline;
    color: var(--eve-gold-soft);
}

.oauth-btn {
    width: 100%;
    padding: 10px;
    border-radius: var(--eve-radius-md);
    border: 1px solid var(--border);
    font-weight: 600;
    font-size: var(--eve-fs-md);
    cursor: pointer;
    margin-bottom: 8px;
    background: #101c2d;
    border-color: #30455d;
    color: #b9c5cf;
}

.oauth-btn:hover {
    background: #17273b;
    border-color: rgba(185,205,220,.60);
}

.oauth-or {
    text-align: center;
    opacity: 0.55;
    font-size: var(--eve-fs-sm);
    margin: 4px 0 12px;
    color: #748699;
}

#verifyBanner,
    #usageBanner,
    #guestBanner {
    background: linear-gradient(90deg, rgba(13, 24, 39, .98), rgba(17, 30, 47, .98));
    border-bottom: 1px solid rgba(185,205,220,.12);
    color: #9facb9;
    box-shadow: 0 5px 18px rgba(0,0,0,.08);
}

#verifyBanner button,
    #usageBanner button,
    #guestBanner button {
    background: transparent;
    color: var(--eve-gold-soft);
    border-color: rgba(212,175,55,.42);
    border-radius: var(--eve-radius-md);
}

#verifyBanner button:hover,
    #usageBanner button:hover,
    #guestBanner button:hover {
    background: rgba(212,175,55,.06);
    border-color: rgba(212,175,55,.66);
}

.app-header h1,
    .panel-title,
    .panel-header-name,
    .modal h2,
    .modal h3,
    .auth-card h2,
    .start-card h2 {
    text-wrap: balance;
    color: var(--eve-moon);
    font-weight: 600;
    font-size: var(--eve-fs-lg);
    line-height: var(--eve-lh-tight);
    letter-spacing: 0.01em;
}

.project-meta,
    .start-freemium,
    .auth-hint,
    .panel-guide,
    .empty-state,
    .pool-empty {
    line-height: var(--eve-lh-body);
}

.start-card,
    .modal,
    .auth-card,
    .candidate-card,
    .pool-card,
    .insert-result-card {
    text-shadow: none;
}

.error,
    .status-error,
    .auth-error {
    color: #e89a9e;
}

.full-preview-wrapper,
    .full-preview-controls,
    .modal,
    .auth-card {
    --eve-component-radius: var(--eve-radius-lg);
}

.panel-guide,
    .empty-state,
    .pool-empty,
    .auth-hint,
    .start-freemium {
    color: #7f92a2;
}

.modal,
    .auth-card,
    .start-card {
    box-shadow: 0 24px 64px rgba(0,0,0,.44);
    border-color: rgba(185,205,220,.13);
}

.modal h2,
    .modal h3,
    .auth-card h2,
    .auth-card h3 {
    color: #c6d5df;
    letter-spacing: .006em;
}

.app-header h1,
    .panel-title,
    .panel-header-name,
    .trim-panel-title,
    .modal h2,
    .auth-card h2 {
    text-rendering: optimizeLegibility;
    color: var(--eve-moon);
    font-weight: 600;
    font-size: var(--eve-fs-lg);
    line-height: var(--eve-lh-tight);
    letter-spacing: 0.01em;
}

#startScreen {
    position: fixed;
    inset: 0;
    z-index: 9500;
    /* 2026-09-03: landing on OLETUSNAKYMA (aiemmin display:none + JS naytti
       ~1 s kuluttua -> editori vilautui latauksessa). JS piilottaa taman
       vasta kun projekti avautuu tai kayttaja jatkaa editoriin. */
    display: flex;
    overflow: auto;
    flex-direction: column;
    align-items: stretch;
    justify-content: stretch;
    min-height: 100dvh;
    padding: clamp(20px, 3vh, 42px) clamp(20px, 4vw, 72px) 28px;
    background: linear-gradient(180deg, rgba(3, 8, 16, .08) 0%, rgba(3, 8, 16, .20) 56%, rgba(3, 8, 16, .68) 100%),
        url("eve-landing-bg-4k.webp") center / cover no-repeat,
        #050912;
}

#startScreen .start-card {
    width: min(1120px, 100%);
    max-width: none;
    min-height: calc(100dvh - clamp(68px, 9vh, 108px));
    margin: 0 auto;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: auto auto auto auto auto;
    column-gap: clamp(18px, 2.5vw, 38px);
    align-content: center;
    text-align: center;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
}

#startScreen .start-card h2::after {
    content: none;
    position: absolute;
    left: 50%;
    top: calc(100% - 5px);
    transform: translateX(-50%);
    width: max-content;
    color: #d9e2e9;
    font: 500 clamp(.68rem, 1vw, .9rem)/1 Inter, system-ui, sans-serif;
    letter-spacing: .52em;
    text-shadow: 0 2px 8px rgba(0,0,0,.65);
}

#startScreen .start-card h2 {
    grid-column: 1 / -1;
    grid-row: 1;
    width: clamp(270px, 34vw, 500px);
    height: clamp(250px, 34vh, 360px);
    margin: 0 auto 5px;
    overflow: visible;
    color: transparent;
    font-size: 0 !important;
    background: none;
    filter: none;
    position: relative;
}

#startScreen .start-sub {
    grid-column: 1 / -1;
    grid-row: 2;
    max-width: 720px;
    margin: 26px auto 17px;
    color: #e3c17d;
    opacity: 1;
    font-size: clamp(.84rem, 1.3vw, 1.04rem);
    line-height: var(--eve-lh-body);
    letter-spacing: .12em;
    text-transform: uppercase;
    text-shadow: 0 2px 10px rgba(0,0,0,.75);
}

#startScreenImg,
    #startScreenPlaceholder {
    display: none;
}

#startScreen .start-lang-flags {
    grid-column: 1 / -1;
    grid-row: 3;
    display: grid;
    grid-template-columns: repeat(8, minmax(68px, 94px));
    justify-content: center;
    gap: 10px;
    margin: 0 auto clamp(24px, 4vh, 48px);
}

#startScreen .start-lang-flags button {
    min-height: 72px;
    padding: 10px 9px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    opacity: .88;
    color: #e6edf2;
    background: linear-gradient(180deg, rgba(15,29,46,.76), rgba(6,14,24,.82));
    border: 1px solid rgba(185,205,220,.28);
    border-radius: var(--eve-radius-lg);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025), 0 8px 22px rgba(0,0,0,.16);
    font-size: var(--eve-fs-lg);
}

#startScreen .start-lang-flags button::after {
    content: none;
}

#startScreen .start-lang-flags strong {
    color: #edf2f5;
    font-size: var(--eve-fs-lg);
    font-weight: 600;
    line-height: var(--eve-lh-tight);
    letter-spacing: .06em;
}

#startScreen .start-lang-flags small {
    color: #d8e0e6;
    font-size: var(--eve-fs-xs);
    line-height: var(--eve-lh-tight);
    letter-spacing: .02em;
}

#startScreen .start-lang-flags button:hover {
    opacity: 1;
    transform: translateY(-2px);
    border-color: rgba(212,178,106,.62);
    background: linear-gradient(180deg, rgba(23,39,60,.90), rgba(8,18,30,.92));
}

#startScreen .start-lang-flags button.active {
    opacity: 1;
    border-color: #d4b26a;
    box-shadow: 0 0 0 1px rgba(212,178,106,.22),
        0 0 20px rgba(212,178,106,.18),
        inset 0 1px 0 rgba(255,255,255,.05);
}

#startScreen .start-cta {
    display: contents;
}

#startScreen .start-cta button,
    #startScreen .start-card > div:last-child .auth-dismiss {
    height: clamp(180px, 21vh, 220px);
    min-height: 180px;
    max-height: 220px;
    padding: 132px 18px 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    position: relative;
    color: #e8c276;
    background: linear-gradient(180deg, rgba(17,34,54,.76), rgba(5,14,25,.88));
    border: 1px solid rgba(185,205,220,.34);
    border-radius: var(--eve-radius-lg);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025), 0 16px 38px rgba(0,0,0,.22);
    font-size: clamp(.9rem, 1.2vw, 1.05rem);
    font-weight: 560;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
}

#startScreen .start-cta button::after,
    #startScreen .start-card > div:last-child .auth-dismiss::after {
    position: static;
    inset: auto;
    width: auto;
    height: auto;
    transform: none;
    margin-top: 8px;
    max-width: 230px;
    color: rgba(229,237,242,.82);
    font-size: var(--eve-fs-xs);
    font-weight: 400;
    line-height: var(--eve-lh-ui);
    letter-spacing: 0;
    text-transform: none;
    background: none;
    border: 0;
    box-shadow: none;
}

#startScreen .start-action-title {
    display: block;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
}

#startScreen .start-cta button:first-child {
    grid-column: 1;
    grid-row: 4;
}

#startScreen .start-cta button.start-secondary {
    grid-column: 2;
    grid-row: 4;
}

#startScreen .start-card > div:last-child .auth-dismiss {
    grid-column: 3;
    grid-row: 4;
    margin-top: 0;
}

#startScreen .start-cta button::before,
    #startScreen .start-card > div:last-child .auth-dismiss::before {
    content: "";
    position: absolute;
    top: 10px;
    left: 50%;
    width: calc(100% - 20px);
    height: 118px;
    transform: translateX(-50%);
    background: url("new-project.webp") center / cover no-repeat;
    filter: drop-shadow(0 8px 18px rgba(0,0,0,.34)) drop-shadow(0 0 12px rgba(212,178,106,.12));
}

#startScreen .start-cta .start-secondary::before {
    background-image: url("old-projects.webp");
}

#startScreen .start-card > div:last-child {
    display: contents;
}

#startScreen .start-card > div:last-child .auth-dismiss::before {
    background-image: url("continue-editor.webp");
}

#startScreen .start-cta button:hover,
    #startScreen .start-card > div:last-child .auth-dismiss:hover {
    transform: translateY(-3px);
    color: #f2d694;
    border-color: rgba(212,178,106,.78);
    background: linear-gradient(180deg, rgba(24,43,66,.90), rgba(7,18,31,.94));
    box-shadow: 0 0 0 1px rgba(212,178,106,.13), 0 16px 38px rgba(0,0,0,.30), 0 0 22px rgba(212,178,106,.10);
}

#startScreen .start-freemium {
    grid-column: 1 / -1;
    grid-row: 5;
    margin-top: clamp(18px, 3vh, 34px);
    color: rgba(215,225,233,.72);
    opacity: 1;
    font-size: var(--eve-fs-xs);
    text-shadow: 0 2px 8px rgba(0,0,0,.75);
}

#startScreen .start-footer-nav {
    position: fixed;
    z-index: 2;
    left: 0;
    right: 0;
    bottom: 0;
    min-height: 82px;
    padding: 10px clamp(20px, 4vw, 70px);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    background: linear-gradient(180deg, rgba(4,11,20,.78), rgba(3,9,17,.96));
    border-top: 1px solid rgba(212,178,106,.24);
    box-shadow: 0 -12px 34px rgba(0,0,0,.18);
    backdrop-filter: blur(10px);
}

#startScreen .start-footer-nav button {
    min-height: 52px;
    min-width: clamp(118px, 12vw, 180px);
    padding: 4px clamp(12px, 1.8vw, 26px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    color: rgba(220,229,236,.78);
    background: transparent;
    border: 0;
    border-right: 1px solid rgba(212,178,106,.23);
    font: 500 clamp(.68rem, .85vw, .8rem)/1.2 Inter, system-ui, sans-serif;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
}

#startScreen .start-footer-nav button:hover {
    color: #efd08e;
    background: rgba(185,205,220,.035);
}

#startScreen .start-footer-brand {
    margin-left: auto;
    padding-left: clamp(24px, 4vw, 62px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
}

#startScreen .start-footer-brand img {
    width: 112px;
    height: 42px;
    object-fit: contain;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    cursor: default;
}

#startScreen .start-footer-brand small {
    color: rgba(222,231,237,.62);
    font-size: var(--eve-fs-xs);
    letter-spacing: .42em;
    text-transform: uppercase;
}

.modal-head h2 > .eve-ui-icon,
    .auth-logo > .eve-ui-icon {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
}

.modal-head h2,
    .auth-logo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.npd-new-project {
    --npd-size: min(82vh, 820px);
    position: relative;
    width: var(--npd-size);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    filter: drop-shadow(0 28px 48px rgba(0,0,0,.34));
}

/* ==========================================================================
   6. UTILITIES + MOTION
   ========================================================================== */
.hidden {
    display: none !important;
}

/* ---------- Keyframes ---------- */

@keyframes transcribe-chip-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.55; } }

@keyframes indet-slide { 0% { margin-left: -40%; } 100% { margin-left: 100%; } }

@keyframes pulse-playing {
            from { box-shadow: 0 0 4px rgba(74, 222, 128, 0.2); }
            to { box-shadow: 0 0 12px rgba(74, 222, 128, 0.5); }
        }

@keyframes rec-pulse { from { opacity: 0.35; } to { opacity: 1; } }

@keyframes transcribe-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

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

@keyframes npdLighthouseBlink {
    0%, 100% { opacity: .28; filter: brightness(.80); }
    38%      { opacity: 1;   filter: brightness(1.18); }
    58%      { opacity: .62; filter: brightness(.96); }
}

@keyframes silFlash {
    0% { background: rgba(167, 139, 250, 0.45); }
    100% { background: transparent; }
}

/* ==========================================================================
   RESPONSIVE — emitted last so media rules win at equal specificity
   ========================================================================== */
@media (max-width: 1500px) {
    .header-btn {
        padding-inline: 8px;
    }
}

@media (max-width: 1360px) {
    .app-header {
        padding-left: 12px;
        padding-right: 12px;
        gap: 10px;
    }

    .header-left {
        gap: 7px;
    }

    .header-right {
        gap: 5px;
    }

    .header-btn {
        padding-left: 8px;
        padding-right: 8px;
    }

}

@media (max-width: 1180px) {
    #transcriptBody,
        #avatarPanelBody,
        .suggestions-panel {
        padding-left: 8px;
        padding-right: 8px;
    }

    .header-btn:not(#renderBtn) {
        padding-left: 6px;
        padding-right: 6px;
    }

    .transcript-toolbar,
        .timeline-header {
        padding-left: 9px;
        padding-right: 9px;
    }
}

@media (max-width: 1120px) {
    .app-header h1 {
        font-size: var(--eve-fs-lg);
    }

    #currentProjectName {
        max-width: 120px;
    }

    .header-btn {
        font-size: var(--eve-fs-xs);
        padding: 5px 7px;
    }

    .header-left,
        .header-right {
        gap: 4px;
    }
}

@media (max-width: 900px) {
    #avatarColumn {
        width: 100%;
        min-width: 0;
        max-height: none;
    }

    body {
        height: auto;
        overflow: visible;
    }

    .full-preview-section {
        flex-direction: column;
        flex: none;
    }

    .timeline-section {
        max-height: none;
    }

/* P32-13: circular handle on the right edge, vertically centered */
    #transcriptColumn {
        width: 100%;
        min-width: 0;
        max-height: 280px;
    }

/* P14: clip candidates as a vertical column right of the preview */
    #candidatesColumn {
        width: 100%;
        min-width: 0;
        max-height: none;
    }

    .app-header {
        padding: 8px 10px;
        gap: 8px;
    }

    .app-header h1 {
        font-size: var(--eve-fs-lg);
    }

    .header-btn {
        min-height: 36px;
    }

    #currentProjectName {
        display: none;
    }

    .modal {
        width: calc(100vw - 20px);
        max-height: calc(100dvh - 32px);
        padding: 14px;
    }

    .modal-buttons .btn,
        .modal .btn {
        min-height: 40px;
    }

    .project-item {
        padding: 14px 12px;
    }

    #startScreen {
        padding: 64px 18px 110px;
    }

    #startScreen .start-card {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        row-gap: 12px;
    }

    #startScreen .start-card > * {
        grid-column: 1;
        grid-row: auto;
    }

    #startScreen .start-lang-flags {
        grid-template-columns: repeat(4, minmax(66px, 92px));
        margin-bottom: 12px;
    }

    #startScreen .start-cta button,
        #startScreen .start-card > div:last-child .auth-dismiss {
        min-height: 104px !important;
        padding-top: 58px;
    }

    #startScreen .start-cta button::before,
        #startScreen .start-card > div:last-child .auth-dismiss::before {
        top: 15px;
        width: 40px;
        height: 40px;
    }

    #startScreen .start-footer-nav {
        min-height: 78px;
        padding: 8px 10px;
        overflow-x: auto;
        justify-content: flex-start;
    }

    #startScreen .start-footer-nav button {
        min-width: 116px;
    }

    #startScreen .start-footer-brand {
        display: none;
    }
}

@media (max-width: 520px) {
    #startScreen .start-lang-flags {
        grid-template-columns: repeat(2, minmax(88px, 1fr));
    }

    #startScreen .start-card h2 {
        width: min(78vw, 360px);
        height: 125px;
    }
}

@media (max-height: 760px) {
    .app-header {
        min-height: 42px !important;
        padding-top: 5px;
        padding-bottom: 5px;
    }

/* P20: persistent trim & effect strip between preview and timeline */
    #trimPanel {
        padding-top: 5px;
        padding-bottom: 6px;
    }

    #startScreen .start-cta button,
        #startScreen .start-card > div:last-child .auth-dismiss {
        padding-top: 112px;
    }

    #startScreen .start-cta button::before,
        #startScreen .start-card > div:last-child .auth-dismiss::before {
        height: 98px;
    }

    .timeline-header {
        min-height: 32px;
        padding-top: 4px;
        padding-bottom: 4px;
    }
}

@media (prefers-contrast: more) {
/* Split from index.html 2026-08-26 refactor — both <style> blocks, original order. */
    :root {
        --border: #526b84;
        --text-dim: #b1bec9;
    }

    #avatarColumn,
        #transcriptColumn,
        #candidatesColumn,
        #trimPanel,
        .timeline,
        .modal,
        .auth-card {
        border-color: #526b84;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
        *::before,
        *::after {
        scroll-behavior: auto;
        animation-duration: 0.01ms;
        animation-iteration-count: 1;
        transition-duration: 0.01ms;
    }

    .scene-block,
        .header-btn,
        .control-btn,
        .tt-btn {
        transition: none;
    }

    #npdSeaCanvas {
        display: none;
    }

    #npLauncher.npd-awake #npdLighthouseGlow {
        /* 2b-3: !important poistettu — todistettu turhaksi (ei kilpailevaa voittajaa, ks. loki 2026-09-02) */
        animation: none;
        opacity: .75;
    }

    #npLauncher *,
        #npLauncher *::before,
        #npLauncher *::after,
        .npd-popup *,
        .npd-popup *::before,
        .npd-popup *::after {
        transition: none;
    }
}

@media (max-width: 720px), (max-height: 680px) {
    .npd-new-project {
        --npd-size: min(92vw, 76vh, 680px);
    }

    .npd-close {
        top: 14px;
        right: 14px;
    }
}

@media (max-width: 560px) {
    .npd-popup {
        padding: 16px 14px 14px;
    }

    .npd-cards {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 10px;
    }

    .npd-settings-row {
        flex-direction: column;
        align-items: stretch;
    }

    .npd-autobuild {
        padding-bottom: 0;
    }
}

/* ==========================================================================
   RESTORED RULES — dropped whole by the pass-1 exporter bug,
   rebuilt here from the source cascade
   ========================================================================== */

.panel-title {
    color: var(--eve-moon);
    font-weight: 600;
    font-size: var(--eve-fs-lg);
    line-height: var(--eve-lh-tight);
    letter-spacing: 0.01em;
}

/*    NP-SHELF (2026-08-30, spec v2.1 §4) — the New Project file shelf.
   A floating TOP PANEL over the editor (not a modal — no backdrop,
   the editor stays alive underneath). Night-glass look, half
   translucent so the live editor shows through. Cards reuse the
   .npd-card vocabulary from the launcher popup.
   ============================================================ */
.npd-shelf {
    --npd-gold: #d3ac68;
    --npd-gold-light: #ecd09b;
    position: fixed;
    top: 8px;
    left: 8px;
    right: 8px;
    z-index: 900;                 /* above the editor, below modals (1050+) */
    max-height: 40vh;
    display: flex;
    flex-direction: column;
    border-radius: var(--eve-radius-lg);
    border: 1px solid rgba(214,177,111,.38);
    background: linear-gradient(180deg, rgba(16,30,46,.82), rgba(6,14,25,.85));
    backdrop-filter: blur(10px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05),
      0 18px 50px rgba(0,0,0,.45);
    color: #e8eef3;
    font-family: Inter, "Segoe UI", system-ui, sans-serif;
    animation: npdShelfIn .22s ease-out;
}

@keyframes npdShelfIn {
    from { transform: translateY(-14px); opacity: 0; }
    to   { transform: translateY(0);     opacity: 1; }
}

.npd-shelf.hidden { display: none; }

.npd-shelf-top {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px 8px;
    border-bottom: 1px solid rgba(201,215,225,.10);
}

.npd-shelf-name {
    flex: 0 1 240px;
    padding: 7px 11px;
    border-radius: var(--eve-radius-md);
    border: 1px solid rgba(201,215,225,.22);
    background: rgba(5,13,23,.55);
    color: #e8eef3;
    font-size: var(--eve-fs-md);
    font-weight: 550;
}

.npd-shelf-name::placeholder {
    color: rgba(143,163,177,.65);   /* dim placeholder — no label (§4.2) */
    font-weight: 400;
}

.npd-shelf-name:focus {
    outline: none;
    border-color: rgba(230,203,149,.60);
}

.npd-shelf-instruction {
    flex: 1 1 auto;
    font-size: var(--eve-fs-sm);
    color: rgba(200,213,221,.88);
    line-height: var(--eve-lh-ui);
    text-align: center;
}

.npd-shelf-continue {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid rgba(230,203,149,.55);
    background: rgba(211,172,104,.16);
    color: var(--npd-gold-light);
    font-size: var(--eve-fs-sm);
    font-weight: 650;
    cursor: pointer;
    white-space: nowrap;
    transition: background .14s ease, border-color .14s ease;
}

.npd-shelf-continue:hover {
    background: rgba(211,172,104,.28);
    border-color: rgba(230,203,149,.85);
}

/* 2026-09-08d (käyttäjän vaatimus): YKSI katkoviivareuna koko pudotus-
   alueen ympärille — vihje-rivi + korttialue ovat yksi pudotuskokonaisuus,
   joten reunan täytyy näyttää koko alue johon tiedostoja voi pudottaa.
   min-height pitää vyöhykkeen näkyvissä myös tyhjänä (tyhjä korttilista
   on display:none). */
.npd-shelf-dropzone {
    display: flex;
    flex-direction: column;
    margin: 8px 14px 10px;
    min-height: 120px;
    border: 2px dashed rgba(225,194,135,.45);
    border-radius: var(--eve-radius-md);
    background: rgba(9,20,33,.45);
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease;
}

.npd-shelf-dropzone:hover,
.npd-shelf-dropzone.drag-over {
    border-color: rgba(242,211,151,.95);
    background: rgba(20,36,54,.55);
}

/* Tyhjä hylly: vihje-rivi kelluu keskelle vyöhykettä. */
.npd-shelf-dropzone:has(> .npd-shelf-cards:empty) {
    justify-content: center;
}

.npd-shelf-drop {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0;
    padding: 12px;
    color: rgba(200,213,221,.85);
    font-size: var(--eve-fs-sm);
    cursor: pointer;
}

.npd-shelf-drop .npd-drop-cloud {
    width: 26px;
    height: 26px;
}

.npd-shelf-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 2px 14px 10px;
    overflow-y: auto;
    min-height: 0;
}

.npd-shelf-cards:empty { display: none; }

.npd-shelf-cards .npd-card {
    width: 180px;
    flex: 0 0 auto;
}

.npd-card-audio-btn {
    display: block;
    width: 100%;
    margin-top: 7px;
    padding: 5px 8px;
    border-radius: var(--eve-radius-md);
    border: 1px solid rgba(230,203,149,.45);
    background: rgba(211,172,104,.12);
    color: var(--npd-gold-light);
    font-size: var(--eve-fs-xs);
    font-weight: 600;
    cursor: pointer;
    transition: background .14s ease, border-color .14s ease;
}

.npd-card-audio-btn:hover {
    background: rgba(211,172,104,.24);
    border-color: rgba(230,203,149,.75);
}

.npd-card-autocaps {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 7px;
    font-size: var(--eve-fs-xs);
    color: rgba(200,213,221,.88);
    cursor: pointer;
    user-select: none;
}

.npd-card-autocaps input {
    accent-color: var(--npd-gold);
    width: 14px;
    height: 14px;
    margin: 0;
}

.npd-shelf-foot {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 16px;
    padding: 8px 14px 10px;
    border-top: 1px solid rgba(201,215,225,.10);
    font-size: var(--eve-fs-xs);
    color: rgba(143,163,177,.95);
}

.npd-shelf-library {
    color: rgba(200,213,221,.80);
    /* 2026-09-08 (käyttäjän vaatimus): pinned to the shelf panel's RIGHT end */
    margin-left: auto;
    text-align: right;
}

/* 2026-09-08: the whole shelf file area is a drop target */
.npd-shelf-cards.drag-over {
    outline: 2px dashed rgba(242,211,151,.95);
    outline-offset: -6px;
    border-radius: var(--eve-radius-md);
    background: rgba(20,36,54,.35);
}

.npd-shelf-sugg {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.npd-sugg-chip {
    padding: 4px 11px;
    border-radius: 999px;
    border: 1px solid rgba(201,215,225,.25);
    background: rgba(5,13,23,.50);
    color: rgba(200,213,221,.90);
    font-size: var(--eve-fs-xs);
    font-weight: 600;
    cursor: pointer;
    transition: border-color .14s ease, color .14s ease;
}

.npd-sugg-chip:hover {
    border-color: rgba(230,203,149,.60);
    color: var(--npd-gold-light);
}

/* 2026-09-11 (käyttäjän pyyntö): "Place all to timeline" — hyllyn
   alareunan päänappi + järjestys-/roolimodaalin rivityylit. */
.npd-shelf-placeall {
    padding: 5px 14px;
    border-radius: 999px;
    border: 1px solid rgba(230,203,149,.55);
    background: linear-gradient(180deg, rgba(64,52,26,.85), rgba(40,32,16,.85));
    color: var(--npd-gold-light);
    font-size: var(--eve-fs-xs);
    font-weight: 700;
    cursor: pointer;
    transition: border-color .14s ease, filter .14s ease;
}

.npd-shelf-placeall:hover {
    border-color: rgba(242,211,151,.95);
    filter: brightness(1.15);
}

.npd-placeall-label {
    font-size: var(--eve-fs-xs);
    font-weight: 700;
    color: var(--text-dim);
    margin-bottom: 6px;
}

.npd-placeall-opt {
    display: block;
    font-size: 0.85rem;
    margin: 4px 0;
    cursor: pointer;
}

.npd-placeall-row {
    padding: 6px 0;
    border-top: 1px solid rgba(201,215,225,.10);
}

.npd-placeall-fname {
    font-size: 0.82rem;
    font-weight: 600;
    margin-bottom: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.npd-placeall-row label {
    display: inline-block;
    font-size: 0.82rem;
    margin-right: 14px;
    cursor: pointer;
}

.npd-shelf .npd-link-btn { margin-left: auto; }

/* Mobile (< 900 px): the editor hides as usual — the shelf takes the
   top of the screen with the same structure. */
@media (max-width: 900px) {
    .npd-shelf {
        top: 4px;
        left: 4px;
        right: 4px;
        max-height: 55vh;
    }
    .npd-shelf-top { flex-wrap: wrap; }
    .npd-shelf-instruction { order: 3; flex-basis: 100%; text-align: left; }
    .npd-shelf-cards .npd-card { width: 150px; }
}

@media (prefers-reduced-motion: reduce) {
    .npd-shelf { animation: none; }
    .npd-shelf-drop,
    .npd-shelf-dropzone,
    .npd-shelf-continue,
    .npd-card-audio-btn,
    .npd-shelf-placeall,
    .npd-sugg-chip { transition: none; }
}

/* ==========================================================================
   FRIENDS COLLABORATION (spec REV 3, 2026-08-30)
   Presence bar, read-only lock mode, members modal, shared pool toggle.
   ========================================================================== */

/* --- presence bar (header) --- */
#collabBar {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border: 1px solid var(--border, #4a4a55);
    border-radius: 999px;
    font-size: 0.72rem;
    color: var(--text, #e8e4da);
    background: var(--bg-darker, rgba(0, 0, 0, 0.25));
}
.collab-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    display: inline-block;
    flex: none;
}
.collab-dot-owner { background: #4ade80; }   /* green — you own it */
.collab-dot-editor { background: #facc15; }  /* yellow — you hold the lock */
.collab-dot-away { background: #9ca3af; }    /* grey — read-only */
.collab-lock-text { color: var(--text-dim, #a9a396); white-space: nowrap; }
.collab-live-badge {
    background: #dc2626;
    color: #fff;
    font-weight: 700;
    font-size: 0.62rem;
    letter-spacing: 0.06em;
    padding: 1px 6px;
    border-radius: 4px;
    animation: collab-live-pulse 1.6s ease-in-out infinite;
}
@keyframes collab-live-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}
.collab-manage-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.85rem;
    padding: 0 2px;
    line-height: 1;
}

/* --- read-only banner --- */
#collabReadonlyBanner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 7px 14px;
    font-size: 0.8rem;
    background: rgba(120, 90, 10, 0.22);
    border-bottom: 1px solid rgba(250, 204, 21, 0.35);
    color: var(--text, #e8e4da);
}

/* --- read-only mode: editing surfaces go inert (spec §8.4: centralized
   via ONE body class; the server's 409 is the hard guarantee) --- */
body.collab-readonly #timeline,
body.collab-readonly #sceneSettingsBody,
body.collab-readonly #transcriptEditor,
body.collab-readonly #trimPanel,
body.collab-readonly #renderBtn,
body.collab-readonly #insertDropdown,
body.collab-readonly #undoBtn,
body.collab-readonly #redoBtn {
    /* 2b-3: !important poistettu — todistettu turhaksi (periytyvä pointer-events; ei kilpailevaa voittajaa, ks. loki 2026-09-02) */
    pointer-events: none;
    opacity: 0.55;
}

/* --- members modal --- */
#collabModalBody h3 {
    font-size: 0.82rem;
    margin: 6px 0 6px;
    color: var(--text-dim, #a9a396);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.collab-member-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 2px;
    font-size: 0.85rem;
    border-bottom: 1px solid var(--border, #3a3a44);
}
.collab-tag {
    font-size: 0.68rem;
    color: var(--text-dim, #a9a396);
    border: 1px solid var(--border, #4a4a55);
    border-radius: 4px;
    padding: 0 5px;
    margin-left: 4px;
}
.collab-frozen-note {
    font-size: 0.82rem;
    color: #fbbf24;
    margin: 4px 0 10px;
}
.collab-invite-url {
    display: flex;
    gap: 6px;
    margin: 8px 0;
}
.collab-invite-url input {
    flex: 1;
    min-width: 0;
    font-size: 0.75rem;
    padding: 6px 8px;
    background: var(--bg-darker, rgba(0, 0, 0, 0.25));
    border: 1px solid var(--border, #4a4a55);
    border-radius: 6px;
    color: var(--text, #e8e4da);
}
.collab-invite-list { margin-top: 8px; }
.collab-activity { max-height: 160px; overflow-y: auto; }
.collab-activity-row {
    font-size: 0.75rem;
    padding: 3px 2px;
    color: var(--text-dim, #a9a396);
    border-bottom: 1px dotted var(--border, #3a3a44);
}
.collab-activity-time { color: var(--text-dim, #a9a396); margin-right: 6px; }

/* --- "Shared with me" section in the projects modal --- */
.shared-section-title {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-dim, #a9a396);
    margin: 4px 0 6px;
}
.shared-badge {
    font-size: 0.68rem;
    color: var(--text-dim, #a9a396);
    border: 1px solid var(--border, #4a4a55);
    border-radius: 4px;
    padding: 0 6px;
    margin-left: 6px;
    white-space: nowrap;
}
.project-item.project-frozen {
    opacity: 0.55;
    cursor: not-allowed;
}

/* --- shared pool toggle (19_pool.js, D13) --- */
.pool-mode-toggle {
    display: flex;
    gap: 0;
    margin-bottom: 8px;
    border: 1px solid var(--border, #4a4a55);
    border-radius: 8px;
    overflow: hidden;
}
.pool-mode-toggle button {
    flex: 1;
    padding: 6px 4px;
    font-size: 0.72rem;
    background: var(--bg-darker, rgba(0, 0, 0, 0.2));
    color: var(--text-dim, #a9a396);
    border: none;
    cursor: pointer;
}
.pool-mode-toggle button.active {
    background: var(--bg-card, #2c2c34);
    color: var(--text, #e8e4da);
    font-weight: 600;
}
.pool-share-btn {
    position: absolute;
    /* 2026-09-07 (lisäys 14, BUGI 2): bottom-LEFT — the top-left corner is
       the folder tag's (and the matted badge's below it), so the hover
       share button painted over them. Bottom-right is the matte button. */
    bottom: 22px;
    left: 4px;
    z-index: 3;
    background: rgba(0, 0, 0, 0.65);
    border: 1px solid var(--border, #4a4a55);
    border-radius: 6px;
    color: #fff;
    font-size: 0.66rem;
    padding: 2px 6px;
    cursor: pointer;
    display: none;
}
.pool-card:hover .pool-share-btn { display: block; }

/* Pass 5 — screen share viewer overlay */
#collabLiveOverlay {
    position: fixed; right: 16px; bottom: 16px; z-index: 9500;
    width: min(640px, 46vw); background: #000;
    border: 1px solid var(--border, #444); border-radius: 10px;
    overflow: hidden; box-shadow: 0 8px 32px rgba(0,0,0,.5);
}
#collabLiveOverlay.hidden { display: none; }
#collabLiveOverlay video { display: block; width: 100%; max-height: 60vh; background: #000; }
.collab-live-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 6px 10px; font-size: 0.85rem;
    color: var(--text, #eee); background: var(--surface, #1c1c22);
}
.collab-live-close {
    background: none; border: none; color: inherit; cursor: pointer;
    font-size: 1rem; padding: 0 4px;
}


/* ===== GIPHY passi 2 (2026-08-31, K1-K11) — GIF/sticker panel + preview overlays ===== */

/* Panel: the fourth cand-tab pane. The .active flex contract matches
   #ownClipsPanel — the grid scrolls, the controls stay put. */
#giphyPanel {
    display: none;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    min-height: 0;
}

#giphyPanel.active {
    display: flex;
}

.giphy-kind-row {
    display: flex;
    gap: 6px;
}

.giphy-kind {
    flex: 1;
    padding: 4px 6px;
    font-size: var(--eve-fs-xs, 0.72rem);
    background: var(--bg-card, #1a1a1a);
    color: var(--text-dim, #999);
    border: 1px solid var(--border, #333);
    border-radius: var(--eve-radius-sm, 6px);
    cursor: pointer;
}

.giphy-kind.active {
    color: var(--beige, #d2a574);
    border-color: var(--beige, #d2a574);
    font-weight: 700;
}

/* Result grid: animated previews (K2 merged list), infinite scroll via
   onscroll in index.html. 2026-09-01: auto-fill columns sized for actual
   viewing (>=140px) instead of two fixed sliver columns — the grid gains
   columns as the user widens the panel with the ◆ handle. */
.giphy-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 6px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    padding: 2px;
    align-content: start;
    /* 2026-09-01 (fix): explicit max-content rows — an auto row inside a
       fixed-height overflow grid gets squeezed below its content by the
       track-sizing algorithm, which clipped the cards. */
    grid-auto-rows: max-content;
}

.giphy-card {
    position: relative;
    border: 1px solid var(--border, #333);
    border-radius: var(--eve-radius-sm, 6px);
    overflow: hidden;
    cursor: pointer;
    /* 2026-09-01 (fix): solid dark stage for gifs/clips — the checkerboard
       made opaque, letterboxed content look "ruudullinen". */
    background: #0b0f16;
    aspect-ratio: 1 / 1;
}

/* The faint checkerboard is kept ONLY for stickers (transparency is their
   whole point — plain #000 swallowed dark sticker art). */
.giphy-card.kind-sticker {
    background:
        repeating-conic-gradient(rgba(255,255,255,0.07) 0% 25%, #0b0f16 0% 50%)
        0 0 / 16px 16px;
}

.giphy-card:hover {
    border-color: var(--beige, #d2a574);
}

.giphy-card img {
    width: 100%;
    height: 100%;
    /* 2026-09-01: contain, not cover — the user sees the WHOLE gif/sticker,
       never a cropped sliver; odd-aspect stickers keep their shape. */
    object-fit: contain;
    display: block;
}

.giphy-badge {
    position: absolute;
    top: 3px;
    left: 3px;
    font-size: 0.58rem;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.72);
    color: #fff;
    pointer-events: none;
}

.giphy-badge-sticker {
    color: var(--eve-gold-soft, #e5c79a);
}

/* 2026-09-01: GIPHY Clips badge (short videos with sound) */
.giphy-badge-clip {
    color: #8ecbff;
}

.giphy-empty {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--text-dim, #999);
    font-size: var(--eve-fs-xs, 0.72rem);
    padding: 18px 8px;
    line-height: 1.5;
}

/* K6: the GIPHY attribution is ALWAYS visible under the grid. */
.giphy-attribution {
    font-size: 0.62rem;
    color: var(--text-dim, #999);
    text-align: center;
    padding: 2px 0 4px;
    flex-shrink: 0;
}

/* Preview overlays (#overlayLayer lives in the preview wrapper, DOM-after
   the avatar bubble => K10 z-order). The layer itself is click-through;
   each box re-enables pointer events for the K11 handles. */
.gif-overlay {
    position: absolute;
    pointer-events: auto;
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-drag: none;
}

.gif-overlay img {
    width: 100%;
    height: auto;
    display: block;
    pointer-events: none;
    /* 2026-09-02 (sticker alpha fix, preview side): the CSS-refactor rule
       .full-preview-wrapper img background:#03070d hits overlay images too
       (#overlayLayer lives inside the wrapper) and painted a NEAR-BLACK
       tile behind every transparent sticker pixel — the preview showed a
       black background while the ffmpeg render was correct. Same exemption
       as .gif-overlay video below. Equal specificity (class+element) and
       later source order wins over the wrapper rule. */
    background: transparent;
}

/* 2026-09-01: kind="clip" (GIPHY Clips) — the preview overlay is a muted
   looping <video>; it fills the box like the img variant. */
.gif-overlay video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    pointer-events: none;
    background: transparent;
}

.gif-overlay.selected {
    outline: 2px solid var(--beige, #d2a574);
    outline-offset: 1px;
    border-radius: 2px;
}

/* K11 handles: ⤡ scale at the bottom-right corner, ↻ rotate at the LEFT
   EDGE mid-height (user decision 2026-08-31 — never top-center). */
.ov-handle {
    position: absolute;
    width: 22px;
    height: 22px;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    background: var(--beige, #d2a574);
    color: #1a1206;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
    cursor: pointer;
    pointer-events: auto;
    touch-action: none;
    z-index: 2;
}

.ov-handle-scale {
    cursor: nwse-resize;
}

.ov-handle-rotate {
    cursor: grab;
}

/* Mini toolbar above the selected overlay: start/end seconds + delete. */
.ov-toolbar {
    position: absolute;
    transform: translate(-50%, -100%);
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    background: rgba(10, 14, 22, 0.92);
    border: 1px solid var(--beige, #d2a574);
    border-radius: var(--eve-radius-sm, 6px);
    font-size: 0.66rem;
    color: var(--text-dim, #ccc);
    white-space: nowrap;
    /* 2026-09-01 (siirtely-bugi): the toolbar floats ABOVE the selected
       overlay and on a small preview it spans much of the preview width —
       with pointer-events:auto its labels/gaps swallowed every pointerdown
       aimed at a NEIGHBOURING overlay, so that overlay could not be dragged.
       Clicks now pass through the container; only the real controls take
       pointer events. */
    pointer-events: none;
    z-index: 2;
}

.ov-toolbar input,
.ov-toolbar button {
    pointer-events: auto;
}

/* 2026-09-01: live text editor for kind="text" overlays — the user retypes
   the effect's content straight above the preview box. */
.ov-toolbar input[type="text"] {
    width: 140px;
    background: #141b28;
    color: #e8e6e1;
    border: 1px solid var(--border, #333);
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 0.72rem;
}

/* When there is no room above the box the toolbar flips below it
   (set from _giphyPositionHandles). */
.ov-toolbar.ov-toolbar-below {
    transform: translate(-50%, 0);
}

.ov-toolbar input[type="number"] {
    width: 52px;
    padding: 2px 4px;
    font-size: 0.66rem;
    background: var(--bg-card, #1a1a1a);
    color: var(--text, #eee);
    border: 1px solid var(--border, #333);
    border-radius: 4px;
}

.ov-toolbar .ov-del {
    padding: 2px 6px;
}

/* 🐞 GIF-service warning (2026-08-31, user decision): sits on the
   Powered by GIPHY line, visible only while the service/quota fails. */
.giphy-bug {
    cursor: help;
    margin-left: 4px;
    font-size: 0.7rem;
    vertical-align: middle;
}

/* ===== Meme mode (spec §9, 2026-08-31) ===== */

.giphy-meme-toggle.active {
    color: var(--beige, #d2a574);
    border-color: var(--beige, #d2a574);
    font-weight: 700;
}

.giphy-meme-fields {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
    border: 1px dashed var(--border, #333);
    border-radius: var(--eve-radius-sm, 6px);
}

.giphy-meme-fields input[type="text"] {
    padding: 6px 8px;
    border-radius: 6px;
    border: 1px solid var(--border, #333);
    background: var(--bg-card, #1a1a1a);
    color: var(--text, #eee);
    font-size: 0.8rem;
}

.giphy-meme-own {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 2px;
}

/* MEEMI-OMAKUVA 2026-09-02: search + paged grid (thousand-image safe) */
.giphy-meme-own-search {
    width: 100%;
    padding: 4px 8px;
    font-size: var(--eve-fs-xs, 0.72rem);
    border-radius: 4px;
    border: 1px solid var(--border, #333);
    background: var(--bg-card, #1c1c1c);
    color: var(--text, #eee);
}

.giphy-meme-own-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-height: 220px;
    overflow-y: auto;
}

.giphy-meme-own-more {
    align-self: center;
}

.giphy-meme-own img {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--border, #333);
    cursor: pointer;
    flex-shrink: 0;
}

.giphy-meme-own img:hover {
    border-color: var(--beige, #d2a574);
}

.giphy-meme-hint {
    font-size: 0.62rem;
    color: var(--text-dim, #999);
    line-height: 1.5;
}

/* Meme captions in the preview — the Impact look of the render's
   drawtext (white fill, black outline, centered, uppercase). Font size
   is set in JS from the box width (render uses Wpx//8). */
.meme-text {
    position: absolute;
    left: 2%;
    right: 2%;
    text-align: center;
    font-family: Impact, 'Arial Black', Arial, sans-serif;
    color: #fff;
    text-transform: uppercase;
    line-height: 1.1;
    pointer-events: none;
    text-shadow: -2px -2px 0 #000, 2px -2px 0 #000,
                 -2px 2px 0 #000, 2px 2px 0 #000,
                 0 -2px 0 #000, 0 2px 0 #000,
                 -2px 0 0 #000, 2px 0 0 #000;
}

.meme-top {
    top: 4%;
}

.meme-bottom {
    bottom: 4%;
}

/* === Tekstit-paneeli (tekstiefektit passi 1, 2026-08-31) === */
#textFxPanel {
    display: none;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    min-height: 0;
}

#textFxPanel.active {
    display: flex;
}

#videoFxPanel {
    display: none;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    min-height: 0;
    padding: 4px;
}

#videoFxPanel.active {
    display: flex;
}

.videofx-panel label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: var(--eve-fs-xs, 0.72rem);
}

.videofx-hint {
    font-size: var(--eve-fs-xs, 0.72rem);
    opacity: 0.75;
}

/* 2026-09-01: auto-fill like the GIF grid — preset cards stay >=150px
   (the 40px sample font needs it) and the grid gains columns when the
   panel is widened with the ◆ handle. */
.textfx-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 6px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    padding: 2px;
    align-content: start;
    /* 2026-09-01 (fix): explicit max-content rows — otherwise the fixed-height
       overflow grid squeezes every auto row to (height-gaps)/rows, clipping
       the 40px samples to a sliver ("leikkautuu puoliksi poikki"). */
    grid-auto-rows: max-content;
}

.textfx-card {
    border: 1px solid var(--border, #333);
    border-radius: var(--eve-radius-sm, 6px);
    background: #1a1a2e;             /* dark stage so glow/neon read well */
    padding: 10px 6px 6px;
    cursor: pointer;
    text-align: center;
    transition: border-color .15s ease;
    overflow: hidden;
}

.textfx-card:hover {
    border-color: var(--beige, #d2a574);
}

/* The sample uses the REAL engine classes (font-* + *-style) — static
   (no motion/particles in the card; the effect animates on the scene). */
.textfx-sample {
    font-size: 40px;
    line-height: 1.15;
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #fff;
    /* 2026-09-01 (fix): breathing room so glow/descenders are not clipped
       hard against the sample box edges. */
    padding: 6px 4px;
}

.textfx-name {
    margin-top: 6px;
    font-size: var(--eve-fs-xs, 0.72rem);
    color: var(--text-dim, #999);
}

/* 2026-09-01: "Luo oma efekti" -luontikortti (preset-gridin ensimmäinen kortti). */
.textfx-create {
    border-style: dashed;
    border-color: var(--beige, #d2a574);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 88px;               /* sama korkeus kuin sample-kortilla */
}

.textfx-create:hover {
    background: #20203a;
}

.textfx-create-plus {
    font-size: 40px;
    line-height: 1.15;
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--beige, #d2a574);
    padding: 6px 4px;
}

/* 2026-09-11 (setti 0911f): "Show file name" -kortti — sama kuoppa-
   kehys kuin create-kortilla, mutta itse kortti ei ole nappi (vain
   sen kaksi pientä valintanappia ovat). */
.textfx-filename {
    cursor: default;
    gap: 6px;
    padding: 8px 6px;
}

.textfx-filename-title {
    font-size: var(--eve-fs-sm, 0.82rem);
    font-weight: 600;
    color: var(--text, #eee);
    line-height: 1.2;
}

.textfx-filename-btns {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}

.textfx-fn-btn {
    background: #25253d;
    border: 1px solid var(--border, #333);
    border-radius: 4px;
    color: var(--text, #eee);
    font-size: var(--eve-fs-xs, 0.72rem);
    padding: 4px 6px;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}

.textfx-fn-btn:hover {
    border-color: var(--beige, #d2a574);
    background: #2d2d47;
}

/* 2026-09-11 (setti 0911i, käyttäjän pyyntö): Show file name -kortin
   on/off-kytkimet (korvasivat välittömät toimintonapit). Kytkin kuvaa
   TILAA: on = tiedostonimi näkyy, off = piilotettu. */
.textfx-fn-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--eve-fs-xs, 0.72rem);
    color: var(--text-dim, #999);
    cursor: pointer;
    user-select: none;
    padding: 3px 2px;
}

.textfx-fn-toggle input {
    accent-color: var(--accent, #7c9a5e);
    cursor: pointer;
    margin: 0;
}

.textfx-fn-toggle:hover {
    color: var(--text, #eee);
}

.textfx-hint {
    font-size: var(--eve-fs-xs, 0.72rem);
    color: var(--text-dim, #999);
    line-height: 1.35;
}

/* === Efektipaneeli (2026-08-31): oma sarake klippipaneelin rinnalla === */
#effectsColumn {
    display: none;                 /* JS ohjaa: toggleEffectsPanel */
    flex-direction: column;
    gap: 8px;
    border: 1px solid var(--border);
    border-radius: var(--eve-radius-md);
    padding: 8px;
    max-height: calc(100vh - 150px);
    /* 2026-09-01: oma --fx-w-muuttuja (ei enää jaettu --cand-w) — oletus
       340px jotta GIF-kortit ovat käyttökelpoisen kokoisia heti, ja
       fxEdgeHandle-kahvalla leveys venyy koko ruutuun asti (ei max-widthia,
       raja tulee JS:stä: sectionin leveys - 40px). */
    width: var(--fx-w, 340px);
    min-width: 240px;
    position: relative;
    box-shadow: inset 1px 0 0 rgba(255,255,255,.01),
        -8px 0 24px rgba(0,0,0,.05);
    background: #0a1320;
    border-left: 1px solid rgba(185,205,220,.10);
    flex-shrink: 0;
}

/* 2026-09-01: effects panel full-width state (mirrors transcript-expanded)
   — the ◆ handle drags past 88% of the section width. */
.full-preview-section.effects-expanded #previewColumn,
    .full-preview-section.effects-expanded #candidatesColumn,
    .full-preview-section.effects-expanded #transcriptColumn,
    .full-preview-section.effects-expanded #avatarColumn,
    .full-preview-section.effects-expanded #candidatesReopenTab,
    .full-preview-section.effects-expanded #reopenTabStack {
    display: none;
}

.full-preview-section.effects-expanded #effectsColumn {
    width: 100%;
    min-width: 0;
}

/* 2026-09-01: the same circular ◆ edge handle as the other panels —
   the effects column is right-side, so the handle sits on its LEFT edge
   (identical to #candEdgeHandle). */
#fxEdgeHandle {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--bg-darker);
    border: 1px solid var(--border);
    color: var(--beige);
    font-size: var(--eve-fs-sm);
    line-height: 24px;
    text-align: center;
    cursor: ew-resize;
    z-index: 31;
    user-select: none;
    left: -13px;
}

#fxEdgeHandle:hover {
    border-color: var(--beige);
}

#fxEdgeHandle.dragging {
    background: var(--beige);
    color: #111;
}

#effectsColumn .fx-tabs {
    display: flex;
    gap: 4px;
}

/* oikean laidan EVE-nappi kun paneeli on auki */
#eveTIcon.active-tab {
    outline: 2px solid var(--beige, #d2a574);
    outline-offset: 1px;
    border-radius: var(--eve-radius-sm, 6px);
}

/* 2026-09-02 LAYOUT-FIX (käyttäjän bugiraportti: "vasen reuna ei näy enää
   ruudulla, oikea reunus on ylileveä"): 2026-09-01 palautettu quotaBar
   (~316px) kasvatti headerin luontaisen leveyden ~1840px:ään — näytöillä
   1500-1900px sivu alkoi vierittää vaakaan, vasen reuna katosi ja oikealle
   jäi ylileveä kuollut kaista. Korjaus: header rivittyy tarvittaessa (ennen
   vain <=1500px), joustavat statuselementit kutistuvat ellipsillä sen
   sijaan että työntäisivät painikkeet yli reunan, ja sivu ei voi vierittää
   vaakaan (body overflow-x). Painikkeet eivät koskaan leikkaudu — wrap
   siirtää ne toiselle riville ääritapauksessa. */
.header-left,
.header-right {
/* Passi 2b: yhdistetty 2 saman selektorin saantoa (lahtojarjestys sailytetty). */
align-items: center;
    gap: 6px;
    min-width: 0;
min-width: 0;
}

#currentProjectName {
/* 2026-09-03 (kayttajan pyynto): ei kiinteaa pituutta — nimi pitenee
   dynaamisesti ja tyontaa muut headerin objektit tieltaan. */
padding-right: 8px;
    letter-spacing: .002em;
    color: #d4dee5 !important;
    padding-left: 14px;
    margin-left: 2px;
    border-left: 1px solid rgba(212,175,55,.17);
    font-weight: 620;
    font-size: var(--eve-fs-lg) !important;
    white-space: nowrap;
    flex-shrink: 0;
}

#quotaBar {
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

#saveStatus {
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}

/* TOOLS-PANEELI 2026-09-02 (kayttajan pyynto): muokattavat sivusarakkeet.
   Tools-nappi (#toolsReopenTab, vasemman sarakkeen pohjalla) avaa taman
   kelluvan paneelin: yksi sarake tyokalaunappeja. 2026-09-03: rivin klikkaus
   avaa tyokalun, rivin lopun checkbox ohjaa napin nakyvyytta sivusarakkeessa.
   2026-09-06 (kayttajan pyynto): ASETTELU UUSIKSI — rivien laatikot POIS:
   vasemmalla pelkka ympyranappi, oikealla tyokalun nimi valittomasti
   checkboxin vasemmalla puolella; paneelin ylalaidassa oikealla
   "Show in the main window" -sarakeotsikko (.tools-col-head).
   Logiikka 26_tools.js:ssa. */
#toolsPanel {
    position: absolute;
    left: 62px;
    top: 12px;
    z-index: 60;
    width: 250px;
    background: #0c1725;
    border: 1px solid rgba(185,205,220,.14);
    border-radius: var(--eve-radius-lg);
    padding: 10px 12px 12px;
    box-shadow: 0 10px 34px rgba(0,0,0,.55);
}

#toolsPanel.hidden {
    display: none;
}

.tools-panel-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

/* 2026-09-06: "Show in the main window" -sarakeotsikko paneelin ylalaidassa
   oikealla, checkbox-sarakkeen ylapuolella (ennen sulku-X:aa). */
.tools-panel-head .tools-col-head {
    font-size: .66rem;
    line-height: 1.25;
    text-align: right;
    color: var(--text-dim, #8fa3b3);
    max-width: 108px;
    margin-right: 2px;
    user-select: none;
}

#toolsPanelList {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* 2026-09-06 (kayttajan pyynto): rivi EI ole enaa laatikko — ei taustaa
   eika reunusta. Vasemmalla pelkka ympyranappi; oikealla nimi + checkbox. */
.tools-item {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    background: none;
    border: none;
    border-radius: 0;
    padding: 3px 2px;
    cursor: pointer;
    color: #dce6ec;
    font-size: .8rem;
    text-align: left;
}

.tools-item:hover {
    background: none;
}

.tools-item:hover img {
    filter: brightness(1.15);
}

/* Ympyranappi ilman laatikkoa — sama muoto kuin sivusarakkeiden
   round-ikonit. */
.tools-item img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: block;
    flex-shrink: 0;
}

/* Spacer tyontaa nimen + checkboxin rivin oikeaan laitaan. */
.tools-item .tools-spacer {
    flex: 1;
    min-width: 6px;
}

/* 2026-09-06: nimi istuu valittomasti checkboxin vasemmalla puolella
   (teksti lahempana ruksia kuin nappia) — ei enaa flex:1-venytys
   napin peralle. */
.tools-item .tools-name {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: right;
    margin-right: 8px;
}

.tools-item .tools-check {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    accent-color: #3ecf6e;
    cursor: pointer;
    margin: 0;
}

.tools-item.tools-off {
    opacity: .55;
}

#toolsReopenTab.active-tab {
    border-color: rgba(212,175,55,.55);
}

/* ===== TOOLBAR MENUS (2026-09-02, user request) ===========================
   The transcript toolbar's 13 loose buttons moved into two accessible
   dropdown menus (Edit / Actions). The wrapper keeps the historical
   #ttToolbarBtns id so EVERY theme's `#ttToolbarBtns .tt-btn …` rules keep
   styling the menu triggers and items unchanged; the wrapper itself is
   display:contents so the menus sit inline in the toolbar's flex row.
   The −/+ collapse button and its rules are gone for good. */
#ttToolbarBtns.tt-menu-bar {
    display: contents;
}

#transcriptColumn .tt-menu-wrap {
    order: 3;
    position: relative;
}

#transcriptColumn #ttSelInfo {
    order: 3;
    align-self: center;
}

.tt-menu-btn::after {
    content: '▾';
    margin-left: 6px;
    font-size: 0.72em;
    opacity: 0.75;
}

.tt-menu-btn[aria-expanded="true"] {
    border-color: rgba(228, 183, 100, 0.55);
    color: #f4f7f9;
}

.tt-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 40;
    min-width: 210px;
    padding: 6px;
    background: var(--eve-night-850, #101c2b);
    border: 1px solid rgba(185,205,220,.18);
    border-radius: var(--eve-radius-md, 10px);
    box-shadow: 0 14px 34px rgba(0,0,0,.5);
}

.tt-menu.hidden {
    display: none;
}

.tt-menu .tt-menu-item {
    display: flex;
    width: 100%;
    margin: 0 0 2px;
    text-align: left;
    justify-content: flex-start;
    white-space: nowrap;
}

.tt-menu .tt-menu-item:last-child {
    margin-bottom: 0;
}

/* keyboard focus must be at least as visible as hover (accessibility) */
.tt-menu .tt-menu-item:focus-visible,
    .tt-menu-btn:focus-visible {
    outline: 2px solid var(--eve-gold-bright, #e4b764);
    outline-offset: 1px;
}

.tt-menu-sep {
    height: 1px;
    margin: 5px 4px;
    background: rgba(185,205,220,.14);
}

/* the font-size row is NOT a menuitem — arrow-key nav skips it (role=none) */
.tt-menu-static {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 6px 8px;
    margin: 0;
    color: var(--text-dim, #9eafbe);
}

.tt-menu-static select {
    flex: 1;
}

.tt-create {
    font-weight: 700;
}

/* ===== 2026-09-03 (pyyntosetti 3): HEADER-PAANAPIT TEEMAN MUKAISIKSI =======
   New Project / Old Projects / Export eivat noudattaneet kulta/navy-teemaa:
   New Project oli .header-btn.primary:n himmea harmaa, Old Projects pelkka
   perusnappi ja Export kovakoodattu inline-keltainen. Nyt yhtenainen
   teemapaletti: navy-gradientti + kultareunus + kultateksti (New/Old) ja
   tayte kulta-gradientti (Export, ohjelman paatoiminto). .app-header-etuliite
   voittaa vanhat saannot spesifiteetilla; Exportin inline-tyyli poistettu
   index.html:sta samalla. */
.app-header .header-btn.primary[onclick*="showNewProjectModal"],
.app-header .header-btn[onclick*="showOldProjects"] {
    background: linear-gradient(180deg, rgba(27,43,59,.98) 0%, rgba(13,27,41,.99) 100%);
    border: 1px solid rgba(228,183,100,.38);
    color: var(--eve-gold-bright);
    font-weight: 650;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05),
        0 4px 12px rgba(0,0,0,.22);
}

.app-header .header-btn.primary[onclick*="showNewProjectModal"]:hover:not(:disabled),
.app-header .header-btn[onclick*="showOldProjects"]:hover:not(:disabled) {
    background: linear-gradient(180deg, rgba(36,55,73,.98) 0%, rgba(18,35,53,.99) 100%);
    border-color: rgba(228,183,100,.62);
    color: #ffe1a8;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.07),
        0 4px 14px rgba(0,0,0,.26),
        0 0 14px rgba(228,183,100,.12);
}

.app-header button[onclick*="showNewProjectModal"] > .icon::before,
.app-header button[onclick*="showOldProjects"] > .icon::before {
    background: var(--eve-gold-soft);
}

.app-header button[onclick*="showNewProjectModal"]:hover > .icon::before,
.app-header button[onclick*="showOldProjects"]:hover > .icon::before {
    background: #ffe1a8;
}

.app-header #renderBtn {
    background: linear-gradient(180deg, var(--eve-gold-bright) 0%, var(--eve-gold) 100%);
    border: 1px solid rgba(255,216,141,.55);
    color: #2a1e07;
    font-weight: 700;
    text-shadow: none;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.35),
        0 4px 14px rgba(228,183,100,.22);
}

.app-header #renderBtn:hover:not(:disabled) {
    background: linear-gradient(180deg, #ffe3a6 0%, #eebd68 100%);
    border-color: rgba(255,222,150,.8);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.42),
        0 5px 18px rgba(228,183,100,.34);
}

.app-header #renderBtn > .icon::before,
.app-header #renderBtn:hover > .icon::before {
    background: #2a1e07;
}

/* SCENE LAYERS (2026-09-03, user request): the music/effects layer rows in
   the scene panel. Content-driven visibility — the sections themselves are
   shown/hidden by _renderSceneLayers() (12_audio_track.js), not here. */
.scene-layer-section {
    padding-top: 4px;
    padding-bottom: 4px;
}
.scene-layer-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 12px;
}
.scene-layer-thumb {
    width: 32px;
    height: 24px;
    object-fit: cover;
    border-radius: 4px;
    flex: none;
    background: var(--bg-card);
}
.scene-layer-name {
    flex: 1;
    min-width: 0;
    font-size: 0.75rem;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.scene-layer-vol {
    font-size: 0.7rem;
    color: var(--text-dim);
    flex: none;
}
.scene-layer-remove {
    padding: 1px 7px;
    font-size: 0.7rem;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-dim);
    cursor: pointer;
    flex: none;
}
.scene-layer-remove:hover {
    color: var(--text);
    border-color: var(--text-dim);
}
/* SCENE LAYER BARS (2026-09-03, kayttajan pyynto): musiikki- ja
   efektikerrokset janoina skenepaneelissa, klippiaikajanan ylapuolella.
   Janan kuori on samanmuotoinen kuin klippijanalla (.trim-slider), mutta
   tayton vari on kerroskohtainen: musiikki = punainen, efektit = sininen. */
.scene-layer-bar {
    position: relative;
    height: 29px;
    background: #07101a;
    border: 1px solid rgba(185,205,220,.10);
    border-radius: var(--eve-radius-sm);
    box-shadow: inset 0 1px 5px rgba(0,0,0,.24);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 6px;
    /* JARJESTYS 2026-09-04: kaikki aikajanat saman levyisia — jana tayttaa
       koko osion leveyden kuten klippijana (oli margin: 3px 12px). */
    margin: 3px 0;
    overflow: hidden;
}
.scene-layer-bar-fill {
    position: absolute;
    top: 2px;
    bottom: 2px;
    left: 2px;
    right: 2px;
    border-radius: var(--eve-radius-sm);
    pointer-events: none;
}
.music-bar .scene-layer-bar-fill {
    background: rgba(214,58,66,.42);
    border: 1px solid rgba(240,110,116,.55);
}
.effects-bar .scene-layer-bar-fill {
    background: rgba(64,128,222,.42);
    border: 1px solid rgba(116,172,248,.55);
}
/* EFEKTIKAHVAT 2026-09-04: efektijanan taytto nayttaa overlayn oman
   aikaikkunan ja sita voi venyttaa reunoista — myos yli skenerajojen,
   joten efektijanan overflow pitaa olla visible ja kahvat klikattavia. */
.effects-bar {
    overflow: visible;
}
.fx-handle {
    position: absolute;
    top: -3px;
    bottom: -3px;
    width: 12px;
    z-index: 3;
    cursor: ew-resize;
    pointer-events: auto;
    touch-action: none;
}
.fx-handle::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 5px;
    transform: translateX(-50%);
    background: rgba(150,195,255,.95);
    border: 1px solid rgba(10,20,34,.8);
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0,0,0,.5);
}
.fx-handle:hover::after {
    background: #dcebff;
}
.fx-handle-l { left: -6px; }
.fx-handle-r { right: -6px; }

/* SKENENAVIGAATIO (2026-09-04, kayttajan pyynto): ‹ › -nuolinapit
   skenepaneelin vasemmassa ja oikeassa laidassa, pystysuunnassa
   keskella. Paadyssa disabled. */
/* HUOM: #trimPanel-etuuli tarvitaan — yleinen button[title]-saanto
   (position: relative, spesifisyys 0,1,1) voittaisi muuten pelkan
   luokan (0,1,0) ja rikkoisi absolute-ankkurit. */
#trimPanel .trim-scene-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 30px;
    height: 52px;
    padding: 0;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--text);
    background: #101c2b;
    border: 1px solid rgba(185,205,220,.22);
    cursor: pointer;
    opacity: .85;
}
#trimPanel .trim-scene-nav-prev {
    left: 2px;
    border-radius: 0 var(--eve-radius-md) var(--eve-radius-md) 0;
}
#trimPanel .trim-scene-nav-next {
    right: 2px;
    border-radius: var(--eve-radius-md) 0 0 var(--eve-radius-md);
}
#trimPanel .trim-scene-nav:hover:not(:disabled) {
    background: #182a40;
    border-color: var(--eve-gold-soft, rgba(227,193,125,.55));
    opacity: 1;
}
#trimPanel .trim-scene-nav:disabled {
    opacity: .25;
    cursor: default;
}
.scene-layer-bar > *:not(.scene-layer-bar-fill) {
    position: relative;
    z-index: 1;
}
.scene-layer-bar-label {
    flex: 1;
    min-width: 0;
    font-size: 0.75rem;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 1px 2px rgba(0,0,0,.6);
}
.scene-layer-bar-vol {
    font-size: 0.7rem;
    color: var(--text);
    flex: none;
    text-shadow: 0 1px 2px rgba(0,0,0,.6);
}
/* 2026-09-05: music start-offset drag — the red bar's fill is grabbed
   sideways (same model as the clip trim window); the @-badge shows the
   chosen start point of the track. */
.music-bar .scene-layer-bar-fill.music-offset-drag {
    cursor: grab;
    touch-action: none;
}
.music-bar .scene-layer-bar-fill.music-offset-drag:active {
    cursor: grabbing;
}
.scene-layer-bar-off {
    font-size: 0.66rem;
    color: var(--text-dim, #ccc);
    flex: none;
    min-width: 0;
    text-shadow: 0 1px 2px rgba(0,0,0,.6);
}
.scene-layer-bar-off:empty {
    display: none;
}
.scene-layer-bar .scene-layer-thumb {
    width: 30px;
    height: 21px;
}
.scene-layer-bar .scene-layer-remove {
    background: rgba(7,16,26,.55);
    color: var(--text);
    border-color: rgba(185,205,220,.35);
}
.scene-layer-bar .scene-layer-remove:hover {
    background: rgba(7,16,26,.85);
    border-color: var(--text-dim);
}
/* BUG REPORT (2026-09-03, kayttajan pyynto): headerin Raportoi bugi
   -napin 3D-pirkkokuvake — PNG-kuva, EI CSS-maskia (varikuvake, toisin
   kuin headerin muut yksiväriset ikonit). */
.bug-report-icon {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    vertical-align: middle;
    flex: none;
}

/* ============================================================
   GPU-ESILAMMITYS "Enable AI" -napin tilat (SPECS_gpu_esilammitus
   v2 2026-09-04). Luokat asettaa pollari 02_core_state.js:ssa.
   gpu-off = himmea/harmaa, gpu-starting = sykkiva, gpu-ready =
   kultainen hehku. 2026-09-04
   ============================================================ */
#gpuWarmBtn {
    padding: 0;
    transition: opacity .3s, filter .3s, box-shadow .3s;
}

#gpuWarmBtn img {
    border-radius: 50%;
}

#gpuWarmBtn.gpu-off {
    opacity: .45;
    filter: grayscale(.7);
}

#gpuWarmBtn.gpu-off:hover {
    opacity: .8;
}

#gpuWarmBtn.gpu-starting {
    opacity: 1;
    animation: gpuWarmPulse 1.6s ease-in-out infinite;
}

#gpuWarmBtn.gpu-ready {
    opacity: 1;
    box-shadow: 0 0 12px 2px rgba(216, 178, 90, .55);
    border-radius: 50%;
}

@keyframes gpuWarmPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .45; }
}

/* 2026-09-05 GPU-WARM-OFF-TOGGLE: warm-ikkunan ollessa auki nappi on
   POIS-kytkin — punainen hehku erottaa sen selvasti Enable-tilasta
   (kultainen gpu-ready). Klikkaus sammuttaa (DELETE /api/gpu/warm). */
#gpuWarmBtn.gpu-warm-on {
    box-shadow: 0 0 12px 2px rgba(220, 70, 60, .65);
    border-radius: 50%;
}

#gpuWarmBtn.gpu-warm-on:hover {
    box-shadow: 0 0 16px 4px rgba(220, 70, 60, .85);
}

/* ============================================================================
   2026-09-05 (kayttajan pyynto): HEADER-SIIVOUS-PAKETTI
   1) Rename-kuvake Old Projects -popupiin (img, ei emojia — emojisiivous
      ja fonttikorvaukset tekivat siita tyhjan ruudun).
   2) Report bug -nappi samankokoiseksi kuin sivusarakkeiden napit (50px,
      kuvake 44px) — oli "naurettavan pieni" 34px/18px.
   3) Sivusarakkeiden uusimmat napit (Enable AI vasemmalla, Auto-build
      oikealla) nayttivat muita pienemmilta, koska naiden PNG:ien ympyra-
      grafiikka ei tayta kuvaruutua reunasta reunaan kuten vanhempien
      ikonien (mitattu: enable-ai ~94%, autobuild ~85%). Kuvakkeet
      suurennetaan niin, etta NAKYVA ympyra on sama 44px kuin muilla.
   4) Export-nappi lopullisesti teemojen mukaiseksi: korkea-spesifiteettinen
      loppulohko voittaa kaikki vanhat #renderBtn-saannot (harmaa/keltainen
      periytyvat historian kerroksista). Playfull = sama nappiperhe kuin
      muut header-painikkeet (navy/moonlight — 2026-09-05 kayttajan
      pyynnosta, aiemmin kulta-gradientti), Formal = navy-taytto +
      kultareunus/teksti (formal-teeman kulta/navy-paletti).
   ========================================================================== */

/* (1) Old Projects -popupin toimintonappien kuvakkeet */
.modal .project-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.modal .project-action img.project-action-icon {
    width: 15px;
    height: 15px;
    display: block;
}

/* (2) Report bug -nappi sivusarakkeiden kokoon */
.app-header #bugReportBtn {
    width: 50px;
    height: 50px;
    min-width: 50px;
    min-height: 50px;
    padding: 0;
    flex-shrink: 0;
}
.app-header #bugReportBtn .bug-report-icon {
    width: 44px;
    height: 44px;
}

/* (3) Enable AI + Auto-build: nakyva kuvake samaan 44px-kokoon kuin muut */
#reopenTabStack #gpuWarmBtn img {
    width: 47px;
    height: 47px;
}
#candTabStack #autobuildReopenTab img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

/* (4) Export — playfull (oletus): 2026-09-05 kayttajan pyynnosta sama
   nappiperhe kuin muut header-painikkeet — kulta-gradientti POIS, nappi
   sulautuu projektin Nocturne-navy-ilmeeseen (translucent navy-tausta,
   himmea moonlight-teksti, ohut navy-reunus; hoverissa #172438 + frost
   kuten sisar-napeilla). */
.app-header #renderArea #renderBtn {
    background: rgba(15, 25, 40, 0.62);
    border: 1px solid #31455e;
    color: #aebbc7;
    font-weight: 550;
    font-size: var(--eve-fs-xs);
    letter-spacing: .002em;
    text-shadow: none;
    min-height: 34px;
    padding: 0 12px;
    box-shadow: none;
}
.app-header #renderArea #renderBtn:hover:not(:disabled) {
    background: #172438;
    border-color: rgba(185, 205, 220, 0.72);
    color: var(--eve-frost);
    filter: none;
    box-shadow: 0 5px 16px rgba(0, 0, 0, .14);
}
.app-header #renderArea #renderBtn:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: none;
}

/* (4b) Export — formal: navy-taytto + kultareunus (sama kuin formal-teeman
   kulta/navy-paletti) */
html[data-theme="formal"] .app-header #renderArea #renderBtn {
    background: linear-gradient(180deg, rgba(27,43,59,.98) 0%, rgba(13,27,41,.99) 100%);
    border: 1px solid rgba(228,183,100,.55);
    color: var(--eve-gold-bright);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05),
        0 4px 12px rgba(0,0,0,.22);
}
html[data-theme="formal"] .app-header #renderArea #renderBtn:hover:not(:disabled) {
    background: linear-gradient(180deg, rgba(36,55,73,.98) 0%, rgba(18,35,53,.99) 100%);
    border-color: rgba(228,183,100,.75);
    color: #ffe1a8;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.07),
        0 4px 14px rgba(0,0,0,.26),
        0 0 14px rgba(228,183,100,.12);
}

/* 2026-09-05 (kayttajan pyynto): CLIPGEN-PANEELI KAHDELLE RIVILLE —
   rivi 1: pituus + alkukuva (pieni nappi + pieni esikatselu); rivi 2:
   audio + kuvasuhde (ilman reunoja) + kustannusarvio + Generate. */
#clipGenPanel .clipgen-controls {
    flex-wrap: nowrap;
    gap: 8px;
}
#clipGenPanel .clipgen-ctl input[type="range"] {
    width: 60px;
}
#clipGenPanel .clipgen-img-inline {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    /* 2026-09-05: wrap the start-image buttons inside a narrow panel
       (they were one nowrap row that overflowed the panel edge). */
    flex-wrap: wrap;
    row-gap: 4px;
    min-width: 0;
}
#clipGenPanel .clipgen-img-inline .btn {
    padding: 3px 7px;
    font-size: var(--eve-fs-xs);
    white-space: nowrap;
}
#clipGenPanel .clipgen-img-preview {
    display: inline-flex;
    align-items: center;
    min-height: 0;
}
#clipGenPanel .clipgen-img-preview img {
    max-height: 22px;
    max-width: 36px;
    border-radius: 3px;
}
#clipGenPanel #clipGenAspect {
    border: none;
    background: transparent;
    color: var(--text, #eee);
    font-size: var(--eve-fs-xs);
    padding: 0 1px;
}
#clipGenPanel .clipgen-estimate {
    flex: 1;
    min-width: 0;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#clipGenPanel #clipGenBtn {
    white-space: nowrap;
    flex-shrink: 0;
}

/* 2026-09-05 (kayttajan pyynto): EXPORT-IKONI "nuoli ylos" — span.icon
   palautettu napille; maski tulee vanhasta #renderBtn > .icon::before
   -saannosta (icons/export.svg). Taalla vain varit: playfull moonlight
   tekstin mukana, formal kulta — voittavat vanhat kulta/musta-saannot
   (7374, 12703) seka sijainnin etta spesifiteetin vuoksi. */
.app-header #renderArea #renderBtn > .icon::before {
    background: #aebbc7;
}
.app-header #renderArea #renderBtn:hover:not(:disabled) > .icon::before {
    background: var(--eve-frost);
}
html[data-theme="formal"] .app-header #renderArea #renderBtn > .icon::before {
    background: var(--eve-gold-bright);
}
html[data-theme="formal"] .app-header #renderArea #renderBtn:hover:not(:disabled) > .icon::before {
    background: #ffe1a8;
}

/* ===== 0911k: esikatselun rajaus/zoom + liimaus ===== */
.pv-crop-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 60;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    opacity: 0.75;
}
.pv-crop-btn:hover { opacity: 1; }
.pv-crop-btn.active {
    background: var(--eve-accent, #4f8cff);
    opacity: 1;
}
#pvCropRect {
    position: absolute;
    z-index: 55;
    border: 2px dashed rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.35);
    cursor: move;
    touch-action: none;
}
.pv-crop-handle {
    position: absolute;
    width: 14px;
    height: 14px;
    background: #fff;
    border: 2px solid var(--eve-accent, #4f8cff);
    border-radius: 3px;
    z-index: 56;
}
.pv-crop-handle-nw { left: -8px; top: -8px; cursor: nwse-resize; }
.pv-crop-handle-ne { right: -8px; top: -8px; cursor: nesw-resize; }
.pv-crop-handle-sw { left: -8px; bottom: -8px; cursor: nesw-resize; }
.pv-crop-handle-se { right: -8px; bottom: -8px; cursor: nwse-resize; }
#previewCropBar {
    position: absolute;
    left: 50%;
    bottom: 10px;
    transform: translateX(-50%);
    z-index: 60;
    display: flex;
    gap: 6px;
    padding: 6px 8px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.25);
}
#previewCropBar button {
    min-width: 34px;
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 13px;
    cursor: pointer;
}
#previewCropBar button:hover { background: rgba(255, 255, 255, 0.25); }
#previewCropBar .pv-crop-done {
    background: var(--eve-accent, #4f8cff);
    border-color: var(--eve-accent, #4f8cff);
    font-weight: 600;
}


/* ===== AI VIDEO ACTIONS (SPEKSI v3.1, 2026-09-16) ===== */
/* The clip-track row: seed thumbnail LEFT of the trim slider, the
   Create/Extend button at the track's end (next to +1 s). */
.trim-clip-row {
    display: flex;
    align-items: stretch;
    gap: 8px;
}
.trim-clip-row .trim-slider {
    flex: 1;
}
#trimAiSeedSlot {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}
#trimAiSeedSlot:empty {
    display: none;
}
.aiv-seed {
    position: relative;
    width: 64px;
    height: 40px;
    border: 1px solid var(--border);
    border-radius: 4px;
    overflow: hidden;
    background: var(--bg-card);
}
.aiv-seed img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.aiv-seed-click {
    cursor: pointer;
    border-color: var(--accent);
}
.aiv-seed-click:hover {
    box-shadow: 0 0 0 1px var(--accent);
}
.aiv-seed-spin {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.45);
    font-size: 1rem;
}
.trim-aivideo-btn {
    display: block;
    margin: 6px 0 0 auto;
    font-size: var(--eve-fs-xs);
}
.trim-aivideo-btn:hover {
    color: var(--accent);
}
.trim-aivideo-btn:disabled {
    opacity: 0.6;
    cursor: wait;
}
/* The Create/Extend dialog (markup in index.html #aiVideoModal). */
/* AI VIDEO REVIEW -popup (2026-09-18): promptit + seed-kuvat ennen eraa */
.aivr-loading {
    padding: 24px;
    text-align: center;
    color: var(--text-dim);
}
.aivr-note {
    font-size: 0.8rem;
    color: var(--text-dim);
    margin: 0 0 8px;
}
.aivr-list {
    max-height: 55vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-right: 4px;
}
.aivr-row {
    display: grid;
    grid-template-columns: 148px 1fr;
    gap: 10px;
    align-items: start;
    background: var(--bg-darker);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px;
}
.aivr-row.aivr-off {
    opacity: 0.45;
}
.aivr-seed {
    width: 148px;
    height: 84px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: #000;
}
.aivr-rowhead {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    gap: 8px;
}
.aivr-scene {
    font-size: 0.78rem;
    color: var(--text-dim);
    font-weight: 600;
}
.aivr-check {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    cursor: pointer;
    white-space: nowrap;
}
.aivr-row textarea {
    width: 100%;
    resize: vertical;
    font-size: 0.85rem;
    padding: 6px 8px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
}
.aivr-vfail {
    font-size: 0.75rem;
    color: var(--warning, #e0a030);
    margin-top: 4px;
}

.aiv-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.aiv-top {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
#aiVideoSeedImg {
    width: 128px;
    height: 72px;
    object-fit: cover;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-card);
}
#aiVideoSeedImg:not([src]) {
    visibility: hidden;
}
.aiv-fields {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}
.aiv-dur-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
}
.aiv-dur-label input {
    width: 72px;
}
.aiv-estimate {
    font-size: 0.8rem;
    color: var(--text-dim);
}
.aiv-prompt-label {
    font-size: 0.8rem;
    color: var(--text-dim);
    margin-bottom: -6px;
}
#aiVideoPrompt {
    width: 100%;
    resize: vertical;
    font-size: 0.85rem;
}
.aiv-vision-state {
    font-size: 0.78rem;
    color: var(--text-dim);
    min-height: 1em;
}
.aiv-skip-note {
    font-size: 0.78rem;
    color: var(--warning, #d9a13b);
}
.aiv-overflow {
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.82rem;
}
.aiv-overflow-title {
    color: var(--text-dim);
}
.aiv-overflow label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}
.aiv-overflow-warn {
    font-size: 0.76rem;
    color: var(--warning, #d9a13b);
}
/* BR23-fast (2026-09-18, SPECS_ltx_nopea_laadukas): nopea/laadukas-radiot
   AI-video-dialogissa + review-popupissa. */
.aiv-quality {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.82rem;
}
.aiv-quality .aiv-quality-label {
    color: var(--text-dim);
    font-size: 0.8rem;
}
.aiv-quality label {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}
.aivr-quality {
    padding: 0 4px 8px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 4px;
}
/* BR23 (SPECS_aivideo_per_patka_promptit): patkakohtaisten prompttien
   otsikot + huomautus (dialogi + review-popup). */
.aiv-seg-caption {
    font-size: 0.76rem;
    color: var(--text-dim);
    margin-top: 8px;
}
.aiv-seg textarea,
.aivr-segta {
    width: 100%;
    resize: vertical;
    font-size: 0.85rem;
}
.aiv-seg-note {
    font-size: 0.74rem;
    color: var(--text-dim);
    margin-top: 6px;
    font-style: italic;
}


/* ==========================================================================
   AC/1178 (2026-10-01): komponenttikohtaiset reduced-motion-ohitukset.
   Ylempi universaali *-reset asettaa vain animation-duration/iteration-
   count — näiden komponenttien spesifisemmät animation-shorthandit
   ohittivat sen, joten pulse/spin jatkui reduced-motion-tilassakin.
   Sijoitettu tiedoston loppuun: sama tai korkeampi spesifisyys +
   myöhempi lähdejärjestys voittaa. Export-animaatioihin ei kajota.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    #transcribeChip,
    .rec-dot,
    .rec-hud .rec-dot,
    .clipgen-spinner,
    .collab-live-badge,
    #gpuWarmBtn.gpu-starting {
        animation: none;
    }
}


/* ==========================================================================
   AC/1187 (2026-10-01): korttien toimintopainikkeet eivät saa olla vain
   hoverin takana — paljastus myös näppäinfokuksella (:focus-within /
   :focus-visible) ja kosketuslaitteilla (hover: none → aina näkyvissä).
   ========================================================================== */
.pool-card:focus-within .pool-share-btn,
.pool-card:focus-within .pool-matte-btn,
.suggestion-card:focus-within .import-own-btn,
.scene-block:focus-within .mute-btn,
.scene-block:focus-within .copy-btn,
.scene-block:focus-within .split-btn,
.scene-block:focus-within .merge-btn,
.scene-block:focus-within .trim-btn,
.scene-block:focus-within .delete-btn {
    opacity: 1;
}
.pool-card:focus-within .pool-share-btn {
    display: block;
}
.pool-share-btn:focus-visible,
.pool-matte-btn:focus-visible,
.import-own-btn:focus-visible,
.scene-block .mute-btn:focus-visible,
.scene-block .copy-btn:focus-visible,
.scene-block .split-btn:focus-visible,
.scene-block .merge-btn:focus-visible,
.scene-block .trim-btn:focus-visible,
.scene-block .delete-btn:focus-visible {
    opacity: 1;
    display: block;
}
@media (hover: none) {
    .pool-share-btn { display: block; }
    .pool-matte-btn,
    .suggestion-card .import-own-btn,
    .scene-block .mute-btn,
    .scene-block .copy-btn,
    .scene-block .split-btn,
    .scene-block .merge-btn,
    .scene-block .trim-btn,
    .scene-block .delete-btn {
        opacity: 1;
    }
}


/* ==========================================================================
   AC/1196 (2026-10-01): mobiili-landing — ≤900px mediaquery vaihtaa
   start-cardin yhteen sarakkeeseen, mutta display:contents-wrapperien
   TAKANA olevat painikkeet ja auth-dismiss säilyttivät desktop-sijoituksensa
   (grid-column 1/2/3, row 4) spesifisempien sääntöjen vuoksi, mikä loi
   implisiittisiä ylimääräisiä sarakkeita. Resetoidaan itse painikkeet
   samalla spesifisyydellä, myöhempänä lähteessä.
   ========================================================================== */
@media (max-width: 900px) {
    #startScreen .start-cta button:first-child,
    #startScreen .start-cta button.start-secondary,
    #startScreen .start-card > div:last-child .auth-dismiss {
        grid-column: 1;
        grid-row: auto;
    }
}