/*
  AI AutoCute Pro — isolated, self-contained styles.
  - All classes prefixed `.aacpro-*` to avoid collisions with autocut.html, autocut-redesign.html, autosub-pro.
  - All custom properties prefixed `--aacpro-*` (scoped via .aacpro-root).
  - Reads design tokens (--text-muted, etc.) from existing tokens-base.css without overriding them.
  - No !important. No descendant selectors that could leak into other views.
*/

.aacpro-root {
    --aacpro-ink: #182033;
    --aacpro-muted: #667085;
    --aacpro-line: #dce2ec;
    --aacpro-page: #f3f6fb;
    --aacpro-panel: #ffffff;
    --aacpro-accent: #6d28d9;
    --aacpro-accent-soft: #ede9fe;
    --aacpro-pro-gold: #f59e0b;
    --aacpro-pro-gold-soft: #fef3c7;
    --aacpro-good: #10b981;
    --aacpro-bad: #ef4444;
    --aacpro-shadow: 0 8px 24px rgba(22, 34, 65, .06);
    color: var(--aacpro-ink);
}

/* ----- Header ----- */
.aacpro-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.aacpro-header h2 {
    margin: 0 0 4px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.aacpro-header p {
    margin: 0;
    color: var(--aacpro-muted);
    font-size: 13px;
}

.aacpro-pro-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    box-shadow: 0 2px 6px rgba(245, 158, 11, .35);
}

/* ----- Mode selector (Pro exclusive) ----- */
.aacpro-mode-bar {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 16px 20px;
    margin-bottom: 18px;
    border: 1px solid var(--aacpro-line);
    border-radius: 14px;
    background: linear-gradient(135deg, #faf5ff 0%, #fff 60%);
    box-shadow: var(--aacpro-shadow);
}

.aacpro-mode-copy {
    flex: 0 1 220px;
}

.aacpro-mode-copy h3 {
    margin: 0 0 4px;
    font-size: 15px;
}

.aacpro-mode-copy p {
    margin: 0;
    color: var(--aacpro-muted);
    font-size: 12px;
}

.aacpro-mode-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    flex: 1;
    gap: 10px;
}

.aacpro-mode-card {
    min-height: 64px;
    padding: 10px 12px;
    border: 1px solid var(--aacpro-line);
    border-radius: 10px;
    background: #fff;
    color: var(--aacpro-ink);
    text-align: left;
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .12s ease;
    font: inherit;
}

.aacpro-mode-card strong,
.aacpro-mode-card span { display: block; }
.aacpro-mode-card strong { font-size: 13px; }
.aacpro-mode-card span { margin-top: 3px; color: var(--aacpro-muted); font-size: 11px; line-height: 1.35; }

.aacpro-mode-card:hover,
.aacpro-mode-card:focus-visible {
    border-color: var(--aacpro-accent);
    transform: translateY(-1px);
}

.aacpro-mode-card.is-active {
    border-color: var(--aacpro-accent);
    background: var(--aacpro-accent-soft);
    box-shadow: 0 0 0 1px var(--aacpro-accent);
}

/* ----- Steps ----- */
.aacpro-steps {
    display: flex;
    align-items: center;
    gap: 0;
    margin: 20px 0;
    padding: 0 12px;
}

.aacpro-step {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--aacpro-muted);
    font-size: 13px;
    font-weight: 600;
    transition: color .16s ease;
}

.aacpro-step.is-active { color: var(--aacpro-ink); }
.aacpro-step.is-done { color: var(--aacpro-good); }

.aacpro-step-circle {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid currentColor;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
}

.aacpro-step.is-active .aacpro-step-circle {
    background: var(--aacpro-accent);
    border-color: var(--aacpro-accent);
    color: #fff;
}

.aacpro-step-connector {
    flex: 1;
    height: 2px;
    background: var(--aacpro-line);
    margin: 0 12px;
}

.aacpro-step-connector.is-done { background: var(--aacpro-good); }

/* ----- Panel (mirrors .autosub-pro panel look) ----- */
.aacpro-panel,
.aacpro-root .aacpro-panel {
    border: 1px solid var(--aacpro-line);
    border-radius: 14px;
    background: var(--aacpro-panel);
    box-shadow: var(--aacpro-shadow);
    margin-bottom: 18px;
    overflow: hidden;
}

.aacpro-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--aacpro-line);
}

.aacpro-panel-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--aacpro-ink);
}

.aacpro-panel-body { padding: 20px; }

.aacpro-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 6px;
    background: var(--aacpro-accent-soft);
    color: var(--aacpro-accent);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.aacpro-badge-running {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #fff;
}

/* ----- Drop zone ----- */
.aacpro-drop-zone {
    padding: 40px 20px;
    border: 2px dashed var(--aacpro-line);
    border-radius: 12px;
    background: #fafbff;
    text-align: center;
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease;
}

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

.aacpro-drop-zone-icon { font-size: 42px; }
.aacpro-drop-zone-title { font-size: 15px; font-weight: 600; margin-top: 8px; }
.aacpro-drop-zone-hint { font-size: 12px; color: var(--aacpro-muted); margin-top: 4px; }

.aacpro-file-input-hidden { display: none; }
.aacpro-selected-files { margin-top: 16px; }
.aacpro-selected-files:empty { display: none; }

/* ----- Buttons ----- */
.aacpro-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    border-radius: 8px;
    border: 1px solid var(--aacpro-line);
    background: #fff;
    color: var(--aacpro-ink);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background .14s ease, border-color .14s ease, transform .12s ease;
    text-decoration: none;
}

.aacpro-btn:hover { border-color: var(--aacpro-accent); }
.aacpro-btn:active { transform: translateY(1px); }
.aacpro-btn[disabled] { opacity: .5; cursor: not-allowed; }

.aacpro-btn-primary {
    background: var(--aacpro-accent);
    border-color: var(--aacpro-accent);
    color: #fff;
}

.aacpro-btn-primary:hover {
    background: #5b21b6;
    border-color: #5b21b6;
}

.aacpro-btn-outline { background: #fff; }

.aacpro-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
}

.aacpro-actions-center { justify-content: center; }

.aacpro-empty {
    text-align: center;
    color: var(--aacpro-muted);
    padding: 20px;
    font-size: 13px;
}

/* ----- Form fields ----- */
.aacpro-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 16px;
}

.aacpro-fields-advanced { margin-top: 14px; }

.aacpro-field {
    display: grid;
    gap: 6px;
    color: #344054;
    font-size: 12px;
    font-weight: 700;
}

.aacpro-field.wide { grid-column: 1 / -1; }

.aacpro-field input,
.aacpro-field select {
    min-width: 0;
    width: 100%;
    min-height: 38px;
    padding: 8px 10px;
    border: 1px solid var(--aacpro-line);
    border-radius: 7px;
    background: #fff;
    color: var(--aacpro-ink);
    font: inherit;
    font-weight: 500;
}

.aacpro-field input:focus,
.aacpro-field select:focus {
    outline: 2px solid rgba(109, 40, 217, .22);
    border-color: var(--aacpro-accent);
}

.aacpro-toggle {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--aacpro-line);
    border-radius: 8px;
    background: #fff;
    color: #344054;
    cursor: pointer;
}

.aacpro-toggle input {
    width: 17px;
    height: 17px;
    margin: 2px 0 0;
    accent-color: var(--aacpro-accent);
}

.aacpro-toggle strong,
.aacpro-toggle small { display: block; }
.aacpro-toggle small { margin-top: 2px; color: var(--aacpro-muted); font-size: 12px; font-weight: 500; }

/* ----- Advanced collapsible ----- */
.aacpro-advanced {
    border: 1px solid var(--aacpro-line);
    border-radius: 10px;
    padding: 0;
    margin-bottom: 16px;
    background: #fafbff;
}

.aacpro-advanced summary {
    list-style: none;
    cursor: pointer;
    padding: 12px 16px;
    font-weight: 700;
    color: var(--aacpro-accent);
    user-select: none;
}

.aacpro-advanced summary::-webkit-details-marker { display: none; }
.aacpro-advanced summary::before {
    content: "▸";
    display: inline-block;
    margin-right: 8px;
    transition: transform .14s ease;
}

.aacpro-advanced[open] summary::before {
    transform: rotate(90deg);
}

.aacpro-advanced > .aacpro-fields {
    padding: 0 16px 16px;
    margin: 0;
}

/* ----- Progress ----- */
.aacpro-progress-bar {
    width: 100%;
    height: 10px;
    background: var(--aacpro-line);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 8px;
}

.aacpro-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #6d28d9, #a78bfa);
    border-radius: 999px;
    transition: width .2s ease;
}

.aacpro-progress-text {
    text-align: center;
    color: var(--aacpro-muted);
    font-size: 13px;
    font-weight: 600;
}

.aacpro-progress-ring {
    position: relative;
    width: 160px;
    height: 160px;
    margin: 0 auto 18px;
}

.aacpro-ring-bg {
    fill: none;
    stroke: var(--aacpro-line);
}

.aacpro-ring-fill {
    fill: none;
    stroke: var(--aacpro-accent);
    stroke-linecap: round;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
    stroke-dasharray: 452;
    stroke-dashoffset: 452;
    transition: stroke-dashoffset .3s ease;
}

.aacpro-ring-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    font-weight: 800;
    color: var(--aacpro-ink);
}

.aacpro-status-text {
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    color: var(--aacpro-ink);
    margin-bottom: 14px;
}

/* ----- Log ----- */
.aacpro-log {
    max-height: 220px;
    overflow-y: auto;
    background: #0f172a;
    color: #cbd5e1;
    border-radius: 8px;
    padding: 12px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    line-height: 1.5;
}

.aacpro-log-entry { white-space: pre-wrap; word-break: break-word; }
.aacpro-log-entry.is-error { color: #fca5a5; }
.aacpro-log-entry.is-success { color: #86efac; }

/* ----- Result stats ----- */
.aacpro-result-body { text-align: center; }

.aacpro-result-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin: 18px 0 22px;
}

.aacpro-stat {
    padding: 16px 12px;
    background: var(--aacpro-accent-soft);
    border-radius: 12px;
}

.aacpro-stat-value {
    font-size: 22px;
    font-weight: 800;
    color: var(--aacpro-accent);
    word-break: break-all;
}

.aacpro-stat-label {
    font-size: 11px;
    color: var(--aacpro-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 4px;
}

/* ----- Native output playback ----- */
.aacpro-preview-layout {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(220px, 1fr);
    gap: 18px;
    align-items: start;
}

.aacpro-preview-stage {
    min-width: 0;
}

.aacpro-output-player {
    display: block;
    width: 100%;
    max-height: 68vh;
    background: #000;
    border: 1px solid var(--aacpro-line);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
}

.aacpro-output-selected-name {
    margin-top: 10px;
    color: var(--aacpro-ink);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.aacpro-output-playback-status {
    min-height: 22px;
    margin-top: 4px;
    color: var(--aacpro-muted);
    font-size: 13px;
}

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

.aacpro-preview-chooser {
    display: grid;
    gap: 8px;
    max-height: 68vh;
    overflow-y: auto;
    padding: 12px;
    background: var(--aacpro-accent-soft);
    border: 1px solid var(--aacpro-line);
    border-radius: 12px;
}

.aacpro-preview-chooser-title {
    color: var(--aacpro-ink);
    font-size: 13px;
    font-weight: 800;
}

.aacpro-preview-choice {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--aacpro-line);
    border-radius: 9px;
    background: var(--aacpro-panel);
    color: var(--aacpro-ink);
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    text-align: left;
    overflow-wrap: anywhere;
}

.aacpro-preview-choice:hover,
.aacpro-preview-choice.is-active {
    border-color: var(--aacpro-accent);
    box-shadow: 0 0 0 2px var(--aacpro-accent-soft);
}

.aacpro-file-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 8px;
    padding: 10px 12px;
    background: var(--aacpro-panel);
    border: 1px solid var(--aacpro-line);
    border-radius: 9px;
    color: var(--aacpro-ink);
    font-size: 12px;
    overflow-wrap: anywhere;
}

.aacpro-file-download {
    flex: 0 0 auto;
    color: var(--aacpro-accent);
    font-weight: 800;
    text-decoration: none;
}

.aacpro-file-download:hover {
    text-decoration: underline;
}

/* ----- Responsive ----- */
@media (max-width: 1100px) {
    .aacpro-mode-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 800px) {
    .aacpro-mode-bar { flex-direction: column; align-items: stretch; }
    .aacpro-mode-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .aacpro-fields { grid-template-columns: 1fr; }
    .aacpro-result-stats { grid-template-columns: 1fr; }
    .aacpro-preview-layout { grid-template-columns: 1fr; }
    .aacpro-actions { flex-direction: column; align-items: stretch; }
    .aacpro-actions .aacpro-btn { width: 100%; justify-content: center; }
}