:root{color:#eef4ff;background:#10141d;font-family:Inter,Microsoft YaHei,PingFang SC,Segoe UI,Arial,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}*{box-sizing:border-box}html,body,#root{min-height:100%;margin:0}body{background:radial-gradient(circle at 20% 10%,rgba(77,139,255,.18),transparent 34%),linear-gradient(135deg,#10141d 0%,#161d2a 48%,#111821 100%)}button,input{font:inherit}.app-shell{width:min(1120px,calc(100% - 32px));min-height:100vh;margin:0 auto;padding:32px 0}.player-panel,.notes-panel{border:1px solid rgba(159,177,210,.16);background:rgba(19,26,38,.88);box-shadow:0 24px 80px #00000047;backdrop-filter:blur(18px)}.player-panel{border-radius:8px;padding:28px}.app-header{margin-bottom:22px}.eyebrow{margin:0 0 8px;color:#8db4ff;font-size:.78rem;font-weight:700;text-transform:uppercase}h1,h2,p{margin-top:0}h1{margin-bottom:10px;font-size:clamp(2rem,5vw,3.5rem);line-height:1.05}.subtitle{max-width:680px;margin-bottom:0;color:#b8c4d7}.input-group{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;margin-bottom:18px}.input-group input{min-width:0;height:44px;border:1px solid rgba(159,177,210,.28);border-radius:6px;outline:none;padding:0 14px;color:#f8fbff;background:rgba(7,12,20,.72)}.input-group input:focus{border-color:#72a7ff;box-shadow:0 0 0 3px #72a7ff29}.primary-btn,.secondary-btn{min-height:44px;border:0;border-radius:6px;padding:0 18px;color:#fff;cursor:pointer}.primary-btn{background:#2f7df6;font-weight:700}.primary-btn:hover{background:#246bdd}.secondary-btn{border:1px solid rgba(159,177,210,.26);background:rgba(255,255,255,.08)}.secondary-btn:hover{background:rgba(255,255,255,.14)}button:disabled{cursor:not-allowed;opacity:.58}.controls-row{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:18px}.segmented-control{display:flex;min-width:0;border:1px solid rgba(159,177,210,.18);border-radius:6px;margin:0;padding:4px;background:rgba(7,12,20,.44)}.segmented-control legend{width:1px;height:1px;overflow:hidden;position:absolute;clip:rect(0 0 0 0)}.segmented-control label{cursor:pointer}.segmented-control input{position:absolute;opacity:0;pointer-events:none}.segmented-control span{display:block;border-radius:4px;padding:8px 12px;color:#bdc8db;white-space:nowrap}.segmented-control input:checked+span{color:#fff;background:#2f7df6}.message{border-radius:6px;margin-bottom:16px;padding:12px 14px}.message--error{border:1px solid rgba(255,112,112,.34);color:#ffd4d4;background:rgba(188,54,54,.16)}.player-area{position:relative;width:100%;overflow:hidden;border:1px solid rgba(159,177,210,.18);border-radius:8px;background:#000;aspect-ratio:16 / 9}.player-area--cinema{aspect-ratio:21 / 9}.player-area--compact{aspect-ratio:4 / 3}.player-area iframe,.player-area video{display:block;width:100%;height:100%;border:0;background:#000}.player-placeholder{display:grid;width:100%;height:100%;min-height:220px;place-items:center;color:#a9b6ca;background:linear-gradient(135deg,rgba(255,255,255,.04),transparent),#05070b}.player-placeholder span{border:1px solid rgba(159,177,210,.18);border-radius:999px;padding:8px 14px}.status-bar{display:grid;grid-template-columns:minmax(140px,auto) minmax(180px,1fr) auto;gap:12px;align-items:center;margin-top:14px;border-radius:6px;padding:12px;background:rgba(255,255,255,.06)}.status-label{display:block;margin-bottom:3px;color:#93a1b8;font-size:.76rem}.status-bar strong{color:#f6f9ff}.notes-panel{border-radius:8px;margin-top:16px;padding:20px 24px;color:#b8c4d7}.notes-panel h2{margin-bottom:10px;color:#f6f9ff;font-size:1.08rem}.notes-panel p{margin-bottom:8px}.notes-panel p:last-child{margin-bottom:0}@media (max-width: 720px){.app-shell{width:min(100% - 20px,640px);padding:14px 0}.player-panel,.notes-panel{padding:18px}.input-group{grid-template-columns:1fr}.primary-btn,.secondary-btn,.controls-row,.segmented-control{width:100%}.segmented-control{overflow-x:auto}.status-bar{grid-template-columns:1fr}.player-area{border-radius:6px}}