:root{--navy:#061f43;--blue:#0b4d8f;--gold:#d8a94e;--bg:#eef3fb;--text:#10223f;--muted:#64748b;--line:#dbe5f1;--green:#15803d;--red:#b91c1c}
*{box-sizing:border-box}
body{margin:0;font-family:Arial,Helvetica,sans-serif;background:radial-gradient(circle at 12% 10%,rgba(216,169,78,.20),transparent 28%),linear-gradient(180deg,#eef3fb,#fff);color:var(--text)}
a{text-decoration:none}
.top{background:linear-gradient(135deg,#061f43,#0b4d8f);color:#fff;position:sticky;top:0;z-index:20;box-shadow:0 8px 25px rgba(6,31,67,.18)}
.topin{max-width:1220px;margin:auto;padding:14px 16px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px;font-weight:950}
.logo{width:52px;height:52px;border-radius:16px;background:linear-gradient(135deg,#d8a94e,#f5cf78);display:flex;align-items:center;justify-content:center;color:#111;font-size:23px;font-weight:950}
.brand small{display:block;font-size:12px;opacity:.85}
.nav a{color:#fff;background:rgba(255,255,255,.13);padding:9px 12px;border-radius:11px;margin:3px;display:inline-block;font-weight:850}
.wrap{max-width:1220px;margin:auto;padding:22px 16px}
.hero{border-radius:32px;padding:36px;background:radial-gradient(circle at 80% 18%,rgba(216,169,78,.36),transparent 28%),linear-gradient(135deg,#071f43,#0b4d8f 65%,#10223f);color:#fff;box-shadow:0 18px 45px rgba(6,43,95,.2);position:relative;overflow:hidden}
.hero h1{font-size:42px;margin:10px 0}.hero p{color:#eaf3ff;font-size:17px;line-height:1.62;max-width:850px}.pill{display:inline-block;background:#fff7ed;color:#9a3412;border:1px solid #fed7aa;padding:7px 12px;border-radius:999px;font-size:13px;font-weight:950}
.grid{display:grid;grid-template-columns:1.35fr .65fr;gap:18px;margin-top:20px;align-items:start}
.card{background:#fff;border:1px solid var(--line);border-radius:24px;padding:18px;box-shadow:0 8px 24px rgba(9,43,84,.08);position:relative;overflow:hidden}
.card.topline:before{content:"";position:absolute;top:0;left:0;right:0;height:5px;background:linear-gradient(90deg,#061f43,#0b4d8f,#d8a94e)}
.card h2{margin:10px 0;color:#061f43}.muted{color:#64748b;line-height:1.58}
.playerBox{background:#07101f;border-radius:26px;padding:12px;box-shadow:0 18px 45px rgba(0,0,0,.22)}
.videoFrame{width:100%;aspect-ratio:16/9;border:0;border-radius:18px;background:#000;display:block}
.localVideo{width:100%;aspect-ratio:16/9;border-radius:18px;background:#000;display:block}
.controls{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px}
.btn{display:inline-block;border:0;border-radius:13px;padding:11px 14px;font-weight:950;cursor:pointer;text-decoration:none;margin:4px}
.gold{background:linear-gradient(135deg,#d8a94e,#f5cf78);color:#111!important}.navy{background:#061f43;color:#fff!important}.light{background:#eef2ff;color:#061f43!important}.green{background:#15803d;color:#fff!important}.red{background:#b91c1c;color:#fff!important}
.videoList{display:grid;gap:12px;max-height:680px;overflow:auto;padding-right:5px}
.vitem{display:flex;gap:12px;background:#f8fbff;border:1px solid #e5edf7;border-radius:18px;padding:10px;cursor:pointer;transition:.15s}
.vitem:hover,.vitem.active{border-color:#0b4d8f;box-shadow:0 8px 20px rgba(11,77,143,.12);transform:translateY(-1px)}
.thumb{width:110px;height:70px;border-radius:12px;background:linear-gradient(135deg,#061f43,#0b4d8f);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:950;flex:none;overflow:hidden}
.thumb img{width:100%;height:100%;object-fit:cover}.vitem b{display:block;color:#061f43;font-size:14px}.vitem span{display:block;color:#64748b;font-size:12px;margin-top:4px}
.badge{display:inline-block;background:#fff7ed;border:1px solid #fed7aa;color:#9a3412;padding:5px 9px;border-radius:999px;font-size:12px;font-weight:950}
.filterBar{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0}.inp,select,textarea{width:100%;padding:12px;border:1px solid #cbd5e1;border-radius:12px;margin:6px 0 12px;font-size:14px;background:#fff}textarea{min-height:85px}
.table{width:100%;border-collapse:collapse}.table th,.table td{border-bottom:1px solid #e5edf7;padding:10px;text-align:left;vertical-align:top}.ok{background:#ecfdf5;color:#166534;padding:12px;border-radius:12px;margin:12px 0}.err{background:#fee2e2;color:#991b1b;padding:12px;border-radius:12px;margin:12px 0}.note{background:#fff7ed;color:#9a3412;padding:12px;border-radius:12px;margin:12px 0;line-height:1.55}
.footer{text-align:center;color:#64748b;margin:28px 0;font-size:14px}
@media(max-width:960px){.grid{grid-template-columns:1fr}.hero h1{font-size:32px}.videoList{max-height:none}.thumb{width:92px;height:60px}}
@media(max-width:620px){.hero{padding:26px}.hero h1{font-size:28px}.controls{display:block}.btn{width:100%;text-align:center}.vitem{align-items:center}}