:root{color-scheme:dark;--bg:#07101c;--panel:#111c29;--line:#283a4c;--ink:#f4f7fa;--muted:#9bacbb;--cyan:#24c7ce;--blue:#48a7ff;--purple:#a477ff;--orange:#ff9c2d;--red:#ff5757;--yellow:#f3c623;--rose:#ff6f91;--green:#87d74c}
*{box-sizing:border-box}html{min-height:100%;background:var(--bg)}body{margin:0;color:var(--ink);font:16px/1.55 Arial,sans-serif;background:radial-gradient(circle at 75% 5%,#14304a 0,transparent 38%),var(--bg);min-height:100vh}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit}.video-header{height:76px;display:flex;align-items:center;justify-content:space-between;max-width:1440px;padding:0 32px;margin:auto;border-bottom:1px solid #ffffff20}.video-brand{display:flex;align-items:center;gap:12px;font-size:.95rem;font-weight:800;letter-spacing:.18em}.brand-glyph{display:grid;place-items:center;width:37px;height:37px;border:1px solid var(--cyan);color:#f1f4f5;font-size:1.15rem;font-weight:700;clip-path:polygon(50% 0,100% 100%,0 100%)}.back-link{color:#b9c8d4;font-size:.83rem}.back-link:hover{color:var(--cyan)}.video-shell{max-width:1440px;margin:auto;padding:58px 32px 80px}.video-intro{max-width:900px;margin-bottom:46px}.eyebrow{margin:0 0 12px;font:11px/1.4 monospace;letter-spacing:.17em;color:var(--cyan)}h1{max-width:850px;margin:0;font-size:clamp(2.5rem,5vw,4.8rem);line-height:1.02;letter-spacing:-.045em}.intro-copy{max-width:680px;margin:20px 0 0;color:var(--muted);font-size:1.08rem}.library{border-top:1px solid var(--line);padding-top:26px}.library-topline{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:18px}.library-topline h2,.panel-heading h2{margin:0;font-size:1.08rem;letter-spacing:.015em}.language-switch{display:flex;gap:5px}.language-switch button{border:0;background:transparent;color:#8296a9;padding:5px 8px;cursor:pointer;font-size:.72rem}.language-switch button[aria-pressed=true]{color:white}.category-filter{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line);margin-bottom:28px}.category-button{--accent:var(--blue);min-height:78px;text-align:left;border:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:#0c1825;padding:13px 15px;cursor:pointer;position:relative;transition:background .18s ease}.category-button:before{content:"";position:absolute;left:0;top:0;width:38px;height:2px;background:var(--accent)}.category-button:hover,.category-button[aria-pressed=true]{background:#142333}.category-button[aria-pressed=true]{box-shadow:inset 0 -2px var(--accent)}.category-title{display:block;font-weight:700;font-size:.86rem;line-height:1.25}.category-count{display:block;margin-top:7px;color:#8699aa;font-size:.7rem}.video-layout{display:grid;grid-template-columns:minmax(300px,.77fr) minmax(0,1.23fr);gap:24px;align-items:start}.playlist-panel,.player-panel{border:1px solid var(--line);background:linear-gradient(145deg,#101d2a,#09131e)}.playlist-panel{min-height:430px}.panel-heading{display:flex;justify-content:space-between;align-items:center;padding:17px 18px;border-bottom:1px solid var(--line)}#video-count{font:11px monospace;color:#8ba0b2}.playlist{padding:8px}.video-item{width:100%;display:grid;grid-template-columns:68px minmax(0,1fr) auto;align-items:center;gap:13px;padding:12px 10px;border:1px solid transparent;background:transparent;text-align:left;cursor:pointer}.video-item:hover,.video-item[aria-pressed=true]{border-color:#385268;background:#142332}.video-thumb{width:68px;height:52px;object-fit:cover;background:#101b27}.video-item-copy{min-width:0}.video-item-title{display:block;font-size:.88rem;line-height:1.3;font-weight:700}.video-item-subtitle{display:block;margin-top:5px;color:#91a2b2;font-size:.72rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.duration{font:10px monospace;color:#b5c4cf}.empty-state{margin:15px;padding:24px 18px;border:1px dashed #334a5d;color:#afc0cc;background:#0b1723}.empty-state strong{display:block;margin-bottom:7px;color:var(--ink);font-size:.93rem}.empty-state p{margin:0;color:var(--muted);font-size:.84rem}.player-panel{padding:12px}.player-frame{position:relative;display:grid;place-items:center;aspect-ratio:16/9;background:linear-gradient(135deg,#0b1723,#101e2c);overflow:hidden}.player-frame:before{content:"";position:absolute;inset:0;opacity:.28;background-image:linear-gradient(#47627544 1px,transparent 1px),linear-gradient(90deg,#47627544 1px,transparent 1px);background-size:34px 34px;mask-image:linear-gradient(90deg,transparent,#000)}#full-video{width:100%;height:100%;max-height:68vh;object-fit:contain;background:#000;position:relative;z-index:1}.player-placeholder{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:14px;padding:30px;color:#9db0bf;text-align:center;font-size:.9rem}.play-mark{display:grid;place-items:center;width:58px;height:58px;border:1px solid var(--cyan);border-radius:50%;color:var(--cyan);padding-left:4px}.player-caption{display:flex;justify-content:space-between;gap:20px;align-items:start;padding:19px 8px 0}.player-caption .eyebrow{margin-bottom:7px;color:#7eaac0}.player-caption h2{margin:0;font-size:1.25rem;line-height:1.22}.video-duration{padding-top:5px;font:11px monospace;color:#a7b5c0;white-space:nowrap}.player-description{margin:12px 8px 7px;color:var(--muted);font-size:.88rem;max-width:760px}.library-note{margin:20px 0 0;color:#778b9d;font:11px/1.5 monospace;letter-spacing:.045em}.rtl{direction:rtl}.rtl .video-item{text-align:right}.rtl .category-button{text-align:right}.rtl .brand-glyph{padding-left:0;padding-right:3px}.rtl .player-caption{text-align:right}
@media(max-width:900px){.category-filter{grid-template-columns:repeat(2,minmax(0,1fr))}.video-layout{grid-template-columns:1fr}.player-panel{grid-row:1}.playlist-panel{grid-row:2}}
@media(max-width:600px){.video-header{height:64px;padding:0 17px}.video-shell{padding:38px 17px 56px}.video-intro{margin-bottom:34px}.library-topline{align-items:flex-start;flex-direction:column;gap:10px}.category-filter{grid-template-columns:1fr 1fr}.category-button{min-height:84px;padding:11px}.category-title{font-size:.78rem}.video-layout{gap:14px}.player-caption h2{font-size:1.05rem}.video-item{grid-template-columns:56px minmax(0,1fr) auto;gap:9px}.video-thumb{width:56px;height:45px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important}}