:root{--c-accent:#C41E3A;--c-bg:#FFFFFF;--c-bg-window:#E5E7EB;--c-bg-soft:#F3F4F6;--c-card:#F9FAFB;--c-black:#1A1A1A;--c-border:#D1D5DB;--c-title:#000000;--c-subtitle:#1A1A1A;--c-text:#4B5563;--c-muted:#6B7280;--c-hint:#9CA3AF;--maxw:960px;--radius:10px;--gap:20px;--font:"Segoe UI","Microsoft JhengHei","PingFang TC",system-ui,sans-serif}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font);color:var(--c-text);background:var(--c-bg-window);line-height:1.6}.page{max-width:var(--maxw);margin:0 auto;min-height:100vh;background:linear-gradient(180deg,var(--c-bg-soft) 0,var(--c-bg) 30%);padding:0 0 60px;border-left:1px solid var(--c-border);border-right:1px solid var(--c-border)}.site-header{padding:28px 40px 22px;border-bottom:1px solid var(--c-border);gap:16px}.logo,.site-header{display:flex;align-items:center}.logo{width:46px;height:46px;border-radius:8px;background:var(--c-black);color:#fff;font-weight:700;font-size:13px;justify-content:center;letter-spacing:1px;flex:none}.site-header .titles h1{color:var(--c-title);font-size:22px;letter-spacing:1px}.site-header .titles p{color:var(--c-muted);font-size:13px}.accent-line{height:3px;width:60px;background:var(--c-accent);margin-top:6px}.content{padding:32px 40px}.section-title{color:var(--c-subtitle);font-size:16px;font-weight:700;margin-bottom:16px;padding-left:10px;border-left:3px solid var(--c-accent)}.card-list{display:flex;flex-direction:column;gap:var(--gap)}.video-card{display:flex;align-items:center;gap:20px;background:var(--c-card);border:1px solid var(--c-border);border-radius:var(--radius);padding:16px;text-decoration:none;transition:box-shadow .15s,transform .15s}.video-card:hover{box-shadow:0 4px 14px rgba(0,0,0,.08);transform:translateY(-1px)}.thumb{width:150px;height:84px;flex:none;background-color:var(--c-bg-window);background-size:cover;background-position:50%;border:1px solid var(--c-border);border-radius:6px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}.thumb:before{width:38px;height:38px;border-radius:50%;background:rgba(0,0,0,.55)}.thumb:after,.thumb:before{content:"";position:absolute}.thumb:after{border-color:transparent transparent transparent #fff;border-style:solid;border-width:8px 0 8px 13px;margin-left:3px}.video-card .info{flex:1 1}.video-card .info h3{color:var(--c-title);font-size:17px}.video-card .info .aud{color:var(--c-muted);font-size:13px}.badge{font-size:12px;padding:4px 10px;border-radius:20px;border:1px solid var(--c-accent);color:var(--c-accent);white-space:nowrap}.badge.done{border-color:var(--c-border);color:var(--c-muted)}.video-frame{aspect-ratio:16/9;width:100%;background:repeating-linear-gradient(45deg,#e9ebee,#e9ebee 12px,#e5e7eb 0,#e5e7eb 24px);border:1px solid var(--c-border);border-radius:var(--radius);display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--c-muted);gap:12px}.video-frame .play{width:0;height:0;border-style:solid;border-width:18px 0 18px 30px;border-color:transparent transparent transparent var(--c-hint)}.video-player{width:100%;aspect-ratio:16/9;display:block;background:#000;border:1px solid var(--c-border);border-radius:var(--radius)}.watch-check{display:flex;align-items:center;gap:10px;margin:20px 0;font-size:15px;color:var(--c-subtitle);cursor:pointer}.watch-check input{width:18px;height:18px;accent-color:var(--c-accent)}.quiz{background:var(--c-card);border:1px solid var(--c-border);border-radius:var(--radius);padding:24px}.quiz .q{margin-bottom:20px}.quiz .q:last-child{margin-bottom:0}.quiz .q .qt{color:var(--c-subtitle);font-weight:600;margin-bottom:8px}.quiz .opt{display:block;padding:6px 0;color:var(--c-text);cursor:pointer}.quiz .opt input{margin-right:8px;accent-color:var(--c-accent)}.btn-submit{margin-top:24px;background:var(--c-accent);color:#fff;border:none;border-radius:8px;padding:12px 34px;font-size:15px;cursor:pointer;letter-spacing:1px}.btn-submit:hover{background:#a5182f}.submit-note{margin-top:16px;padding:12px 16px;background:var(--c-bg-soft);border:1px dashed var(--c-border);border-radius:8px;color:var(--c-muted);font-size:14px}.nav-back{display:inline-flex;align-items:center;gap:6px;margin-bottom:20px;padding:9px 18px;color:var(--c-subtitle);text-decoration:none;font-size:15px;font-weight:600;background:var(--c-card);border:1px solid var(--c-border);border-radius:8px;transition:color .15s,border-color .15s,background .15s;cursor:pointer}.nav-back:hover{color:var(--c-accent);border-color:var(--c-accent);background:#fff}.foot-note{margin:40px 40px 0;padding-top:16px;border-top:2px solid var(--c-black)}.foot-note,.hint{color:var(--c-hint);font-size:12px}.hint{font-style:italic;display:block;margin-bottom:14px}