:root {
    --primary: #00E676;
    --primary-dark: #00C853;
    --ai-accent: #D1C4E9;
    --ai-glow: #7C4DFF;
    --danger: #FF5252;
    --bg-dark: #0A0A0B;
    --surface: #161618;
    --surface-light: #222225;
    --text-main: #F5F5F7;
    --text-muted: #86868B;
    --glass: rgba(255, 255, 255, 0.03);
    --border: rgba(255, 255, 255, 0.1);
    --caption-size: 1.4rem;
    --caption-color: #FFEB3B;
    --caption-opacity: 1;
    --caption-bg: rgba(0, 0, 0, 0);
}

* { box-sizing: border-box; -webkit-font-smoothing: antialiased; }

body {
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif;
    background-color: var(--bg-dark);
    color: var(--text-main);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    overflow-x: hidden;
}

.topbar {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.9rem 5%;
    background-color: rgba(8, 18, 31, 0.92);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 100;
}
.topbar-inner {
    width: min(100%, 1180px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

.brand { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.brand h1 { margin: 0; color: var(--text-main); font-size: 1.25rem; font-weight: 900; letter-spacing: 0; text-transform: none; }
.brand-mark {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--primary), #5E7CFF);
    color: #061009;
    font-weight: 900;
    box-shadow: 0 10px 28px rgba(0,230,118,0.14);
    flex: 0 0 auto;
}
.brand-copy { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.brand-copy h1 { font-size: 1.05rem; font-weight: 850; letter-spacing: 0; margin: 0; color: var(--text-main); }
.brand-copy span { color: var(--text-muted); font-size: 0.68rem; font-weight: 700; white-space: nowrap; }
.topbar-actions { display: flex; align-items: center; justify-content: flex-end; gap: 0.6rem; flex: 0 0 auto; }
.topbar .status-badge,
.topbar .volume-meter { display: none; }
.status-badge { padding: 6px 10px; border-radius: 999px; font-size: 0.72rem; font-weight: 800; background: var(--glass); border: 1px solid var(--border); display: flex; align-items: center; gap: 6px; min-height: 34px; }
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: #555; transition: all 0.3s; }
.status-dot.active { background: var(--primary); box-shadow: 0 0 10px var(--primary); animation: pulse 1.5s infinite; }
.plan-badge {
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid rgba(0,230,118,0.35);
    color: var(--primary);
    background: rgba(0,230,118,0.08);
    font-size: 0.68rem;
    font-weight: 800;
}

@keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } }

.volume-meter {
    background: var(--surface);
    padding: 6px 10px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    gap: 9px;
    border: 1px solid var(--border);
    min-height: 34px;
}
.meter-title { font-size: 0.68rem; font-weight: 800; color: var(--text-muted); white-space: nowrap; }
.meter-value { font-size: 0.68rem; font-weight: 900; min-width: 26px; text-align: right; }
.v-bar { width: 68px; height: 5px; background: #2A2A2E; border-radius: 999px; overflow: hidden; }
.v-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--primary), #81C784); transition: width 0.05s ease-out; }
.premium-nav-btn {
    min-height: 36px;
    border-radius: 6px;
    padding: 8px 13px;
    color: #FFE96A;
    background: rgba(255,215,64,0.08);
    border: 1px solid rgba(255,215,64,0.65);
    font-size: 0.82rem;
    font-weight: 900;
}
.account-btn {
    min-height: 34px;
    border-radius: 6px;
    padding: 8px 13px;
    color: var(--text-main);
    background: rgba(255,255,255,0.065);
    border: 1px solid rgba(255,255,255,0.14);
    font-size: 0.82rem;
    font-weight: 900;
}
.top-language-select {
    width: auto;
    min-width: 104px;
    min-height: 34px;
    padding: 7px 30px 7px 10px;
    border-radius: 8px;
    background: rgba(255,255,255,0.065);
    border: 1px solid rgba(255,255,255,0.14);
    color: var(--text-main);
    font-size: 0.78rem;
    font-weight: 850;
}

.app-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(10,10,11,0.94);
    padding: 0.65rem 5%;
    gap: 0.5rem;
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
}
.topbar + .app-nav { display: none; }
.topbar .app-nav {
    flex: 1;
    justify-content: center;
    background: transparent;
    padding: 0;
    gap: 1.15rem;
    border-bottom: 0;
}
.topbar .nav-item {
    padding: 0.25rem 0;
    border-radius: 0;
    border: 0;
    background: transparent;
    color: var(--text-main);
    font-size: 0.9rem;
}
.topbar .nav-item:hover { color: var(--primary); background: transparent; }
.topbar .nav-item.active { color: var(--primary); background: transparent; border-color: transparent; }
.nav-item {
    padding: 0.58rem 0.9rem;
    cursor: pointer;
    font-size: 0.86rem;
    font-weight: 800;
    color: var(--text-muted);
    border: 1px solid transparent;
    border-radius: 999px;
    transition: all 0.2s;
    white-space: nowrap;
}
a.nav-item { text-decoration: none; }
.nav-item:hover { color: var(--text-main); background: rgba(255,255,255,0.035); }
.nav-item.active { color: #061009; background: var(--primary); border-color: var(--primary); }

.container { flex: 1; display: none; flex-direction: column; padding: 2.35rem 5% 1.5rem; max-width: 1180px; margin: 0 auto; width: 100%; gap: 1.5rem; }
.container.active { display: flex; }

#model-loading { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 4px; background: #222; z-index: 1000; }
#model-loading-fill { height: 100%; width: 0%; background: var(--primary); transition: width 0.3s; box-shadow: 0 0 10px var(--primary); }
.toast {
    position: fixed;
    left: 50%;
    top: 76px;
    transform: translate(-50%, -8px);
    z-index: 1200;
    max-width: min(92vw, 520px);
    padding: 0.75rem 1rem;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: rgba(22,22,24,0.96);
    color: var(--text-main);
    font-size: 0.86rem;
    font-weight: 700;
    line-height: 1.45;
    box-shadow: 0 18px 40px rgba(0,0,0,0.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.error { border-color: rgba(255,82,82,0.45); color: #FFD6D6; }
.toast.success { border-color: rgba(0,230,118,0.45); color: #D7FFE8; }

.selector-box { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); 
    gap: 1rem; 
    background: var(--surface); 
    padding: 1.2rem; 
    border-radius: 16px; 
    border: 1px solid var(--border);
}
.selector-item { display: flex; flex-direction: column; gap: 8px; position: relative; }
.selector-item label { font-size: 0.7rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.selector-inline { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; }
.settings-icon-btn {
    width: 44px;
    min-height: 40px;
    justify-content: center;
    padding: 0;
    font-size: 1.1rem;
}
.settings-icon-btn.active {
    border-color: rgba(0,230,118,0.45);
    background: rgba(0,230,118,0.1);
}
.premium-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    padding: 0.95rem 1rem;
    border: 1px solid rgba(124,77,255,0.35);
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(124,77,255,0.13), rgba(0,230,118,0.06));
}
.premium-card strong { display: block; margin-bottom: 0.2rem; font-size: 0.9rem; }
.premium-card p { margin: 0; color: var(--text-muted); font-size: 0.82rem; line-height: 1.5; }
.premium-card.attention { border-color: rgba(255,235,59,0.7); box-shadow: 0 0 0 1px rgba(255,235,59,0.15); }
.premium-actions { display: flex; gap: 0.55rem; flex-wrap: nowrap; justify-content: flex-end; align-items: center; }
.premium-actions .btn {
    width: auto;
    min-height: 44px;
    white-space: nowrap;
    border-radius: 12px;
    padding: 0 1rem;
    justify-content: center;
}
.premium-actions .btn-start { min-width: 210px; }
.premium-actions .btn-pip { min-width: 48px; font-size: 0.78rem; }
.mini-meter { color: var(--text-muted); font-size: 0.72rem; font-weight: 800; }
.lecture-flow {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}
.lecture-flow > div {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 0.75rem;
    row-gap: 0.25rem;
    align-items: start;
    padding: 0.95rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: rgba(17, 27, 42, 0.78);
}
.lecture-flow span {
    grid-row: 1 / 3;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    color: #061009;
    background: var(--primary);
    font-weight: 900;
    font-size: 0.82rem;
}
.lecture-flow strong { font-size: 0.88rem; }
.lecture-flow p { margin: 0; color: var(--text-muted); font-size: 0.78rem; line-height: 1.5; }
.lesson-title-item { grid-column: span 2; }
.lesson-note {
    margin: -0.65rem 0 0;
    color: var(--text-muted);
    font-size: 0.78rem;
    line-height: 1.55;
}
.sample-output {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.75rem;
    align-items: stretch;
}
.sample-copy,
.sample-card {
    padding: 0.95rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: rgba(255,255,255,0.028);
}
.sample-copy strong,
.sample-card strong {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.92rem;
}
.sample-output p {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.8rem;
    line-height: 1.55;
}
.sample-card span {
    display: inline-flex;
    margin-bottom: 0.55rem;
    padding: 0.25rem 0.5rem;
    border-radius: 999px;
    color: var(--primary);
    background: rgba(0,230,118,0.08);
    border: 1px solid rgba(0,230,118,0.22);
    font-size: 0.68rem;
    font-weight: 900;
}
.auth-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1500;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(0,0,0,0.62);
    backdrop-filter: blur(10px);
}
.auth-modal.active { display: flex; }
.auth-dialog {
    width: min(92vw, 480px);
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    box-shadow: 0 24px 70px rgba(0,0,0,0.55);
    overflow: hidden;
}
.auth-header {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
    border-bottom: 1px solid var(--border);
    background: rgba(255,255,255,0.025);
}
.auth-header h3 { margin: 0 0 0.25rem; font-size: 1rem; }
.auth-header p { margin: 0; color: var(--text-muted); font-size: 0.82rem; line-height: 1.5; }
.auth-actions { display: flex; flex-direction: column; gap: 0.75rem; padding: 1rem; }
.auth-email-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.5rem; }
.auth-email-row .btn { white-space: nowrap; }
.account-panel { display: flex; flex-direction: column; gap: 0.75rem; padding: 1rem; }
.account-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border);
}
.account-row span { color: var(--text-muted); font-size: 0.8rem; }
.account-row strong { color: var(--text-main); font-size: 0.9rem; text-align: right; overflow-wrap: anywhere; }
.account-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: flex-end; padding-top: 0.5rem; }
.account-actions .btn { width: auto; }
.pricing-dialog { width: min(94vw, 860px); }
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
    padding: 1rem;
}
.price-card {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: rgba(255,255,255,0.03);
}
.price-card.featured {
    border-color: rgba(0,230,118,0.45);
    background: linear-gradient(180deg, rgba(0,230,118,0.1), rgba(255,255,255,0.035));
}
.price-label {
    width: fit-content;
    padding: 0.28rem 0.55rem;
    border-radius: 999px;
    color: var(--primary);
    background: rgba(0,230,118,0.08);
    border: 1px solid rgba(0,230,118,0.22);
    font-size: 0.72rem;
    font-weight: 900;
}
.price-card strong { font-size: 1.35rem; }
.price-card p { margin: 0; color: var(--text-muted); font-size: 0.84rem; line-height: 1.5; }
.price-card ul {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    margin: 0;
    padding-left: 1rem;
    color: var(--text-main);
    font-size: 0.84rem;
    line-height: 1.45;
}
.price-card .btn { width: 100%; justify-content: center; margin-top: auto; text-decoration: none; }
.upgrade-body {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    padding: 1rem;
}
.upgrade-usage {
    padding: 0.85rem;
    border: 1px solid rgba(0,230,118,0.24);
    border-radius: 8px;
    color: #d8ffe8;
    background: rgba(0,230,118,0.07);
    font-size: 0.88rem;
    font-weight: 800;
}
.upgrade-points {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.55rem;
}
.upgrade-points span {
    padding: 0.65rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-muted);
    background: rgba(255,255,255,0.025);
    font-size: 0.78rem;
    font-weight: 800;
    text-align: center;
}
.upgrade-actions { display: flex; justify-content: flex-end; gap: 0.55rem; flex-wrap: wrap; }
.upgrade-actions .btn { width: auto; }
.settings-panel { display: none; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 1rem; }
.settings-panel.active { display: block; }
.settings-panel .selector-box { padding: 0; border: 0; background: transparent; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.settings-note { color: var(--text-muted); font-size: 0.82rem; line-height: 1.6; margin: 0.9rem 0 0; }
.api-settings { display: none; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 0.75rem 1rem; }
.api-settings.active { display: block; }
.api-settings-title { margin: 0 0 0.8rem; font-size: 0.8rem; color: var(--text-main); font-weight: 800; }
.api-summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.api-summary-text { color: var(--text-muted); font-size: 0.82rem; line-height: 1.5; }
.api-summary-text strong { color: var(--text-main); display: block; margin-bottom: 0.15rem; }
.api-detail { display: none; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.api-settings.detail-open .api-detail { display: block; }
.api-help { display: flex; flex-wrap: wrap; gap: 0.65rem; margin-top: 0.8rem; }
.api-help a { color: var(--primary); font-size: 0.78rem; text-decoration: none; border-bottom: 1px solid rgba(0,230,118,0.35); }
.api-help a:hover { border-bottom-color: var(--primary); }
.checkbox-row { flex-direction: row; align-items: center; gap: 8px; min-height: 42px; }
.checkbox-row input { width: auto; accent-color: var(--primary); }
.api-key-item { display: none; }
.api-settings.use-personal-key .api-key-item { display: flex; }
.provider-extra-item { display: none; }
.api-settings.needs-provider-extra .provider-extra-item { display: flex; }
.diarization-item { display: none; }
.api-settings.supports-diarization .diarization-item { display: flex; }
select, input[type="range"], input[type="color"], .custom-input { 
    background: var(--surface-light); 
    color: var(--text-main); 
    border: 1px solid var(--border); 
    padding: 10px; 
    border-radius: 10px; 
    font-size: 0.85rem; 
    outline: none;
    width: 100%;
    cursor: pointer;
}

.content-grid { display: grid; grid-template-columns: 2fr 1.2fr; gap: 1.5rem; flex: 1; min-height: 550px; }
@media (max-width: 900px) { .content-grid { grid-template-columns: 1fr; } }

.card { background: var(--surface); border-radius: 20px; border: 1px solid var(--border); display: flex; flex-direction: column; overflow: hidden; }
.card-header { padding: 1.2rem; background: rgba(255,255,255,0.02); border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
.card-header h3 { margin: 0; font-size: 0.9rem; font-weight: 700; display: flex; align-items: center; gap: 8px; }

.scroll-area { 
    flex: 1; 
    padding: 1.5rem; 
    overflow-y: auto; 
    height: 55vh; 
    line-height: 1.6; 
    word-break: keep-all;
    background: radial-gradient(circle at top right, rgba(0,230,118,0.02), transparent);
}

#youtube-text { font-size: var(--caption-size); color: var(--caption-color); opacity: var(--caption-opacity); font-weight: 700; transition: all 0.2s; line-height: 1.75; white-space: pre-wrap; }
#youtube-text:not(:empty) { background: var(--caption-bg); padding: 0.18em 0.28em; border-radius: 6px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.interim { color: var(--text-muted); font-style: italic; }

.chat-container { display: flex; flex-direction: column; height: 100%; }
.ai-settings { display: none; border-bottom: 1px solid var(--border); padding: 0.85rem 1rem; background: rgba(255,255,255,0.018); }
.ai-settings.active { display: block; }
.ai-settings-title { margin: 0 0 0.7rem; font-size: 0.78rem; color: var(--text-main); font-weight: 800; }
.ai-settings .selector-box { padding: 0; border: 0; background: transparent; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.ai-settings .settings-note { margin-top: 0.7rem; }
.ai-key-item { display: none; }
.ai-settings.use-personal-key .ai-key-item { display: flex; }
#youtube-ai { flex: 1; font-size: 0.95rem; color: #D1D1D6; line-height: 1.7; padding-bottom: 10px; white-space: pre-wrap; }
.chat-input-box { display: flex; gap: 8px; padding: 12px; background: var(--surface-light); border-top: 1px solid var(--border); }
.chat-input-box input { flex: 1; background: var(--bg-dark); border: 1px solid var(--border); color: white; padding: 8px 12px; border-radius: 8px; font-size: 0.85rem; outline: none; }
.chat-input-box input:focus { border-color: var(--primary); }
.btn-send { background: var(--primary); color: #000; padding: 6px 12px; border-radius: 6px; border: none; font-weight: bold; cursor: pointer; font-size: 0.75rem; }

.controls { display: flex; gap: 1rem; justify-content: center; padding: 1rem 0; flex-wrap: wrap; }
.btn { padding: 0.85rem 1.8rem; border-radius: 14px; border: none; font-weight: 700; font-size: 0.95rem; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; gap: 8px; }
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }

.btn-start { background: var(--primary); color: #000; }
.btn-stop { background: var(--surface-light); color: var(--danger); border: 1px solid rgba(255,82,82,0.1); }
.btn-download { background: var(--surface-light); color: var(--text-main); border: 1px solid var(--border); }
.btn-pip { background: var(--surface-light); color: var(--text-main); font-size: 0.7rem; padding: 6px 12px; border: 1px solid var(--border); }
.minutes-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; padding: 0 12px 12px; background: var(--surface-light); }
.minutes-actions .btn { width: auto; font-size: 0.72rem; padding: 7px 12px; border-radius: 10px; }
.mini-select { width: auto; min-width: 130px; padding: 7px 10px; font-size: 0.72rem; border-radius: 10px; }

#debug-log { display: none; background: #000; color: #4CAF50; font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; padding: 12px; height: 120px; overflow-y: auto; border: 1px solid var(--border); border-radius: 12px; opacity: 0.7; }
body.debug #debug-log { display: block; }

.ad-slot {
    display: none;
    border: 1px dashed rgba(255,255,255,0.16);
    border-radius: 8px;
    background: rgba(255,255,255,0.025);
    color: var(--text-muted);
    font-size: 0.72rem;
    text-align: center;
    min-height: 92px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.ad-slot.is-ready { display: flex; }
body.premium-plan .ad-slot { display: none !important; }
.ad-slot::before { content: "광고"; opacity: 0.7; }
.ad-slot .adsbygoogle { width: 100%; min-height: 90px; }
.ad-ai { margin: 0 12px 12px; min-height: 120px; }
.ad-controls { max-width: 728px; width: 100%; margin: -0.5rem auto 0.5rem; }
.mobile-bottom-ad {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 200;
    min-height: 64px;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    background: rgba(10,10,11,0.96);
    backdrop-filter: blur(16px);
}

#pip-canvas { display: none; }
#pip-video { display: none; }

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 10px; }

footer {
    padding: 3rem 5% 2rem;
    background: var(--bg-dark);
    border-top: 1px solid var(--border);
    text-align: center;
    margin-top: 4rem;
}
.footer-links { display: flex; justify-content: center; gap: 20px; margin-bottom: 1.5rem; }
.footer-links a { color: var(--text-muted); text-decoration: none; font-size: 0.85rem; transition: color 0.2s; }
.footer-links a:hover { color: var(--primary); }
.footer-info { color: #555; font-size: 0.75rem; }
.email-link { color: inherit; text-decoration: none; font-weight: 800; }
.email-link:hover { color: var(--primary); }

.info-section { padding: 4rem 5%; background: var(--surface); margin-top: 2rem; border-top: 1px solid var(--border); }
.info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 3rem; max-width: 1200px; margin: 0 auto; }
.info-card h2 { color: var(--primary); font-size: 1.5rem; margin-bottom: 1.5rem; }
.info-card p { color: var(--text-muted); line-height: 1.8; margin-bottom: 1rem; }
.step-list { list-style: none; padding: 0; }
.step-item { display: flex; gap: 15px; margin-bottom: 20px; }
.step-num { background: var(--primary); color: #000; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; flex-shrink: 0; }

.faq-section { padding: 4rem 5%; max-width: 1000px; margin: 0 auto; }
.faq-item { margin-bottom: 2rem; background: var(--glass); padding: 1.5rem; border-radius: 12px; border: 1px solid var(--border); }
.faq-item h4 { color: #fff; margin-bottom: 0.8rem; font-size: 1.1rem; }
.faq-item p { color: var(--text-muted); font-size: 0.9rem; line-height: 1.6; }

.history-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: start;
    padding: 1rem 0;
    border-bottom: 1px solid var(--border);
}
.history-item:last-child { border-bottom: 0; }
.history-meta strong { display: block; color: var(--text-main); margin-bottom: 0.35rem; }
.history-meta span { color: var(--text-muted); font-size: 0.78rem; }
.history-meta p { color: var(--text-muted); margin: 0.55rem 0 0; line-height: 1.6; word-break: keep-all; overflow-wrap: anywhere; }
.history-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: flex-end; }
.share-tools {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1rem;
}
.share-link-box { display: flex; gap: 0.5rem; align-items: center; min-width: 0; }
.share-link-box input { min-width: 0; }
.qr-box { display: none; width: 132px; height: 132px; background: #fff; border-radius: 8px; padding: 8px; }
.qr-box.active { display: block; }
.qr-box img { width: 100%; height: 100%; display: block; }
body.stage-mode header,
body.stage-mode nav,
body.stage-mode .privacy-note,
body.stage-mode #shared-container > .selector-box,
body.stage-mode .share-tools,
body.stage-mode #shared-container > .controls,
body.stage-mode footer,
body.stage-mode .mobile-bottom-ad { display: none !important; }
body.stage-mode { background: #000; }
body.stage-mode #shared-container { display: flex; max-width: none; padding: 0; min-height: 100vh; gap: 0; }
body.stage-mode #shared-container .card { border: 0; border-radius: 0; min-height: 100vh; background: #000; }
body.stage-mode #shared-container .card-header { background: #000; border-color: rgba(255,255,255,0.08); }
body.stage-mode #shared-scroll { height: calc(100vh - 74px) !important; display: flex; align-items: center; justify-content: center; }
body.stage-mode #shared-text { font-size: clamp(2.8rem, 7vw, 7rem) !important; max-width: 90vw; }

.origin-badge {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: 8px;
    color: var(--primary);
    background: rgba(0,230,118,0.08);
    border: 1px solid rgba(0,230,118,0.24);
    border-radius: 999px;
    padding: 7px 12px;
    font-size: 0.78rem;
    font-weight: 800;
    margin-bottom: 1rem;
}
.trust-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    max-width: 1200px;
    margin: 0 auto 3rem;
}
.trust-item, .use-case-card {
    background: var(--glass);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1.1rem;
}
.trust-item strong, .use-case-card strong { display: block; color: var(--text-main); margin-bottom: 0.45rem; }
.trust-item p, .use-case-card p { color: var(--text-muted); margin: 0; line-height: 1.65; font-size: 0.9rem; }
.use-case-section { padding: 4rem 5%; max-width: 1200px; margin: 0 auto; }
.use-case-section h2 { color: var(--primary); font-size: 1.6rem; margin: 0 0 1.5rem; }
.use-case-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.feedback-box {
    max-width: 1000px;
    margin: 0 auto 4rem;
    padding: 1.5rem;
    border: 1px solid rgba(0,230,118,0.22);
    border-radius: 8px;
    background: rgba(0,230,118,0.055);
}
.feedback-box h2 { margin: 0 0 0.75rem; color: var(--primary); font-size: 1.25rem; }
.feedback-box p { margin: 0; color: var(--text-muted); line-height: 1.7; }
body.caption-focus header, body.caption-focus nav, body.caption-focus .intro-panel, body.caption-focus .selector-box, body.caption-focus .api-settings, body.caption-focus .ad-controls, body.caption-focus .info-section, body.caption-focus .use-case-section, body.caption-focus .faq-section, body.caption-focus footer { display: none; }
body.caption-focus .container { max-width: none; padding: 1rem; }
body.caption-focus .content-grid { grid-template-columns: 1fr; min-height: calc(100vh - 120px); }
body.caption-focus .content-grid > .card:nth-child(2) { display: none; }
body.caption-focus .scroll-area { height: calc(100vh - 190px); }
body.caption-focus #youtube-text { font-size: clamp(2rem, 6vw, 5rem); line-height: 1.45; }

.intro-panel {
    display: block;
    padding: 1.1rem 0 0.2rem;
}
.intro-panel h2 { margin: 0 0 0.55rem; font-size: clamp(1.7rem, 3vw, 2.6rem); line-height: 1.12; letter-spacing: 0; word-break: keep-all; overflow-wrap: anywhere; }
.intro-panel p { margin: 0; color: var(--text-muted); line-height: 1.6; max-width: 520px; }
.privacy-note { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 1rem; color: var(--text-muted); font-size: 0.84rem; line-height: 1.6; }
.privacy-note strong { display: block; color: var(--text-main); margin-bottom: 0.35rem; }
@media (max-width: 900px) { .intro-panel { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
    .topbar { padding: 0.8rem 6%; align-items: flex-start; gap: 0.75rem; }
    .topbar-inner { width: 100%; flex-direction: column; align-items: flex-start; gap: 0.75rem; }
    .brand { width: 100%; justify-content: flex-start; gap: 10px; }
    .brand-copy h1 { font-size: 1rem; }
    .brand-copy span { font-size: 0.64rem; }
    .topbar-actions { width: 100%; justify-content: flex-start; display: grid; grid-template-columns: 1fr auto; }
    .status-badge { max-width: 100%; overflow: hidden; white-space: nowrap; padding: 6px 9px; }
    .status-badge span { overflow: hidden; text-overflow: ellipsis; }
    .volume-meter { grid-column: 1 / -1; width: 100%; justify-content: space-between; padding: 6px 10px; }
    .v-bar { flex: 1; min-width: 80px; }
    .account-btn { width: auto; padding: 7px 12px; }
    .app-nav { padding: 0.65rem 6%; gap: 0.45rem; overflow-x: auto; }
    .nav-item { white-space: nowrap; font-size: 0.82rem; padding: 0.55rem 0.8rem; }
    .container { padding: 1.25rem 6%; gap: 1.25rem; }
    .intro-panel { padding-top: 0.8rem; }
    .intro-panel h2 { font-size: 2rem; line-height: 1.15; }
    .intro-panel p, .privacy-note, .info-card p, .faq-item p { word-break: normal; overflow-wrap: anywhere; }
    .selector-box { grid-template-columns: 1fr; padding: 1rem; }
    .selector-inline { grid-template-columns: 1fr; }
    .premium-card { grid-template-columns: 1fr; align-items: stretch; }
    .premium-actions { display: grid; grid-template-columns: 1fr 1fr; }
    .premium-actions .btn,
    .premium-actions .btn-start,
    .premium-actions .btn-pip { width: 100%; min-width: 0; }
    .pricing-grid,
    .lecture-flow,
    .sample-output,
    .upgrade-points {
        grid-template-columns: 1fr;
    }
    .lesson-title-item { grid-column: auto; }
    .upgrade-actions {
        display: grid;
        grid-template-columns: 1fr;
    }
    .upgrade-actions .btn {
        width: 100%;
    }
    .api-summary { align-items: flex-start; flex-direction: column; }
    .share-tools { grid-template-columns: 1fr; }
    .qr-box { width: 118px; height: 118px; }
    .selector-item, select, input, .custom-input, .privacy-note, .intro-panel > div { min-width: 0; max-width: 100%; }
    .content-grid { min-height: 0; }
    .card { border-radius: 12px; }
    .card-header { padding: 1rem; gap: 0.8rem; align-items: stretch; flex-direction: column; }
    .card-header > div { width: 100%; flex-wrap: wrap; }
    .card-header > .btn { width: 100%; justify-content: center; }
    .card-header h3 { min-width: 0; }
    .scroll-area { height: 42vh; padding: 1.2rem; word-break: normal; overflow-wrap: anywhere; }
    .chat-input-box { flex-wrap: wrap; }
    .chat-input-box input { min-width: 0; }
    .history-item { grid-template-columns: 1fr; }
    .history-actions { justify-content: flex-start; }
    .history-actions .btn { width: auto; }
    .controls { display: grid; grid-template-columns: 1fr; gap: 0.7rem; }
    .btn { width: 100%; justify-content: center; }
    .footer-links { flex-wrap: wrap; }
    body { padding-bottom: 74px; }
    .mobile-bottom-ad.is-ready { display: flex; }
}

/* Global UI refresh */
:root {
    --bg-dark: #07111f;
    --surface: #111b2a;
    --surface-light: #182434;
    --glass: rgba(255, 255, 255, 0.045);
    --border: rgba(177, 202, 232, 0.14);
    --text-muted: #93a3b8;
}

body {
    background:
        radial-gradient(circle at 50% -12%, rgba(0, 230, 118, 0.08), transparent 34rem),
        linear-gradient(180deg, #07111f 0%, #08101b 52%, #070b12 100%);
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.014) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,0.55), transparent 58%);
}

.topbar {
    padding: 0.85rem 5%;
    background: rgba(6, 16, 29, 0.94);
}

.topbar-inner {
    width: min(100%, 1120px);
    display: grid;
    grid-template-columns: auto auto auto;
    justify-content: center;
    align-items: center;
    gap: clamp(1rem, 3vw, 2.25rem);
}

.brand {
    gap: 0.65rem;
}

.brand h1,
.brand-copy h1 {
    font-size: 1.05rem;
    line-height: 1;
}

.brand-mark {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    box-shadow: none;
}

.brand-copy span {
    font-size: 0.66rem;
    color: #8b9bad;
}

.topbar .app-nav {
    flex: 0 0 auto;
    gap: 0.2rem;
    padding: 0.25rem;
    border: 1px solid rgba(177, 202, 232, 0.1);
    border-radius: 10px;
    background: rgba(255,255,255,0.035);
}

.topbar .nav-item {
    padding: 0.52rem 0.72rem;
    border-radius: 7px;
    color: #dbe7f5;
    font-size: 0.82rem;
    font-weight: 850;
}

.topbar .nav-item.active {
    color: var(--primary);
    background: rgba(0,230,118,0.1);
}

.topbar-actions {
    justify-content: flex-start;
    gap: 0.45rem;
}

.plan-badge,
.premium-nav-btn,
.account-btn {
    min-height: 34px;
    border-radius: 8px;
}

.premium-nav-btn {
    padding-inline: 0.85rem;
}

.account-btn {
    padding-inline: 0.95rem;
    background: #1c2635;
}

.top-language-select {
    min-height: 34px;
    min-width: 100px;
    border-radius: 8px;
    background: #1c2635;
    border-color: rgba(255,255,255,0.14);
}

.container {
    max-width: 1120px;
    padding-top: 2.15rem;
    gap: 1.25rem;
}

.intro-panel {
    padding: 0.8rem 0 0.1rem;
}

.intro-panel h2 {
    max-width: 760px;
    font-size: clamp(2rem, 4vw, 3.15rem);
    letter-spacing: 0;
}

.intro-panel p {
    max-width: 680px;
    font-size: 1rem;
    color: #a8b7ca;
}

.origin-badge {
    margin-bottom: 0.9rem;
    padding: 0.45rem 0.78rem;
    border-radius: 8px;
    background: rgba(0,230,118,0.09);
}

.selector-box,
.premium-card,
.api-settings,
.settings-panel,
.card,
.share-tools,
.privacy-note,
.auth-dialog {
    border-color: rgba(177, 202, 232, 0.14);
    box-shadow: 0 16px 38px rgba(0, 0, 0, 0.16);
}

.selector-box {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.85rem;
    padding: 1rem;
    border-radius: 12px;
    background: rgba(17, 27, 42, 0.9);
}

.selector-item label {
    color: #9eb0c5;
    letter-spacing: 0;
}

select,
input[type="range"],
input[type="color"],
.custom-input,
.chat-input-box input {
    min-height: 40px;
    border-radius: 8px;
    background: #1a2636;
    border-color: rgba(177, 202, 232, 0.16);
}

.premium-card {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 0.9rem 1rem;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(124,77,255,0.12), rgba(0,230,118,0.045));
}

.premium-actions {
    gap: 0.5rem;
}

.premium-actions .btn {
    min-height: 40px;
    border-radius: 8px;
    padding: 0 0.85rem;
}

.premium-actions .btn-start {
    min-width: 190px;
}

.premium-actions .btn-pip {
    min-width: 54px;
}

.content-grid {
    grid-template-columns: minmax(0, 1.35fr) minmax(340px, 0.9fr);
    gap: 1.25rem;
    min-height: 520px;
}

.card {
    border-radius: 12px;
    background: rgba(17, 27, 42, 0.92);
}

.card-header {
    min-height: 68px;
    padding: 1rem 1.1rem;
    background: rgba(255,255,255,0.026);
}

.card-header h3 {
    font-size: 0.95rem;
    font-weight: 850;
}

.scroll-area {
    background:
        radial-gradient(circle at top right, rgba(0,230,118,0.035), transparent 22rem),
        rgba(7, 13, 23, 0.28);
}

.controls {
    justify-content: flex-start;
    gap: 0.65rem;
    padding: 0.25rem 0 0.5rem;
}

.btn {
    min-height: 40px;
    border-radius: 8px;
    padding: 0.72rem 1rem;
    font-size: 0.86rem;
    font-weight: 850;
}

.btn-pip {
    padding: 0.52rem 0.78rem;
}

.btn-start {
    box-shadow: 0 12px 28px rgba(0, 230, 118, 0.14);
}

.chat-input-box,
.minutes-actions {
    background: rgba(24, 36, 52, 0.96);
}

.minutes-actions {
    align-items: center;
}

.auth-dialog {
    background: #111b2a;
}

@media (max-width: 1000px) {
    .topbar-inner {
        width: 100%;
        grid-template-columns: auto 1fr auto;
        gap: 0.85rem;
    }

    .topbar .app-nav {
        justify-self: center;
    }

    .selector-box {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .topbar {
        padding: 0.75rem 5%;
    }

    .topbar-inner {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 0.65rem;
        align-items: center;
    }

    .brand {
        width: auto;
    }

    .topbar .app-nav {
        grid-column: 1 / -1;
        width: 100%;
        justify-content: flex-start;
        overflow-x: auto;
    }

    .topbar-actions {
        width: auto;
        display: flex;
        justify-content: flex-end;
    }

    .top-language-select {
        min-width: 92px;
        max-width: 112px;
        padding-left: 8px;
        padding-right: 24px;
        font-size: 0.74rem;
    }

    .plan-badge,
    .premium-nav-btn {
        display: none;
    }

    .container {
        padding-top: 1.15rem;
        padding-left: 1.4rem;
        padding-right: 1.4rem;
    }

    .intro-panel h2 {
        font-size: 2.2rem;
    }

    .intro-panel p {
        max-width: 100%;
        font-size: 0.94rem;
        overflow-wrap: anywhere;
    }

    .selector-box,
    .content-grid {
        grid-template-columns: 1fr;
    }

    .selector-inline {
        grid-template-columns: 1fr;
    }

    .selector-item,
    select,
    input,
    .custom-input,
    .btn {
        min-width: 0;
        max-width: 100%;
    }

    .premium-card {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .premium-card > div {
        min-width: 0;
    }

    .premium-card strong,
    .premium-card p {
        word-break: keep-all;
        overflow-wrap: anywhere;
    }

    .premium-actions {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .premium-actions .btn {
        width: 100%;
        min-width: 0;
        padding-left: 0.55rem;
        padding-right: 0.55rem;
        font-size: 0.82rem;
    }

    .pricing-grid,
    .lecture-flow,
    .sample-output,
    .upgrade-points,
    .upgrade-actions {
        grid-template-columns: 1fr;
    }
    .lesson-title-item { grid-column: auto; }

    .upgrade-actions {
        display: grid;
    }

    .upgrade-actions .btn {
        width: 100%;
    }
}