.video-page {
    --video-ink:#142643;
    --video-muted:#4e6078;
    --video-border:#d9e2ef;
    --video-accent:#244fba;
    --video-tint:#edf3ff;
    padding: clamp(14px, 3vw, 32px) 0 32px;
    color:var(--video-ink);
    line-height:1.5;
}
.video-page [hidden] { display:none !important; }
.video-page p { overflow-wrap:anywhere; }
.video-heading h1,.video-detail-head h2 {
    margin:0;
    font-size:clamp(26px, 3.8vw, 36px);
    line-height:1.22;
    font-weight:750;
    overflow-wrap:anywhere;
}
.video-heading p,.video-detail-head p,.video-guide-head p { color:var(--video-muted); margin-top:7px; }
#videoTitle:focus,#videoDetailTitle:focus { outline:none; }
.video-tabs {
    display:grid;
    grid-auto-flow:column;
    grid-auto-columns:1fr;
    gap:8px;
    width:min(100%, 360px);
    margin:20px 0 16px;
    padding:4px;
    border:1px solid var(--video-border);
    border-radius:14px;
    background:#eaf0f8;
}
.video-tabs button,.video-back,.video-secondary,.video-primary {
    min-height:44px;
    border:1px solid transparent;
    border-radius:10px;
    padding:9px 14px;
    font:inherit;
    font-weight:650;
    text-align:center;
    text-decoration:none;
    cursor:pointer;
}
.video-tabs button { background:transparent; color:var(--video-muted); }
.video-tabs button[aria-pressed="true"] { color:var(--video-accent); background:#fff; border-color:var(--video-border); }
.video-primary,.video-secondary { display:inline-flex; align-items:center; justify-content:center; }
.video-primary { background:var(--video-accent); color:#fff; }
.video-primary:disabled { background:#e7ecf5; color:#51647c; opacity:1; cursor:default; }
.video-secondary { background:#fff; color:var(--video-accent); border-color:var(--video-border); }
.video-back { color:var(--video-accent); background:transparent; padding-inline:3px 12px; margin-bottom:6px; }
.video-message:not(:empty) { background:#fff; border:1px solid var(--video-border); border-radius:14px; padding:16px; color:var(--video-muted); margin-bottom:12px; }
.video-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.video-card { min-width:0; }
.video-open {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    width:100%;
    height:100%;
    padding:16px;
    border:1px solid var(--video-border);
    border-radius:15px;
    background:#fff;
    text-align:left;
    color:var(--video-ink);
    font:inherit;
    cursor:pointer;
}
.video-card-main { display:grid; justify-items:start; gap:4px; min-width:0; }
.video-card-title {
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    overflow:hidden;
    font-size:clamp(16px, 2vw, 19px);
    font-weight:720;
    overflow-wrap:anywhere;
}
.video-card-note { font-size:13px; color:var(--video-muted); overflow-wrap:anywhere; }
.video-card-link { flex-shrink:0; color:var(--video-accent); font-size:13px; font-weight:650; white-space:nowrap; }
.video-card-link b { font-size:22px; margin-left:2px; vertical-align:-2px; line-height:1; }
.video-state {
    display:inline-flex;
    width:fit-content;
    padding:3px 9px;
    border-radius:99px;
    font-size:12px;
    font-weight:700;
    color:#465571;
    background:#eaf0f7;
}
.video-state:is([data-status="ready"],[data-status="done"]) { color:#115740; background:#dff4eb; }
.video-state:is([data-status="waiting"],[data-status="warning"]) { color:#814814; background:#fff0dd; }
#videoTaskMore { margin-top:16px; }
.video-detail-head,.video-panel,.video-guide,.video-finish {
    min-width:0;
    border:1px solid var(--video-border);
    border-radius:16px;
    padding:clamp(14px, 2.6vw, 24px);
    background:#fff;
}
.video-detail-head { background:linear-gradient(112deg,#fff 38%,#edf3ff 100%); }
.video-detail-meta { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:8px; color:var(--video-muted); font-size:14px; font-weight:650; }
.video-panel,.video-guide,.video-finish { margin-top:14px; }
.video-panel h3,.video-panel legend,.video-guide h3 { font-size:19px; font-weight:740; }
.video-panel h4 { font-size:15px; margin-top:14px; }
.video-panel fieldset { border:0; min-inline-size:0; }
.video-platforms { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,148px),1fr)); gap:8px; margin-top:10px; }
.video-platform {
    display:flex;
    align-items:center;
    gap:8px;
    min-height:60px;
    min-width:0;
    padding:9px 10px;
    border:1px solid var(--video-border);
    border-radius:10px;
    line-height:1.3;
    overflow-wrap:anywhere;
}
label.video-platform { cursor:pointer; }
.video-platform:has(:checked) { border-color:var(--video-accent); background:var(--video-tint); }
.video-platform input { flex:0 0 16px; width:16px; height:16px; accent-color:var(--video-accent); }
.video-platform strong { display:block; font-size:14px; }
.video-platform small { display:block; margin-top:3px; color:var(--video-muted); font-size:12px; }
.video-platform[data-unavailable] { display:block; background:#f2f5f9; color:#52617a; }
.video-form-error:not(:empty) { padding:9px 12px; border-radius:8px; background:#fff0ed; color:#902d23; margin-top:10px; }
.video-panel > .video-primary,.video-task-info > .video-secondary { margin-top:12px; }
.video-materials { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px; }
.video-materials video { display:block; width:100%; min-height:112px; max-height:350px; background:#142139; margin-top:10px; border-radius:10px; }
.video-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.video-note,.video-instructions { margin-top:7px; color:var(--video-muted); }
.video-note { font-size:14px; }
.video-instructions { white-space:pre-wrap; }
.video-caption { background:#f3f6fa; padding:10px 12px; border-radius:8px; color:var(--video-ink); }
.video-guide-head { margin-bottom:14px; }
.video-guide-steps { list-style:none; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.video-guide-steps li { min-width:0; padding:10px; border:1px solid var(--video-border); border-radius:12px; }
.video-guide-steps img { display:block; width:100%; height:auto; border-radius:7px; background:#edf3ff; }
.video-guide-steps h4 { margin-top:9px; display:flex; gap:7px; align-items:center; font-size:16px; }
.video-guide-steps h4 span { display:grid; place-items:center; flex:0 0 24px; height:24px; border-radius:50%; background:var(--video-tint); color:var(--video-accent); font-size:13px; }
.video-guide-steps p { margin-top:6px; color:var(--video-muted); font-size:14px; }
.video-finish { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.video-finish p { color:var(--video-muted); font-size:14px; }
.video-nav { background:transparent; border:0; font:inherit; cursor:pointer; }
.bottom-nav [hidden],.action-section[hidden] { display:none !important; }
.bottom-nav .nav-item { color:#596780; font-size:13px; font-weight:650; justify-content:center; }
.bottom-nav .nav-item.active { color:#214cc7; }
.bottom-nav .nav-icon { display:none; }
.bottom-nav .badge-dot { top:10px; right:calc(50% - 40px); }
.submission-context:not(:empty) { padding:8px 10px; margin-bottom:8px; border-radius:8px; background:#eaf0ff; color:#23458a; overflow-wrap:anywhere; }
.submission-link-label { display:block; color:#354766; font-size:14px; font-weight:650; margin-bottom:5px; }
@media (hover:hover) {
    .video-open:hover,.video-secondary:hover,label.video-platform:hover { border-color:#93acdb; background:#f7faff; }
    .video-primary:not(:disabled):hover { background:#193c96; }
}
@media (max-width:700px) {
    .video-grid,.video-materials { grid-template-columns:minmax(0,1fr); gap:10px; }
    .video-materials > :nth-child(2) { margin-top:0; }
    .video-guide-steps { grid-template-columns:minmax(0,1fr); }
    .video-guide-steps li { padding:12px; }
    .video-guide-steps img { max-width:460px; margin-inline:auto; }
}
@media (max-width:520px) {
    .video-tabs { width:100%; }
    .video-open { padding:12px; gap:8px; }
    .video-card-link { font-size:12px; }
    .video-platforms { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .video-actions > * { flex:1 1 auto; }
    .video-panel > .video-primary,.video-finish .video-primary { width:100%; }
    .video-finish { align-items:stretch; flex-direction:column; }
}
@media (prefers-reduced-motion:reduce) { .video-page { animation:none; } }