:root {
    --accent: #ff3b30;
    --accent-hover: #e93027;
    --bg: #f7f7f8;
    --surface: #ffffff;
    --surface-soft: #f0f0f2;
    --text: #121214;
    --muted: #6f7078;
    --border: #e6e6e9;
    --shadow: 0 22px 70px rgba(20, 20, 30, .09);
    --player: #08080a;
}

[data-theme="dark"] {
    --bg: #101012;
    --surface: #19191c;
    --surface-soft: #222226;
    --text: #f5f5f6;
    --muted: #9b9ba3;
    --border: #2d2d32;
    --shadow: 0 24px 80px rgba(0, 0, 0, .32);
}

* { box-sizing: border-box; }
html { color-scheme: light; }
[data-theme="dark"] { color-scheme: dark; }
body { margin: 0; min-height: 100vh; overflow-x: hidden; background: var(--bg); color: var(--text); font: 15px/1.5 'DM Sans', sans-serif; transition: background .25s ease, color .25s ease; }
button, input { font: inherit; }
button { color: inherit; }
svg { display: block; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.app-header { position: sticky; z-index: 20; top: 0; height: 72px; padding: 0 clamp(18px, 4vw, 54px); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; background: color-mix(in srgb, var(--bg) 88%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent); backdrop-filter: blur(18px); }
.brand { justify-self: start; display: inline-flex; align-items: center; gap: 10px; color: var(--text); font: 800 20px 'Manrope', sans-serif; letter-spacing: -.05em; text-decoration: none; }
.brand > span:last-child span { color: var(--accent); }
.brand-mark { width: 34px; height: 25px; display: grid; place-items: center; border-radius: 8px; background: var(--accent); box-shadow: 0 7px 16px rgba(255, 59, 48, .24); }
.brand-mark svg { width: 18px; fill: white; }
.header-note { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .02em; }
.header-note span, .refresh-state i { width: 6px; height: 6px; border-radius: 50%; background: #36b37e; box-shadow: 0 0 0 4px rgba(54, 179, 126, .11); }
.round-button { justify-self: end; width: 40px; height: 40px; padding: 0; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 50%; background: var(--surface); cursor: pointer; transition: transform .2s ease, border-color .2s ease; }
.round-button:hover { transform: rotate(12deg); border-color: var(--muted); }
.round-button svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

.page-shell { width: min(1480px, calc(100% - clamp(24px, 5vw, 80px))); margin: 0 auto 80px; }
.download-panel { position: relative; min-height: 240px; margin: 32px 0 46px; padding: clamp(28px, 4.5vw, 58px); overflow: hidden; display: grid; grid-template-columns: minmax(260px, .85fr) minmax(380px, 1.15fr); align-items: center; gap: clamp(30px, 7vw, 100px); border-radius: 28px; background: #111114; color: white; box-shadow: 0 24px 70px rgba(17, 17, 20, .18); }
.download-panel::before { content: ''; position: absolute; width: 420px; height: 420px; left: -190px; bottom: -330px; border: 70px solid rgba(255, 59, 48, .65); border-radius: 50%; filter: blur(1px); }
.download-panel::after { content: ''; position: absolute; width: 280px; height: 280px; right: 13%; top: -245px; border: 60px solid rgba(255,255,255,.04); border-radius: 50%; }
.download-copy, .download-panel form { position: relative; z-index: 1; }
.eyebrow { color: var(--accent); font: 700 10px 'Manrope', sans-serif; letter-spacing: .15em; text-transform: uppercase; }
.download-copy h1 { max-width: 530px; margin: 8px 0 10px; font: 800 clamp(1.75rem, 3vw, 2.85rem)/1.08 'Manrope', sans-serif; letter-spacing: -.055em; }
.download-copy p { margin: 0; color: rgba(255,255,255,.52); }
.download-panel form { margin: 0; }
.input-shell { min-height: 62px; padding: 7px 7px 7px 18px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 11px; border: 1px solid rgba(255,255,255,.11); border-radius: 16px; background: rgba(255,255,255,.08); box-shadow: inset 0 1px 0 rgba(255,255,255,.04); transition: border-color .2s, background .2s, box-shadow .2s; }
.input-shell:focus-within { border-color: rgba(255,59,48,.65); background: rgba(255,255,255,.11); box-shadow: 0 0 0 4px rgba(255,59,48,.1); }
.input-shell > svg { width: 20px; fill: none; stroke: rgba(255,255,255,.45); stroke-width: 1.8; stroke-linecap: round; }
.input-shell input { min-width: 0; width: 100%; padding: 0; border: 0; outline: 0; background: transparent; color: white; }
.input-shell input::placeholder { color: rgba(255,255,255,.34); }
.input-shell button { height: 46px; padding: 0 17px 0 19px; display: flex; align-items: center; gap: 7px; border: 0; border-radius: 11px; background: var(--accent); color: white; font-weight: 700; cursor: pointer; transition: background .2s, transform .2s; }
.input-shell button:hover { background: var(--accent-hover); transform: translateY(-1px); }
.input-shell button:disabled { opacity: .55; cursor: wait; transform: none; }
.input-shell button svg { width: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.form-foot { min-height: 24px; margin-top: 9px; display: flex; justify-content: space-between; gap: 12px; color: rgba(255,255,255,.38); font-size: 11px; }
.message { text-align: right; }
.message.success { color: #67d8a8; }
.message.error-message { color: #ff8e87; }

.content-stage { display: grid; grid-template-columns: minmax(0, 0fr) minmax(0, 1fr); gap: 0; align-items: start; transition: grid-template-columns .7s cubic-bezier(.22, 1, .36, 1), gap .7s cubic-bezier(.22, 1, .36, 1); }
.content-stage.is-watching { grid-template-columns: minmax(0, 1.72fr) minmax(310px, .78fr); gap: clamp(24px, 3vw, 46px); }
.watch-panel { min-width: 0; overflow: hidden; opacity: 0; transform: translateX(-38px) scale(.98); pointer-events: none; transition: opacity .28s ease, transform .7s cubic-bezier(.22, 1, .36, 1); }
.content-stage.is-watching .watch-panel { opacity: 1; transform: translateX(0) scale(1); pointer-events: auto; }
.watch-inner { min-width: min(870px, calc(100vw - 48px)); }
.watch-topbar { height: 40px; display: flex; align-items: flex-start; justify-content: space-between; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.close-player { width: 32px; height: 32px; margin-top: -6px; padding: 0; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 50%; background: var(--surface); cursor: pointer; transition: transform .2s, background .2s; }
.close-player:hover { transform: rotate(90deg); background: var(--surface-soft); }
.close-player svg { width: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.player-frame { position: relative; aspect-ratio: 16/9; overflow: hidden; border-radius: 18px; background: var(--player); box-shadow: var(--shadow); isolation: isolate; }
.player-frame video { width: 100%; height: 100%; display: block; object-fit: contain; cursor: pointer; }
.player-frame::after { content: ''; position: absolute; z-index: 1; inset: auto 0 0; height: 35%; pointer-events: none; background: linear-gradient(transparent, rgba(0,0,0,.82)); opacity: 1; transition: opacity .25s; }
.center-play { position: absolute; z-index: 3; inset: 50% auto auto 50%; width: 66px; height: 66px; padding: 0; display: grid; place-items: center; transform: translate(-50%, -50%); border: 1px solid rgba(255,255,255,.26); border-radius: 50%; background: rgba(10,10,12,.58); color: white; backdrop-filter: blur(10px); cursor: pointer; opacity: 1; transition: opacity .2s, transform .25s, background .2s; }
.center-play:hover { transform: translate(-50%, -50%) scale(1.07); background: var(--accent); }
.center-play svg { width: 31px; fill: currentColor; }
.player-frame.is-playing .center-play { opacity: 0; pointer-events: none; }
.player-loader { position: absolute; z-index: 4; inset: 50% auto auto 50%; width: 42px; height: 42px; margin: -21px; border: 3px solid rgba(255,255,255,.22); border-top-color: var(--accent); border-radius: 50%; opacity: 0; pointer-events: none; }
.player-frame.is-loading .player-loader { opacity: 1; animation: spin .75s linear infinite; }
.player-controls { position: absolute; z-index: 5; left: 18px; right: 18px; bottom: 10px; color: white; opacity: 1; transform: translateY(0); transition: opacity .25s, transform .25s; }
.player-frame.controls-hidden::after, .player-frame.controls-hidden .player-controls { opacity: 0; }
.player-frame.controls-hidden .player-controls { transform: translateY(8px); pointer-events: none; }
.seek-bar, .volume-bar { --value: 0%; height: 4px; margin: 0; padding: 0; display: block; appearance: none; border-radius: 99px; outline: none; background: linear-gradient(to right, var(--accent) 0 var(--value), rgba(255,255,255,.3) var(--value) 100%); cursor: pointer; }
.seek-bar { width: 100%; }
.seek-bar::-webkit-slider-thumb, .volume-bar::-webkit-slider-thumb { width: 13px; height: 13px; appearance: none; border: 0; border-radius: 50%; background: var(--accent); opacity: 0; transition: opacity .15s, transform .15s; }
.seek-bar:hover::-webkit-slider-thumb, .volume-bar:hover::-webkit-slider-thumb { opacity: 1; }
.seek-bar::-moz-range-thumb, .volume-bar::-moz-range-thumb { width: 13px; height: 13px; border: 0; border-radius: 50%; background: var(--accent); }
.control-row { height: 45px; display: flex; align-items: center; gap: 4px; }
.control-button, .speed-button { height: 36px; border: 0; background: transparent; color: white; cursor: pointer; }
.control-button { width: 36px; padding: 8px; }
.control-button svg { width: 20px; height: 20px; fill: currentColor; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.control-button svg path[fill="none"], .pip-button svg path:first-child { fill: none; }
.pause-shape { display: none; }
.player-frame.is-playing .play-shape { display: none; }
.player-frame.is-playing .pause-shape { display: block; }
.volume-shape { fill: currentColor; }
.volume-shape .sound-waves { fill: none; }
.player-frame.is-muted .sound-waves { display: none; }
.volume-control { display: flex; align-items: center; }
.volume-bar { width: 0; opacity: 0; transition: width .25s, opacity .2s; }
.volume-control:hover .volume-bar, .volume-bar:focus { width: 72px; opacity: 1; }
.time-display { margin-left: 5px; font-size: 11px; font-variant-numeric: tabular-nums; color: rgba(255,255,255,.82); white-space: nowrap; }
.control-spacer { flex: 1; }
.speed-button { padding: 0 8px; font-size: 12px; font-weight: 700; }
.now-playing { padding: 20px 2px 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.now-playing h2 { max-width: 760px; margin: 0; font: 700 clamp(1.1rem, 1.7vw, 1.45rem)/1.3 'Manrope', sans-serif; letter-spacing: -.025em; }
.now-playing p { margin: 5px 0 0; color: var(--muted); font-size: 13px; }
.player-meta { flex: 0 0 auto; margin-top: 4px; padding: 7px 10px; border-radius: 7px; background: var(--surface-soft); color: var(--muted); font-size: 11px; }

.library { min-width: 0; }
.library-heading { min-height: 40px; margin-bottom: 20px; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.library-heading h2 { margin: 4px 0 0; font: 800 clamp(1.5rem, 2.4vw, 2.15rem) 'Manrope', sans-serif; letter-spacing: -.045em; }
.library-heading h2 span { display: inline-grid; place-items: center; min-width: 25px; height: 25px; margin-left: 5px; padding: 0 7px; vertical-align: 4px; border-radius: 99px; background: var(--surface-soft); color: var(--muted); font: 700 11px 'DM Sans', sans-serif; letter-spacing: 0; }
.refresh-state { display: flex; align-items: center; gap: 8px; padding-bottom: 7px; color: var(--muted); font-size: 11px; white-space: nowrap; }
.refresh-state.is-active i { background: var(--accent); box-shadow: 0 0 0 4px rgba(255,59,48,.12); animation: pulse 1.2s ease infinite; }
.refresh-state.is-offline i { background: #aaa; box-shadow: none; }
.video-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 20px; }
.video-card { position: relative; min-width: 0; border-radius: 14px; transition: background .22s, transform .22s; }
.video-card.is-selected { background: var(--surface); box-shadow: 0 0 0 1px var(--border), 0 12px 38px rgba(20,20,30,.08); }
.video-open { width: 100%; padding: 0; display: block; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.thumbnail { position: relative; aspect-ratio: 16/9; overflow: hidden; display: block; border-radius: 13px; background: #202024; }
.thumbnail img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .5s cubic-bezier(.22,1,.36,1), opacity .2s; }
.video-open:hover .thumbnail img { transform: scale(1.035); }
.thumbnail-fallback { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(circle at 78% 20%, rgba(255,59,48,.35), transparent 30%), linear-gradient(135deg, #2d2d35, #0e0e11); }
.thumbnail-fallback svg { width: 44px; padding: 11px; border-radius: 50%; fill: white; background: rgba(255,255,255,.12); backdrop-filter: blur(8px); }
.thumbnail img + .thumbnail-fallback { display: none; }
.thumbnail img.is-broken { display: none; }
.thumbnail img.is-broken + .thumbnail-fallback { display: grid; }
.duration-pill { position: absolute; right: 8px; bottom: 8px; padding: 3px 6px; border-radius: 5px; background: rgba(0,0,0,.82); color: white; font-size: 10px; font-weight: 700; letter-spacing: .02em; }
.hover-play { position: absolute; inset: 50% auto auto 50%; width: 46px; height: 46px; display: grid; place-items: center; transform: translate(-50%,-44%) scale(.85); border-radius: 50%; background: rgba(255,59,48,.92); color: white; opacity: 0; transition: opacity .22s, transform .3s cubic-bezier(.22,1,.36,1); box-shadow: 0 8px 24px rgba(0,0,0,.3); }
.hover-play svg { width: 23px; fill: currentColor; }
.video-open:hover .hover-play, .video-open:focus-visible .hover-play, .is-selected .hover-play { opacity: 1; transform: translate(-50%,-50%) scale(1); }
.card-copy { padding: 12px 40px 0 2px; }
.card-copy h3 { margin: 0; display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font: 700 14px/1.4 'Manrope', sans-serif; letter-spacing: -.015em; }
.card-copy p { margin: 5px 0 0; overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.card-stats { margin-top: 7px; display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 10px; }
.card-stats span + span::before { content: ''; display: inline-block; width: 3px; height: 3px; margin: 0 7px 2px 0; border-radius: 50%; background: currentColor; }
.delete-button { position: absolute; z-index: 3; right: 2px; bottom: 24px; width: 30px; height: 30px; padding: 7px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; opacity: 0; transition: opacity .2s, color .2s, background .2s; }
.video-card:hover .delete-button, .delete-button:focus-visible { opacity: 1; }
.delete-button:hover { color: var(--accent); background: rgba(255,59,48,.1); }
.delete-button svg { width: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.delete-button:disabled { opacity: .5; cursor: wait; }

.content-stage.is-watching .video-list { grid-template-columns: 1fr; gap: 10px; }
.content-stage.is-watching .library-heading h2 { font-size: 1.45rem; }
.content-stage.is-watching .refresh-state { display: none; }
.content-stage.is-watching .video-card { padding: 7px; }
.content-stage.is-watching .video-open { display: grid; grid-template-columns: minmax(120px, 42%) minmax(0, 1fr); align-items: start; gap: 12px; }
.content-stage.is-watching .thumbnail { border-radius: 9px; }
.content-stage.is-watching .card-copy { padding: 2px 26px 0 0; }
.content-stage.is-watching .card-copy h3 { font-size: 12px; }
.content-stage.is-watching .card-copy p { margin-top: 3px; font-size: 10px; }
.content-stage.is-watching .card-stats { margin-top: 5px; font-size: 9px; }
.content-stage.is-watching .hover-play { width: 34px; height: 34px; }
.content-stage.is-watching .hover-play svg { width: 18px; }
.content-stage.is-watching .delete-button { right: 8px; bottom: auto; top: 9px; }

.pending-card { min-height: 220px; overflow: hidden; border: 1px solid var(--border); background: var(--surface); }
.pending-card .status-visual { min-height: 150px; display: grid; place-items: center; background: linear-gradient(135deg, #24242a, #101012); color: white; }
.pending-card .card-copy { padding: 14px; }
.spinner { width: 34px; height: 34px; border: 3px solid rgba(255,255,255,.18); border-top-color: var(--accent); border-radius: 50%; animation: spin .75s linear infinite; }
.progress-display { width: min(200px, calc(100% - 36px)); text-align: center; }
.progress-display strong { display: block; font: 800 27px 'Manrope', sans-serif; }
.progress-display small { color: rgba(255,255,255,.5); font-size: 12px; }
.progress-track { height: 5px; margin-top: 12px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.14); }
.progress-track span { display: block; height: 100%; border-radius: inherit; background: var(--accent); transition: width .45s; }
.error-card .status-visual { color: #ff8e87; font: 800 30px 'Manrope', sans-serif; }
.empty { grid-column: 1/-1; min-height: 280px; padding: 60px 20px; display: grid; place-items: center; align-content: center; text-align: center; border: 1px dashed var(--border); border-radius: 18px; color: var(--muted); }
.empty-icon { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 50%; background: var(--surface-soft); color: var(--accent); }
.empty-icon svg { width: 25px; fill: currentColor; }
.empty h3 { margin: 14px 0 3px; color: var(--text); font: 700 15px 'Manrope', sans-serif; }
.empty p { margin: 0; font-size: 12px; }
footer { padding: 28px; border-top: 1px solid var(--border); color: var(--muted); text-align: center; font-size: 11px; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 50% { opacity: .42; } }

@media (max-width: 1080px) {
    .download-panel { grid-template-columns: 1fr; gap: 28px; }
    .video-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .content-stage.is-watching { grid-template-columns: minmax(0, 1.55fr) minmax(275px, .8fr); gap: 24px; }
    .watch-inner { min-width: min(650px, calc(100vw - 48px)); }
    .content-stage.is-watching .card-stats span:last-child { display: none; }
}

@media (max-width: 800px) {
    .app-header { grid-template-columns: 1fr auto; }
    .header-note { display: none; }
    .download-panel { min-height: 0; margin-top: 20px; padding: 30px 24px; border-radius: 22px; }
    .content-stage, .content-stage.is-watching { display: flex; flex-direction: column; gap: 0; }
    .watch-panel { width: 100%; max-height: 0; transform: translateY(-20px); transition: max-height .75s cubic-bezier(.22,1,.36,1), opacity .3s, transform .6s cubic-bezier(.22,1,.36,1), margin .6s; }
    .content-stage.is-watching .watch-panel { max-height: 900px; margin-bottom: 46px; transform: translateY(0); }
    .watch-inner { min-width: 0; width: 100%; }
    .library { width: 100%; }
    .content-stage.is-watching .video-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; }
    .content-stage.is-watching .video-card { padding: 0; }
    .content-stage.is-watching .video-open { display: block; }
    .content-stage.is-watching .card-copy { padding: 10px 36px 0 2px; }
    .content-stage.is-watching .card-copy h3 { font-size: 13px; }
    .content-stage.is-watching .delete-button { top: auto; right: 2px; bottom: 18px; }
    .content-stage.is-watching .refresh-state { display: flex; }
}

@media (max-width: 560px) {
    .page-shell { width: min(100% - 24px, 1480px); margin-bottom: 50px; }
    .app-header { height: 62px; padding: 0 14px; }
    .brand { font-size: 18px; }
    .brand-mark { width: 31px; height: 23px; }
    .round-button { width: 36px; height: 36px; }
    .download-panel { margin-bottom: 34px; padding: 26px 18px; }
    .download-copy h1 { font-size: 1.65rem; }
    .input-shell { grid-template-columns: auto 1fr; padding: 13px 14px; }
    .input-shell button { grid-column: 1/-1; height: 44px; justify-content: center; }
    .form-foot { display: block; }
    .message { margin-top: 5px; text-align: left; }
    .video-list, .content-stage.is-watching .video-list { grid-template-columns: 1fr; gap: 25px; }
    .library-heading { align-items: flex-start; }
    .refresh-state { padding-top: 8px; font-size: 0; }
    .player-frame { border-radius: 12px; }
    .player-controls { left: 10px; right: 10px; bottom: 5px; }
    .center-play { width: 54px; height: 54px; }
    .volume-control, .pip-button { display: none; }
    .control-row { height: 39px; }
    .now-playing { display: block; padding-top: 14px; }
    .player-meta { display: inline-block; margin-top: 10px; }
    .content-stage.is-watching .watch-panel { margin-bottom: 36px; }
    .delete-button { opacity: 1; }
}

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