:root {
    --bg-light: #ffffff;
    --bg-alt: #f9fafb;
    --text-main: #111827;
    --text-muted: #6b7280;
    --border-color: #e5e7eb;
    --brand: #000000;
    --brand-hover: #374151;
    --primary-color: #3b82f6; /* Used dynamically in JS, default blue */
}

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

body {
    background-color: var(--bg-light);
    color: var(--text-main);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { 
    font-weight: 600; 
    letter-spacing: -0.025em; 
    color: var(--text-main);
}

.text-center { text-align: center; }

/* Navigation */
.top-nav {
    border-bottom: 1px solid var(--border-color);
    padding: 1.5rem 0;
    background-color: var(--bg-light);
}

.nav-content {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 2rem;
}

.logo {
    font-weight: 600;
    font-size: 1.25rem;
    color: var(--text-main);
    text-decoration: none;
    letter-spacing: -0.025em;
}

/* Layouts */
.hero-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 6rem 2rem;
    text-align: center;
}

.hero-container h1 {
    font-size: 3.5rem;
    line-height: 1.1;
    margin-bottom: 1.5rem;
}

.hero-container .subtitle {
    font-size: 1.25rem;
    color: var(--text-muted);
    margin-bottom: 3rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.app-container {
    max-width: 640px;
    margin: 0 auto;
    padding: 4rem 2rem;
}

/* Buttons */
button, .primary-btn, .secondary-btn {
    cursor: pointer;
    font-family: inherit;
    font-weight: 500;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    border-radius: 6px;
    display: inline-block;
    text-decoration: none;
    padding: 10px 20px;
}

.primary-btn {
    background: var(--brand);
    color: white;
    border: 1px solid var(--brand);
}
.primary-btn:hover:not(:disabled) { background: var(--brand-hover); }
.primary-btn:disabled {
    background: var(--border-color);
    border-color: var(--border-color);
    color: var(--text-muted);
    cursor: not-allowed;
}

.secondary-btn {
    background: var(--bg-light);
    color: var(--text-main);
    border: 1px solid var(--border-color);
}
.secondary-btn:hover { background: var(--bg-alt); }

/* Step Sections */
.step-section { display: none; }
.step-section.active { display: block; animation: fadeIn 0.3s ease; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.step-section h2 { 
    margin-bottom: 2rem; 
    font-size: 1.5rem; 
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.75rem;
}
.step-actions { margin-top: 3rem; display: flex; justify-content: space-between; }
.center-actions { justify-content: flex-start; gap: 1rem; }

/* Tabs */
.tabs { display: flex; gap: 1rem; margin-bottom: 2rem; }
.tab-btn { 
    background: none; 
    border: none; 
    color: var(--text-muted); 
    padding: 0.5rem 0; 
    border-bottom: 2px solid transparent;
    border-radius: 0;
}
.tab-btn.active { color: var(--text-main); border-bottom-color: var(--brand); }
.tab-content { display: none; }
.tab-content.active { display: block; }

/* Forms & Inputs */
.upload-area {
    border: 1px dashed var(--border-color);
    border-radius: 8px;
    padding: 4rem 2rem;
    text-align: center;
    background: var(--bg-alt);
    transition: border-color 0.2s;
}
.upload-area.dragover { border-color: var(--brand); background: var(--bg-light); }
.file-name { margin-top: 1rem; font-size: 0.9rem; color: var(--text-main); word-break: break-all; }

.input-group { margin-bottom: 1.5rem; }
.input-group label { display: block; margin-bottom: 0.5rem; font-size: 0.9rem; font-weight: 500; }
.text-input {
    width: 100%;
    padding: 10px 12px;
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-main);
    font-family: inherit;
    font-size: 0.95rem;
    outline: none;
    transition: border-color 0.2s;
}
.text-input:focus { border-color: var(--brand); }

/* Color Picker */
.color-picker-wrapper { display: flex; align-items: center; gap: 1rem; }
input[type="color"] {
    -webkit-appearance: none;
    border: none;
    width: 36px; height: 36px;
    border-radius: 6px;
    cursor: pointer;
    background: none;
    padding: 0;
}
input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
input[type="color"]::-webkit-color-swatch { border: 1px solid var(--border-color); border-radius: 4px; }
#color-hex-display { font-family: monospace; font-size: 0.95rem; color: var(--text-muted); }

/* Style Grid */
.style-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 1rem;
}
.style-card {
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.5rem;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}
.style-card:hover { border-color: var(--text-muted); }
.style-card.selected { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.style-card span { font-size: 0.8rem; font-weight: 500; }

/* --- Live caption-style previews ---------------------------------------- */
/* Each preview mirrors the RENDERER's color role for that style. The customer's
   brand color flows in via --cap-brand (set on #style-selector, updated live by
   the color picker), so all 10 previews recolor instantly on selection. These are
   recognizable approximations, not pixel copies of the libass output. */
.style-preview {
    width: 100%;
    aspect-ratio: 9 / 16;
    border-radius: 4px;
    margin-bottom: 0.5rem;
    background: linear-gradient(150deg, #26405e 0%, #0b0f18 85%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 8px;
}
.style-preview .cap {
    text-transform: uppercase;
    text-align: center;
    line-height: 1.08;
    color: #fff;
    font-weight: 700;
    /* Black outline keeps any brand color legible on the dark preview. */
    -webkit-text-stroke: 0.6px rgba(0, 0, 0, 0.9);
    paint-order: stroke fill;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
    word-spacing: 0.04em;
}
.style-preview .cap .hl { color: var(--cap-brand); }        /* highlighted word */

/* single-word: whole word is the brand color (Anton) */
.style-preview[data-style="single-word"] .cap { font-family: 'Anton', Impact, sans-serif; font-size: 26px; color: var(--cap-brand); }
/* single-word-box: white word on a brand-colored box */
.style-preview[data-style="single-word-box"] .cap { font-family: 'Anton', Impact, sans-serif; font-size: 22px; -webkit-text-stroke: 0; text-shadow: none; }
.style-preview[data-style="single-word-box"] .cap .w { background: var(--cap-brand); color: #fff; padding: 0.14em 0.3em; border-radius: 0.32em; }
/* minimal: small clean sans, brand highlight */
.style-preview[data-style="minimal"] .cap { font-family: Arial, sans-serif; font-size: 12px; font-weight: 600; }
/* hormozi: bold Anton, brand highlight */
.style-preview[data-style="hormozi"] .cap { font-family: 'Anton', Impact, sans-serif; font-size: 23px; }
/* beast: italic Anton, heavy outline, brand highlight */
.style-preview[data-style="beast"] .cap { font-family: 'Anton', Impact, sans-serif; font-size: 20px; font-style: italic; -webkit-text-stroke: 1px #000; }
/* classic: sans on a dark box, brand highlight */
.style-preview[data-style="classic"] .cap { font-family: Arial, sans-serif; font-size: 13px; background: rgba(0, 0, 0, 0.55); padding: 0.16em 0.34em; border-radius: 2px; -webkit-text-stroke: 0; }
/* karaoke: grey base, brand highlight */
.style-preview[data-style="karaoke"] .cap { font-family: Arial, sans-serif; font-size: 15px; color: #a9a9a9; }
/* neon: white text with a brand-colored glow, brand highlight */
.style-preview[data-style="neon"] .cap { font-family: Arial, sans-serif; font-size: 16px; -webkit-text-stroke: 0; text-shadow: 0 0 3px var(--cap-brand), 0 0 7px var(--cap-brand), 0 0 12px var(--cap-brand); }
/* typewriter: monospace, brand highlight */
.style-preview[data-style="typewriter"] .cap { font-family: 'Courier New', monospace; font-size: 13px; font-weight: 700; }
/* bold-pop: heavy Archivo, brand base with one white word */
.style-preview[data-style="bold-pop"] .cap { font-family: 'Archivo Black', Arial, sans-serif; font-size: 19px; }
.style-preview[data-style="bold-pop"] .cap .brand { color: var(--cap-brand); }
.style-preview[data-style="bold-pop"] .cap .wht { color: #fff; }

/* Loader */
.loader-container { margin: 4rem 0 2rem; display: flex; justify-content: center; }
.spinner {
    width: 40px; height: 40px;
    border: 3px solid var(--border-color);
    border-top-color: var(--brand);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Video Preview */
.video-preview {
    width: 100%;
    max-width: 300px;
    margin: 0 0 2rem;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    background: var(--bg-alt);
}
.video-preview video { width: 100%; display: block; }

/* Editor Timeline */
.editor-timeline {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 1.5rem;
    background: var(--bg-alt);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    max-height: 400px;
    overflow-y: auto;
}
.word-blob {
    padding: 0.25rem 0.5rem;
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 0.9rem;
    cursor: text;
    outline: none;
    transition: all 0.2s;
    min-width: 2rem;
    text-align: center;
}
.word-blob:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 2px rgba(0,0,0,0.1);
}

/* Custom Dropdown Styling */
.custom-dropdown {
    position: relative;
    width: 100%;
    user-select: none;
}
.custom-dropdown-selected {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--bg-alt, #1e1e24);
    border: 1px solid var(--border-color, #333);
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}
.custom-dropdown-selected::after {
    content: "▼";
    font-size: 10px;
    color: var(--text-muted, #888);
    transition: transform 0.2s ease;
}
.custom-dropdown.open .custom-dropdown-selected::after {
    transform: rotate(180deg);
}
.custom-dropdown-options {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--bg-alt, #1e1e24);
    border: 1px solid var(--border-color, #333);
    border-radius: 8px;
    max-height: 250px;
    overflow-y: auto;
    z-index: 1000;
    display: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.custom-dropdown.open .custom-dropdown-options {
    display: block;
}
.custom-dropdown-option {
    padding: 12px 16px;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.15s ease;
}
.custom-dropdown-option:hover {
    background: rgba(255, 255, 255, 0.08);
}
.custom-dropdown-option.selected {
    background: rgba(255, 255, 255, 0.12);
    font-weight: bold;
}

/* Toasts
   Replaces alert() for anything the user can act on. A failure needs to stay
   readable long enough to be reported back to us, so the detail line (HTTP
   status, server message) sits under the headline rather than being dropped. */
.toast-stack {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 4000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: min(420px, calc(100vw - 40px));
    pointer-events: none;
}
.toast {
    pointer-events: auto;
    background: #1c1c22;
    color: #fff;
    border: 1px solid #333;
    border-left: 4px solid var(--primary-color, #3b82f6);
    border-radius: 10px;
    padding: 14px 40px 14px 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    position: relative;
    animation: toast-in 0.18s ease-out;
}
.toast.error { border-left-color: #ef4444; }
.toast.success { border-left-color: #22c55e; }
.toast.leaving { animation: toast-out 0.18s ease-in forwards; }
.toast-title {
    font-weight: 600;
    font-size: 15px;
    line-height: 1.35;
}
.toast-detail {
    margin-top: 5px;
    font-size: 13px;
    line-height: 1.45;
    color: #a1a1aa;
    word-break: break-word;
}
.toast-close {
    position: absolute;
    top: 8px;
    right: 10px;
    background: none;
    border: none;
    color: #a1a1aa;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    padding: 2px 4px;
}
.toast-close:hover { color: #fff; }
@keyframes toast-in {
    from { opacity: 0; transform: translateX(16px); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes toast-out {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(16px); }
}

/* Upload progress
   A large upload is minutes of silence otherwise, which reads as a hang. The
   bar only appears while bytes are moving — once the file is on the worker
   there is no percentage to honestly report, so it goes away again. */
.upload-progress {
    max-width: 420px;
    margin: 20px auto 0;
}
.upload-progress[hidden] { display: none; }
.upload-progress-track {
    height: 8px;
    background: var(--border-color, #e5e7eb);
    border-radius: 999px;
    overflow: hidden;
}
.upload-progress-bar {
    height: 100%;
    width: 0%;
    background: var(--primary-color, #3b82f6);
    border-radius: 999px;
    transition: width 0.2s ease-out;
}
/* No Content-Length means no percentage; sweep instead of lying with a number. */
.upload-progress-bar.indeterminate {
    width: 35%;
    animation: upload-sweep 1.1s ease-in-out infinite;
}
@keyframes upload-sweep {
    0% { margin-left: -35%; }
    100% { margin-left: 100%; }
}
.upload-progress-label {
    margin-top: 8px;
    font-size: 13px;
    color: var(--text-muted, #6b7280);
    font-variant-numeric: tabular-nums;
}

/* Browse buttons sit side by side: files or a whole folder. */
.browse-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

/* Selected-file review
   A folder can hold twenty videos. The old comma-joined string was unreadable
   at that size and offered no way to drop one, so this replaces it. */
.file-list {
    margin-top: 14px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    overflow: hidden;
}
.file-list[hidden] { display: none; }
.file-list-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--bg-alt);
    border-bottom: 1px solid var(--border-color);
    font-size: 13px;
    color: var(--text-muted);
}
.file-list-clear {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 13px;
    cursor: pointer;
    text-decoration: underline;
    padding: 0;
}
.file-list-clear:hover { color: var(--text-main); }
.file-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 14px;
    border-bottom: 1px solid var(--border-color);
    font-size: 14px;
}
.file-row:last-child { border-bottom: none; }
.file-row-index {
    color: var(--text-muted);
    font-size: 12px;
    min-width: 20px;
    font-variant-numeric: tabular-nums;
}
.file-row-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.file-row-size {
    color: var(--text-muted);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}
.file-row.too-big .file-row-size { color: #ef4444; font-weight: 600; }
.file-row-remove {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 2px 4px;
}
.file-row-remove:hover { color: #ef4444; }

/* Pills — a compact selector for output mode and clip length. Same selected
   semantics as .style-card, without the 9:16 preview. */
.pill-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.pill {
    padding: 8px 16px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--bg-light);
    color: var(--text-main);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.pill:hover { border-color: var(--text-muted); }
.pill.selected {
    border-color: var(--primary-color);
    background: color-mix(in srgb, var(--primary-color) 12%, transparent);
    color: var(--primary-color);
}
.pill-hint {
    margin: 8px 0 0;
    color: var(--text-muted);
    min-height: 1.2em;
}

/* Batch progress — one row per clip while they render in turn. */
.batch-progress {
    max-width: 420px;
    margin: 20px auto 0;
    text-align: left;
}
.batch-progress[hidden] { display: none; }
.batch-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 0;
    font-size: 14px;
    border-bottom: 1px solid var(--border-color);
}
.batch-row:last-child { border-bottom: none; }
.batch-row-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.batch-row-state { font-size: 12px; color: var(--text-muted); }
.batch-row.completed .batch-row-state { color: #22c55e; }
.batch-row.failed .batch-row-state { color: #ef4444; }
.batch-row.processing .batch-row-state { color: var(--primary-color); }

/* Results grid — N finished clips, each independently downloadable. */
.results-grid {
    display: grid;
    /* auto-fill, not auto-fit: with auto-fit a two-clip batch stretches each
       card across half the page and the previews turn into billboards. */
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 8px;
    /* Cards size to their own content: a still-queued clip has no player, and
       stretching it to match a finished one leaves a tall empty box. */
    align-items: start;
}
.results-grid[hidden] { display: none; }
.result-card {
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.result-card video {
    width: 100%;
    aspect-ratio: 9 / 16;
    /* Capped: at full 9:16 a single card is taller than the viewport on a
       phone, and the grid becomes one clip per screen to scroll past. */
    max-height: 380px;
    object-fit: cover;
    background: #000;
    display: block;
}
.result-card-body { padding: 12px 14px; }
.result-card-title { font-weight: 600; font-size: 15px; margin-bottom: 4px; }
.result-card-meta { font-size: 13px; color: var(--text-muted); margin-bottom: 10px; }
.result-card-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.result-card-actions .primary-btn,
.result-card-actions .secondary-btn {
    font-size: 13px;
    padding: 7px 12px;
    flex: 1;
    text-align: center;
}
.result-card.failed { border-color: #ef4444; }
.result-card-error { font-size: 13px; color: #ef4444; }

/* A clip that hasn't rendered yet: no player, just its place in the queue. */
.result-card.pending .result-card-body { padding: 16px 14px; }
.result-card.pending {
    border-style: dashed;
    opacity: 0.75;
}

/* --- Access gate -----------------------------------------------------------
   Full-screen, in the landing page's visual language: ink, caption yellow,
   Anton. Shown only when the worker requires keys and none is stored. */
.access-gate {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: #141419;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.access-card {
    width: 100%;
    max-width: 420px;
    background: #ffffff;
    border-radius: 10px;
    padding: 36px;
    box-shadow: 8px 10px 0 rgba(255, 212, 0, 0.9);
}
.access-brand {
    font-family: 'Anton', sans-serif;
    text-transform: uppercase;
    font-size: 0.95rem;
    letter-spacing: 0.03em;
    margin-bottom: 18px;
}
.access-brand span {
    background: #ffd400;
    padding: 0 0.2em;
}
.access-card h1 {
    font-size: 1.5rem;
    letter-spacing: -0.02em;
    margin-bottom: 10px;
}
.access-copy {
    color: var(--text-muted);
    font-size: 0.92rem;
    margin-bottom: 20px;
}
.access-copy code {
    font-family: ui-monospace, 'SF Mono', monospace;
    background: var(--bg-alt);
    padding: 1px 5px;
    border-radius: 4px;
}
#access-form { display: flex; flex-direction: column; gap: 12px; }
#access-form .primary-btn { width: 100%; }
.access-error {
    margin-top: 14px;
    color: #b91c1c;
    font-size: 0.88rem;
}