/* ==========================================================================
 SpeechCraft — Dark & Light Theme System + Responsive Layout Engine
 ========================================================================== */

:root, body.dark-theme {
 --bg-dark: #090d16;
 --bg-body-gradient: radial-gradient(circle at 20% 15%, #13182b 0%, #0a0e1a 50%, #060812 100%);
 --bg-card: rgba(20, 26, 42, 0.7);
 --bg-card-hover: rgba(30, 39, 64, 0.85);
 --bg-input: rgba(14, 20, 35, 0.85);
 --bg-dropdown-menu: rgba(14, 19, 34, 0.96);
 
 --border-color: rgba(255, 255, 255, 0.08);
 --border-highlight: rgba(99, 102, 241, 0.45);

 --accent-primary: #6366f1;
 --accent-secondary: #8b5cf6;
 --accent-cyan: #06b6d4;
 --accent-pink: #ec4899;

 --gradient-primary: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #d946ef 100%);
 --gradient-card: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.015) 100%);
 --gradient-input: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(0, 0, 0, 0.1) 100%);

 --text-main: #f8fafc;
 --text-muted: #94a3b8;
 --text-dim: #64748b;

 --radius-sm: 10px;
 --radius-md: 16px;
 --radius-lg: 22px;
 --radius-full: 9999px;

 --shadow-glow: 0 0 25px rgba(99, 102, 241, 0.25);
 --shadow-card: 0 12px 36px -6px rgba(0, 0, 0, 0.55);
 --shadow-dropdown: 0 20px 45px -10px rgba(0, 0, 0, 0.75), 0 0 25px rgba(99, 102, 241, 0.2);

 --header-bg: rgba(9, 13, 22, 0.85);
 --canvas-bg: #060911;

 --font-main: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
 --font-display: 'Outfit', sans-serif;
}

body.light-theme {
 --bg-dark: #f5f3ff;
 --bg-body-gradient: linear-gradient(135deg, #f5f3ff 0%, #eff6ff 50%, #fdf2f8 100%);
 --bg-card: rgba(255, 255, 255, 0.94);
 --bg-card-hover: rgba(245, 243, 255, 0.96);
 --bg-input: #ffffff;
 --bg-dropdown-menu: rgba(255, 255, 255, 0.98);
 
 --border-color: rgba(99, 102, 241, 0.15);
 --border-highlight: rgba(99, 102, 241, 0.5);

 --accent-primary: #4f46e5;
 --accent-secondary: #7c3aed;
 --accent-cyan: #0284c7;
 --accent-pink: #db2777;

 --gradient-primary: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #c026d3 100%);
 --gradient-card: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.8) 100%);
 --gradient-input: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);

 --text-main: #0f172a;
 --text-muted: #475569;
 --text-dim: #94a3b8;

 --shadow-glow: 0 0 20px rgba(79, 70, 229, 0.2);
 --shadow-card: 0 10px 25px -5px rgba(0, 0, 0, 0.08);
 --shadow-dropdown: 0 15px 35px -5px rgba(0, 0, 0, 0.15);

 --header-bg: rgba(255, 255, 255, 0.9);
 --canvas-bg: #f8fafc;
}

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

body {
 background: var(--bg-body-gradient);
 background-attachment: fixed;
 color: var(--text-main);
 font-family: var(--font-main);
 min-height: 100vh;
 overflow-x: hidden;
 line-height: 1.5;
 -webkit-font-smoothing: antialiased;
 transition: background 0.4s ease, color 0.3s ease;
}

/* Background Glow Orbs */
.app-background {
 position: fixed;
 top: 0;
 left: 0;
 width: 100vw;
 height: 100vh;
 z-index: -1;
 overflow: hidden;
 pointer-events: none;
}

.glow-orb {
 position: absolute;
 border-radius: 50%;
 filter: blur(120px);
 opacity: 0.25;
}

.orb-1 {
 width: 500px;
 height: 500px;
 background: var(--accent-primary);
 top: -150px;
 left: -100px;
}

.orb-2 {
 width: 600px;
 height: 600px;
 background: var(--accent-secondary);
 bottom: -200px;
 right: -100px;
}

.orb-3 {
 width: 400px;
 height: 400px;
 background: var(--accent-cyan);
 top: 40%;
 left: 45%;
}

/* App Header */
.app-header {
 position: sticky;
 top: 0;
 z-index: 100;
 background: var(--header-bg);
 backdrop-filter: blur(16px);
 border-bottom: 1px solid var(--border-color);
 padding: 14px 0;
 transition: background 0.3s ease;
}

.header-container {
 max-width: 1440px;
 margin: 0 auto;
 padding: 0 24px;
 width: 100%;
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 20px;
}

.brand {
 display: flex;
 align-items: center;
 gap: 14px;
 flex-shrink: 0;
}

.logo-icon {
 width: 44px;
 height: 44px;
 border-radius: var(--radius-md);
 background: var(--gradient-primary);
 display: flex;
 align-items: center;
 justify-content: center;
 color: white;
 box-shadow: var(--shadow-glow);
 flex-shrink: 0;
}

.brand-text h1 {
 font-family: var(--font-display);
 font-size: 1.35rem;
 font-weight: 700;
 letter-spacing: -0.02em;
 display: flex;
 align-items: center;
 gap: 8px;
 line-height: 1.2;
}

.badge-tag {
 font-size: 0.65rem;
 font-weight: 700;
 padding: 2px 8px;
 border-radius: var(--radius-full);
 background: rgba(99, 102, 241, 0.2);
 color: var(--accent-primary);
 border: 1px solid rgba(99, 102, 241, 0.4);
 letter-spacing: 0.05em;
}

.brand-text p {
 font-size: 0.8rem;
 color: var(--text-muted);
 line-height: 1.2;
 margin-top: 2px;
}

/* Nav Tabs */
.nav-tabs {
 display: flex;
 align-items: center;
 gap: 6px;
 background: rgba(255, 255, 255, 0.04);
 padding: 4px;
 border-radius: var(--radius-full);
 border: 1px solid var(--border-color);
}

.tab-btn {
 display: flex;
 align-items: center;
 gap: 8px;
 padding: 8px 18px;
 border-radius: var(--radius-full);
 border: none;
 background: transparent;
 color: var(--text-muted);
 font-size: 0.88rem;
 font-weight: 600;
 cursor: pointer;
 transition: all 0.2s ease;
 white-space: nowrap;
}

.tab-btn:hover {
 color: var(--text-main);
}

.tab-btn.active {
 background: var(--gradient-primary);
 color: white;
 box-shadow: var(--shadow-glow);
}

/* Header Actions */
.header-actions {
 display: flex;
 align-items: center;
 gap: 10px;
 flex-shrink: 0;
}

/* Buttons */
.btn-primary {
 background: var(--gradient-primary);
 color: white;
 border: none;
 padding: 10px 22px;
 border-radius: var(--radius-md);
 font-weight: 600;
 font-size: 0.92rem;
 cursor: pointer;
 display: inline-flex;
 align-items: center;
 gap: 10px;
 transition: all 0.25s ease;
 box-shadow: var(--shadow-glow);
}

.btn-primary:hover:not(:disabled) {
 transform: translateY(-2px);
 filter: brightness(1.1);
}

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

.btn-secondary {
 background: rgba(255, 255, 255, 0.06);
 border: 1px solid var(--border-color);
 color: var(--text-main);
 padding: 10px 18px;
 border-radius: var(--radius-md);
 font-weight: 600;
 font-size: 0.88rem;
 cursor: pointer;
 display: inline-flex;
 align-items: center;
 gap: 8px;
 transition: all 0.2s ease;
}

.btn-secondary:hover:not(:disabled) {
 background: rgba(255, 255, 255, 0.12);
 border-color: rgba(255, 255, 255, 0.2);
}

.btn-secondary:disabled {
 opacity: 0.4;
 cursor: not-allowed;
}

.btn-text {
 background: transparent;
 border: none;
 color: var(--text-muted);
 font-size: 0.82rem;
 cursor: pointer;
}

.btn-text:hover {
 color: var(--accent-pink);
}

/* Main Layout */
.app-main {
 max-width: 1440px;
 margin: 0 auto;
 padding: 16px 24px 36px;
}

/* Hero Section */
.hero-section {
 padding: 32px 24px 16px;
 text-align: center;
 max-width: 860px;
 margin: 0 auto;
}

.hero-container {
 display: flex;
 flex-direction: column;
 align-items: center;
}

.hero-badge {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 background: rgba(99, 102, 241, 0.12);
 border: 1px solid rgba(99, 102, 241, 0.3);
 color: var(--accent-primary);
 padding: 4px 14px;
 border-radius: var(--radius-full);
 font-size: 0.75rem;
 font-weight: 700;
 letter-spacing: 0.06em;
 margin-bottom: 14px;
}

.hero-title {
 font-family: var(--font-display);
 font-size: 2.2rem;
 font-weight: 800;
 line-height: 1.2;
 letter-spacing: -0.025em;
 color: var(--text-main);
 margin-bottom: 10px;
}

.hero-subtitle {
 font-size: 1rem;
 color: var(--text-muted);
 max-width: 640px;
 margin: 0 auto 20px;
 line-height: 1.5;
}

.hero-cta-group {
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 12px;
 flex-wrap: wrap;
}

.btn-hero-cta {
 padding: 11px 24px;
 font-size: 0.92rem;
}

.tab-content {
 display: none;
}

.tab-content.active {
 display: block;
 animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
 from { opacity: 0; transform: translateY(6px); }
 to { opacity: 1; transform: translateY(0); }
}

/* Studio Grid */
.studio-grid {
 display: grid;
 grid-template-columns: 1.15fr 0.85fr;
 gap: 24px;
}

@media (max-width: 1100px) {
 .studio-grid {
 grid-template-columns: 1fr;
 }
}

/* Cards */
.panel-card {
 background: var(--bg-card);
 backdrop-filter: blur(12px);
 border: 1px solid var(--border-color);
 border-radius: var(--radius-lg);
 padding: 24px;
 box-shadow: var(--shadow-card);
 display: flex;
 flex-direction: column;
 gap: 20px;
}

.card-header {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 16px;
 flex-wrap: wrap;
}

.header-title h2 {
 font-family: var(--font-display);
 font-size: 1.25rem;
 font-weight: 700;
}

.subtitle {
 font-size: 0.82rem;
 color: var(--text-muted);
}

/* Engine Selector & Inputs */
.engine-selector-group {
 display: flex;
 align-items: center;
 gap: 10px;
}

.engine-selector-group label {
 font-size: 0.82rem;
 color: var(--text-muted);
 font-weight: 600;
}

.custom-select {
 background: var(--bg-input);
 background-image: var(--gradient-input);
 border: 1px solid var(--border-color);
 color: var(--text-main);
 padding: 8px 34px 8px 16px;
 border-radius: var(--radius-full);
 font-family: var(--font-main);
 font-size: 0.85rem;
 outline: none;
 cursor: pointer;
 transition: all 0.25s ease;
 appearance: none;
 -webkit-appearance: none;
}

.custom-select:focus {
 border-color: var(--accent-primary);
 box-shadow: var(--shadow-glow);
}

/* Custom Rounded Dropdown Component */
.custom-dropdown-container {
 position: relative;
 display: inline-block;
 user-select: none;
}

.custom-dropdown-trigger {
 background: var(--bg-input);
 background-image: var(--gradient-input);
 border: 1px solid var(--border-color);
 color: var(--text-main);
 padding: 6px 12px;
 border-radius: var(--radius-full);
 font-family: var(--font-main);
 font-size: 0.78rem;
 font-weight: 600;
 cursor: pointer;
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 8px;
 position: relative;
 transition: all 0.2s ease;
 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
 width: 100%;
}

.custom-dropdown-trigger:hover,
.custom-dropdown-container.open .custom-dropdown-trigger {
 border-color: var(--border-highlight);
 background: var(--bg-card-hover);
 box-shadow: var(--shadow-glow);
}

.custom-dropdown-trigger .trigger-text {
 flex: 1;
 min-width: 0;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}

.custom-dropdown-trigger .trigger-arrow {
 flex-shrink: 0;
 width: 5px;
 height: 5px;
 border-right: 2px solid var(--text-muted);
 border-bottom: 2px solid var(--text-muted);
 transform: rotate(45deg);
 transition: transform 0.2s ease;
 margin-left: 6px;
 margin-right: 2px;
}

.custom-dropdown-container.open .custom-dropdown-trigger .trigger-arrow {
 transform: rotate(-135deg);
}

.custom-dropdown-menu {
 position: absolute;
 top: calc(100% + 6px);
 left: 0;
 right: 0;
 width: 100%;
 min-width: 100%;
 background: var(--bg-dropdown-menu);
 backdrop-filter: blur(20px);
 -webkit-backdrop-filter: blur(20px);
 border: 1px solid var(--border-highlight);
 border-radius: 14px;
 padding: 4px;
 box-shadow: var(--shadow-dropdown);
 z-index: 9999;
 opacity: 0;
 visibility: hidden;
 transform: translateY(-6px) scale(0.98);
 transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
 overflow: hidden;
}

.custom-dropdown-scroll-body {
 max-height: 230px;
 overflow-y: auto;
 padding: 0;
 scrollbar-width: none;
 -ms-overflow-style: none;
}

.custom-dropdown-scroll-body::-webkit-scrollbar {
 display: none;
 width: 0;
 height: 0;
}

.custom-dropdown-container.open .custom-dropdown-menu {
 opacity: 1;
 visibility: visible;
 transform: translateY(0) scale(1);
}

.custom-dropdown-option {
 padding: 7px 14px;
 border-radius: var(--radius-full);
 font-size: 0.78rem;
 font-weight: 500;
 color: var(--text-main);
 cursor: pointer;
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 8px;
 margin: 2px 0;
 transition: all 0.15s ease;
}

.custom-dropdown-option .opt-label {
 flex: 1;
 min-width: 0;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}

.custom-dropdown-option .opt-check {
 flex-shrink: 0;
 font-weight: 800;
 font-size: 0.8rem;
 color: #ffffff;
 margin-left: 6px;
 display: flex;
 align-items: center;
}

.custom-dropdown-option:hover {
 background: rgba(99, 102, 241, 0.18);
 color: #ffffff;
 transform: translateX(2px);
}

.custom-dropdown-option.selected {
 background: var(--gradient-primary);
 color: #ffffff;
 font-weight: 700;
 box-shadow: 0 3px 10px rgba(99, 102, 241, 0.35);
}

/* Emotion & Expressiveness Section */
.emotion-section {
 display: flex;
 flex-direction: column;
 gap: 10px;
}

.section-label-row {
 display: flex;
 align-items: center;
 justify-content: space-between;
}

.emotion-badge {
 font-size: 0.75rem;
 font-weight: 700;
 padding: 3px 10px;
 border-radius: var(--radius-full);
 background: rgba(139, 92, 246, 0.2);
 color: #c084fc;
 border: 1px solid rgba(192, 132, 252, 0.3);
}

.emotions-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
 gap: 8px;
}

.emotion-btn {
 background: rgba(255, 255, 255, 0.03);
 border: 1px solid var(--border-color);
 border-radius: var(--radius-md);
 padding: 8px 6px;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 gap: 4px;
 cursor: pointer;
 transition: all 0.2s ease;
}

.emotion-btn:hover {
 background: rgba(99, 102, 241, 0.15);
 border-color: rgba(99, 102, 241, 0.4);
 transform: translateY(-2px);
}

.emotion-btn.active {
 background: linear-gradient(135deg, rgba(99, 102, 241, 0.25) 0%, rgba(139, 92, 246, 0.3) 100%);
 border-color: var(--accent-primary);
 box-shadow: 0 0 15px rgba(99, 102, 241, 0.25);
}

.emo-icon {
 font-size: 1.2rem;
}

.emo-name {
 font-size: 0.72rem;
 font-weight: 600;
 color: var(--text-muted);
}

.emotion-btn.active .emo-name {
 color: var(--text-main);
}

.emo-tag {
 background: rgba(6, 182, 212, 0.1) !important;
 color: var(--accent-cyan) !important;
 border-color: rgba(6, 182, 212, 0.3) !important;
}

.emo-tag:hover {
 background: rgba(6, 182, 212, 0.2) !important;
}

/* Quick Styles Section */
.quick-styles-section {
 display: flex;
 flex-direction: column;
 gap: 10px;
}

.style-badge {
 font-size: 0.75rem;
 font-weight: 700;
 padding: 3px 10px;
 border-radius: var(--radius-full);
 background: rgba(6, 182, 212, 0.15);
 color: var(--accent-cyan);
 border: 1px solid rgba(6, 182, 212, 0.3);
}

.styles-chips-grid {
 display: flex;
 align-items: center;
 gap: 8px;
 flex-wrap: wrap;
}

.style-chip {
 background: rgba(255, 255, 255, 0.04);
 border: 1px solid var(--border-color);
 color: var(--text-muted);
 padding: 6px 14px;
 border-radius: var(--radius-full);
 font-size: 0.78rem;
 font-weight: 600;
 cursor: pointer;
 transition: all 0.2s ease;
}

.style-chip:hover {
 background: rgba(99, 102, 241, 0.15);
 color: var(--text-main);
 border-color: rgba(99, 102, 241, 0.4);
 transform: translateY(-1px);
}

.style-chip.active {
 background: var(--gradient-primary);
 color: #ffffff;
 font-weight: 700;
 border-color: transparent;
 box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35);
}

/* Advanced Settings Accordion & Voice Tuning Block */
.advanced-settings-accordion,
.tuning-block-section {
 border: 1px solid var(--border-color);
 border-radius: var(--radius-lg);
 background: var(--bg-card);
 overflow: hidden;
 box-shadow: var(--shadow-card);
 transition: all 0.3s ease;
}

.tuning-block-header {
 padding: 12px 18px;
 background: linear-gradient(135deg, rgba(99, 102, 241, 0.22) 0%, rgba(139, 92, 246, 0.25) 100%);
 border-bottom: 1px solid var(--border-highlight);
 display: flex;
 align-items: center;
 gap: 10px;
 font-size: 0.9rem;
 font-weight: 700;
 color: var(--text-main);
 font-family: var(--font-display);
 letter-spacing: 0.01em;
}

.tuning-block-header svg {
 color: var(--accent-primary);
 filter: drop-shadow(0 0 6px rgba(99, 102, 241, 0.6));
}

.tuning-block-body {
 padding: 18px;
 display: flex;
 flex-direction: column;
 gap: 16px;
}

.inline-tagger-toolbar {
 display: flex;
 flex-direction: column;
 gap: 12px;
 background: linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, rgba(99, 102, 241, 0.05) 100%);
 border: 1px solid var(--border-color);
 padding: 14px 18px;
 border-radius: var(--radius-lg);
 box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

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

.tagger-label {
 font-size: 0.8rem;
 font-weight: 700;
 color: var(--accent-cyan);
 display: flex;
 align-items: center;
 gap: 6px;
 min-width: 140px;
}

.tagger-buttons {
 display: flex;
 align-items: center;
 gap: 8px;
 flex-wrap: wrap;
}

.inline-tag-btn {
 background: linear-gradient(135deg, rgba(99, 102, 241, 0.16) 0%, rgba(139, 92, 246, 0.22) 100%);
 border: 1px solid rgba(99, 102, 241, 0.4);
 color: var(--text-main);
 padding: 6px 14px;
 border-radius: var(--radius-full);
 font-size: 0.78rem;
 font-weight: 600;
 cursor: pointer;
 display: inline-flex;
 align-items: center;
 gap: 6px;
 transition: all 0.25s ease;
 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.inline-tag-btn:hover {
 background: var(--gradient-primary);
 color: #ffffff;
 border-color: transparent;
 transform: translateY(-2px);
 box-shadow: 0 4px 14px rgba(99, 102, 241, 0.4);
}

.inline-tag-btn[data-tag="cheerful"]:hover {
 background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
 box-shadow: 0 4px 14px rgba(245, 158, 11, 0.4);
}
.inline-tag-btn[data-tag="excited"]:hover {
 background: linear-gradient(135deg, #ec4899 0%, #d946ef 100%);
 box-shadow: 0 4px 14px rgba(236, 72, 153, 0.4);
}
.inline-tag-btn[data-tag="whisper"]:hover {
 background: linear-gradient(135deg, #06b6d4 0%, #0284c7 100%);
 box-shadow: 0 4px 14px rgba(6, 182, 212, 0.4);
}
.inline-tag-btn[data-tag="dramatic"]:hover {
 background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
 box-shadow: 0 4px 14px rgba(239, 68, 68, 0.4);
}
.inline-tag-btn[data-tag="sad"]:hover {
 background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
 box-shadow: 0 4px 14px rgba(139, 92, 246, 0.4);
}
.inline-tag-btn[data-tag="calm"]:hover {
 background: linear-gradient(135deg, #10b981 0%, #047857 100%);
 box-shadow: 0 4px 14px rgba(16, 185, 129, 0.4);
}
.inline-tag-btn[data-tag="news"]:hover {
 background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
 box-shadow: 0 4px 14px rgba(59, 130, 246, 0.4);
}

.inline-pause-btn {
 background: linear-gradient(135deg, rgba(236, 72, 153, 0.16) 0%, rgba(217, 70, 239, 0.22) 100%);
 border: 1px solid rgba(236, 72, 153, 0.45);
 color: #f472b6;
 padding: 6px 14px;
 border-radius: var(--radius-full);
 font-size: 0.78rem;
 font-weight: 700;
 cursor: pointer;
 display: inline-flex;
 align-items: center;
 gap: 6px;
 transition: all 0.25s ease;
 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.inline-pause-btn:hover {
 background: linear-gradient(135deg, #ec4899 0%, #d946ef 100%);
 color: #ffffff;
 border-color: transparent;
 transform: translateY(-2px);
 box-shadow: 0 4px 14px rgba(236, 72, 153, 0.4);
}

/* Recommended Voices Section */
.recommended-section {
 display: flex;
 flex-direction: column;
 gap: 10px;
 margin-bottom: 12px;
}

.recommended-section h4 {
 font-family: var(--font-display);
 font-size: 0.95rem;
 font-weight: 700;
 color: var(--text-main);
}

.sub-label {
 font-size: 0.75rem;
 color: var(--text-dim);
}

.recommended-chips-bar {
 display: flex;
 gap: 6px;
 flex-wrap: wrap;
}

.rec-chip {
 background: rgba(255, 255, 255, 0.04);
 border: 1px solid var(--border-color);
 color: var(--text-muted);
 padding: 4px 10px;
 border-radius: var(--radius-full);
 font-size: 0.76rem;
 font-weight: 600;
 cursor: pointer;
 transition: all 0.2s ease;
}

.rec-chip:hover {
 background: rgba(99, 102, 241, 0.15);
 color: var(--text-main);
}

.rec-chip.active {
 background: rgba(99, 102, 241, 0.25);
 color: #a5b4fc;
 border-color: var(--accent-primary);
}

.btn-voice-preview {
 background: rgba(99, 102, 241, 0.15);
 border: 1px solid rgba(99, 102, 241, 0.35);
 color: var(--accent-primary);
 padding: 3px 12px;
 border-radius: var(--radius-full);
 font-size: 0.72rem;
 font-weight: 700;
 cursor: pointer;
 display: flex;
 align-items: center;
 gap: 4px;
 transition: all 0.2s ease;
 flex-shrink: 0;
 white-space: nowrap;
}

body.light-theme .btn-voice-preview {
 background: linear-gradient(135deg, #e0e7ff 0%, #ede9fe 100%);
 border: 1px solid #818cf8;
 color: #4f46e5;
}

.btn-voice-preview:hover {
 background: var(--gradient-primary);
 color: #ffffff;
 border-color: transparent;
 transform: translateY(-1px);
}

.btn-voice-preview.playing {
 background: var(--accent-cyan);
 color: #ffffff;
 border-color: transparent;
 animation: pulse 1.2s infinite;
}

.voice-persona-tag {
 font-size: 0.68rem;
 font-weight: 700;
 padding: 2px 10px;
 border-radius: var(--radius-full);
 background: linear-gradient(135deg, rgba(99, 102, 241, 0.2) 0%, rgba(139, 92, 246, 0.25) 100%);
 color: #a5b4fc;
 border: 1px solid rgba(99, 102, 241, 0.35);
 white-space: nowrap;
}

body.light-theme .voice-persona-tag {
 background: linear-gradient(135deg, #e0e7ff 0%, #ede9fe 100%);
 color: #4338ca;
 border: 1px solid #c7d2fe;
}

/* Accessibility Focus States */
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
 outline: 2px solid var(--accent-primary);
 outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
 *, ::before, ::after {
 animation-duration: 0.01ms !important;
 animation-iteration-count: 1 !important;
 transition-duration: 0.01ms !important;
 scroll-behavior: auto !important;
 }
}

/* Presets Bar */
.templates-bar {
 display: flex;
 align-items: center;
 gap: 8px;
 flex-wrap: wrap;
}

.bar-label {
 font-size: 0.78rem;
 color: var(--text-muted);
 font-weight: 600;
}

.chip-btn {
 background: rgba(255, 255, 255, 0.04);
 border: 1px solid var(--border-color);
 color: var(--text-muted);
 padding: 5px 14px;
 border-radius: var(--radius-full);
 font-size: 0.78rem;
 font-weight: 500;
 cursor: pointer;
 transition: all 0.25s ease;
}

.chip-btn:hover {
 background: rgba(99, 102, 241, 0.15);
 color: var(--text-main);
 border-color: rgba(99, 102, 241, 0.4);
 transform: translateY(-1px);
}

.chip-btn.active {
 background: var(--gradient-primary);
 color: #ffffff;
 font-weight: 700;
 border-color: transparent;
 box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35);
}

/* Phase 2A: Visual Toolbar & Script Flow System */
.visual-toolbar {
 display: flex;
 align-items: center;
 gap: 12px;
 background: rgba(255, 255, 255, 0.03);
 border: 1px solid var(--border-color);
 padding: 8px 14px;
 border-radius: var(--radius-md);
 flex-wrap: wrap;
 margin-top: 8px;
}

.toolbar-section {
 display: flex;
 align-items: center;
 gap: 8px;
 flex-wrap: wrap;
}

.toolbar-label {
 font-size: 0.78rem;
 font-weight: 700;
 color: var(--accent-cyan);
}

.toolbar-label.pause-label {
 color: var(--accent-pink);
}

.toolbar-chips {
 display: flex;
 align-items: center;
 gap: 6px;
 flex-wrap: wrap;
}

.toolbar-divider {
 width: 1px;
 height: 20px;
 background: var(--border-color);
}

.visual-expression-btn {
 background: rgba(255, 255, 255, 0.05);
 border: 1px solid var(--border-color);
 color: var(--text-main);
 padding: 5px 12px;
 border-radius: var(--radius-full);
 font-size: 0.78rem;
 font-weight: 600;
 cursor: pointer;
 display: inline-flex;
 align-items: center;
 gap: 4px;
 transition: all 0.2s ease;
}

.visual-expression-btn:hover {
 background: rgba(99, 102, 241, 0.2);
 border-color: var(--accent-primary);
 transform: translateY(-1px);
 box-shadow: 0 3px 10px rgba(99, 102, 241, 0.2);
}

.visual-pause-btn {
 background: rgba(236, 72, 153, 0.15);
 border: 1px solid rgba(236, 72, 153, 0.4);
 color: #f472b6;
 padding: 5px 12px;
 border-radius: var(--radius-full);
 font-size: 0.78rem;
 font-weight: 700;
 cursor: pointer;
 display: inline-flex;
 align-items: center;
 gap: 4px;
 transition: all 0.2s ease;
}

.visual-pause-btn:hover {
 background: rgba(236, 72, 153, 0.3);
 border-color: var(--accent-pink);
 transform: translateY(-1px);
 box-shadow: 0 3px 10px rgba(236, 72, 153, 0.25);
}

.visual-pronounce-btn {
 background: rgba(16, 185, 129, 0.15);
 border: 1px solid rgba(16, 185, 129, 0.4);
 color: #6ee7b7;
 padding: 5px 12px;
 border-radius: var(--radius-full);
 font-size: 0.78rem;
 font-weight: 700;
 cursor: pointer;
 display: inline-flex;
 align-items: center;
 gap: 4px;
 transition: all 0.2s ease;
}

.visual-pronounce-btn:hover {
 background: rgba(16, 185, 129, 0.3);
 border-color: #10b981;
 transform: translateY(-1px);
 box-shadow: 0 3px 10px rgba(16, 185, 129, 0.25);
}

/* Visual Script Breakdown Flow Container */
.visual-script-flow {
 display: flex;
 flex-direction: column;
 gap: 10px;
 padding: 16px 18px;
 background: var(--bg-card);
 border: 1px solid var(--border-highlight);
 border-radius: var(--radius-md);
 box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.flow-title {
 font-size: 0.76rem;
 font-weight: 800;
 color: var(--accent-primary);
 text-transform: uppercase;
 letter-spacing: 0.06em;
 margin-bottom: 2px;
}

.flow-chips-list {
 display: flex;
 flex-wrap: wrap;
 gap: 8px;
 align-items: center;
}

.flow-chip {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 padding: 6px 14px;
 border-radius: var(--radius-md);
 font-size: 0.82rem;
 font-weight: 700;
 position: relative;
 transition: all 0.2s ease;
 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.flow-chip.chip-expression {
 background: rgba(99, 102, 241, 0.15);
 border: 1px solid rgba(99, 102, 241, 0.4);
 color: var(--accent-primary);
}

.flow-chip.chip-expression.cheerful {
 background: rgba(245, 158, 11, 0.15);
 border: 1px solid rgba(245, 158, 11, 0.45);
 color: #d97706;
}

.flow-chip.chip-expression.excited {
 background: rgba(236, 72, 153, 0.15);
 border: 1px solid rgba(236, 72, 153, 0.45);
 color: #db2777;
}

.flow-chip.chip-expression.dramatic {
 background: rgba(220, 38, 38, 0.15);
 border: 1px solid rgba(220, 38, 38, 0.45);
 color: #dc2626;
}

.flow-chip.chip-expression.calm {
 background: rgba(16, 185, 129, 0.15);
 border: 1px solid rgba(16, 185, 129, 0.45);
 color: #059669;
}

.flow-chip.chip-expression.whisper {
 background: rgba(14, 165, 233, 0.15);
 border: 1px solid rgba(14, 165, 233, 0.45);
 color: #0284c7;
}

body.dark-theme .flow-chip.chip-expression.cheerful { color: #fef08a; }
body.dark-theme .flow-chip.chip-expression.excited { color: #fbcfe8; }
body.dark-theme .flow-chip.chip-expression.dramatic { color: #fca5a5; }
body.dark-theme .flow-chip.chip-expression.calm { color: #a7f3d0; }
body.dark-theme .flow-chip.chip-expression.whisper { color: #bae6fd; }

.flow-chip.chip-pause {
 background: rgba(236, 72, 153, 0.15);
 border: 1px solid rgba(236, 72, 153, 0.45);
 color: var(--accent-pink);
 border-radius: var(--radius-full);
}

.chip-text {
 max-width: 240px;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
 font-weight: 500;
 color: var(--text-main);
 opacity: 0.95;
}

.chip-action-btn {
 background: linear-gradient(135deg, rgba(99, 102, 241, 0.18) 0%, rgba(139, 92, 246, 0.2) 100%);
 border: 1px solid var(--border-color);
 color: var(--text-main);
 padding: 4px 12px;
 border-radius: var(--radius-full);
 font-size: 0.74rem;
 font-weight: 600;
 cursor: pointer;
 margin-left: 4px;
 transition: all 0.15s ease;
}

.chip-action-btn:hover {
 background: var(--accent-primary);
 color: #ffffff;
 border-color: transparent;
}

.chip-action-btn.btn-remove:hover {
 background: #ef4444;
 color: white;
 border-color: transparent;
}

/* Floating Popover for Chip Editing */
.flow-popover {
 position: absolute;
 top: calc(100% + 6px);
 left: 0;
 z-index: 999;
 background: var(--bg-dropdown-menu);
 border: 1px solid var(--border-highlight);
 border-radius: var(--radius-md);
 padding: 8px;
 box-shadow: var(--shadow-dropdown);
 display: flex;
 flex-direction: column;
 gap: 4px;
 min-width: 170px;
}

.popover-item {
 background: transparent;
 border: none;
 color: var(--text-main);
 padding: 6px 12px;
 border-radius: var(--radius-full);
 font-size: 0.78rem;
 font-weight: 600;
 cursor: pointer;
 display: flex;
 align-items: center;
 gap: 6px;
 text-align: left;
 transition: background 0.15s ease;
}

.popover-item:hover {
 background: rgba(99, 102, 241, 0.2);
}

.flow-chip.chip-pronounce {
 background: rgba(16, 185, 129, 0.15);
 border-color: rgba(16, 185, 129, 0.4);
 color: #6ee7b7;
}

.popover-item.danger:hover {
 background: rgba(239, 68, 68, 0.25);
 color: #fca5a5;
}

/* Pronunciation Modal & Dictionary Styles (Phase 2B) */
.pronounce-modal-box {
 max-width: 500px;
}

.pronounce-preview-box {
 background: rgba(255, 255, 255, 0.03);
 border: 1px solid var(--border-color);
 padding: 10px 14px;
 border-radius: var(--radius-md);
 margin-bottom: 14px;
 display: flex;
 flex-direction: column;
 gap: 6px;
}

.pronounce-preview-box label {
 font-size: 0.78rem;
 font-weight: 700;
 color: var(--text-muted);
}

.preview-btns-row {
 display: flex;
 align-items: center;
 gap: 10px;
 flex-wrap: wrap;
}

.scope-options {
 display: flex;
 flex-direction: column;
 gap: 8px;
 margin-top: 6px;
}

.radio-label {
 display: flex;
 align-items: center;
 gap: 8px;
 font-size: 0.84rem;
 color: var(--text-main);
 cursor: pointer;
}

/* Dictionary Grid & Container */
.dictionary-container {
 max-width: 1100px;
 margin: 0 auto;
 padding: 24px;
}

.dictionary-header {
 display: flex;
 align-items: center;
 justify-content: space-between;
 margin-bottom: 20px;
 flex-wrap: wrap;
 gap: 12px;
}

.dictionary-grid {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
 gap: 16px;
}

.dictionary-card {
 background: var(--bg-card);
 border: 1px solid var(--border-color);
 border-radius: var(--radius-md);
 padding: 16px;
 display: flex;
 flex-direction: column;
 gap: 10px;
 transition: all 0.2s ease;
}

.dictionary-card:hover {
 border-color: var(--border-highlight);
 transform: translateY(-2px);
 box-shadow: var(--shadow-card);
}

.dict-word-row {
 display: flex;
 align-items: center;
 justify-content: space-between;
}

.dict-orig-word {
 font-family: var(--font-display);
 font-size: 1.1rem;
 font-weight: 700;
 color: var(--text-main);
}

.dict-phonetic-row {
 font-size: 0.88rem;
 color: var(--accent-cyan);
 font-weight: 600;
 background: linear-gradient(135deg, rgba(6, 182, 212, 0.15) 0%, rgba(99, 102, 241, 0.18) 100%);
 padding: 4px 14px;
 border-radius: var(--radius-full);
 display: inline-flex;
 align-items: center;
 gap: 6px;
 width: fit-content;
}

.dict-actions-row {
 display: flex;
 align-items: center;
 justify-content: space-between;
 border-top: 1px solid var(--border-color);
 padding-top: 10px;
 margin-top: 4px;
}

/* Toast Notifications */
.speechcraft-toast {
 position: fixed;
 bottom: 24px;
 right: 24px;
 background: var(--bg-card);
 border: 1px solid var(--border-highlight);
 color: var(--text-main);
 padding: 10px 18px;
 border-radius: var(--radius-md);
 font-size: 0.85rem;
 font-weight: 600;
 box-shadow: var(--shadow-dropdown);
 z-index: 10000;
 display: flex;
 align-items: center;
 gap: 8px;
 animation: slideToast 0.3s ease;
}

@keyframes slideToast {
 from { transform: translateY(20px); opacity: 0; }
 to { transform: translateY(0); opacity: 1; }
}

/* Text Area Wrapper & Footer */
.textarea-wrapper {
 display: flex;
 flex-direction: column;
 background: var(--bg-input);
 border: 1px solid var(--border-color);
 border-radius: var(--radius-lg);
 overflow: hidden;
 transition: border-color 0.25s ease, box-shadow 0.25s ease;
 box-shadow: var(--shadow-card);
}

.textarea-wrapper:focus-within {
 border-color: var(--accent-primary);
 box-shadow: var(--shadow-glow);
}

textarea {
 width: 100%;
 height: 300px;
 min-height: 280px;
 background: transparent;
 border: none;
 color: var(--text-main);
 padding: 18px 20px;
 font-family: var(--font-main);
 font-size: 1rem;
 line-height: 1.7;
 resize: vertical;
 outline: none;
}

textarea::placeholder {
 color: var(--text-dim);
}

.textarea-footer {
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 12px 18px;
 background: linear-gradient(90deg, rgba(99, 102, 241, 0.12) 0%, rgba(139, 92, 246, 0.1) 50%, rgba(6, 182, 212, 0.08) 100%);
 border-top: 1px solid var(--border-color);
 font-size: 0.82rem;
 color: var(--text-main);
}

.text-stats {
 display: flex;
 align-items: center;
 gap: 8px;
 font-weight: 600;
 color: var(--text-main);
}

#stat-formatted {
 color: var(--text-main);
 font-weight: 600;
 letter-spacing: 0.01em;
}

#btn-clear {
 background: rgba(236, 72, 153, 0.12);
 border: 1px solid rgba(236, 72, 153, 0.35);
 color: var(--accent-pink);
 padding: 5px 14px;
 border-radius: var(--radius-full);
 font-size: 0.78rem;
 font-weight: 700;
 cursor: pointer;
 transition: all 0.25s ease;
}

#btn-clear:hover {
 background: var(--accent-pink);
 color: #ffffff;
 border-color: transparent;
 transform: translateY(-1px);
 box-shadow: 0 4px 12px rgba(236, 72, 153, 0.35);
}

.stat-divider {
 color: var(--text-dim);
}

/* Controls Section */
.controls-section h3 {
 font-size: 0.9rem;
 font-weight: 700;
 color: var(--text-muted);
 text-transform: uppercase;
 letter-spacing: 0.05em;
 margin-bottom: 12px;
}

.sliders-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
 gap: 16px;
}

.slider-control {
 background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(99, 102, 241, 0.03) 100%);
 border: 1px solid var(--border-color);
 padding: 14px 16px;
 border-radius: var(--radius-md);
 display: flex;
 flex-direction: column;
 gap: 10px;
 transition: all 0.25s ease;
}

.slider-control:hover {
 border-color: var(--border-highlight);
 background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(99, 102, 241, 0.06) 100%);
}

.slider-header {
 display: flex;
 align-items: center;
 justify-content: space-between;
 font-size: 0.8rem;
}

.slider-header label {
 font-weight: 600;
 color: var(--text-main);
}

.value-badge {
 font-size: 0.75rem;
 padding: 3px 10px;
 border-radius: var(--radius-full);
 background: linear-gradient(135deg, rgba(99, 102, 241, 0.2) 0%, rgba(139, 92, 246, 0.25) 100%);
 color: #a5b4fc;
 border: 1px solid rgba(99, 102, 241, 0.4);
 font-weight: 700;
}

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

.slider-ticks {
 display: flex;
 justify-content: space-between;
 font-size: 0.7rem;
 color: var(--text-dim);
}

/* Editor Action Bar */
.editor-actions {
 display: flex;
 align-items: center;
 gap: 12px;
 flex-wrap: wrap;
 margin-top: 6px;
}

.btn-hero {
 flex: 1;
 min-width: 220px;
 justify-content: center;
 padding: 14px 28px;
 font-size: 1rem;
}

/* Studio Player & Visualizer Box */
.studio-player-box {
 background: var(--bg-card);
 border: 1px solid var(--border-highlight);
 border-radius: var(--radius-md);
 padding: 18px;
 display: flex;
 flex-direction: column;
 gap: 14px;
 box-shadow: var(--shadow-glow);
 transition: background 0.3s ease;
}

.canvas-container {
 position: relative;
 width: 100%;
 height: 115px;
 background: var(--canvas-bg);
 border-radius: var(--radius-sm);
 overflow: hidden;
 border: 1px solid var(--border-color);
 transition: background 0.3s ease;
}

/* Teleprompter Screen */
.prompter-screen {
 background: var(--prompter-bg);
 border: 1px solid var(--border-color);
 border-radius: var(--radius-lg);
 padding: clamp(20px, 4vw, 40px);
 min-height: 420px;
 font-size: 1.6rem;
 line-height: 1.8;
 color: var(--text-muted);
 box-shadow: var(--shadow-card);
 transition: background 0.3s ease, color 0.3s ease;
}

/* Modal Box */
.modal-box {
 background: var(--bg-card);
 border: 1px solid var(--border-highlight);
 border-radius: var(--radius-lg);
 width: 90%;
 max-width: 520px;
 box-shadow: var(--shadow-card);
 overflow: hidden;
}

/* ==========================================================================
 Responsive Layout Engine (Consistent Proportions Across All Resolutions)
 ========================================================================== */

/* ==========================================================================
 Responsive Layout Engine (Desktop 100vh Single Front Screen View)
 ========================================================================== */

/* Desktop & Laptop Single-Screen Fit (>= 1025px) - WITH SCROLLABLE PANELS */
@media (min-width: 1025px) {
 html, body {
 min-height: 100vh;
 overflow-x: hidden;
 overflow-y: auto;
 }

 .app-header {
 padding: 8px 24px;
 height: 58px;
 flex-shrink: 0;
 position: sticky;
 top: 0;
 z-index: 100;
 }

 .brand-text h1 {
 font-size: 1.2rem;
 }

 .logo-icon {
 width: 36px;
 height: 36px;
 }

 .tab-btn {
 padding: 6px 14px;
 font-size: 0.82rem;
 }

 .app-main {
 min-height: calc(100vh - 58px);
 padding: 12px 24px 36px;
 display: flex;
 flex-direction: column;
 }

 .tab-content {
 min-height: 0;
 }

 .tab-content.active {
 display: flex;
 flex-direction: column;
 }

 .studio-grid {
 grid-template-columns: 1.08fr 0.92fr;
 gap: 14px;
 align-items: start;
 }

 .panel-card {
 padding: 18px;
 gap: 14px;
 max-height: none;
 overflow: visible;
 }

 .catalog-card {
 position: sticky;
 top: 72px;
 }

 /* Compact Left Panel */
 .card-header {
 gap: 10px;
 }

 .header-title h2 {
 font-size: 1.1rem;
 }

 .custom-select {
 padding: 5px 10px;
 font-size: 0.8rem;
 }

 .emotion-section {
 gap: 6px;
 }

 .emotions-grid {
 grid-template-columns: repeat(8, 1fr);
 gap: 6px;
 }

 .emotion-btn {
 padding: 5px 4px;
 }

 .emo-icon {
 font-size: 1rem;
 }

 .emo-name {
 font-size: 0.68rem;
 }

 .templates-bar, .inline-tagger-toolbar {
 padding: 5px 10px;
 gap: 6px;
 }

 .chip-btn, .inline-tag-btn, .inline-pause-btn {
 padding: 3px 8px;
 font-size: 0.72rem;
 }

 .textarea-wrapper {
 flex: 1;
 min-height: 0;
 display: flex;
 flex-direction: column;
 }

 textarea {
 width: 100%;
 min-height: 280px;
 height: 300px;
 padding: 16px 18px;
 font-size: 0.96rem;
 line-height: 1.65;
 }

 .textarea-footer {
 padding: 6px 12px;
 font-size: 0.75rem;
 }

 .controls-section {
 margin-top: 0;
 }

 .controls-section h3 {
 font-size: 0.78rem;
 margin-bottom: 6px;
 }

 .sliders-grid {
 gap: 8px;
 }

 .slider-control {
 padding: 6px 10px;
 gap: 4px;
 }

 .slider-header {
 font-size: 0.75rem;
 }

 .slider-ticks {
 font-size: 0.65rem;
 }

 .editor-actions {
 margin-top: 2px;
 gap: 8px;
 }

 .btn-hero {
 padding: 10px 18px;
 font-size: 0.9rem;
 }

 .btn-secondary {
 padding: 8px 14px;
 font-size: 0.82rem;
 }

 /* Compact Right Panel Studio */
 .studio-player-box {
 padding: 10px 14px;
 gap: 8px;
 flex-shrink: 0;
 }

 .visualizer-header {
 font-size: 0.75rem;
 }

 .canvas-container {
 height: 75px;
 }

 .player-controls {
 gap: 10px;
 }

 .btn-circle {
 width: 36px;
 height: 36px;
 }

 .catalog-section {
 flex: 1;
 min-height: 0;
 display: flex;
 flex-direction: column;
 gap: 8px;
 }

 .catalog-header h3 {
 font-size: 0.98rem;
 }

 .catalog-filter-bar {
 gap: 6px;
 }

 .search-input-wrapper input {
 padding: 6px 10px 6px 32px;
 font-size: 0.8rem;
 }

 .search-input-wrapper svg {
 left: 10px;
 }

 .voice-list {
 flex: 1;
 min-height: 0;
 max-height: none;
 overflow-y: auto;
 gap: 6px;
 }

 .voice-card {
 padding: 8px 12px;
 }

 .voice-title {
 font-size: 0.84rem;
 }

 .voice-details {
 font-size: 0.72rem;
 }

 /* Teleprompter Full Height Fit */
 .prompter-container {
 height: 100%;
 display: flex;
 flex-direction: column;
 gap: 12px;
 }

 .prompter-screen {
 flex: 1;
 min-height: 0;
 overflow-y: auto;
 }
}

/* Tablets (768px - 1024px) */
@media (max-width: 1024px) {
 body {
 overflow-y: auto;
 }

 .studio-grid {
 grid-template-columns: 1fr;
 gap: 20px;
 }

 .voice-list {
 max-height: 320px;
 }
}

/* Mobile Devices (<767px) */
@media (max-width: 767px) {
 body {
 overflow-y: auto;
 }

 .app-main {
 padding: 16px 12px;
 }

 .panel-card {
 padding: 16px;
 }

 .emotions-grid {
 grid-template-columns: repeat(4, 1fr);
 }

 .editor-actions {
 flex-direction: column;
 }

 .btn-hero {
 width: 100%;
 }

 .filters-row {
 flex-direction: column;
 }

 .prompter-toolbar {
 flex-direction: column;
 gap: 12px;
 align-items: flex-start;
 }
}

.visualizer-header {
 display: flex;
 align-items: center;
 justify-content: space-between;
 font-size: 0.8rem;
}

.now-playing-info {
 display: flex;
 align-items: center;
 gap: 8px;
 font-weight: 600;
 color: var(--text-main);
}

.live-dot {
 width: 8px;
 height: 8px;
 border-radius: 50%;
 background: var(--text-dim);
}

.live-dot.active {
 background: var(--accent-cyan);
 box-shadow: 0 0 10px var(--accent-cyan);
 animation: pulse 1.5s infinite;
}

@keyframes pulse {
 0% { transform: scale(1); opacity: 1; }
 50% { transform: scale(1.4); opacity: 0.6; }
 100% { transform: scale(1); opacity: 1; }
}

.time-badge {
 font-family: monospace;
 color: var(--accent-cyan);
 background: linear-gradient(135deg, rgba(6, 182, 212, 0.15) 0%, rgba(14, 165, 233, 0.2) 100%);
 padding: 3px 10px;
 border-radius: var(--radius-full);
 border: 1px solid rgba(6, 182, 212, 0.3);
 font-size: 0.8rem;
 font-weight: 700;
}

.canvas-container {
 position: relative;
 width: 100%;
 height: 110px;
 background: radial-gradient(ellipse at center, rgba(30, 41, 59, 0.6) 0%, rgba(15, 23, 42, 0.95) 100%);
 border-radius: var(--radius-md);
 overflow: hidden;
 border: 1px solid var(--border-color);
}

#waveform-canvas {
 width: 100%;
 height: 100%;
 display: block;
}

.canvas-overlay {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 gap: 8px;
 color: var(--text-dim);
 font-size: 0.82rem;
 pointer-events: none;
 background: rgba(6, 9, 17, 0.4);
}

.player-controls {
 display: flex;
 align-items: center;
 gap: 14px;
}

.btn-circle {
 width: 44px;
 height: 44px;
 border-radius: 50%;
 padding: 0;
 display: flex;
 align-items: center;
 justify-content: center;
 flex-shrink: 0;
}

.timeline-slider-wrapper {
 flex: 1;
}

.player-mini-actions {
 display: flex;
 align-items: center;
 gap: 10px;
}

.mini-btn {
 background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(139, 92, 246, 0.2) 100%);
 border: 1px solid var(--border-color);
 color: var(--text-main);
 padding: 4px 14px;
 border-radius: var(--radius-full);
 font-size: 0.78rem;
 font-weight: 700;
 cursor: pointer;
}

.volume-popover {
 display: flex;
 align-items: center;
 gap: 6px;
 color: var(--text-muted);
}

.volume-popover input[type="range"] {
 width: 60px;
}

/* Voice Catalog Section */
.catalog-section {
 display: flex;
 flex-direction: column;
 gap: 14px;
}

.catalog-header {
 display: flex;
 align-items: center;
 justify-content: space-between;
}

.catalog-header h3 {
 font-family: var(--font-display);
 font-size: 1.1rem;
 font-weight: 700;
}

.count-badge {
 font-size: 0.78rem;
 padding: 2px 8px;
 border-radius: var(--radius-full);
 background: rgba(255, 255, 255, 0.08);
 color: var(--text-muted);
}

.catalog-filter-bar {
 display: flex;
 flex-direction: column;
 gap: 10px;
}

.search-input-wrapper {
 position: relative;
 display: flex;
 align-items: center;
}

.search-input-wrapper svg {
 position: absolute;
 left: 12px;
 color: var(--text-muted);
}

.search-input-wrapper input {
 width: 100%;
 background: var(--bg-input);
 border: 1px solid var(--border-color);
 color: var(--text-main);
 padding: 9px 12px 9px 36px;
 border-radius: var(--radius-md);
 font-size: 0.85rem;
 outline: none;
}

.search-input-wrapper input:focus {
 border-color: var(--accent-primary);
}

.filters-row {
 display: flex;
 gap: 8px;
 flex-wrap: wrap;
}

.filters-row .custom-dropdown-container {
 flex: 1;
 min-width: 120px;
}

.filters-row .custom-dropdown-container:first-child .custom-dropdown-menu {
 left: 0;
 right: auto;
}

.filters-row .custom-dropdown-trigger {
 width: 100%;
 justify-content: space-between;
 padding: 8px 32px 8px 12px;
 font-size: 0.8rem;
 overflow: hidden;
 text-overflow: ellipsis;
}

.filter-select {
 flex: 1;
 font-size: 0.8rem;
}

/* Voice List Scrollbox */
.voice-list {
 display: flex;
 flex-direction: column;
 gap: 8px;
 max-height: 380px;
 overflow-y: auto;
 padding-right: 4px;
}

.voice-list::-webkit-scrollbar {
 width: 6px;
}

.voice-list::-webkit-scrollbar-thumb {
 background: rgba(255, 255, 255, 0.15);
 border-radius: var(--radius-full);
}

/* Voice Card Item */
.voice-card {
 background: rgba(255, 255, 255, 0.03);
 border: 1px solid var(--border-color);
 border-radius: var(--radius-md);
 padding: 12px 14px;
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 12px;
 cursor: pointer;
 transition: all 0.2s ease;
}

.voice-card:hover {
 background: var(--bg-card-hover);
 border-color: rgba(99, 102, 241, 0.3);
 transform: translateX(2px);
}

.voice-card.selected {
 background: rgba(99, 102, 241, 0.15);
 border-color: var(--accent-primary);
 box-shadow: 0 0 15px rgba(99, 102, 241, 0.15);
}

.voice-info {
 flex: 1;
 min-width: 0;
 display: flex;
 flex-direction: column;
 gap: 4px;
}

.voice-title {
 font-weight: 700;
 font-size: 0.84rem;
 line-height: 1.35;
 color: var(--text-main);
 word-break: break-word;
}

.voice-details {
 font-size: 0.75rem;
 color: var(--text-muted);
 display: flex;
 align-items: center;
 gap: 6px;
}

.voice-card-right-group {
 display: flex;
 flex-direction: column;
 align-items: flex-end;
 justify-content: center;
 gap: 6px;
 flex-shrink: 0;
 margin-left: 8px;
}

.voice-tags {
 display: flex;
 align-items: center;
 gap: 6px;
}

.tag-gender {
 font-size: 0.7rem;
 padding: 2px 8px;
 border-radius: var(--radius-full);
 background: rgba(255, 255, 255, 0.08);
 font-weight: 700;
}

.tag-gender.female { color: var(--accent-pink); }
.tag-gender.male { color: var(--accent-cyan); }



/* History Grid */
.history-container {
 display: flex;
 flex-direction: column;
 gap: 20px;
}

.history-header {
 display: flex;
 align-items: center;
 justify-content: space-between;
}

.history-grid {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
 gap: 16px;
}

.history-card {
 background: var(--bg-card);
 border: 1px solid var(--border-color);
 border-radius: var(--radius-md);
 padding: 16px;
 display: flex;
 flex-direction: column;
 gap: 12px;
}

.history-card-header {
 display: flex;
 align-items: center;
 justify-content: space-between;
 font-size: 0.8rem;
 color: var(--text-muted);
}

.history-text-excerpt {
 font-size: 0.9rem;
 color: var(--text-main);
 display: -webkit-box;
 -webkit-line-clamp: 2;
 -webkit-box-orient: vertical;
 overflow: hidden;
}

.history-card-actions {
 display: flex;
 align-items: center;
 gap: 8px;
 margin-top: 4px;
}

/* Settings Modal */
.modal-overlay {
 position: fixed;
 top: 0;
 left: 0;
 width: 100vw;
 height: 100vh;
 background: radial-gradient(circle at center, rgba(15, 23, 42, 0.85) 0%, rgba(0, 0, 0, 0.88) 100%);
 backdrop-filter: blur(8px);
 z-index: 999;
 display: none;
 align-items: center;
 justify-content: center;
}

.modal-overlay.active {
 display: flex;
 animation: fadeIn 0.2s ease;
}

.modal-box {
 background: var(--bg-card);
 backdrop-filter: blur(24px);
 -webkit-backdrop-filter: blur(24px);
 border: 1px solid var(--border-highlight);
 border-radius: var(--radius-lg);
 width: 90%;
 max-width: 500px;
 box-shadow: var(--shadow-dropdown);
 overflow: hidden;
 color: var(--text-main);
}

.modal-header {
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 18px 24px;
 border-bottom: 1px solid var(--border-color);
}

.modal-header h3 {
 font-family: var(--font-display);
 font-size: 1.15rem;
 font-weight: 700;
 color: var(--text-main);
}

.btn-close {
 background: transparent;
 border: none;
 color: var(--text-muted);
 font-size: 1.5rem;
 cursor: pointer;
 transition: color 0.15s ease;
}

.btn-close:hover {
 color: var(--text-main);
}

.modal-body {
 padding: 24px;
 display: flex;
 flex-direction: column;
 gap: 16px;
}

.modal-desc {
 font-size: 0.85rem;
 color: var(--text-muted);
 line-height: 1.5;
}

.form-group {
 display: flex;
 flex-direction: column;
 gap: 6px;
}

.form-group label {
 font-size: 0.85rem;
 font-weight: 700;
 color: var(--text-main);
}

.form-group input {
 background: var(--bg-input);
 border: 1px solid var(--border-color);
 color: var(--text-main);
 padding: 10px 14px;
 border-radius: var(--radius-md);
 font-size: 0.9rem;
 outline: none;
 transition: border 0.2s ease, box-shadow 0.2s ease;
}

.form-group input:focus {
 border-color: var(--accent-primary);
 box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}

.form-group input::placeholder {
 color: var(--text-dim);
}

.form-group small {
 font-size: 0.76rem;
 color: var(--text-dim);
}

.radio-label {
 display: flex;
 align-items: center;
 gap: 8px;
 font-size: 0.85rem;
 color: var(--text-main);
 cursor: pointer;
}

.radio-label span {
 color: var(--text-main);
}

.pronounce-preview-box {
 background: var(--bg-input);
 border: 1px solid var(--border-color);
 padding: 12px 14px;
 border-radius: var(--radius-md);
 margin-bottom: 4px;
 display: flex;
 flex-direction: column;
 gap: 8px;
}

.pronounce-preview-box label {
 font-size: 0.8rem;
 font-weight: 700;
 color: var(--text-muted);
}

.modal-footer {
 padding: 16px 24px;
 background: linear-gradient(135deg, rgba(99, 102, 241, 0.12) 0%, rgba(139, 92, 246, 0.15) 100%);
 border-top: 1px solid var(--border-color);
 display: flex;
 gap: 10px;
 justify-content: flex-end;
}

/* Spinner */
.loading-spinner {
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 padding: 30px;
 gap: 12px;
 color: var(--text-muted);
 font-size: 0.85rem;
}

.spinner {
 width: 28px;
 height: 28px;
 border: 3px solid rgba(99, 102, 241, 0.2);
 border-top-color: var(--accent-primary);
 border-radius: 50%;
 animation: spin 0.8s linear infinite;
}

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



/* ==========================================================================
 Phase 3: Smart Speech Preparation & Analysis UI System
 ========================================================================== */

.toolbar-label.smart-label {
 color: #c084fc;
}

.visual-smart-btn {
 background: linear-gradient(135deg, rgba(168, 85, 247, 0.18) 0%, rgba(99, 102, 241, 0.22) 100%);
 border: 1px solid rgba(168, 85, 247, 0.45);
 color: #e9d5ff;
 padding: 5px 12px;
 border-radius: var(--radius-full);
 font-size: 0.78rem;
 font-weight: 700;
 cursor: pointer;
 display: inline-flex;
 align-items: center;
 gap: 6px;
 transition: all 0.25s ease;
 box-shadow: 0 2px 8px rgba(168, 85, 247, 0.15);
}

.visual-smart-btn:hover {
 background: linear-gradient(135deg, #a855f7 0%, #6366f1 100%);
 color: #ffffff;
 border-color: transparent;
 transform: translateY(-2px);
 box-shadow: 0 4px 14px rgba(168, 85, 247, 0.4);
}

.smart-count-badge {
 background: #a855f7;
 color: #ffffff;
 border-radius: 9999px;
 font-size: 0.68rem;
 font-weight: 800;
 padding: 1px 6px;
 line-height: 1;
}

.footer-actions-group {
 display: flex;
 align-items: center;
 gap: 10px;
}

.btn-smart-footer {
 background: linear-gradient(135deg, rgba(168, 85, 247, 0.18) 0%, rgba(99, 102, 241, 0.2) 100%);
 border: 1px solid rgba(168, 85, 247, 0.4);
 color: #e9d5ff;
 padding: 5px 14px;
 border-radius: var(--radius-full);
 font-size: 0.78rem;
 font-weight: 700;
 cursor: pointer;
 transition: all 0.25s ease;
}

body.dark-theme .btn-smart-footer {
 color: #e9d5ff;
}

.btn-smart-footer:hover {
 background: linear-gradient(135deg, #a855f7 0%, #6366f1 100%);
 color: #ffffff;
 border-color: transparent;
 transform: translateY(-1px);
 box-shadow: 0 4px 12px rgba(168, 85, 247, 0.35);
}

/* Smart Speech Suggestions Panel */
.smart-speech-panel {
 background: var(--bg-card);
 border: 1px solid var(--border-highlight);
 border-radius: var(--radius-lg);
 padding: 18px;
 display: flex;
 flex-direction: column;
 gap: 14px;
 box-shadow: var(--shadow-card);
 animation: fadeIn 0.3s ease;
}

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

.smart-header-title {
 display: flex;
 align-items: center;
 gap: 8px;
}

.smart-header-title h3 {
 font-family: var(--font-display);
 font-size: 1.05rem;
 font-weight: 700;
 color: var(--text-main);
}

.smart-summary-badges {
 display: flex;
 align-items: center;
 gap: 6px;
 flex-wrap: wrap;
}

.smart-badge-chip {
 font-size: 0.72rem;
 font-weight: 700;
 padding: 2px 8px;
 border-radius: var(--radius-full);
 background: rgba(168, 85, 247, 0.15);
 color: #c084fc;
 border: 1px solid rgba(168, 85, 247, 0.3);
}

.smart-header-actions {
 display: flex;
 align-items: center;
 gap: 8px;
 flex-wrap: wrap;
}

.btn-apply-all-safe {
 background: linear-gradient(135deg, #10b981 0%, #059669 100%);
 color: #ffffff;
 border: none;
 padding: 6px 14px;
 border-radius: var(--radius-full);
 font-size: 0.78rem;
 font-weight: 700;
 cursor: pointer;
 transition: all 0.2s ease;
 box-shadow: 0 2px 8px rgba(16, 185, 129, 0.25);
}

.btn-apply-all-safe:hover {
 transform: translateY(-1px);
 filter: brightness(1.1);
 box-shadow: 0 4px 12px rgba(16, 185, 129, 0.35);
}

.smart-suggestions-list {
 display: flex;
 flex-direction: column;
 gap: 10px;
}

.smart-suggestion-card {
 background: rgba(255, 255, 255, 0.03);
 border: 1px solid var(--border-color);
 border-radius: var(--radius-md);
 padding: 12px 14px;
 display: flex;
 flex-direction: column;
 gap: 8px;
 transition: all 0.2s ease;
}

.smart-suggestion-card:hover {
 border-color: rgba(168, 85, 247, 0.4);
 background: rgba(255, 255, 255, 0.05);
}

.smart-card-top {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 8px;
}

.smart-type-tag {
 font-size: 0.72rem;
 font-weight: 700;
 padding: 2px 8px;
 border-radius: var(--radius-full);
 display: inline-flex;
 align-items: center;
 gap: 4px;
}

.smart-type-tag.number {
 background: rgba(99, 102, 241, 0.15);
 color: #a5b4fc;
 border: 1px solid rgba(99, 102, 241, 0.3);
}

.smart-type-tag.date {
 background: rgba(6, 182, 212, 0.15);
 color: #67e8f9;
 border: 1px solid rgba(6, 182, 212, 0.3);
}

.smart-type-tag.time {
 background: rgba(245, 158, 11, 0.15);
 color: #fcd34d;
 border: 1px solid rgba(245, 158, 11, 0.3);
}

.smart-type-tag.abbrev {
 background: rgba(236, 72, 153, 0.15);
 color: #f472b6;
 border: 1px solid rgba(236, 72, 153, 0.3);
}

.smart-type-tag.pacing {
 background: rgba(16, 185, 129, 0.15);
 color: #6ee7b7;
 border: 1px solid rgba(16, 185, 129, 0.3);
}

.smart-confidence-badge {
 font-size: 0.68rem;
 font-weight: 700;
 color: var(--text-dim);
}

.smart-context-text {
 font-size: 0.85rem;
 color: var(--text-main);
 line-height: 1.4;
}

.smart-context-text mark {
 background: rgba(168, 85, 247, 0.25);
 color: var(--text-main);
 padding: 2px 8px;
 border-radius: var(--radius-full);
 font-weight: 700;
}

.smart-suggestion-box {
 background: linear-gradient(135deg, rgba(99, 102, 241, 0.12) 0%, rgba(139, 92, 246, 0.15) 100%);
 border: 1px solid var(--border-color);
 padding: 8px 14px;
 border-radius: var(--radius-full);
 font-size: 0.84rem;
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 10px;
 flex-wrap: wrap;
}

.smart-suggested-text {
 font-weight: 700;
 color: var(--accent-cyan);
}

.smart-card-actions {
 display: flex;
 align-items: center;
 gap: 8px;
 flex-wrap: wrap;
}

.btn-smart-apply {
 background: linear-gradient(135deg, rgba(99, 102, 241, 0.2) 0%, rgba(139, 92, 246, 0.25) 100%);
 border: 1px solid rgba(99, 102, 241, 0.4);
 color: var(--text-main);
 padding: 4px 12px;
 border-radius: var(--radius-full);
 font-size: 0.76rem;
 font-weight: 700;
 cursor: pointer;
 transition: all 0.2s ease;
}

.btn-smart-apply:hover,
.btn-smart-apply.applied {
 background: var(--gradient-primary);
 color: #ffffff;
 border-color: transparent;
}

.btn-smart-ignore {
 background: transparent;
 border: 1px solid var(--border-color);
 color: var(--text-muted);
 padding: 4px 10px;
 border-radius: var(--radius-full);
 font-size: 0.76rem;
 font-weight: 600;
 cursor: pointer;
 transition: all 0.15s ease;
}

.btn-smart-ignore:hover {
 background: rgba(239, 68, 68, 0.15);
 color: #fca5a5;
 border-color: rgba(239, 68, 68, 0.3);
}

.smart-preview-toggle-bar {
 border-top: 1px solid var(--border-color);
 padding-top: 10px;
 display: flex;
 flex-direction: column;
 gap: 8px;
}

.btn-toggle-speech-preview {
 background: transparent;
 border: none;
 color: var(--accent-cyan);
 font-size: 0.8rem;
 font-weight: 700;
 cursor: pointer;
 display: flex;
 align-items: center;
 gap: 6px;
 width: fit-content;
}

.btn-toggle-speech-preview:hover {
 text-decoration: underline;
}

.speech-preview-comparison {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 12px;
 background: linear-gradient(135deg, rgba(20, 26, 42, 0.8) 0%, rgba(30, 39, 64, 0.7) 100%);
 border: 1px solid var(--border-color);
 padding: 14px;
 border-radius: var(--radius-md);
}

@media (max-width: 768px) {
 .speech-preview-comparison {
 grid-template-columns: 1fr;
 }
}

.preview-col h5 {
 font-size: 0.75rem;
 font-weight: 700;
 color: var(--text-muted);
 margin-bottom: 4px;
 text-transform: uppercase;
}

.preview-col p {
 font-size: 0.84rem;
 color: var(--text-main);
 line-height: 1.5;
}

/* ==========================================================================
 PHASE 4: HERO, LANDING, CONTENT PAGES, MOBILE & ACCESSIBILITY STYLES
 ========================================================================== */

/* Hero Section */
.hero-section {
 display: grid;
 grid-template-columns: 1.2fr 0.8fr;
 gap: 32px;
 align-items: center;
 margin-bottom: 48px;
 padding: 36px 28px;
 background: var(--bg-card);
 border: 1px solid var(--border-color);
 border-radius: var(--radius-lg);
 backdrop-filter: blur(12px);
 position: relative;
 overflow: hidden;
}

.hero-content {
 display: flex;
 flex-direction: column;
 gap: 16px;
}

.hero-badge {
 display: inline-flex;
 align-items: center;
 padding: 4px 14px;
 border-radius: var(--radius-full);
 background: linear-gradient(135deg, rgba(99, 102, 241, 0.25) 0%, rgba(217, 70, 239, 0.25) 100%);
 border: 1px solid rgba(99, 102, 241, 0.4);
 color: #a5b4fc;
 font-size: 0.78rem;
 font-weight: 800;
 letter-spacing: 1px;
 width: fit-content;
}

.hero-headline {
 font-family: 'Outfit', sans-serif;
 font-size: 2.5rem;
 font-weight: 800;
 line-height: 1.15;
 color: var(--text-main);
 background: linear-gradient(135deg, #ffffff 30%, #a5b4fc 100%);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
}

body.light-theme .hero-headline {
 background: linear-gradient(135deg, #0f172a 30%, #4338ca 100%);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
}

.hero-description {
 font-size: 1.05rem;
 color: var(--text-muted);
 line-height: 1.6;
 max-width: 580px;
}

.hero-cta-group {
 display: flex;
 align-items: center;
 gap: 14px;
 margin-top: 8px;
 flex-wrap: wrap;
}

.btn-hero-cta {
 padding: 14px 28px;
 font-size: 1rem;
 font-weight: 700;
 border-radius: var(--radius-full);
 box-shadow: 0 4px 20px rgba(99, 102, 241, 0.35);
}

.btn-hero-cta-sec {
 padding: 14px 24px;
 font-size: 1rem;
 font-weight: 700;
 border-radius: var(--radius-full);
}

/* Hero Audio Demo Box (Step 4) */
.hero-demo-card {
 background: rgba(15, 23, 42, 0.6);
 border: 1px solid var(--border-highlight);
 border-radius: var(--radius-md);
 padding: 20px;
 display: flex;
 flex-direction: column;
 gap: 16px;
 box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

body.light-theme .hero-demo-card {
 background: rgba(255, 255, 255, 0.85);
}

.demo-card-header {
 display: flex;
 align-items: center;
 gap: 12px;
}

.demo-icon {
 font-size: 1.8rem;
}

.demo-card-header h3 {
 font-size: 1.1rem;
 font-weight: 700;
 color: var(--text-main);
 margin: 0;
}

.demo-subtitle {
 font-size: 0.78rem;
 color: var(--text-dim);
 margin: 0;
}

.demo-voice-selector {
 display: flex;
 gap: 8px;
}

.demo-voice-btn {
 flex: 1;
 background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(139, 92, 246, 0.12) 100%);
 border: 1px solid rgba(99, 102, 241, 0.25);
 padding: 10px 14px;
 border-radius: var(--radius-full);
 color: var(--text-main);
 cursor: pointer;
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 2px;
 font-size: 0.8rem;
 font-weight: 600;
 transition: all 0.2s ease;
}

.demo-voice-btn small {
 font-size: 0.68rem;
 color: var(--text-dim);
 font-weight: 500;
}

.demo-voice-btn.active,
.demo-voice-btn:hover {
 border-color: var(--accent-primary);
 background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
 color: #ffffff;
 box-shadow: 0 4px 15px rgba(99, 102, 241, 0.35);
}

.demo-voice-btn.active small,
.demo-voice-btn:hover small {
 color: rgba(255, 255, 255, 0.9);
}

/* Light Theme Voice Pills */
body.light-theme .demo-voice-btn {
 background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
 border: 1px solid #cbd5e1;
 color: #1e293b;
}

body.light-theme .demo-voice-btn small {
 color: #64748b;
}

body.light-theme .demo-voice-btn.active,
body.light-theme .demo-voice-btn:hover {
 background: linear-gradient(135deg, #e0e7ff 0%, #ede9fe 100%);
 border: 2px solid #6366f1;
 color: #3730a3;
 box-shadow: 0 4px 15px rgba(99, 102, 241, 0.25);
}

body.light-theme .demo-voice-btn.active small,
body.light-theme .demo-voice-btn:hover small {
 color: #4f46e5;
 font-weight: 700;
}

.demo-player-box {
 background: linear-gradient(135deg, rgba(99, 102, 241, 0.25) 0%, rgba(139, 92, 246, 0.3) 50%, rgba(6, 182, 212, 0.25) 100%);
 border: 1px solid rgba(99, 102, 241, 0.45);
 padding: 12px 18px;
 border-radius: var(--radius-full);
 display: flex;
 align-items: center;
 gap: 14px;
 box-shadow: 0 6px 25px rgba(99, 102, 241, 0.2);
}

body.light-theme .demo-player-box {
 background: linear-gradient(135deg, #e0e7ff 0%, #ede9fe 50%, #e0f2fe 100%);
 border: 1px solid #818cf8;
 box-shadow: 0 6px 20px rgba(99, 102, 241, 0.18);
}

.demo-track-info {
 display: flex;
 flex-direction: column;
 flex: 1;
 overflow: hidden;
}

#hero-demo-voice-name {
 font-size: 0.82rem;
 font-weight: 700;
 color: var(--accent-cyan);
}

.demo-sample-phrase {
 font-size: 0.76rem;
 color: var(--text-muted);
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}

.demo-soundwave {
 display: flex;
 align-items: center;
 gap: 3px;
 height: 20px;
}

.demo-soundwave span {
 width: 3px;
 height: 6px;
 background: var(--accent-primary);
 border-radius: 9999px;
 transition: height 0.2s ease;
}

.demo-soundwave.playing span:nth-child(1) { animation: wavePulse 0.6s infinite ease-in-out; }
.demo-soundwave.playing span:nth-child(2) { animation: wavePulse 0.6s infinite ease-in-out 0.15s; }
.demo-soundwave.playing span:nth-child(3) { animation: wavePulse 0.6s infinite ease-in-out 0.3s; }
.demo-soundwave.playing span:nth-child(4) { animation: wavePulse 0.6s infinite ease-in-out 0.45s; }
.demo-soundwave.playing span:nth-child(5) { animation: wavePulse 0.6s infinite ease-in-out 0.2s; }

@keyframes wavePulse {
 0%, 100% { height: 6px; }
 50% { height: 18px; }
}

/* Value Proposition Grid (Step 5) */
.value-prop-section,
.product-showcase-section,
.faq-section {
 margin-bottom: 56px;
}

.section-title-center {
 text-align: center;
 margin-bottom: 32px;
}

.section-title-center h2 {
 font-family: 'Outfit', sans-serif;
 font-size: 2rem;
 font-weight: 800;
 color: var(--text-main);
 margin-bottom: 8px;
}

.section-title-center p {
 font-size: 1rem;
 color: var(--text-muted);
}

.value-grid {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 20px;
}

.value-card {
 background: var(--bg-card);
 border: 1px solid var(--border-color);
 border-radius: var(--radius-md);
 padding: 24px;
 display: flex;
 flex-direction: column;
 gap: 10px;
 transition: transform 0.2s ease, border-color 0.2s ease;
}

.value-card:hover {
 transform: translateY(-4px);
 border-color: var(--border-highlight);
}

.value-icon {
 font-size: 2.2rem;
}

.value-card h3 {
 font-size: 1.15rem;
 font-weight: 700;
 color: var(--text-main);
 margin: 0;
}

.value-card p {
 font-size: 0.9rem;
 color: var(--text-muted);
 line-height: 1.5;
 margin: 0;
}

/* Showcase Grid (Step 6) */
.showcase-grid {
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 gap: 24px;
}

.showcase-card {
 background: var(--bg-card);
 border: 1px solid var(--border-color);
 border-radius: var(--radius-md);
 padding: 24px;
 display: flex;
 flex-direction: column;
 gap: 12px;
 position: relative;
}

.showcase-badge {
 font-size: 0.72rem;
 font-weight: 800;
 text-transform: uppercase;
 color: var(--accent-cyan);
 letter-spacing: 0.5px;
}

.showcase-card h3 {
 font-size: 1.2rem;
 font-weight: 700;
 color: var(--text-main);
 margin: 0;
}

.showcase-card p {
 font-size: 0.9rem;
 color: var(--text-muted);
 line-height: 1.5;
 margin: 0;
}

.showcase-preview-pill {
 background: linear-gradient(135deg, rgba(99, 102, 241, 0.25) 0%, rgba(217, 70, 239, 0.28) 100%);
 border: 1px solid rgba(168, 85, 247, 0.45);
 padding: 10px 18px;
 border-radius: var(--radius-full);
 font-family: monospace;
 font-size: 0.82rem;
 color: #f472b6;
 overflow-x: auto;
 box-shadow: 0 4px 20px rgba(168, 85, 247, 0.2);
}

body.light-theme .showcase-preview-pill {
 background: linear-gradient(135deg, #e0e7ff 0%, #fce7f3 100%);
 border: 1px solid #c084fc;
 color: #be185d;
 box-shadow: 0 4px 15px rgba(192, 132, 252, 0.2);
}

/* Non-Intrusive AdSense Placeholder Containers (Part D) */
.ad-banner-slot {
 margin: 40px 0;
 background: linear-gradient(135deg, rgba(99, 102, 241, 0.08) 0%, rgba(217, 70, 239, 0.08) 100%);
 border: 1px dashed rgba(99, 102, 241, 0.25);
 border-radius: var(--radius-lg);
 padding: 14px;
 text-align: center;
 position: relative;
}

body.light-theme .ad-banner-slot {
 background: linear-gradient(135deg, rgba(99, 102, 241, 0.05) 0%, rgba(217, 70, 239, 0.05) 100%);
 border-color: rgba(99, 102, 241, 0.2);
}

.ad-badge {
 position: absolute;
 top: -9px;
 left: 20px;
 background: var(--bg-card);
 border: 1px solid var(--border-color);
 padding: 1px 8px;
 border-radius: var(--radius-full);
 font-size: 0.65rem;
 font-weight: 700;
 color: var(--text-dim);
 text-transform: uppercase;
}

.ad-placeholder-box {
 min-height: 60px;
 display: flex;
 align-items: center;
 justify-content: center;
 color: var(--text-dim);
 font-size: 0.8rem;
 font-weight: 600;
}

.sidebar-ad-slot {
 margin-top: 24px;
 margin-bottom: 0;
}

/* FAQ Section Accordion (Step 11) */
.faq-accordion {
 max-width: 800px;
 margin: 0 auto;
 display: flex;
 flex-direction: column;
 gap: 12px;
}

.faq-item {
 background: var(--bg-card);
 border: 1px solid var(--border-color);
 border-radius: var(--radius-md);
 overflow: hidden;
 transition: border-color 0.2s ease;
}

.faq-item.active {
 border-color: var(--border-highlight);
}

.faq-question {
 width: 100%;
 padding: 18px 20px;
 background: transparent;
 border: none;
 color: var(--text-main);
 font-size: 1rem;
 font-weight: 700;
 text-align: left;
 cursor: pointer;
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 14px;
}

.faq-icon {
 font-size: 1.2rem;
 font-weight: 400;
 color: var(--accent-primary);
 transition: transform 0.2s ease;
}

.faq-item.active .faq-icon {
 transform: rotate(45deg);
}

.faq-answer {
 max-height: 0;
 overflow: hidden;
 transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), padding 0.3s ease;
 padding: 0 20px;
}

.faq-item.active .faq-answer {
 max-height: 300px;
 padding: 0 20px 20px 20px;
}

.faq-answer p {
 font-size: 0.92rem;
 color: var(--text-muted);
 line-height: 1.6;
 margin: 0;
}

/* CTA Banner */
.cta-banner {
 background: linear-gradient(135deg, rgba(99, 102, 241, 0.2) 0%, rgba(139, 92, 246, 0.25) 100%);
 border: 1px solid var(--border-highlight);
 border-radius: var(--radius-lg);
 padding: 40px 24px;
 text-align: center;
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 16px;
}

.cta-banner h2 {
 font-family: 'Outfit', sans-serif;
 font-size: 2rem;
 font-weight: 800;
 color: var(--text-main);
 margin: 0;
}

.cta-banner p {
 font-size: 1rem;
 color: var(--text-muted);
 margin: 0;
}

/* Content Pages Container (About, Privacy, Terms, Contact) */
.content-page-container {
 max-width: 900px;
 margin: 0 auto;
 padding: 32px 20px;
}

.page-header {
 margin-bottom: 32px;
}

.page-header h2 {
 font-family: 'Outfit', sans-serif;
 font-size: 2.2rem;
 font-weight: 800;
 color: var(--text-main);
 margin-bottom: 6px;
}

.page-header .subtitle {
 font-size: 1rem;
 color: var(--text-muted);
}

.content-body {
 display: flex;
 flex-direction: column;
 gap: 28px;
}

.content-block {
 background: var(--bg-card);
 border: 1px solid var(--border-color);
 border-radius: var(--radius-md);
 padding: 24px;
 display: flex;
 flex-direction: column;
 gap: 12px;
}

.content-block h3 {
 font-size: 1.25rem;
 font-weight: 700;
 color: var(--text-main);
 margin: 0;
}

.content-block p,
.content-block ul {
 font-size: 0.95rem;
 color: var(--text-muted);
 line-height: 1.65;
 margin: 0;
}

.content-block ul {
 padding-left: 20px;
 display: flex;
 flex-direction: column;
 gap: 8px;
}

/* Contact Page Grid */
.contact-grid {
 display: grid;
 grid-template-columns: 1fr 1.2fr;
 gap: 24px;
}

.contact-info-card,
.contact-form {
 background: var(--bg-card);
 border: 1px solid var(--border-color);
 border-radius: var(--radius-md);
 padding: 24px;
 display: flex;
 flex-direction: column;
 gap: 16px;
}

.contact-method {
 display: flex;
 align-items: center;
 gap: 12px;
 margin-top: 10px;
}

.contact-method .icon {
 font-size: 1.6rem;
}

.contact-method strong {
 display: block;
 font-size: 0.9rem;
 color: var(--text-main);
}

.contact-method p {
 font-size: 0.85rem;
 color: var(--text-muted);
 margin: 0;
}

/* Footer Section */
.app-footer {
 margin-top: 60px;
 background: var(--bg-card);
 border-top: 1px solid var(--border-color);
 padding: 40px 24px 20px 24px;
 position: relative;
 z-index: 10;
}

.footer-container {
 max-width: 1200px;
 margin: 0 auto;
 display: grid;
 grid-template-columns: 1fr 2fr;
 gap: 40px;
 margin-bottom: 30px;
}

.footer-brand .logo-text {
 font-family: 'Outfit', sans-serif;
 font-size: 1.4rem;
 font-weight: 800;
 color: var(--text-main);
}

.footer-brand p {
 font-size: 0.85rem;
 color: var(--text-muted);
 margin-top: 4px;
}

.footer-links-grid {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 24px;
}

.footer-col h4 {
 font-size: 0.9rem;
 font-weight: 700;
 color: var(--text-main);
 margin-bottom: 12px;
}

.footer-col a {
 display: block;
 font-size: 0.85rem;
 color: var(--text-muted);
 text-decoration: none;
 margin-bottom: 8px;
 transition: color 0.15s ease;
}

.footer-col a:hover {
 color: var(--accent-cyan);
}

.footer-bottom {
 max-width: 1200px;
 margin: 0 auto;
 padding-top: 20px;
 border-top: 1px solid var(--border-color);
 text-align: center;
 font-size: 0.8rem;
 color: var(--text-dim);
}

/* Mobile Hamburger & Navigation Drawer */
.mobile-menu-btn {
 display: none;
 background: transparent;
 border: none;
 color: var(--text-main);
 cursor: pointer;
 padding: 6px;
}

/* ==========================================================================
 MOBILE & RESPONSIVE ENGINE — ALL BREAKPOINTS (320px - 1440px+)
 Targeted Devices: Ultra-small (320px), Standard Mobile (360-480px),
 Tablets (600-1024px), and Desktop/Ultrawide (1025px+)
 ========================================================================== */

.mobile-menu-btn {
 display: none;
}

/* Tablet & Below Laptops (max-width: 1024px) */
@media (max-width: 1024px) {
 .app-header {
 padding: 10px 0;
 }

 .header-container {
 padding: 0 16px !important;
 flex-direction: row !important;
 align-items: center !important;
 justify-content: space-between !important;
 flex-wrap: nowrap !important;
 gap: 10px !important;
 }

 .brand {
 display: flex !important;
 align-items: center !important;
 gap: 10px !important;
 min-width: 0 !important;
 flex: 1 !important;
 }

 .brand-text p {
 display: none !important;
 }

 .brand-text h1 {
 font-size: 1.1rem !important;
 white-space: nowrap !important;
 }

 .badge-tag {
 font-size: 0.58rem !important;
 padding: 1px 6px !important;
 }

 .logo-icon {
 width: 36px !important;
 height: 36px !important;
 min-width: 36px !important;
 }

 .logo-icon svg {
 width: 20px !important;
 height: 20px !important;
 }

 .header-actions {
 display: flex !important;
 flex-direction: row !important;
 align-items: center !important;
 gap: 6px !important;
 flex-shrink: 0 !important;
 flex-wrap: nowrap !important;
 }

 .mobile-menu-btn {
 display: inline-flex !important;
 align-items: center !important;
 justify-content: center !important;
 width: 36px !important;
 height: 36px !important;
 min-width: 36px !important;
 border-radius: var(--radius-full) !important;
 padding: 0 !important;
 flex-shrink: 0 !important;
 }

 .header-actions #theme-text {
 display: none !important;
 }

 .header-actions #btn-theme-toggle {
 padding: 0 !important;
 width: 36px !important;
 height: 36px !important;
 min-width: 36px !important;
 border-radius: var(--radius-full) !important;
 justify-content: center !important;
 flex-shrink: 0 !important;
 }

 .nav-tabs {
 position: absolute !important;
 top: calc(100% + 6px) !important;
 right: 16px !important;
 left: auto !important;
 width: 220px !important;
 max-width: calc(100vw - 32px) !important;
 background: var(--bg-dropdown-menu) !important;
 backdrop-filter: blur(24px) !important;
 -webkit-backdrop-filter: blur(24px) !important;
 border: 1px solid var(--border-highlight) !important;
 border-radius: var(--radius-md) !important;
 flex-direction: column !important;
 padding: 8px !important;
 gap: 4px !important;
 display: none;
 box-shadow: var(--shadow-dropdown) !important;
 z-index: 9999 !important;
 opacity: 0;
 transform: translateY(-8px);
 transition: opacity 0.2s ease, transform 0.2s ease;
 }

 .nav-tabs.mobile-open {
 display: flex !important;
 opacity: 1;
 transform: translateY(0);
 }

 .nav-tabs .tab-btn {
 width: 100% !important;
 justify-content: flex-start !important;
 padding: 10px 14px !important;
 border-radius: var(--radius-full) !important;
 font-size: 0.88rem !important;
 }

 .studio-grid {
 grid-template-columns: 1fr;
 gap: 20px;
 }

 .panel-card {
 padding: 20px;
 }
}

/* Medium Tablets & Large Mobiles (max-width: 900px) */
@media (max-width: 900px) {
 .app-main {
 padding: 12px 16px 28px;
 }

 .hero-section {
 grid-template-columns: 1fr;
 gap: 28px;
 padding: 24px 18px;
 margin-bottom: 36px;
 width: 100%;
 max-width: 100%;
 overflow: hidden;
 }

 .hero-content {
 align-items: flex-start;
 text-align: left;
 }

 .hero-headline {
 font-size: clamp(1.75rem, 5vw, 2.3rem);
 line-height: 1.2;
 word-break: break-word;
 }

 .hero-description {
 font-size: 0.98rem;
 }

 .hero-cta-group {
 width: 100%;
 }

 .hero-demo-card {
 width: 100%;
 max-width: 100%;
 }

 .value-grid {
 grid-template-columns: repeat(2, 1fr);
 }

 .showcase-grid {
 grid-template-columns: 1fr;
 }

 .footer-container {
 grid-template-columns: 1fr;
 gap: 24px;
 }
}

/* Small Tablets & Large Phones (max-width: 680px) */
@media (max-width: 680px) {
 .app-header {
 padding: 10px 0;
 }

 .header-container {
 padding: 0 14px;
 gap: 10px;
 flex-wrap: nowrap;
 }

 .brand {
 gap: 10px;
 min-width: 0;
 flex: 1;
 }

 .logo-icon {
 width: 36px;
 height: 36px;
 }

 .logo-icon svg {
 width: 20px;
 height: 20px;
 }

 .brand-text h1 {
 font-size: 1.08rem;
 white-space: nowrap;
 }

 .badge-tag {
 font-size: 0.56rem;
 padding: 1px 5px;
 }

 .brand-text p {
 display: none;
 }

 .header-actions {
 gap: 6px;
 flex-shrink: 0;
 flex-wrap: nowrap;
 }

 .header-actions #btn-theme-toggle,
 .header-actions #mobile-menu-btn {
 width: 36px;
 height: 36px;
 min-width: 36px;
 }

 .hero-section {
 padding: 18px 14px;
 border-radius: var(--radius-md);
 gap: 20px;
 }

 .hero-badge {
 font-size: 0.72rem;
 padding: 3px 10px;
 }

 .hero-headline {
 font-size: 1.55rem;
 line-height: 1.25;
 }

 .hero-description {
 font-size: 0.9rem;
 line-height: 1.45;
 }

 .hero-cta-group {
 flex-direction: column;
 width: 100%;
 gap: 10px;
 }

 .btn-hero-cta,
 .btn-hero-cta-sec {
 width: 100%;
 justify-content: center;
 text-align: center;
 font-size: 0.92rem;
 padding: 12px 20px;
 }

 .hero-demo-card {
 padding: 12px;
 gap: 12px;
 }

 .demo-voice-selector {
 flex-direction: column;
 gap: 6px;
 width: 100%;
 }

 .demo-voice-btn {
 width: 100%;
 flex-direction: row;
 justify-content: space-between;
 align-items: center;
 padding: 8px 12px;
 font-size: 0.82rem;
 }

 .demo-player-box {
 flex-direction: column;
 align-items: stretch;
 gap: 10px;
 padding: 12px;
 border-radius: var(--radius-md);
 width: 100%;
 }

 .demo-soundwave {
 justify-content: center;
 }

 .sliders-grid {
 grid-template-columns: 1fr;
 }

 .value-grid {
 grid-template-columns: 1fr;
 }

 .footer-links-grid {
 grid-template-columns: 1fr;
 gap: 20px;
 }

 .editor-actions {
 flex-direction: column;
 gap: 8px;
 }

 .editor-actions button {
 width: 100%;
 justify-content: center;
 }
}

/* Small Mobiles & Compact Devices (max-width: 520px) */
@media (max-width: 520px) {
 .header-container {
 padding: 0 16px;
 }

 .brand-text h1 {
 font-size: 1.15rem;
 }

 .brand-text p {
 display: none;
 }

 .filters-row {
 flex-direction: column;
 }

 .filters-row .custom-dropdown-container {
 width: 100%;
 min-width: 100%;
 }

 .voice-card {
 padding: 10px 12px;
 gap: 8px;
 }

 .voice-title {
 font-size: 0.8rem;
 }

 .voice-persona-tag {
 font-size: 0.65rem;
 padding: 2px 8px;
 }

 .btn-voice-preview {
 font-size: 0.68rem;
 padding: 3px 10px;
 }

 .player-controls {
 flex-wrap: wrap;
 gap: 10px;
 }

 .timeline-slider-wrapper {
 width: 100%;
 order: 3;
 }
}

/* Ultra Small Mobiles (max-width: 380px) */
@media (max-width: 380px) {
 .panel-card {
 padding: 14px 10px;
 }

 .voice-card-right-group {
 margin-left: 4px;
 }
}

/* ACCESSIBILITY & REDUCED MOTION (PART G) */
:focus-visible {
 outline: 2px solid var(--accent-cyan) !important;
 outline-offset: 2px !important;
}

@media (prefers-reduced-motion: reduce) {
 *,
 *::before,
 *::after {
 animation-duration: 0.01ms !important;
 animation-iteration-count: 1 !important;
 transition-duration: 0.01ms !important;
 scroll-behavior: auto !important;
 }
}