/* =========================================================
   set.css — shared styles for index.php & transcript.php
   Strict CSP: no inline styles, no inline scripts.
   Dark theme matching the parent site palette.
   ========================================================= */

/* ── Custom properties ── */
:root[data-theme="dark"] {
    --bg:           #0f172a;
    --surface:      #161b22;
    --surface-alt:  #1c2433;
    --border:       #30363d;
    --border-focus: #58a6ff;
    --accent:       #1f6feb;
    --accent-hover: #388bfd;
    --accent-muted: #1f6feb33;
    --success:      #238636;
    --success-text: #3fb950;
    --warning:      #9e6a03;
    --warning-bg:   #161205;
    --warning-text: #e3b341;
    --danger:       #da3633;
    --danger-bg:    #160b0b;
    --danger-text:  #f85149;
    --premium:      #b08800;
    --premium-bg:   #1c1700;
    --premium-text: #ffd700;
    --text:         #e6edf3;
    --text-muted:   #8b949e;
    --text-dim:     #6e7681;
    --radius:       8px;
    --radius-lg:    12px;
    --radius-sm:    4px;
    --shadow:       0 4px 16px rgba(0,0,0,.4);
    --transition:   180ms ease;
}

/* ── Light skin (the site default) ──
   This app keeps its own palette (it predates /themeV0.01.css and uses a different
   set of names), so it needs its own light mapping. Radii and the transition
   are layout, not skin, and are left alone. */
:root {
    --bg:           #ffffff;
    --surface:      #ffffff;
    --surface-alt:  #f5f5f7;
    --border:       #d2d2d7;
    --border-focus: #0066cc;
    --accent:       #0066cc;
    --accent-hover: #0055b3;
    --accent-muted: #0066cc1a;
    --success:      #1a7f37;
    --success-text: #1a7f37;
    --warning:      #8a5a00;
    --warning-bg:   #fbf4d8;
    --warning-text: #7a5c00;
    --danger:       #b3261e;
    --danger-bg:    #fdecea;
    --danger-text:  #b3261e;
    --premium:      #8a6d00;
    --premium-bg:   #fdf6d8;
    --premium-text: #7a5c00;
    --text:         #1d1d1f;
    --text-muted:   #6e6e73;
    --text-dim:     #86868b;
    --shadow:       0 4px 16px rgba(0,0,0,.08);
}

/* ── Reset & base ── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html { scroll-behavior: smooth; }

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.6;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
}

body.has-topbar { padding-top: 48px; }

a { color: var(--accent-hover); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { font-weight: 600; line-height: 1.3; }
h1 { font-size: 1.75rem; margin-bottom: .5rem; }
h2 { font-size: 1.2rem;  margin-bottom: .75rem; color: var(--text); }
h3 { font-size: 1rem;    margin-bottom: .5rem; }

/* ── Layout ── */
.container {
    max-width: 760px;
    margin: 0 auto;
    padding: 24px 16px 60px;
}

/* ── Navigation ── */
.nav {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 28px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}

.nav a {
    color: var(--text-muted);
    padding: 5px 12px;
    border-radius: var(--radius-sm);
    font-size: .875rem;
    transition: color var(--transition), background var(--transition);
}

.nav a:hover {
    color: var(--text);
    background: var(--surface-alt);
    text-decoration: none;
}

.nav a.active {
    color: var(--accent-hover);
    background: var(--accent-muted);
    font-weight: 600;
}

/* ── Section card ── */
.section {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 20px;
    margin-bottom: 16px;
}

/* ── Hint / muted text ── */
.hint {
    color: var(--text-muted);
    font-size: .875rem;
    margin-bottom: 8px;
}

/* ── Drop zone ── */
.drop-zone {
    border: 2px dashed var(--border);
    border-radius: var(--radius-lg);
    padding: 36px 20px;
    text-align: center;
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition);
    position: relative;
}

.drop-zone:hover,
.drop-zone.drag-over {
    border-color: var(--accent-hover);
    background: var(--accent-muted);
}

.drop-zone.has-file {
    border-color: var(--success-text);
    border-style: solid;
    background: rgba(35,134,54,.08);
}

.drop-zone-icon {
    font-size: 2.5rem;
    display: block;
    margin-bottom: 10px;
}

.drop-zone p {
    color: var(--text-muted);
    font-size: .9rem;
}

.drop-zone .drop-label-main {
    color: var(--text);
    font-weight: 600;
    font-size: 1rem;
    display: block;
    margin-bottom: 6px;
}

.file-input-hidden {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

/* ── File info strip ── */
.file-info {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 14px;
    margin-top: 10px;
    font-size: .875rem;
}

.file-info-name {
    font-weight: 600;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-info-meta {
    color: var(--text-muted);
    white-space: nowrap;
}

.file-info-duration {
    color: var(--text-muted);
}

.file-info-duration.over-limit {
    color: var(--warning-text);
    font-weight: 600;
}

/* ── Banners ── */
.banner {
    border-radius: var(--radius-lg);
    padding: 16px 20px;
    margin-bottom: 16px;
    border: 1px solid transparent;
}

.banner-warning {
    background: var(--warning-bg);
    border-color: var(--warning);
    color: var(--warning-text);
}

.banner-danger {
    background: var(--danger-bg);
    border-color: var(--danger);
    color: var(--danger-text);
}

.banner-premium {
    background: var(--premium-bg);
    border-color: var(--premium);
    color: var(--premium-text);
}

.banner h3 {
    font-size: .95rem;
    margin-bottom: 6px;
}

.banner p { font-size: .875rem; }

.banner a {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
}

/* ── Preset tabs ── */
.preset-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.preset-tab {
    background: var(--surface-alt);
    border: 1px solid var(--border);
    color: var(--text-muted);
    padding: 7px 18px;
    border-radius: var(--radius);
    cursor: pointer;
    font-size: .875rem;
    font-weight: 500;
    transition: all var(--transition);
}

.preset-tab:hover {
    border-color: var(--accent);
    color: var(--text);
}

.preset-tab.active {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
    font-weight: 600;
}

/* ── Preset summary ── */
.preset-summary {
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 16px;
    font-size: .85rem;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.preset-summary strong {
    color: var(--text);
}

.preset-summary-row {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.preset-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 2px 10px;
    font-size: .8rem;
    margin: 2px 2px 2px 0;
}

/* ── Control groups ── */
.controls { margin-top: 12px; }

.control-group {
    margin-bottom: 16px;
}

.control-group:last-child { margin-bottom: 0; }

.control-label {
    display: block;
    font-size: .875rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 6px;
}

.control-hint {
    font-size: .8rem;
    color: var(--text-muted);
    margin-top: 4px;
}

/* ── Form elements ── */
select,
input[type="number"],
input[type="text"] {
    background: var(--surface-alt);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: var(--radius-sm);
    padding: 7px 10px;
    font-size: .875rem;
    width: 100%;
    outline: none;
    transition: border-color var(--transition);
    appearance: auto;
}

select:focus,
input[type="number"]:focus,
input[type="text"]:focus {
    border-color: var(--border-focus);
}

input[type="range"] {
    width: 100%;
    accent-color: var(--accent);
    cursor: pointer;
}

.range-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.range-value {
    min-width: 28px;
    text-align: center;
    font-weight: 600;
    color: var(--accent-hover);
    font-size: .875rem;
}

/* ── Radio / checkbox rows ── */
.radio-row,
.checkbox-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.radio-option,
.checkbox-option {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 6px 12px;
    cursor: pointer;
    font-size: .875rem;
    transition: border-color var(--transition), background var(--transition);
    user-select: none;
}

.radio-option:hover,
.checkbox-option:hover {
    border-color: var(--accent);
}

.radio-option input[type="radio"],
.checkbox-option input[type="checkbox"] {
    width: auto;
    accent-color: var(--accent);
    cursor: pointer;
}

.radio-option.selected,
.checkbox-option.selected {
    border-color: var(--accent);
    background: var(--accent-muted);
}

/* ── Stem count selector ── */
.stem-count-grid {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.stem-count-btn {
    flex: 1;
    min-width: 60px;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 8px;
    text-align: center;
    cursor: pointer;
    transition: all var(--transition);
    color: var(--text);
}

.stem-count-btn:hover { border-color: var(--accent); }

.stem-count-btn.active {
    background: var(--accent-muted);
    border-color: var(--accent);
    color: var(--accent-hover);
    font-weight: 600;
}

.stem-count-btn .stem-num {
    display: block;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 2px;
}

.stem-count-btn .stem-desc {
    font-size: .7rem;
    color: var(--text-muted);
    line-height: 1.2;
}

.stem-count-btn.active .stem-desc { color: var(--accent-hover); }

/* ── Format selector ── */
.format-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
}

.format-tab {
    flex: 1;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 8px;
    text-align: center;
    cursor: pointer;
    font-size: .875rem;
    font-weight: 500;
    color: var(--text-muted);
    transition: all var(--transition);
    position: relative;
}

.format-tab:hover { border-color: var(--accent); color: var(--text); }

.format-tab.active {
    background: var(--accent-muted);
    border-color: var(--accent);
    color: var(--accent-hover);
    font-weight: 700;
}

.format-tab.premium-lock {
    border-color: var(--premium);
    color: var(--premium-text);
}

.format-tab.premium-lock.active {
    background: var(--premium-bg);
}

.premium-badge {
    display: inline-block;
    background: var(--premium);
    color: #000;
    font-size: .65rem;
    font-weight: 700;
    border-radius: 4px;
    padding: 1px 5px;
    vertical-align: middle;
    margin-left: 4px;
    letter-spacing: .03em;
}

.format-sub {
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px;
    margin-top: 4px;
}

/* ── Buttons ── */
.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--accent);
    color: var(--on-accent);
    border: none;
    padding: 12px 28px;
    border-radius: var(--radius);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
    margin-bottom: 16px;
    transition: background var(--transition);
}

.btn-primary:hover:not(:disabled) { background: var(--accent-hover); }

.btn-primary:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 7px 16px;
    border-radius: var(--radius);
    font-size: .875rem;
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition);
}

.btn-secondary:hover { border-color: var(--accent); }

/* ── Status panel ── */
.status-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 20px;
    margin-bottom: 16px;
}

.status-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.status-badge {
    display: inline-block;
    padding: 1px 12px;
    border-radius: 20px;
    font-size: .8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 0.6rem;
}

.status-badge.queued    { background: #444;              color: #ccc; }
.status-badge.uploading { background: var(--accent);     color: var(--on-accent); }
.status-badge.processing{ background: var(--warning);    color: #000; }
.status-badge.done      { background: var(--success);    color: var(--on-accent); }
.status-badge.error     { background: var(--danger);     color: var(--on-accent); }

/* ── Progress ── */
.progress-wrap {
    position: relative;
    height: 22px;
    background: var(--surface-alt);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 10px;
}

.progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--accent), var(--accent-hover));
    border-radius: 10px;
    transition: width .35s ease;
}

.progress-bar.done {
    background: linear-gradient(90deg, var(--success), var(--success-text));
}

/* Percentage label centred over the bar (legible on both filled & empty parts). */
.progress-pct {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .72rem;
    font-weight: 600;
    color: var(--text-strong);
    letter-spacing: .3px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .55);
    pointer-events: none;
}

.status-meta {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    font-size: .85rem;
    color: var(--text-muted);
    margin-bottom: 12px;
}

.status-meta span b { color: var(--text); }

/* ── Step list ── */
.step-list {
    list-style: none;
    margin: 0 0 10px;
}

.step-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 4px 0;
    font-size: .85rem;
    color: var(--text-muted);
}

.step-item.active {
    color: var(--text);
    font-weight: 600;
}

.step-item.completed { color: var(--success-text); }

.step-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--border);
    flex-shrink: 0;
    margin-top: 6px;
}

.step-item.active    .step-dot { background: var(--warning-text); }
.step-item.completed .step-dot { background: var(--success-text); }

/* ── Log box ── */
.log-box {
    background: #0d1117;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 12px;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: .78rem;
    color: var(--text-muted);
    max-height: 160px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-all;
    margin-top: 10px;
}

/* ── Result cards ── */
.result-card {
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px;
    margin-bottom: 10px;
}

.result-card h3 {
    font-size: .9rem;
    font-weight: 600;
    margin-bottom: 8px;
    text-transform: capitalize;
}

.result-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.waveform-wrap {
    position: relative;
    min-height: 72px;            /* reserve the WaveSurfer height so the waiter is visible during transfer */
    background: #0d1117;
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 6px;
}

/* ── Track-transfer waiter ──
   Shown inside each waveform while the finished stem (can be hundreds of MB)
   downloads from the server; removed once WaveSurfer has the file and is ready. */
.wave-waiter {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 12px;
    background: #0d1117;
    color: var(--text-muted);
    font-size: .8rem;
    text-align: center;
    z-index: 2;
}

.wave-waiter-spin {
    flex: none;
    width: 18px;
    height: 18px;
    border: 2px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: wave-waiter-spin .8s linear infinite;
}

.wave-waiter.is-error { color: var(--danger-text); }

@keyframes wave-waiter-spin { to { transform: rotate(360deg); } }

/* ── Transcript output ── */
.transcript-output {
    background: #0d1117;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px;
    font-size: .875rem;
    line-height: 1.7;
    max-height: 420px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-word;
    margin-top: 10px;
}

/* ── Language grid ── */
.lang-select-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* ── Utility ── */
.hidden { display: none !important; }
.mt4    { margin-top: 4px; }
.mt8    { margin-top: 8px; }
.mt12   { margin-top: 12px; }
.mt16   { margin-top: 16px; }
.mb8    { margin-bottom: 8px; }
.flex   { display: flex; }
.gap8   { gap: 8px; }
.flex-end { justify-content: flex-end; }

/* ── Modal dialogs (CSP-safe; replace window.alert / window.confirm) ── */
.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, .6);
    backdrop-filter: blur(2px);
}

.modal-dialog {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    width: 100%;
    max-width: 460px;
    max-height: 85vh;
    overflow-y: auto;
    padding: 20px;
}

.modal-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 10px;
    color: var(--text);
}

.modal-message {
    font-size: .9rem;
    line-height: 1.55;
    color: var(--text-muted);
    word-break: break-word;
}

.modal-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    flex-wrap: wrap;
    margin-top: 18px;
}

/* Buttons inside a modal are inline-sized, not full-width like the page CTA. */
.modal-actions .btn-primary,
.modal-actions .btn-secondary {
    width: auto;
    min-width: 96px;
    margin-bottom: 0;
    padding: 9px 18px;
    font-size: .9rem;
}

/* ── Queue info ── */
.queue-box {
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius);
    padding: 10px 14px;
    font-size: .875rem;
    margin-bottom: 10px;
}

/* FOOTER */
.footer {
    margin-top: 40px;
    padding: 20px;
    background: var(--panel);
    border-top: 1px solid var(--border);
    color: var(--text-dim);
    font-size: 13px;
    text-align: center;
}

.footer {
    margin-top: 40px;
    padding: 24px 20px;
    background: var(--panel);
    border-top: 1px solid var(--border);
    color: var(--text-dim);
    font-size: 13px;
}

/* These two duplicate /themeV0.01.css on purpose: the `input[type="text"]` rule
   near the top of this file has the SAME specificity as `.msg-box input`, so
   with the shared copy loaded earlier it would win and restyle the footer
   message box. Keeping them here puts them back after the collision. */
.msg-box {
    margin-top: 8px;
    display: flex;
    gap: 6px;
}

.msg-box input {
    flex: 1;
    padding: 6px 8px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--panel-light);
    color: var(--text);
    font-size: 12px;
}

.msg-status {
    transition: color .15s ease;
}

.hidden {
    display: none;
}

.mt8 {
    margin-top: 8px;
}

.mt12 {
    margin-top: 12px;
}

.mt30 {
    margin-top: 30px;
}

.maxw120 {
    max-width: 120px;
}

/* ── Premium: thread selector ── */
.thread-grid {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.thread-btn {
    flex: 1;
    min-width: 80px;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 8px;
    text-align: center;
    cursor: pointer;
    transition: all var(--transition);
    color: var(--text);
    font-size: .9rem;
}

.thread-btn:hover { border-color: var(--accent); }

.thread-btn.active {
    background: var(--accent-muted);
    border-color: var(--accent);
    color: var(--accent-hover);
    font-weight: 600;
}

/* ── Premium: estimate box ── */
.estimate-box {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin-top: 14px;
    padding: 12px 14px;
    background: var(--premium-bg);
    border: 1px solid var(--premium);
    border-radius: var(--radius);
    color: var(--premium-text);
    font-size: .9rem;
}

.estimate-item strong { color: var(--text-strong); }

/* ── Responsive ── */
@media (max-width: 640px) {
    .container       { padding: 18px 12px 48px; }
    .section         { padding: 16px 14px; }
    h1               { font-size: 1.4rem; }

    .nav             { gap: 2px; }
    .nav a           { padding: 8px 10px; }      /* roomier tap targets */

    .preset-tabs    { gap: 4px; }
    .preset-tab     { padding: 8px 12px; font-size: .8rem; }
    .format-tabs    { flex-wrap: wrap; }
    .lang-select-row{ grid-template-columns: 1fr; }
    .stem-count-grid{ gap: 4px; }
    .thread-grid    { gap: 4px; }
    .thread-btn     { padding: 12px 8px; }
    .estimate-box   { flex-direction: column; gap: 6px; }
    .status-meta    { gap: 10px; }

    /* Stack radio/checkbox options full-width so long labels (e.g. the
       "Save to my storage…" delivery option) stay readable and tappable. */
    .radio-row,
    .checkbox-row   { flex-direction: column; align-items: stretch; }
    .radio-option,
    .checkbox-option{ width: 100%; padding: 11px 12px; }

    /* 16px form controls stop iOS Safari from zooming in on focus. */
    select,
    input[type="text"],
    input[type="number"] { font-size: 16px; }
}