:root {
    --sc-primary: #0f4c81;
    --sc-secondary: #0d9488;
}

* { font-family: 'Inter', sans-serif; }
body { background: #f8f9fa; }

/* Navbar */
.navbar-brand { font-weight: 700; }

/* Sidebar */
.sidebar {
    width: 250px;
    min-height: calc(100vh - 56px);
    background: #fff;
    border-right: 1px solid #dee2e6;
    padding-top: 1rem;
}
.sidebar .nav-link {
    color: #333;
    padding: 0.6rem 1.2rem;
    border-radius: 0.375rem;
    margin: 0.1rem 0.5rem;
}
.sidebar .nav-link:hover { background: #f0f0f0; }
.sidebar .nav-link.active { background: var(--sc-primary); color: #fff; }
.sidebar .nav-link i { margin-right: 0.5rem; }

/* Cards */
.card-workspace { cursor: pointer; transition: box-shadow 0.15s; }
.card-workspace:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.12); }
.card-accent { border-top: 4px solid var(--sc-primary); }

/* Wizard stepper */
.wizard-steps { display: flex; gap: 0; margin-bottom: 2rem; }
.wizard-step {
    flex: 1;
    text-align: center;
    padding: 0.75rem 0.5rem;
    background: #e9ecef;
    border-right: 2px solid #fff;
    color: #6c757d;
    font-weight: 500;
    font-size: 0.9rem;
}
.wizard-step:first-child { border-radius: 0.375rem 0 0 0.375rem; }
.wizard-step:last-child { border-radius: 0 0.375rem 0.375rem 0; border-right: none; }
.wizard-step.active { background: var(--sc-primary); color: #fff; }
.wizard-step.done { background: var(--sc-secondary); color: #fff; }

/* Purpose cards */
.purpose-card { cursor: pointer; transition: all 0.15s; border: 2px solid transparent; }
.purpose-card:hover { border-color: #dee2e6; }
.purpose-card.selected { border-color: var(--sc-primary); box-shadow: 0 2px 8px rgba(15,76,129,0.2); }
.purpose-card .emoji { font-size: 2.5rem; }

/* Voice picker chips */
.voice-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.75rem;
    border-radius: 2rem;
    font-size: 0.85rem;
    font-weight: 500;
    border: 2px solid #dee2e6;
    background: #fff;
    cursor: pointer;
    transition: all 0.15s;
    color: #333;
}
.voice-chip:hover { background: #f8f9fa; }
.voice-chip-female { border-color: #f8bbd0; }
.voice-chip-female:hover { background: #fce4ec; }
.voice-chip-female.active { background: #fce4ec; border-color: #e91e8c; color: #c2185b; box-shadow: 0 1px 4px rgba(233,30,140,0.25); }
.voice-chip-female i.bi-gender-female { color: #e91e8c; }
.voice-chip-male { border-color: #bbdefb; }
.voice-chip-male:hover { background: #e3f2fd; }
.voice-chip-male.active { background: #e3f2fd; border-color: #2196f3; color: #1565c0; box-shadow: 0 1px 4px rgba(33,150,243,0.25); }
.voice-chip-male i.bi-gender-male { color: #2196f3; }
.voice-chip-play {
    display: inline-flex;
    align-items: center;
    margin-left: 0.15rem;
    opacity: 0.5;
    transition: opacity 0.15s;
}
.voice-chip:hover .voice-chip-play,
.voice-chip.active .voice-chip-play { opacity: 1; }

/* Voice gender badges in speaker list */
.voice-badge-female { background-color: #fce4ec; color: #c2185b; }
.voice-badge-male { background-color: #e3f2fd; color: #1565c0; }

/* Credit package */
.credit-pkg { cursor: pointer; transition: all 0.15s; border: 2px solid transparent; }
.credit-pkg:hover { border-color: #dee2e6; }
.credit-pkg.selected { border-color: var(--sc-primary); box-shadow: 0 2px 8px rgba(15,76,129,0.2); }

/* Audio player */
.audio-player { background: #f5f5f5; border-radius: 8px; padding: 12px; }

/* Toast container */
.toast-container { z-index: 9999; }

/* Btn primary override */
.btn-sc { background: var(--sc-primary); color: #fff; border: none; }
.btn-sc:hover { background: #0a3a66; color: #fff; }

/* Speaker list */
.speaker-number { background: var(--sc-primary) !important; }

/* Upload drop zone */
.drop-zone {
    border: 2px dashed #ccc;
    border-radius: 0.5rem;
    padding: 2rem;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s;
}
.drop-zone:hover { border-color: var(--sc-primary); }