/* =================================================================
   importer.css — Import pipeline UI.
   Source picker, import preview modal (grid + album detail views),
   asset rows, track rows with editable fields, destination preview,
   progress bar and busy overlay.
   ================================================================= */

/* Step indicator + wizard step-2 (tag review) layout. */
.import-step-indicator {
    margin-left: 16px;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(255, 107, 53, 0.15);
    color: var(--accent-primary);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.import-view-tags {
    padding: 20px 24px 40px;
}

.import-tags-step {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.import-tags-card {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: 16px;
}

.import-tags-head {
    display: flex;
    gap: 16px;
    margin-bottom: 14px;
}

.import-tags-cover {
    width: 96px;
    height: 96px;
    border-radius: 10px;
    background-size: cover;
    background-position: center;
    background-color: var(--bg-sidebar);
    flex: 0 0 auto;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Hero — reuses .cdplayer-hero styling for visual parity with the CD
   ripper view. The .import-tags-hero-input modifier overrides the
   default .import-tags-input bordered look so the title / artist /
   year inputs read as plain text until focused. */
.import-tags-card .import-tags-hero {
    margin-bottom: 14px;
}

.import-tags-input.import-tags-hero-input {
    background: transparent;
    border: 1px solid transparent;
    padding: 4px 6px;
    border-radius: 6px;
    transition: background 0.12s, border-color 0.12s;
}
.import-tags-input.import-tags-hero-input:hover {
    background: var(--overlay-hover);
}
.import-tags-input.import-tags-hero-input:focus {
    outline: none;
    background: var(--overlay-selected);
    border-color: var(--accent-primary, #ff6b35);
}
/* number inputs lose their spinner so the borderless meta-row look is
   preserved on year. */
.import-tags-hero .cdplayer-meta-input[type="number"]::-webkit-outer-spin-button,
.import-tags-hero .cdplayer-meta-input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.import-tags-hero .cdplayer-meta-input[type="number"] {
    -moz-appearance: textfield;
}

/* Inline label + input row for the hero's albumArtist + year fields.
   Album title on top stays unlabelled (it's the obvious top-line
   header). Mirrors the tag-editor hero's `.tag-editor-hero-row` so
   the two heroes look identical. */
.import-tags-hero-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
}
.import-tags-hero-row .cdplayer-artist,
.import-tags-hero-row .import-chip-host {
    flex: 1 1 auto;
    min-width: 0;
}
.import-tags-hero-label {
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    flex: 0 0 auto;
}
/* Chip-host inside the hero — ChipInput renders its own structure;
   we just need the host element to fit the hero's flex row and not
   carry the bordered look that the form-section chip-hosts get. */
.import-tags-hero-chip {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 2px 4px;
    transition: background 0.12s, border-color 0.12s;
}
.import-tags-hero-chip:hover {
    background: var(--overlay-hover);
}
.import-tags-hero-chip:focus-within {
    background: var(--overlay-selected);
    border-color: var(--accent-primary, #ff6b35);
}

/* Borrowed cover — this album has no front image of its own but a
   same-titled peer in the import plan does. Subtle dashed accent ring
   tells the user "this cover came from another disc, not this one's
   own files". The execute step still places the cover correctly via
   the importer's existing same-album propagation. */
.cdplayer-cover.import-tags-cover-borrowed {
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.25),
        inset 0 0 0 2px color-mix(in srgb, var(--accent-secondary) 60%, transparent);
}

.import-tags-headmeta {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 14px;
    align-content: start;
}

.import-tags-field {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.import-tags-field span {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.import-tags-input {
    background: var(--bg-dark);
    border: 1px solid var(--border-subtle);
    color: var(--text-primary);
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 13px;
    outline: none;
}

.import-tags-input:focus {
    border-color: var(--accent-primary);
}

.import-tags-summary {
    grid-column: 1 / -1;
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

.import-tags-chips {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 10px 14px;
    margin-bottom: 12px;
}

.import-tags-chipfield label {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 4px;
}

/* Registry-driven section list — mirrors the regular tag editor's
   category groupings so the user sees the same fields they enabled
   in Settings → Tag Fields. */

.import-tags-sections {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 12px;
}

.import-tags-section[data-cat="core"] .import-tags-section-body {
    /* Core is unlabeled; render its fields tighter so it visually
       continues the header card. */
}

.import-tags-section-head {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: 6px;
}

.import-tags-section-body {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 10px 14px;
}

/* textarea fields (Comment, Description) span the full row so the
   user has somewhere comfortable to type. */
.import-tags-fieldrow-textarea {
    grid-column: 1 / -1;
}

/* "Multiple discs" hint shown under the Disc # input when track-level
   disc numbers diverge — typically a Phase-2.5-merged box set. The
   field renders empty so the propagator doesn't flatten the per-track
   values; this hint tells the user what's happening. */
.import-tags-multi-hint {
    display: block;
    margin-top: 4px;
    font-size: 10.5px;
    line-height: 1.3;
    color: var(--accent-primary);
    opacity: 0.85;
}
.import-tags-fieldrow-multi .import-tags-input::placeholder {
    color: var(--accent-primary);
    opacity: 0.55;
}

.import-tags-fieldrow > label {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 4px;
}

.import-tags-fieldrow textarea.import-tags-input {
    background: var(--bg-dark);
    border: 1px solid var(--border-subtle);
    color: var(--text-primary);
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 13px;
    width: 100%;
    box-sizing: border-box;
    resize: vertical;
    font-family: inherit;
    outline: none;
}
.import-tags-fieldrow textarea.import-tags-input:focus {
    border-color: var(--accent-primary);
}

.import-tags-tracks {
    border-top: 1px solid var(--border-subtle);
    padding-top: 10px;
    font-size: 12px;
}

.import-tags-tracks summary {
    cursor: pointer;
    color: var(--text-secondary);
    font-weight: 600;
}

.import-tags-tracks summary:hover {
    color: var(--text-primary);
}

.import-tags-title-list {
    margin: 8px 0 4px;
    padding: 0 0 0 6px;
    list-style: none;
    max-height: 240px;
    overflow-y: auto;
}

.import-tags-title-list li {
    padding: 3px 0;
    color: var(--text-primary);
    display: flex;
    gap: 8px;
    align-items: baseline;
}

.import-tags-title-list .itl-num {
    min-width: 24px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

/* =================================================================
   Import — source picker
   ================================================================= */

.import-picker-content {
    width: 560px;
}

.import-picker-body {
    padding: 22px 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.import-source-btn {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 18px 20px;
    background: var(--bg-dark);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    color: var(--text-primary);
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
    font-family: inherit;
}

.import-source-btn:hover {
    border-color: var(--accent-primary);
    background: rgba(255, 107, 53, 0.05);
    transform: translateY(-1px);
}

.import-source-btn:active {
    transform: translateY(0);
}

.icon-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 12px;
    background: rgba(255, 107, 53, 0.12);
    color: var(--accent-primary);
    flex-shrink: 0;
    transition: background 0.15s ease;
}

.import-source-btn:hover .icon-box {
    background: rgba(255, 107, 53, 0.22);
}

.import-source-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.import-source-text strong {
    font-size: 14px;
    font-weight: 600;
}

.import-source-text span {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.4;
}

/* =================================================================
   Import — preview modal  (styled to match the tag editor language)
   ================================================================= */

.import-preview-content {
    /* Aim for 960px when the viewport is large enough; collapse cleanly
       on 720p screens. */
    width: min(960px, 98vw);
    max-width: 98vw;
    max-height: 92vh;
    /* Simplest reliable pattern: the WHOLE content area is the scroll
       container. Header and footer use position: sticky to pin themselves
       at top / bottom while the body text scrolls past them. No flex/grid
       shrink trickery, no min-content floors to fight. */
    display: block;
    overflow-y: auto;
    overflow-x: hidden;
}

.import-preview-header {
    padding: 20px 24px;
    gap: 14px;
    /* Stick to the top while body scrolls. */
    position: sticky;
    top: 0;
    background: var(--bg-card);
    z-index: 20;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--border-subtle);
}

.import-preview-header h2 {
    flex: 0 0 auto;
    margin-right: 4px;
}

.import-preview-subtitle {
    flex: 1;
    color: var(--text-muted);
    font-size: 12px;
    background: var(--bg-dark);
    padding: 5px 12px;
    border-radius: 15px;
    border: 1px solid var(--border-subtle);
}

.import-preview-body {
    /* No overflow here — the OUTER content is the scroll container now.
       Body just lays out album cards; height grows with content and the
       parent container scrolls past the sticky header/footer. */
    padding: 22px 24px 14px;
    display: flex;
    flex-direction: column;
    gap: 22px;
    background: linear-gradient(180deg, var(--bg-card) 0%, rgba(10, 10, 15, 0.3) 100%);
}

/* ---- Grid view (multi-album overview) ------------------------------- */

.import-view-grid {
    padding: 22px 24px 24px;
}

.import-grid-head {
    margin-bottom: 16px;
}

.import-grid-hint {
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.5;
}

.import-grid-hint strong {
    color: var(--accent-primary);
    font-weight: 600;
}

.import-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 18px;
}

.import-grid-card {
    background: var(--bg-dark);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: 0;
    cursor: pointer;
    color: var(--text-primary);
    font-family: inherit;
    text-align: left;
    overflow: hidden;
    transition: border-color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
    display: flex;
    flex-direction: column;
}

.import-grid-card:hover {
    border-color: var(--accent-primary);
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 107, 53, 0.2);
}

.import-grid-card:active {
    transform: translateY(0);
}

.import-grid-cover {
    aspect-ratio: 1 / 1;
    width: 100%;
    background-size: cover;
    background-position: center;
    background-color: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid var(--border-subtle);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.import-grid-cover-empty {
    color: var(--text-muted);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-style: italic;
}

.import-grid-info {
    padding: 12px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
    min-width: 0;
}

.import-grid-title {
    font-size: 14px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.import-grid-artist {
    font-size: 12px;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.import-grid-meta {
    font-size: 11px;
    color: var(--text-muted);
    display: flex;
    gap: 4px;
    margin-top: 2px;
}

.import-grid-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 8px;
    font-size: 11px;
    color: var(--text-secondary);
}

.import-grid-badges > span {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    padding: 2px 6px;
    border-radius: 6px;
    line-height: 1.4;
}

.import-grid-cue {
    background: rgba(247, 197, 72, 0.12) !important;
    border-color: rgba(247, 197, 72, 0.35) !important;
    color: var(--accent-secondary) !important;
    font-weight: 600;
    letter-spacing: 0.04em;
}

/* "Multiple Discs" tag on a grid card — surfaces multi-disc albums
   that Phase 2.5 of the importer merged from sibling Disc-N folders
   (or that genuinely carry multi-disc tags in a single folder). */
.import-grid-multidisc {
    background: color-mix(in srgb, var(--accent-primary) 14%, transparent) !important;
    border-color: color-mix(in srgb, var(--accent-primary) 35%, transparent) !important;
    color: var(--accent-primary) !important;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* ---- Detail bar (back button + nav) --------------------------------- */

.import-detail-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 14px;
    margin-bottom: 14px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    /* Stick to the top of the scrolling .import-preview-content while
       the album content below scrolls past. The sticky header above us
       already pins at top:0 (z-index 20); we sit just below it via the
       --import-header-h variable that bindShell() measures once when
       the modal opens. The 72px fallback matches the header's rendered
       height in default theme/font, so the bar still works without JS. */
    position: sticky;
    top: var(--import-header-h, 72px);
    z-index: 18;
}

.import-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: transparent;
    border: 1px solid var(--border-subtle);
    color: var(--text-primary);
    padding: 6px 12px 6px 8px;
    border-radius: 6px;
    cursor: pointer;
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.import-back-btn:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

.import-back-arrow {
    font-size: 18px;
    line-height: 1;
    margin-right: 2px;
}

.import-detail-counter {
    font-size: 11px;
    color: var(--text-muted);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-weight: 600;
    flex: 1;
    text-align: center;
}

.import-detail-nav {
    display: flex;
    gap: 6px;
}

.import-nav-btn {
    background: transparent;
    border: 1px solid var(--border-subtle);
    color: var(--text-primary);
    padding: 5px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-family: inherit;
    font-size: 11px;
    font-weight: 500;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.import-nav-btn:hover:not(:disabled) {
    background: rgba(255, 107, 53, 0.06);
    border-color: var(--accent-primary);
}

.import-nav-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

/* ---- Album card ----------------------------------------------------- */

.import-album {
    background: var(--bg-dark);
    border: 1px solid var(--border-subtle);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}

.import-album-head {
    display: flex;
    gap: 18px;
    padding: 18px 18px 16px;
    border-bottom: 1px solid var(--border-subtle);
    background: linear-gradient(180deg,
        rgba(255, 107, 53, 0.03) 0%,
        transparent 100%);
}

.import-album-cover {
    width: 148px;
    height: 148px;
    border-radius: 10px;
    background-size: cover;
    background-position: center;
    background-color: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-subtle);
    flex-shrink: 0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    position: relative;
}

.import-album-cover::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 10px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
    pointer-events: none;
}

.import-album-cover.import-cover-empty {
    background-color: rgba(255, 255, 255, 0.02);
    border: 1px dashed var(--border-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-style: italic;
}

.import-album-cover.import-cover-empty::before {
    content: 'no cover';
}

.import-album-meta {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.import-album-fields {
    display: grid;
    grid-template-columns: 2fr 2fr 1fr 1fr;
    gap: 10px 14px;
}

.import-album-fields label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    font-weight: 600;
}

.import-album-fields input {
    padding: 8px 11px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 7px;
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.import-album-fields input:hover {
    border-color: rgba(255, 255, 255, 0.15);
}

.import-album-fields input:focus {
    outline: none;
    border-color: var(--accent-primary);
    background: rgba(255, 107, 53, 0.04);
}

.import-cue-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: rgba(247, 197, 72, 0.08);
    border: 1px solid rgba(247, 197, 72, 0.3);
    border-radius: 8px;
    font-size: 12px;
    color: var(--text-primary);
    cursor: pointer;
    transition: background 0.15s ease;
}

/* ---- Warning banner (per-album detail view) ---------------------- */
/* Yellow / amber to read as "heads up" rather than red "error". Lives
   at the very top of the album card so the user sees it before they
   scroll into the asset list. Empty when the helper returns no
   warnings — its slot is `<div class="import-warning-slot">`. */

.import-warning-slot:empty { display: none; }

.import-warning-banner {
    margin: 14px 18px 0;
    padding: 12px 14px;
    background: rgba(247, 197, 72, 0.08);
    border: 1px solid rgba(247, 197, 72, 0.32);
    border-left: 3px solid var(--accent-secondary);
    border-radius: 8px;
    font-size: 12.5px;
    color: var(--text-primary);
    line-height: 1.55;
}

.import-warning-banner-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.import-warning-banner-icon {
    font-size: 14px;
    color: var(--accent-secondary);
}

.import-warning-banner-title {
    font-weight: 600;
    color: var(--accent-secondary);
    letter-spacing: 0.02em;
}

.import-warning-banner-list {
    margin: 0;
    padding: 0 0 0 24px;
    color: var(--text-secondary);
}

.import-warning-banner-list li {
    margin: 2px 0;
}

.import-warning-banner-list em {
    color: var(--accent-secondary);
    font-style: normal;
    font-weight: 500;
}

.import-warning-banner-list strong {
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

/* ---- Warning chip on grid card cover ----------------------------- */

.import-grid-warning {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(247, 197, 72, 0.95);
    color: #1a1410;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 3px 8px;
    border-radius: 999px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    pointer-events: auto;
    z-index: 2;
}

.import-grid-card-has-warning {
    border-color: rgba(247, 197, 72, 0.45);
}
.import-grid-card-has-warning:hover {
    border-color: rgba(247, 197, 72, 0.75);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(247, 197, 72, 0.35);
}

.import-cue-toggle:hover {
    background: rgba(247, 197, 72, 0.14);
}

.import-dest-preview {
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 11px;
    color: var(--accent-cyan);
    word-break: break-all;
    padding: 8px 12px;
    background: rgba(0, 245, 212, 0.04);
    border: 1px solid rgba(0, 245, 212, 0.18);
    border-radius: 8px;
    line-height: 1.5;
}

.import-dest-preview::before {
    content: '→ ';
    color: rgba(0, 245, 212, 0.55);
    font-weight: 700;
}

/* ---- Sections within an album (audio / images / pdfs / other) ------- */

.import-section {
    padding: 14px 18px 10px;
    border-top: 1px solid var(--border-subtle);
}

.import-section:first-of-type {
    border-top: none;
}

.import-section-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.import-section-head::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--border-subtle), transparent);
}

.import-section-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent-secondary);
    font-weight: 600;
    user-select: none;
}

.import-section-toggle input[type="checkbox"] {
    accent-color: var(--accent-primary);
    cursor: pointer;
    width: 14px;
    height: 14px;
}

.import-rows {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.import-empty {
    padding: 10px;
    color: var(--text-muted);
    font-style: italic;
    font-size: 12px;
    text-align: center;
    background: var(--bg-card);
    border-radius: 6px;
}

.import-row-check {
    display: flex;
    align-items: center;
    padding: 0 4px 0 0;
}

.import-row-check input[type="checkbox"] {
    accent-color: var(--accent-primary);
    width: 14px;
    height: 14px;
    cursor: pointer;
}

/* ---- Asset rows (images / pdfs / other files) ----------------------- */

.import-asset {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid transparent;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.import-asset:hover {
    background: rgba(255, 255, 255, 0.025);
    border-color: var(--border-subtle);
}

.import-asset-suppressed {
    opacity: 0.55;
}

.import-asset-suppressed:hover {
    opacity: 0.7;
}

.import-asset-suppressed .import-asset-meta {
    font-style: italic;
    color: var(--text-muted);
}

.import-asset-thumb {
    width: 52px;
    height: 52px;
    border-radius: 7px;
    background-size: cover;
    background-position: center;
    background-color: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-subtle);
    flex-shrink: 0;
}

.import-asset-pdf, .import-asset-generic {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
}

.import-asset-pdf {
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.18), rgba(247, 197, 72, 0.12));
    color: var(--accent-primary);
    border-color: rgba(255, 107, 53, 0.3);
}

.import-asset-generic {
    background: var(--bg-card);
    color: var(--text-muted);
}

.import-asset-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

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

.import-asset-meta {
    font-size: 11px;
    color: var(--text-muted);
}

.import-asset-role {
    padding: 7px 10px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 7px;
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 500;
    flex-shrink: 0;
    cursor: pointer;
    font-family: inherit;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.import-asset-role:hover {
    border-color: rgba(255, 255, 255, 0.18);
}

.import-asset-role:focus {
    outline: none;
    border-color: var(--accent-primary);
    background: rgba(255, 107, 53, 0.04);
}

.import-tracks {
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* ---- Track rows ---------------------------------------------------- */

.import-track {
    display: flex;
    flex-direction: column;
    padding: 6px 10px;
    border: 1px solid transparent;
    border-radius: 8px;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.import-track:hover {
    background: rgba(255, 255, 255, 0.025);
    border-color: var(--border-subtle);
}

.import-track:has(.import-track-details[open]) {
    background: rgba(255, 107, 53, 0.04);
    border-color: rgba(255, 107, 53, 0.2);
}

.import-track-head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.import-track-num {
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    min-width: 42px;
    letter-spacing: 0.05em;
}

.import-track-title {
    flex: 1;
    padding: 7px 11px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.import-track-title:hover {
    background: var(--bg-card);
    border-color: var(--border-subtle);
}

.import-track-title:focus {
    background: rgba(255, 107, 53, 0.05);
    border-color: var(--accent-primary);
    outline: none;
}

.import-track-duration {
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 11px;
    color: var(--text-muted);
    min-width: 38px;
    text-align: right;
}

.import-track-details {
    margin-top: 6px;
    margin-left: 66px;
    margin-right: 4px;
}

.import-track-details summary {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent-primary);
    cursor: pointer;
    padding: 4px 0;
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    user-select: none;
}

.import-track-details summary::-webkit-details-marker {
    display: none;
}

.import-track-details summary::before {
    content: '▸';
    display: inline-block;
    font-size: 8px;
    transition: transform 0.15s ease;
}

.import-track-details[open] summary::before {
    transform: rotate(90deg);
}

.import-track-details[open] summary {
    margin-bottom: 8px;
}

.import-track-fields {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
    padding: 10px 12px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
}

.import-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.import-field label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    font-weight: 600;
}

.import-preview-footer {
    gap: 12px;
    background: var(--bg-card);
    border-top: 1px solid var(--border-subtle);
    /* Stick to the bottom while body scrolls. */
    position: sticky;
    bottom: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 16px 24px;
}

.import-preview-progress {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
}

.import-progress-bar {
    height: 8px;
    background: var(--bg-dark);
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid var(--border-subtle);
}

.import-progress-fill {
    height: 100%;
    background: linear-gradient(90deg,
        var(--accent-primary),
        var(--accent-secondary) 50%,
        var(--accent-cyan));
    width: 0;
    transition: width 0.25s ease;
    box-shadow: 0 0 10px rgba(255, 107, 53, 0.4);
}

.import-progress-label {
    font-size: 11px;
    color: var(--text-secondary);
    font-family: 'Consolas', 'Monaco', monospace;
    letter-spacing: 0.02em;
}

.import-busy-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3100;
}

.import-busy {
    background: var(--bg-card);
    padding: 28px 36px;
    border-radius: 12px;
    text-align: center;
    color: var(--text-primary);
}

.spinner {
    width: 34px;
    height: 34px;
    border: 3px solid var(--border-subtle);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    margin: 0 auto 10px;
    animation: spin 0.8s linear infinite;
}

.import-busy-cancel {
    margin-top: 14px;
    padding: 8px 18px;
    background: var(--bg-card-hover);
    border: 1px solid var(--border-subtle);
    color: var(--text-primary);
    border-radius: 8px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
}

.import-busy-cancel:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--accent-primary);
}

.import-busy-text {
    min-height: 18px;
    margin: 6px 0 4px;
}

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

/* =================================================================
   Duplicate-prompt modal — fired per conflict when duplicateHandling
   is set to 'ask'. Reuses the shared .settings-modal chrome; only
   the path rows + footer layout are bespoke.
   ================================================================= */

.duplicate-prompt-modal .dup-prompt-paths {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}

.dup-prompt-path {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
}

.dup-prompt-path-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}

.dup-prompt-path-val {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 12.5px;
    color: var(--text-primary);
    word-break: break-all;
    background: transparent;
    padding: 0;
    border: none;
}

.dup-prompt-applyall {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-primary);
    user-select: none;
}

.dup-prompt-applyall input[type="checkbox"] {
    accent-color: var(--accent-primary);
}

.dup-prompt-footer {
    /* Override the right-aligned default — Skip on the left,
       constructive options on the right keeps the destructive
       option (Replace) furthest from accidental clicks. */
    justify-content: space-between;
}

.dup-prompt-footer [data-choice="skip"] {
    margin-right: auto;
}

/* =================================================================
   Importing step — the "now playing"-style card shown while files
   are being copied/split into the library. Cover art on the left,
   track info on the right, fat progress bar underneath.
   ================================================================= */

.import-now {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 28px;
    padding: 32px 24px 24px;
    height: 100%;
    min-height: 360px;
    justify-content: center;
}

.import-now-stage {
    display: flex;
    align-items: center;
    gap: 28px;
    max-width: 720px;
    width: 100%;
    margin: 0 auto;
}

.import-now-cover {
    width: 200px;
    height: 200px;
    border-radius: 12px;
    background-size: cover;
    background-position: center;
    background-color: var(--bg-card);
    border: 1px solid var(--border-subtle);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
    transition: transform 0.4s ease, opacity 0.4s ease, background-image 0.4s ease;
}

.import-now-cover-fallback {
    color: var(--text-muted);
    opacity: 0.6;
}

.import-now-info {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.import-now-phase {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent-primary);
    background: color-mix(in srgb, var(--accent-primary) 16%, transparent);
    padding: 4px 12px;
    border-radius: 999px;
    align-self: flex-start;
    transition: color 0.2s ease, background 0.2s ease;
}

.import-now-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
    margin-top: 4px;
    /* Long titles wrap rather than ellipsis — the user wants to see
       what's actually being imported. */
    overflow-wrap: anywhere;
}

.import-now-subtitle {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.import-now-counter {
    margin-top: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-subtle);
    padding: 4px 12px;
    border-radius: 999px;
    align-self: flex-start;
    font-variant-numeric: tabular-nums;
}

.import-now-bar {
    max-width: 720px;
    width: 100%;
    margin: 0 auto;
    height: 8px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 999px;
    overflow: hidden;
}

.import-now-fill {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg,
        var(--accent-primary),
        color-mix(in srgb, var(--accent-primary) 60%, white));
    transition: width 0.3s ease;
    border-radius: 999px;
}

/* Done / error states — recolor the phase pill so the user sees the
   outcome at a glance without reading the title. */
.import-now-done .import-now-phase {
    color: var(--state-success, #1ed760);
    background: color-mix(in srgb, var(--state-success, #1ed760) 18%, transparent);
}
.import-now-done .import-now-fill {
    background: var(--state-success, #1ed760);
}

.import-now-error .import-now-phase {
    color: var(--state-danger);
    background: color-mix(in srgb, var(--state-danger) 18%, transparent);
}
.import-now-error .import-now-fill {
    background: var(--state-danger);
}

/* Narrow widths — stack the cover above the info and shrink it. */
@media (max-width: 640px) {
    .import-now-stage {
        flex-direction: column;
        text-align: center;
        gap: 18px;
    }
    .import-now-cover { width: 160px; height: 160px; }
    .import-now-phase, .import-now-counter { align-self: center; }
}

/* Approve-music progress overlay — same hero-card layout as the
   regular import flow shows during execute. Lives outside the import
   modal (preview is its own view), so it sits on a full-screen
   backdrop above everything else. Auto-dismisses on success;
   shows a Close button on error. */
.preview-approve-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.78);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 4000;
    padding: 24px;
    animation: fadeIn 0.18s ease-out;
}
.preview-approve-card {
    width: min(680px, 95vw);
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 14px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55);
}
.preview-approve-card .import-now {
    padding: 0;
    min-height: auto;
}
.preview-approve-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}
.preview-approve-footer:empty { display: none; }

/* Phase pill terminal-state colours — mirrors the existing
   import-now-done / -error variants but applied directly to the pill
   element by class so we can drive it without touching the parent. */
.import-now-phase.import-now-phase-done {
    color: var(--state-success, #1ed760);
    background: color-mix(in srgb, var(--state-success, #1ed760) 18%, transparent);
}
.import-now-phase.import-now-phase-err {
    color: var(--state-danger);
    background: color-mix(in srgb, var(--state-danger) 18%, transparent);
}

/* =========================================================================
   Importer "waiting in queue" hero — shown when the user clicks Import All
   while another background task is still running. The body sits where the
   importing-step's progress card would normally be; same vertical rhythm.
   ========================================================================= */
.import-waiting {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 60px 28px;
    text-align: center;
    color: var(--text-primary);
    min-height: 320px;
}
.import-waiting-icon {
    color: var(--accent-primary);
    opacity: 0.85;
}
.import-waiting-title {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.25;
}
.import-waiting-sub {
    margin: 0;
    font-size: 14px;
    color: var(--text-secondary);
}
.import-waiting-sub strong {
    color: var(--text-primary);
    font-weight: 600;
}
.import-waiting-hint {
    margin: 6px 0 0;
    max-width: 520px;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--text-muted);
}
.import-waiting-hint em {
    font-style: normal;
    color: var(--accent-primary);
}