@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
    --accent: #00c9b7;
    --accent-hover: #00ddb0;
    --accent-soft: rgba(0, 201, 183, 0.12);
    --accent-border: rgba(0, 201, 183, 0.4);
    --danger: #f43f5e;
    --danger-hover: #e11d48;
    --success: #22c55e;
    --warning: #f59e0b;
    --radius: 8px;
    --radius-sm: 6px;
    --titlebar-h: 48px;
    --sidebar-w: 280px;
    --font: 'Inter', system-ui, sans-serif;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
}

html[data-theme="dark"] {
    --bg: #121212;
    --bg-panel: #1a1a1a;
    --bg-elevated: #222;
    --bg-input: #141414;
    --border: rgba(255,255,255,0.08);
    --text: #f5f5f5;
    --text-secondary: #a3a3a3;
    --text-muted: #737373;
    --teleprompter-bg: #0c0c0c;
    --btn-primary-fg: #0a1210;
}

html[data-theme="light"] {
    --bg: #ebebeb;
    --bg-panel: #fff;
    --bg-elevated: #f5f5f5;
    --bg-input: #fff;
    --border: rgba(0,0,0,0.08);
    --text: #171717;
    --text-secondary: #525252;
    --text-muted: #a3a3a3;
    --teleprompter-bg: #111;
    --btn-primary-fg: #0a1210;
}

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

body {
    font-family: var(--font);
    font-size: 13px;
    background: var(--bg);
    color: var(--text);
    height: 100vh;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
}

.hidden { display: none !important; }

.icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.icon svg { width: 100%; height: 100%; display: block; }

/* --- Buttons --- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 9px 14px; border: none; border-radius: var(--radius-sm);
    font: 500 13px var(--font); cursor: pointer; transition: background 0.15s;
}
.btn .icon { width: 16px; height: 16px; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-primary { background: var(--accent); color: var(--btn-primary-fg); }
.btn-primary:hover:not(:disabled) { background: var(--accent-hover); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover:not(:disabled) { background: var(--danger-hover); }
.btn-secondary { background: var(--bg-elevated); color: var(--text); border: 1px solid var(--border); }
.btn-secondary:hover:not(:disabled) { filter: brightness(1.05); }
.btn-ghost { background: transparent; color: var(--text-secondary); border: 1px solid transparent; padding: 6px 10px; border-radius: var(--radius-sm); font: 500 12px var(--font); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.btn-ghost:hover { background: var(--bg-elevated); color: var(--text); }
.btn-ghost .icon { width: 14px; height: 14px; }
.btn-lg { padding: 12px 20px; font-size: 14px; font-weight: 600; border-radius: var(--radius); }
.btn-sm { padding: 6px 10px; font-size: 12px; }
.btn-block { width: 100%; }

/* --- Launcher --- */
#launcher {
    height: 100vh; display: flex; flex-direction: column;
    max-width: 720px; margin: 0 auto; padding: 0 24px 24px;
}
.launcher-bar {
    height: var(--titlebar-h); display: flex; align-items: center;
    border-bottom: 1px solid var(--border); margin: 0 -24px; padding: 0 24px;
    background: var(--bg-panel);
}
.logo { display: flex; align-items: center; gap: 10px; }
.logo-icon {
    width: 28px; height: 28px; border-radius: var(--radius-sm);
    background: var(--accent-soft); color: var(--accent);
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.logo-icon .icon { width: 16px; height: 16px; }
.logo-text { font-size: 15px; font-weight: 600; }
.launcher-body { flex: 1; overflow-y: auto; padding: 32px 0; display: flex; flex-direction: column; gap: 24px; }
.launcher-body h1 { font-size: 22px; font-weight: 700; margin-bottom: 8px; }
.launcher-body > p { color: var(--text-secondary); line-height: 1.5; }
.launcher-step-label { font-size: 12px; font-weight: 600; color: var(--text-secondary); margin-bottom: 8px; }
.launcher-textarea {
    width: 100%; min-height: 160px; padding: 12px; border: 1px solid var(--border);
    border-radius: var(--radius); background: var(--bg-input); color: var(--text);
    font: 13px/1.6 var(--font); resize: vertical;
}
.launcher-textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.launcher-actions-row { display: flex; gap: var(--space-2); margin-top: var(--space-2); flex-wrap: wrap; align-items: center; }
.script-editor .launcher-actions-row { margin-top: 0; }
.mode-cards { display: flex; flex-direction: column; gap: 8px; }
.mode-card {
    display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3);
    padding: var(--space-3) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--bg-panel); cursor: pointer; text-align: left; width: 100%;
    transition: border-color 0.15s;
}
.mode-card-body { flex: 1; min-width: 0; }
.mode-card:hover { border-color: var(--accent-border); }
.mode-card.active { border-color: var(--accent); background: var(--accent-soft); }
.mode-card-title { font-weight: 600; font-size: 14px; margin-bottom: 4px; }
.mode-card-desc { font-size: 12px; color: var(--text-secondary); line-height: 1.45; }
.mode-card-desc kbd { padding: 1px 5px; border-radius: 4px; background: var(--bg-input); border: 1px solid var(--border); font: 10px monospace; }
.mode-card-check { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--border); flex-shrink: 0; margin-top: 2px; }
.mode-card.active .mode-card-check { border-color: var(--accent); background: var(--accent); box-shadow: inset 0 0 0 3px var(--bg-panel); }
.launcher-footer { display: flex; flex-direction: column; gap: 8px; padding-top: 8px; border-top: 1px solid var(--border); }

/* --- Studio layout --- */
#studio {
    height: 100vh; display: grid;
    grid-template-rows: var(--titlebar-h) auto minmax(0, 1fr) auto;
    grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
    grid-template-areas:
        "header header"
        "checklist checklist"
        "sidebar main"
        "transport transport";
}
#studio.shoot-mode {
    grid-template-rows: var(--titlebar-h) minmax(0, 1fr) auto;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
        "header"
        "main"
        "transport";
}
#studio.shoot-mode .checklist,
#studio.shoot-mode .script-panel { display: none; }

.studio-header {
    grid-area: header; display: flex; align-items: center; gap: var(--space-3);
    min-height: var(--titlebar-h); padding: 0 var(--space-4);
    background: var(--bg-panel); border-bottom: 1px solid var(--border);
    min-width: 0;
}
.studio-header .logo { flex-shrink: 0; }
.studio-header.recording { border-bottom-color: rgba(244,63,94,0.35); }
.header-center {
    flex: 1; min-width: 0; display: flex; align-items: center; justify-content: flex-end;
    gap: var(--space-2); margin: 0 var(--space-2);
}
.header-indicators { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: flex-end; }
.indicator {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px;
    border-radius: var(--radius-sm); font-size: 11px; font-weight: 500;
    background: var(--bg-elevated); border: 1px solid var(--border); color: var(--text-secondary);
}
.indicator .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted); }
.indicator.ok .dot { background: var(--success); }
.indicator.ok { color: var(--success); }
.indicator.rec .dot { background: var(--danger); animation: blink 1s infinite; }
.indicator.rec { color: var(--danger); }
@keyframes blink { 50% { opacity: 0.4; } }
.header-actions {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end;
    gap: var(--space-1); flex-shrink: 0; max-width: 100%;
}
.header-actions .btn-ghost { white-space: nowrap; }

/* Checklist */
.checklist {
    grid-area: checklist; display: flex; align-items: center; flex-wrap: wrap;
    gap: var(--space-2) var(--space-4); row-gap: var(--space-2);
    padding: var(--space-3) var(--space-4); background: var(--bg-panel);
    border-bottom: 1px solid var(--border);
}
.check-item { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-secondary); }
.check-item .check-icon {
    width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--border);
    display: flex; align-items: center; justify-content: center; font-size: 11px;
}
.check-item.ok { color: var(--text); }
.check-item.ok .check-icon { border-color: var(--success); background: var(--success); color: #fff; }
.checklist-hint {
    flex: 1 1 auto; min-width: 120px; text-align: right; font-size: 11px;
    color: var(--text-muted); line-height: 1.4;
}

/* Script panel */
.script-panel {
    grid-area: sidebar; background: var(--bg-panel); border-right: 1px solid var(--border);
    display: flex; flex-direction: column; overflow: hidden;
}
.script-panel.collapsed .script-editor { display: none; }
.script-panel.collapsed .script-preview { display: block; }
.script-panel-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 14px; border-bottom: 1px solid var(--border); font-weight: 600; font-size: 12px;
}
.script-editor { padding: 12px; flex: 1; display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.script-editor textarea {
    flex: 1; min-height: 100px; padding: 10px; border: 1px solid var(--border);
    border-radius: var(--radius-sm); background: var(--bg-input); color: var(--text);
    font: 13px/1.5 var(--font); resize: none;
}
.script-preview {
    display: none; padding: var(--space-3) var(--space-4); font-size: 12px;
    color: var(--text-secondary); line-height: 1.5;
    overflow: hidden; word-break: break-word;
}

/* Teleprompter */
.teleprompter {
    grid-area: main; background: var(--teleprompter-bg); display: flex; flex-direction: column;
    position: relative; min-height: 0;
}
.teleprompter-stage {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 40px 48px; overflow-y: auto; text-align: center;
}
.teleprompter-stage.recording { box-shadow: inset 0 0 0 2px rgba(244,63,94,0.25); }
#currentText {
    color: #fff; font-weight: 500; line-height: 1.5; max-width: 780px; width: 100%;
    font-size: var(--teleprompter-font, 32px); flex-shrink: 0;
}
#progressLine {
    margin-top: var(--space-5); flex-shrink: 0; font-size: 12px;
    color: rgba(255,255,255,0.5); font-variant-numeric: tabular-nums;
}
.teleprompter-empty { color: rgba(255,255,255,0.45); font-size: 16px; max-width: 400px; }

/* Transport */
.transport {
    grid-area: transport; background: var(--bg-panel); border-top: 1px solid var(--border);
    padding: var(--space-3) var(--space-4); display: flex; flex-direction: column;
    gap: var(--space-2); min-height: 0; max-height: min(42vh, 300px); overflow-y: auto;
}
.transport-primary { display: flex; gap: var(--space-2); align-items: stretch; }
.transport-primary .btn { flex: 1; min-width: 0; }
.transport-secondary { display: flex; gap: 8px; }
.transport-secondary .btn { flex: 1; font-size: 12px; padding: 8px; }
.transport-hints { text-align: center; font-size: 13px; color: var(--text-muted); }
.transport-hints kbd {
    display: inline-block; padding: 3px 8px; margin: 0 2px; border-radius: 4px;
    background: var(--bg-elevated); border: 1px solid var(--border); font: 11px monospace; color: var(--accent);
}
.transport-hint-warn { font-size: 11px; color: var(--warning); text-align: center; min-height: 16px; }
.transport-timer { text-align: center; font: 600 14px monospace; color: var(--danger); }
.transport.recording-mode .transport-secondary { display: none; }
.transport.recording-mode .transport-primary .btn:not(#recordBtn) { display: none; }
.transport.merging .btn { pointer-events: none; opacity: 0.7; }
.transport.merging #mergeBtn { opacity: 1; pointer-events: auto; }

.shoot-bar {
    display: none; align-items: center; gap: var(--space-3);
    font-size: 12px; color: var(--text-secondary); white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}
#studio.shoot-mode .shoot-bar { display: flex !important; }
#studio.shoot-mode .header-indicators { display: none !important; }
#studio.shoot-mode .header-center { justify-content: center; }

.video-preview-modal video { width: 100%; max-height: 70vh; border-radius: var(--radius); background: #000; }
.text-muted { color: var(--text-muted); font-weight: normal; font-size: 11px; }
.license-badge {
    display: inline-block; padding: 4px 12px; border-radius: 99px; font-size: 12px; font-weight: 600;
    background: var(--bg-elevated); border: 1px solid var(--border); margin-bottom: var(--space-2);
}
.license-badge.pro { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.license-hint { font-size: 12px; color: var(--text-secondary); line-height: 1.45; margin-bottom: var(--space-3); }
.electron-app .license-badge { border-color: var(--accent); }

.block-strip {
    display: flex; gap: var(--space-1); overflow-x: auto; padding: var(--space-1) 0;
    justify-content: center; flex-shrink: 0;
}
.transport-timer { flex-shrink: 0; }
.block-dot {
    width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; cursor: pointer;
    background: var(--bg-elevated); border: 1px solid var(--border); transition: transform 0.15s;
}
.block-dot.pending { background: var(--bg-elevated); }
.block-dot.current { background: var(--accent); border-color: var(--accent); transform: scale(1.2); }
.block-dot.recorded { background: var(--warning); border-color: var(--warning); }
.block-dot.recording { background: var(--danger); border-color: var(--danger); }
.block-dot.accepted { background: var(--success); border-color: var(--success); }
.block-dot.skipped { opacity: 0.35; }

.match-bar-wrap {
    display: flex; align-items: center; gap: var(--space-3);
    font-size: 11px; color: var(--text-secondary); flex-shrink: 0;
}
.match-bar { flex: 1; height: 4px; background: var(--bg-elevated); border-radius: 99px; overflow: hidden; }
.match-fill { height: 100%; width: 0; background: var(--danger); transition: width 0.3s; }

/* Modal */
.modal-overlay {
    position: fixed; inset: 0; z-index: 400; background: rgba(0,0,0,0.5);
    display: flex; align-items: center; justify-content: center; padding: 24px;
}
.modal {
    width: min(520px, 100%); max-height: 90vh; overflow-y: auto;
    background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius);
}
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.modal-header h2 { font-size: 16px; font-weight: 600; }
.modal-tabs { display: flex; border-bottom: 1px solid var(--border); }
.modal-tab {
    flex: 1; padding: 10px; border: none; background: transparent; color: var(--text-muted);
    font: 500 12px var(--font); cursor: pointer; border-bottom: 2px solid transparent;
}
.modal-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.modal-body { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
.modal-section { display: flex; flex-direction: column; gap: var(--space-3); }
.modal-section.hidden { display: none; }
.form-group { margin: 0; }
.form-group label { display: block; font-size: 11px; font-weight: 600; color: var(--text-secondary); margin-bottom: var(--space-2); }
.form-check {
    display: flex; align-items: center; gap: var(--space-2); font-size: 13px;
    cursor: pointer; padding: var(--space-1) 0;
}
.form-check input { width: 16px; height: 16px; accent-color: var(--accent); flex-shrink: 0; }
.form-input {
    width: 100%; padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--bg-input); color: var(--text); font: 13px var(--font);
}
.form-input:focus { outline: none; border-color: var(--accent); }
.obs-guide { border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.obs-guide summary { padding: 10px 12px; font-weight: 600; font-size: 12px; cursor: pointer; }
.obs-guide ol { padding: 0 12px 12px 28px; font-size: 12px; color: var(--text-secondary); line-height: 1.55; }
.obs-guide code { font-size: 11px; padding: 1px 4px; background: var(--bg-elevated); border-radius: 3px; }
.radio-row { display: flex; flex-direction: column; gap: 6px; }
.radio-row label { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }

/* Side panel archive */
.side-panel { position: fixed; inset: 0; z-index: 350; pointer-events: none; }
.side-panel:not(.hidden) { pointer-events: auto; }
.side-panel-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.45); opacity: 0; transition: opacity 0.2s; }
.side-panel:not(.hidden) .side-panel-backdrop { opacity: 1; }
.side-panel-sheet {
    position: absolute; top: 0; right: 0; width: min(380px, 100%); height: 100%;
    background: var(--bg-panel); border-left: 1px solid var(--border);
    display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.25s;
}
.side-panel:not(.hidden) .side-panel-sheet { transform: translateX(0); }
.side-panel-header {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
    padding: var(--space-4); border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.side-panel-header h2 { font-size: 15px; font-weight: 600; margin: 0; }
.side-panel-toolbar { padding: 12px 16px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; }
.archive-filter { display: flex; gap: 4px; }
.archive-filter button { flex: 1; padding: 6px; font-size: 11px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-elevated); color: var(--text-secondary); cursor: pointer; }
.archive-filter button.active { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.side-panel-body { flex: 1; overflow-y: auto; padding: 12px 16px; }
.video-item {
    display: flex; gap: var(--space-3); padding: var(--space-3);
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    margin-bottom: var(--space-2); align-items: center;
}
.video-item:hover { background: var(--bg-elevated); }
.video-item-info { flex: 1; min-width: 0; }
.video-item .btn-icon {
    width: 32px; height: 32px; padding: 0; border: 1px solid var(--border);
    border-radius: var(--radius-sm); background: var(--bg-elevated); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.video-item .btn-icon .icon { width: 14px; height: 14px; }
.video-name { font-weight: 600; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.video-meta { font-size: 10px; color: var(--text-muted); }
.empty-state { text-align: center; padding: 32px 16px; color: var(--text-muted); font-size: 12px; }

/* Toasts */
#toastContainer {
    position: fixed; bottom: var(--space-4); right: var(--space-4); z-index: 500;
    display: flex; flex-direction: column; gap: var(--space-2); max-width: min(320px, calc(100vw - 32px));
    pointer-events: none;
}
.toast {
    padding: var(--space-3) var(--space-4); border-radius: var(--radius);
    background: var(--bg-panel); border: 1px solid var(--border);
    box-shadow: 0 4px 20px rgba(0,0,0,0.3); font-size: 13px;
    line-height: 1.45; animation: slideIn 0.25s ease; pointer-events: auto;
}
.toast .btn { margin-top: var(--space-2); }
.toast.success { border-left: 3px solid var(--success); }
.toast.warning { border-left: 3px solid var(--warning); }
.toast.error { border-left: 3px solid var(--danger); display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
@keyframes slideIn { from { transform: translateX(20px); opacity: 0; } }

#debugPanel {
    position: fixed; bottom: 0; left: 0; right: 0; max-height: 120px; overflow: auto;
    background: rgba(0,0,0,0.85); color: #aaa; font: 10px monospace; padding: 8px; z-index: 600;
}

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (max-width: 900px) {
    .header-actions .btn-ghost { padding: 6px 8px; font-size: 11px; }
    .teleprompter-stage { padding: var(--space-5) var(--space-4); }
}

@media (max-width: 768px) {
    #studio {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "header"
            "checklist"
            "sidebar"
            "main"
            "transport";
    }
    #studio.shoot-mode {
        grid-template-areas: "header" "main" "transport";
    }
    .script-panel {
        max-height: 28vh; border-right: none; border-bottom: 1px solid var(--border);
    }
    .checklist-hint { flex: 1 1 100%; text-align: left; margin-top: var(--space-1); }
    .transport-primary { flex-wrap: wrap; }
    .transport-primary .btn { flex: 1 1 calc(50% - 4px); min-width: 120px; }
    .transport-primary .btn#recordBtn { flex: 1 1 100%; }
    #launcher { padding: 0 var(--space-4) var(--space-4); }
    .launcher-bar { margin: 0 calc(-1 * var(--space-4)); padding: 0 var(--space-4); }
}