@charset "UTF-8";
:root{color-scheme:light;--blue:#01447b;--green:#009a44;--ink:#24364a;--line:#e2e6e9;--font:"Segoe UI",Arial,sans-serif}
*{box-sizing:border-box}
body{margin:0;background:#fff;color:var(--ink);font:16px/1.5 var(--font);-webkit-font-smoothing:antialiased}
button{font:inherit}
[hidden]{display:none!important}
button:focus-visible,video:focus-visible{outline:3px solid var(--green);outline-offset:4px}
.topbar{height:60px;padding:0 28px;display:flex;align-items:center;justify-content:space-between;gap:20px;background:var(--blue);color:white}
.brand-name{font:22px Georgia,"Times New Roman",serif}
.header-meta{display:flex;align-items:center;gap:22px;font-size:14px}
#preview-label{font-size:12px;color:#d4e1ec}
main{max-width:1180px;margin:0 auto;padding:32px 28px}
.workspace{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:28px;align-items:start}
.watch-area{min-width:0}
.player-shell{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:5px;background:#0a2235}
video{display:block;width:100%;height:100%;object-fit:contain;background:#0a2235}
.video-cover{position:absolute;inset:0;width:100%;height:100%;border:0;display:grid;place-items:center;background:var(--blue);cursor:pointer}
.video-cover:focus-visible{outline-offset:-5px}
.play-circle{width:66px;height:66px;display:grid;place-items:center;border:1px solid #ffffff70;border-radius:50%;background:#ffffff12;transition:background .15s,transform .15s}
.play-circle svg{width:27px;height:27px;fill:white;transform:translateX(2px)}
.video-cover:hover .play-circle{background:var(--green);border-color:var(--green);transform:scale(1.06)}
h1{font-size:21px;font-weight:600;line-height:1.4;margin:16px 0 0;overflow-wrap:anywhere}
.playlist-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 0 13px;border-bottom:1px solid var(--line)}
h2{font-size:16px;font-weight:600;margin:0}
#video-count{font-size:13px;color:#71808d}
ol{list-style:none;padding:8px 0;margin:0}
li+li{margin-top:4px}
.video-item{display:flex;align-items:center;gap:12px;width:100%;min-height:62px;padding:13px 14px;border:0;border-left:3px solid transparent;border-radius:3px;background:transparent;text-align:left;color:var(--ink);cursor:pointer;transition:background .15s}
.video-item:hover{background:#f0f0f0}
.video-item[aria-current="true"]{background:#edf7f1;border-left-color:var(--green);color:var(--blue)}
.item-icon{width:17px;height:17px;flex-shrink:0;fill:none;stroke:#89949e;stroke-width:1.4}
.video-item[aria-current="true"] .item-icon{fill:var(--green);stroke:var(--green)}
.item-title{font-size:15px;line-height:1.5;overflow-wrap:anywhere}
.video-item[aria-current="true"] .item-title{font-weight:600}
.status{margin:30px auto;padding:45px 20px;max-width:650px;text-align:center;color:#657382;background:#f0f0f0;border-radius:4px}
.status strong{display:block;color:var(--blue);font-size:22px;margin-bottom:12px}
.status p{margin:0}
.playback-error{margin-top:12px;padding:12px;border-left:3px solid var(--green);background:#f0f0f0;font-size:14px}
@media(max-width:850px){.workspace{grid-template-columns:minmax(0,1fr) 225px;gap:22px}.video-item{padding:12px 10px;gap:9px}.item-title{font-size:14px}}
@media(max-width:650px){.topbar{height:56px;padding:0 18px}.brand-name{font-size:20px}.header-meta{gap:12px;font-size:13px}#preview-label{font-size:11px}main{padding:22px 18px}.workspace{grid-template-columns:1fr;gap:28px}h1{font-size:20px;margin-top:13px}.play-circle{width:56px;height:56px}.item-title{font-size:16px}.video-item{min-height:58px;padding:13px 14px}.playlist-heading{padding-bottom:10px}}
@media(max-width:360px){.brand-name{font-size:18px}.header-meta{gap:8px}#preview-label{max-width:40px;line-height:1.2}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}