/* FX Minimal - Compact Search Panel
   v1.2 - Multi-folder assets, inline transitions
*/

/* ================================
   CSS VARIABLES
   ================================ */

:root {
    --bg-primary: #1a1a1a;
    --bg-secondary: #242424;
    --bg-tertiary: #2e2e2e;
    --bg-hover: #383838;

    --text-primary: #ffffff;
    /* Same neutral greys, lighter so descriptions are readable on the dark
       panel (were #a0a0a0 / #606060 - the muted one was ~2.9:1 contrast,
       now ~5:1 or better on every panel background). */
    --text-secondary: #bdbdbd;
    --text-muted: #999999;

    /* --accent-blue is this panel's one THEME accent - the color used for
       active/selected states, focus rings, primary buttons, progress bars
       and badges everywhere in the UI (79 usages, all already wired through
       this one variable or its -rgb twin below for translucent tints). The
       theme switcher (tool_theme_switcher.js) overrides both per theme via
       body[data-theme="..."] further down. --accent-green/-orange/-red/
       -purple are NOT theme colors - they're fixed semantic colors (success,
       warning, error, and the other 3 Quick Slots categories) and the
       switcher never touches them. The one place --accent-blue itself also
       serves as a fixed category identity (Quick Slots' Video FX category)
       is pinned to the literal #0a84ff there instead of this variable, so
       that one category can never collide with another as the theme changes. */
    --accent-blue: #0a84ff;
    --accent-blue-rgb: 10, 132, 255;
    --accent-green: #30d158;
    --accent-orange: #ff9f0a;
    --accent-red: #ff453a;
    --accent-purple: #bf5af2;

    --border-subtle: rgba(255, 255, 255, 0.08);
    --border-medium: rgba(255, 255, 255, 0.12);

    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);

    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 10px;
}

/* THEME SWITCHER PRESETS - 5 colors including the default above. Every one
   of the 79 places --accent-blue is used, plus the ~40 rgba(var(--accent-
   blue-rgb),X) translucent tints, updates instantly from these two
   overrides - nothing else needs to change per theme. Picked to stay clear
   of the 4 fixed Quick Slots category colors (orange/purple/green/red, plus
   pinned Video-FX blue) so a themed accent is never confused for a category
   swatch, and kept close to --accent-blue's own brightness so white text on
   an accent-colored button (several buttons do this) stays about as legible
   under every theme as it already is today. */
body[data-theme="indigo"] { --accent-blue: #5e5ce6; --accent-blue-rgb: 94, 92, 230; }
body[data-theme="pink"]   { --accent-blue: #ff375f; --accent-blue-rgb: 255, 55, 95; }
body[data-theme="teal"]   { --accent-blue: #32ade6; --accent-blue-rgb: 50, 173, 230; }
body[data-theme="amber"]  { --accent-blue: #e0a300; --accent-blue-rgb: 224, 163, 0; }

/* ================================
   RESET & BASE
   ================================ */

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

/* Panel-wide: nothing should be text-selectable by default (it's an app,
   not a document) - re-enabled below for the few elements where selecting
   text is actually useful (inputs, textareas, rename fields). */
* {
    -webkit-user-select: none;
    user-select: none;
}
input, textarea, [contenteditable="true"], [contenteditable=""] {
    -webkit-user-select: text;
    user-select: text;
}

body {
    background: var(--bg-primary);
    color: var(--text-primary);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
    font-size: 13px;
    line-height: 1.4;
    padding: 0;
    /* Removed padding so it touches the edges */
    display: flex;
    /* NEW: Puts the sidebar and content side-by-side */
    flex-direction: row;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    overflow: hidden;
}

/* ================================
   SEARCH CONTAINER
   ================================ */

.search-container {
    position: sticky;
    top: 0;
    /* Pins it to the top */
    z-index: 2000;
    /* Keeps it above everything else */
    background: var(--bg-primary);
    /* Hides things sliding behind it */
    padding-top: 4px;
    padding-bottom: 4px;
    margin-bottom: 6px;
}

#searchInput {
    width: 100%;
    padding: 12px 48px 12px 14px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 400;
    outline: none;
    transition: all 0.15s ease;
}

#searchInput::placeholder {
    color: var(--text-muted);
}

#searchInput:focus {
    border-color: var(--border-medium);
    background: var(--bg-tertiary);
    box-shadow: none; /* <-- Removed the blue glow completely! */
}

/* ================================
   MODE TOGGLE
   ================================ */

.mode-toggle {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    padding: 0;
}

.mode-toggle:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--border-medium);
    color: var(--text-primary);
}

.mode-toggle svg {
    width: 16px;
    height: 16px;
}

.mode-toggle .icon-assets {
    display: none;
}

.mode-toggle.mode-fx {
    background: rgba(var(--accent-blue-rgb), 0.1);
    border-color: rgba(var(--accent-blue-rgb), 0.3);
    color: var(--accent-blue);
}

.mode-toggle.mode-assets {
    background: rgba(48, 209, 88, 0.1);
    border-color: rgba(48, 209, 88, 0.3);
    color: var(--accent-green);
}

.mode-toggle.mode-assets .icon-fx {
    display: none;
}

.mode-toggle.mode-assets .icon-assets {
    display: block;
}

/* Folder count badge */
.mode-toggle .folder-count {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 14px;
    height: 14px;
    background: var(--accent-green);
    color: #000;
    font-size: 9px;
    font-weight: 700;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
}

.mode-toggle .folder-count.hidden {
    display: none;
}

/* ================================
   RESULTS DROPDOWN
   ================================ */

.results-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: var(--bg-secondary);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    max-height: 210px; /* INCREASED TO FIT 4 TRANSITIONS! */
    overflow-y: auto;
    /* This tells it to scroll if it hits 180px */
    overflow-x: hidden;
    z-index: 1000;
    display: none;
}

.results-dropdown.visible {
    display: block;
    animation: slideDown 0.15s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ================================
   RESULT ITEM
   ================================ */

.result-item {
    padding: 10px 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background 0.1s ease;
    border-bottom: 1px solid var(--border-subtle);
}

.result-item:last-child {
    border-bottom: none;
}

.result-item:hover,
.result-item.selected {
    background: rgba(255, 255, 255, 0.06);
}

.result-item.selected {
    background: rgba(var(--accent-blue-rgb), 0.15);
}

.result-content {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

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

.result-type {
    font-size: 9px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}

.result-type.type-video {
    color: var(--accent-blue);
}

.result-type.type-audio {
    color: var(--accent-orange);
}

.result-type.type-tool {
    color: var(--accent-purple);
    font-weight: bold;
}

.result-type.type-video-preset {
    color: var(--accent-green);
}

.result-type.type-audio-preset {
    color: var(--accent-green);
}

.result-type.type-video-transition {
    color: var(--accent-orange);
}

.result-type.type-audio-transition {
    color: var(--accent-orange);
}

.result-type.type-property {
    color: #32d7ff;
    font-weight: bold;
}

/* Add to slot button */
.add-slot-btn {
    width: 22px;
    height: 22px;
    background: transparent;
    border: 1.5px solid var(--text-muted);
    border-radius: 50%;
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 10px;
    opacity: 0;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.result-item:hover .add-slot-btn,
.result-item.selected .add-slot-btn {
    opacity: 0.7;
}

.add-slot-btn:hover {
    opacity: 1 !important;
    background: var(--accent-green);
    border-color: var(--accent-green);
    color: white;
    transform: scale(1.1);
}

/* Delete Macro Button */
.delete-macro-btn {
    width: 22px;
    height: 22px;
    background: transparent;
    border: 1.5px solid var(--text-muted);
    border-radius: 50%;
    color: var(--text-muted);
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 6px;
    opacity: 0;
    transition: all 0.15s ease;
    flex-shrink: 0;
    padding-bottom: 2px;
    /* Centers the 'x' visually */
}

.result-item:hover .delete-macro-btn,
.result-item.selected .delete-macro-btn {
    opacity: 0.7;
}

.delete-macro-btn:hover {
    opacity: 1 !important;
    background: rgba(255, 69, 58, 0.2);
    border-color: var(--accent-red);
    color: var(--accent-red);
    transform: scale(1.1);
}

/* Grid-card and saved-curve-row delete buttons aren't inside a .result-item,
   so the hover rule above never applied to them - they were rendering fully
   invisible (opacity: 0 forever) even though they worked when clicked. Give
   them a dim always-visible state instead, brightening further on the
   card's own hover. */
.stock-card .delete-macro-btn,
.curve-lib-row .delete-macro-btn {
    opacity: 0.55;
}

.stock-card:hover .delete-macro-btn {
    opacity: 0.9;
}

/* "Reveal" shares the round delete-button shape (for Asset-Folder-sourced
   Library cards, which can't be deleted from here) but isn't destructive, so
   it hovers blue instead of red. */
.reveal-btn:hover {
    background: rgba(var(--accent-blue-rgb), 0.15) !important;
    border-color: var(--accent-blue) !important;
    color: var(--accent-blue) !important;
}

/* ================================
   ASSET ITEMS
   ================================ */

.result-item.asset-item {
    border-left: 3px solid transparent;
    padding-left: 11px;
}

.result-item.asset-audio {
    border-left-color: var(--accent-orange);
}

.result-item.asset-video {
    border-left-color: var(--accent-blue);
}

.result-item.asset-image {
    border-left-color: var(--accent-green);
}

.asset-badge {
    font-size: 8px;
    font-weight: 600;
    text-transform: uppercase;
    padding: 2px 5px;
    border-radius: 3px;
    margin-left: 6px;
}

.asset-badge.badge-audio {
    background: rgba(255, 159, 10, 0.15);
    color: var(--accent-orange);
}

.asset-badge.badge-video {
    background: rgba(var(--accent-blue-rgb), 0.15);
    color: var(--accent-blue);
}

.asset-badge.badge-image {
    background: rgba(48, 209, 88, 0.15);
    color: var(--accent-green);
}

.asset-ext {
    font-size: 10px;
    color: var(--text-muted);
    margin-left: 4px;
}

/* Folder source indicator */
.asset-folder-source {
    font-size: 9px;
    color: var(--text-muted);
    opacity: 0.6;
    margin-left: auto;
    padding-left: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 80px;
}

/* Playing state */
.result-item.playing {
    background: rgba(255, 159, 10, 0.1);
}

.result-item.playing::after {
    content: '🔊';
    font-size: 11px;
    margin-left: 8px;
    animation: pulse 1s ease-in-out infinite;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

/* ================================
   TRANSITION OPTIONS (Inline)
   ================================ */

.transition-options {
    display: none;
    padding: 0;
    margin: 0;
    border-top: 1px solid var(--border-subtle);
    background: var(--bg-tertiary);
}

.transition-options.visible {
    display: block;
}

.transition-option {
    padding: 10px 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: background 0.1s ease;
    border-bottom: 1px solid var(--border-subtle);
}

.transition-option:last-child {
    border-bottom: none;
}

.transition-option:hover,
.transition-option.selected {
    background: rgba(255, 159, 10, 0.1);
}

.transition-option.selected {
    background: rgba(255, 159, 10, 0.2);
}

.transition-option-icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-orange);
    flex-shrink: 0;
}

.transition-option-icon svg {
    width: 16px;
    height: 16px;
}

.transition-option-text {
    flex: 1;
}

.transition-option-title {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-primary);
}

.transition-option-desc {
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 2px;
}

.transition-option-key {
    font-size: 9px;
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.06);
    padding: 2px 6px;
    border-radius: 3px;
}

/* ================================
   FOLDER MANAGER (Inline)
   ================================ */

.folder-manager {
    display: none;
    padding: 10px;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-medium);
}

.folder-manager.visible {
    display: block;
}

.folder-manager-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.folder-manager-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* SFX Folders sits inline in the tab's normal padding (not full-bleed like
   Library/Search's own folder cards), so its own boxed background+padding
   just reads as a mismatched grey card floating on the panel - drop the
   fill and the side padding, keep only a hairline to separate it from the
   search box below. */
#sfxFolderManager {
    background: transparent;
    padding: 10px 0 12px;
    border-bottom: 1px solid var(--border-subtle);
}
#sfxFolderTitle { cursor: pointer; }
#sfxFolderTitle:hover { color: var(--text-primary); }

.folder-manager-add {
    background: var(--accent-green);
    border: none;
    color: #000;
    font-size: 10px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: all 0.15s ease;
}

.folder-manager-add:hover {
    background: #3de065;
    transform: scale(1.02);
}

.folder-manager-add svg {
    width: 12px;
    height: 12px;
}

.folder-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 120px;
    overflow-y: auto;
}

.folder-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    font-size: 11px;
}

.folder-item-icon {
    color: var(--accent-green);
    flex-shrink: 0;
}

.folder-item-icon svg {
    width: 14px;
    height: 14px;
}

.folder-item-path {
    flex: 1;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.folder-item-count {
    font-size: 10px;
    color: var(--text-muted);
    flex-shrink: 0;
}

.folder-item-remove {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.folder-item-remove:hover {
    background: rgba(255, 69, 58, 0.2);
    color: var(--accent-red);
}

.folder-item-remove svg {
    width: 12px;
    height: 12px;
}

.folder-empty {
    text-align: center;
    padding: 12px;
    color: var(--text-muted);
    font-size: 11px;
}

.folder-empty-hint {
    margin-top: 4px;
    font-size: 10px;
    opacity: 0.7;
}

/* ----- SFX Folders - same .folder-item shell as Library Folders, but each
   row is clickable (filters the grid to that folder) and can carry a name
   instead of a path, plus optional rename/unlink controls. ----- */
.folder-item.sfx-folder-clickable { cursor: pointer; transition: background 0.14s ease, border-color 0.14s ease; }
.folder-item.sfx-folder-clickable:hover { background: var(--bg-hover); }
.folder-item.sfx-folder-active { background: rgba(var(--accent-blue-rgb), 0.12); border-color: var(--accent-blue); }
.folder-item.sfx-folder-active .folder-item-path { color: var(--text-primary); font-weight: 600; }
.folder-item.sfx-folder-active .folder-item-icon { color: var(--accent-blue); }

.folder-item-rename {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    transition: all 0.15s ease;
    flex-shrink: 0;
}
.folder-item-rename:hover { background: var(--bg-hover); color: var(--text-primary); }
.folder-item-rename svg { width: 12px; height: 12px; }

/* Collapse/expand toggle on a linked root row with subfolders - lets a big
   folder's subfolder rows be hidden so scrolling to the NEXT main folder
   doesn't require passing every subfolder of the one above it. */
.folder-item-toggle {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    flex-shrink: 0;
}
.folder-item-toggle:hover { color: var(--text-primary); }
.folder-item-toggle svg { width: 12px; height: 12px; transition: transform 0.15s ease; }
.folder-item-toggle.expanded svg { transform: rotate(90deg); }

.folder-item.sfx-folder-sub .folder-item-path { padding-left: 6px; }

.folder-item-name-input {
    flex: 1;
    min-width: 0;
    background: var(--bg-tertiary);
    border: 1px solid var(--accent-blue);
    border-radius: 4px;
    color: var(--text-primary);
    font-size: 11px;
    padding: 3px 6px;
    outline: none;
}

/* The "Choose Download Location" card (Cleanup, Remove BG, YouTube, Stocks) -
   a rounded, softly-tinted card matching the AI tab's CTA-button/file-card
   family instead of the flat, edge-to-edge "Library Folders" utility strip,
   plus real breathing room below it so it doesn't run straight into
   whatever's next (Source Audio, the search box, etc). Library Folders keeps
   its own existing look untouched - it doesn't use this class. */
.dl-card {
    border-radius: 14px;
    margin-bottom: 14px;
    background: linear-gradient(145deg, rgba(191, 90, 242, 0.10), rgba(30, 30, 30, 0.55));
    border: 1px solid var(--border-medium);
}

/* Collapsible header treatment shared by the "Choose Download Location"
   cards (Cleanup, Remove BG, YouTube, Stocks) and the existing "Library
   Folders" card - same .folder-manager/.folder-manager-header/
   .folder-manager-title/.folder-manager-add look, just with a chevron and a
   collapsible body added on top. */
.dl-header {
    cursor: pointer;
}

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

.dl-path-preview {
    font-size: 9.5px;
    color: var(--text-muted);
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dl-chevron {
    color: var(--text-muted);
    font-size: 11px;
    transition: transform 0.15s ease;
    flex-shrink: 0;
}

.dl-chevron.collapsed {
    transform: rotate(-90deg);
}

.dl-body {
    margin-top: 8px;
}

.dl-body.dl-collapsed {
    display: none;
}

.dl-fullpath {
    font-size: 10px;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    padding: 8px 10px;
    margin-bottom: 8px;
    word-break: break-all;
}

.dl-change-btn {
    width: 100%;
    justify-content: center;
}

/* ================================
   PRESET INDICATOR
   ================================ */

.preset-indicator {
    font-size: 10px;
    color: var(--accent-green);
    margin-left: 6px;
    opacity: 0.8;
}

/* ================================
   NO RESULTS
   ================================ */

.no-results {
    padding: 16px;
    text-align: center;
    color: var(--text-muted);
    font-size: 12px;
}

.no-results-hint {
    margin-top: 4px;
    font-size: 11px;
    color: var(--text-muted);
    opacity: 0.7;
}

.no-results-action {
    margin-top: 8px;
}

.no-results-btn {
    background: var(--accent-green);
    border: none;
    color: #000;
    font-size: 11px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.15s ease;
}

.no-results-btn:hover {
    background: #3de065;
}

/* ================================
   QUICK SLOTS
   ================================ */

.slots-container {
    margin-top: 7px;
    margin-bottom: 8px;
}

.slot-category {
    margin-bottom: 10px;
    padding: 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: 14px;
}

.slot-category-header {
    display: flex;
    align-items: center;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 9px;
    padding-left: 2px;
    color: var(--text-muted);
}

.slot-category-header::before {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    margin-right: 7px;
    background: currentColor;
    flex: 0 0 auto;
}

.slot-category-count {
    margin-left: auto;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-muted);
    opacity: 0.8;
}

/* Category label color - the dot above inherits it via currentColor */
.slot-category-header.cat-video-fx { color: #0a84ff; }
.slot-category-header.cat-audio-fx { color: var(--accent-orange); }
.slot-category-header.cat-video-presets { color: var(--accent-purple); }
.slot-category-header.cat-audio-presets { color: var(--accent-green); }
.slot-category-header.cat-others { color: var(--accent-red); }

.slots-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
}

.slot {
    min-height: 55px;
    /* Matched the tool buttons */
    background: var(--bg-tertiary);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    color: var(--text-muted);
    font-size: 15px;
    font-weight: 300;
    display: flex;
    flex-direction: column;
    /* Stacks content like tools */
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
    position: relative;
    user-select: none;
    overflow: hidden;
}

.slot:hover {
    background: var(--bg-hover);
    border-color: var(--border-medium);
    color: var(--text-secondary);
    transform: translateY(-1px);
}

.slot.assigned {
    font-size: 9.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.slot.assigned:hover { transform: translateY(-1px); }

.slot.assigned span {
    /* Use webkit-box to allow multi-line text wrapping */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    /* Allows up to 3 lines of text before adding ... */
    -webkit-box-orient: vertical;
    white-space: normal;
    /* This is the magic fix that allows dropping down! */
    overflow: hidden;
    width: 100%;
    padding: 0 4px;
    /* Slightly less padding so more text fits */
    text-align: center;
    margin-top: 0;
    line-height: 1.1;
    /* Tightens the gap between the lines of text */
    /* white-space:normal only wraps at spaces - a single word wider than the
       slot (ADJUSTMENT, ORGANIZE, ROUNDED...) had nowhere to break, so
       overflow:hidden just clipped it mid-word instead of wrapping. This lets
       a too-long word itself break onto the next line so it fits its box. */
    overflow-wrap: break-word;
    word-break: break-word;
}

/* Per-category coloring - each of the 5 groups gets its own accent, applied
   faintly to every slot in that group (even empty "+" ones, so the grouping is
   visible at a glance) and more strongly once a slot is assigned. */
.slot.cat-video-fx { border-color: rgba(10, 132, 255, 0.25); }
.slot.cat-video-fx:hover { border-color: #0a84ff; color: var(--text-secondary); }
.slot.cat-video-fx.assigned { background: rgba(10, 132, 255, 0.1); border-color: rgba(10, 132, 255, 0.3); color: #0a84ff; }
.slot.cat-video-fx.assigned:hover { background: rgba(10, 132, 255, 0.2); border-color: #0a84ff; }

.slot.cat-audio-fx { border-color: rgba(255, 159, 10, 0.25); }
.slot.cat-audio-fx:hover { border-color: var(--accent-orange); color: var(--text-secondary); }
.slot.cat-audio-fx.assigned { background: rgba(255, 159, 10, 0.1); border-color: rgba(255, 159, 10, 0.3); color: var(--accent-orange); }
.slot.cat-audio-fx.assigned:hover { background: rgba(255, 159, 10, 0.2); border-color: var(--accent-orange); }

.slot.cat-video-presets { border-color: rgba(191, 90, 242, 0.25); }
.slot.cat-video-presets:hover { border-color: var(--accent-purple); color: var(--text-secondary); }
.slot.cat-video-presets.assigned { background: rgba(191, 90, 242, 0.1); border-color: rgba(191, 90, 242, 0.3); color: var(--accent-purple); }
.slot.cat-video-presets.assigned:hover { background: rgba(191, 90, 242, 0.2); border-color: var(--accent-purple); }

.slot.cat-audio-presets { border-color: rgba(48, 209, 88, 0.25); }
.slot.cat-audio-presets:hover { border-color: var(--accent-green); color: var(--text-secondary); }
.slot.cat-audio-presets.assigned { background: rgba(48, 209, 88, 0.1); border-color: rgba(48, 209, 88, 0.3); color: var(--accent-green); }
.slot.cat-audio-presets.assigned:hover { background: rgba(48, 209, 88, 0.2); border-color: var(--accent-green); }

.slot.cat-others { border-color: rgba(255, 69, 58, 0.25); }
.slot.cat-others:hover { border-color: var(--accent-red); color: var(--text-secondary); }
.slot.cat-others.assigned { background: rgba(255, 69, 58, 0.1); border-color: rgba(255, 69, 58, 0.3); color: var(--accent-red); }
.slot.cat-others.assigned:hover { background: rgba(255, 69, 58, 0.2); border-color: var(--accent-red); }


/* Slot number indicator */
.slot::before {
    content: attr(data-key);
    position: absolute;
    top: 3px;
    left: 5px;
    font-size: 8px;
    font-weight: 700;
    color: var(--text-muted);
    opacity: 0.8;
}

/* ================================
   KEYBOARD HINTS
   ================================ */

.hints {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    padding: 9px 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    gap: 8px;
    font-size: 9px;
    color: var(--text-muted);
    opacity: 0.85;
}

.hints kbd {
    display: inline-block;
    padding: 1px 4px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 3px;
    font-family: inherit;
    font-size: 9px;
    font-weight: 700;
    color: var(--text-secondary);
    margin-right: 3px;
}

/* ================================
   TOAST
   ================================ */

.toast {
    position: fixed;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--bg-tertiary);
    color: var(--text-primary);
    padding: 8px 16px;
    border-radius: var(--radius-md);
    font-size: 11px;
    font-weight: 500;
    opacity: 0;
    transition: all 0.3s ease;
    pointer-events: none;
    z-index: 10000;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-subtle);
}

.toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.toast.success {
    background: rgba(48, 209, 88, 0.9);
    border-color: var(--accent-green);
}

.toast.error {
    background: rgba(255, 69, 58, 0.9);
    border-color: var(--accent-red);
}

/* ================================
   SCROLLBAR
   ================================ */

.results-dropdown::-webkit-scrollbar,
.folder-list::-webkit-scrollbar {
    width: 5px;
}

.results-dropdown::-webkit-scrollbar-track,
.folder-list::-webkit-scrollbar-track {
    background: transparent;
}

.results-dropdown::-webkit-scrollbar-thumb,
.folder-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 3px;
}

.results-dropdown::-webkit-scrollbar-thumb:hover,
.folder-list::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.25);
}

/* ================================
   SELECTION & FOCUS
   ================================ */

::selection {
    background: rgba(var(--accent-blue-rgb), 0.3);
}

:focus-visible {
    outline: none; /* <-- Kills the blue outline everywhere */
}

:focus:not(:focus-visible) {
    outline: none;
}

/* ================================
   VERTICAL DRAGGABLE TOOLBAR
   ================================ */

.tab-bar {
    display: flex;
    flex-direction: column;
    /* Stacks icons top to bottom */
    width: 168px;
    min-width: 64px;
    max-width: 260px;
    /* Resizable via #railResizer - width persists per SMStorage */
    height: 100vh;
    flex-shrink: 0;
    gap: 1px;
    padding: 10px 8px;
    background: var(--bg-secondary);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-app-region: drag;
    /* THIS MAKES THE EMPTY SPACE DRAGGABLE! */
    z-index: 9999;
    position: relative;
    /* anchors .tab-bar-scroll-hint below, independent of internal scroll */
}

/* Same thin glass scrollbar as the stock grids - the sidebar's own
   overflow-y:auto never had this, it just never had enough tabs to actually
   scroll before (MOGRT pushed the list over the edge). */
.tab-bar::-webkit-scrollbar {
    width: 6px;
}

.tab-bar::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
    margin: 2px;
}

.tab-bar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 10px;
    background-clip: padding-box;
    box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.08);
    transition: background 0.15s ease;
}

.tab-bar::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.28);
}

.tab-btn {
    -webkit-app-region: no-drag;
    /* Stops buttons from being draggable so you can click them! */
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: transparent;
    border: 1.5px solid transparent;
    /* transparent (not none) so the active state's colored border doesn't
       shift/jitter the row when it appears - reserves the same space either way */
    border-radius: var(--radius-lg);
    color: var(--text-muted);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    flex-shrink: 0;
}

.tab-btn span {
    display: block;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-secondary);
    transition: color 0.15s ease;
}

.tab-btn svg {
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
}

/* Restored on request: the rounded blue-bordered pill for the active tab,
   same as before the borderless/accent-stripe redesign - that flatter look
   didn't land well, back to the bordered version everyone was used to. */
.tab-btn.active {
    background: rgba(var(--accent-blue-rgb), 0.12);
    border-color: rgba(var(--accent-blue-rgb), 0.35);
}

.tab-btn.active svg {
    color: var(--accent-blue);
}

.tab-btn.active span {
    color: var(--text-primary);
}

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

.tab-btn:hover svg {
    color: var(--text-primary);
}

.tab-btn:hover span {
    color: var(--text-primary);
}

/* Glowing "more tabs below" hint - floats over the bottom of the tab list
   (absolute within .tab-bar's own box, so it stays put regardless of the
   list's internal scroll position) and fades in/out via JS based on whether
   there's actually more content below the current scroll position. */
.tab-bar-scroll-hint {
    /* sticky, not absolute: .tab-bar is itself the scrolling box, and an
       absolute child scrolls along with its content - the arrow used to
       float up into the middle of the list once it was scrolled (1.9.35 fix).
       Sticky keeps it on the visible bottom edge; the negative margin stops
       it adding 34px to the list. */
    position: sticky;
    bottom: -10px;
    margin: -34px -8px -10px;
    flex-shrink: 0;
    z-index: 2;
    height: 34px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 4px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--bg-secondary) 75%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
    -webkit-app-region: no-drag;
}

.tab-bar-scroll-hint.visible {
    opacity: 1;
    pointer-events: auto;
    cursor: pointer;
}

.tab-bar-scroll-hint svg {
    width: 16px;
    height: 16px;
    color: var(--accent-blue);
    animation: tabBarHintGlow 1.6s ease-in-out infinite;
}

@keyframes tabBarHintGlow {
    0%, 100% { opacity: 0.5; filter: drop-shadow(0 0 0 rgba(var(--accent-blue-rgb), 0)); transform: translateY(0); }
    50% { opacity: 1; filter: drop-shadow(0 0 4px rgba(var(--accent-blue-rgb), 0.9)); transform: translateY(2px); }
}

/* QUICK ACCESS: user-pinned tab shortcuts, icon-only, docked flush along the
   bottom edge of the CONTENT area (not the whole window - that would sit
   under the sidebar and cover the Settings gear) on every tab. `left` is a
   fallback matching the sidebar's default width; tool_pinned_tabs.js keeps
   it exactly in sync with the sidebar's actual (resizable) width via a
   ResizeObserver, so it never drifts when the divider is dragged. No
   floating shadow/radius/centering - flush edges read as attached, not a
   detached card. Hidden while locked (see body.locked-down #pinnedTabsRow). */
.pinned-tabs-row {
    position: fixed;
    left: 168px;
    right: 0;
    bottom: 0;
    z-index: 9500;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-subtle);
}

.pinned-tabs-row:empty { display: none; } /* the "+" is always in there, so this only hides if the module hasn't rendered yet */

.pin-btn {
    -webkit-app-region: no-drag;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1.5px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.pin-btn svg { width: 15px; height: 15px; }

.pin-btn:hover {
    background: rgba(255, 255, 255, 0.045);
    color: var(--text-primary);
}

.pin-btn.active {
    background: rgba(var(--accent-blue-rgb), 0.12);
    border-color: rgba(var(--accent-blue-rgb), 0.35);
    color: var(--accent-blue);
}

.pin-btn-add {
    border: 1.5px dashed var(--border-medium);
    color: var(--text-muted);
}

.pin-btn-add:hover {
    border-color: var(--accent-blue);
    color: var(--accent-blue);
    background: rgba(var(--accent-blue-rgb), 0.08);
}

/* Quick Access picker checklist rows */
.pin-pick-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 2px;
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.pin-pick-row:hover { background: rgba(255, 255, 255, 0.045); }

.pin-pick-row svg { width: 15px; height: 15px; color: var(--text-secondary); flex-shrink: 0; }

.pin-pick-row span { font-size: 11px; color: var(--text-primary); flex: 1; }

.pin-pick-row input[type="checkbox"] { cursor: pointer; }

.pin-pick-row.disabled { opacity: 0.4; cursor: not-allowed; }
.pin-pick-row.disabled input { cursor: not-allowed; }

/* Thin, draggable divider between the sidebar and the tab content - the
   invisible ::after widens the hit area without making the visible line
   any fatter (same idea as the slimmed-down glassmorphism scrollbars). */
.rail-resizer {
    width: 3px;
    flex-shrink: 0;
    height: 100vh;
    cursor: col-resize;
    background: var(--border-subtle);
    position: relative;
    z-index: 9999;
}

.rail-resizer:hover,
.rail-resizer.dragging {
    background: var(--accent-blue);
}

.rail-resizer::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -3px;
    right: -3px;
}

/* ================================
   TAB CONTENT
   ================================ */

.tab-content {
    display: none;
    flex: 1;
    /* Fills the rest of the screen when expanded */
    padding: 10px;
    height: 100vh;
    overflow: hidden !important;
    /* Kills the scrollbar forever */
}

body.panel-collapsed .tab-content {
    display: none !important;
    /* Hides content when drawer is closed */
}

/* The pinned-tabs bar (fixed along the bottom) must never cover a tab's
   last row: its height is reserved here (--pin-bar-h, kept by
   tool_pinned_tabs.js; 0 while the bar is hidden). Minimal mode sets its
   own padding with !important, so it's unaffected. */
.tab-content {
    padding-bottom: calc(10px + var(--pin-bar-h, 0px));
}

.tab-content.active {
    display: block;
    animation: fadeIn 0.15s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Sweeping indeterminate fill - used by the Silence tab's progress bar while
   ffmpeg is analyzing/cutting and there's no real percentage to show. */
#silProgressFill.indeterminate {
    width: 40% !important;
    animation: silProgSweep 1.1s ease-in-out infinite;
}

@keyframes silProgSweep {
    0% { margin-left: -40%; }
    100% { margin-left: 100%; }
}

/* ================================
   TOOLS GRID
   ================================ */

.tools-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    padding: 4px 0;
}

/* ================================
   TOOL BUTTON
   ================================ */

.tool-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 12px 6px;
    min-height: 60px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 9px;
    font-weight: 500;
    text-align: center;
    cursor: pointer;
    transition: all 0.15s ease;
    position: relative;
}

.tool-btn:hover {
    background: var(--bg-tertiary);
    border-color: var(--border-medium);
    color: var(--text-primary);
    transform: translateY(-1px);
}

/* Gives EVERY Tool button a physical "click" feeling */
.tool-btn:active {
    transform: scale(0.95);
    opacity: 0.8;
    transition: all 0.05s ease;
    /* Super fast snap down */
}

/* Gives the Tabs a physical "click" feeling */
.tab-btn:active {
    transform: scale(0.92);
    opacity: 0.7;
    transition: all 0.05s ease;
}

/* Gives the Mode Toggle & Folder Add a physical "click" feeling */
.mode-toggle:active,
.folder-manager-add:active,
.add-slot-btn:active,
.delete-macro-btn:active,
.stock-btn:active {
    transform: scale(0.90);
    transition: all 0.05s ease;
}

/* Gives the Quick Slots a physical "click" feeling */
.slot:active {
    transform: scale(0.96);
    opacity: 0.8;
    transition: all 0.05s ease;
}

/* Gives all action buttons (Apply, Cancel, Rename, Next) a physical "click" feeling */
.offset-apply-btn:active,
.nest-apply-btn:active,
.offset-cancel-btn:active,
.nest-cancel-btn:active,
.guide-next-btn:active,
.guide-back-btn:active {
    transform: scale(0.95);
    opacity: 0.9;
    transition: all 0.05s ease;
}

.tool-btn-icon {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    transition: color 0.15s ease;
}

.tool-btn:hover .tool-btn-icon {
    color: var(--text-primary);
}

.tool-btn-icon svg {
    width: 18px;
    height: 18px;
}

/* ================================
   TOOL CARD (new clean card design, 2-per-row) - replaces .tools-grid/.tool-btn
   in the Tools tab first; Blend Mode/Trim/Export migrate to it once confirmed.
   Deliberately no glow/active-color effect - one uniform, quiet style.
   ================================ */

.tool-card-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    padding: 4px 0;
}

.tool-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 6px;
    padding: 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
    position: relative;
}

.tool-card:hover {
    background: var(--bg-tertiary);
    border-color: var(--border-medium);
}

.tool-card:active {
    transform: scale(0.98);
    opacity: 0.9;
    transition: all 0.05s ease;
}

/* Punch Zoom's card - the only one in this grid with configurable settings,
   so it's a plain div (not a button) with an inner .tool-card-run button for
   the one-click action plus a separate settings-gear button that expands an
   inline panel below it. Grid rows size independently (.tool-card-grid has
   no fixed grid-template-rows), so this card being taller when expanded
   doesn't affect its neighbors. */
.tool-card-run {
    background: none;
    border: none;
    padding: 0;
    padding-right: 20px;
    margin: 0;
    font: inherit;
    color: inherit;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    cursor: pointer;
}

.tool-card-settings-toggle {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 2px;
    display: flex;
    z-index: 2;
}

.tool-card-settings-toggle:hover {
    color: var(--text-primary);
}

.tool-card-settings-toggle svg {
    width: 14px;
    height: 14px;
}

/* Unnest card: Video/Audio options and a one-line status under the run button. */
.sm-unnest-options {
    display: flex;
    gap: 12px;
    font-size: 10px;
    color: var(--text-secondary);
}
.sm-unnest-options label { display: flex; align-items: center; gap: 4px; cursor: pointer; }
.sm-unnest-options input { margin: 0; cursor: pointer; }
.sm-unnest-status { font-size: 9px; line-height: 1.4; color: var(--text-muted); }
.sm-unnest-status.ok { color: var(--accent-green); }
.sm-unnest-status.error { color: var(--accent-red); }
#toolUnnest[aria-busy="true"] { opacity: 0.6; cursor: progress; }

.tool-card-settings {
    width: 100%;
    margin-top: 2px;
    padding-top: 8px;
    border-top: 1px solid var(--border-subtle);
}

.tool-card-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
}

.tool-card-title svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: var(--text-secondary);
}

.tool-card-desc {
    font-size: 10px;
    line-height: 1.45;
    color: var(--text-muted);
}

/* Small "currently active" dot for stateful tools (e.g. Watch Folder) -
   a quiet indicator, not a glow/border treatment. */
.tool-card.watching .tool-card-title::after {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-green);
    margin-left: 2px;
}

.tool-btn-label {
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* ================================
   TOOL BUTTON COLORS
   ================================ */

/* Paste Image - Blue */
.tool-btn.tool-paste:hover {
    background: rgba(var(--accent-blue-rgb), 0.1);
    border-color: rgba(var(--accent-blue-rgb), 0.3);
}

.tool-btn.tool-paste:hover .tool-btn-icon {
    color: var(--accent-blue);
}

/* Close Gaps - Green */
.tool-btn.tool-gaps:hover {
    background: rgba(48, 209, 88, 0.1);
    border-color: rgba(48, 209, 88, 0.3);
}

.tool-btn.tool-gaps:hover .tool-btn-icon {
    color: var(--accent-green);
}

/* Fill Frame - Orange */
.tool-btn.tool-fill:hover {
    background: rgba(255, 159, 10, 0.1);
    border-color: rgba(255, 159, 10, 0.3);
}

.tool-btn.tool-fill:hover .tool-btn-icon {
    color: var(--accent-orange);
}

/* Reset Clip - Red */
.tool-btn.tool-reset:hover {
    background: rgba(255, 69, 58, 0.1);
    border-color: rgba(255, 69, 58, 0.3);
}

.tool-btn.tool-reset:hover .tool-btn-icon {
    color: var(--accent-red);
}

/* Rotate Clip - Cyan */
.tool-btn.tool-rotate:hover {
    background: rgba(50, 215, 255, 0.1);
    border-color: rgba(50, 215, 255, 0.3);
}

.tool-btn.tool-rotate:hover .tool-btn-icon {
    color: #32d7ff;
}

/* Nest Clips - Purple */
.tool-btn.tool-nest:hover {
    background: rgba(191, 90, 242, 0.1);
    border-color: rgba(191, 90, 242, 0.3);
}

.tool-btn.tool-nest:hover .tool-btn-icon {
    color: var(--accent-purple);
}

/* Offset Clips - Yellow */
.tool-btn.tool-offset:hover {
    background: rgba(255, 214, 10, 0.1);
    border-color: rgba(255, 214, 10, 0.3);
}

.tool-btn.tool-offset:hover .tool-btn-icon {
    color: #ffd60a;
}

/* Organize - Blue */
.tool-btn.tool-organize:hover {
    background: rgba(var(--accent-blue-rgb), 0.1);
    border-color: rgba(var(--accent-blue-rgb), 0.3);
}

.tool-btn.tool-organize:hover .tool-btn-icon {
    color: var(--accent-blue);
}

/* Undo - Red */
.tool-btn.tool-undo:hover {
    background: rgba(255, 69, 58, 0.1);
    border-color: rgba(255, 69, 58, 0.3);
}

.tool-btn.tool-undo:hover .tool-btn-icon {
    color: var(--accent-red);
}



/* Watch Folder - Purple */
.tool-btn.tool-watch:hover {
    background: rgba(191, 90, 242, 0.1);
    border-color: rgba(191, 90, 242, 0.3);
}

.tool-btn.tool-watch:hover .tool-btn-icon {
    color: var(--accent-purple);
}

/* Watch Folder Active State */
.tool-btn.tool-watch.watching {
    background: rgba(48, 209, 88, 0.1);
    border-color: rgba(48, 209, 88, 0.3);
}

.tool-btn.tool-watch.watching .tool-btn-icon {
    color: var(--accent-green);
}

.tool-btn.tool-watch.watching::after {
    content: '';
    position: absolute;
    top: 4px;
    right: 4px;
    width: 6px;
    height: 6px;
    background: var(--accent-green);
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
}

/* ================================
   OFFSET INPUT CONTAINER
   ================================ */

.offset-input-container,
/* Full-screen backdrop + centered box, structured exactly like
   .settings-modal/.settings-content below (same fixed+inset+flex-center
   backdrop, same opacity-based hidden state) instead of a single fixed
   element with its own centering math - reusing the identical, already-
   proven pattern this app uses elsewhere removes any doubt, rather than
   trusting a second, differently-built implementation of the same idea.
   It used to sit in normal document flow after the tool cards, so on a
   tall grid it rendered off the bottom of the visible area (confirmed via
   screenshot: the box was there, just scrolled out of view). */
.nest-input-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: opacity 0.2s ease;
}

.nest-input-container.hidden {
    opacity: 0;
    pointer-events: none;
}

.nest-input-content {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px;
    width: min(360px, calc(100% - 32px));
    background: var(--bg-secondary);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    transform: translateY(0);
    transition: transform 0.2s ease;
}

.nest-input-container.hidden .nest-input-content {
    transform: translateY(10px);
}

.offset-input-container.hidden {
    display: none;
}

.offset-input-container label,
.nest-input-container label {
    font-size: 11px;
    color: var(--text-secondary);
    white-space: nowrap;
}

.offset-input-container input,
.nest-input-container input {
    flex: 1;
    min-width: 60px;
    padding: 6px 10px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 12px;
    outline: none;
}

.offset-input-container input:focus,
.nest-input-container input:focus {
    border-color: var(--accent-blue);
}

.offset-input-container input[type="number"] {
    width: 60px;
    text-align: center;
}

.offset-apply-btn,
.nest-apply-btn {
    padding: 6px 12px;
    background: var(--accent-blue);
    border: none;
    border-radius: var(--radius-sm);
    color: white;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease;
}

.offset-apply-btn:hover,
.nest-apply-btn:hover {
    background: #409cff;
}

.offset-cancel-btn,
.nest-cancel-btn {
    padding: 6px 12px;
    background: transparent;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.offset-cancel-btn:hover,
.nest-cancel-btn:hover {
    background: var(--bg-tertiary);
    border-color: var(--border-medium);
    color: var(--text-primary);
}

/* ================================
   RESPONSIVE - Smart Scaling
   ================================ */

@media (max-width: 380px) {

    /* 1. Fix the Tabs: Hide text, center the icons */
    .tab-btn span {
        display: none;
    }

    .tab-btn svg {
        margin: 0 auto;
        width: 16px;
        height: 16px;
    }

    /* 2. Shrink the Tools & Keyframe Boxes */
    .tools-grid {
        gap: 4px;
    }

    .tool-btn {
        min-height: 45px;
        /* Shorter boxes */
        padding: 6px 2px;
    }

    .tool-btn-icon {
        width: 16px;
        height: 16px;
    }

    .tool-btn-icon svg {
        width: 14px;
        height: 14px;
    }

    .tool-btn-label {
        font-size: 8px;
        /* Slightly smaller text */
    }

    /* 3. Shrink the Quick Slots */
    .slots-grid {
        gap: 2px;
        /* Tighter spacing */
    }

    .slot {
        min-height: 45px;
        /* Shorter slots */
        font-size: 9px;
    }

    .slot.assigned span {
        font-size: 8px;
        /* Smaller text inside slots */
        -webkit-line-clamp: 2;
        /* Only allow 2 lines of text before adding '...' */
    }
}

/* History Header */
.history-header {
    padding: 6px 14px;
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-subtle);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.clear-history {
    color: var(--accent-red);
    cursor: pointer;
    font-size: 9px;
    opacity: 0.8;
}

.clear-history:hover {
    opacity: 1;
    text-decoration: underline;
}



/* ================================
   SETTINGS MENU STYLES
   ================================ */
/* #themeSwitchBtn reuses .settings-btn's exact look. Anchored to the bottom
   by flex `order`, NOT by DOM position - the drag-to-reorder feature
   (tool_tab_reorder.js) re-inserts every real .tab-btn immediately before
   #settingsBtn on load, using a saved order; since #themeSwitchBtn isn't a
   .tab-btn it was never one of the elements that script moves, but it also
   wasn't anchored anywhere itself, so all 20 tabs ended up relocated to
   AFTER it, leaving it collateral-displaced at the very top - with its own
   margin-top:auto now firing there instead, opening a big empty gap. order
   makes both buttons' VISUAL position independent of whatever DOM order
   that script produces: real tabs default to order 0, these two always
   render after all of them regardless. */
#themeSwitchBtn { order: 9998; }
#settingsBtn { order: 9999; margin-top: 0; }

.settings-btn {
    -webkit-app-region: no-drag;
    margin-top: auto;
    /* Pushes the settings gear to the very bottom! */
    width: 100%;
    background: transparent;
    border: 1.5px solid transparent;
    color: var(--text-muted);
    cursor: pointer;
    padding: 9px 10px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    gap: 10px;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    flex-shrink: 0;
    /* Prevents it from getting crushed */
}

.settings-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
}

.settings-btn:hover span {
    color: var(--text-primary);
}

.settings-btn svg {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
}

.settings-btn span {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.15s ease;
}

/* Modal Popup Background */
.settings-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: opacity 0.2s ease;
}

.settings-modal.hidden {
    opacity: 0;
    pointer-events: none;
}

/* Modal Box */
.settings-content {
    background: var(--bg-primary);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-md);
    width: 85%;
    box-shadow: var(--shadow-lg);
    transform: translateY(0);
    transition: transform 0.2s ease;
}

.settings-modal.hidden .settings-content {
    transform: translateY(10px);
}

.settings-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-subtle);
    font-weight: 600;
    font-size: 12px;
}

.settings-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 18px;
    cursor: pointer;
}

.settings-close:hover {
    color: var(--accent-red);
}

.settings-body {
    padding: 14px;
}

.settings-body label {
    font-size: 11px;
    color: var(--text-secondary);
    display: block;
    margin-bottom: 6px;
}

.shortcut-box {
    width: 100%;
    padding: 10px;
    background: var(--bg-tertiary);
    border: 2px solid var(--border-medium);
    border-radius: var(--radius-sm);
    color: var(--accent-blue);
    font-size: 13px;
    font-weight: bold;
    text-align: center;
    outline: none;
    cursor: pointer;
}

.shortcut-box:focus {
    border-color: var(--accent-blue);
    background: rgba(var(--accent-blue-rgb), 0.1);
}

.settings-hint {
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 6px;
    text-align: center;
}

/* ================================
   ASSEMBLER LIST STYLES
   ================================ */
/* We make the whole tab a flexible column that perfectly fits the panel height */
#contentAssemble.active {
    display: flex;
    flex-direction: column;
    height: 100%;
    /* This lets it naturally fill the entire window! */
    padding-bottom: 8px;
}

.assembler-list {
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    height: 140px;
    /* <--- THIS IS YOUR EXACT BOX HEIGHT! */
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.assembler-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    border-bottom: 1px solid var(--border-subtle);
    background: var(--bg-tertiary);
}

.assembler-item:last-child {
    border-bottom: none;
}

.assembler-info {
    display: flex;
    flex-direction: column;
}

.assembler-name-input {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-primary);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 3px;
    padding: 2px 4px;
    width: 90%;
    outline: none;
    transition: all 0.15s ease;
    margin-left: -4px;
    /* Align perfectly with the old text */
}

.assembler-name-input:hover {
    border-color: rgba(255, 255, 255, 0.1);
}

.assembler-name-input:focus {
    background: var(--bg-primary);
    border-color: var(--accent-blue);
}

.assembler-meta {
    font-size: 9px;
    color: var(--accent-orange);
}

.assembler-controls {
    display: flex;
    gap: 4px;
}

.assembler-controls button {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    border-radius: 4px;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 10px;
}

.assembler-controls button:hover {
    background: rgba(255, 255, 255, 0.15);
    color: var(--text-primary);
}

.assembler-controls button.btn-del:hover {
    background: rgba(255, 69, 58, 0.2);
    border-color: rgba(255, 69, 58, 0.5);
    color: var(--accent-red);
}

.assembler-list::-webkit-scrollbar {
    width: 5px;
}

.assembler-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 3px;
}

/* Drag and Drop Highlight for Slots */
.slot.drag-over {
    border: 2px dashed var(--accent-blue) !important;
    background: rgba(var(--accent-blue-rgb), 0.1) !important;
    transform: scale(1.05);
    z-index: 10;
}

/* Same drag-to-reorder highlight, applied to the sidebar tab icons. */
.tab-btn.drag-over {
    border: 2px dashed var(--accent-blue) !important;
    background: rgba(var(--accent-blue-rgb), 0.15) !important;
}

/* ================================
   ASSET PREVIEW BOX
   ================================ */
#asset-preview-box {
    position: fixed;
    bottom: 12px;
    right: 12px;
    width: 140px;
    /* Small, minimal size */
    height: 80px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    z-index: 9999;
    display: none;
    pointer-events: none;
    /* Lets you click through it */
}

#asset-preview-box.visible {
    display: flex;
    align-items: center;
    justify-content: center;
    animation: slideDown 0.15s ease-out;
}

#asset-preview-box img,
#asset-preview-box video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Keeps it perfectly proportioned inside the box */
}



/* ================================
   GHOST UI (MINIMAL MODE 2)
   ================================ */
body.minimal-mode {
    padding: 0 !important;
    align-items: flex-start; /* FIX: Anchors everything to the top so the dropdown has room! */
}

/* Wipe out the invisible padding pushing from the top */
body.minimal-mode .tab-content {
    padding: 0 10px !important;
    height: auto !important;
    overflow: visible !important; /* FIX: Stops the dropdown from being chopped off! */
}

/* Hide everything except the search box! */
body.minimal-mode .tab-bar,
body.minimal-mode .rail-resizer,
body.minimal-mode #slotsContainer,
body.minimal-mode .hints,
body.minimal-mode .folder-manager,
body.minimal-mode .panel-footer {
    display: none !important;
}

/* Strip all leftover margins and paddings */
body.minimal-mode .search-container {
    margin-top: 11px !important; /* Centers the box perfectly when the window is small */
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    width: 100%;
}


/* ================================
   LICENSE LOCKDOWN MODE
   ================================ */
body.locked-down .tab-bar {
    pointer-events: none;
    opacity: 0.2;
    filter: blur(2px);
}

body.locked-down .rail-resizer {
    pointer-events: none;
}

body.locked-down .slots-container,
body.locked-down .hints,
body.locked-down .folder-manager,
body.locked-down .mode-toggle,
body.locked-down #pinnedTabsRow {
    display: none !important;
}

/* Make the search box look like a password box */
body.locked-down #searchInput {
    border-color: var(--accent-red);
    color: var(--accent-red);
    text-align: center;
    font-weight: bold;
    letter-spacing: 0.1em;
}

body.locked-down #searchInput::placeholder {
    color: rgba(255, 69, 58, 0.7);
    letter-spacing: 0;
}

/* License Badges for Settings */
.license-badge {
    font-size: 10px;
    font-weight: bold;
    padding: 3px 8px;
    border-radius: 4px;
    margin-left: 10px;
}

.badge-pro {
    background: rgba(48, 209, 88, 0.2);
    color: var(--accent-green);
    border: 1px solid var(--accent-green);
}

.badge-trial {
    background: rgba(255, 159, 10, 0.2);
    color: var(--accent-orange);
    border: 1px solid var(--accent-orange);
}

.badge-expired {
    background: rgba(255, 69, 58, 0.2);
    color: var(--accent-red);
    border: 1px solid var(--accent-red);
}


/* ================================
   STOCK FOOTAGE GRID (COMPLETE)
   ================================ */
.stock-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* 2 cards per row */
    gap: 6px;
    overflow-y: auto;
    max-height: calc(100vh - 120px); /* Automatically stretches to fill the new taller panel! */
    padding-right: 4px;
}

/* Glassmorphism scrollbar - frosted, rounded, soft edges - reused anywhere a
   panel scrolls internally (stock grids, the slots page). */
.stock-grid::-webkit-scrollbar,
#slotsScrollArea::-webkit-scrollbar,
#ytSearchGrid::-webkit-scrollbar,
#curveScrollArea::-webkit-scrollbar,
#assembleScrollArea::-webkit-scrollbar,
#macrosScrollArea::-webkit-scrollbar,
#exportScrollArea::-webkit-scrollbar,
#silScrollArea::-webkit-scrollbar,
#toolsScrollArea::-webkit-scrollbar,
#blendScrollArea::-webkit-scrollbar,
#aiScrollArea::-webkit-scrollbar,
#convertScrollArea::-webkit-scrollbar,
#onlineSfxResults::-webkit-scrollbar {
    width: 6px;
}

.stock-grid::-webkit-scrollbar-track,
#slotsScrollArea::-webkit-scrollbar-track,
#ytSearchGrid::-webkit-scrollbar-track,
#curveScrollArea::-webkit-scrollbar-track,
#assembleScrollArea::-webkit-scrollbar-track,
#macrosScrollArea::-webkit-scrollbar-track,
#exportScrollArea::-webkit-scrollbar-track,
#silScrollArea::-webkit-scrollbar-track,
#toolsScrollArea::-webkit-scrollbar-track,
#blendScrollArea::-webkit-scrollbar-track,
#aiScrollArea::-webkit-scrollbar-track,
#convertScrollArea::-webkit-scrollbar-track,
#onlineSfxResults::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
    margin: 2px;
}

.stock-grid::-webkit-scrollbar-thumb,
#slotsScrollArea::-webkit-scrollbar-thumb,
#ytSearchGrid::-webkit-scrollbar-thumb,
#curveScrollArea::-webkit-scrollbar-thumb,
#assembleScrollArea::-webkit-scrollbar-thumb,
#macrosScrollArea::-webkit-scrollbar-thumb,
#exportScrollArea::-webkit-scrollbar-thumb,
#silScrollArea::-webkit-scrollbar-thumb,
#blendScrollArea::-webkit-scrollbar-thumb,
#toolsScrollArea::-webkit-scrollbar-thumb,
#aiScrollArea::-webkit-scrollbar-thumb,
#convertScrollArea::-webkit-scrollbar-thumb,
#onlineSfxResults::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 10px;
    background-clip: padding-box;
    box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.08);
    transition: background 0.15s ease;
}

.stock-grid::-webkit-scrollbar-thumb:hover,
#slotsScrollArea::-webkit-scrollbar-thumb:hover,
#ytSearchGrid::-webkit-scrollbar-thumb:hover,
#curveScrollArea::-webkit-scrollbar-thumb:hover,
#assembleScrollArea::-webkit-scrollbar-thumb:hover,
#macrosScrollArea::-webkit-scrollbar-thumb:hover,
#exportScrollArea::-webkit-scrollbar-thumb:hover,
#silScrollArea::-webkit-scrollbar-thumb:hover,
#toolsScrollArea::-webkit-scrollbar-thumb:hover,
#aiScrollArea::-webkit-scrollbar-thumb:hover,
#convertScrollArea::-webkit-scrollbar-thumb:hover,
#onlineSfxResults::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.28);
}

/* Transcribe tab - same scroll-area cosmetics as AI/Convert, its closest
   relatives layout-wise (it started as a 4th mode inside the AI tab). */
#transcribeScrollArea::-webkit-scrollbar { width: 6px; }
#transcribeScrollArea::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
    margin: 2px;
}
#transcribeScrollArea::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 10px;
    background-clip: padding-box;
    box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.08);
    transition: background 0.15s ease;
}
#transcribeScrollArea::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.28);
}

/* The grid (.stock-grid) stretches every row to fill its own height by
   default (CSS Grid's align-content/align-items:stretch), which can make a
   card taller than its content actually needs - that leftover height used to
   just sit empty below the info block as a stripe of dead grey space. The
   card being a flex column plus flex:1 on .stock-thumb below hands that
   leftover height to the thumbnail instead, so the picture gets bigger
   rather than the empty space. */
.stock-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
}

/* Library grid: 3 per row (Overlay grid stays at the shared 2-per-row
   .stock-grid default - this only targets #libGrid). */
#libGrid {
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
}

/* Bugfix: the real cause of cards shrinking as more rows are added. Grid's
   default grid-auto-rows:auto computes each row's automatic MINIMUM size
   from its items' content - but a grid item with overflow:hidden (.stock-card
   has this, for rounded corners) is specced to contribute a minimum size of
   ZERO instead of its actual content height. Once the grid's own height is
   constrained (flex:1;min-height:0 in a bounded parent) and content would
   otherwise overflow it, the grid happily shrinks every "auto" row toward
   that zero-sized minimum to avoid overflowing, rather than growing past its
   box and letting overflow-y:auto scroll - and the more rows there are, the
   thinner each one gets. grid-auto-rows:min-content sizes rows from content
   the normal way regardless of any item's own overflow, which is what
   actually fixes it; align-content:start plus max-height:100% (against the
   flex-allocated box) just keep the rows packed at the top and the grid
   genuinely bounded so scrolling engages instead of stretching to fit. */
#libGrid,
#voGrid,
#mogrtGrid,
#ytSearchGrid,
#browserResultsGrid,
#capMogrtPickerGrid {
    grid-auto-rows: min-content;
    align-content: start;
    max-height: 100%;
}

#libGrid .stock-thumb,
#voGrid .stock-thumb,
#mogrtGrid .stock-thumb,
#browserResultsGrid .stock-thumb,
#capMogrtPickerGrid .stock-thumb {
    flex: none;
    min-height: 0;
    aspect-ratio: 4 / 3;
    /* .stock-thumb's shared transform:scale(1.15) overscan (for cropping
       baked-in pillarbox bars on stock/YouTube thumbnails) used to be
       harmless here because the thumb was flex-grown with slack room to
       absorb it. Now that it's a fixed aspect-ratio box, the same 15%
       overscan visually bleeds past its own bottom edge and overlaps the
       title text right below it - these are real user files, not stock
       thumbnails, so there's no baked-in letterboxing to crop in the first
       place and the transform is simply not needed here. */
    transform: none;
}

#libGrid .stock-title {
    font-size: 8px;
}

#libGrid .stock-btn-row {
    justify-content: flex-end;
    margin-top: 2px;
    gap: 6px;
}

/* Grid-card icon buttons (delete/reveal) use a small rounded-square shape
   instead of the circular pill used in list rows (Macros/Curves/Stacks) -
   scoped to grid cards only so those other, unrelated rows are untouched. */
.stock-card .delete-macro-btn,
.stock-card .reveal-btn {
    width: 20px;
    height: 20px;
    border-radius: 6px;
}

.stock-card .delete-macro-btn svg,
.stock-card .reveal-btn svg {
    width: 11px;
    height: 11px;
}

/* Small pill badge on cards sourced from the user's Asset Folders (Search
   tab) rather than copied into the Library's own storage - these are
   reference-only, so the badge also signals "Reveal, not Delete". */
.stock-source-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    color: var(--text-secondary);
    font-size: 7px;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 2px 5px;
    border-radius: 4px;
    max-width: calc(100% - 8px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    z-index: 2;
    pointer-events: none;
}

/* Modern icon-only utility buttons used by the Overlay/Library toolbars
   (Add Folder, Refresh, Delete All). */
.mini-tool-btn {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
}

.mini-tool-btn svg {
    width: 14px;
    height: 14px;
}

.mini-tool-btn:hover {
    background: var(--bg-secondary);
    border-color: var(--border-medium);
    color: var(--text-primary);
    transform: scale(1.05);
}

.mini-tool-btn.danger:hover {
    background: rgba(255, 69, 58, 0.15);
    border-color: var(--accent-red);
    color: var(--accent-red);
}

/* Multi-select checkbox on a grid card (top-left corner - the source badge
   lives top-right so the two never collide). Only rendered for cards that
   can actually be deleted (bundled Overlay packs never get one). */
.stock-select-box {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 16px;
    height: 16px;
    border-radius: 4px;
    border: 1.5px solid rgba(255, 255, 255, 0.5);
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(4px);
    z-index: 3;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    opacity: 0;
    transition: opacity 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}

.stock-select-box svg {
    width: 11px;
    height: 11px;
    opacity: 0;
    transition: opacity 0.1s ease;
}

.stock-card:hover .stock-select-box,
.stock-select-box.checked {
    opacity: 1;
}

.stock-select-box.checked {
    background: var(--accent-blue);
    border-color: var(--accent-blue);
}

.stock-select-box.checked svg {
    opacity: 1;
}

.stock-card.selected {
    outline: 2px solid var(--accent-blue);
    outline-offset: -2px;
}

/* Contextual bar shown only while 1+ cards are checked - a separate action
   from the toolbar's category-scoped "Delete All" icon button. */
.selection-bar {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    background: rgba(var(--accent-blue-rgb), 0.12);
    border: 1px solid var(--accent-blue);
    border-radius: var(--radius-sm);
    padding: 6px 8px;
    margin-bottom: 8px;
    font-size: 10px;
    color: var(--text-primary);
    flex-shrink: 0;
}

.selection-bar.visible {
    display: flex;
}

.selection-bar-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.selection-bar-cancel,
.selection-bar-delete,
.selection-bar-stack {
    border: none;
    border-radius: 4px;
    font-size: 9px;
    font-weight: 600;
    padding: 5px 8px;
    cursor: pointer;
    white-space: nowrap;
}

.selection-bar-cancel {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

.selection-bar-delete {
    background: var(--accent-red);
    color: #fff;
}

.selection-bar-stack {
    background: var(--accent-blue);
    color: #fff;
}

/* Audio card thumbnail - a centered music icon in a soft accent circle,
   consistent whether it's a Library card or a search preview. */
.audio-thumb-icon {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, rgba(255,159,10,0.14), rgba(255,159,10,0.04));
}

.audio-thumb-icon svg {
    width: 26px;
    height: 26px;
    color: var(--accent-orange);
}

.stock-thumb {
    width: 100%;
    /* Grows to absorb whatever extra height the stretched card has, so the
       picture - not blank space - is what gets bigger. min-height keeps a
       sane floor for the rare case the grid doesn't stretch the row at all. */
    flex: 1;
    min-height: 70px;
    object-fit: cover;
    background: #000;
    /* Cover already crops height to fill the box, but many source thumbnails
       (YouTube especially) bake grey/black pillarbox bars directly into the
       image pixels for non-16:9 videos - cover can't remove those since it
       never needs to crop width to fill a wide, short box like this one. A
       slight overscan crops a bit off every edge (the card below clips the
       overflow) so those bars get cut away along with it. */
    transform: scale(1.15);
}

/* YouTube search cards wrap the thumb in this div so the duration badge can
   be absolutely positioned over it. flex:1 on .stock-thumb only works when
   it's a direct flex child of .stock-card - nested one level down like this,
   it does nothing, which is exactly why these cards kept the dead space
   below their (shorter, button-less) info block after the general fix above.
   This wrapper is the one that grows instead, and the img is stretched to
   fill whatever height it ends up with. */
.stock-thumb-wrap {
    position: relative;
    flex: 1;
    min-height: 70px;
    overflow: hidden;
}

.stock-thumb-wrap .stock-thumb {
    width: 100%;
    height: 100%;
}

.stock-info {
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stock-title {
    font-size: 9px;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stock-meta {
    font-size: 8px;
    color: var(--text-muted);
}

.stock-btn-row {
    display: flex;
    gap: 4px;
    margin-top: 4px;
    align-items: stretch;
}

.stock-res-select {
    flex: 1.2;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-subtle);
    border-radius: 4px;
    font-size: 8px;
    padding: 0 4px;
    outline: none;
    cursor: pointer;
}

.stock-res-select:hover {
    border-color: var(--border-medium);
}

/* Lightbox quality chips - a plain button row instead of a native <select>, since
   native dropdowns render unreliably inside CEP's high-z-index fixed overlays. */
.lightbox-quality-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.lightbox-quality-chip {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    padding: 6px 10px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.lightbox-quality-chip:hover {
    border-color: var(--border-medium);
    color: var(--text-primary);
}

.lightbox-quality-chip.active {
    background: rgba(var(--accent-blue-rgb), 0.15);
    border-color: var(--accent-blue);
    color: var(--accent-blue);
}

/* Prev/Next page navigation - sits above the results grid so it's always in
   view, instead of scroll-triggered loading users kept missing. */
.page-nav-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-subtle);
    color: var(--text-primary);
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    padding: 6px 10px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.page-nav-btn svg {
    width: 12px;
    height: 12px;
}

.page-nav-btn:hover:not(:disabled) {
    border-color: var(--accent-blue);
    color: var(--accent-blue);
}

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

/* Download progress card - deliberately bolder/taller than a typical inline
   status row so "downloading" reads as the main thing happening, not a small
   afterthought under the quality picker. */
.yt-progress-area {
    display: none;
    margin-bottom: 12px;
    background: linear-gradient(145deg, rgba(var(--accent-blue-rgb), 0.08), var(--bg-secondary));
    border: 1px solid var(--border-medium);
    border-radius: 16px;
    padding: 16px 18px;
    flex-shrink: 0;
}

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

.yt-progress-status {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
}

.yt-progress-percent {
    font-size: 15px;
    font-weight: 800;
    color: var(--accent-blue);
}

.yt-progress-track {
    width: 100%;
    height: 10px;
    background: var(--bg-tertiary);
    border-radius: 5px;
    overflow: hidden;
}

.yt-progress-fill {
    width: 0%;
    height: 100%;
    border-radius: 5px;
    background: linear-gradient(90deg, var(--accent-blue), #5ac8fa);
    transition: width 0.2s ease;
}

/* YouTube download: Cancel (inside the progress card) */
.yt-cancel-btn {
    display: block;
    width: 100%;
    margin-top: 12px;
    padding: 7px 10px;
    font-size: 11px;
    font-weight: 700;
    color: var(--accent-red);
    background: rgba(255, 69, 58, 0.08);
    border: 1px solid rgba(255, 69, 58, 0.45);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s ease;
}
.yt-cancel-btn:hover { background: rgba(255, 69, 58, 0.16); }
.yt-cancel-btn:disabled { opacity: 0.5; cursor: default; }

/* No known percentage to show (transcribing, exporting audio) - a sliding
   block instead of a real fill, so the card still reads as "working". */
.yt-progress-fill.indeterminate {
    width: 40%;
    transition: none;
    animation: ytProgressIndeterminate 1.2s ease-in-out infinite;
}

@keyframes ytProgressIndeterminate {
    0% { margin-left: 0%; }
    50% { margin-left: 60%; }
    100% { margin-left: 0%; }
}

/* Whisper/Captions tab: the same progress-card look the YouTube tab uses,
   just always visible here (idle state included) instead of only appearing
   mid-download - and tinted per state since there's no separate status dot. */
.whisper-progress-area { display: block; }

.whisper-progress-area.state-error .yt-progress-status,
.whisper-progress-area.state-error .yt-progress-percent { color: var(--accent-red); }
.whisper-progress-area.state-error .yt-progress-fill { background: var(--accent-red); }

.whisper-progress-area.state-done .yt-progress-percent { color: var(--accent-green); }
.whisper-progress-area.state-done .yt-progress-fill { background: var(--accent-green); }

/* Per-card loading overlay - shown on the exact thumbnail a user just
   clicked, instead of only a background toast, so the click itself feels
   like it registered immediately. */
.stock-thumb-wrap {
    position: relative;
}

.stock-thumb-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(10, 10, 10, 0.6);
    border-radius: inherit;
}

.stock-thumb-spinner {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.25);
    border-top-color: var(--accent-blue);
    animation: stockThumbSpin 0.8s linear infinite;
}

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

/* ================================
   LAYERS TAB
   ================================ */
.layers-section-label {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.layers-row-label {
    font-size: 9px;
    color: var(--text-muted);
    margin-bottom: 5px;
}

.layers-empty-controls { display: flex; gap: 6px; align-items: stretch; }
.layers-empty-controls input { width: 64px; flex: 0 0 auto; box-sizing: border-box; background: var(--bg-tertiary); border: 1px solid var(--border-subtle); color: var(--text-primary); border-radius: 4px; font-size: 11px; padding: 6px; outline: none; }
.layers-empty-controls input:focus { border-color: var(--accent-blue); }
.layers-empty-controls .layers-segment-row { flex: 1; }
.layers-empty-controls .layers-segment { padding: 6px 4px; }
.layers-empty-hint { font-size: 9px; color: var(--text-muted); margin-top: 5px; line-height: 1.4; }

.layers-segment-row {
    display: flex;
    gap: 5px;
}

.layers-color-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.layers-color-dot {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    padding: 0;
    box-sizing: border-box;
    transition: transform 0.1s ease, border-color 0.15s ease;
}

.layers-color-dot:hover {
    transform: scale(1.12);
}

.layers-color-dot.active {
    border-color: var(--text-primary);
    box-shadow: 0 0 0 2px var(--bg-primary), 0 0 0 3px var(--text-primary);
}

.effect-pick-row {
    padding: 6px 8px;
    font-size: 10px;
    color: var(--text-secondary);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.effect-pick-row:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.effect-pick-row.active {
    background: var(--accent-blue);
    color: #fff;
}

.layers-segment {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    border-radius: var(--radius-md);
    font-size: 10px;
    font-weight: 600;
    padding: 9px 4px;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: center;
}

.layers-segment svg {
    width: 15px;
    height: 15px;
}

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

.layers-segment.active {
    background: rgba(var(--accent-blue-rgb), 0.14);
    border-color: var(--accent-blue);
    color: var(--accent-blue);
}

.stock-btn {
    flex: 1.8;
    background: rgba(var(--accent-blue-rgb), 0.15);
    color: var(--accent-blue);
    border: 1px solid rgba(var(--accent-blue-rgb), 0.3);
    border-radius: 4px;
    font-size: 9px;
    font-weight: bold;
    padding: 6px 0;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.stock-btn:hover {
    background: var(--accent-blue);
    color: #fff;
    border-color: var(--accent-blue);
}

/* Hide Toggle Button in Special Modes */
body.stock-mode #modeToggle,
body.auphonic-mode #modeToggle {
    display: none !important;
}

/* Fix for the Full Panel Loader displaying on launch */
#fullPanelLoader.hidden {
    display: none !important;
}

/* Macro build banner - hidden until a macro is actively being built */
#macroBuildBanner.hidden {
    display: none !important;
}


/* ================================
   INTERACTIVE GUIDE (TUTORIAL)
   ================================ */
#guideOverlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 20000;
    /* Extremely high so it covers EVERYTHING */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: opacity 0.2s ease;
}

#guideOverlay.hidden {
    opacity: 0;
    pointer-events: none;
}

.guide-box {
    background: var(--bg-primary);
    border: 1px solid var(--accent-blue);
    border-radius: var(--radius-md);
    width: 90%;
    max-height: 90vh;
    box-shadow: 0 10px 40px rgba(var(--accent-blue-rgb), 0.2);
    display: flex;
    flex-direction: column;
    position: relative;
    padding: 16px;
    transform: translateY(0);
    transition: transform 0.2s ease;
}

#guideOverlay.hidden .guide-box {
    transform: translateY(15px);
}

.guide-close {
    position: absolute;
    top: 10px;
    right: 12px;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 20px;
    cursor: pointer;
}

.guide-close:hover {
    color: var(--accent-red);
}

.guide-header {
    font-size: 16px;
    font-weight: bold;
    color: var(--accent-blue);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--border-subtle);
    padding-bottom: 6px;
}

.guide-brief {
    font-size: 11px;
    color: var(--text-secondary);
    margin-bottom: 12px;
    line-height: 1.4;
}

.guide-steps {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-right: 4px;
    margin-bottom: 12px;
}

.guide-steps::-webkit-scrollbar {
    width: 4px;
}

.guide-steps::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 2px;
}

.guide-step-item {
    background: var(--bg-secondary);
    border-left: 3px solid var(--accent-blue);
    padding: 8px 10px;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-size: 11px;
    color: var(--text-primary);
    line-height: 1.4;
}

.guide-step-item strong {
    color: var(--accent-orange);
}

.guide-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
    border-top: 1px solid var(--border-subtle);
}

.guide-counter {
    font-size: 10px;
    color: var(--text-muted);
    font-weight: bold;
}

.guide-next-btn {
    background: var(--accent-blue);
    color: #fff;
    border: none;
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(var(--accent-blue-rgb), 0.3);
    transition: all 0.15s ease;
}

.guide-next-btn:hover {
    background: #409cff;
    transform: scale(1.05);
}

.guide-next-btn.finish {
    background: var(--accent-green);
    box-shadow: 0 2px 10px rgba(48, 209, 88, 0.3);
}

.guide-next-btn.finish:hover {
    background: #3de065;
}


/* Back Button Styles */
.guide-back-btn {
    background: transparent;
    border: 1px solid var(--border-subtle);
    color: var(--text-muted);
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.guide-back-btn:hover:not(:disabled) {
    background: var(--bg-tertiary);
    border-color: var(--border-medium);
    color: var(--text-primary);
}

.guide-back-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}



/* ================================
   CUSTOM UI TOOLTIPS
   ================================ */
[data-tooltip] {
    position: relative;
}

[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 100%;
    /* Pushes it out to the right of the button */
    top: 50%;
    transform: translateY(-50%);
    margin-left: 12px;
    /* Breathing room */
    background: var(--bg-tertiary);
    color: var(--text-primary);
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    /* Stops it from blocking clicks */
    z-index: 10000;
    /* Makes sure it floats over everything */
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-medium);
    transition: all 0.15s ease;
}

/* When the user hovers over the button, reveal the tooltip! */
[data-tooltip]:hover::after {
    opacity: 1;
    visibility: visible;
}

/* A grid button's tooltip pops out below it, straight into the next row -
   promote the hovered button above its grid siblings so its tooltip doesn't
   render underneath (and get hidden by) the next row's opaque backgrounds. */
.tool-btn[data-tooltip]:hover {
    z-index: 10001;
}

/* Grid tool buttons (Trim tab, etc.) sit inside a container that clips overflow,
   so their tooltip can't pop out to the right like the sidebar's - show it centered
   below instead, and let it wrap since it needs to stay narrow. */
.tool-btn[data-tooltip]::after {
    left: 50%;
    top: 100%;
    right: auto;
    transform: translateX(-50%);
    margin-left: 0;
    margin-top: 6px;
    white-space: normal;
    width: 110px;
    text-align: center;
    font-size: 9px;
    line-height: 1.3;
}

/* Quick Access pill sits near the bottom of the window - popping a tooltip
   below it (the sidebar's default) would run off-screen, so these pop
   upward and centered instead, same instant CSS-hover tooltip as everywhere
   else in the panel (no native title-attribute delay). */
.pin-btn[data-tooltip]::after {
    left: 50%;
    top: auto;
    bottom: 100%;
    right: auto;
    transform: translateX(-50%);
    margin-left: 0;
    margin-bottom: 8px;
}

/* The sidebar (.tab-bar) has overflow-x: hidden for its own scroll/resize
   behavior, which clips the generic [data-tooltip]::after popup before it
   ever becomes visible - turn it off here so there's no dead invisible
   pseudo-element, and use a JS-positioned tooltip (below) instead. */
.tab-bar .tab-btn[data-tooltip]::after,
.tab-bar .settings-btn[data-tooltip]::after {
    content: none;
}

.sidebar-tooltip {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 10002;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-medium);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease;
}

.sidebar-tooltip.visible {
    opacity: 1;
    visibility: visible;
}

/* ================================
   FOOTER (SOCIALS) - lives at the bottom of the Settings modal (below
   Reset), not on a tab, so it's reachable no matter which tab is open.
   ================================ */
.panel-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
    padding: 12px 4px 0 4px;
    border-top: 1px solid var(--border-subtle);
}

.copyright-text {
    font-size: 9px;
    font-weight: 500;
    color: var(--text-muted);
    letter-spacing: 0.02em;
}

.social-icons {
    display: flex;
    gap: 12px;
    align-items: center;
}

.social-btn {
    width: 14px;
    height: 14px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
}

.social-btn:hover {
    color: var(--text-primary);
    transform: scale(1.15);
}
/* ================================
   CURVE EDITOR (Keyframes tab)
   ================================ */

.curve-graph-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 12px;
    margin: 12px 0;
    user-select: none;
    /* The inner SVG deliberately keeps overflow:visible so drag handles near
       the edge never get clipped mid-drag - this outer clip is what actually
       guarantees the curve/handles can never escape the rounded card, no
       matter how far a bounce/spring/elastic value swings. */
    overflow: hidden;
}

.curve-readout {
    font-size: 9px;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
    text-align: right;
    margin-bottom: 4px;
}

#curveSvg { display: block; overflow: visible; }
.curve-grid { stroke: var(--border-medium); stroke-width: 1; }
.curve-grid-dash { stroke: var(--border-subtle); stroke-width: 1; stroke-dasharray: 1 3; }
.curve-axis-label { fill: var(--text-muted); font-size: 8px; }
.curve-control-line { stroke: var(--text-muted); stroke-width: 1; stroke-dasharray: 2 2; }
.curve-path { fill: none; stroke: var(--accent-blue); stroke-width: 2; }
.curve-endpoint { fill: var(--bg-secondary); stroke: var(--text-primary); stroke-width: 1.5; }
.curve-handle { fill: var(--accent-blue); stroke: var(--bg-secondary); stroke-width: 2; cursor: grab; }
.curve-handle:active { cursor: grabbing; }

.curve-slider {
    -webkit-appearance: none;
    width: 100%;
    height: 3px;
    border-radius: 2px;
    background: var(--bg-tertiary);
    outline: none;
    margin: 0;
}

.curve-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--accent-blue);
    cursor: pointer;
    border: 2px solid var(--bg-primary);
    box-shadow: 0 0 0 1px var(--accent-blue);
}

.curve-lib-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 8px;
    border-radius: 6px;
    cursor: pointer;
}

.curve-lib-row:hover { background: var(--bg-tertiary); }
.curve-lib-row.active { background: rgba(var(--accent-blue-rgb), 0.1); }
.curve-lib-row .curve-lib-name { font-size: 10.5px; color: var(--text-secondary); flex: 1; }
.curve-lib-row.active .curve-lib-name { color: var(--text-primary); font-weight: 500; }
.curve-lib-row .curve-lib-actions { display: none; gap: 4px; }
.curve-lib-row:hover .curve-lib-actions { display: flex; }

/* ================================
   MACRO STEP BREAKDOWN (Macros tab)
   ================================ */

.macro-card {
    margin-bottom: 6px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.macro-card .result-item {
    border: none;
    border-radius: 0;
    margin: 0;
}

.macro-steps {
    background: var(--bg-primary);
    padding: 6px 10px 8px 30px;
}

.macro-step-line {
    font-size: 9.5px;
    color: var(--text-muted);
    line-height: 1.6;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ================================
   BUILT-IN MACROS (Macros tab)
   ================================ */
.bim-section { margin-bottom: 12px; }
.bim-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 2px 2px 6px; font-size: 11px; font-weight: 700; color: var(--text-primary); }
.bim-section-sub { font-size: 9px; font-weight: 500; color: var(--text-muted); text-align: right; }
.bim-yours-head { margin: 4px 2px 6px; font-size: 11px; font-weight: 700; color: var(--text-primary); }
.bim-card { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; padding: 8px 10px; background: var(--bg-tertiary); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); }
.bim-card-text { flex: 1; min-width: 0; }
.bim-card-name { font-size: 11px; font-weight: 700; color: var(--text-primary); }
.bim-card-desc { margin-top: 2px; font-size: 9.5px; line-height: 1.4; color: var(--text-muted); }
.bim-run-btn { flex-shrink: 0; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid rgba(10, 132, 255, 0.35); background: rgba(10, 132, 255, 0.1); color: var(--accent-blue); cursor: pointer; }
.bim-run-btn:hover { background: rgba(10, 132, 255, 0.2); }
.bim-run-btn svg { width: 11px; height: 11px; }

.bim-modal { width: 300px; max-width: calc(100% - 32px); max-height: calc(100% - 32px); display: flex; flex-direction: column; }
.bim-body { display: flex; flex-direction: column; gap: 10px; overflow-y: auto; min-height: 0; }
.bim-desc { font-size: 10.5px; line-height: 1.45; color: var(--text-secondary); }
.bim-selection { font-size: 10px; line-height: 1.45; color: var(--text-primary); background: var(--bg-tertiary); border: 1px solid var(--border-subtle); border-radius: 6px; padding: 7px 9px; }
.bim-warn { font-size: 10px; line-height: 1.45; color: var(--accent-orange, #ff9f0a); background: rgba(255, 159, 10, 0.08); border: 1px solid rgba(255, 159, 10, 0.35); border-radius: 6px; padding: 7px 9px; }
.bim-warn.bim-error { color: var(--accent-red); background: rgba(255, 69, 58, 0.08); border-color: rgba(255, 69, 58, 0.4); }
.bim-start-why { margin-top: 8px; }
.bim-start-why[hidden] { display: none; }
.bim-field label { font-size: 10.5px; color: var(--text-secondary); display: block; margin-bottom: 4px; }
.bim-field select, .bim-field input { width: 100%; box-sizing: border-box; background: var(--bg-tertiary); border: 1px solid var(--border-subtle); color: var(--text-primary); padding: 6px 8px; border-radius: 6px; font-size: 11px; outline: none; }
.bim-choice { display: flex; gap: 4px; }
.bim-choice button { flex: 1; padding: 6px 4px; font-size: 10.5px; font-weight: 600; color: var(--text-secondary); background: var(--bg-tertiary); border: 1px solid var(--border-subtle); border-radius: 6px; cursor: pointer; }
.bim-choice button.active { color: var(--accent-blue); border-color: var(--accent-blue); background: rgba(10, 132, 255, 0.12); }
.bim-note { font-size: 9.5px; line-height: 1.45; color: var(--text-muted); }
.bim-note:empty { display: none; }
.bim-actions { display: flex; gap: 6px; }
.bim-actions button { flex: 1; }
.bim-actions button:disabled { opacity: 0.5; cursor: default; }

.bim-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.bim-steps li { display: flex; align-items: flex-start; gap: 7px; font-size: 10.5px; line-height: 1.4; color: var(--text-muted); }
.bim-steps li .bim-dot { flex-shrink: 0; width: 14px; height: 14px; margin-top: 1px; border-radius: 50%; border: 1.5px solid var(--border-medium); box-sizing: border-box; display: flex; align-items: center; justify-content: center; font-size: 9px; }
.bim-steps li.running { color: var(--text-primary); font-weight: 600; }
.bim-steps li.running .bim-dot { border-color: var(--accent-blue); border-top-color: transparent; animation: bimSpin 0.8s linear infinite; }
.bim-steps li.done { color: var(--text-secondary); }
.bim-steps li.done .bim-dot { border-color: var(--accent-green); background: var(--accent-green); color: #000; }
.bim-steps li.done .bim-dot::after { content: '\2713'; }
.bim-steps li.failed { color: var(--accent-red); }
.bim-steps li.failed .bim-dot { border-color: var(--accent-red); background: var(--accent-red); color: #fff; }
.bim-steps li.failed .bim-dot::after { content: '!'; font-weight: 700; }
.bim-steps li.skipped { text-decoration: line-through; opacity: 0.6; }
.bim-steps li .bim-step-note { display: block; font-weight: 400; font-size: 9.5px; color: var(--text-muted); text-decoration: none; }
@keyframes bimSpin { to { transform: rotate(360deg); } }
.bim-status { font-size: 10px; color: var(--accent-blue); min-height: 14px; }
.bim-result { font-size: 10.5px; line-height: 1.5; color: var(--text-primary); background: var(--bg-tertiary); border: 1px solid var(--border-subtle); border-radius: 6px; padding: 8px 10px; }
.bim-result.bim-error { border-color: rgba(255, 69, 58, 0.45); }

/* ================================
   ANCHOR POINT GRID (Tools tab)
   ================================ */

.anchor-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    margin-top: 8px;
    width: 100px;
}

.anchor-btn {
    aspect-ratio: 1;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-subtle);
    border-radius: 4px;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.anchor-btn svg { width: 12px; height: 12px; }

.anchor-btn:hover {
    background: var(--bg-secondary);
    border-color: var(--accent-blue);
    color: var(--accent-blue);
}

/* ================================
   MINI TRANSFORM TOOLS (beside Anchor Point) - Align/Distribute/Nudge/
   Center. Every button here is a thin front-end onto Position on the same
   Motion component the Anchor grid above already edits - nothing new on
   the Premiere API side, just more entry points into it.

   Laid out as a 2x2 grid so each category reads as its own clearly
   separated group instead of one undifferentiated cluster:
     Anchor Point | Align
     Nudge        | Distribute
   ================================ */

.mini-tools-grid {
    display: grid;
    grid-template-columns: auto auto;
    column-gap: 22px;
    row-gap: 18px;
    margin-top: 10px;
    /* Sized to its own content (not stretched to fill a wider panel) and
       centered within the card - a fixed-size cluster of tiny buttons
       flush left in a wide panel just left a dead gap on the right. */
    width: max-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.mt-cell { min-width: 0; }

.mini-tools-grid .anchor-grid { margin-top: 0; }

.mini-tool-label {
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.mini-tool-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3px;
}

.mini-tool-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3px;
}

.nudge-pad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3px;
    width: 84px;
}

.mini-tool-btn {
    aspect-ratio: 1;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-subtle);
    border-radius: 4px;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.mini-tool-btn svg { width: 11px; height: 11px; }

.mini-tool-btn:hover {
    background: var(--bg-secondary);
    border-color: var(--accent-green);
    color: var(--accent-green);
}

.mini-tool-btn:active { transform: scale(0.92); }

#centerOnScreenBtn { color: var(--accent-green); border-color: rgba(48, 209, 88, 0.3); }
#centerOnScreenBtn:hover { background: rgba(48, 209, 88, 0.12); }

/* ================================
   TRANSFORM PANEL (Tools tab, beside Anchor Point)
   ================================ */

.transform-card { cursor: default; }

.transform-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding-bottom: 8px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--border-subtle);
}

.transform-header-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
}

.transform-reset-btn {
    background: none;
    border: none;
    color: var(--accent-green);
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
}

.transform-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 7px 0;
}

.transform-row-label {
    font-size: 11px;
    color: var(--text-secondary);
}

.transform-field-pair {
    display: flex;
    align-items: center;
    gap: 8px;
}

.transform-field {
    width: 46px;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border-medium);
    color: var(--text-primary);
    font-size: 11px;
    text-align: right;
    padding: 2px 0;
    outline: none;
    -moz-appearance: textfield;
}

.transform-field::-webkit-outer-spin-button,
.transform-field::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.transform-field:focus { border-bottom-color: var(--accent-blue); }
.transform-field:disabled { opacity: 0.4; }
.transform-field:not(:disabled) { cursor: ew-resize; }

.transform-field-wide { width: 100px; }

.action-modal-extra { text-align: center; margin-top: -2px; }
.action-modal-extra-btn {
    background: none;
    border: none;
    padding: 4px 2px;
    font-size: 11px;
    color: var(--accent-blue);
    cursor: pointer;
}
.action-modal-extra-btn:hover { text-decoration: underline; }

/* ===== SHARED BIGGER "PILL" SEARCH BOX (YouTube / Stocks / Library) ===== */
.sm-search-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    flex-shrink: 0;
}

.sm-search-box {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 7px;
    height: 38px;
    padding: 0 12px;
    box-sizing: border-box;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-subtle);
    border-radius: 20px;
    transition: border-color 0.15s ease;
}
.sm-search-box:focus-within { border-color: var(--accent-blue); }

.sm-search-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: var(--text-muted);
}

.sm-search-input {
    flex: 1;
    min-width: 0;
    background: none;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-size: 12px;
    padding: 0;
}
.sm-search-input::placeholder { color: var(--text-muted); }

.sm-search-icon-btn {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: none;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, color 0.15s ease;
}
.sm-search-icon-btn:hover { background: var(--bg-secondary); color: var(--text-primary); }
.sm-search-icon-btn svg { width: 13px; height: 13px; }
.sm-search-icon-btn[hidden] { display: none; }

.sm-search-go-btn {
    flex-shrink: 0;
    height: 38px;
    padding: 0 18px;
    border-radius: 20px;
    font-size: 12px;
    white-space: nowrap;
}

/* ----- YouTube tab: paste-a-link loading skeleton ----- */
.yt-title-loading { color: var(--text-muted); font-style: italic; }

/* ===== SFX TAB ===== */
.sfx-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 4px;
    flex-shrink: 0;
    margin-top: 4px;
}
.sfx-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 2px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 9px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.sfx-tab svg { width: 14px; height: 14px; }
.sfx-tab.active { background: var(--accent-blue); border-color: var(--accent-blue); color: #fff; }
.sfx-tab:not(.active):hover { color: var(--text-primary); border-color: var(--border-medium); }

/* A single-column list has no reason to ride on .stock-grid's CSS Grid at
   all - overriding to flexbox instead of just grid-template-columns:1fr
   sidesteps a real row-auto-sizing bug seen in CEP's (older) Chromium engine,
   where grid rows compressed/overlapped instead of sizing to their content. */
.sfx-grid { display: flex; flex-direction: column; gap: 6px; overflow-x: hidden; }

.sfx-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    overflow: hidden;
    flex-shrink: 0;
    cursor: pointer;
    transition: transform 0.14s ease, background 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease;
}
/* Pop on hover to make the grid feel alive - skipped while its own trim
   panel is open so the expanded waveform editor doesn't scale with it. */
.sfx-card:hover:not(.trim-open) {
    transform: scale(1.02);
    background: var(--bg-hover);
    border-color: var(--border-medium);
    box-shadow: var(--shadow-sm);
    position: relative;
    z-index: 1;
}
/* Hover is the only preview trigger now (no play icon) - glow the card
   itself while it's auditioning so there's still a clear "this one" cue. */
.sfx-card.previewing {
    border-color: var(--accent-purple);
    box-shadow: 0 0 0 1px var(--accent-purple), 0 0 10px rgba(191, 90, 242, 0.35);
}

.sfx-card-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
}

.sfx-card-info { flex: 1; min-width: 0; }
.sfx-card-name {
    display: block;
    font-size: 11px;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sfx-card-meta { font-size: 9px; color: var(--text-muted); }

.sfx-card-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }

.sfx-star-btn {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    background: var(--bg-tertiary);
    color: var(--text-muted);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.sfx-star-btn svg { width: 14px; height: 14px; }
.sfx-star-btn:hover { color: var(--accent-orange); }
.sfx-star-btn.on { color: var(--accent-orange); background: rgba(255, 159, 10, 0.15); }

/* Plain glowing folder icon, no circle/border wrapper - just the icon
   itself lighting up on hover. */
.sfx-reveal-btn {
    width: 26px;
    height: 26px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
    transition: color 0.15s ease, filter 0.15s ease;
}
.sfx-reveal-btn svg { width: 15px; height: 15px; }
.sfx-reveal-btn:hover { color: var(--accent-blue); filter: drop-shadow(0 0 4px rgba(var(--accent-blue-rgb), 0.7)); }

.sfx-select-box {
    width: 18px;
    height: 18px;
    border-radius: 5px;
    border: 1.5px solid var(--border-medium);
    display: flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    flex-shrink: 0;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.sfx-select-box svg { width: 11px; height: 11px; }
.sfx-select-box.checked { background: var(--accent-purple); border-color: var(--accent-purple); color: #fff; }

.sfx-trim-icon {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    background: var(--bg-tertiary);
    color: var(--accent-orange);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.sfx-trim-icon:hover { background: var(--accent-orange); color: #3a2500; }
.sfx-trim-icon svg { width: 14px; height: 14px; }

/* ----- Inline 5s-warning + trim panel, expands under a card ----- */
.sfx-trim-panel {
    border-top: 1px solid var(--border-subtle);
    padding: 8px;
    background: rgba(255, 159, 10, 0.05);
}

.sfx-warn-line {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    color: var(--accent-orange);
    margin-bottom: 8px;
}
.sfx-warn-line svg { flex-shrink: 0; width: 13px; height: 13px; }

.sfx-trim-wave-wrap {
    position: relative;
    height: 48px;
    background: var(--bg-tertiary);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 6px;
    cursor: pointer;
}
.sfx-trim-wave-wrap canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.sfx-trim-shade {
    position: absolute;
    top: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.55);
    pointer-events: none;
}
.sfx-trim-range {
    position: absolute;
    top: 0;
    bottom: 0;
    border-left: 2px solid var(--accent-green);
    border-right: 2px solid var(--accent-green);
    box-sizing: border-box;
    pointer-events: none;
}

.sfx-trim-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 10px;
    margin-left: -5px;
    cursor: ew-resize;
    z-index: 2;
}
.sfx-trim-handle::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4px;
    height: 20px;
    transform: translate(-50%, -50%);
    background: var(--accent-green);
    border-radius: 2px;
    box-shadow: 0 0 6px rgba(48, 209, 88, 0.6);
}

.sfx-trim-times {
    display: flex;
    justify-content: space-between;
    font-size: 9px;
    color: var(--text-muted);
    margin-bottom: 8px;
}
.sfx-trim-times span { color: var(--accent-green); font-weight: 600; }

.sfx-trim-actions { display: flex; gap: 6px; }
.sfx-trim-actions button {
    flex: 1;
    padding: 6px 4px;
    border-radius: var(--radius-sm);
    font-size: 9.5px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid var(--border-subtle);
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}
.sfx-trim-actions button:hover { color: var(--text-primary); border-color: var(--border-medium); }
.sfx-trim-go { background: var(--accent-green) !important; border-color: var(--accent-green) !important; color: #06230f !important; }
.sfx-trim-full { color: var(--accent-blue) !important; }

/* ----- Stacks tab - saved combos, same accordion idiom as the trim panel ----- */
.sfx-stack-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    overflow: hidden;
    flex-shrink: 0;
}
.sfx-stack-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    cursor: pointer;
}
.sfx-stack-layers { display: flex; flex-shrink: 0; }
.sfx-stack-layer-icon {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    background: var(--accent-blue);
    border: 2px solid var(--bg-secondary);
    margin-left: -8px;
}
.sfx-stack-layer-icon:first-child { margin-left: 0; }
.sfx-stack-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sfx-stack-name { font-size: 11px; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sfx-stack-count { font-size: 9px; color: var(--text-muted); }
.sfx-stack-icon-btn {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.sfx-stack-icon-btn svg { width: 12px; height: 12px; }
.sfx-stack-play:hover { color: var(--accent-purple); }
.sfx-stack-drop { background: var(--accent-blue); color: #fff; }
.sfx-stack-drop:hover { filter: brightness(1.1); }
.sfx-stack-del:hover { background: rgba(255, 69, 58, 0.2); color: var(--accent-red); }

.sfx-stack-detail {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.18s ease;
}
.sfx-stack-card.open .sfx-stack-detail { max-height: 260px; overflow-y: auto; }
.sfx-stack-detail::-webkit-scrollbar { width: 6px; }
.sfx-stack-detail::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.03); border-radius: 10px; margin: 2px; }
.sfx-stack-detail::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 10px; background-clip: padding-box; }
.sfx-stack-detail::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.28); }
.sfx-stack-sound-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border-top: 1px solid var(--border-subtle);
    font-size: 10px;
    color: var(--text-secondary);
}
.sfx-stack-sound-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sfx-stack-remove {
    width: 18px;
    height: 18px;
    border-radius: 5px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}
.sfx-stack-remove:hover { color: var(--accent-red); }
.sfx-stack-remove svg { width: 11px; height: 11px; }

/* ----- Auto SFX tab - static workflow rows, deep logic not built yet ----- */
.sfx-auto-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background 0.14s ease, border-color 0.14s ease;
}
.sfx-auto-row:hover { background: var(--bg-hover); border-color: var(--border-medium); }
.sfx-auto-row svg { width: 16px; height: 16px; color: var(--accent-blue); flex-shrink: 0; }
.sfx-auto-row-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sfx-auto-row-name { font-size: 11px; color: var(--text-primary); }
.sfx-auto-row-desc { font-size: 9px; color: var(--text-muted); }
.sfx-auto-row-soon {
    font-size: 8.5px;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--bg-tertiary);
    padding: 2px 6px;
    border-radius: 4px;
    flex-shrink: 0;
}

/* ----- Replace mode banner - sits above every SFX sub-tab while active ----- */
.sfx-replace-banner {
    align-items: center;
    gap: 8px;
    background: rgba(var(--accent-blue-rgb), 0.12);
    border: 1px solid var(--accent-blue);
    border-radius: var(--radius-sm);
    padding: 6px 8px;
    margin-top: 6px;
    font-size: 9.5px;
    color: var(--text-primary);
    flex-shrink: 0;
}
.sfx-replace-banner svg { width: 14px; height: 14px; color: var(--accent-blue); flex-shrink: 0; }
.sfx-replace-banner span { flex: 1; min-width: 0; }
.sfx-replace-continuous { display: flex; align-items: center; gap: 3px; white-space: nowrap; flex-shrink: 0; color: var(--text-secondary); }
.sfx-replace-banner button {
    background: var(--bg-tertiary);
    border: none;
    border-radius: 4px;
    color: var(--text-secondary);
    font-size: 9px;
    font-weight: 600;
    padding: 4px 8px;
    cursor: pointer;
    flex-shrink: 0;
}
.sfx-replace-banner button:hover { color: var(--text-primary); }

/* ----- Auto SFX detail sub-views ----- */
.sfx-auto-back {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 2px 10px;
    font-size: 11px;
    color: var(--text-secondary);
    cursor: pointer;
    flex-shrink: 0;
}
.sfx-auto-back:hover { color: var(--text-primary); }
.sfx-auto-back svg { width: 14px; height: 14px; }

.sfx-marker-row {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: 6px 8px;
    margin-bottom: 6px;
    font-size: 10px;
}
/* .sfx-design-row is a column: its .sfx-design-row-main flex row, plus an
   optional .sfx-design-trim block underneath when that match is over 5s. */
.sfx-design-row {
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: 6px 8px;
    margin-bottom: 6px;
    font-size: 10px;
}
.sfx-design-row-main { display: flex; align-items: center; gap: 6px; }
.sfx-design-trim { margin-top: 8px; }
.sfx-marker-time, .sfx-design-tag { color: var(--text-muted); font-size: 9px; flex-shrink: 0; width: 44px; }
.sfx-marker-name-input {
    flex: 1;
    min-width: 0;
    background: var(--bg-tertiary);
    border: 1px solid transparent;
    border-radius: 4px;
    color: var(--text-primary);
    font-size: 10px;
    padding: 4px 6px;
    outline: none;
}
.sfx-marker-name-input:focus { border-color: var(--accent-blue); }
.sfx-marker-del, .sfx-design-pick {
    width: 20px;
    height: 20px;
    border-radius: 5px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}
.sfx-marker-del:hover { color: var(--accent-red); }
.sfx-marker-del svg { width: 12px; height: 12px; }

.sfx-design-btn {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: 4px;
    font-size: 9px;
    padding: 3px 7px;
    cursor: pointer;
    flex-shrink: 0;
    white-space: nowrap;
}
.sfx-design-btn:hover { color: var(--text-primary); border-color: var(--accent-blue); }
.sfx-design-trim-note { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--text-secondary); font-size: 9.5px; margin-bottom: 6px; }
.sfx-design-name { flex: 1; min-width: 0; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sfx-design-row.matched { border-color: rgba(48, 209, 88, 0.3); }
.sfx-design-row.unmatched { border-color: rgba(255, 159, 10, 0.3); }
.sfx-design-status { font-size: 13px; flex-shrink: 0; }
.sfx-design-status.ok { color: var(--accent-green); }
.sfx-design-status.no { color: var(--accent-orange); }
.sfx-design-picker {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: 4px;
    font-size: 9px;
    padding: 3px 4px;
    max-width: 90px;
}

.sfx-auto-summary { display: flex; gap: 10px; font-size: 10px; color: var(--text-secondary); margin-bottom: 8px; flex-shrink: 0; }
.sfx-auto-summary b { color: var(--text-primary); }

.sfx-auto-btn {
    background: var(--accent-blue);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 10.5px;
    font-weight: 600;
    padding: 8px 10px;
    cursor: pointer;
    width: 100%;
    flex-shrink: 0;
    margin-top: 6px;
}
.sfx-auto-btn:hover { filter: brightness(1.1); }
.sfx-auto-btn:disabled { opacity: 0.5; cursor: default; }
.sfx-auto-btn.secondary { background: var(--bg-tertiary); color: var(--text-secondary); }

/* ===== LABELS TAB ===== */
.labels-target-pill {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 12px;
}

.labels-target-tag {
    flex-shrink: 0;
    padding: 3px 8px;
    border-radius: 20px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.03em;
    background: rgba(var(--accent-blue-rgb), 0.15);
    color: var(--accent-blue);
}
.labels-target-tag.is-timeline {
    background: rgba(255, 159, 10, 0.15);
    color: var(--accent-orange);
}

.labels-target-name {
    font-size: 10px;
    color: var(--text-secondary);
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.labels-swatch-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 12px;
}

.labels-swatch {
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    border: none;
    padding: 0;
    cursor: pointer;
    position: relative;
    transition: transform 0.12s ease, filter 0.12s ease, box-shadow 0.12s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
}
.labels-swatch:hover { filter: brightness(1.08); }
.labels-swatch:active { transform: scale(0.96); }
.labels-swatch:disabled { opacity: 0.4; cursor: default; filter: none; }

.labels-swatch-name {
    position: absolute;
    left: 6px;
    right: 6px;
    bottom: 5px;
    font-size: 9px;
    font-weight: 600;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.labels-swatch-name.labels-text-dark {
    color: #1a1a1a;
    text-shadow: none;
}

.labels-randomize-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 11px;
    font-weight: 600;
    padding: 10px;
    margin-bottom: 12px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.labels-randomize-btn svg { width: 15px; height: 15px; color: var(--accent-purple); flex-shrink: 0; }
.labels-randomize-btn:hover { background: var(--bg-hover); border-color: var(--border-medium); }
.labels-randomize-btn:active { transform: scale(0.98); }
.labels-randomize-btn:disabled { opacity: 0.5; cursor: default; }

.labels-tip-banner {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    font-size: 10px;
    line-height: 1.5;
    color: var(--text-secondary);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    padding: 10px 11px;
}
.labels-tip-banner svg { flex-shrink: 0; margin-top: 1px; color: var(--accent-blue); }
.labels-tip-banner b { color: var(--text-primary); }
.labels-tip-steps { margin-top: 4px; color: var(--text-muted); }

.transform-link-btn {
    width: 20px;
    height: 20px;
    border-radius: 5px;
    border: 1px solid var(--border-subtle);
    background: var(--bg-tertiary);
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.transform-link-btn svg { width: 11px; height: 11px; }

.transform-link-btn.active {
    border-color: var(--accent-green);
    color: var(--accent-green);
    background: rgba(48, 209, 88, 0.1);
}

.transform-hint {
    font-size: 9px;
    color: var(--text-muted);
    margin-top: 6px;
}

/* ================================
   SILENCE REMOVER - REDESIGN
   Green accent (matches the panel's own primary color), scaled down from
   the reference mockup's desktop-app proportions to fit a docked ~320px
   CEP panel. Every element ID from the old markup is preserved untouched
   below - only classes/layout changed - so tool_silence_tab.js needs no
   changes for any of this.
   ================================ */

#contentSilence .sil-app {
    display: flex;
    flex-direction: column;
    height: 100%;
    box-sizing: border-box;
}

#silScrollArea {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 4px;
}

.sil-file-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    margin-bottom: 10px;
    background: linear-gradient(145deg, rgba(48, 209, 88, 0.08), rgba(30, 30, 30, 0.4));
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-lg);
}

.sil-file-icon {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: var(--bg-tertiary);
    color: var(--accent-green);
    display: flex;
    align-items: center;
    justify-content: center;
}

.sil-file-icon svg { width: 15px; height: 15px; }

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

.sil-warn-banner {
    font-size: 10px;
    color: var(--accent-orange);
    background: rgba(255, 159, 10, 0.1);
    border: 1px solid rgba(255, 159, 10, 0.3);
    border-radius: 8px;
    padding: 7px 8px;
    margin-bottom: 8px;
}

.sil-scan-button {
    width: 100%;
    height: 54px;
    margin-bottom: 12px;
    border: none;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, #34dd63 0%, #1fae4c 100%);
    color: #06210f;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    box-shadow: 0 8px 20px rgba(48, 209, 88, 0.25);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.sil-scan-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(48, 209, 88, 0.35);
}

.sil-scan-button:active { transform: translateY(0); }

.sil-scan-button svg { width: 16px; height: 16px; flex: 0 0 auto; }

.sil-scan-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.25; }

.sil-scan-title { font-size: 13px; font-weight: 700; letter-spacing: -0.2px; }

.sil-scan-subtitle { font-size: 8px; font-weight: 600; letter-spacing: 1.4px; opacity: 0.75; }

.sil-mode-selector {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 10px;
}

.sil-mode-button {
    height: 44px;
    border-radius: 12px;
    border: 1px solid var(--border-subtle);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.sil-mode-button.active {
    border: 1.5px solid var(--accent-green);
    background: linear-gradient(145deg, rgba(48, 209, 88, 0.16), rgba(48, 209, 88, 0.04));
    color: var(--text-primary);
    box-shadow: 0 0 14px rgba(48, 209, 88, 0.15);
}

.sil-mode-title { font-size: 12px; font-weight: 600; }

.sil-mode-subtitle {
    font-size: 8px;
    font-weight: 600;
    letter-spacing: 0.6px;
    color: var(--text-muted);
}

.sil-mode-button.active .sil-mode-subtitle { color: var(--accent-green); }

.sil-editor-panel {
    padding: 12px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: var(--bg-secondary);
}

.sil-setting-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.sil-sensitivity-labels {
    display: flex;
    justify-content: space-between;
    color: var(--text-muted);
    font-size: 9px;
    margin-bottom: 6px;
}

.sil-sensitivity-labels .active { color: var(--accent-green); font-weight: 600; }

.sil-slider {
    -webkit-appearance: none;
    width: 100%;
    height: 5px;
    border-radius: 100px;
    background: var(--bg-tertiary);
    outline: none;
    margin: 0;
    cursor: pointer;
}

.sil-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #eafff0;
    border: 3px solid var(--accent-green);
    box-shadow: 0 0 0 3px rgba(48, 209, 88, 0.18), 0 0 10px rgba(48, 209, 88, 0.4);
    cursor: grab;
}

/* Same glowing-dot look as the slider thumb above, applied to a checkbox -
   unchecked is a plain muted ring, checked fills + glows to match exactly. */
.sil-glow-checkbox {
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--bg-tertiary);
    border: 2px solid var(--border-subtle);
    outline: none;
    margin: 0;
    flex-shrink: 0;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.sil-glow-checkbox:hover { border-color: var(--text-muted); }
.sil-glow-checkbox:checked {
    background: #eafff0;
    border-color: var(--accent-green);
    box-shadow: 0 0 0 3px rgba(48, 209, 88, 0.18), 0 0 10px rgba(48, 209, 88, 0.4);
}

.sil-slider-value {
    margin-top: 8px;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    color: var(--accent-green);
}

.sil-slider-value span:last-child { color: var(--text-muted); font-weight: 500; }

.sil-waveform-container {
    position: relative;
    width: 100%;
    height: 84px;
    margin-top: 12px;
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid var(--border-medium);
    background: var(--bg-tertiary);
}

.sil-waveform-container canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

.sil-waveform-container { cursor: grab; }
.sil-waveform-container:active { cursor: grabbing; }

.sil-zoom-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 8px;
}

.sil-zoom-button {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    border: 1px solid var(--border-medium);
    background: var(--bg-tertiary);
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.sil-zoom-button:hover {
    border-color: var(--accent-green);
    background: rgba(48, 209, 88, 0.12);
    color: var(--accent-green);
}

.sil-zoom-button:active { transform: scale(0.94); }

/* Numeric readouts next to the threshold/min-gap sliders. The slider is the
   only input someone actually drags, so the native up/down spinner on these
   is just noise - removed, with the extra width it frees up given to the
   number itself so a value like "0.25" doesn't get clipped. */
.sil-num-input {
    width: 30px;
    background: transparent;
    border: none;
    color: var(--accent-green);
    font-size: 11px;
    font-weight: 700;
    outline: none;
    -moz-appearance: textfield;
}

.sil-num-input::-webkit-outer-spin-button,
.sil-num-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* ================================
   AI TAB - purple accent (this extension's existing --accent-purple),
   same structural language as the Silence Remover redesign so the panel
   still feels like one product, just visually distinct per tab.
   ================================ */

#contentAI .ai-app,
#contentConvert .ai-app,
#contentTranscribe .ai-app {
    display: flex;
    flex-direction: column;
    height: 100%;
    box-sizing: border-box;
}

#aiScrollArea,
#convertScrollArea,
#transcribeScrollArea {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 4px;
}

.ai-mode-selector {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 12px;
}

.ai-mode-button {
    height: 50px;
    border-radius: 12px;
    border: 1px solid var(--border-subtle);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-size: 11px;
    font-weight: 600;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.ai-mode-button svg { width: 15px; height: 15px; flex: 0 0 auto; }

.ai-mode-button.active {
    border: 1.5px solid var(--accent-purple);
    background: linear-gradient(145deg, rgba(191, 90, 242, 0.16), rgba(191, 90, 242, 0.04));
    color: var(--text-primary);
    box-shadow: 0 0 14px rgba(191, 90, 242, 0.15);
}

.ai-editor-panel {
    padding: 12px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: var(--bg-secondary);
}

.ai-setting-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.ai-source-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 10px;
}

.ai-source-btn {
    height: 42px;
    border-radius: 10px;
    border: 1px solid var(--border-subtle);
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 600;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.ai-source-btn svg { width: 13px; height: 13px; }

.ai-source-btn.active {
    border: 1.5px solid var(--accent-purple);
    background: rgba(191, 90, 242, 0.12);
    color: var(--text-primary);
}

.ai-file-name {
    font-size: 10px;
    color: var(--text-muted);
    margin-bottom: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ai-file-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    margin-bottom: 10px;
    background: linear-gradient(145deg, rgba(191, 90, 242, 0.08), rgba(30, 30, 30, 0.4));
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-lg);
}

.ai-file-card-icon {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: var(--bg-tertiary);
    color: var(--accent-purple);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ai-file-card-icon svg { width: 15px; height: 15px; }

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

.ai-waveform-static {
    position: relative;
    width: 100%;
    height: 64px;
    margin-bottom: 10px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--border-medium);
    background: var(--bg-tertiary);
    cursor: default;
}

.ai-waveform-static canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

.ai-image-preview {
    width: 100%;
    height: 100px;
    margin-bottom: 8px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--border-subtle);
    background:
        linear-gradient(45deg, #2a2a2a 25%, transparent 25%),
        linear-gradient(-45deg, #2a2a2a 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #2a2a2a 75%),
        linear-gradient(-45deg, transparent 75%, #2a2a2a 75%);
    background-size: 16px 16px;
    background-position: 0 0, 0 8px, 8px -8px, -8px 0px;
    background-color: var(--bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ai-image-preview img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.ai-warn-banner {
    font-size: 10px;
    color: var(--accent-orange);
    background: rgba(255, 159, 10, 0.1);
    border: 1px solid rgba(255, 159, 10, 0.3);
    border-radius: 8px;
    padding: 7px 8px;
    margin-bottom: 8px;
}

.ai-key-input-row {
    display: flex;
    gap: 6px;
    margin-bottom: 6px;
}

.ai-key-input {
    flex: 1;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-subtle);
    color: var(--text-primary);
    padding: 8px 9px;
    border-radius: 8px;
    outline: none;
    font-size: 10px;
}

.ai-key-input:focus { border-color: var(--accent-purple); }

.ai-key-save-btn {
    padding: 0 14px;
    border: none;
    border-radius: 8px;
    background: var(--accent-purple);
    color: white;
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}

.ai-key-save-btn:hover { background: #cc7bf5; }

.ai-key-help-toggle {
    background: none;
    border: none;
    color: var(--accent-purple);
    font-size: 9px;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    margin-bottom: 8px;
}

.ai-key-help {
    margin: 0 0 10px;
    padding: 8px 10px 8px 22px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    font-size: 9.5px;
    color: var(--text-secondary);
    line-height: 1.6;
}

.ai-key-help li { margin-bottom: 2px; }
.ai-key-help li:last-child { margin-bottom: 0; }
.ai-key-help-host { color: var(--accent-purple); font-weight: 600; }
.ai-key-help b { color: var(--text-primary); }

.ai-preset-row { margin-bottom: 4px; }

.ai-select {
    width: 100%;
    box-sizing: border-box;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-subtle);
    color: var(--text-primary);
    padding: 8px 9px;
    border-radius: 8px;
    outline: none;
    font-size: 10px;
    margin-bottom: 10px;
}

.ai-select:focus { border-color: var(--accent-purple); }

.ai-cta-button {
    width: 100%;
    min-height: 52px;
    margin-top: 6px;
    border: none;
    border-radius: 14px;
    background: linear-gradient(135deg, #cf7bf7, #a83be0);
    color: #1c0630;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(191, 90, 242, 0.28);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.ai-cta-button:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(191, 90, 242, 0.38);
}

.ai-cta-button:active { transform: translateY(0); }

.ai-cta-button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

.ai-cta-title { font-size: 14px; font-weight: 700; letter-spacing: -0.2px; }
.ai-cta-subtitle { margin-top: 3px; font-size: 8px; font-weight: 600; letter-spacing: 1.2px; opacity: 0.75; }

.ai-progress-area {
    margin-top: 10px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    padding: 10px;
}

.ai-progress-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    font-size: 10px;
    color: var(--text-primary);
}

.ai-stop-btn {
    font-size: 9px;
    font-weight: 700;
    color: var(--accent-red);
    background: none;
    border: 1px solid var(--accent-red);
    border-radius: 4px;
    padding: 2px 8px;
    cursor: pointer;
}

.ai-progress-track {
    width: 100%;
    height: 4px;
    background: var(--bg-secondary);
    border-radius: 2px;
    overflow: hidden;
}

.ai-progress-fill {
    width: 40%;
    height: 100%;
    background: var(--accent-purple);
}

.ai-progress-fill.indeterminate {
    animation: silProgSweep 1.1s ease-in-out infinite;
}

.ai-summary {
    margin-top: 12px;
    text-align: center;
    padding: 10px;
    background: rgba(191, 90, 242, 0.08);
    border: 1px solid rgba(191, 90, 242, 0.25);
    border-radius: 10px;
}

.ai-summary-title { font-size: 11px; color: var(--accent-purple); font-weight: 700; margin-bottom: 4px; }
.ai-summary-desc { font-size: 9.5px; color: var(--text-secondary); }

.ai-mode-selector-3 { grid-template-columns: repeat(3, 1fr); }
.ai-mode-selector-3 .ai-mode-title { font-size: 10px; }
.ai-mode-selector-3 svg { width: 13px; height: 13px; }

/* ----- Transcribe (Whisper) tab ----- */
.whisper-model-select {
    width: 100%;
    box-sizing: border-box;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-subtle);
    color: var(--text-primary);
    border-radius: 4px;
    font-size: 10px;
    padding: 7px;
    outline: none;
}
/* Log boxes: text can be selected and copied piece by piece. */
.whisper-engine-log,
#smtDiagLogTextarea {
    -webkit-user-select: text;
    user-select: text;
    cursor: text;
}
.whisper-engine-log {
    width: 100%;
    height: 70px;
    resize: none;
    background: var(--bg-primary);
    border: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    font-family: monospace;
    font-size: 9px;
    padding: 6px;
    border-radius: 4px;
    outline: none;
    box-sizing: border-box;
    margin-top: 6px;
}
.whisper-transcript-box {
    width: 100%;
    height: 140px;
    resize: vertical;
    background: var(--bg-primary);
    border: 1px solid var(--border-subtle);
    color: var(--text-primary);
    font-size: 11px;
    line-height: 1.5;
    padding: 8px;
    border-radius: 4px;
    outline: none;
    box-sizing: border-box;
    margin-top: 6px;
}

.ai-measured-readout {
    text-align: center;
    font-size: 9.5px;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.ai-scope-row {
    margin-bottom: 10px;
    padding: 9px 10px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
}

.ai-scope-label {
    font-size: 9.5px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.ai-scope-options {
    display: flex;
    gap: 6px;
}

.ai-scope-btn {
    flex: 1;
    height: 30px;
    padding: 0 6px;
    border-radius: 8px;
    border: 1px solid var(--border-subtle);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 9.5px;
    font-weight: 600;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.ai-scope-btn.active {
    border: 1.5px solid var(--accent-purple);
    background: rgba(191, 90, 242, 0.14);
    color: var(--text-primary);
}

.ai-tips-card {
    margin-top: 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.ai-tips-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    background: none;
    border: none;
    color: var(--text-primary);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
}

.ai-tips-chevron {
    color: var(--text-muted);
    font-size: 11px;
    transition: transform 0.15s ease;
}

.ai-tips-chevron.collapsed { transform: rotate(-90deg); }

.ai-tips-body {
    padding: 0 12px 12px;
}

.ai-tips-list {
    margin: 0;
    padding-left: 16px;
    font-size: 10.5px;
    color: var(--text-secondary);
    line-height: 1.7;
}

.ai-tips-list li { margin-bottom: 4px; }
.ai-tips-list li:last-child { margin-bottom: 0; }
.ai-tips-list b { color: var(--text-primary); }

.sil-detection-result {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 14px;
}

.sil-detection-icon {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: linear-gradient(145deg, rgba(48, 209, 88, 0.22), rgba(48, 209, 88, 0.06));
    color: var(--accent-green);
    display: flex;
    align-items: center;
    justify-content: center;
}

.sil-detection-icon svg { width: 18px; height: 18px; }

.sil-detection-info { display: flex; flex-direction: column; gap: 2px; }

.sil-detection-count { font-size: 34px; line-height: 1; font-weight: 700; letter-spacing: -1px; color: var(--text-primary); }

.sil-detection-label { font-size: 10px; color: var(--text-secondary); }

.sil-detection-saved { font-size: 10px; color: var(--accent-green); font-weight: 600; }

.sil-action-selector {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 14px;
}

.sil-action-button {
    min-height: 44px;
    border-radius: 12px;
    border: 1px solid var(--border-subtle);
    background: var(--bg-tertiary);
    color: var(--text-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.sil-action-button.active {
    border: 1.5px solid var(--accent-green);
    background: linear-gradient(145deg, rgba(48, 209, 88, 0.16), rgba(48, 209, 88, 0.04));
}

.sil-action-icon { color: var(--accent-green); display: flex; }
.sil-action-icon svg { width: 14px; height: 14px; }

.sil-action-title { font-size: 12px; font-weight: 600; }

.sil-cut-button {
    width: 100%;
    min-height: 52px;
    margin-top: 12px;
    border: none;
    border-radius: 14px;
    background: linear-gradient(135deg, #34dd63, #1a9e46);
    color: #06210f;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(48, 209, 88, 0.28);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.sil-cut-button:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(48, 209, 88, 0.38);
}

.sil-cut-button:active { transform: translateY(0); }

.sil-cut-button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

.sil-cut-button-title { font-size: 14px; font-weight: 700; letter-spacing: -0.2px; }

.sil-cut-button-subtitle { margin-top: 3px; font-size: 8px; font-weight: 600; letter-spacing: 1.2px; opacity: 0.75; }

.sil-progress-area {
    margin-top: 10px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    padding: 10px;
}

.sil-summary { margin-top: 12px; text-align: center; }

/* Alternate clips V1/V2 (after a silence cut) */
.sil-alt-card {
    margin-top: 14px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    padding: 10px;
}
.sil-alt-head { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; color: var(--text-primary); }
.sil-alt-head svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--accent-green); }
.sil-alt-desc { margin: 6px 0 8px; font-size: 9.5px; line-height: 1.45; color: var(--text-muted); }
.sil-alt-btn { width: 100%; padding: 8px; font-size: 11px; }
.sil-alt-btn:disabled { opacity: 0.5; cursor: default; }
.sil-alt-status { margin-top: 6px; font-size: 9.5px; line-height: 1.4; color: var(--text-muted); }
.sil-alt-status.ok { color: var(--accent-green); }
.sil-alt-status.err { color: var(--accent-red); }

/* Safe Zone tab - reuses .sil-app/.sil-file-card/.sil-scan-button/
   .offset-cancel-btn/.sil-glow-checkbox wholesale (same "clean design" the
   Silence Remover tab already established), only adding what's actually new:
   the guide preview image and its surrounding checkbox/button/status rows. */
.szone-preview-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md, 8px);
    padding: 10px;
    margin: 14px 0;
    min-height: 80px;
}

.szone-preview-img {
    max-width: 100%;
    max-height: 220px;
    width: auto;
    height: auto;
    display: block;
    border-radius: 4px;
}

.szone-check-row {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    margin: 4px 0 12px;
    font-size: 10px;
    color: var(--text-secondary);
}

.szone-btn-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.szone-btn-row .sil-scan-button { flex: 1; }

.szone-status {
    margin-top: 10px;
    text-align: center;
    font-size: 10px;
    color: var(--text-muted);
}

.szone-status.active { color: var(--accent-green); }

/* ================================
   TUTORIAL VIDEOS TAB
   ================================ */
.tutorial-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tutorial-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.15s ease;
}

.tutorial-card:hover {
    border-color: var(--accent-blue);
    background: var(--bg-tertiary);
}

.tutorial-card-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--accent-blue);
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tutorial-card-icon svg { width: 12px; height: 12px; margin-left: 1px; }

.tutorial-card-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tutorial-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 40px 10px;
    color: var(--text-muted);
    font-size: 11px;
    text-align: center;
}

.tutorial-player-content {
    width: 85%;
    max-width: 480px;
    display: flex;
    flex-direction: column;
    transition: all 0.2s ease;
}

.tutorial-player-content video { max-height: 60vh; }

/* No global .hidden rule exists in this stylesheet - each component
   declares its own, so the empty state needs one too. */
.tutorial-empty.hidden { display: none; }

/* ================================
   HOME SCREEN (Search tab, above Quick Slots)
   ================================ */
.sm-home { margin-bottom: 10px; }

.sm-home-label {
    font-size: 10px;
    color: var(--text-secondary);
    letter-spacing: 0.02em;
    margin: 0 0 6px;
}

.sm-home-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    margin-bottom: 12px;
}

.sm-home-chips { display: flex; flex-wrap: wrap; gap: 6px; }
#smHomeRecent { margin-bottom: 12px; }

.sm-home-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 100%;
    font-size: 10px;
    padding: 4px 9px;
    border-radius: 999px;
    border: 1px solid var(--border-medium);
    background: var(--bg-tertiary);
    color: var(--text-primary);
    cursor: pointer;
    transition: border-color 0.15s ease;
}

.sm-home-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-home-chip svg { width: 12px; height: 12px; flex-shrink: 0; color: var(--text-secondary); }
.sm-home-chip:hover { border-color: var(--accent-blue); }
.sm-home-chip.sm-home-chip-more { background: transparent; border-style: dashed; color: var(--text-secondary); }

/* Pin icon: faded in on hover, always shown on pinned ones. Its space is
   ALWAYS reserved (opacity, never display:none) - a chip that got wider on
   hover could wrap to the next line out from under the cursor, lose the
   hover, shrink back, and loop, which looked like chips swapping places. */
.sm-home-chip .sm-home-chip-pin { display: inline-flex; align-items: center; margin-left: 1px; color: var(--text-muted); opacity: 0; transition: opacity 0.12s ease; }
.sm-home-chip:hover .sm-home-chip-pin { opacity: 1; }
.sm-home-chip .sm-home-chip-pin.pinned { opacity: 1; color: var(--accent-blue); }
.sm-home-chip .sm-home-chip-pin:hover { color: var(--accent-blue); }
.sm-home-chip .sm-home-chip-pin svg { width: 11px; height: 11px; color: inherit; }

.sm-home-pinned {
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-subtle);
}
#smHomePinnedWrap.hidden { display: none; }

/* Two columns when the panel is wide enough, one when it's narrow (the
   sidebar width is user-resizable, so the space left varies a lot). */
.sm-home-goals {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(135px, 1fr));
    gap: 6px;
    margin-bottom: 12px;
}

.sm-home-goal {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 10px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s ease;
}

.sm-home-goal:hover { border-color: var(--accent-blue); }
.sm-home-goal svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--accent-blue); margin-top: 1px; }
.sm-home-goal-text { display: flex; flex-direction: column; min-width: 0; }
.sm-home-goal-title { font-size: 11px; font-weight: 600; }
.sm-home-goal-sub { font-size: 9px; color: var(--text-secondary); }

#smHomeRecentWrap.hidden { display: none; }

.sm-home-slots-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 8px 2px;
    background: none;
    border: none;
    border-top: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    font-size: 10px;
    cursor: pointer;
}

.sm-home-slots-toggle:hover { color: var(--text-primary); }
.sm-home-chevron { width: 14px; height: 14px; transition: transform 0.15s ease; }
.sm-home-slots-toggle.open .sm-home-chevron { transform: rotate(180deg); }

#slotsContainer.sm-slots-collapsed { display: none; }

body.minimal-mode .sm-home,
body.locked-down .sm-home { display: none !important; }

/* Same look as .settings-close but a non-destructive action, so hover goes
   to the normal "active" text color instead of the close button's red. */
.tutorial-icon-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.tutorial-icon-btn:hover { color: var(--text-primary); }

/* Briefly flashed on a control that a search-box "nav" result jumped to
   (see window.panelNavTools / executeToolFromSearch's "nav_" branch), so
   landing on the right tab also points at the exact button that was
   searched for. */
.search-highlight {
    outline: 2px solid var(--accent-purple);
    outline-offset: 2px;
    border-radius: 4px;
    transition: outline-color 0.3s ease;
}

/* Small shared utility buttons (preset save, scan-again) keep the extension's
   generic .offset-apply-btn class, but scoped green here so they don't stand
   out as the only blue element left in an otherwise all-green tab. Scoped to
   #contentSilence so every OTHER tab's use of .offset-apply-btn stays blue. */
#contentSilence .offset-apply-btn {
    background: var(--accent-green);
}

#contentSilence .offset-apply-btn:hover {
    background: #3fe873;
}

/* Collapsible sections in the Transcribe tab */
.sm-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
}
.sm-section-header:hover { color: var(--accent-blue, var(--text-primary)); }

/* Caption style preview: the style laid over a sample 9:16 frame */
.cap-preview-frame {
    position: relative;
    width: 188px;
    aspect-ratio: 9 / 16;
    border-radius: 18px;
    overflow: hidden;
    background: #111 url("../assets/caption_preview_bg.jpg") center / cover no-repeat;
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.09);
}
.cap-preview-layer { position: absolute; inset: 0; pointer-events: none; }
.cap-preview-layer img,
.cap-preview-layer video {
    position: absolute;
    left: 50%;
    top: 50%;
    height: auto;
    transform: translate(-50%, -50%);
    max-width: none;
    user-select: none;
}
.cap-preview-anim {
    position: absolute;
    right: 8px;
    bottom: 8px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: none;
    background: rgba(20, 20, 20, 0.62);
    -webkit-backdrop-filter: blur(6px);
    color: #fff;
    font-size: 9px;
    line-height: 26px;
    text-align: center;
    padding: 0;
    cursor: pointer;
}
.cap-preview-anim:hover { background: rgba(var(--accent-blue-rgb), 0.85); }

.cap-size-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 2px;
}
.cap-size-label { font-size: 10px; color: var(--text-muted); width: 40px; flex-shrink: 0; }
.cap-size-value { font-size: 10px; font-weight: 600; color: var(--text-primary); width: 44px; text-align: right; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.cap-size-reset {
    font-size: 9px;
    padding: 4px 9px;
    border-radius: 999px;
    border: 1px solid var(--border-subtle);
    background: var(--bg-tertiary);
    color: var(--text-primary);
    cursor: pointer;
    flex-shrink: 0;
}
.cap-size-reset:hover { border-color: var(--accent-blue); }
.cap-size-hint { font-size: 9px; color: var(--text-muted); margin: 0 0 8px 50px; min-height: 12px; }

.cap-slider {
    -webkit-appearance: none;
    appearance: none;
    flex: 1;
    min-width: 0;
    height: 4px;
    border-radius: 999px;
    outline: none;
    margin: 0;
    cursor: pointer;
    background: linear-gradient(to right, var(--accent-blue) var(--fill, 50%), rgba(255, 255, 255, 0.14) var(--fill, 50%));
}
.cap-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    border: none;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.55);
    transition: transform 0.1s ease;
}
.cap-slider:active::-webkit-slider-thumb { transform: scale(1.18); }

.cap-nav-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: -4px 0 12px;
}
.cap-nav-btn {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid var(--border-subtle);
    background: var(--bg-tertiary);
    color: var(--text-primary);
    font-size: 14px;
    line-height: 20px;
    padding: 0;
    cursor: pointer;
}
.cap-nav-btn:hover { border-color: var(--accent-blue); }
.cap-nav-count { font-size: 9px; color: var(--text-muted); min-width: 92px; text-align: center; font-variant-numeric: tabular-nums; }

/* Style picker: arrows either side of the preview instead of a dropdown */
.cap-stage {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 4px 0 12px;
}
.cap-nav-style { width: 30px; height: 30px; font-size: 19px; line-height: 25px; flex-shrink: 0; }
.cap-style-title {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
    margin: 2px 0 4px;
    min-height: 16px;
}
#captionStyleName { font-size: 12px; font-weight: 600; color: var(--text-primary); text-align: center; }
.cap-style-counter { font-size: 9px; color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* Thin indeterminate loader (shown only while the Captions tab does its first-open work) */
.cap-loading {
    height: 3px;
    width: 55%;
    margin: 0 auto 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}
.cap-loading[hidden] { display: none; }
.cap-loading-bar {
    display: block;
    height: 100%;
    width: 40%;
    border-radius: 999px;
    background: var(--accent-blue);
    will-change: transform;
    animation: capLoadSlide 1.1s ease-in-out infinite;
}
@keyframes capLoadSlide {
    0%   { transform: translateX(-110%); }
    100% { transform: translateX(260%); }
}

.cap-nav-btn:disabled, .cap-size-reset:disabled { opacity: 0.35; cursor: default; }
.cap-nav-btn:disabled:hover, .cap-size-reset:disabled:hover { border-color: var(--border-subtle); }

/* Clean toggle switch */
.sm-switch-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
}
.sm-switch-text { font-size: 11px; font-weight: 500; color: var(--text-primary); line-height: 1.3; }
.sm-switch-text small { display: block; font-size: 9px; font-weight: 400; color: var(--text-muted); margin-top: 2px; }
.sm-switch { position: relative; width: 34px; height: 20px; flex-shrink: 0; }
.sm-switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.sm-switch-track {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    transition: background 0.15s ease;
}
.sm-switch-track::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
    transition: transform 0.15s ease;
}
.sm-switch input:checked + .sm-switch-track { background: var(--accent-blue); }
.sm-switch input:checked + .sm-switch-track::after { transform: translateX(14px); }

/* ---------- Captions tab: shared modern components ---------- */
.sm-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 26px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid var(--border-subtle);
    background: var(--bg-tertiary);
    color: var(--text-primary);
    font-size: 10px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
}
.sm-pill:hover { border-color: rgba(255, 255, 255, 0.24); }
.sm-pill.primary { background: var(--accent-blue); border-color: transparent; color: #fff; }
.sm-pill.primary:hover { filter: brightness(1.1); }
.sm-pill.danger:hover { border-color: var(--accent-red); color: var(--accent-red); }
.sm-pill:disabled { opacity: 0.38; cursor: default; }
.sm-pill:disabled:hover { border-color: var(--border-subtle); filter: none; }

.sm-field {
    height: 28px;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    padding: 0 10px;
    border-radius: 8px;
    border: 1px solid var(--border-subtle);
    background: var(--bg-tertiary);
    color: var(--text-primary);
    font-size: 10px;
    outline: none;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.sm-field:focus { border-color: var(--accent-blue); box-shadow: 0 0 0 3px rgba(var(--accent-blue-rgb), 0.18); }
.sm-field::placeholder { color: var(--text-muted); }

.sm-card {
    border: 1px solid var(--border-subtle);
    background: rgba(255, 255, 255, 0.035);
    border-radius: 12px;
    padding: 10px 12px;
}
.sm-card[hidden] { display: none; }
.sm-note { font-size: 9px; color: var(--text-muted); line-height: 1.45; }
.sm-sub { font-size: 10px; font-weight: 600; color: var(--text-primary); margin: 12px 0 4px; }

.chip-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chip {
    display: inline-flex;
    align-items: center;
    height: 24px;
    border-radius: 999px;
    border: 1px solid var(--border-subtle);
    background: var(--bg-tertiary);
    font-size: 10px;
    color: var(--text-primary);
    overflow: hidden;
}
.chip > button {
    background: none;
    border: none;
    color: inherit;
    font: inherit;
    padding: 0 10px;
    height: 100%;
    cursor: pointer;
}
.chip > button:hover { background: rgba(255, 255, 255, 0.07); }
.chip > .chip-x { padding: 0 8px 0 2px; color: var(--text-muted); font-size: 12px; }
.chip > .chip-x:hover { color: var(--accent-red); background: none; }

/* saved transcript banner */
.sm-saved { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
.sm-saved-text { font-size: 10px; color: var(--text-primary); line-height: 1.4; min-width: 0; }
.sm-saved-text small { display: block; font-size: 9px; color: var(--text-muted); }
.sm-saved-actions { display: flex; gap: 6px; flex-shrink: 0; }

/* transcript: words you can select, copy, and double-click to fix */
.tr-view {
    margin-top: 6px;
    max-height: 190px;
    min-height: 64px;
    overflow-y: auto;
    padding: 10px 12px;
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    background: var(--bg-primary);
    font-size: 11px;
    line-height: 1.75;
    color: var(--text-primary);
    -webkit-user-select: text;
    user-select: text;
    cursor: text;
    box-sizing: border-box;
}
.tr-view:empty::before { content: "Generate a transcript to see it here."; color: var(--text-muted); }
.tr-view::-webkit-scrollbar { width: 6px; }
.tr-view::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.03); border-radius: 10px; margin: 2px; }
.tr-view::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 10px; background-clip: padding-box; }
.tr-view::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.28); }
.tr-view .tw { border-radius: 4px; padding: 1px 1px; -webkit-user-select: text; user-select: text; }
.tr-view .tw:hover { background: rgba(var(--accent-blue-rgb), 0.18); }
.tr-view .tw.unsure { text-decoration: underline dotted rgba(255, 159, 10, 0.9); text-underline-offset: 3px; }
.tr-view .tw.edited { color: var(--accent-green); }
.tr-view input.tw-edit {
    font: inherit;
    color: var(--text-primary);
    background: var(--bg-tertiary);
    border: 1px solid var(--accent-blue);
    border-radius: 5px;
    padding: 0 4px;
    margin: 0;
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--accent-blue-rgb), 0.18);
    -webkit-user-select: text;
    user-select: text;
}
.tr-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; }
.tr-hint { font-size: 9px; color: var(--text-muted); line-height: 1.4; }

/* Fix Words */
.fix-rules { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.fix-rule {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px 6px 12px;
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
    font-size: 10px;
}
.fix-rule .fix-from { color: var(--text-muted); text-decoration: line-through; text-decoration-color: rgba(255, 69, 58, 0.7); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fix-rule .fix-arrow { color: var(--text-muted); }
.fix-rule .fix-to { color: var(--accent-green); font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fix-add { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.fix-add .fix-arrow { color: var(--text-muted); font-size: 11px; }
.fix-actions { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }

/* Looks (presets) */
.looks-block { margin: 0 0 12px; }
.looks-label { font-size: 9px; color: var(--text-muted); margin-bottom: 5px; text-transform: uppercase; letter-spacing: 0.06em; }
.looks-save { display: inline-flex; align-items: center; gap: 6px; }
.looks-save .sm-field { width: 130px; height: 24px; border-radius: 999px; }

/* last-run banner */
.sm-lastrun { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 10px; }
.sm-lastrun[hidden] { display: none; }
.sm-lastrun span { font-size: 10px; color: var(--text-secondary); line-height: 1.4; }

/* Collapsible "Additional Settings" header for the Captions tab - same
   toggle-a-hidden-panel idea as #toolSaveStillSettingsToggle, just a full-
   width labeled row instead of a small gear icon, since there's a lot to
   hide here (mode/words-per-caption/case/punctuation/duration/the 4
   switches) and a bare icon wouldn't say what it opens. */
.cap-settings-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    padding: 8px 0;
    margin-bottom: 10px;
    font-size: 10px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
    user-select: none;
}
.cap-settings-toggle:hover { color: var(--text-primary); }
.cap-settings-chevron { width: 14px; height: 14px; flex-shrink: 0; transition: transform 0.15s ease; }
.cap-settings-toggle.collapsed .cap-settings-chevron { transform: rotate(-90deg); }
#captionSettingsBody[hidden] { display: none; }

/* safe-zone guide on the preview */
.cap-safe { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.cap-safe[hidden] { display: none; }
.cap-safe span { position: absolute; background: rgba(255, 69, 58, 0.17); }
.cap-safe .cap-safe-top { left: 0; right: 0; top: 0; height: 7%; }
.cap-safe .cap-safe-bottom { left: 0; right: 0; bottom: 0; height: 21%; }
.cap-safe .cap-safe-right { right: 0; top: 44%; bottom: 21%; width: 13%; }
.cap-safe .cap-safe-box {
    background: none;
    left: 4%;
    top: 7%;
    right: 13%;
    bottom: 21%;
    border: 1px dashed rgba(255, 255, 255, 0.5);
    border-radius: 8px;
}
.cap-preview-anim.cap-safe-btn { right: auto; left: 8px; z-index: 4; }
.cap-preview-anim.cap-safe-btn.on { background: rgba(var(--accent-blue-rgb), 0.9); }
.cap-preview-anim.cap-safe-btn svg { width: 13px; height: 13px; display: block; margin: 6.5px auto; }
/* Grab the frame under the playhead (top-right of the preview) */
.cap-preview-anim.cap-grab-btn { top: 8px; bottom: auto; z-index: 4; }
.cap-preview-anim.cap-grab-btn svg { width: 13px; height: 13px; display: block; margin: 6.5px auto; }
.cap-preview-anim.cap-grab-btn.busy { opacity: 0.55; pointer-events: none; }
/* Landscape / square sequences: the preview takes the sequence's shape */
.cap-preview-frame.cap-wide { width: min(300px, calc(100% - 84px)); }

/* Drop hint: shown while files are dragged over the panel. Never intercepts the drop. */
.sm-drop-hint {
    position: fixed;
    inset: 0;
    z-index: 40000;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--accent-blue-rgb), 0.10);
    border: 2px dashed var(--accent-blue);
    box-sizing: border-box;
}
.sm-drop-hint[hidden] { display: none; }
.sm-drop-hint-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    padding: 12px 16px;
    text-align: center;
    max-width: 80%;
}
.sm-drop-hint-card b { display: block; color: var(--text-primary); font-size: 12px; margin-bottom: 4px; }
.sm-drop-hint-card span { color: var(--text-secondary); font-size: 10px; line-height: 1.4; }

/* ================================
   NEST / UNNEST + IMPORT SEQUENCES TABS (shared card layout)
   ================================ */
.sm-tabapp { height: 100%; box-sizing: border-box; }
.sm-tabapp-scroll {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
    padding-right: 4px;
    padding-bottom: 56px;
}
.sm-tabapp-sel {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    margin-bottom: 10px;
    border-radius: var(--radius-md);
    border: 1px dashed var(--border-medium);
    color: var(--text-muted);
    font-size: 10px;
    line-height: 1.35;
}
.sm-tabapp-sel svg { width: 13px; height: 13px; flex: 0 0 auto; }
.sm-tabapp-sel.active { border-style: solid; color: var(--text-primary); background: rgba(var(--accent-blue-rgb), 0.08); border-color: rgba(var(--accent-blue-rgb), 0.35); }
.sm-tabapp-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    margin-bottom: 10px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.sm-tabapp-card.hidden { display: none; }
.sm-tabapp-card.suggested { border-color: rgba(var(--accent-blue-rgb), 0.55); box-shadow: 0 0 0 1px rgba(var(--accent-blue-rgb), 0.18); }
.sm-tabapp-card-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
}
.sm-tabapp-card-title svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--text-secondary); }
.sm-tabapp-card-desc { font-size: 10px; line-height: 1.45; color: var(--text-muted); margin-top: -2px; }
.sm-tabapp-label {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin-bottom: -3px;
}
.sm-tabapp-input {
    width: 100%;
    box-sizing: border-box;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-medium);
    color: var(--text-primary);
    padding: 7px 8px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    outline: none;
}
.sm-tabapp-input:focus { border-color: var(--accent-blue); }
.sm-tabapp-input:disabled { opacity: 0.45; }
.sm-tabapp-hint { font-size: 9px; line-height: 1.4; color: var(--text-muted); margin-top: -3px; }
.sm-tabapp-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    min-height: 32px;
    padding: 6px 12px;
    border: none;
    border-radius: var(--radius-md);
    background: var(--accent-blue);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, opacity 0.15s ease;
}
.sm-tabapp-primary svg { width: 14px; height: 14px; flex: 0 0 auto; }
.sm-tabapp-primary:hover { background: #409cff; }
.sm-tabapp-primary:active { transform: scale(0.98); }
.sm-tabapp-primary:disabled { opacity: 0.4; cursor: default; background: var(--accent-blue); transform: none; }
.sm-tabapp-primary[aria-busy="true"] { opacity: 0.6; cursor: progress; }
#nestModeRow .layers-segment { padding: 7px 4px; }

/* Import Sequences */
.sm-si-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(var(--accent-blue-rgb), 0.18);
    color: var(--accent-blue);
    font-size: 9px;
    font-weight: 700;
    flex: 0 0 auto;
}
.sm-si-recent.hidden, .sm-si-warn.hidden { display: none; }
.sm-si-recent { display: flex; flex-direction: column; gap: 6px; margin-top: 2px; }
.sm-si-recent-list { display: flex; flex-direction: column; gap: 4px; }
.sm-si-recent-item {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background: var(--bg-tertiary);
    overflow: hidden;
}
.sm-si-recent-item:hover { border-color: var(--border-medium); }
.sm-si-recent-open {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    padding: 6px 8px;
    background: none;
    border: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.sm-si-recent-name, .sm-si-recent-dir { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-si-recent-name { font-size: 11px; font-weight: 600; color: var(--text-primary); }
.sm-si-recent-dir { font-size: 9px; color: var(--text-muted); }
.sm-si-recent-remove {
    flex: 0 0 26px;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 14px;
    cursor: pointer;
}
.sm-si-recent-remove:hover { color: var(--accent-red); }
.sm-si-project { display: flex; align-items: center; gap: 8px; }
.sm-si-project-text { flex: 1; min-width: 0; }
.sm-si-project-name { font-size: 11px; font-weight: 600; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-si-project-meta { font-size: 9px; color: var(--text-muted); margin-top: 1px; }
.sm-si-mini-btn {
    padding: 3px 8px;
    background: transparent;
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 10px;
    cursor: pointer;
    flex: 0 0 auto;
}
.sm-si-mini-btn:hover { color: var(--text-primary); border-color: var(--text-muted); }
.sm-si-mini-btn:disabled { opacity: 0.4; cursor: default; }
.sm-si-warn {
    font-size: 10px;
    line-height: 1.4;
    color: var(--accent-orange);
    background: rgba(255, 159, 10, 0.1);
    border: 1px solid rgba(255, 159, 10, 0.3);
    border-radius: 8px;
    padding: 7px 8px;
}
.sm-si-listbar { display: flex; align-items: center; justify-content: space-between; font-size: 10px; color: var(--text-secondary); }
.sm-si-listbar-btns { display: flex; gap: 4px; }
.sm-si-list {
    max-height: 260px;
    overflow-y: auto;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background: var(--bg-primary);
}
.sm-si-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 6px 8px;
    border-bottom: 1px solid var(--border-subtle);
    cursor: pointer;
}
.sm-si-item:last-child { border-bottom: none; }
.sm-si-item:hover { background: var(--bg-tertiary); }
.sm-si-item input { margin: 1px 0 0; flex: 0 0 auto; cursor: pointer; }
.sm-si-item-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sm-si-item-name { font-size: 11px; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-si-item-sub { font-size: 9px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-si-empty { padding: 12px 8px; font-size: 10px; color: var(--text-muted); text-align: center; }
.sm-si-bin-row { display: flex; align-items: center; gap: 6px; font-size: 10px; color: var(--text-secondary); cursor: pointer; margin-bottom: -2px; }
.sm-si-bin-row input { margin: 0; cursor: pointer; }

/* Glassmorphism scrollbar everywhere by default. Any scroll area that
   doesn't style its own scrollbar (new tabs, lists, text areas) gets the
   same frosted look as the stock grids instead of Chromium's old grey one.
   Element-specific rules above (e.g. hidden or thinner scrollbars) are more
   specific, so they still win. */
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
    margin: 2px;
}
*::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 10px;
    background-clip: padding-box;
    box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.08);
}
*::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.28); }
*::-webkit-scrollbar-corner { background: transparent; }

/* Nest / Import tabs: explicitly the same glass scrollbar. */
.sm-tabapp-scroll::-webkit-scrollbar,
.sm-si-list::-webkit-scrollbar { width: 6px; }
.sm-tabapp-scroll::-webkit-scrollbar-track,
.sm-si-list::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
    margin: 2px;
}
.sm-tabapp-scroll::-webkit-scrollbar-thumb,
.sm-si-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 10px;
    background-clip: padding-box;
    box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.08);
}
.sm-tabapp-scroll::-webkit-scrollbar-thumb:hover,
.sm-si-list::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.28); }
.sm-si-cancel-btn:hover:not(:disabled) { color: var(--accent-red); border-color: rgba(255, 69, 58, 0.5); }

/* Sync tab */
.sm-sync-link-row { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; padding: 8px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--bg-tertiary); }
.sm-sync-link-row input { margin: 2px 0 0; flex: 0 0 auto; cursor: pointer; }
.sm-sync-link-row b { display: block; font-size: 11px; color: var(--text-primary); font-weight: 600; }
.sm-sync-sub-option { margin-left: 18px; }
.sm-sync-sub-option.disabled { opacity: 0.45; pointer-events: none; }
.sm-sync-link-row small { display: block; font-size: 9.5px; line-height: 1.45; color: var(--text-muted); margin-top: 2px; }
.sm-sync-progress { height: 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.06); overflow: hidden; }
.sm-sync-progress.hidden { display: none; }
.sm-sync-progress-fill { height: 100%; width: 2%; background: var(--accent-blue); border-radius: 4px; transition: width 0.25s ease; }
.sm-sync-status-row { display: flex; align-items: flex-start; gap: 8px; }
.sm-sync-status-row .sm-unnest-status { flex: 1; min-width: 0; }
.sm-si-cancel-btn.hidden { display: none; }
.sm-sync-list { display: flex; flex-direction: column; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: var(--bg-primary); max-height: 300px; overflow-y: auto; }
.sm-sync-row { display: flex; align-items: flex-start; gap: 8px; padding: 6px 8px; border-bottom: 1px solid var(--border-subtle); }
.sm-sync-row:last-child { border-bottom: none; }
.sm-sync-kind { flex: 0 0 auto; color: var(--accent-blue); margin-top: 1px; }
.sm-sync-kind svg { width: 13px; height: 13px; display: block; }
.sm-sync-row.unsynced .sm-sync-kind { color: var(--text-muted); }
.sm-sync-row.warn .sm-sync-kind { color: var(--accent-orange); }
.sm-sync-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sm-sync-name { font-size: 11px; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-sync-sub { font-size: 9.5px; line-height: 1.4; color: var(--text-muted); }
.sm-sync-row.warn .sm-sync-sub { color: var(--accent-orange); }

/* Built-in macros: caption style preview over your own frame */
.bim-style-stage { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 8px 0 4px; }
.bim-style-frame {
    position: relative;
    width: 150px;
    aspect-ratio: 9 / 16;
    border-radius: 14px;
    overflow: hidden;
    background: #111 url("../assets/caption_preview_bg.jpg") center / cover no-repeat;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.09);
}
.bim-style-frame.cap-wide { width: min(260px, calc(100% - 80px)); }
.bim-style-frame img {
    position: absolute;
    left: 50%;
    top: 50%;
    height: auto;
    transform: translate(-50%, -50%);
    max-width: none;
    pointer-events: none;
    user-select: none;
}
/* The macro window's inputs are full-width boxes; its caption sliders keep the Captions tab look */
.bim-field input.cap-slider {
    width: auto;
    flex: 1;
    min-width: 0;
    height: 4px;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: linear-gradient(to right, var(--accent-blue) var(--fill, 50%), rgba(255, 255, 255, 0.14) var(--fill, 50%));
}
.bim-field .cap-size-row { margin: 6px 0 2px; }
/* Macro editor: "Add captions" Size / Height over your frame */
.bim-ed-settings input.cap-slider {
    width: auto;
    flex: 1;
    min-width: 0;
    height: 4px;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: linear-gradient(to right, var(--accent-blue) var(--fill, 50%), rgba(255, 255, 255, 0.14) var(--fill, 50%));
}
.bim-ed-settings .cap-size-row { display: flex; align-items: center; gap: 8px; margin: 6px 0 2px; }
.bim-ed-settings .bim-style-frame { width: 120px; }
.bim-ed-settings .bim-style-frame.cap-wide { width: min(240px, 100%); }
.bim-ed-settings .bim-ed-capgrabs { display: flex; gap: 6px; margin: 4px 0 2px; }
.bim-ed-settings .bim-ed-capgrab { flex: 1 1 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bim-ed-settings .bim-ed-capnote { margin-top: 4px; }
/* Built-in macros: optional steps (b-roll, music) and mid-run questions */
.bim-opt { border: 1px solid var(--border-subtle); border-radius: 8px; padding: 8px 9px; background: rgba(255, 255, 255, 0.02); }
.bim-opt .bim-toggle { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 11px; font-weight: 600; color: var(--text-primary); cursor: pointer; }
.bim-opt-body { display: flex; flex-direction: column; gap: 5px; margin-top: 8px; }
.bim-opt-body.off { display: none; }
.bim-opt-body > label { margin-bottom: 0; }
.bim-field input[type="checkbox"], .bim-field input[type="radio"] { width: auto; padding: 0; margin: 0; flex: 0 0 auto; accent-color: var(--accent-blue); cursor: pointer; }
.bim-check { display: flex !important; align-items: flex-start; gap: 6px; font-size: 10px !important; line-height: 1.4; color: var(--text-secondary); cursor: pointer; }
.bim-check input { margin-top: 1px !important; }
.bim-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.bim-grid3 label { font-size: 9.5px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bim-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.bim-grid2 label { font-size: 9.5px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bim-field input:disabled { opacity: 0.45; }
.bim-row { display: flex; gap: 6px; align-items: center; }
.bim-row input { flex: 1; min-width: 0; }
.bim-trans-row { display: flex; align-items: center; gap: 10px; }
.bim-trans-row input[type="number"] { width: 56px !important; flex: 0 0 auto; }
.bim-music-list { display: flex; flex-direction: column; gap: 3px; max-height: 150px; overflow-y: auto; }
.bim-music-list:empty { display: none; }
.bim-field .bim-music-item, .bim-music-item { display: flex; margin-bottom: 0; align-items: flex-start; gap: 6px; font-size: 10px; line-height: 1.35; color: var(--text-secondary); padding: 4px 5px; border-radius: 5px; cursor: pointer; }
.bim-music-item:hover { background: rgba(255, 255, 255, 0.05); }
.bim-music-item input { margin-top: 1px !important; }
.bim-music-item .bim-mi-text { flex: 1; min-width: 0; }
.bim-music-item b { color: var(--text-primary); font-weight: 600; }
.bim-music-item a { color: var(--accent-blue); text-decoration: none; flex: 0 0 auto; }
.bim-ask { display: flex; flex-direction: column; gap: 7px; border: 1px solid var(--accent-blue); border-radius: 8px; padding: 9px; background: rgba(10, 132, 255, 0.07); }
.bim-ask[hidden] { display: none; }
.bim-ask-title { font-size: 11px; font-weight: 700; color: var(--text-primary); }
.bim-ask input[type="text"] { width: 100%; box-sizing: border-box; background: var(--bg-tertiary); border: 1px solid var(--border-subtle); color: var(--text-primary); padding: 6px 8px; border-radius: 6px; font-size: 11px; outline: none; }
.bim-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.bim-chip { font-size: 10px; padding: 4px 9px; border-radius: 999px; border: 1px solid var(--border-subtle); background: var(--bg-tertiary); color: var(--text-secondary); cursor: pointer; }
.bim-chip.on { color: var(--accent-blue); border-color: var(--accent-blue); background: rgba(10, 132, 255, 0.14); }
.bim-steps li.warned { color: var(--text-secondary); }
.bim-steps li.warned .bim-dot { border-color: var(--accent-orange, #ff9f0a); background: var(--accent-orange, #ff9f0a); color: #000; }
.bim-steps li.warned .bim-dot::after { content: '!'; font-weight: 700; }
.bim-steps li.warned .bim-step-note { color: var(--accent-orange, #ff9f0a); }
.bim-mi-play { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--border-subtle); background: var(--bg-tertiary); color: var(--text-primary); font-size: 8px; line-height: 20px; padding: 0; cursor: pointer; text-align: center; }
.bim-mi-play:hover, .bim-mi-play.on { border-color: var(--accent-blue); color: var(--accent-blue); }
.bim-mi-play.busy { opacity: 0.6; pointer-events: none; }
/* MOGRT tab: preview on your frame */
.mogrt-stage-wrap { flex-shrink: 0; margin-bottom: 8px; border: 1px solid var(--border-subtle); border-radius: 8px; padding: 6px 8px; background: rgba(255, 255, 255, 0.02); }
.mogrt-stage-head { display: flex; align-items: center; justify-content: space-between; font-size: 10px; font-weight: 600; color: var(--text-secondary); }
.mogrt-stage-body { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 6px; }
.mogrt-stage-body[hidden] { display: none; }
.mogrt-stage-frame { width: 130px; }
.mogrt-stage-frame.cap-wide { width: min(280px, 100%); }
.mogrt-stage-frame .cap-preview-layer img,
.mogrt-stage-frame .cap-preview-layer video { position: absolute; left: 50%; top: 50%; height: auto; transform: translate(-50%, -50%); max-width: none; pointer-events: none; }
.mogrt-stage-name { font-size: 9.5px; color: var(--text-muted); text-align: center; min-height: 12px; }
.stock-card.mogrt-pinned { outline: 1px solid var(--accent-blue); outline-offset: -1px; }
/* Built-in macros: Export panel at the end of a run */
.bim-export { display: flex; flex-direction: column; gap: 9px; border: 1px solid var(--border-subtle); border-radius: 10px; padding: 11px; background: rgba(255, 255, 255, 0.025); }
.bim-export[hidden] { display: none; }
.bim-ex-head { display: flex; flex-direction: column; gap: 2px; }
.bim-ex-title { font-size: 12px; font-weight: 700; color: var(--text-primary); }
.bim-ex-field { display: flex; flex-direction: column; gap: 4px; }
.bim-ex-field > label { font-size: 10px; font-weight: 600; color: var(--text-secondary); letter-spacing: 0.02em; }
.bim-ex-field select, .bim-ex-field input[type="text"] { width: 100%; box-sizing: border-box; background: var(--bg-tertiary); border: 1px solid var(--border-subtle); color: var(--text-primary); padding: 7px 9px; border-radius: 7px; font-size: 11px; outline: none; }
.bim-ex-field select:focus, .bim-ex-field input[type="text"]:focus { border-color: var(--accent-blue); }
.bim-ex-path { display: flex; align-items: center; gap: 6px; }
.bim-ex-folder { flex: 1; min-width: 0; font-size: 10px; color: var(--text-primary); background: var(--bg-tertiary); border: 1px solid var(--border-subtle); border-radius: 7px; padding: 7px 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bim-ex-go { width: 100%; padding: 9px; font-weight: 700; }
.bim-ex-go:disabled { opacity: 0.5; cursor: default; }
.bim-ex-status { font-size: 10px; line-height: 1.45; color: var(--text-secondary); word-break: break-word; }
.bim-ex-status[hidden] { display: none; }
.bim-ex-status.ok { color: var(--accent-green); }
.bim-ex-status.bim-error { color: var(--accent-red); }
.bim-ex-status a { color: var(--accent-blue); text-decoration: none; margin-left: 4px; }
/* Built-in macros: b-roll placement / source choices and the stock picker */
.bim-placement { border: 1px solid var(--accent-blue); border-radius: 8px; padding: 8px 9px; background: rgba(10, 132, 255, 0.06); }
.bim-placement .bim-note { margin-top: 5px; }
.bim-src-panel { display: none; flex-direction: column; gap: 5px; }
.bim-src-panel.on { display: flex; }
.bim-src-panel select { flex: 1; min-width: 0; }
.bim-stock-only.off, .bim-auto-only.off { display: none !important; }
.bim-stock-only { display: flex; flex-direction: column; gap: 5px; }
.bim-pick-modal { width: 360px; }
.bim-pick-modal .bim-row input[type="text"] { flex: 1; min-width: 0; box-sizing: border-box; background: var(--bg-tertiary); border: 1px solid var(--border-subtle); color: var(--text-primary); padding: 7px 9px; border-radius: 7px; font-size: 11px; outline: none; }
.bim-pick-go { padding: 7px 12px; }
.bim-pick-filters { justify-content: space-between; }
.bim-pick-filters .bim-choice { flex: 1; }
.bim-pick-preview { position: relative; height: 170px; border-radius: 8px; background: #0d0d0d; border: 1px solid var(--border-subtle); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.bim-pick-preview video, .bim-pick-preview img { max-width: 100%; max-height: 100%; }
.bim-pick-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; max-height: 260px; overflow-y: auto; }
.bim-pick-grid:empty { display: none; }
.bim-pick-tile { position: relative; aspect-ratio: 9 / 16; border-radius: 6px; overflow: hidden; background: #111 center / cover no-repeat; border: 1px solid var(--border-subtle); cursor: pointer; }
.bim-pick-grid.wide .bim-pick-tile { aspect-ratio: 16 / 9; }
.bim-pick-tile.showing { border-color: var(--text-secondary); }
.bim-pick-tile.picked { border-color: var(--accent-blue); box-shadow: 0 0 0 1px var(--accent-blue) inset; }
.bim-pick-check { position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, 0.85); background: rgba(0, 0, 0, 0.45); color: #fff; font-size: 11px; line-height: 17px; text-align: center; padding: 0; cursor: pointer; }
.bim-pick-tile.picked .bim-pick-check { background: var(--accent-blue); border-color: var(--accent-blue); }
.bim-pick-dur { position: absolute; left: 4px; bottom: 4px; font-size: 8.5px; color: #fff; background: rgba(0, 0, 0, 0.6); border-radius: 3px; padding: 1px 4px; }
.bim-pick-more { align-self: center; }
/* Macros tab: drag to reorder */
.sm-grip { flex: 0 0 auto; width: 14px; height: 22px; display: flex; align-items: center; justify-content: center; color: var(--text-muted); cursor: grab; opacity: 0.55; margin-right: 2px; }
.sm-grip:hover { opacity: 1; color: var(--text-primary); }
.sm-grip svg { width: 12px; height: 12px; pointer-events: none; }
.sm-dragging { opacity: 0.45; }
.sm-drop-before { box-shadow: 0 -2px 0 0 var(--accent-blue); }
.sm-drop-after { box-shadow: 0 2px 0 0 var(--accent-blue); }
/* Macros: edit buttons and the step editor */
.bim-section-head { position: relative; }
.bim-new-btn { margin-left: auto; }
.bim-edit-btn { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--border-subtle); background: transparent; color: var(--text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
.bim-edit-btn:hover { color: var(--text-primary); border-color: var(--accent-blue); }
.bim-edit-btn svg { width: 11px; height: 11px; }
.bim-del-btn:hover { color: var(--accent-red); border-color: var(--accent-red); }
.bim-badge { display: inline-block; margin-left: 6px; font-size: 8.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--accent-blue); border: 1px solid rgba(10, 132, 255, 0.45); border-radius: 999px; padding: 0 5px; vertical-align: 1px; }
.bim-edit-modal { width: 340px; }
.bim-ed-hint { font-weight: 400; color: var(--text-muted); font-size: 9px; letter-spacing: 0; }
.bim-ed-steps { display: flex; flex-direction: column; gap: 5px; }
.bim-ed-step { display: flex; align-items: flex-start; gap: 6px; padding: 7px 7px; border: 1px solid var(--border-subtle); border-radius: 8px; background: var(--bg-tertiary); }
.bim-ed-step.off { opacity: 0.5; }
.bim-ed-step .sm-grip { margin-top: 1px; }
.bim-ed-step input.bim-ed-on { width: auto; margin: 4px 0 0; accent-color: var(--accent-blue); }
.bim-ed-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bim-ed-name { font-size: 10.5px; font-weight: 700; color: var(--text-primary); }
.bim-ed-desc { font-size: 9.5px; line-height: 1.4; color: var(--text-muted); }
.bim-ed-settings { display: flex; flex-direction: column; gap: 4px; margin-top: 5px; padding-top: 6px; border-top: 1px solid var(--border-subtle); }
.bim-ed-settings label { font-size: 9.5px; color: var(--text-secondary); }
.bim-ed-settings select, .bim-ed-settings input[type="number"], .bim-ed-settings input[type="text"] { width: 100%; box-sizing: border-box; background: var(--bg-secondary); border: 1px solid var(--border-subtle); color: var(--text-primary); padding: 5px 7px; border-radius: 6px; font-size: 10.5px; outline: none; }
.bim-ed-settings .bim-check input { width: auto; }
.bim-ed-x { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; border: none; background: transparent; color: var(--text-muted); font-size: 15px; line-height: 18px; cursor: pointer; padding: 0; }
.bim-ed-x:hover { color: var(--accent-red); background: rgba(255, 69, 58, 0.1); }
.bim-ed-add { width: 100%; box-sizing: border-box; margin-top: 6px; background: var(--bg-tertiary); border: 1px dashed var(--border-medium, var(--border-subtle)); color: var(--text-primary); padding: 7px 9px; border-radius: 7px; font-size: 11px; outline: none; cursor: pointer; }
.bim-ed-problems { display: flex; flex-direction: column; gap: 4px; }
.bim-ed-problems[hidden] { display: none; }
.bim-ed-err, .bim-ed-warn { font-size: 10px; line-height: 1.4; border-radius: 6px; padding: 6px 8px; }
.bim-ed-err { color: var(--accent-red); background: rgba(255, 69, 58, 0.08); border: 1px solid rgba(255, 69, 58, 0.4); }
.bim-ed-warn { color: var(--accent-orange, #ff9f0a); background: rgba(255, 159, 10, 0.08); border: 1px solid rgba(255, 159, 10, 0.35); }
.bim-ed-more { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.bim-ed-delete:hover { color: var(--accent-red); border-color: var(--accent-red); }
.bim-ed-file { display: flex; align-items: center; gap: 6px; }
.bim-ed-file-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10.5px; color: var(--text-primary); background: var(--bg-secondary); border: 1px solid var(--border-subtle); border-radius: 6px; padding: 5px 7px; }
.bim-ed-browse { flex: 0 0 auto; background: var(--bg-secondary); border: 1px solid var(--border-subtle); color: var(--text-primary); border-radius: 6px; padding: 5px 9px; font-size: 10.5px; cursor: pointer; }
.bim-ed-browse:hover { border-color: var(--accent-blue); color: var(--accent-blue); }
#bimEdSave:disabled { opacity: 0.5; cursor: default; }

/* ================================
   MACROS TAB CARDS - same look as the Search tab's "What do you want to
   do?" cards: icon, name, one short line. The whole card is clickable.
   ================================ */
.bim-card, .macro-card .result-item {
    gap: 8px;
    padding: 9px 10px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: border-color 0.15s ease;
}
.bim-card { margin-bottom: 6px; }
.bim-card:hover, .bim-card:focus-visible, .macro-card .result-item:hover, .macro-card .result-item:focus-visible { border-color: var(--accent-blue); outline: none; }
.bim-card-icon { width: 16px; height: 16px; flex-shrink: 0; color: var(--accent-blue); }
.bim-card-name { font-size: 11px; font-weight: 600; color: var(--text-primary); }
.bim-card-desc { margin-top: 1px; font-size: 10px; line-height: 1.35; color: var(--text-secondary); }
.bim-card .sm-grip, .macro-card .sm-grip { cursor: grab; }
.bim-section-head { align-items: center; }

/* "Your macros" - the recorded ones, in the same card */
.macro-card { border: none; border-radius: var(--radius-sm); overflow: visible; }
.macro-card .result-item { display: flex; align-items: center; margin: 0; }
.macro-card-text { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }
.macro-card-text .result-name { font-size: 11px; font-weight: 600; color: var(--text-primary); max-width: 100%; overflow-wrap: anywhere; white-space: normal; }
.macro-card .result-item .add-slot-btn, .macro-card .result-item .delete-macro-btn { margin-left: 4px; flex-shrink: 0; }
/* play + rename always showing, like the built-in cards; delete is a quiet bin icon */
.macro-card .result-item { gap: 6px; }
.macro-card .result-item .delete-macro-btn { opacity: 0.65; width: 20px; height: 20px; border: none; margin-left: 0; color: var(--text-secondary); }
.macro-card .result-item .delete-macro-btn:hover { color: var(--accent-red); }
.macro-card .result-item .macro-run-btn { opacity: 1; width: 30px; height: 30px; border: 1px solid rgba(var(--accent-blue-rgb), 0.35) !important; background: rgba(var(--accent-blue-rgb), 0.1); }
.macro-card .result-item .macro-run-btn:hover { background: rgba(var(--accent-blue-rgb), 0.2); color: var(--accent-blue); transform: none; }
.macro-card .result-item .macro-rename-btn { opacity: 1; width: 26px; height: 26px; border: 1px solid var(--border-subtle); color: var(--text-secondary); }
.macro-card .result-item .macro-rename-btn:hover { background: transparent; border-color: var(--accent-blue); color: var(--text-primary); transform: none; }
.macro-card-sub { font-size: 10px; color: var(--text-secondary); }
.bim-yours-head { color: var(--text-primary); }

/* Search tab cards: the short line a touch bigger to read */
.sm-home-goal-sub { font-size: 10px; }

/* ================================
   MULTICAM TAB
   ================================ */
.mc-link-btn { background: none; border: none; padding: 2px 0; color: var(--accent-blue); font-size: 10.5px; cursor: pointer; text-align: left; align-self: flex-start; }
.mc-link-btn:hover { text-decoration: underline; }
.mc-map-list { display: flex; flex-direction: column; gap: 6px; }
.mc-map-row { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 6px; padding: 7px 8px; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: var(--bg-secondary); }
.mc-map-mic { grid-column: 1 / -1; font-size: 10px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-map-row .sm-tabapp-input { width: 100%; box-sizing: border-box; min-width: 0; }
.mc-check { display: flex; align-items: center; gap: 7px; font-size: 10.5px; color: var(--text-primary); cursor: pointer; }
.mc-check input { margin: 0; accent-color: var(--accent-blue); }
#mcScrollArea::-webkit-scrollbar { width: 6px; }
.mc-map-row.ignored { opacity: 0.6; }
.mc-map-why { color: var(--accent-orange); }
.mc-switch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 6px; }
.mc-switch-btn { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 8px 9px; background: var(--bg-secondary); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); color: var(--text-primary); cursor: pointer; text-align: left; transition: border-color 0.15s ease; }
.mc-switch-btn:hover { border-color: var(--accent-blue); }
.mc-switch-name { font-size: 11px; font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-switch-sub { font-size: 10px; color: var(--text-secondary); }
.mc-cap-list { display: flex; flex-direction: column; gap: 5px; }
.mc-cap-row { display: flex; flex-direction: column; gap: 4px; padding: 7px 8px; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: var(--bg-secondary); cursor: pointer; }
.mc-cap-row.active { border-color: var(--accent-blue); }
.mc-cap-row select { width: 100%; box-sizing: border-box; }
.mc-cap-who { text-align: center; font-size: 10px; color: var(--text-secondary); margin-top: -2px; }
.mc-cap-name { font-size: 11px; font-weight: 600; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-cap-row .sm-tabapp-input { min-width: 0; }
.mc-secondary-btn { align-self: flex-start; padding: 6px 10px; font-size: 10.5px; color: var(--text-primary); cursor: pointer; }
.mc-secondary-btn:hover:not(:disabled) { border-color: var(--accent-blue); }
.mc-secondary-btn:disabled { opacity: 0.45; cursor: default; }
#mcMapCard.single .mc-multi-only, #mcMapCard:not(.single) .mc-single-only { display: none; }
#mcMapCard .mc-multi-only, #mcMapCard .mc-single-only { display: flex; flex-direction: column; gap: 6px; }
#mcMapCard label.mc-multi-only { flex-direction: row; }

/* ================================
   IN-PANEL DROP-DOWN LIST (tool_select_fix.js) - replaces the native
   <select> pop-up, which CEP draws off-screen near the bottom of a panel.
   ================================ */
.sm-select-menu { position: fixed; z-index: 2147483000; display: flex; flex-direction: column; background: var(--bg-secondary); border: 1px solid var(--border-medium); border-radius: var(--radius-md); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55); overflow: hidden; outline: none; }
.sm-select-search { flex: 0 0 auto; margin: 6px; padding: 6px 8px; background: var(--bg-tertiary); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); color: var(--text-primary); font-size: 11px; outline: none; }
.sm-select-search:focus { border-color: var(--accent-blue); }
.sm-select-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 4px 0; }
.sm-select-group { padding: 7px 10px 3px; font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-secondary); }
.sm-select-opt { padding: 6px 10px; font-size: 11px; color: var(--text-primary); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sm-select-opt.in-group { padding-left: 16px; }
.sm-select-opt.active { background: rgba(var(--accent-blue-rgb), 0.18); }
.sm-select-opt.selected { color: var(--accent-blue); font-weight: 600; }
.sm-select-opt.disabled { opacity: 0.4; cursor: default; }

/* YouTube tab: yt-dlp update window */
.yt-upd-content { width: 300px; }
.yt-upd-body { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; }
.yt-upd-icon { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--accent-blue); background: rgba(10, 132, 255, 0.12); border: 1px solid rgba(10, 132, 255, 0.35); }
.yt-upd-icon svg { width: 20px; height: 20px; }
.yt-upd-title { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.yt-upd-versions { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.yt-upd-arrow { color: var(--text-muted); }
.yt-upd-new { color: var(--accent-blue); font-weight: 600; }
.yt-upd-text { font-size: 10.5px; line-height: 1.45; color: var(--text-secondary); }
.yt-upd-status { width: 100%; box-sizing: border-box; font-size: 10.5px; line-height: 1.45; padding: 7px 9px; border-radius: 6px; color: var(--text-secondary); background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border-subtle); }
.yt-upd-status.busy { color: var(--accent-blue); }
.yt-upd-status.ok { color: var(--accent-green, #30d158); border-color: rgba(48, 209, 88, 0.35); background: rgba(48, 209, 88, 0.08); }
.yt-upd-status.error { color: var(--accent-red); border-color: rgba(255, 69, 58, 0.4); background: rgba(255, 69, 58, 0.08); }
.yt-upd-actions { display: flex; gap: 6px; width: 100%; margin-top: 2px; }
.yt-upd-actions button { flex: 1; }
.yt-upd-actions button[hidden] { display: none; }
.yt-upd-foot { font-size: 9.5px; color: var(--text-muted); }
#ytVersionLabel.yt-ver-avail { color: var(--accent-blue); }

/* ================================
   VOICE COMMANDS (tool_voice.js)
   ================================ */
body.sm-voice-on #pinnedTabsRow { padding-right: 56px; }
.sm-voice-btn {
    position: fixed; z-index: 10070; width: 34px; height: 34px; padding: 0; border-radius: 50%;
    border: 1px solid rgba(var(--accent-blue-rgb), 0.55); background: var(--accent-blue); color: #fff;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    box-shadow: 0 0 0 0 rgba(var(--accent-blue-rgb), 0.0), 0 2px 10px rgba(0, 0, 0, 0.35);
    animation: smVoiceGlow 2.8s ease-in-out infinite; transition: transform 0.15s ease, background 0.2s ease;
}
.sm-voice-btn[hidden] { display: none; }
/* the small "BETA" tag on the mic (top right, never blocks the tap) */
.sm-voice-btn .sm-voice-beta { position: absolute; top: -5px; right: -9px; z-index: 2; pointer-events: none; padding: 1px 3px; border-radius: 3px; font-size: 6.5px; font-weight: 700; line-height: 1; letter-spacing: 0.4px;
    color: #fff; background: rgba(12, 12, 14, 0.92); border: 1px solid rgba(var(--accent-blue-rgb), 0.9); box-shadow: 0 1px 3px rgba(0,0,0,0.4); animation: none; transform: none; }
.sm-voice-btn svg { width: 16px; height: 16px; position: relative; z-index: 1; }
.sm-voice-btn:hover { transform: scale(1.06); }
.sm-voice-btn:active { transform: scale(0.96); }
.sm-voice-btn .sm-voice-ring { position: absolute; inset: -1px; border-radius: 50%; border: 2px solid var(--accent-blue); opacity: 0; pointer-events: none; transition: transform 0.08s linear, opacity 0.12s linear; }
.sm-voice-btn.live { animation: none; box-shadow: 0 0 18px 4px rgba(var(--accent-blue-rgb), 0.55); }
.sm-voice-btn.busy { animation: smVoiceGlow 1.2s ease-in-out infinite; }
@keyframes smVoiceGlow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(var(--accent-blue-rgb), 0.0), 0 0 6px 0 rgba(var(--accent-blue-rgb), 0.35), 0 2px 10px rgba(0, 0, 0, 0.35); }
    50% { box-shadow: 0 0 0 4px rgba(var(--accent-blue-rgb), 0.14), 0 0 16px 3px rgba(var(--accent-blue-rgb), 0.55), 0 2px 10px rgba(0, 0, 0, 0.35); }
}
@media (prefers-reduced-motion: reduce) { .sm-voice-btn, .sm-voice-btn.busy { animation: none; } }

.sm-voice-sheet {
    position: fixed; z-index: 10060; max-width: 420px; margin-left: auto; box-sizing: border-box;
    padding: 14px 14px 12px; border-radius: 14px;
    background: rgba(32, 32, 34, 0.92); border: 1px solid rgba(255, 255, 255, 0.09);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.45);
    opacity: 0; transform: translateY(10px) scale(0.98); pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
}
.sm-voice-sheet.show { opacity: 1; transform: none; pointer-events: auto; }
.smv-x { position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; padding: 0; border: none; border-radius: 6px; background: transparent; color: var(--text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.smv-x:hover { color: var(--text-primary); background: rgba(255, 255, 255, 0.06); }
.smv-x svg { width: 13px; height: 13px; }
.smv-wave { height: 34px; display: flex; align-items: center; justify-content: center; gap: 3px; margin: 2px 0 8px; }
.smv-wave[hidden] { display: none; }
.smv-wave span { width: 3px; height: 4px; border-radius: 2px; background: var(--accent-blue); opacity: 0.9; }
.sm-voice-sheet.thinking .smv-wave span { opacity: 0.55; }
.smv-text { min-height: 20px; padding: 0 18px; text-align: center; font-size: 14px; line-height: 1.4; color: var(--text-primary); word-break: break-word; }
.smv-part { color: var(--text-muted); }
.smv-hint { margin-top: 5px; text-align: center; font-size: 10px; color: var(--text-muted); }
.smv-hint:empty { display: none; }
.smv-card { margin-top: 10px; padding: 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.045); border: 1px solid rgba(255, 255, 255, 0.07); }
.smv-card[hidden] { display: none; }
.smv-card-row { display: flex; gap: 9px; align-items: flex-start; }
.smv-card-icon { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--accent-blue); background: rgba(var(--accent-blue-rgb), 0.14); }
.smv-card.ok .smv-card-icon { color: var(--accent-green); background: rgba(48, 209, 88, 0.14); }
.smv-card.error .smv-card-icon { color: var(--accent-red); background: rgba(255, 69, 58, 0.14); }
.smv-card-icon svg { width: 13px; height: 13px; }
.smv-card-main { min-width: 0; flex: 1; }
.smv-card-title { font-size: 12px; font-weight: 600; color: var(--text-primary); line-height: 1.35; }
.smv-card-detail { margin-top: 3px; font-size: 10.5px; line-height: 1.45; color: var(--text-secondary); }
.smv-card-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.smv-card-btns button { flex: 1 1 auto; min-width: 0; padding: 6px 10px; font-size: 10.5px; border-radius: 7px; cursor: pointer; color: var(--text-primary); background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); }
.smv-card-btns button:hover { background: rgba(255, 255, 255, 0.1); }
.smv-card-btns button.primary { background: var(--accent-blue); border-color: var(--accent-blue); color: #fff; }

.smv-tip { position: fixed; z-index: 10080; width: 220px; padding: 11px 12px; border-radius: 12px; background: rgba(32, 32, 34, 0.96); border: 1px solid rgba(var(--accent-blue-rgb), 0.45); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45); }
.smv-tip[hidden] { display: none; }
.smv-tip-title { font-size: 11.5px; font-weight: 600; color: var(--text-primary); }
.smv-tip-text { margin-top: 4px; font-size: 10.5px; line-height: 1.45; color: var(--text-secondary); }
.smv-tip-ok { margin-top: 8px; padding: 5px 12px; font-size: 10px; border-radius: 6px; border: none; background: var(--accent-blue); color: #fff; cursor: pointer; }

.smv-help { width: 320px; }
.smv-help-body { max-height: 70vh; overflow-y: auto; }
.smv-help-group { margin-bottom: 10px; }
.smv-help-title { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 4px; }
.smv-help-item { font-size: 11px; line-height: 1.6; color: var(--text-primary); }
.smv-help-note { margin-top: 6px; font-size: 10px; line-height: 1.5; color: var(--text-secondary); }

.smv-settings { margin-top: 12px; border-top: 1px solid var(--border-subtle); padding-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.smv-settings-head { display: flex; align-items: center; justify-content: space-between; color: var(--text-primary); font-size: 11px; }
.smv-settings-btn { font-size: 9px; padding: 3px 8px; background: var(--bg-tertiary); border: 1px solid var(--border-subtle); color: var(--text-primary); border-radius: 4px; cursor: pointer; }
.smv-settings-btn[hidden] { display: none; }
.smv-settings-btn.primary { background: var(--accent-blue); border-color: var(--accent-blue); color: #fff; }
#voiceNaturalNote { flex: 1; min-width: 0; }
.smv-check { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.smv-field { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.smv-field > span { color: var(--text-secondary); font-size: 10.5px; flex-shrink: 0; }
.smv-field select, .smv-field input { min-width: 0; max-width: 60%; background: var(--bg-primary); border: 1px solid var(--border-subtle); color: var(--text-primary); padding: 4px 6px; border-radius: 4px; font-size: 10.5px; outline: none; }
.smv-field input { width: 60px; text-align: center; }
.smv-field input.smv-name { width: 90px; text-align: left; }
.smv-note { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 10px; line-height: 1.45; color: var(--text-muted); }

/* Voice: the commands of a hands-free session */
.smv-hist { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.smv-hist[hidden] { display: none; }
.smv-hi { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; padding: 8px 9px; border-radius: 9px; background: rgba(255, 255, 255, 0.045); border: 1px solid rgba(255, 255, 255, 0.07); }
.smv-hi-icon { flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--accent-blue); background: rgba(var(--accent-blue-rgb), 0.14); }
.smv-hi.ok .smv-hi-icon { color: var(--accent-green); background: rgba(48, 209, 88, 0.14); }
.smv-hi.error .smv-hi-icon { color: var(--accent-red); background: rgba(255, 69, 58, 0.14); }
.smv-hi-icon svg { width: 11px; height: 11px; }
.smv-hi-main { flex: 1; min-width: 0; }
.smv-hi-title { font-size: 11px; font-weight: 600; color: var(--text-primary); line-height: 1.35; }
.smv-hi-detail { margin-top: 2px; font-size: 10px; line-height: 1.4; color: var(--text-secondary); }
.smv-hi-btns { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 5px; padding-left: 26px; }
.smv-hi-btns button { padding: 4px 9px; font-size: 10px; border-radius: 6px; cursor: pointer; color: var(--text-primary); background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); }
.smv-hi-btns button.primary { background: var(--accent-blue); border-color: var(--accent-blue); color: #fff; }
.smv-spin { width: 10px; height: 10px; border-radius: 50%; border: 2px solid rgba(var(--accent-blue-rgb), 0.3); border-top-color: var(--accent-blue); animation: smvSpin 0.8s linear infinite; }
.smv-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted); }
@keyframes smvSpin { to { transform: rotate(360deg); } }

/* Settings never runs past the panel: the window is capped to the panel's
   height and its body scrolls (glass scrollbar from the global rule). */
#settingsModal .settings-content, #voiceSettingsModal .settings-content { max-height: calc(100vh - 24px); display: flex; flex-direction: column; }
#settingsModal .settings-header, #voiceSettingsModal .settings-header { flex-shrink: 0; }
#settingsModal .settings-body, #voiceSettingsModal .settings-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; }
/* Settings > Voice commands row */
.smv-settings-row { width: 100%; margin-top: 12px; padding: 10px 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left; cursor: pointer;
    background: var(--bg-tertiary); border: 1px solid var(--border-subtle); border-radius: 8px; color: var(--text-primary); }
.smv-settings-row:hover { border-color: rgba(var(--accent-blue-rgb), 0.5); }
.smv-settings-row svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--text-muted); }
.smv-settings-row-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.smv-settings-row-title { font-size: 11px; color: var(--text-primary); }
.smv-settings-row-sub { font-size: 10px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.smv-settings-window { width: 85%; max-width: 420px; }
.smv-settings.smv-settings-modal { margin-top: 0; border-top: none; padding-top: 0; }
.smv-settings-modal .smv-settings-head span { font-size: 10.5px; color: var(--text-secondary); }

/* Voice: the panel blurs behind the sheet; the sheet grows up to the top of the panel and its list scrolls */
.sm-voice-dim { position: fixed; inset: 0; z-index: 10050; background: rgba(10, 10, 12, 0.38); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); opacity: 0; pointer-events: none; transition: opacity 0.2s ease; }
.sm-voice-dim.show { opacity: 1; pointer-events: auto; }
.sm-voice-sheet { display: flex; flex-direction: column; max-height: calc(100vh - 90px); }
.sm-voice-sheet .smv-hist { min-height: 0; overflow-y: auto; overflow-x: hidden; flex: 1 1 auto; padding-right: 2px; }
/* (voice layers sit just above the sidebar, 10000, and below every macro / settings window, 29000+) */

/* ---- Content packs (Settings > Content packs, and the bar in the Library / MOGRT tabs) ---- */
.packs-note { font-size: 10px; color: var(--text-muted); margin-bottom: 10px; line-height: 1.45; }
.pack-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--border-subtle); }
.pack-row:first-child { border-top: none; }
.pack-main { flex: 1; min-width: 0; }
.pack-name { font-size: 11.5px; font-weight: 600; color: var(--text-primary); }
.pack-desc { font-size: 10px; color: var(--text-secondary); margin-top: 2px; line-height: 1.4; }
.pack-status { font-size: 10px; color: var(--text-muted); margin-top: 4px; }
.pack-bar { height: 4px; border-radius: 2px; background: var(--bg-tertiary); margin-top: 6px; overflow: hidden; }
.pack-bar span { display: block; height: 100%; width: 0; background: var(--accent-blue); border-radius: 2px; transition: width 0.3s ease; }
.pack-btns { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }
.pack-btns .smv-settings-btn { min-width: 74px; }
.packs-bar { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; padding: 7px 10px; border-radius: 6px; font-size: 10px; color: var(--text-secondary);
    background: rgba(var(--accent-blue-rgb), 0.08); border: 1px solid rgba(var(--accent-blue-rgb), 0.25); }
.packs-bar > span { flex: 1; min-width: 0; line-height: 1.4; }
.packs-bar-x { background: none; border: none; color: var(--text-muted); font-size: 14px; line-height: 1; cursor: pointer; padding: 0 2px; }
.packs-bar-x:hover { color: var(--text-primary); }

/* ---- Update card (tool_updater.js) ---- */
.smu-card { position: fixed; right: 12px; bottom: 56px; width: 270px; max-width: calc(100vw - 24px); box-sizing: border-box; z-index: 9600;
    padding: 10px 12px; border-radius: 8px; font-size: 10px; line-height: 1.45; color: var(--text-secondary);
    background: var(--bg-secondary); border: 1px solid rgba(var(--accent-blue-rgb), 0.45); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45); }
.smu-head { display: flex; align-items: center; gap: 8px; color: var(--text-primary); font-size: 11px; }
.smu-head b { flex: 1; min-width: 0; }
.smu-x { background: none; border: none; color: var(--text-muted); font-size: 15px; line-height: 1; cursor: pointer; padding: 0 2px; }
.smu-x:hover { color: var(--text-primary); }
.smu-notes { margin-top: 5px; }
.smu-notes b { color: var(--text-primary); }
.smu-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.smu-bar { height: 4px; margin-top: 8px; border-radius: 2px; background: var(--bg-tertiary); overflow: hidden; }
.smu-bar > div { height: 100%; background: rgb(var(--accent-blue-rgb)); transition: width 0.2s; }

/* ---- macOS permissions notice (tool_mac_permissions.js) ---- */
.smq-card { top: 56px; bottom: auto; width: 290px; }
.smq-cmd { margin-top: 7px; padding: 6px 8px; font-family: Menlo, Consolas, monospace; font-size: 9px; line-height: 1.4; color: var(--text-primary);
    background: var(--bg-primary); border: 1px solid var(--border-subtle); border-radius: 4px; word-break: break-all; -webkit-user-select: text; user-select: text; }

/* ---- Storage (Settings > Storage) ---- */
.stor-title { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin: 14px 0 4px; }
.stor-title:first-child { margin-top: 0; }
.stor-row { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid var(--border-subtle); }
.stor-row:first-child { border-top: none; }
.stor-row input[type=checkbox] { flex-shrink: 0; margin: 0; }
.stor-main { flex: 1; min-width: 0; }
.stor-name { font-size: 11px; font-weight: 600; color: var(--text-primary); }
.stor-sub { font-size: 9.5px; color: var(--text-muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stor-actions { display: flex; justify-content: flex-end; margin-top: 8px; }
.stor-line { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 10.5px; color: var(--text-secondary); }
.smv-settings-btn.stor-danger { color: var(--accent-red); border-color: var(--accent-red); background: rgba(255,69,58,0.10); }
.smv-settings-btn:disabled { opacity: 0.45; cursor: default; }
.stor-empty { font-size: 10px; color: var(--text-muted); padding: 6px 0; }

/* ================================
   SHORTCUTS TAB (tool_shortcuts.js) - every class starts with .smk-
   ================================ */
.smk { position: relative; height: 100%; display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
.smk-scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; gap: 8px; padding-right: 2px; padding-bottom: 8px; }
.smk-scroll::-webkit-scrollbar, .smk-pick-list::-webkit-scrollbar, .smk-sheet-body::-webkit-scrollbar { width: 4px; }
.smk-scroll::-webkit-scrollbar-thumb, .smk-pick-list::-webkit-scrollbar-thumb, .smk-sheet-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.14); border-radius: 4px; }
.smk-card { background: var(--bg-secondary); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 10px 12px; }
.smk-head { display: flex; align-items: center; gap: 10px; }
.smk-head-text { flex: 1; min-width: 0; }
.smk-title { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.smk-status { display: flex; align-items: center; gap: 6px; margin-top: 3px; font-size: 10px; color: var(--text-muted); line-height: 1.35; }
.smk-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,0.25); flex: 0 0 auto; }
.smk-dot.on { background: var(--accent-green); box-shadow: 0 0 0 3px rgba(48,209,88,0.15); }
.smk-dot.idle { background: var(--accent-orange); }
.smk-dot.bad { background: var(--accent-red); }
.smk-note { margin-top: 8px; padding: 8px 10px; border-radius: var(--radius-md); background: rgba(var(--accent-blue-rgb), 0.08); border: 1px solid rgba(var(--accent-blue-rgb), 0.25); font-size: 10px; line-height: 1.45; color: var(--text-secondary); }
.smk-note.warn { background: rgba(255,159,10,0.08); border-color: rgba(255,159,10,0.3); }
.smk-note code { font-family: Menlo, monospace; font-size: 9.5px; color: var(--text-primary); word-break: break-all; }
.smk-note-actions { display: flex; gap: 6px; margin-top: 6px; }

.smk-list { display: flex; flex-direction: column; padding: 4px; }
.smk-list.off { opacity: 0.5; }
.smk-row { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: var(--radius-md); cursor: pointer; transition: background 0.12s ease; }
.smk-row:hover { background: var(--bg-hover); }
.smk-row-text { flex: 1; min-width: 0; }
.smk-row-name { font-size: 11.5px; font-weight: 500; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.smk-row-name.empty { color: var(--text-muted); font-weight: 400; }
.smk-row-sub { font-size: 9.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.smk-row-warn { color: var(--accent-orange); font-size: 11px; flex: 0 0 auto; }
.smk-chev { width: 12px; height: 12px; color: var(--text-muted); flex: 0 0 auto; }

.smk-key { display: inline-flex; align-items: center; justify-content: center; gap: 2px; min-width: 42px; height: 24px; padding: 0 7px; border-radius: 6px; flex: 0 0 auto;
    background: linear-gradient(180deg, #3a3a3a, #2c2c2c); border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 1px 0 rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.06);
    font-size: 11px; font-weight: 600; color: var(--text-primary); letter-spacing: 0.02em; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif; }
.smk-key.big { min-width: 64px; height: 30px; font-size: 13px; }
.smk-key.rec { background: rgba(var(--accent-blue-rgb), 0.18); border-color: var(--accent-blue); color: var(--accent-blue); animation: smkPulse 1.1s ease-in-out infinite; }
@keyframes smkPulse { 50% { box-shadow: 0 0 0 4px rgba(var(--accent-blue-rgb), 0.18); } }

.smk-section-title { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); margin: 2px 0 6px; }
.smk-sw-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; cursor: pointer; }
.smk-sw-row .sm-switch-text { flex: 1; }

.smk-pills { display: flex; flex-wrap: wrap; gap: 5px; }
.smk-pill { border: 1px solid var(--border-medium); background: var(--bg-tertiary); color: var(--text-secondary); border-radius: 999px; padding: 5px 10px; font-size: 10.5px; font-weight: 500; cursor: pointer; transition: all 0.12s ease; line-height: 1.2; }
.smk-pill:hover { color: var(--text-primary); border-color: rgba(255,255,255,0.22); }
.smk-pill.active { background: rgba(var(--accent-blue-rgb), 0.16); border-color: var(--accent-blue); color: var(--accent-blue); }
.smk-pill.small { padding: 3px 8px; font-size: 10px; }

.smk-btn { border: 1px solid var(--border-medium); background: var(--bg-tertiary); color: var(--text-primary); border-radius: var(--radius-md); padding: 6px 10px; font-size: 10.5px; font-weight: 500; cursor: pointer; }
.smk-btn:hover { border-color: rgba(255,255,255,0.22); }
.smk-btn.primary { background: var(--accent-blue); border-color: var(--accent-blue); color: #fff; }
.smk-btn.ghost { background: transparent; }
.smk-btn:disabled { opacity: 0.45; cursor: default; }

/* Editor - slides in over the list */
.smk-sheet { position: absolute; inset: 0; background: var(--bg-primary); display: flex; flex-direction: column; transform: translateX(104%); transition: transform 0.2s ease; z-index: 5; }
.smk-sheet.open { transform: none; }
.smk-sheet-top { display: flex; align-items: center; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--border-subtle); }
.smk-back { display: inline-flex; align-items: center; gap: 2px; border: none; background: transparent; color: var(--accent-blue); font-size: 11px; cursor: pointer; padding: 4px 2px; }
.smk-back svg { width: 14px; height: 14px; }
.smk-sheet-top .smk-spacer { flex: 1; }
.smk-sheet-body { flex: 1; min-height: 0; overflow-y: auto; padding: 10px 2px 10px 0; display: flex; flex-direction: column; gap: 12px; }
.smk-sheet-foot { display: flex; gap: 6px; padding-top: 8px; border-top: 1px solid var(--border-subtle); }
.smk-sheet-foot .smk-btn { flex: 1; }
.smk-field-label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); margin-bottom: 6px; }
.smk-help { font-size: 9.5px; color: var(--text-muted); line-height: 1.45; margin-top: 5px; }
.smk-help.warn { color: var(--accent-orange); }
.smk-input, .smk-select { width: 100%; box-sizing: border-box; background: var(--bg-tertiary); border: 1px solid var(--border-medium); color: var(--text-primary); padding: 6px 8px; border-radius: var(--radius-sm); font-size: 11px; outline: none; }
.smk-input:focus, .smk-select:focus { border-color: var(--accent-blue); }
.smk-num { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.smk-num .smk-input { width: 64px; }

.smk-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.smk-tag { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 4px 6px 4px 9px; border-radius: 999px; background: rgba(var(--accent-blue-rgb), 0.14); color: var(--text-primary); font-size: 10.5px; }
.smk-tag span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.smk-tag small { color: var(--text-muted); font-size: 9px; }
.smk-tag button { border: none; background: rgba(255,255,255,0.12); color: var(--text-primary); width: 15px; height: 15px; border-radius: 50%; font-size: 10px; line-height: 15px; padding: 0; cursor: pointer; flex: 0 0 auto; }
.smk-empty-line { font-size: 10px; color: var(--text-muted); }

.smk-pick { border: 1px solid var(--border-medium); border-radius: var(--radius-md); background: var(--bg-secondary); overflow: hidden; }
.smk-pick .smk-input { border: none; border-bottom: 1px solid var(--border-subtle); border-radius: 0; background: transparent; }
.smk-pick-list { max-height: 170px; overflow-y: auto; padding: 3px; }
.smk-pick-item { display: flex; align-items: center; gap: 6px; padding: 5px 7px; border-radius: 5px; font-size: 10.5px; color: var(--text-secondary); cursor: pointer; }
.smk-pick-item:hover { background: var(--bg-hover); color: var(--text-primary); }
.smk-pick-item.on { color: var(--accent-blue); }
.smk-pick-item .smk-pick-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.smk-pick-item small { color: var(--text-muted); font-size: 9px; flex: 0 0 auto; }
.smk-pick-item .smk-check { width: 12px; flex: 0 0 auto; text-align: center; }
.smk-pick-more { font-size: 9.5px; color: var(--text-muted); padding: 5px 7px; }

/* Quick Access picker (tool_pinned_tabs.js) - a tile grid that always fits
   the panel: the grid scrolls, the header never leaves the screen. */
.settings-content.pin-picker { width: calc(100% - 24px); max-width: 330px; max-height: calc(100vh - 24px); display: flex; flex-direction: column; overflow: hidden; }
.pin-picker .settings-header span { display: flex; align-items: baseline; gap: 8px; }
.pin-picker-count { font-size: 10px; font-weight: 500; color: var(--text-muted); }
.pin-picker-count.full { color: var(--accent-blue); }
.pin-picker-hint { font-size: 10px; color: var(--text-muted); padding: 10px 14px 0; }
.pin-picker-grid { flex: 1; min-height: 0; overflow-y: auto; padding: 10px 12px 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; align-content: start; }
.pin-picker-grid::-webkit-scrollbar { width: 4px; }
.pin-picker-grid::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.14); border-radius: 4px; }
.pin-tile { position: relative; display: flex; align-items: center; gap: 8px; min-width: 0; padding: 8px 9px; border-radius: var(--radius-md); border: 1px solid var(--border-subtle); background: var(--bg-secondary); color: var(--text-secondary); font-size: 11px; text-align: left; cursor: pointer; transition: all 0.12s ease; }
.pin-tile:hover { border-color: var(--border-medium); color: var(--text-primary); }
.pin-tile svg { width: 15px; height: 15px; flex: 0 0 auto; }
.pin-tile .pin-tile-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pin-tile .pin-tile-check { width: 14px; height: 14px; border-radius: 50%; flex: 0 0 auto; border: 1.5px solid rgba(255,255,255,0.22); display: flex; align-items: center; justify-content: center; font-size: 9px; line-height: 1; color: transparent; }
.pin-tile.on { background: rgba(var(--accent-blue-rgb), 0.14); border-color: var(--accent-blue); color: var(--text-primary); }
.pin-tile.on svg { color: var(--accent-blue); }
.pin-tile.on .pin-tile-check { background: var(--accent-blue); border-color: var(--accent-blue); color: #fff; }
.pin-tile.capped { opacity: 0.4; cursor: not-allowed; }

/* ===== Pre-export check (Export tab, 1.9.35) ===== */
#contentExport { position: relative; }
.pec-sheet { position: absolute; top: 10px; left: 10px; right: 10px; bottom: calc(10px + var(--pin-bar-h, 0px)); background: var(--bg-primary); display: flex; flex-direction: column; transform: translateX(110%); visibility: hidden; transition: transform 0.2s ease, visibility 0s linear 0.2s; z-index: 5; }
.pec-sheet.open { transform: none; visibility: visible; transition: transform 0.2s ease; }
.pec-top { display: flex; align-items: center; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--border-subtle); }
.pec-back { display: inline-flex; align-items: center; gap: 2px; border: none; background: transparent; color: var(--accent-blue); font-size: 11px; cursor: pointer; padding: 4px 2px; }
.pec-back svg { width: 14px; height: 14px; }
.pec-top-title { flex: 1; text-align: center; font-size: 12px; font-weight: 600; color: var(--text-primary); }
.pec-icon-btn { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border-medium); background: var(--bg-tertiary); color: var(--text-secondary); border-radius: var(--radius-md); cursor: pointer; padding: 0; }
.pec-icon-btn:hover { color: var(--text-primary); border-color: rgba(255,255,255,0.22); }
.pec-icon-btn svg { width: 13px; height: 13px; }
.pec-body { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 10px 2px 10px 0; display: flex; flex-direction: column; gap: 12px; }
.pec-body::-webkit-scrollbar { width: 4px; }
.pec-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.14); border-radius: 4px; }
.pec-foot { display: flex; gap: 6px; padding-top: 8px; border-top: 1px solid var(--border-subtle); }
.pec-foot .pec-btn { flex: 1; padding: 8px 10px; }
.pec-card { background: var(--bg-secondary); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); }
.pec-sum { display: flex; align-items: center; gap: 10px; padding: 12px; }
.pec-sum-icon { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.pec-sum-icon svg { width: 16px; height: 16px; }
.pec-sum.ok .pec-sum-icon { background: rgba(48,209,88,0.15); color: var(--accent-green); }
.pec-sum.warn .pec-sum-icon { background: rgba(255,159,10,0.15); color: var(--accent-orange); }
.pec-sum.bad .pec-sum-icon { background: rgba(255,69,58,0.15); color: var(--accent-red); }
.pec-sum-title { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.pec-sum-sub { font-size: 10px; color: var(--text-muted); margin-top: 2px; line-height: 1.4; word-break: break-word; }
.pec-group-head { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.pec-group-name { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); }
.pec-count { font-size: 9px; font-weight: 600; color: var(--accent-orange); background: rgba(255,159,10,0.12); border-radius: 999px; padding: 1px 6px; }
.pec-group.info .pec-count { color: var(--text-secondary); background: var(--bg-tertiary); }
.pec-tip { font-size: 9.5px; color: var(--text-muted); line-height: 1.45; margin-bottom: 6px; }
.pec-rows { padding: 3px; }
.pec-row { display: flex; align-items: center; gap: 8px; padding: 6px 7px; border-radius: var(--radius-md); }
.pec-row + .pec-row { border-top: 1px solid var(--border-subtle); border-radius: 0; }
.pec-row-text { flex: 1; min-width: 0; }
.pec-row-title { font-size: 11px; font-weight: 500; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pec-row-sub { font-size: 9.5px; color: var(--text-muted); margin-top: 1px; line-height: 1.35; }
.pec-row-btns { display: flex; gap: 4px; flex: 0 0 auto; }
.pec-btn { border: 1px solid var(--border-medium); background: var(--bg-tertiary); color: var(--text-primary); border-radius: var(--radius-md); padding: 6px 10px; font-size: 10.5px; font-weight: 500; cursor: pointer; white-space: nowrap; }
.pec-btn:hover { border-color: rgba(255,255,255,0.22); }
.pec-btn.primary { background: var(--accent-blue); border-color: var(--accent-blue); color: #fff; }
.pec-btn.ghost { background: transparent; }
.pec-btn.small { padding: 4px 8px; font-size: 10px; }
.pec-busy .pec-btn.small, .pec-busy .pec-icon-btn { opacity: 0.45; pointer-events: none; }
.pec-more { display: block; width: 100%; border: none; background: transparent; color: var(--accent-blue); font-size: 10.5px; padding: 7px; cursor: pointer; border-top: 1px solid var(--border-subtle); }
.pec-foot-note { font-size: 9.5px; color: var(--text-muted); line-height: 1.45; padding: 0 2px; }
.pec-loading { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 40px 0; font-size: 11px; color: var(--text-muted); }
.pec-spin { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--border-medium); border-top-color: var(--accent-blue); animation: pecSpin 0.8s linear infinite; }
@keyframes pecSpin { to { transform: rotate(360deg); } }

/* ===== Batch rename (its own tab, 1.9.35) - page frame shared with .pec-* ===== */
#contentTools { position: relative; }
#contentRename { position: relative; }
.pec-sheet.brn-tab { transition: none; }
.brn-tab .pec-top-title { text-align: left; padding-left: 2px; }
.brn-src-note { font-size: 10px; color: var(--text-muted); padding: 0 2px; line-height: 1.4; }
.brn-src { display: flex; gap: 4px; padding: 3px; background: var(--bg-secondary); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); }
.brn-src-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: none; background: transparent; color: var(--text-secondary); font-size: 10.5px; font-weight: 500; padding: 6px 8px; border-radius: 6px; cursor: pointer; }
.brn-src-btn span { font-size: 9px; font-weight: 600; color: var(--text-muted); background: var(--bg-tertiary); border-radius: 999px; padding: 1px 6px; }
.brn-src-btn.active { background: var(--bg-tertiary); color: var(--text-primary); }
.brn-src-btn.active span { color: var(--accent-blue); background: rgba(var(--accent-blue-rgb), 0.14); }
.brn-src-btn:disabled { opacity: 0.4; cursor: default; }
.brn-empty { padding: 14px 12px; font-size: 10.5px; line-height: 1.5; color: var(--text-secondary); }
.brn-empty svg { width: 11px; height: 11px; vertical-align: -1px; }
.brn-rules { padding: 10px 12px; display: flex; flex-direction: column; gap: 10px; }
.brn-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.brn-label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); }
.brn-two { display: flex; gap: 8px; }
.brn-block { display: flex; flex-direction: column; gap: 5px; }
.brn-pills { display: flex; flex-wrap: wrap; gap: 5px; }
.brn-num-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: -3px; }
.brn-inline { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; color: var(--text-secondary); }
.brn-small { width: 58px !important; padding: 4px 6px !important; }
.brn-switch { margin: 0; }
.brn-row.same .pec-row-title { color: var(--text-muted); font-weight: 400; }
.brn-warn { color: var(--accent-orange); font-weight: 400; }
.brn-preview { max-height: none; }
.pec-btn:disabled { opacity: 0.45; cursor: default; }

/* ===== Split Screen (its own tab, 1.9.35) - page frame shared with .pec-* / .brn-tab ===== */
#contentSplit { position: relative; }
.spl-label { font-size: 9.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); display: flex; justify-content: space-between; align-items: baseline; margin-bottom: -4px; }
.spl-label span { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 10px; }
.spl-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.spl-tile { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 7px 5px 6px; border: 1px solid var(--border-medium); background: var(--bg-tertiary); border-radius: var(--radius-md); cursor: pointer; color: var(--text-secondary); }
.spl-tile:hover { border-color: rgba(255,255,255,0.22); color: var(--text-primary); }
.spl-tile.active { border-color: var(--accent-blue); background: rgba(var(--accent-blue-rgb), 0.12); color: var(--text-primary); }
.spl-tile-frame { position: relative; width: 100%; background: var(--bg-primary); border-radius: 3px; overflow: hidden; display: block; }
.spl-tile-frame.tall { width: auto; height: 46px; }
.spl-tile-frame i { position: absolute; background: rgba(var(--accent-blue-rgb), 0.55); border-radius: 1px; }
.spl-tile.active .spl-tile-frame i { background: var(--accent-blue); }
.spl-tile-name { font-size: 9.5px; line-height: 1.2; text-align: center; }
.spl-frame { position: relative; width: 100%; margin: 0 auto; flex: none; background: #000; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--border-subtle); }
.spl-cell { position: absolute; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: #fff; overflow: hidden; padding: 2px; }
.spl-cell b { font-size: 15px; line-height: 1; }
.spl-cell span { font-size: 9px; opacity: 0.85; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spl-cell.empty { border: 1px dashed rgba(255,255,255,0.25); color: var(--text-muted); }
.spl-clip { cursor: pointer; }
.spl-clip:hover { background: var(--bg-tertiary); }
.spl-clip.off { cursor: default; opacity: 0.6; }
.spl-num { width: 18px; height: 18px; flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 600; color: #fff; border: 1px solid var(--border-medium); }
.spl-note { padding: 10px; font-size: 10.5px; color: var(--text-secondary); line-height: 1.45; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.spl-gap { width: 100%; }

/* ===== NEW badges + How to use cards (tool_new_badges.js, 1.9.35) ===== */
/* drawn with ::after so no text is added to the tab buttons (Voice / Quick Access read their labels).
   Tab buttons carry data-tooltip, whose generic ::after styles (and the sidebar's content:none) would
   otherwise apply - hence the long selectors and the full reset. */
.tab-bar .tab-btn.sm-new[data-tooltip]::after, .tab-bar .tab-btn.sm-new-dot[data-tooltip]::after,
.tab-bar .tab-btn.sm-new[data-tooltip]:hover::after, .tab-bar .tab-btn.sm-new-dot[data-tooltip]:hover::after {
    position: static; left: auto; top: auto; transform: none; margin: 0 0 0 auto; opacity: 1; visibility: visible; pointer-events: none;
    z-index: auto; box-shadow: none; border: 0; transition: none; white-space: nowrap; flex: none; background: #22c55e; }
.tab-bar .tab-btn.sm-new[data-tooltip]::after, .tab-bar .tab-btn.sm-new[data-tooltip]:hover::after {
    content: 'NEW'; color: #052e16; font-size: 6.5px; font-weight: 800; letter-spacing: 0.06em; line-height: 1; padding: 2px 3px 1.5px; border-radius: 3px; }
.tab-bar .tab-btn.sm-new-dot[data-tooltip]::after, .tab-bar .tab-btn.sm-new-dot[data-tooltip]:hover::after {
    content: ''; width: 6px; height: 6px; padding: 0; border-radius: 50%; }
@media (max-width: 380px) {
    .tab-bar .tab-btn.sm-new, .tab-bar .tab-btn.sm-new-dot { position: relative; }
    .tab-bar .tab-btn.sm-new[data-tooltip]::after, .tab-bar .tab-btn.sm-new-dot[data-tooltip]::after,
    .tab-bar .tab-btn.sm-new[data-tooltip]:hover::after, .tab-bar .tab-btn.sm-new-dot[data-tooltip]:hover::after {
        content: ''; position: absolute; top: 4px; right: 4px; left: auto; width: 7px; height: 7px; padding: 0; margin: 0; border-radius: 50%; }
}
.tool-card.sm-new-card .tool-card-title::after { content: 'NEW'; margin-left: 6px; background: #22c55e; color: #052e16; font-size: 6.5px; font-weight: 800; letter-spacing: 0.06em; line-height: 1; padding: 2px 3px 1.5px; border-radius: 3px; }
.smh { background: #f7f9fc; color: #1f2937; border-radius: var(--radius-lg); padding: 12px 12px 10px; font-size: 11.5px; line-height: 1.5; flex: none; }
.smh b { color: #111827; font-weight: 600; }
.smh-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.smh-title { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: #111827; }
.smh-title svg, .smh-link svg { width: 15px; height: 15px; color: #2563eb; flex: none; }
.smh-got { border: 1px solid #c7d2fe; background: #fff; color: #2563eb; font-size: 10.5px; font-weight: 600; border-radius: 999px; padding: 3px 10px; cursor: pointer; }
.smh-got:hover { background: #eef2ff; }
.smh-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.smh-steps li { display: flex; gap: 8px; align-items: flex-start; }
.smh-n { flex: none; width: 18px; height: 18px; border-radius: 50%; background: #2563eb; color: #fff; font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; margin-top: 1px; }
.smh-do { color: #1f2937; }
.smh-more { color: #4b5563; font-size: 10.5px; margin-top: 2px; }
.smh-btn { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; vertical-align: -5px; border: 1px solid #cbd5e1; background: #fff; border-radius: 5px; color: #1f2937; margin: 0 1px; }
.smh-btn svg { width: 11px; height: 11px; }
.smh-tip { margin-top: 10px; padding-top: 8px; border-top: 1px solid #e2e8f0; color: #4b5563; font-size: 10.5px; }
.smh-folded { background: transparent; padding: 0; }
.smh-link { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #c7d2fe; background: #f7f9fc; color: #1d4ed8; font-size: 11px; font-weight: 600; border-radius: 999px; padding: 4px 11px; cursor: pointer; }
.smh-link:hover { background: #eef2ff; }
.smh-help-btn svg { width: 14px; height: 14px; }
.smh-slot { display: flex; flex-direction: column; gap: 6px; flex: none; }
.smh-slot-bar { display: flex; justify-content: flex-end; }

/* The older tabs' help cards (.ai-tips-card) in the same light design. Scoped to .smh-tips, which
   tool_new_badges.js adds - their markup ids and open / close code are unchanged. Folded = a small
   "How to use" pill; open = the light card with numbered steps. */
.ai-tips-card.smh-tips { background: transparent; border: none; overflow: visible; }
.smh-tips .ai-tips-toggle { width: auto; display: inline-flex; gap: 6px; justify-content: flex-start; border: 1px solid #c7d2fe; background: #f7f9fc; color: #1d4ed8; font-size: 11px; font-weight: 600; border-radius: 999px; padding: 4px 11px; }
.smh-tips .ai-tips-toggle:hover { background: #eef2ff; }
.smh-tips .ai-tips-chevron { color: #1d4ed8; }
.smh-tips .smh-tips-ic { width: 15px; height: 15px; color: #2563eb; flex: none; }
.smh-tips.smh-tips-open { background: #f7f9fc; border-radius: var(--radius-lg); padding: 10px 12px 12px; }
.smh-tips.smh-tips-open .ai-tips-toggle { width: 100%; justify-content: flex-start; border: none; background: transparent; padding: 0 0 8px; font-size: 12.5px; color: #111827; border-radius: 0; }
.smh-tips.smh-tips-open .ai-tips-toggle .ai-tips-chevron { margin-left: auto; color: #6b7280; }
.smh-tips .ai-tips-body { padding: 0; }
.smh-tips .ai-tips-list { list-style: none; padding: 0; margin: 0; counter-reset: smh; font-size: 11.5px; line-height: 1.5; color: #1f2937; display: flex; flex-direction: column; gap: 8px; }
.smh-tips .ai-tips-list li { counter-increment: smh; position: relative; padding-left: 26px; margin: 0; }
.smh-tips .ai-tips-list li::before { content: counter(smh); position: absolute; left: 0; top: 1px; width: 18px; height: 18px; border-radius: 50%; background: #2563eb; color: #fff; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.smh-tips .ai-tips-list b { color: #111827; font-weight: 600; }
/* the help cards now sit at the top of their tab: space below instead of above */
.ai-tips-card.smh-tips { margin-top: 0; margin-bottom: 12px; }

/* "How to use" cards on the other tabs (holders: [data-howto-slot]) */
.smh-tab-slot { flex: none; margin-bottom: 10px; }
.smh-tab-slot:empty { display: none; }
/* tabs with a fixed layout: the open card scrolls inside itself so the tab never runs off screen */
.smh-tab-slot.smh-cap .smh:not(.smh-folded) { max-height: 55vh; overflow-y: auto; }

/* ===== Update card, centered over the blurred panel (tool_updater.js, 1.9.35) =====
   Scoped to .smu-overlay: the macOS permissions notice also uses .smu-card and keeps its own look. */
.smu-overlay { position: fixed; inset: 0; z-index: 10050; display: flex; align-items: center; justify-content: center; padding: 16px; box-sizing: border-box;
    background: rgba(10, 10, 12, 0.45); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: smuFade 0.15s ease-out; }
@keyframes smuFade { from { opacity: 0; } to { opacity: 1; } }
.smu-overlay .smu-card { position: relative; right: auto; bottom: auto; left: auto; top: auto; width: 320px; max-width: 100%; max-height: calc(100vh - 32px); overflow-y: auto;
    padding: 0; border-radius: 12px; font-size: 12px; line-height: 1.45; color: var(--text-secondary); background: var(--bg-secondary);
    border: 1px solid var(--border-medium); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55); }
.smu-hd { display: flex; align-items: center; gap: 10px; padding: 14px 14px 10px; }
.smu-ic { width: 34px; height: 34px; border-radius: 9px; flex: none; display: flex; align-items: center; justify-content: center; color: var(--accent-blue); background: rgba(var(--accent-blue-rgb), 0.18); }
.smu-ic svg { width: 18px; height: 18px; }
.smu-ic.ok { color: var(--accent-green); background: rgba(48, 209, 88, 0.18); }
.smu-ic.warn { color: var(--accent-orange); background: rgba(255, 159, 10, 0.18); }
.smu-ht { flex: 1; min-width: 0; }
.smu-t { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.smu-s { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.smu-overlay .smu-x { align-self: flex-start; font-size: 18px; }
.smu-ver { display: flex; align-items: center; gap: 8px; margin: 0 14px 12px; padding: 8px 10px; border-radius: 8px; background: var(--bg-primary); font-size: 11.5px; }
.smu-ver b { color: var(--text-primary); }
.smu-arrow { color: var(--text-muted); }
.smu-pill { margin-left: auto; font-size: 10px; padding: 1px 7px; border-radius: 999px; background: rgba(var(--accent-blue-rgb), 0.2); color: var(--text-primary); }
.smu-lab { font-size: 9.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); margin: 2px 14px 7px; }
.smu-list { list-style: none; margin: 0 14px 10px; padding: 0; color: var(--text-primary); opacity: 0.9; }
.smu-list li { display: flex; gap: 8px; margin-bottom: 6px; }
.smu-list li::before { content: ''; flex: none; width: 5px; height: 5px; margin-top: 7px; border-radius: 50%; background: var(--accent-blue); }
.smu-steps { margin: 0 14px 10px; color: var(--text-primary); }
.smu-steps > div { display: flex; gap: 9px; margin-bottom: 8px; line-height: 1.4; }
.smu-steps i { flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--accent-blue); color: #fff; font-size: 10px; font-weight: 700; font-style: normal; display: flex; align-items: center; justify-content: center; }
.smu-steps p { margin: 0; flex: 1; min-width: 0; }
.smu-keep { margin: 0 14px 12px; font-size: 11px; color: var(--text-muted); }
.smu-msg { margin: 0 14px 12px; color: var(--text-secondary); }
.smu-overlay .smu-bar { height: 6px; margin: 4px 14px 6px; border-radius: 6px; background: var(--bg-primary); }
.smu-overlay .smu-bar > div { border-radius: 6px; }
.smu-meta { display: flex; justify-content: space-between; margin: 0 14px 12px; font-size: 11px; color: var(--text-muted); }
.smu-foot { display: flex; gap: 6px; padding: 10px 14px 14px; border-top: 1px solid var(--border-subtle); }
.smu-b { flex: 1; min-width: 0; padding: 8px 6px; border-radius: 8px; border: 1px solid var(--border-medium); background: var(--bg-tertiary); color: var(--text-primary); font-size: 11.5px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.smu-b:hover { border-color: rgba(255, 255, 255, 0.24); }
.smu-b.primary { background: var(--accent-blue); border-color: var(--accent-blue); color: #fff; font-weight: 600; }
/* the small progress badge while the download is hidden */
.smu-badge { position: fixed; right: 12px; bottom: calc(12px + var(--pin-bar-h, 0px)); z-index: 9600; display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px 6px 7px;
    border-radius: 999px; border: 1px solid var(--border-medium); background: var(--bg-secondary); color: var(--text-primary); font-size: 11px; cursor: pointer; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45); }
.smu-badge-ring { width: 16px; height: 16px; border-radius: 50%; background: conic-gradient(var(--accent-blue) calc(var(--p) * 1%), var(--bg-tertiary) 0); }

/* ================================
   CHAT (tool_chat.js) - the button reuses .sm-voice-btn (same look and glow)
   ================================ */
.sm-chat-btn.open { animation: none; box-shadow: 0 0 18px 4px rgba(var(--accent-blue-rgb), 0.55); }
.sm-chat-btn.smc-under { opacity: 0; pointer-events: none; }
.sm-chat {
    position: fixed; z-index: 10065; right: 8px; left: 8px; max-width: 380px; margin-left: auto; box-sizing: border-box;
    height: min(480px, calc(100vh - 110px)); display: flex; flex-direction: column; border-radius: 14px; overflow: hidden;
    background: var(--bg-secondary); border: 1px solid var(--border-medium); box-shadow: 0 14px 38px rgba(0, 0, 0, 0.5);
    opacity: 0; transform: translateY(10px) scale(0.98); pointer-events: none; transition: opacity 0.18s ease, transform 0.18s ease;
}
.sm-chat.show { opacity: 1; transform: none; pointer-events: auto; }
.smc-head { flex: none; display: flex; align-items: center; gap: 4px; padding: 10px 8px 9px 13px; border-bottom: 1px solid var(--border-subtle); }
.smc-head-text { flex: 1; min-width: 0; }
.smc-title { font-size: 12.5px; font-weight: 600; color: var(--text-primary); }
.smc-sub { margin-top: 1px; font-size: 10px; color: var(--text-muted); }
.smc-icon { flex: none; width: 24px; height: 24px; padding: 0; border: none; border-radius: 6px; background: transparent; color: var(--text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.smc-icon:hover { color: var(--text-primary); background: var(--bg-hover); }
.smc-icon svg { width: 13px; height: 13px; }
.smc-list { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 10px 6px; display: flex; flex-direction: column; gap: 8px; }
.smc-msg { display: flex; flex-direction: column; max-width: 92%; }
.smc-msg.me { align-self: flex-end; align-items: flex-end; max-width: 82%; }
.smc-msg.bot { align-self: flex-start; }
.smc-bubble { display: flex; gap: 7px; align-items: flex-start; padding: 8px 11px; border-radius: 12px; font-size: 11.5px; line-height: 1.45; color: var(--text-primary); word-break: break-word; }
.smc-msg.bot .smc-bubble { background: var(--bg-tertiary); border: 1px solid var(--border-subtle); border-top-left-radius: 4px; }
.smc-msg.me .smc-bubble { background: var(--accent-blue); color: #fff; border-top-right-radius: 4px; }
.smc-body { min-width: 0; flex: 1; }
.smc-dim { margin-top: 3px; font-size: 10.5px; color: var(--text-secondary); }
.smc-h { font-weight: 600; margin-bottom: 4px; }
.smc-steps { margin: 0; padding-left: 17px; }
.smc-steps li { margin: 3px 0; }
.smc-steps li::marker { color: var(--accent-blue); font-weight: 600; }
.smc-st { flex: none; width: 18px; height: 18px; margin-top: -1px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--accent-blue); background: rgba(var(--accent-blue-rgb), 0.14); }
.smc-st svg { width: 11px; height: 11px; }
.smc-msg.ok .smc-st { color: var(--accent-green); background: rgba(48, 209, 88, 0.14); }
.smc-msg.error .smc-st { color: var(--accent-red); background: rgba(255, 69, 58, 0.14); }
.smc-spin { width: 10px; height: 10px; border-radius: 50%; border: 2px solid rgba(var(--accent-blue-rgb), 0.3); border-top-color: var(--accent-blue); animation: smcSpin 0.8s linear infinite; }
@keyframes smcSpin { to { transform: rotate(360deg); } }
.smc-btns { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.smc-btns button { padding: 5px 10px; font-size: 10.5px; border-radius: 999px; cursor: pointer; color: var(--text-primary); background: transparent; border: 1px solid var(--border-medium); }
.smc-btns button:hover { border-color: var(--accent-blue); color: var(--accent-blue); }
.smc-btns button.primary { background: var(--accent-blue); border-color: var(--accent-blue); color: #fff; }
.smc-btns button.primary:hover { filter: brightness(1.1); color: #fff; }
.smc-dots { display: inline-flex; gap: 3px; padding: 3px 0; }
.smc-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--text-muted); animation: smcDot 1s ease-in-out infinite; }
.smc-dots i:nth-child(2) { animation-delay: 0.15s; }
.smc-dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes smcDot { 0%, 100% { opacity: 0.3; transform: none; } 50% { opacity: 1; transform: translateY(-2px); } }
.smc-input { flex: none; display: flex; align-items: flex-end; gap: 6px; padding: 8px; border-top: 1px solid var(--border-subtle); }
.smc-input textarea { flex: 1; min-width: 0; resize: none; max-height: 90px; box-sizing: border-box; padding: 8px 10px; border-radius: 10px; font: inherit; font-size: 11.5px; line-height: 1.35;
    color: var(--text-primary); background: var(--bg-primary); border: 1px solid var(--border-subtle); outline: none; }
.smc-input textarea:focus { border-color: var(--accent-blue); }
.smc-send { flex: none; width: 32px; height: 32px; padding: 0; border: none; border-radius: 50%; background: var(--accent-blue); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.smc-send svg { width: 15px; height: 15px; }
.smc-flash { outline: 2px solid var(--accent-blue) !important; outline-offset: 2px; transition: outline-color 0.3s; }
@media (prefers-reduced-motion: reduce) { .smc-spin, .smc-dots i { animation: none; } }
.smc-ai { margin-top: 5px; font-size: 9px; letter-spacing: 0.3px; text-transform: uppercase; color: var(--text-muted); }
/* the chat button sits on the pinned-tabs bar (next to the mic when voice is on) */
body.sm-chat-on #pinnedTabsRow { padding-right: 56px; }
body.sm-chat-on.sm-voice-on #pinnedTabsRow { padding-right: 98px; }
.smc-notice .smu-msg b { color: var(--text-primary); }

/* ================================
   SETUP & TOUR (tool_onboarding.js) - cards reuse .smu-overlay / .smu-card
   ================================ */
.smob-card { width: 340px; }
.smob-bar { height: 5px; margin: 0 14px 10px; border-radius: 5px; background: var(--bg-primary); overflow: hidden; }
.smob-bar > div { height: 100%; border-radius: 5px; background: var(--accent-blue); transition: width 0.3s ease; }
.smob-rows { display: flex; flex-direction: column; gap: 2px; margin: 0 8px 10px; }
.smob-row { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-radius: 9px; }
.smob-row:hover { background: var(--bg-hover); }
.smob-row.done .smob-rtt { color: var(--text-muted); }
.smob-st { flex: none; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 700; color: var(--text-muted); border: 1.5px solid var(--border-medium); box-sizing: border-box; }
.smob-st.done { border: none; color: #fff; background: var(--accent-green); }
.smob-st.done svg { width: 12px; height: 12px; }
.smob-st.busy { border: none; background: conic-gradient(var(--accent-blue) calc(var(--p) * 1%), var(--bg-tertiary) 0); -webkit-mask: radial-gradient(circle, transparent 6px, #000 6.5px); }
.smob-stb { flex: none; padding: 0; border: none; background: none; cursor: pointer; border-radius: 50%; }
.smob-stb:hover .smob-st { border-color: var(--accent-blue); }
.smob-rt { flex: 1; min-width: 0; }
.smob-rtt { font-size: 12px; font-weight: 600; color: var(--text-primary); line-height: 1.3; }
.smob-rts { margin-top: 2px; font-size: 10.5px; color: var(--text-muted); line-height: 1.35; }
.smob-err { color: var(--accent-red); }
.smob-btn { flex: none; padding: 5px 11px; border-radius: 7px; font-size: 11px; cursor: pointer; color: var(--text-primary); background: var(--bg-tertiary); border: 1px solid var(--border-medium); white-space: nowrap; }
.smob-btn:hover { border-color: var(--accent-blue); }
.smob-btn.primary { background: var(--accent-blue); border-color: var(--accent-blue); color: #fff; }
.smob-btn.ghost { background: transparent; color: var(--text-muted); }
/* the Mac cards */
.smms-step { display: flex; align-items: center; gap: 6px; margin: 0 14px 10px; font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.smms-step i { width: 18px; height: 4px; border-radius: 4px; background: var(--bg-tertiary); }
.smms-step i.on { background: var(--accent-blue); }
.smms-vid { position: relative; display: block; width: calc(100% - 28px); margin: 0 14px 12px; padding: 0; border-radius: 10px; overflow: hidden; border: 1px solid var(--border-subtle); cursor: pointer; aspect-ratio: 16 / 10; background: #000; }
.smms-vid img { width: 100%; height: 100%; object-fit: cover; opacity: 0.75; display: block; transition: opacity 0.2s; }
.smms-vid:hover img { opacity: 0.9; }
.smms-vid .play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.smms-vid .play > span { width: 46px; height: 46px; border-radius: 50%; background: var(--accent-blue); display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5); }
.smms-vid .play svg { width: 18px; height: 18px; margin-left: 3px; }
.smms-vid .cap { position: absolute; left: 10px; bottom: 8px; font-size: 11px; font-weight: 600; color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8); }
.smms-act { display: flex; align-items: center; justify-content: center; gap: 7px; width: calc(100% - 28px); margin: 0 14px 12px; padding: 9px; border-radius: 8px; border: 1px solid rgba(var(--accent-blue-rgb), 0.6); background: rgba(var(--accent-blue-rgb), 0.14); color: var(--text-primary); font-size: 12px; font-weight: 600; cursor: pointer; }
.smms-act:hover { background: rgba(var(--accent-blue-rgb), 0.24); }
.smms-act svg { width: 14px; height: 14px; }
.smms-note { margin: -2px 14px 12px; font-size: 10.5px; color: var(--text-muted); }
/* the bottom-bar pill */
.smob-pill { position: fixed; z-index: 10068; display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 11px 0 8px; border-radius: 999px; cursor: pointer; font-size: 11px; font-weight: 600; white-space: nowrap;
    color: var(--text-primary); background: var(--bg-secondary); border: 1px solid rgba(var(--accent-blue-rgb), 0.6); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35); }
.smob-pill[hidden] { display: none; }
.smob-pill:hover { background: var(--bg-tertiary); }
.smob-pill svg { width: 13px; height: 13px; color: var(--accent-blue); }
.smob-pill-ring { width: 13px; height: 13px; border-radius: 50%; background: conic-gradient(var(--accent-blue) calc(var(--p) * 1%), var(--bg-tertiary) 0); }
body.sm-chat-on.sm-setup-pill #pinnedTabsRow { padding-right: calc(56px + var(--smob-pill-w, 90px)); }
body.sm-chat-on.sm-voice-on.sm-setup-pill #pinnedTabsRow { padding-right: calc(98px + var(--smob-pill-w, 90px)); }
/* the tour */
.smob-block { position: fixed; inset: 0; z-index: 10090; }
.smob-hole { position: fixed; z-index: 10091; pointer-events: none; border-radius: 10px; box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.62); outline: 2px solid var(--accent-blue); outline-offset: 0; transition: left 0.25s ease, top 0.25s ease, width 0.25s ease, height 0.25s ease; }
.smob-hole.soft { box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.45); animation: smobPulse 1.6s ease-in-out infinite; }
@keyframes smobPulse { 50% { outline-color: rgba(var(--accent-blue-rgb), 0.35); } }
.smob-tip { position: fixed; z-index: 10092; box-sizing: border-box; padding: 12px 13px 11px; border-radius: 12px; background: var(--bg-secondary); border: 1px solid var(--border-medium); box-shadow: 0 14px 38px rgba(0, 0, 0, 0.55); transition: left 0.25s ease, top 0.25s ease; }
.smob-tip-n { font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-blue); }
.smob-tip-t { margin-top: 3px; font-size: 13px; font-weight: 600; color: var(--text-primary); }
.smob-tip-x { margin-top: 4px; font-size: 11.5px; line-height: 1.45; color: var(--text-secondary); }
.smob-tip-b { display: flex; align-items: center; gap: 6px; margin-top: 11px; }
.smob-tip-b > span { flex: 1; }
.smob-skip { padding: 0; border: none; background: none; color: var(--text-muted); font-size: 11px; cursor: pointer; }
.smob-skip:hover { color: var(--text-primary); }
@media (prefers-reduced-motion: reduce) { .smob-hole, .smob-tip { transition: none; } .smob-hole.soft { animation: none; } }
/* the Tour tab page */
.smob-page { padding: 14px 12px 24px; box-sizing: border-box; }
.smob-hero { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; }
.smob-hero-t { font-size: 15px; font-weight: 700; color: var(--text-primary); }
.smob-hero-s { margin-top: 2px; font-size: 11px; color: var(--text-muted); }
.smob-page .smms-act { width: 100%; margin: 0 0 14px; padding: 11px; }
.smob-sec { margin: 6px 2px 7px; font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.smob-page .smob-bar { margin: 0 2px 6px; }
.smob-page-rows { margin: 0 -4px 14px; padding: 4px; border-radius: 12px; background: var(--bg-secondary); border: 1px solid var(--border-subtle); }
.smob-vids { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.smob-vid { position: relative; padding: 0; border-radius: 10px; overflow: hidden; cursor: pointer; aspect-ratio: 16 / 11; background: #000; border: 1px solid var(--border-subtle); text-align: left; }
.smob-vid img, .smob-vid-blank { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.6; display: block; transition: opacity 0.2s; }
.smob-vid-blank { background: var(--bg-tertiary); }
.smob-vid:hover img { opacity: 0.85; }
.smob-vid-play { position: absolute; top: 8px; left: 8px; width: 26px; height: 26px; border-radius: 50%; background: var(--accent-blue); display: flex; align-items: center; justify-content: center; }
.smob-vid-play svg { width: 11px; height: 11px; margin-left: 2px; }
.smob-vid-t { position: absolute; left: 8px; right: 8px; bottom: 7px; font-size: 11px; font-weight: 600; line-height: 1.25; color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9); }
.smob-vid-t small { display: block; margin-top: 2px; font-size: 9px; font-weight: 400; opacity: 0.85; }

/* ================================
   TAB LOOK: big cards (tool_tab_cards.js) - only under body.sm-tabcards,
   the classic list above is untouched
   ================================ */
body.sm-tabcards .tab-bar { width: 140px !important; min-width: 140px; max-width: 140px; padding: 10px 9px; gap: 10px; }
body.sm-tabcards #railResizer { display: none; }
body.sm-tabcards .tab-bar .tab-btn { position: relative; flex-direction: column; justify-content: center; align-items: center; gap: 0; height: 138px; padding: 10px 8px; box-sizing: border-box;
    border-radius: 18px; background: var(--bg-tertiary); border: 1px solid var(--border-subtle); text-align: center; }
body.sm-tabcards .tab-bar .tab-btn svg { width: 22px; height: 22px; flex: none; padding: 12px; box-sizing: content-box; border-radius: 14px; background: var(--bg-primary); color: var(--text-secondary); margin-bottom: 10px; }
body.sm-tabcards .tab-bar .tab-btn span { font-size: 12.5px; font-weight: 700; line-height: 1.2; white-space: normal; text-align: center; color: var(--text-primary); max-width: 100%; }
body.sm-tabcards .tab-bar .tab-btn[data-info]::before { content: attr(data-info); order: 3; margin-top: 4px; font-size: 10px; line-height: 1.25; color: var(--text-muted); max-width: 100%; }
body.sm-tabcards .tab-bar .tab-btn:hover { background: var(--bg-hover); border-color: var(--border-medium); }
body.sm-tabcards .tab-bar .tab-btn.active { background: rgba(var(--accent-blue-rgb), 0.16); border-color: rgba(var(--accent-blue-rgb), 0.7); box-shadow: 0 0 18px rgba(var(--accent-blue-rgb), 0.25); }
body.sm-tabcards .tab-bar .tab-btn.active svg { background: var(--accent-blue); color: #fff; }
body.sm-tabcards .tab-bar .tab-btn.active[data-info]::before { color: var(--text-secondary); }
/* NEW badge: top-right corner of the card */
body.sm-tabcards .tab-bar .tab-btn.sm-new[data-tooltip]::after, body.sm-tabcards .tab-bar .tab-btn.sm-new[data-tooltip]:hover::after,
body.sm-tabcards .tab-bar .tab-btn.sm-new-dot[data-tooltip]::after, body.sm-tabcards .tab-bar .tab-btn.sm-new-dot[data-tooltip]:hover::after { position: absolute; top: 9px; right: 9px; margin: 0; }
/* the name is on the card - no hover tooltip needed */
body.sm-tabcards .sidebar-tooltip { display: none !important; }
/* the one-time offer card's little preview */
.smtc-preview { display: flex; gap: 8px; justify-content: center; margin: 2px 14px 12px; padding: 12px; border-radius: 10px; background: var(--bg-primary); }
.smtc-mini { width: 72px; height: 86px; border-radius: 12px; background: var(--bg-tertiary); border: 1px solid var(--border-subtle); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.smtc-mini i { width: 24px; height: 24px; border-radius: 8px; background: var(--bg-secondary); }
.smtc-mini b { font-size: 9.5px; font-weight: 700; color: var(--text-primary); }
.smtc-mini s { width: 40px; height: 4px; border-radius: 4px; background: var(--border-medium); text-decoration: none; }
.smtc-mini.on { background: rgba(var(--accent-blue-rgb), 0.16); border-color: rgba(var(--accent-blue-rgb), 0.7); }
.smtc-mini.on i { background: var(--accent-blue); }

/* ================================
   THEME-MATCHED TOOL COLOURS (tool_theme_colors.js, 1.9.38)
   Generated from the rules above: each tool's own colour (Silence green, AI purple,
   the Tools buttons, fixed blues...) follows the theme accent instead. Warnings,
   errors, success ticks, badges, labels and search-type colours keep their meaning.
   body.sm-tool-colors (Settings > Tool colours > Original) turns all of this off.
   ================================ */
body:not(.sm-tool-colors) #contentSilence, body:not(.sm-tool-colors) #contentAI { --accent-green: var(--accent-blue); --accent-purple: var(--accent-blue); }
body:not(.sm-tool-colors) .mode-toggle.mode-assets { background: rgba(var(--accent-blue-rgb), 0.1); border-color: rgba(var(--accent-blue-rgb), 0.3); color: var(--accent-blue); }
body:not(.sm-tool-colors) .mode-toggle .folder-count { background: var(--accent-blue); }
body:not(.sm-tool-colors) .add-slot-btn:hover { background: var(--accent-blue); border-color: var(--accent-blue); }
body:not(.sm-tool-colors) .transition-option:hover, body:not(.sm-tool-colors) .transition-option.selected { background: rgba(var(--accent-blue-rgb), 0.1); }
body:not(.sm-tool-colors) .transition-option.selected { background: rgba(var(--accent-blue-rgb), 0.2); }
body:not(.sm-tool-colors) .transition-option-icon { color: var(--accent-blue); }
body:not(.sm-tool-colors) .folder-manager-add { background: var(--accent-blue); }
body:not(.sm-tool-colors) .folder-manager-add:hover { background: var(--accent-blue); }
body:not(.sm-tool-colors) .folder-item-icon { color: var(--accent-blue); }
body:not(.sm-tool-colors) .dl-card { background: linear-gradient(145deg, rgba(var(--accent-blue-rgb), 0.1), rgba(30, 30, 30, 0.55)); }
body:not(.sm-tool-colors) .preset-indicator { color: var(--accent-blue); }
body:not(.sm-tool-colors) .slot-category-header.cat-video-fx { color: var(--accent-blue); }
body:not(.sm-tool-colors) .slot.cat-video-fx { border-color: rgba(var(--accent-blue-rgb), 0.25); }
body:not(.sm-tool-colors) .slot.cat-video-fx:hover { border-color: var(--accent-blue); }
body:not(.sm-tool-colors) .slot.cat-video-fx.assigned { background: rgba(var(--accent-blue-rgb), 0.1); border-color: rgba(var(--accent-blue-rgb), 0.3); color: var(--accent-blue); }
body:not(.sm-tool-colors) .slot.cat-video-fx.assigned:hover { background: rgba(var(--accent-blue-rgb), 0.2); border-color: var(--accent-blue); }
body:not(.sm-tool-colors) .tool-card.watching .tool-card-title::after { background: var(--accent-blue); }
body:not(.sm-tool-colors) .tool-btn.tool-gaps:hover { background: rgba(var(--accent-blue-rgb), 0.1); border-color: rgba(var(--accent-blue-rgb), 0.3); }
body:not(.sm-tool-colors) .tool-btn.tool-gaps:hover .tool-btn-icon { color: var(--accent-blue); }
body:not(.sm-tool-colors) .tool-btn.tool-fill:hover { background: rgba(var(--accent-blue-rgb), 0.1); border-color: rgba(var(--accent-blue-rgb), 0.3); }
body:not(.sm-tool-colors) .tool-btn.tool-fill:hover .tool-btn-icon { color: var(--accent-blue); }
body:not(.sm-tool-colors) .tool-btn.tool-rotate:hover { background: rgba(var(--accent-blue-rgb), 0.1); border-color: rgba(var(--accent-blue-rgb), 0.3); }
body:not(.sm-tool-colors) .tool-btn.tool-rotate:hover .tool-btn-icon { color: var(--accent-blue); }
body:not(.sm-tool-colors) .tool-btn.tool-nest:hover { background: rgba(var(--accent-blue-rgb), 0.1); border-color: rgba(var(--accent-blue-rgb), 0.3); }
body:not(.sm-tool-colors) .tool-btn.tool-nest:hover .tool-btn-icon { color: var(--accent-blue); }
body:not(.sm-tool-colors) .tool-btn.tool-offset:hover { background: rgba(var(--accent-blue-rgb), 0.1); border-color: rgba(var(--accent-blue-rgb), 0.3); }
body:not(.sm-tool-colors) .tool-btn.tool-offset:hover .tool-btn-icon { color: var(--accent-blue); }
body:not(.sm-tool-colors) .tool-btn.tool-watch:hover { background: rgba(var(--accent-blue-rgb), 0.1); border-color: rgba(var(--accent-blue-rgb), 0.3); }
body:not(.sm-tool-colors) .tool-btn.tool-watch:hover .tool-btn-icon { color: var(--accent-blue); }
body:not(.sm-tool-colors) .tool-btn.tool-watch.watching { background: rgba(var(--accent-blue-rgb), 0.1); border-color: rgba(var(--accent-blue-rgb), 0.3); }
body:not(.sm-tool-colors) .tool-btn.tool-watch.watching .tool-btn-icon { color: var(--accent-blue); }
body:not(.sm-tool-colors) .tool-btn.tool-watch.watching::after { background: var(--accent-blue); }
body:not(.sm-tool-colors) .assembler-meta { color: var(--accent-blue); }
body:not(.sm-tool-colors) .yt-progress-fill { background: linear-gradient(90deg, var(--accent-blue), var(--accent-blue)); }
body:not(.sm-tool-colors) .bim-run-btn { border: 1px solid rgba(var(--accent-blue-rgb), 0.35); background: rgba(var(--accent-blue-rgb), 0.1); }
body:not(.sm-tool-colors) .bim-run-btn:hover { background: rgba(var(--accent-blue-rgb), 0.2); }
body:not(.sm-tool-colors) .bim-choice button.active { background: rgba(var(--accent-blue-rgb), 0.12); }
body:not(.sm-tool-colors) .mini-tool-btn:hover { border-color: var(--accent-blue); color: var(--accent-blue); }
body:not(.sm-tool-colors) #centerOnScreenBtn { color: var(--accent-blue); border-color: rgba(var(--accent-blue-rgb), 0.3); }
body:not(.sm-tool-colors) #centerOnScreenBtn:hover { background: rgba(var(--accent-blue-rgb), 0.12); }
body:not(.sm-tool-colors) .transform-reset-btn { color: var(--accent-blue); }
body:not(.sm-tool-colors) .sfx-card.previewing { border-color: var(--accent-blue); box-shadow: 0 0 0 1px var(--accent-blue), 0 0 10px rgba(var(--accent-blue-rgb), 0.35); }
body:not(.sm-tool-colors) .sfx-select-box.checked { background: var(--accent-blue); border-color: var(--accent-blue); }
body:not(.sm-tool-colors) .sfx-trim-icon { color: var(--accent-blue); }
body:not(.sm-tool-colors) .sfx-trim-icon:hover { background: var(--accent-blue); color: #fff; }
body:not(.sm-tool-colors) .sfx-trim-panel { background: rgba(var(--accent-blue-rgb), 0.05); }
body:not(.sm-tool-colors) .sfx-trim-range { border-left: 2px solid var(--accent-blue); border-right: 2px solid var(--accent-blue); }
body:not(.sm-tool-colors) .sfx-trim-handle::after { background: var(--accent-blue); box-shadow: 0 0 6px rgba(var(--accent-blue-rgb), 0.6); }
body:not(.sm-tool-colors) .sfx-trim-times span { color: var(--accent-blue); }
body:not(.sm-tool-colors) .sfx-trim-go { background: var(--accent-blue) !important; border-color: var(--accent-blue) !important; color: #fff !important; }
body:not(.sm-tool-colors) .sfx-stack-play:hover { color: var(--accent-blue); }
body:not(.sm-tool-colors) .labels-randomize-btn svg { color: var(--accent-blue); }
body:not(.sm-tool-colors) .transform-link-btn.active { border-color: var(--accent-blue); color: var(--accent-blue); background: rgba(var(--accent-blue-rgb), 0.1); }
body:not(.sm-tool-colors) .sil-file-card { background: linear-gradient(145deg, rgba(var(--accent-blue-rgb), 0.08), rgba(30, 30, 30, 0.4)); }
body:not(.sm-tool-colors) .sil-file-icon { color: var(--accent-blue); }
body:not(.sm-tool-colors) .sil-scan-button { background: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-blue) 100%); color: #fff; box-shadow: 0 8px 20px rgba(var(--accent-blue-rgb), 0.25); }
body:not(.sm-tool-colors) .sil-scan-button:hover { box-shadow: 0 10px 24px rgba(var(--accent-blue-rgb), 0.35); }
body:not(.sm-tool-colors) .sil-mode-button.active { border: 1.5px solid var(--accent-blue); background: linear-gradient(145deg, rgba(var(--accent-blue-rgb), 0.16), rgba(var(--accent-blue-rgb), 0.04)); box-shadow: 0 0 14px rgba(var(--accent-blue-rgb), 0.15); }
body:not(.sm-tool-colors) .sil-mode-button.active .sil-mode-subtitle { color: var(--accent-blue); }
body:not(.sm-tool-colors) .sil-sensitivity-labels .active { color: var(--accent-blue); }
body:not(.sm-tool-colors) .sil-slider::-webkit-slider-thumb { background: var(--accent-blue); border: 3px solid var(--accent-blue); box-shadow: 0 0 0 3px rgba(var(--accent-blue-rgb), 0.18), 0 0 10px rgba(var(--accent-blue-rgb), 0.4); }
body:not(.sm-tool-colors) .sil-glow-checkbox:checked { background: var(--accent-blue); border-color: var(--accent-blue); box-shadow: 0 0 0 3px rgba(var(--accent-blue-rgb), 0.18), 0 0 10px rgba(var(--accent-blue-rgb), 0.4); }
body:not(.sm-tool-colors) .sil-slider-value { color: var(--accent-blue); }
body:not(.sm-tool-colors) .sil-zoom-button:hover { border-color: var(--accent-blue); background: rgba(var(--accent-blue-rgb), 0.12); color: var(--accent-blue); }
body:not(.sm-tool-colors) .sil-num-input { color: var(--accent-blue); }
body:not(.sm-tool-colors) .ai-mode-button.active { border: 1.5px solid var(--accent-blue); background: linear-gradient(145deg, rgba(var(--accent-blue-rgb), 0.16), rgba(var(--accent-blue-rgb), 0.04)); box-shadow: 0 0 14px rgba(var(--accent-blue-rgb), 0.15); }
body:not(.sm-tool-colors) .ai-source-btn.active { border: 1.5px solid var(--accent-blue); background: rgba(var(--accent-blue-rgb), 0.12); }
body:not(.sm-tool-colors) .ai-file-card { background: linear-gradient(145deg, rgba(var(--accent-blue-rgb), 0.08), rgba(30, 30, 30, 0.4)); }
body:not(.sm-tool-colors) .ai-file-card-icon { color: var(--accent-blue); }
body:not(.sm-tool-colors) .ai-key-input:focus { border-color: var(--accent-blue); }
body:not(.sm-tool-colors) .ai-key-save-btn { background: var(--accent-blue); }
body:not(.sm-tool-colors) .ai-key-save-btn:hover { background: var(--accent-blue); }
body:not(.sm-tool-colors) .ai-key-help-toggle { color: var(--accent-blue); }
body:not(.sm-tool-colors) .ai-key-help-host { color: var(--accent-blue); }
body:not(.sm-tool-colors) .ai-select:focus { border-color: var(--accent-blue); }
body:not(.sm-tool-colors) .ai-cta-button { background: linear-gradient(135deg, var(--accent-blue), var(--accent-blue)); color: #fff; box-shadow: 0 10px 24px rgba(var(--accent-blue-rgb), 0.28); }
body:not(.sm-tool-colors) .ai-cta-button:hover:not(:disabled) { box-shadow: 0 12px 28px rgba(var(--accent-blue-rgb), 0.38); }
body:not(.sm-tool-colors) .ai-progress-fill { background: var(--accent-blue); }
body:not(.sm-tool-colors) .ai-summary { background: rgba(var(--accent-blue-rgb), 0.08); border: 1px solid rgba(var(--accent-blue-rgb), 0.25); }
body:not(.sm-tool-colors) .ai-summary-title { color: var(--accent-blue); }
body:not(.sm-tool-colors) .ai-scope-btn.active { border: 1.5px solid var(--accent-blue); background: rgba(var(--accent-blue-rgb), 0.14); }
body:not(.sm-tool-colors) .sil-detection-icon { background: linear-gradient(145deg, rgba(var(--accent-blue-rgb), 0.22), rgba(var(--accent-blue-rgb), 0.06)); color: var(--accent-blue); }
body:not(.sm-tool-colors) .sil-detection-saved { color: var(--accent-blue); }
body:not(.sm-tool-colors) .sil-action-button.active { border: 1.5px solid var(--accent-blue); background: linear-gradient(145deg, rgba(var(--accent-blue-rgb), 0.16), rgba(var(--accent-blue-rgb), 0.04)); }
body:not(.sm-tool-colors) .sil-action-icon { color: var(--accent-blue); }
body:not(.sm-tool-colors) .sil-cut-button { background: linear-gradient(135deg, var(--accent-blue), var(--accent-blue)); color: #fff; box-shadow: 0 10px 24px rgba(var(--accent-blue-rgb), 0.28); }
body:not(.sm-tool-colors) .sil-cut-button:hover:not(:disabled) { box-shadow: 0 12px 28px rgba(var(--accent-blue-rgb), 0.38); }
body:not(.sm-tool-colors) .sil-alt-head svg { color: var(--accent-blue); }
body:not(.sm-tool-colors) .search-highlight { outline: 2px solid var(--accent-blue); }
body:not(.sm-tool-colors) #contentSilence .offset-apply-btn { background: var(--accent-blue); }
body:not(.sm-tool-colors) #contentSilence .offset-apply-btn:hover { background: var(--accent-blue); }
body:not(.sm-tool-colors) .bim-ask { background: rgba(var(--accent-blue-rgb), 0.07); }
body:not(.sm-tool-colors) .bim-chip.on { background: rgba(var(--accent-blue-rgb), 0.14); }
body:not(.sm-tool-colors) .bim-placement { background: rgba(var(--accent-blue-rgb), 0.06); }
body:not(.sm-tool-colors) .bim-badge { border: 1px solid rgba(var(--accent-blue-rgb), 0.45); }
body:not(.sm-tool-colors) .yt-upd-icon { background: rgba(var(--accent-blue-rgb), 0.12); border: 1px solid rgba(var(--accent-blue-rgb), 0.35); }
/* Tutorial tab: the buyer's own "How To Use The Extension" videos (tool_tutorial_videos.js) */
.smtv { margin-bottom: 10px; }
#contentTutorial.smtv-has #tutorialEmpty { display: none !important; }
.smtv-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.smtv-head .smob-sec { margin: 6px 2px 7px; }
.smtv-link { padding: 0; border: none; background: none; font-size: 10.5px; color: var(--accent-blue); cursor: pointer; }
.smtv-link:hover { text-decoration: underline; }
.smtv-vid img { opacity: 0; }
.smtv-vid img.on { opacity: 0.6; }
.smtv-vid:hover img.on { opacity: 0.85; }
.smtv-vid { background: linear-gradient(145deg, rgba(var(--accent-blue-rgb), 0.18), var(--bg-tertiary)); }
.smtv-n { position: absolute; top: 9px; right: 9px; font-size: 9.5px; font-weight: 700; color: #fff; background: rgba(0, 0, 0, 0.55); border-radius: 6px; padding: 1px 6px; }
.smtv-find { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; border-radius: 12px; background: var(--bg-secondary); border: 1px solid var(--border-subtle); }
.smtv-find > div { display: flex; flex-direction: column; gap: 4px; }
.smtv-find b { font-size: 12px; color: var(--text-primary); }
.smtv-find small { font-size: 10.5px; line-height: 1.45; color: var(--text-muted); }
.smtv-find.busy { flex-direction: row; align-items: center; }
.smtv-spin { flex: none; width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(var(--accent-blue-rgb), 0.3); border-top-color: var(--accent-blue); animation: smcSpin 0.8s linear infinite; }

/* ================================
   CAPTIONS - new layout (tool_text_edit.js): Transcript / Captions / Style.
   body.sm-capnew shows it; the classic layout (.ai-app) is unchanged underneath.
   ================================ */
.capx, .capx-peekbar { display: none; }
body.sm-capnew #contentTranscribe { display: none; }
body.sm-capnew #contentTranscribe.active { display: flex; flex-direction: column; }
body.sm-capnew:not(.sm-cappeek) #contentTranscribe > .ai-app { display: none; }
body.sm-capnew:not(.sm-cappeek) #contentTranscribe > .capx { display: flex; }
body.sm-capnew.sm-cappeek #contentTranscribe > .capx-peekbar { display: block; }
body.sm-capnew #contentTranscribe > .ai-app { flex: 1; min-height: 0; height: auto; }
.capx { position: relative; flex: 1; min-height: 0; flex-direction: column; }
.capx-peekbar { flex: none; margin-bottom: 8px; }
.capx-peekbar button { display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: 999px; border: 1px solid rgba(var(--accent-blue-rgb), 0.6); background: rgba(var(--accent-blue-rgb), 0.12); color: var(--text-primary); font-size: 11px; cursor: pointer; }
.capx-peekbar svg { width: 13px; height: 13px; }
.capx-tabs { flex: none; display: flex; gap: 16px; border-bottom: 1px solid var(--border-subtle); padding: 0 2px; }
.capx-tabs button { padding: 4px 0 8px; border: none; border-bottom: 2px solid transparent; background: none; color: var(--text-muted); font-size: 12.5px; cursor: pointer; }
.capx-tabs button.on { color: var(--text-primary); border-bottom-color: var(--text-primary); }
.capx-pane { display: none; flex: 1; min-height: 0; flex-direction: column; }
.capx-pane.on { display: flex; }
.capx-tb { flex: none; display: flex; align-items: center; gap: 6px; padding: 8px 0; }
.capx-search { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; padding: 6px 9px; border-radius: 8px; background: var(--bg-secondary); border: 1px solid var(--border-subtle); color: var(--text-muted); }
.capx-search svg { width: 13px; height: 13px; flex: none; }
.capx-search input { flex: 1; min-width: 0; border: none; background: none; outline: none; color: var(--text-primary); font-size: 11.5px; }
.capx-ib { flex: none; width: 28px; height: 28px; border-radius: 7px; border: none; background: none; color: var(--text-secondary); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.capx-ib:hover, .capx-ib.on { background: var(--bg-tertiary); color: var(--text-primary); }
.capx-ib svg { width: 15px; height: 15px; }
.capx-body { flex: 1; min-height: 0; overflow-y: auto; padding: 2px 2px 10px; -webkit-user-select: text; user-select: text; }
.capx-blk { display: grid; grid-template-columns: 54px 1fr; gap: 8px; margin: 6px 0 14px; }
.capx-tc { align-self: start; display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px; border: none; border-radius: 5px; background: none; color: var(--text-muted); font-size: 10px; font-variant-numeric: tabular-nums; cursor: pointer; -webkit-user-select: none; user-select: none; }
.capx-tc:hover { background: var(--bg-tertiary); color: var(--accent-blue); }
.capx-tc svg { width: 9px; height: 9px; }
.capx-tx { font-size: 12.5px; line-height: 1.65; color: var(--text-primary); }
.capx-w, .capx-gap { border-radius: 3px; cursor: text; }
.capx-w.unsure { text-decoration: underline dotted var(--text-muted); text-underline-offset: 3px; }
.capx-gap { color: var(--text-muted); font-size: 11px; }
.capx-gap.hide { display: none; }
.capx-w.del, .capx-gap.del { color: var(--text-muted); text-decoration: line-through; text-decoration-color: var(--accent-red); background: rgba(255, 69, 58, 0.14); cursor: pointer; }
.capx-w.hit { background: rgba(var(--accent-blue-rgb), 0.3); }
.capx-body ::selection { background: rgba(var(--accent-blue-rgb), 0.4); }
.capx-fix { font: inherit; font-size: 12.5px; padding: 0 3px; border-radius: 4px; border: 1px solid var(--accent-blue); background: var(--bg-primary); color: var(--text-primary); outline: none; }
.capx-progress { font-size: 10.5px; color: var(--text-muted); margin: 4px 0 10px; }
.capx-skel { display: flex; flex-direction: column; gap: 7px; margin: 8px 0 18px 62px; }
.capx-skel i { height: 11px; border-radius: 6px; background: linear-gradient(90deg, var(--bg-tertiary), var(--bg-hover), var(--bg-tertiary)); background-size: 200% 100%; animation: capxShimmer 1.4s linear infinite; }
@keyframes capxShimmer { to { background-position: -200% 0; } }
.capx-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 28px 8px; }
.capx-empty-h { font-size: 15px; font-weight: 700; color: var(--text-primary); }
.capx-empty-p { margin-bottom: 8px; font-size: 11px; line-height: 1.5; color: var(--text-muted); max-width: 260px; }
.capx-pb, .capx-ob { width: 100%; max-width: 250px; padding: 9px 12px; border-radius: 999px; font-size: 12px; cursor: pointer; }
.capx-pb { border: none; background: var(--accent-blue); color: #fff; font-weight: 600; }
.capx-ob { border: 1.5px solid var(--border-medium); background: none; color: var(--text-primary); }
.capx-ob:hover { border-color: var(--accent-blue); }
.capx-opts { width: 100%; max-width: 260px; margin-top: 8px; padding: 8px 10px; border-radius: 10px; background: var(--bg-secondary); display: flex; flex-direction: column; gap: 6px; }
.capx-opt { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 10.5px; color: var(--text-muted); }
.capx-opt select { max-width: 62%; padding: 4px 6px; border-radius: 6px; background: var(--bg-primary); border: 1px solid var(--border-subtle); color: var(--text-primary); font-size: 10.5px; }
.capx-empty-note { font-size: 10px; color: var(--text-muted); }
.capx-apply { flex: none; display: flex; align-items: center; gap: 6px; padding: 9px 10px; margin-top: 4px; border-radius: 11px; background: var(--bg-secondary); border: 1px solid rgba(var(--accent-blue-rgb), 0.55); box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.3); }
.capx-apply[hidden] { display: none; }
.capx-ab-t { flex: 1; min-width: 0; font-size: 10.5px; color: var(--text-muted); line-height: 1.3; }
.capx-ab-t b { display: block; font-size: 12px; color: var(--text-primary); }
.capx-ab-x { flex: none; padding: 6px 8px; border: none; background: none; color: var(--text-secondary); font-size: 11px; cursor: pointer; border-radius: 7px; }
.capx-ab-x:hover { background: var(--bg-tertiary); }
.capx-ab-go { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border: none; border-radius: 9px; background: var(--accent-blue); color: #fff; font-size: 11.5px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.capx-ab-go svg { width: 13px; height: 13px; }
.capx-ab-go:disabled { opacity: 0.6; cursor: default; }
.capx-menu, .capx-ctx { position: absolute; z-index: 50; min-width: 190px; padding: 5px; border-radius: 9px; background: var(--bg-primary); border: 1px solid var(--border-medium); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55); }
.capx-menu { right: 0; top: 70px; }
.capx-menu[hidden], .capx-ctx[hidden] { display: none; }
.capx-menu button, .capx-ctx button { display: flex; justify-content: space-between; gap: 12px; width: 100%; padding: 7px 9px; border: none; border-radius: 6px; background: none; color: var(--text-primary); font-size: 11.5px; text-align: left; cursor: pointer; }
.capx-menu button:hover, .capx-ctx button:hover { background: var(--bg-tertiary); }
.capx-ctx i { font-style: normal; color: var(--text-muted); font-size: 10.5px; }
.capx-menu hr { border: 0; border-top: 1px solid var(--border-subtle); margin: 4px 2px; }
.capx-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 10px 2px 16px; }
.capx-h { font-size: 14px; font-weight: 700; color: var(--text-primary); }
.capx-sub { margin: 3px 0 10px; font-size: 10.5px; line-height: 1.45; color: var(--text-muted); }
.capx-sub a { color: var(--accent-blue); }
.capx-cta { width: 100%; margin-top: 10px; padding: 10px; border-radius: 10px; border: 1px solid rgba(var(--accent-blue-rgb), 0.6); background: rgba(var(--accent-blue-rgb), 0.12); color: var(--text-primary); font-size: 12px; font-weight: 600; cursor: pointer; }
.capx-hint { flex: none; margin: 0 0 8px; padding: 7px 10px; border-radius: 8px; background: rgba(var(--accent-blue-rgb), 0.1); border: 1px solid rgba(var(--accent-blue-rgb), 0.3); font-size: 10.5px; line-height: 1.45; color: var(--text-secondary); }
.capx-hint[hidden] { display: none; }
.capx-hint b { color: var(--text-primary); }
/* new Captions layout - v2: highlight, dropdowns, Captions + Style screens */
.capx-body { -webkit-user-select: none; user-select: none; }
.capx-w.sel, .capx-gap.sel { background: rgba(var(--accent-blue-rgb), 0.38); color: var(--text-primary); box-shadow: 0 0 0 1px rgba(var(--accent-blue-rgb), 0.35); }
.capx-w.del.sel, .capx-gap.del.sel { background: rgba(var(--accent-blue-rgb), 0.3); }
.capx-w, .capx-gap { cursor: pointer; padding: 1px 0; }
.capx-w:hover:not(.sel):not(.del) { background: var(--bg-tertiary); }
.capx-dd { position: relative; min-width: 0; }
.capx-dd-btn { display: flex; align-items: center; justify-content: space-between; gap: 6px; width: 100%; min-width: 120px; padding: 6px 9px; border-radius: 8px; border: 1px solid var(--border-medium); background: var(--bg-primary); color: var(--text-primary); font-size: 11px; cursor: pointer; text-align: left; }
.capx-dd-btn span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.capx-dd-btn svg { width: 12px; height: 12px; flex: none; color: var(--text-muted); transition: transform 0.15s; }
.capx-dd.open .capx-dd-btn { border-color: var(--accent-blue); }
.capx-dd.open .capx-dd-btn svg { transform: rotate(180deg); }
.capx-dd-list { position: absolute; z-index: 60; left: 0; right: 0; top: calc(100% + 4px); max-height: 220px; overflow-y: auto; padding: 4px; border-radius: 9px; background: var(--bg-secondary); border: 1px solid var(--border-medium); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.55); }
.capx-dd-list[hidden] { display: none; }
.capx-dd-list button { display: flex; align-items: center; justify-content: space-between; gap: 6px; width: 100%; padding: 6px 8px; border: none; border-radius: 6px; background: none; color: var(--text-primary); font-size: 11px; text-align: left; cursor: pointer; }
.capx-dd-list button:hover { background: var(--bg-tertiary); }
.capx-dd-list button.on { color: var(--accent-blue); }
.capx-dd-list svg { width: 12px; height: 12px; flex: none; }
.capx-opt .capx-dd { flex: 1; max-width: 62%; }
.capx-opt .capx-dd-btn { min-width: 0; }
.capx-seg { display: flex; gap: 2px; padding: 2px; border-radius: 9px; background: var(--bg-primary); border: 1px solid var(--border-subtle); }
.capx-seg button { flex: 1; min-width: 0; padding: 6px 4px; border: none; border-radius: 7px; background: none; color: var(--text-muted); font-size: 10.5px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.capx-seg button.on { background: var(--accent-blue); color: #fff; font-weight: 600; }
.capx-fl { display: flex; justify-content: space-between; align-items: baseline; margin: 12px 0 5px; font-size: 10.5px; color: var(--text-muted); }
.capx-fl a { color: var(--accent-blue); text-decoration: none; }
.capx-styles { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 6px; scroll-snap-type: x proximity; }
.capx-styles::-webkit-scrollbar { height: 4px; }
.capx-styles::-webkit-scrollbar-thumb { background: var(--border-medium); border-radius: 4px; }
.capx-stc { flex: none; width: 92px; padding: 0; border-radius: 10px; overflow: hidden; border: 1.5px solid var(--border-subtle); background: #0b0b0b; cursor: pointer; scroll-snap-align: start; text-align: center; }
.capx-stc img { display: block; width: 100%; height: 56px; object-fit: contain; opacity: 0; transition: opacity 0.2s; background: radial-gradient(circle at 50% 40%, #2a2a2a, #0b0b0b 75%); }
.capx-stc img.on { opacity: 1; }
.capx-stc span { display: block; padding: 4px 5px 5px; font-size: 9.5px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: var(--bg-secondary); }
.capx-stc.on { border-color: var(--accent-blue); box-shadow: 0 0 0 2px rgba(var(--accent-blue-rgb), 0.3); }
.capx-stc.on span { color: var(--text-primary); }
.capx-loading { font-size: 10.5px; color: var(--text-muted); padding: 14px 4px; }
.capx-row2 { display: flex; gap: 8px; }
.capx-row2 > * { flex: 1; min-width: 0; }
.capx-num { width: 100%; box-sizing: border-box; padding: 6px 9px; border-radius: 8px; border: 1px solid var(--border-medium); background: var(--bg-primary); color: var(--text-primary); font-size: 11.5px; outline: none; }
.capx-num:focus { border-color: var(--accent-blue); }
.capx-check { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 11px; color: var(--text-secondary); cursor: pointer; }
.capx-check input { accent-color: var(--accent-blue); }
.capx-last { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; padding: 7px 9px; border-radius: 8px; background: var(--bg-secondary); font-size: 10.5px; color: var(--text-muted); }
.capx-last[hidden] { display: none; }
.capx-last button { flex: none; padding: 4px 9px; border-radius: 999px; border: 1px solid rgba(255, 69, 58, 0.5); background: none; color: var(--accent-red); font-size: 10.5px; cursor: pointer; }
.capx-create { width: 100%; margin-top: 14px; padding: 11px; border: none; border-radius: 999px; background: var(--accent-blue); color: #fff; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.capx-create:disabled { opacity: 0.5; cursor: default; }
.capx-status { min-height: 14px; margin-top: 6px; font-size: 10.5px; color: var(--text-muted); text-align: center; }
.capx-stage { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: radial-gradient(circle at 50% 40%, #2b2b2b, #0e0e0e 75%); border: 1px solid var(--border-subtle); }
.capx-stage-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; }
.capx-stage.has .capx-stage-bg { display: block; }
.capx-stage.has .capx-stage-empty { display: none; }
.capx-stage-ov { position: absolute; left: 50%; transform: translate(-50%, -50%); opacity: 0; pointer-events: none; }
.capx-stage-ov.on { opacity: 1; }
.capx-stage-empty { position: absolute; left: 10px; right: 10px; bottom: 8px; font-size: 10px; color: var(--text-muted); text-align: center; }
.capx-stnav { display: flex; align-items: center; gap: 6px; margin: 10px 0 6px; }
.capx-stnav > div { flex: 1; min-width: 0; text-align: center; }
.capx-stnav b { display: block; font-size: 12px; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.capx-stnav small { font-size: 10px; color: var(--text-muted); }
.capx-stnav .capx-ib { border: 1px solid var(--border-medium); }
.capx-sl { display: grid; grid-template-columns: 44px 1fr 48px auto; align-items: center; gap: 8px; margin: 8px 0; font-size: 10.5px; color: var(--text-muted); }
.capx-sl input { width: 100%; accent-color: var(--accent-blue); }
.capx-sl b { font-weight: 500; color: var(--text-primary); text-align: right; }
.capx-sl button { padding: 3px 8px; border-radius: 999px; border: 1px solid var(--border-medium); background: none; color: var(--text-secondary); font-size: 10px; cursor: pointer; }
.capx-style .capx-row2 { margin: 12px 0 8px; }
.capx-style .capx-ob { max-width: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 10px; font-size: 11px; }
.capx-style .capx-ob svg { width: 13px; height: 13px; }
/* new Captions layout - v3: pill tabs, bold transcript, one Caption styling page */
.capx-tabs { gap: 6px; border-bottom: none; padding: 2px; margin-bottom: 4px; border-radius: 999px; background: var(--bg-secondary); border: 1px solid var(--border-subtle); }
.capx-tabs button { flex: 1; padding: 9px 10px; border: none; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--text-muted); transition: background 0.15s, color 0.15s; }
.capx-tabs button:hover { color: var(--text-primary); }
.capx-tabs button.on { background: var(--accent-blue); color: #fff; border-bottom: none; box-shadow: 0 4px 14px rgba(var(--accent-blue-rgb), 0.35); }
.capx-search { padding: 8px 11px; border-radius: 10px; }
.capx-search input { font-size: 12.5px; }
.capx-ib { width: 32px; height: 32px; border-radius: 9px; }
.capx-ib svg { width: 16px; height: 16px; }
.capx-blk { grid-template-columns: 58px 1fr; gap: 10px; margin: 4px 0 20px; }
.capx-tc { font-size: 11px; font-weight: 600; padding: 3px 6px; }
.capx-tx { font-size: 14.5px; line-height: 1.75; font-weight: 500; letter-spacing: 0.005em; }
.capx-gap { font-size: 12px; }
.capx-replace { flex: none; display: flex; align-items: center; gap: 6px; margin: -2px 0 8px; }
.capx-replace[hidden] { display: none; }
.capx-replace input { flex: 1; min-width: 0; padding: 8px 11px; border-radius: 10px; border: 1px solid var(--border-subtle); background: var(--bg-secondary); color: var(--text-primary); font-size: 12px; outline: none; }
.capx-replace input:focus { border-color: var(--accent-blue); }
.capx-replace button[data-a="replall"] { flex: none; padding: 8px 12px; border: none; border-radius: 10px; background: var(--accent-blue); color: #fff; font-size: 11.5px; font-weight: 600; cursor: pointer; }
.capx-x { flex: none; width: 28px; height: 28px; border: none; border-radius: 8px; background: none; color: var(--text-muted); font-size: 16px; cursor: pointer; }
.capx-x:hover { background: var(--bg-tertiary); color: var(--text-primary); }
/* sleek sliders */
.capx-slider { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
.capx-slider input[type="range"] { flex: 1; min-width: 0; -webkit-appearance: none; appearance: none; height: 5px; border-radius: 5px; outline: none; cursor: pointer;
    background: linear-gradient(to right, var(--accent-blue) 0%, var(--accent-blue) var(--fill, 50%), var(--bg-tertiary) var(--fill, 50%), var(--bg-tertiary) 100%); }
.capx-slider input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 3px solid var(--accent-blue); box-shadow: 0 0 0 3px rgba(var(--accent-blue-rgb), 0.18), 0 2px 6px rgba(0, 0, 0, 0.4); }
.capx-slider b { flex: none; min-width: 50px; text-align: right; font-size: 11.5px; font-weight: 600; color: var(--text-primary); font-variant-numeric: tabular-nums; }
/* caption styling page */
.capx-caps { padding-top: 8px; }
.capx-stagewrap { display: flex; justify-content: center; }
.capx-stage { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: radial-gradient(circle at 50% 40%, #2b2b2b, #0e0e0e 75%) center / cover no-repeat; border: 1px solid var(--border-medium); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); }
.capx-stage.has { background-size: cover; background-position: center; }
.capx-stage-ov { position: absolute; left: 50%; transform: translate(-50%, -50%); opacity: 0; pointer-events: none; transition: opacity 0.15s; }
.capx-stage-ov.on { opacity: 1; }
.capx-grab { position: absolute; top: 8px; right: 8px; display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border: none; border-radius: 999px; background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 10.5px; font-weight: 600; cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.capx-grab svg { width: 13px; height: 13px; }
.capx-grab:hover { background: var(--accent-blue); }
.capx-grab.busy { opacity: 0.6; }
.capx-stage-empty { position: absolute; left: 10px; right: 10px; bottom: 10px; font-size: 10.5px; color: var(--text-muted); text-align: center; }
.capx-stage.has .capx-stage-empty { display: none; }
.capx-stnav { margin: 12px 0 8px; }
.capx-stnav b { font-size: 13.5px; font-weight: 700; }
.capx-styles { margin-bottom: 10px; }
.capx-stc { width: 100px; border-radius: 12px; }
.capx-stc img { height: 62px; }
.capx-sec { margin: 16px 2px 7px; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.capx-card { display: flex; flex-direction: column; gap: 12px; padding: 12px; border-radius: 14px; background: var(--bg-secondary); border: 1px solid var(--border-subtle); }
.capx-row { display: flex; align-items: center; gap: 10px; }
.capx-row > span, .capx-col > span { flex: none; font-size: 11.5px; color: var(--text-secondary); }
.capx-row > span { width: 88px; }
.capx-row .capx-dd { flex: 1; }
.capx-col { display: flex; flex-direction: column; gap: 7px; }
.capx-mini { flex: none; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border-medium); background: none; color: var(--text-secondary); font-size: 10.5px; cursor: pointer; }
.capx-mini:hover { border-color: var(--accent-blue); color: var(--text-primary); }
.capx-seg { border-radius: 10px; }
.capx-seg button { padding: 8px 4px; font-size: 11px; border-radius: 8px; }
.capx-check { margin: 0; font-size: 12px; color: var(--text-primary); gap: 10px; }
.capx-check .sil-glow-checkbox:checked { background: #fff; border-color: var(--accent-blue); box-shadow: 0 0 0 3px rgba(var(--accent-blue-rgb), 0.18), 0 0 10px rgba(var(--accent-blue-rgb), 0.4); }
.capx-create { margin-top: 18px; padding: 13px; font-size: 13.5px; box-shadow: 0 8px 22px rgba(var(--accent-blue-rgb), 0.35); }
.capx-last { margin-top: 0; }
.capx-row > span { width: 74px; }
.capx-slider b { min-width: 44px; }
/* tab cards: pin to top (tool_tab_cards.js) - only in the cards look */
.smtc-pin { display: none; }
body.sm-tabcards .tab-bar .tab-btn .smtc-pin { display: flex; position: absolute; top: 8px; left: 8px; width: 22px; height: 22px; border-radius: 7px; align-items: center; justify-content: center; color: var(--text-muted); opacity: 0; transition: opacity 0.15s, background 0.15s; }
body.sm-tabcards .tab-bar .tab-btn .smtc-pin svg { width: 13px; height: 13px; padding: 0; margin: 0; background: none; border-radius: 0; box-sizing: border-box; }
body.sm-tabcards .tab-bar .tab-btn:hover .smtc-pin { opacity: 1; }
body.sm-tabcards .tab-bar .tab-btn .smtc-pin:hover { background: var(--bg-primary); color: var(--text-primary); }
body.sm-tabcards .tab-bar .tab-btn.smtc-pinned .smtc-pin { opacity: 1; color: var(--accent-blue); }
body.sm-tabcards .tab-bar .tab-btn.smtc-pinned .smtc-pin svg { fill: currentColor; }
/* Caption styling: a big, searchable grid of styles (was a thin scroll row) */
.capx-sec-row { display: flex; justify-content: space-between; align-items: baseline; }
.capx-sec-row b { margin-left: 4px; padding: 1px 7px; border-radius: 999px; background: var(--bg-tertiary); color: var(--text-secondary); font-size: 9.5px; letter-spacing: 0; }
.capx-stylebox { padding: 10px; border-radius: 14px; background: var(--bg-secondary); border: 1px solid var(--border-subtle); }
.capx-stsearch { margin-bottom: 10px; background: var(--bg-primary); }
.capx-styles { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; max-height: 330px; overflow-y: auto; overflow-x: hidden; padding: 2px 6px 2px 2px; margin: 0; scroll-snap-type: none; }
.capx-styles::-webkit-scrollbar { width: 6px; height: 6px; }
.capx-styles::-webkit-scrollbar-thumb { background: var(--border-medium); border-radius: 6px; }
.capx-stc { width: auto; border-radius: 12px; }
.capx-stc img { height: 76px; }
.capx-stc span { font-size: 10.5px; padding: 6px 6px 7px; }
.capx-stc:hover { border-color: var(--border-medium); transform: translateY(-1px); transition: transform 0.12s; }
/* caption studio: drag-to-place, guides, safe zones, emphasis words */
.capx-stage { cursor: crosshair; -webkit-user-select: none; user-select: none; }
.capx-stage-ov { pointer-events: none; outline: 1.5px dashed transparent; outline-offset: 4px; border-radius: 4px; transition: opacity 0.15s, outline-color 0.15s; }
.capx-stage:hover .capx-stage-ov, .capx-stage.dragging .capx-stage-ov { outline-color: rgba(255, 255, 255, 0.55); }
.capx-stage.dragging { cursor: grabbing; }
.capx-vguide, .capx-hguide { position: absolute; z-index: 2; pointer-events: none; opacity: 0; background: var(--accent-blue); box-shadow: 0 0 6px var(--accent-blue); transition: opacity 0.1s; }
.capx-vguide { left: 50%; top: 0; bottom: 0; width: 1px; }
.capx-hguide { top: 50%; left: 0; right: 0; height: 1px; }
.capx-vguide.on, .capx-hguide.on { opacity: 0.9; }
.capx-safe { position: absolute; inset: 0; z-index: 1; pointer-events: none; display: none; }
.capx-stage.safe .capx-safe { display: block; }
.capx-safe .ts { position: absolute; left: 10%; right: 10%; top: 10%; bottom: 28%; border: 1.5px dashed rgba(10, 132, 255, 0.85); border-radius: 4px; }
.capx-safe .ui { position: absolute; left: 0; right: 0; bottom: 0; height: 28%; background: rgba(10, 132, 255, 0.18); border-top: 1.5px solid rgba(10, 132, 255, 0.85); }
.capx-stage:not(.tall) .capx-safe .ts { left: 10%; right: 10%; top: 10%; bottom: 10%; }
.capx-stage:not(.tall) .capx-safe .ui { display: none; }
.capx-safe b, .capx-safe u { position: absolute; font-size: 9px; font-weight: 700; text-decoration: none; color: #fff; background: rgba(10, 132, 255, 0.85); padding: 1px 5px; border-radius: 4px; }
.capx-safe b { left: 11%; top: 11%; }
.capx-safe u { left: 50%; bottom: calc(28% - 9px); transform: translateX(-50%); white-space: nowrap; }
.capx-stage:not(.tall) .capx-safe u { display: none; }
.capx-safebtn { position: absolute; top: 8px; left: 8px; z-index: 3; padding: 6px 10px; border: none; border-radius: 999px; background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 10.5px; font-weight: 600; cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.capx-safebtn.on { background: var(--accent-blue); }
.capx-grab { z-index: 3; }
.capx-draghint { position: absolute; left: 50%; bottom: 8px; z-index: 3; transform: translateX(-50%); padding: 4px 10px; border-radius: 999px; background: rgba(0, 0, 0, 0.55); color: rgba(255, 255, 255, 0.85); font-size: 9.5px; pointer-events: none; opacity: 0; transition: opacity 0.2s; white-space: nowrap; }
.capx-stage.has:hover .capx-draghint { opacity: 1; }
.capx-stage.dragging .capx-draghint { opacity: 0; }
.capx-w.emph { color: #ffcf4a; font-weight: 700; text-decoration: underline; text-decoration-color: rgba(255, 207, 74, 0.6); text-underline-offset: 4px; }
.capx-emph-p { font-size: 11px; line-height: 1.5; color: var(--text-secondary); }
.capx-emph-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.capx-emph-btns .capx-mini:first-child { background: rgba(var(--accent-blue-rgb), 0.15); border-color: rgba(var(--accent-blue-rgb), 0.6); color: var(--text-primary); }
/* caption studio: Premiere-style transform box on the preview */
.capx-tbox { position: absolute; z-index: 2; transform: translate(-50%, -50%); min-height: 18px; cursor: move; }
.capx-tbox .capx-stage-ov { position: static; display: block; width: 100%; transform: none; left: auto; top: auto; outline: none; }
.capx-tbox::before { content: ''; position: absolute; inset: -4px; border: 1px solid rgba(255, 255, 255, 0.85); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35); pointer-events: none; opacity: 0.55; transition: opacity 0.15s; }
.capx-stage:hover .capx-tbox::before, .capx-stage.dragging .capx-tbox::before { opacity: 1; }
.capx-tbox i { position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; background: #fff; border: 1.5px solid var(--accent-blue); border-radius: 2px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); opacity: 0.75; transition: opacity 0.15s, transform 0.1s; }
.capx-stage:hover .capx-tbox i, .capx-stage.dragging .capx-tbox i { opacity: 1; }
.capx-tbox i:hover { transform: scale(1.3); }
.capx-tbox i[data-h="nw"] { left: -4px; top: -4px; cursor: nwse-resize; }
.capx-tbox i[data-h="n"] { left: 50%; top: -4px; cursor: ns-resize; }
.capx-tbox i[data-h="ne"] { left: calc(100% + 4px); top: -4px; cursor: nesw-resize; }
.capx-tbox i[data-h="e"] { left: calc(100% + 4px); top: 50%; cursor: ew-resize; }
.capx-tbox i[data-h="se"] { left: calc(100% + 4px); top: calc(100% + 4px); cursor: nwse-resize; }
.capx-tbox i[data-h="s"] { left: 50%; top: calc(100% + 4px); cursor: ns-resize; }
.capx-tbox i[data-h="sw"] { left: -4px; top: calc(100% + 4px); cursor: nesw-resize; }
.capx-tbox i[data-h="w"] { left: -4px; top: 50%; cursor: ew-resize; }
.capx-stage.moving, .capx-stage.moving .capx-tbox { cursor: grabbing; }
.capx-tread { position: absolute; left: 50%; top: 44px; z-index: 4; transform: translateX(-50%); padding: 4px 10px; border-radius: 999px; background: var(--accent-blue); color: #fff; font-size: 10.5px; font-weight: 700; pointer-events: none; opacity: 0; transition: opacity 0.2s; white-space: nowrap; }
.capx-tread.on { opacity: 1; }
.capx-tbar { display: flex; gap: 6px; justify-content: center; margin: 10px 0 2px; }
.capx-tbar button { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border-medium); background: var(--bg-secondary); color: var(--text-secondary); font-size: 10.5px; font-weight: 600; cursor: pointer; }
.capx-tbar button:hover { border-color: var(--accent-blue); color: var(--text-primary); }
.capx-tbox::before { display: none; }
.capx-tbox { pointer-events: none; }
.capx-tframe { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: auto; cursor: move; }
.capx-tframe::before { content: ''; position: absolute; inset: -4px; border: 1px solid rgba(255, 255, 255, 0.85); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35); pointer-events: none; opacity: 0.55; transition: opacity 0.15s; }
.capx-stage:hover .capx-tframe::before, .capx-stage.dragging .capx-tframe::before { opacity: 1; }
/* caption styling: buttons on the preview, six styles per page */
.capx-stage .capx-tbar { position: absolute; left: 0; right: 0; bottom: 10px; z-index: 3; margin: 0; gap: 6px; justify-content: center; }
.capx-stage .capx-tbar button { padding: 6px 11px; border: none; background: rgba(0, 0, 0, 0.6); color: #fff; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); }
.capx-stage .capx-tbar button:hover { background: var(--accent-blue); color: #fff; }
.capx-stage .capx-draghint { bottom: 46px; }
.capx-stage-empty { bottom: 48px; }
.capx-pager { display: flex; align-items: center; gap: 6px; margin-top: 12px; }
.capx-pgbtn { flex: none; width: 28px; height: 56px; padding: 0; border-radius: 10px; border: 1px solid var(--border-medium); background: var(--bg-secondary); color: var(--text-secondary); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.capx-pgbtn:hover { border-color: var(--accent-blue); color: var(--text-primary); }
.capx-pgbtn svg { width: 15px; height: 15px; }
.capx-styles6 { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.capx-styles6 .capx-stc { width: auto; border-radius: 9px; }
.capx-styles6 .capx-stc img { height: 40px; }
.capx-styles6 .capx-stc span { font-size: 9px; padding: 4px 4px 5px; }
.capx-pagefoot { display: flex; align-items: center; gap: 8px; margin: 8px 34px 0; }
.capx-stsearch2 { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 999px; background: var(--bg-secondary); border: 1px solid var(--border-subtle); color: var(--text-muted); }
.capx-stsearch2 svg { width: 12px; height: 12px; flex: none; }
.capx-stsearch2 input { flex: 1; min-width: 0; border: none; background: none; outline: none; color: var(--text-primary); font-size: 10.5px; }
.capx-pageno { flex: none; font-size: 10px; font-weight: 600; color: var(--text-muted); font-variant-numeric: tabular-nums; }

.smtv-look { margin: 0 0 12px; padding: 10px 12px; border-radius: 12px; background: rgba(var(--accent-blue-rgb), 0.1); border: 1px solid rgba(var(--accent-blue-rgb), 0.35); font-size: 11px; line-height: 1.45; color: var(--text-secondary); }
.smtv-look b { color: var(--text-primary); }
.smtv-look div { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 5px; }
.smtv-look small { font-size: 10px; color: var(--text-muted); }
/* activation card (tool_activation.js) - the same look as the web claim page */
.smu-overlay.smact-overlay { z-index: 10000; }   /* above the sidebar (9999); steps aside for the confirm box */
body.smact-open.locked-down #searchInput { visibility: hidden; transition: none; }   /* the red licence bar: back if the card is closed */
.smu-overlay .smact { position: relative; width: 360px; padding: 22px 22px 18px; }
.smact-x { position: absolute; top: 10px; right: 12px; border: none; background: none; color: var(--text-muted); font-size: 18px; cursor: pointer; }
.smact-why { margin: -4px 0 10px; padding: 8px 10px; border-radius: 8px; background: rgba(255, 80, 80, 0.1); color: var(--accent-red); font-size: 11px; line-height: 1.4; }
.smact-h { font-size: 17px; font-weight: 700; color: var(--text-primary); margin-bottom: 12px; }
.smact-p { font-size: 12px; line-height: 1.5; color: var(--text-secondary); margin: 10px 0 4px; }
.smact-p b { color: var(--text-primary); }
.smact-seg { display: flex; padding: 2px; border-radius: 999px; background: var(--bg-primary); border: 1px solid var(--border-subtle); }
.smact-seg button { flex: 1; padding: 8px 6px; border: none; border-radius: 999px; background: none; color: var(--text-muted); font-size: 11.5px; font-weight: 600; cursor: pointer; }
.smact-seg button.on { background: var(--accent-blue); color: #fff; }
.smact label { display: block; margin: 12px 0 5px; font-size: 11px; color: var(--text-muted); }
.smact input { width: 100%; box-sizing: border-box; padding: 11px 12px; border-radius: 10px; border: 1px solid var(--border-medium); background: var(--bg-primary); color: var(--text-primary); font-size: 13px; outline: none; }
.smact input:focus { border-color: var(--accent-blue); }
.smact-hint { margin-top: 8px; font-size: 10.5px; line-height: 1.45; color: var(--text-muted); }
.smact-go { width: 100%; margin-top: 16px; padding: 12px; border: none; border-radius: 999px; background: var(--accent-blue); color: #fff; font-size: 13.5px; font-weight: 700; cursor: pointer; }
.smact-go:disabled { opacity: 0.6; cursor: default; }
.smact-msg { margin-top: 10px; font-size: 11.5px; line-height: 1.45; color: var(--text-secondary); }
.smact-msg.err { color: var(--accent-red); }
.smact-foot { margin-top: 14px; font-size: 10.5px; color: var(--text-muted); text-align: center; }
.smact-ok { width: 46px; height: 46px; margin: 0 auto 10px; border-radius: 50%; background: var(--accent-green); color: #fff; font-size: 24px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.smact .smact-ok + .smact-h { text-align: center; }
.smact-key { margin: 12px 0 8px; padding: 13px; border-radius: 12px; border: 1px dashed var(--accent-blue); background: var(--bg-primary); font: 700 16px/1.3 Menlo, Consolas, monospace; letter-spacing: 0.04em; text-align: center; color: var(--text-primary); -webkit-user-select: all; user-select: all; }
.smact-mini { display: block; margin: 0 auto; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--border-medium); background: none; color: var(--text-secondary); font-size: 11px; cursor: pointer; }
/* Theme + Settings always on screen (1.9.40): pinned to the bottom of the sidebar, the tabs scroll behind them */
.tab-bar #settingsBtn, .tab-bar #themeSwitchBtn { position: sticky; z-index: 3; background-color: var(--bg-secondary); box-shadow: 0 0 0 9px var(--bg-secondary); }
.tab-bar #settingsBtn { bottom: -10px; }
.tab-bar #themeSwitchBtn { bottom: 30px; border-top-color: transparent; }
.tab-bar #themeSwitchBtn::before { content: ''; position: absolute; left: -9px; right: -9px; top: -9px; height: 1px; background: var(--border-subtle); pointer-events: none; }
.tab-bar #settingsBtn:hover, .tab-bar #themeSwitchBtn:hover { background-color: var(--bg-hover); }
.tab-bar .tab-bar-scroll-hint { bottom: 68px; }   /* the "more tabs" arrow sits just above them */

/* the tab pins belong to the big-cards look only (the classic list's '.tab-btn span' rule was showing them) */
body:not(.sm-tabcards) .tab-bar .tab-btn .smtc-pin { display: none !important; }
/* Captions: language pill + Language/Accuracy panel (tool_caption_languages.js) */
.smcl-pill { flex: none; display: inline-flex; align-items: center; gap: 5px; max-width: 120px; height: 28px; padding: 0 9px; border-radius: 999px; border: 1px solid var(--border-subtle); background: var(--bg-secondary); color: var(--text-secondary); font-size: 11px; font-weight: 600; cursor: pointer; }
.smcl-pill:hover { color: var(--text-primary); border-color: var(--border-medium); }
.smcl-pill svg { width: 13px; height: 13px; flex: none; }
.smcl-pill span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.smcl-body { padding: 0 14px 4px; }
.smcl-body label { display: block; margin: 8px 0 5px; font-size: 11px; color: var(--text-muted); }
.smcl-body select { width: 100%; }
.smcl-note { margin-top: 10px; font-size: 11px; line-height: 1.45; color: var(--text-secondary); }
/* Captions transcript: the hint under the word-correction box (1.9.43) */
.capx-fixtip { display: inline-block; margin: 0 4px; padding: 2px 7px; border-radius: 6px; background: var(--bg-tertiary); color: var(--text-muted); font-size: 10px; font-weight: 500; vertical-align: middle; white-space: nowrap; }
/* Floating 2.0 one-time card (tool_float_search2.js) */
.smfs2-notice .smfs2-how { margin-top: -4px; padding-top: 8px; border-top: 1px solid var(--border-subtle); font-size: 11.5px; line-height: 1.6; }
/* activation card: "Bought on Gumroad?" link under the Selar fields (1.9.44) */
.smact-link { display: block; margin: 8px 0 0; padding: 0; border: none; background: none; color: var(--accent-blue); font-size: 11.5px; font-weight: 600; cursor: pointer; text-align: left; }
.smact-link:hover { text-decoration: underline; }
/* wrong-build notice (tool_platform_check.js) */
.smpc-notice .smpc-ic { color: var(--accent-orange, #ff9f0a); background: rgba(255, 159, 10, 0.16); }
/* ===== Max tab (tool_max.js) - theme colours only ===== */
.tab-bar .tab-btn .smmx-own { display: none; }
body.sm-tabcards .tab-bar .tab-btn .smmx-own { display: block; position: absolute; top: 7px; left: 8px; font-size: 8px; font-weight: 800; letter-spacing: 0.05em; padding: 2px 6px; border-radius: 999px; background: var(--bg-tertiary); color: var(--text-secondary); border: 1px solid var(--border-medium); }
.smmx { padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.smmx-hd { display: flex; align-items: center; gap: 10px; }
.smmx-mi { width: 34px; height: 34px; border-radius: 10px; flex: none; display: flex; align-items: center; justify-content: center; background: rgba(var(--accent-blue-rgb), 0.16); color: var(--accent-blue); }
.smmx-mi svg { width: 18px; height: 18px; }
.smmx-ht { min-width: 0; } .smmx-ht b { display: block; font-size: 16px; color: var(--text-primary); } .smmx-ht s { display: block; text-decoration: none; font-size: 11px; color: var(--text-muted); margin-top: 1px; }
.smmx-pill { margin-left: auto; flex: none; font-size: 10px; font-weight: 700; padding: 4px 9px; border-radius: 999px; background: var(--bg-secondary); border: 1px solid var(--border-medium); color: var(--text-secondary); }
.smmx-search { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 11px; border-radius: 9px; background: var(--bg-secondary); border: 1px solid var(--border-medium); color: var(--text-muted); }
.smmx-search svg { width: 14px; height: 14px; flex: none; }
.smmx-search input { flex: 1; min-width: 0; border: none; background: none; outline: none; color: var(--text-primary); font-size: 12px; }
.smmx-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.smmx-chips button { font-size: 11px; padding: 5px 10px; border-radius: 999px; background: var(--bg-secondary); border: 1px solid var(--border-subtle); color: var(--text-secondary); cursor: pointer; }
.smmx-chips button.on { background: var(--accent-blue); border-color: var(--accent-blue); color: #fff; }
.smmx-list { display: flex; flex-direction: column; gap: 8px; }
.smmx-tool { display: flex; align-items: center; gap: 11px; padding: 10px 11px; border-radius: 12px; background: var(--bg-secondary); border: 1px solid var(--border-subtle); cursor: pointer; }
.smmx-tool:hover { border-color: rgba(var(--accent-blue-rgb), 0.7); background: rgba(var(--accent-blue-rgb), 0.08); }
.smmx-tool.soon { cursor: default; }
.smmx-tool.soon:hover { border-color: var(--border-subtle); background: var(--bg-secondary); }
.smmx-tool.more { opacity: 0.55; }
.smmx-ti { width: 36px; height: 36px; border-radius: 10px; flex: none; display: flex; align-items: center; justify-content: center; background: var(--bg-primary); border: 1px solid var(--border-subtle); color: var(--accent-blue); }
.smmx-ti svg { width: 17px; height: 17px; }
.smmx-tn { flex: 1; min-width: 0; } .smmx-tn b { display: block; font-size: 12.5px; color: var(--text-primary); } .smmx-tn s { display: block; text-decoration: none; font-size: 10.5px; color: var(--text-muted); margin-top: 2px; line-height: 1.35; }
.smmx-st { flex: none; font-size: 9px; font-weight: 800; letter-spacing: 0.05em; padding: 3px 7px; border-radius: 999px; }
.smmx-st.new { background: var(--accent-blue); color: #fff; }
.smmx-st.beta { background: var(--bg-tertiary); color: var(--accent-orange, #ff9f0a); border: 1px solid var(--border-medium); }
.smmx-st.soon { background: var(--bg-tertiary); color: var(--text-muted); border: 1px solid var(--border-medium); }
.smmx-pin { flex: none; width: 24px; height: 24px; border: none; border-radius: 7px; background: none; color: var(--text-muted); opacity: 0; cursor: pointer; font-size: 12px; }
.smmx-tool:hover .smmx-pin, .smmx-pin.on { opacity: 1; }
.smmx-pin.on { color: var(--accent-blue); }
.smmx-pin:hover { background: var(--bg-tertiary); }
.smmx-chev { flex: none; color: var(--text-muted); font-size: 15px; }
.smmx-empty { padding: 14px; text-align: center; font-size: 12px; color: var(--text-muted); }
.smmx-crumb { display: flex; align-items: center; gap: 8px; }
.smmx-crumb b { font-size: 14px; color: var(--text-primary); }
.smmx-crumb .smmx-st { margin-left: auto; }
.smmx-back { padding: 5px 11px; border-radius: 999px; background: var(--bg-secondary); border: 1px solid var(--border-medium); color: var(--text-secondary); font-size: 12px; cursor: pointer; }
.smmx-back:hover { color: var(--text-primary); }

/* ===== Word Studio (Max tool, tool_word_studio.js) - theme colours only ===== */
.smws { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.smws.busy { opacity: 0.75; }
.smws-stagewrap { display: flex; justify-content: center; }
.smws-frame { position: relative; width: 100%; border-radius: 14px; overflow: hidden; background: var(--bg-tertiary); border: 1px solid var(--border-medium); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); cursor: move; user-select: none; }
.smws-frame.moving { cursor: grabbing; }
.smws-img { position: absolute; inset: 0; background: var(--bg-tertiary) center / cover no-repeat; }
.smws-layer { position: absolute; inset: 0; pointer-events: none; }
.smws-word { position: absolute; transform: translate(-50%, -50%); white-space: nowrap; line-height: 1; color: #fff; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.55); animation: smwsPop 0.22s ease-out both; pointer-events: auto; cursor: move; padding: 2px 3px; border: 1px dashed transparent; border-radius: 3px; }
.smws-word b { font-weight: inherit; outline: none; }
.smws-word:hover { border-color: rgba(255, 255, 255, 0.45); }
.smws-word.sel { border-color: var(--accent-blue); border-style: solid; background: rgba(var(--accent-blue-rgb), 0.12); }
.smws-word b[contenteditable="true"] { cursor: text; background: rgba(0, 0, 0, 0.35); }
.smws-h { position: absolute; right: -5px; bottom: -5px; width: 9px; height: 9px; border-radius: 2px; background: #fff; border: 1.5px solid var(--accent-blue); cursor: nwse-resize; }
.smws-layer.still .smws-word { animation: none; }
.smws-word.hide { visibility: hidden; animation: none; }
.smws-word.m-rise { animation-name: smwsRise; animation-duration: 0.25s; }
.smws-word.m-drift { animation-name: smwsDrift; animation-duration: 0.35s; }
.smws-word.m-snap { animation: none; }
@keyframes smwsPop { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.55); } 40% { opacity: 1; } 65% { transform: translate(-50%, -50%) scale(1.08); } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes smwsRise { 0% { opacity: 0; transform: translate(-50%, 10%); } 60% { opacity: 1; } 100% { opacity: 1; transform: translate(-50%, -50%); } }
@keyframes smwsDrift { from { opacity: 0; transform: translate(-50%, -50%) scale(1.07); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes smwsSnap { from { opacity: 0; } to { opacity: 1; } }
.smws-grab { position: absolute; top: 8px; right: 8px; font-size: 10.5px; padding: 4px 9px; border-radius: 999px; background: var(--bg-secondary); border: 1px solid var(--border-medium); color: var(--text-secondary); cursor: pointer; }
.smws-grab:hover { color: var(--text-primary); }
.smws-hint { position: absolute; left: 8px; bottom: 7px; font-size: 9.5px; color: var(--text-muted); background: var(--bg-secondary); border-radius: 6px; padding: 2px 6px; opacity: 0; transition: opacity 0.2s; }
.smws-frame:hover .smws-hint { opacity: 0.9; }
.smws-looks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.smws-look { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 9px 4px; border-radius: 11px; background: var(--bg-secondary); border: 1px solid var(--border-subtle); color: var(--text-primary); cursor: pointer; min-width: 0; }
.smws-look b { font-size: 14px; white-space: nowrap; overflow: hidden; max-width: 100%; }
.smws-look s { text-decoration: none; font-size: 10.5px; color: var(--text-muted); }
.smws-look.on { border-color: var(--accent-blue); background: rgba(var(--accent-blue-rgb), 0.12); }
.smws-card { padding: 10px 11px; border-radius: 11px; background: var(--bg-secondary); border: 1px solid var(--border-subtle); }
.smws-row { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--text-secondary); }
.smws-row > span em { font-style: normal; color: var(--text-muted); }
.smws-mood .smws-row b { margin-left: auto; color: var(--text-primary); font-size: 12px; }
.smws-range, .smws-size { width: 100%; accent-color: var(--accent-blue); margin: 8px 0 4px; }
.smws-ticks { display: flex; justify-content: space-between; font-size: 10px; color: var(--text-muted); }
.smws-link { margin-left: auto; background: none; border: none; color: var(--accent-blue); font-size: 11.5px; font-weight: 600; cursor: pointer; padding: 2px 0; }
.smws-link.off { color: var(--text-muted); }
.smws-tr { max-height: 150px; overflow-y: auto; font-size: 12.5px; line-height: 1.95; color: var(--text-primary); }
.smws-blk { border-radius: 6px; padding: 1px 0; }
.smws-blk.on { background: rgba(var(--accent-blue-rgb), 0.07); }
.smws-w { padding: 1px 4px; border-radius: 6px; cursor: pointer; border: 1px solid transparent; }
.smws-w:hover { border-color: var(--border-medium); }
.smws-w.spot { background: rgba(var(--accent-blue-rgb), 0.18); border-color: rgba(var(--accent-blue-rgb), 0.7); font-weight: 700; }
.smws-w.edited { text-decoration: underline dotted; text-underline-offset: 3px; }
.smws-nav { justify-content: flex-start; }
.smws-navb { width: 26px; height: 24px; border-radius: 7px; background: var(--bg-secondary); border: 1px solid var(--border-subtle); color: var(--text-secondary); cursor: pointer; font-size: 14px; line-height: 1; }
.smws-navb:hover { color: var(--text-primary); }
.smws-navt { font-size: 11px; color: var(--text-secondary); min-width: 96px; text-align: center; }
.smws-w.filler { color: var(--text-muted); text-decoration: line-through; cursor: default; }
.smws-w.filler:hover { border-color: transparent; }
.smws-empty { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px; text-align: center; line-height: 1.4; }
.smws-empty b { font-size: 12.5px; } .smws-empty s { text-decoration: none; font-size: 11px; color: var(--text-muted); }
.smws-emptybtns { margin-top: 6px; }
.smws-sw { display: flex; gap: 6px; margin-left: auto; }
.smws-swatch { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--bg-secondary); box-shadow: 0 0 0 1px var(--border-medium); cursor: pointer; padding: 0; }
.smws-swatch.on { box-shadow: 0 0 0 2px var(--accent-blue); }
.smws-motions { display: flex; gap: 6px; flex-wrap: wrap; }
.smws-chip { font-size: 11.5px; padding: 5px 12px; border-radius: 999px; background: var(--bg-secondary); border: 1px solid var(--border-subtle); color: var(--text-secondary); cursor: pointer; }
.smws-chip.on { border-color: var(--accent-blue); color: var(--text-primary); background: rgba(var(--accent-blue-rgb), 0.12); }
.smws-sizerow { flex-wrap: wrap; }
.smws-sizerow .smws-size { flex: 1; min-width: 120px; margin: 0; }
.smws-chk { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-secondary); width: 100%; cursor: pointer; }
.smws-actions { display: flex; gap: 8px; }
.smws-btn { flex: 1; height: 38px; border-radius: 999px; border: 1px solid var(--border-medium); background: var(--bg-secondary); color: var(--text-primary); font-size: 13px; font-weight: 600; cursor: pointer; }
.smws-actions .smws-btn.primary { flex: 2; }
.smws-btn.primary { background: var(--accent-blue); border-color: var(--accent-blue); color: #fff; }
.smws-empty .smws-btn { flex: none; padding: 0 16px; height: 32px; font-size: 12px; }
.smws-btn:disabled { opacity: 0.5; cursor: default; }
.smws-status { font-size: 11px; color: var(--text-muted); min-height: 14px; line-height: 1.4; }
.smws-status.ok { color: var(--accent-green, #34c759); }
.smws-status.error { color: var(--accent-red, #ff453a); }
/* Max tab scrolls (Word Studio is taller than the panel); clean thin bar, theme colours */
#contentMax.active { overflow-y: auto !important; overflow-x: hidden !important; }
#contentMax::-webkit-scrollbar { width: 5px; }
#contentMax::-webkit-scrollbar-track { background: transparent; margin: 6px 0; }
#contentMax::-webkit-scrollbar-thumb { background: var(--border-medium); border: none; border-radius: 10px; box-shadow: none; }
#contentMax::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* Word Studio v2: word bar, paged styles, Words / Spotlight rows */
.smws-wbar { position: absolute; z-index: 4; display: flex; align-items: center; gap: 4px; padding: 4px; border-radius: 10px; background: rgba(20, 20, 20, 0.94); border: 1px solid var(--border-medium); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5); white-space: nowrap; cursor: default; }
.smws-wbar[hidden] { display: none; }
.smws-wbar .smws-sel { width: 112px; padding: 4px 6px; font-size: 11px; }
.smws-wb { padding: 4px 8px; border-radius: 7px; border: none; background: var(--bg-tertiary); color: var(--text-primary); font-size: 10.5px; cursor: pointer; }
.smws-wb:hover { background: var(--accent-blue); color: #fff; }
.smws-sthead { margin-bottom: -4px; }
.smws-pager { display: flex; align-items: stretch; gap: 6px; }
.smws-pg { flex: none; width: 26px; border-radius: 10px; border: 1px solid var(--border-medium); background: var(--bg-secondary); color: var(--text-secondary); font-size: 16px; cursor: pointer; padding: 0; }
.smws-pg:hover:not(:disabled) { border-color: var(--accent-blue); color: var(--text-primary); }
.smws-pg:disabled { opacity: 0.35; cursor: default; }
.smws-styles { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.smws-st { padding: 0; border-radius: 10px; overflow: hidden; border: 1.5px solid var(--border-subtle); background: #0b0b0b; cursor: pointer; text-align: center; min-width: 0; }
.smws-st:hover { border-color: var(--border-medium); }
.smws-st.on { border-color: var(--accent-blue); box-shadow: 0 0 0 2px rgba(var(--accent-blue-rgb), 0.3); }
.smws-stpv { height: 46px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; line-height: 1; background: radial-gradient(circle at 50% 40%, #2b2b2b, #0b0b0b 75%); overflow: hidden; }
.smws-stpv em { font-style: normal; font-size: 8.5px; white-space: nowrap; }
.smws-stpv strong { font-weight: normal; font-size: 16px; white-space: nowrap; }
.smws-st small { display: block; font-size: 9.5px; padding: 4px 4px 5px; color: var(--text-secondary); background: var(--bg-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.smws-st.on small { color: var(--text-primary); }
.smws-stnone { grid-column: 1 / -1; padding: 18px 4px; text-align: center; font-size: 11px; color: var(--text-muted); }
.smws-pfoot { display: flex; align-items: center; gap: 8px; margin: -3px 32px 0; }
.smws-stsearch { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 999px; background: var(--bg-secondary); border: 1px solid var(--border-subtle); color: var(--text-muted); font-size: 11px; }
.smws-stsearch input { flex: 1; min-width: 0; border: none; background: none; outline: none; color: var(--text-primary); font-size: 10.5px; }
.smws-pno { flex: none; font-size: 10px; font-weight: 600; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.smws-fonts { display: flex; flex-direction: column; gap: 8px; }
.smws-frow { display: flex; align-items: center; gap: 8px; }
.smws-frow > b { width: 58px; flex: none; font-size: 11.5px; font-weight: 500; color: var(--text-secondary); }
.smws-sel { flex: 1; min-width: 0; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--border-medium); background: var(--bg-primary); color: var(--text-primary); font-size: 12px; outline: none; cursor: pointer; }
.smws-sel:focus { border-color: var(--accent-blue); }
.smws-dots { display: flex; align-items: center; gap: 5px; flex: none; }
.smws-dot { position: relative; width: 16px; height: 16px; border-radius: 50%; padding: 0; border: 2px solid var(--bg-secondary); box-shadow: 0 0 0 1px var(--border-medium); cursor: pointer; overflow: hidden; display: inline-block; }
.smws-wbar .smws-dot { border-color: #141414; }
.smws-dot.on { box-shadow: 0 0 0 2px var(--accent-blue); }
.smws-dot.pick { background: conic-gradient(#ff3b30, #ffcc00, #34c759, #00c7be, #0a84ff, #bf5af2, #ff3b30); }
.smws-cpop { position: fixed; z-index: 10050; width: 214px; padding: 10px; border-radius: 12px; background: var(--bg-secondary); border: 1px solid var(--border-medium); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55); display: flex; flex-direction: column; gap: 9px; }
.smws-sv { position: relative; height: 120px; border-radius: 8px; cursor: crosshair; background-image: linear-gradient(to top, #000, rgba(0, 0, 0, 0)), linear-gradient(to right, #fff, rgba(255, 255, 255, 0)); }
.smws-sv i { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5); pointer-events: none; }
.smws-hue { position: relative; height: 12px; border-radius: 6px; cursor: pointer; background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); }
.smws-hue i { position: absolute; top: -2px; width: 8px; height: 16px; margin-left: -4px; border-radius: 3px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5); pointer-events: none; }
.smws-crow { display: flex; align-items: center; gap: 7px; }
.smws-cprev { width: 24px; height: 24px; border-radius: 6px; flex: none; border: 1px solid var(--border-medium); }
.smws-hex { flex: 1; min-width: 0; padding: 5px 7px; border-radius: 7px; border: 1px solid var(--border-medium); background: var(--bg-primary); color: var(--text-primary); font-size: 11.5px; font-family: monospace; outline: none; }
.smws-hex:focus { border-color: var(--accent-blue); }
.smws-cok { flex: none; padding: 5px 11px; border-radius: 999px; border: none; background: var(--accent-blue); color: #fff; font-size: 11px; font-weight: 600; cursor: pointer; }

/* Word Studio template looks */
.smws-seg { display: flex; gap: 2px; padding: 2px; border-radius: 9px; background: var(--bg-primary); border: 1px solid var(--border-subtle); }
.smws-seg button { padding: 4px 11px; border: none; border-radius: 7px; background: none; color: var(--text-muted); font-size: 11px; cursor: pointer; white-space: nowrap; }
.smws-seg button.on { background: var(--accent-blue); color: #fff; font-weight: 600; }
.smws-tplfor { margin: -2px 0 -2px; }
.smws-tplfor[hidden] { display: none; }
.smws-tpl .smws-stpv { position: relative; }
.smws-tpl img { width: 100%; height: 100%; object-fit: cover; transform: scale(2.3); opacity: 0; transition: opacity 0.2s; }   /* the template's text sits small in the middle of its 16:9 preview */
.smws-tpl img.on { opacity: 1; }
.smws-tpl .smws-stpv strong { font-size: 20px; }
.smws-badges { position: absolute; top: 3px; right: 3px; display: flex; gap: 2px; }
.smws-badges i { font-style: normal; font-size: 8px; font-weight: 800; width: 13px; height: 13px; line-height: 13px; border-radius: 4px; background: var(--accent-blue); color: #fff; }
.smws-tplcol { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; color: var(--text-muted); }
.smws-tplcol i { width: 11px; height: 11px; border-radius: 50%; display: inline-block; box-shadow: 0 0 0 1px var(--border-medium); }
/* Word Studio: snap guides, box select, several selected words */
.smws-guides { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.smws-guides i { position: absolute; background: #ff2d92; box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.35); }
.smws-guides i.v { top: 0; bottom: 0; width: 1px; margin-left: -0.5px; }
.smws-guides i.h { left: 0; right: 0; height: 1px; margin-top: -0.5px; }
.smws-box { position: absolute; z-index: 3; pointer-events: none; border: 1px solid var(--accent-blue); background: rgba(var(--accent-blue-rgb), 0.12); border-radius: 2px; }
.smws-box[hidden] { display: none; }
.smws-word.sel.lead { border-style: solid; box-shadow: 0 0 0 1px rgba(var(--accent-blue-rgb), 0.6); }
.smws-wcount { padding: 0 6px 0 4px; font-size: 10.5px; font-weight: 600; color: var(--text-primary); }

.smws-dot.pick.cur { width: 22px; height: 22px; border: 2px solid transparent; box-shadow: none; background: linear-gradient(var(--c), var(--c)) padding-box, conic-gradient(#ff3b30, #ffcc00, #34c759, #00c7be, #0a84ff, #bf5af2, #ff3b30) border-box; }
.smws-dot.pick.cur:hover { transform: scale(1.08); }

/* Word Studio: same tight letter spacing as the template, magnet toggle */
.smws-word b { letter-spacing: -0.077em; margin-right: 0.077em; }
.smws-snap { position: absolute; top: 8px; left: 8px; z-index: 5; display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px 4px 6px; border-radius: 999px; background: rgba(0, 0, 0, 0.55); border: 1px solid rgba(255, 255, 255, 0.15); color: rgba(255, 255, 255, 0.7); font-size: 10.5px; cursor: pointer; }
.smws-snap svg { width: 13px; height: 13px; }
.smws-snap.on { color: #fff; border-color: var(--accent-blue); background: rgba(var(--accent-blue-rgb), 0.55); }

/* Word Studio: font picker + saved layouts */
.smws-fsel { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--border-medium); background: var(--bg-primary); color: var(--text-primary); font-size: 12px; cursor: pointer; text-align: left; }
.smws-fsel span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.smws-fsel svg { width: 12px; height: 12px; flex: none; color: var(--text-muted); }
.smws-fsel:hover { border-color: var(--accent-blue); }
.smws-wbar .smws-fsel { flex: none; width: 118px; padding: 4px 6px; font-size: 11px; }
.smws-fpop { position: fixed; z-index: 10050; width: 250px; padding: 8px; border-radius: 12px; background: var(--bg-secondary); border: 1px solid var(--border-medium); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55); display: flex; flex-direction: column; gap: 6px; }
.smws-fsearch { display: flex; align-items: center; gap: 6px; padding: 6px 9px; border-radius: 8px; background: var(--bg-primary); border: 1px solid var(--border-medium); color: var(--text-muted); font-size: 12px; }
.smws-fsearch input { flex: 1; min-width: 0; border: none; background: none; outline: none; color: var(--text-primary); font-size: 12px; }
.smws-flist { max-height: 270px; overflow-y: auto; display: flex; flex-direction: column; }
.smws-fhead { position: sticky; top: 0; z-index: 1; padding: 6px 6px 4px; font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); background: var(--bg-secondary); }
.smws-frow2 { flex: none; padding: 6px 8px; border: none; border-radius: 6px; background: none; color: var(--text-primary); font-size: 14px; text-align: left; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 30px; }
.smws-frow2:hover { background: var(--bg-tertiary); }
.smws-frow2.on { color: var(--accent-blue); background: rgba(var(--accent-blue-rgb), 0.12); }
.smws-fnote { padding: 10px 6px; font-size: 11px; color: var(--text-muted); text-align: center; }
.smws-layrow { gap: 6px; }
.smws-layrow > span { margin-right: auto; }
.smws-lbtn { padding: 5px 10px; border-radius: 999px; border: 1px solid var(--border-medium); background: var(--bg-secondary); color: var(--text-primary); font-size: 11px; cursor: pointer; white-space: nowrap; }
.smws-lbtn:hover:not(:disabled) { border-color: var(--accent-blue); }
.smws-lbtn:disabled { opacity: 0.45; cursor: default; }
.smws-ltitle { font-size: 12px; font-weight: 700; color: var(--text-primary); padding: 2px 2px 0; }
.smws-lname { padding: 7px 9px; border-radius: 8px; border: 1px solid var(--border-medium); background: var(--bg-primary); color: var(--text-primary); font-size: 12px; outline: none; }
.smws-lname:focus { border-color: var(--accent-blue); }
.smws-lnote { font-size: 10.5px; line-height: 1.4; color: var(--text-muted); }
.smws-lsavepop .smws-cok { align-self: flex-end; }
.smws-lchk { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-secondary); cursor: pointer; }
.smws-llist { max-height: 300px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.smws-litem { display: flex; align-items: center; gap: 9px; padding: 7px; border-radius: 9px; background: var(--bg-primary); border: 1px solid var(--border-subtle); }
.smws-lthumb { flex: none; border-radius: 5px; box-shadow: 0 0 0 1px var(--border-medium); }
.smws-linfo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.smws-linfo b { font-size: 12px; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.smws-linfo s { text-decoration: none; font-size: 10px; color: var(--text-muted); }
.smws-linfo span { display: flex; gap: 5px; margin-top: 3px; flex-wrap: wrap; }
.smws-linfo span button { padding: 3px 8px; border-radius: 999px; border: 1px solid var(--border-medium); background: var(--bg-secondary); color: var(--text-primary); font-size: 10.5px; cursor: pointer; }
.smws-linfo span button:hover { background: var(--accent-blue); border-color: var(--accent-blue); color: #fff; }
.smws-ldel { flex: none; align-self: flex-start; width: 22px; height: 22px; border-radius: 6px; border: none; background: none; color: var(--text-muted); font-size: 15px; cursor: pointer; }
.smws-ldel:hover { background: var(--bg-tertiary); color: var(--accent-red, #ff453a); }
/* Keep face clear (Word Studio row + CapWiz page) */
.smws-faces { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.smws-faces i { position: absolute; border: 1.5px dashed #ff9f0a; border-radius: 10px; background: rgba(255, 159, 10, 0.1); }
.smws-chk2 { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-primary); cursor: pointer; }
.smws-chk2 input { accent-color: var(--accent-blue); margin: 0; }
.smws-beta { font-size: 8.5px; font-weight: 800; letter-spacing: 0.05em; padding: 2px 6px; border-radius: 999px; background: var(--bg-tertiary); color: var(--accent-orange, #ff9f0a); border: 1px solid var(--border-medium); }
.smfc-intro { font-size: 11.5px; line-height: 1.5; color: var(--text-secondary); }
.smfc-frame { background: radial-gradient(circle at 50% 40%, #2b2b2b, #0e0e0e 75%); aspect-ratio: 9 / 16; width: min(100%, calc(58vh * 0.5625)); cursor: default; }
.smfc-test { flex: none; width: 100%; }
.smfc-opts { display: flex; flex-direction: column; gap: 10px; }
.smfc-opts .smws-row { justify-content: space-between; flex-wrap: wrap; }

/* Live re-sync */
.smws-drift { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 11px; background: rgba(255, 159, 10, 0.1); border: 1px solid rgba(255, 159, 10, 0.5); font-size: 11.5px; color: var(--text-primary); }
.smws-drift[hidden] { display: none; }
.smws-drift span { flex: 1; min-width: 0; line-height: 1.4; }
.smws-drift .smws-btn { flex: none; height: 32px; padding: 0 14px; font-size: 12px; }
.smrs-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 11.5px; color: var(--text-secondary); line-height: 1.4; }
.smrs-steps b { color: var(--text-primary); }
.smrs-state { font-size: 11.5px; line-height: 1.5; color: var(--text-secondary); }
.smrs-state b { color: var(--text-primary); }

.smws-wsz { min-width: 26px; padding: 4px 6px; font-weight: 700; }