:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;--page:#f6f1e8;--surface:#fffdf7;--card:#fff;--border:#d8cbb8;--text:#1b1f24;--body:#2c3840;--muted:#736151;--accent:#712525;--accent-text:#fffdf7;--shadow:0 18px 50px #37231617}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial;--page:#010714;--surface:#131a25;--card:#202a36;--border:#394650;--text:#f5ebdd;--body:#e8dcc9;--muted:#b79864;--accent:#b79864;--accent-text:#010714;--shadow:0 18px 50px #0000003d}}*{box-sizing:border-box}html{background:var(--page);min-height:100%}body{min-height:100vh;color:var(--text);background:radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 30rem), var(--page);margin:0;font-family:Inter,Noto Sans TC,PingFang TC,Microsoft JhengHei,system-ui,sans-serif;line-height:1.55}button,input{font:inherit}button,a{-webkit-tap-highlight-color:transparent}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.login-page{place-items:center;min-height:100vh;padding:24px;display:grid}.login-panel{border:1px solid var(--border);background:color-mix(in srgb, var(--surface) 94%, transparent);width:min(100%,460px);box-shadow:var(--shadow);border-radius:24px;padding:42px}.brand-mark{width:48px;height:48px;color:var(--accent-text);background:var(--accent);letter-spacing:.04em;border-radius:14px;place-items:center;margin-bottom:28px;font-weight:800;display:grid}.eyebrow{color:var(--muted);letter-spacing:.08em;margin:0 0 6px;font-size:14px;font-weight:700}.login-panel h1,.site-header h1,.video-details h1{margin:0;line-height:1.3}.login-panel h1{font-size:clamp(28px,7vw,38px)}.login-intro{color:var(--body);margin:14px 0 28px;font-size:17px}.login-form{gap:10px;display:grid}.login-form label{color:var(--body);font-size:15px;font-weight:700}.login-form input,.search-field input{border:1px solid var(--border);color:var(--text);background:var(--surface);outline:none}.login-form input{border-radius:12px;width:100%;min-height:50px;padding:0 15px;font-size:16px}.login-form input:focus,.search-field:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent)}.login-form button,.primary-link{min-height:50px;color:var(--accent-text);background:var(--accent);cursor:pointer;border:0;border-radius:12px;margin-top:6px;font-weight:800}.login-form button:disabled{opacity:.65;cursor:wait}.form-error{color:#c96b6b;margin:4px 0 0;font-size:14px}.library-page,.watch-page{width:min(100% - 40px,1240px);margin:0 auto;padding:32px 0 64px}.site-header,.watch-header,.library-toolbar{justify-content:space-between;align-items:center;gap:20px;display:flex}.site-header{margin-bottom:30px}.site-header h1{font-size:clamp(24px,4vw,32px)}.secondary-button{border:1px solid var(--border);min-height:40px;color:var(--body);background:var(--surface);cursor:pointer;border-radius:10px;padding:0 16px;font-weight:700}.secondary-button:hover,.back-link:hover{border-color:var(--accent);color:var(--accent)}.library-toolbar{margin-bottom:20px}.library-toolbar>p{color:var(--muted);flex:none;margin:0;font-size:14px;font-weight:700}.search-field{border:1px solid var(--border);background:var(--surface);border-radius:12px;align-items:center;width:min(100%,430px);min-height:44px;display:flex;position:relative}.search-field svg{fill:none;width:20px;stroke:var(--muted);stroke-linecap:round;stroke-width:2px;margin-left:13px}.search-field input{border-radius:inherit;background:0 0;border:0;width:100%;min-height:42px;padding:0 13px 0 10px}.video-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;display:grid}.video-card{border:1px solid var(--border);min-width:0;color:inherit;background:var(--card);border-radius:16px;text-decoration:none;transition:transform .16s,border-color .16s,box-shadow .16s;overflow:hidden;box-shadow:0 8px 24px #0000000a}.video-card:hover{border-color:var(--accent);box-shadow:var(--shadow);transform:translateY(-3px)}.thumbnail-wrap{aspect-ratio:16/9;background:color-mix(in srgb, var(--surface) 75%, var(--page));position:relative;overflow:hidden}.thumbnail-wrap img{object-fit:cover;width:100%;height:100%;transition:transform .24s;display:block}.video-card:hover .thumbnail-wrap img{transform:scale(1.025)}.thumbnail-wrap span{color:#fff;background:#010714d1;border-radius:6px;padding:3px 7px;font-size:13px;font-weight:700;position:absolute;bottom:9px;right:9px}.video-card-body{padding:16px 17px 18px}.video-card-body h2{margin:0;font-size:18px;line-height:1.45}.video-card-body p{color:var(--muted);-webkit-line-clamp:2;-webkit-box-orient:vertical;margin:8px 0 0;font-size:14px;display:-webkit-box;overflow:hidden}.empty-state{border:1px dashed var(--border);color:var(--body);text-align:center;background:color-mix(in srgb, var(--surface) 70%, transparent);border-radius:16px;padding:60px 24px}.empty-state h2{color:var(--text);margin:0 0 8px;font-size:20px}.empty-state p{margin:0}.connection-error{margin-top:56px}.watch-header{margin-bottom:22px}.back-link{color:var(--body);align-items:center;gap:6px;font-weight:700;text-decoration:none;display:inline-flex}.back-link svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px;width:22px}.watch-content{width:min(100%,1020px);margin:0 auto}.player-shell{aspect-ratio:16/9;box-shadow:var(--shadow);background:#000;border-radius:16px;position:relative;overflow:hidden}.player-shell iframe{border:0;width:100%;height:100%;position:absolute;inset:0}.video-details{padding:24px 4px 0}.video-details h1{font-size:clamp(24px,4vw,32px)}.video-details p{color:var(--body);white-space:pre-wrap;margin:12px 0 0;font-size:17px}.compact-panel{text-align:center}.primary-link{justify-content:center;align-items:center;padding:0 22px;text-decoration:none;display:inline-flex}@media (max-width:860px){.video-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:560px){.login-panel{border-radius:20px;padding:30px 24px}.library-page,.watch-page{width:min(100% - 28px,1240px);padding-top:22px}.site-header{align-items:flex-start}.library-toolbar{align-items:flex-end;gap:12px}.video-grid{grid-template-columns:1fr;gap:16px}.video-card-body{padding:14px 15px 16px}.player-shell{border-radius:10px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition:none!important}}