@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
    --ink: #111318;
    --muted: #7e8490;
    --line: #e3e4e8;
    --paper: #f5f5f2;
    --acid: #d8f34f;
    --violet: #7367ff;
    --sidebar: #17181d;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; background: var(--paper); color: var(--ink); }
body { font-family: 'Manrope', 'Segoe UI', sans-serif; }
button, input { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .42; }

.app-shell { display: flex; min-height: 100vh; }
.sidebar { width: 238px; flex: 0 0 238px; background: var(--sidebar); color: #fff; position: relative; }
.main-column { flex: 1; min-width: 0; }
.nav-brand { height: 108px; display: flex; gap: 12px; align-items: center; padding: 0 29px; border-bottom: 1px solid #2b2c31; }
.nav-logo { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--acid); color: var(--acid); font: 500 17px 'DM Mono', monospace; transform: rotate(45deg); }
.nav-logo::first-letter { transform: rotate(-45deg); }
.nav-brand strong, .nav-brand small { display: block; }
.nav-brand strong { letter-spacing: .13em; font-size: 12px; }
.nav-brand small { color: #777a85; font: 10px 'DM Mono', monospace; letter-spacing: .08em; margin-top: 4px; }
.nav { padding-top: 29px; }
.nav-item { font-size: 12px; letter-spacing: .06em; }
.nav-link, .muted-link { color: #8c8e97; text-decoration: none; display: flex; gap: 14px; align-items: center; padding: 13px 24px; margin: 2px 12px; border-radius: 4px; transition: color .2s, background .2s; }
.nav-link.active { color: var(--acid); background: #272a25; }
.nav-link:hover, .muted-link:hover { color: #fff; }
.nav-symbol { width: 18px; color: inherit; font-size: 16px; text-align: center; }
.nav-caption { color: #555862; font: 10px 'DM Mono', monospace; letter-spacing: .14em; padding: 45px 36px 8px; }
.muted-link { cursor: default; }
.nav-footer { position: absolute; right: 25px; bottom: 28px; left: 25px; display: flex; align-items: center; gap: 7px; color: #686b74; font: 9px 'DM Mono', monospace; letter-spacing: .08em; }
.nav-footer b { margin-left: auto; color: #464952; font-weight: 400; }
.connection-dot, .status-light { width: 6px; height: 6px; display: inline-block; border-radius: 50%; background: #52555c; }
.connection-dot { background: var(--acid); box-shadow: 0 0 10px #c9e85b; }

.player-page { max-width: 1460px; min-height: 100vh; padding: 67px 6vw 35px; margin: auto; }
.hero { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; margin-bottom: 54px; }
.eyebrow { color: var(--violet); font: 500 10px 'DM Mono', monospace; letter-spacing: .16em; }
.eyebrow-dot { width: 6px; height: 6px; display: inline-block; margin-right: 8px; border-radius: 50%; background: var(--violet); vertical-align: 1px; }
h1 { margin: 21px 0 17px; font-size: clamp(40px, 4.3vw, 67px); line-height: .98; letter-spacing: -.065em; font-weight: 800; }
h1 em { color: var(--violet); font-style: normal; }
.hero-copy { max-width: 475px; color: var(--muted); font-size: 13px; line-height: 1.8; }
.hero-badge { display: flex; align-items: center; gap: 12px; padding-top: 13px; }
.badge-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: var(--acid); font: 500 14px 'DM Mono', monospace; }
.hero-badge strong, .hero-badge small { display: block; }
.hero-badge strong { font: 500 10px 'DM Mono', monospace; letter-spacing: .11em; }
.hero-badge small { color: #9598a0; font: 9px 'DM Mono', monospace; margin-top: 4px; }

.workspace { display: grid; grid-template-columns: minmax(500px, 1fr) 270px; gap: 44px; align-items: start; }
.player-card { min-width: 0; background: #202126; box-shadow: 0 24px 70px rgba(34, 34, 42, .12); }
.player-toolbar { height: 61px; display: flex; align-items: center; justify-content: space-between; padding: 0 23px; border-bottom: 1px solid #37383d; color: #f5f5f5; }
.brand-mark { font: 500 11px 'DM Mono', monospace; letter-spacing: .1em; }
.brand-mark > span:first-child { display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: var(--acid); vertical-align: 1px; }
.brand-muted { color: #696b73; margin-left: 5px; }
.toolbar-status { display: flex; align-items: center; gap: 8px; color: #777a83; font: 9px 'DM Mono', monospace; letter-spacing: .08em; }
.status-light.ready { background: var(--acid); box-shadow: 0 0 11px var(--acid); }
.player-surface { position: relative; overflow: hidden; aspect-ratio: 16 / 9; background: radial-gradient(circle at 50% 45%, #34353e 0, #202126 38%, #1a1b1f 100%); }
.player-surface.has-media { background: #101114; }
.video-canvas { display: block; width: 100%; height: 100%; object-fit: contain; }
.empty-state, .loading-state, .error-state { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.empty-state { color: #fff; }
.upload-orbit { position: relative; width: 78px; height: 78px; margin-bottom: 18px; }
.upload-glyph { position: absolute; inset: 0; display: grid; place-items: center; color: var(--acid); font-size: 28px; font-weight: 300; }
.orbit-ring { position: absolute; inset: 7px; border: 1px solid #555861; border-radius: 50%; }
.ring-one { transform: rotate(45deg) scaleX(.62); border-color: var(--violet); }
.ring-two { transform: rotate(-45deg) scaleX(.62); border-color: #6d717c; }
.empty-state h2 { margin: 0 0 8px; font-size: 17px; letter-spacing: -.02em; }
.empty-state p { margin: 0 0 22px; color: #898c96; font-size: 11px; }
.bilibili-entry { display: flex; width: min(290px, 82%); height: 34px; }
.bilibili-entry input { min-width: 0; flex: 1; border: 1px solid #484a53; border-right: 0; outline: 0; padding: 0 10px; background: #292a31; color: #fff; font: 10px 'DM Mono', monospace; }
.bilibili-entry input::placeholder { color: #777a84; }
.bilibili-entry input:focus { border-color: var(--violet); }
.bilibili-entry button { border: 0; padding: 0 12px; background: var(--violet); color: #fff; font-size: 10px; white-space: nowrap; }
.source-divider { display: flex; width: min(290px, 82%); align-items: center; gap: 10px; margin: 13px 0; color: #595c66; font: 9px 'DM Mono', monospace; }
.source-divider::before, .source-divider::after { content: ""; flex: 1; height: 1px; background: #383a42; }
.select-button { display: flex; align-items: center; gap: 24px; border: 0; padding: 12px 14px 12px 18px; background: var(--acid); color: var(--ink); font-size: 11px; font-weight: 800; }
.button-arrow { font-size: 17px; font-weight: 400; }
.drop-hint { margin-top: 23px; color: #5f626d; font: 9px 'DM Mono', monospace; letter-spacing: .07em; }
.key-hint { display: inline-block; margin-right: 5px; padding: 3px 5px; border: 1px solid #44464e; color: #888b95; }
.loading-state { gap: 8px; background: rgba(16, 17, 20, .9); color: #fff; font: 11px 'DM Mono', monospace; z-index: 2; }
.loading-state span { color: #888b95; font-size: 10px; }
.loading-spinner { width: 30px; height: 30px; margin-bottom: 7px; border: 2px solid #3f4149; border-top-color: var(--acid); border-radius: 50%; animation: spin 1s linear infinite; }
.loading-track { width: min(250px, 65%); height: 3px; margin-top: 12px; background: #3a3c44; }
.loading-track span { display: block; height: 100%; background: var(--acid); transition: width .2s; }
.error-state { gap: 9px; z-index: 3; padding: 25px; background: rgba(20, 19, 24, .94); color: #fff; }
.error-state strong { color: #ff8d9a; font-size: 13px; }
.error-state span { max-width: 430px; color: #bbbcc2; font-size: 11px; line-height: 1.5; }
.error-state button { border: 1px solid #666872; background: transparent; color: #fff; padding: 7px 14px; font-size: 10px; }
.canvas-corner { position: absolute; width: 19px; height: 19px; border-color: rgba(216, 243, 79, .68); pointer-events: none; }
.corner-tl { top: 18px; left: 18px; border-top: 1px solid; border-left: 1px solid; }
.corner-br { right: 18px; bottom: 18px; border-right: 1px solid; border-bottom: 1px solid; }
.controls { padding: 17px 23px 19px; color: #8b8d97; }
.progress-row { display: flex; gap: 12px; align-items: center; }
.time-label { min-width: 35px; color: #c5c6cb; font: 10px 'DM Mono', monospace; }
.time-total { text-align: right; }
.progress-slider, .volume-slider { height: 3px; margin: 0; accent-color: var(--acid); cursor: pointer; }
.progress-slider { flex: 1; }
.control-row { display: flex; justify-content: space-between; align-items: center; margin-top: 19px; }
.control-group { display: flex; align-items: center; gap: 17px; }
.control-right { gap: 11px; }
.icon-button { display: grid; place-items: center; width: 29px; height: 29px; border: 1px solid #5a5c65; border-radius: 50%; background: transparent; color: #fff; }
.icon-button:hover { border-color: var(--acid); color: var(--acid); }
.icon-button.subtle { border: 0; border-radius: 2px; color: #aaaeb7; font-size: 20px; }
.play-icon { display: block; width: 0; height: 0; margin-left: 2px; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 7px solid currentColor; }
.pause-icon { width: 8px; height: 10px; margin: 0; border: 0; border-left: 2px solid currentColor; border-right: 2px solid currentColor; }
.text-control { border: 0; padding: 0; background: transparent; color: #777a83; font-size: 10px; }
.text-control:hover { color: #fff; }
.volume-icon { color: #a5a7af; font-size: 15px; transform: rotate(-45deg); }
.volume-slider { width: 67px; }

.inspector { padding-top: 4px; }
.inspector-heading { display: flex; align-items: center; gap: 10px; }
.inspector-heading h2 { margin: 0; white-space: nowrap; font-size: 13px; letter-spacing: -.02em; }
.section-index { color: var(--violet); font: 10px 'DM Mono', monospace; }
.heading-line { width: 100%; height: 1px; background: var(--line); }
.media-name { display: flex; gap: 11px; align-items: center; margin: 28px 0 22px; padding-bottom: 19px; border-bottom: 1px solid var(--line); }
.file-icon { display: grid; place-items: center; width: 29px; height: 29px; background: #e8e7ff; color: var(--violet); font-size: 17px; }
.media-name strong, .media-name small { display: block; max-width: 205px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-name strong { font-size: 11px; }
.media-name small { margin-top: 4px; color: var(--muted); font: 9px 'DM Mono', monospace; }
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 12px; }
.stat span, .stat strong { display: block; }
.stat span { color: #999ca3; font: 9px 'DM Mono', monospace; text-transform: uppercase; }
.stat strong { margin-top: 6px; font: 500 11px 'DM Mono', monospace; }
.pipeline { margin-top: 57px; }
.compact { margin-bottom: 20px; }
.pipeline-step { display: flex; align-items: center; gap: 9px; margin: 15px 0; color: #a5a7ae; font: 10px 'DM Mono', monospace; }
.pipeline-step b { margin-left: auto; color: #b4b6bc; font-size: 8px; font-weight: 400; }
.pipeline-step.active { color: var(--ink); }
.pipeline-step.active b { color: #76a00f; }
.step-dot { width: 6px; height: 6px; border: 1px solid #a1a3aa; border-radius: 50%; }
.active .step-dot { border: 0; background: var(--acid); box-shadow: 0 0 0 3px #e7f7a4; }
.privacy-note { display: flex; gap: 11px; align-items: flex-start; margin-top: 47px; padding: 13px 14px; background: #ececf0; }
.privacy-note span { color: var(--violet); font-size: 15px; }
.privacy-note p { margin: 0; color: #777a83; font-size: 10px; line-height: 1.65; }
.page-footer { display: flex; justify-content: space-between; margin-top: 58px; color: #9a9ca3; font: 9px 'DM Mono', monospace; letter-spacing: .08em; }
.page-footer b { color: var(--violet); font-weight: 500; }

@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 1000px) {
    .sidebar { width: 75px; flex-basis: 75px; }
    .nav-brand { padding: 0; justify-content: center; }
    .nav-brand > div, .nav-link:not(.active)::after, .nav-caption, .muted-link, .nav-footer span:not(.connection-dot), .nav-footer b { display: none; }
    .nav-link { justify-content: center; padding: 14px 0; margin: 3px 10px; }
    .nav-symbol { font-size: 18px; }
    .nav-footer { justify-content: center; right: 0; left: 0; }
    .player-page { padding-right: 4vw; padding-left: 4vw; }
    .workspace { gap: 26px; grid-template-columns: minmax(400px, 1fr) 220px; }
}
@media (max-width: 720px) {
    .hero { display: block; margin-bottom: 35px; }
    .hero-badge { display: none; }
    .workspace { display: block; }
    .inspector { margin-top: 35px; }
    .pipeline { margin-top: 35px; }
    .page-footer { margin-top: 35px; }
}
@media (max-width: 480px) {
    .sidebar { display: none; }
    .player-page { padding: 37px 18px 25px; }
    .player-toolbar { padding: 0 14px; }
    .controls { padding-right: 14px; padding-left: 14px; }
}

#blazor-error-ui { display: none; }
.loading-progress { position: absolute; top: 45%; left: 50%; width: 5rem; height: 5rem; transform: translate(-50%, -50%); }
.loading-progress circle { fill: none; stroke: #dedee3; stroke-width: .6rem; transform-origin: 50% 50%; transform: rotate(-90deg); }
.loading-progress circle:last-child { stroke: var(--violet); stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * .8), 500%; }
.loading-progress-text { position: absolute; top: calc(45% + 45px); width: 100%; text-align: center; color: #888; font: 10px 'DM Mono', monospace; }
.loading-progress-text::after { content: var(--blazor-load-percentage-text, "Loading"); }