/* Sovereign Tube — visual language matched to sovereign-net.com (gold-led). */
:root{
  --bg:#0a0d13; --bg2:#0e131d; --card:#141a27; --edge:#273349; --edge2:#1b2334;
  --text:#f2f6fd; --dim:#8f9cb3; --gold:#f5b941; --gold2:#ffd277;
  --green:#37d39a; --red:#ff6f6f; --blue:#5aa9ff; --purple:#b98bff;
  --r:14px;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{color:var(--text);font:15px/1.55 -apple-system,'Segoe UI',system-ui,sans-serif;min-height:100vh;
  /* a soft gold glow at the top gives the page depth without leaving the dark/gold brand */
  background:radial-gradient(1200px 420px at 50% -220px,rgba(245,185,65,.07),transparent 60%),var(--bg)}
a{color:inherit;text-decoration:none}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:var(--edge);border-radius:8px}
::selection{background:rgba(245,185,65,.3)}

/* ---- top bar ---- */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:16px;padding:13px 20px;
  background:linear-gradient(180deg,var(--bg) 72%,rgba(11,14,20,.86));backdrop-filter:blur(8px);
  border-bottom:1px solid var(--edge2)}
.brand{font-weight:800;font-size:19px;letter-spacing:.2px;display:flex;align-items:center;gap:9px;white-space:nowrap}
.brand b{color:var(--gold);font-weight:800}
.logo{width:30px;height:30px;border-radius:9px;background:var(--gold);color:#1a1407;display:flex;
  align-items:center;justify-content:center;font-size:15px;padding-left:2px;box-shadow:0 4px 14px rgba(245,185,65,.25)}
.search{flex:1;max-width:680px;background:#0c1119;border:1px solid var(--edge);color:var(--text);
  border-radius:11px;padding:10px 14px;font-size:14px;outline:none;transition:border-color .15s}
.search:focus{border-color:var(--gold)}
.topright{margin-left:auto;display:flex;align-items:center;gap:9px}
.pill{border-radius:999px;padding:6px 12px;font-size:12.5px;font-weight:600;white-space:nowrap;border:1px solid transparent}
.pill.meter{background:rgba(55,211,154,.12);color:var(--green)}
.pill.bal{background:rgba(245,185,65,.13);color:var(--gold2)}

/* ---- buttons ---- */
.btn{background:var(--edge2);border:1px solid var(--edge);color:var(--text);border-radius:11px;
  padding:9px 15px;font-size:14px;font-weight:700;cursor:pointer;transition:filter .15s,transform .1s,background .15s,border-color .15s}
.btn:hover{border-color:#35435f}
.btn:active{transform:scale(.97)}
.btn.primary,.btn.gold{background:linear-gradient(180deg,var(--gold2),var(--gold));color:#1a1407;border-color:transparent;box-shadow:0 3px 12px rgba(245,185,65,.22)}
.btn.green{background:var(--green);color:#04130d;border-color:transparent}
.btn.ghost{background:transparent;color:var(--gold);border:1.5px solid var(--gold)}
.btn.primary:hover,.btn.gold:hover,.btn.green:hover{filter:brightness(1.06)}
.btn:disabled{opacity:.5;cursor:default;transform:none;filter:none}
.btn.sm{padding:7px 11px;font-size:13px;border-radius:9px}

/* ---- shell + sidebar ---- */
.shell{display:flex;align-items:flex-start;max-width:1680px;margin:0 auto}
.side{position:sticky;top:57px;width:222px;flex:0 0 222px;padding:16px 12px;height:calc(100vh - 57px);overflow:auto}
.nav{display:flex;align-items:center;gap:11px;padding:10px 13px;border-radius:11px;color:var(--dim);
  font-weight:700;font-size:14px;border-left:3px solid transparent;transition:background .15s,color .15s}
.nav:hover{background:var(--card);color:var(--text)}
.nav.active{background:var(--card);color:var(--gold2);border-left-color:var(--gold)}
.navsep{margin:18px 8px 8px;color:var(--dim);font-size:11px;text-transform:uppercase;letter-spacing:1px;font-weight:700}
.algochip{display:flex;align-items:center;gap:8px;padding:9px 13px;border-radius:11px;color:var(--dim);
  font-size:13.5px;font-weight:600;cursor:pointer;transition:background .15s,color .15s}
.algochip:hover{background:var(--card);color:var(--text)}
.algochip.on{background:rgba(245,185,65,.13);color:var(--gold2)}
.algochip.cooling{opacity:.55;cursor:default}

/* ---- main views ---- */
.view{flex:1;min-width:0;padding:20px 22px 70px;animation:fade .25s ease}
@keyframes fade{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.loading{color:var(--dim);padding:48px;text-align:center}
.h1{font-size:23px;font-weight:800;letter-spacing:-.3px;margin-bottom:16px}
.h2{font-size:16px;font-weight:700;margin:4px 0 12px}
.muted{color:var(--dim)}
.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.card{background:linear-gradient(180deg,#161d2c,var(--card));border:1px solid var(--edge);border-radius:16px;padding:18px;margin-bottom:14px}
.banner{display:flex;align-items:center;gap:11px;background:var(--bg2);border:1px solid var(--edge);
  border-left:3px solid var(--gold);border-radius:12px;padding:13px 15px;margin-bottom:18px;
  font-size:13.5px;color:#cdd6e6}
.banner b{color:var(--gold2)}
.input{width:100%;background:#0c1119;border:1px solid var(--edge);color:var(--text);border-radius:12px;
  padding:12px 14px;font-size:15px;margin-top:8px;outline:none}
.input:focus{border-color:var(--gold)}
label{font-size:13px;color:var(--dim);font-weight:600}

/* ---- video grid ---- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:20px 18px}
.vcard{cursor:pointer}
.thumb{position:relative;aspect-ratio:16/9;background:#0c1119;border:1px solid var(--edge2);border-radius:14px;
  display:flex;align-items:center;justify-content:center;color:#46506a;font-size:30px;overflow:hidden;transition:transform .15s,border-color .15s,box-shadow .15s}
.vcard:hover .thumb{transform:translateY(-3px);border-color:var(--gold);box-shadow:0 12px 28px rgba(0,0,0,.45),0 0 0 1px rgba(245,185,65,.35),0 6px 22px rgba(245,185,65,.10)}
.vcard:hover .thumb .play{color:var(--gold)}
.thumb .play{transition:color .15s}
.thumb.music{color:var(--gold)}
.thumb img.thumbimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.thumb .play{position:relative;z-index:1;text-shadow:0 2px 8px rgba(0,0,0,.55)}
.thumb .dur,.thumb .cover{z-index:1}
.thumb .dur{position:absolute;right:7px;bottom:7px;background:#000b;border-radius:6px;padding:1px 7px;font-size:11.5px;color:#dfe7f5;font-weight:600}
.thumb .cover{position:absolute;left:7px;top:7px;background:rgba(90,169,255,.18);color:var(--blue);font-size:10.5px;padding:2px 7px;border-radius:6px;font-weight:600}
.vmeta{display:flex;gap:11px;margin-top:11px}
.av{width:36px;height:36px;border-radius:50%;flex:0 0 36px;display:flex;align-items:center;justify-content:center;
  font-weight:800;color:#0a0d14;font-size:15px}
img.av{object-fit:cover;background:#0c1119}
.chanbanner{width:100%;height:150px;border-radius:16px;background-size:cover;background-position:center;border:1px solid var(--edge2)}
.chatas{font-size:11.5px;font-weight:400;color:var(--dim)}
.chatas a{color:var(--gold2);cursor:pointer;text-decoration:none}
.vtitle{font-weight:700;font-size:14.5px;line-height:1.34;max-height:39px;overflow:hidden}
.vsub{color:var(--dim);font-size:12.5px;margin-top:4px}
.tag{display:inline-flex;align-items:center;gap:4px;border-radius:999px;padding:2px 9px;font-size:11.5px;font-weight:700}
.tag.free{background:rgba(55,211,154,.15);color:var(--green)}
.tag.pay{background:rgba(245,185,65,.15);color:var(--gold2)}
.tag.music{background:rgba(90,169,255,.15);color:var(--blue)}
.tag.grow{background:rgba(245,185,65,.15);color:var(--gold2)}
.plicon{width:46px;height:46px;flex:0 0 46px;border-radius:11px;background:rgba(245,185,65,.13);display:flex;align-items:center;justify-content:center;font-size:20px}
/* ---- "up next" related list (under the chat) ---- */
.rellist{margin-top:4px}
.relcard{display:flex;gap:10px;padding:7px;border-radius:11px;cursor:pointer;transition:background .12s}
.relcard:hover{background:var(--card)}
.relthumb{position:relative;width:120px;flex:0 0 120px;aspect-ratio:16/9;background:#0c1119;border:1px solid var(--edge2);border-radius:9px;overflow:hidden;display:flex;align-items:center;justify-content:center;color:#46506a}
.relthumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.relthumb .reldur{position:absolute;right:4px;bottom:4px;z-index:1;background:#000b;border-radius:5px;padding:0 5px;font-size:10.5px;color:#dfe7f5;font-weight:600}
.relmeta{min-width:0;flex:1;display:flex;flex-direction:column;justify-content:center}
.reltitle{font-weight:700;font-size:13px;line-height:1.3;max-height:34px;overflow:hidden}
/* ---- premiere waiting screen ---- */
.premwait{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#000}
.premwait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.35}
.premover{position:relative;z-index:1;text-align:center;display:flex;flex-direction:column;align-items:center;gap:9px;padding:18px}
.premcount{font-size:42px;font-weight:800;letter-spacing:1px;color:#fff;font-variant-numeric:tabular-nums;text-shadow:0 2px 12px rgba(0,0,0,.6)}

/* ---- watch page ---- */
.watch{display:grid;grid-template-columns:1fr 340px;gap:20px}
.player{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:16px;overflow:hidden;display:flex;align-items:center;justify-content:center;border:1px solid var(--edge2)}
.liveconnecting{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:8px;color:var(--dim);font-size:14px;background:#000;z-index:2;pointer-events:none}
.player video,.player iframe{width:100%;height:100%;border:0;background:#000}
.paybar{display:flex;align-items:center;gap:12px;margin-top:14px;background:var(--card);border:1px solid var(--edge);
  border-left:3px solid var(--green);border-radius:13px;padding:13px 15px;flex-wrap:wrap;font-size:13.5px}
.paybar .big{font-size:15px;font-weight:800;color:var(--gold2)}
.vctrl{display:flex;align-items:center;gap:10px;margin-top:8px}
.vprog{flex:1;height:7px;background:var(--edge2);border-radius:5px;cursor:pointer;overflow:hidden;position:relative}
.chapmark{position:absolute;top:0;bottom:0;width:2px;background:rgba(255,210,119,.75);z-index:1;pointer-events:none}
.vprog:hover{height:9px}
.vfill{height:100%;width:0;background:var(--gold);border-radius:5px;transition:width .15s linear}
.vtime{font-size:12px;color:var(--dim);font-variant-numeric:tabular-nums;white-space:nowrap}
.qsel{background:#0c1119;border:1px solid var(--edge);color:var(--text);border-radius:8px;padding:6px 9px;font-size:12.5px;outline:none;cursor:pointer}
.qsel:focus{border-color:var(--gold)}
.chatbox{background:var(--card);border:1px solid var(--edge);border-radius:16px;display:flex;flex-direction:column;height:540px;overflow:hidden}
.chathead{padding:12px 14px;border-bottom:1px solid var(--edge);font-weight:700;font-size:14px;display:flex;align-items:center;gap:8px}
.chathead .dot{width:8px;height:8px;border-radius:50%;background:var(--green)}
.chatlog{flex:1;overflow:auto;padding:13px;display:flex;flex-direction:column;gap:10px}
.cmsg{font-size:13.5px;line-height:1.4}.cmsg .nm{color:var(--blue);font-weight:700}
.cmsg .nm.tier-bronze{color:#d98a4f;font-weight:800}
.cmsg .nm.tier-silver{color:#cdd6e6;font-weight:800}
.cmsg .nm.tier-gold{color:var(--gold2);font-weight:800}
/* ---- big-tip alert overlay (on the live player) ---- */
.tipalert{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.85);z-index:5;display:flex;flex-direction:column;
  align-items:center;gap:6px;padding:18px 26px;background:rgba(11,14,20,.85);border:2px solid var(--gold);border-radius:18px;
  box-shadow:0 14px 50px rgba(0,0,0,.6);text-align:center;max-width:80%;animation:tipin .45s cubic-bezier(.2,1.4,.4,1) forwards}
.tipalert.out{animation:tipout .5s ease forwards}
@keyframes tipin{to{transform:translate(-50%,-50%) scale(1)}}
@keyframes tipout{to{opacity:0;transform:translate(-50%,-50%) scale(.9)}}
.tipalert .tipimg{width:84px;height:84px;object-fit:cover;border-radius:12px}
.tipalert .tipicon{font-size:54px}
.tipalert .tipname{font-weight:800;font-size:19px;color:var(--gold2)}
.tipalert .tipamt{font-weight:700;font-size:16px;color:#fff}
.cmsg.mega{background:rgba(245,185,65,.1);border-left:3px solid var(--gold);border-radius:9px;padding:8px 10px}
.cmsg.mega .nm{color:var(--gold2)}
.cmsg.system{color:var(--gold2);font-size:12px;font-style:italic;opacity:.85}
.cmsg .modtools{float:right;display:inline-flex;gap:2px;margin-left:6px;opacity:0;transition:opacity .12s}
.cmsg:hover .modtools{opacity:1}
.modbtn{background:transparent;border:0;color:var(--dim);cursor:pointer;font-size:12px;line-height:1;padding:1px 3px;border-radius:6px}
.modbtn:hover{color:var(--red);background:rgba(255,111,111,.12)}
.howto{margin:8px 0 6px;padding-left:18px;font-size:12.5px;color:var(--dim);line-height:1.5}
.howto li{margin-bottom:6px}.howto b{color:var(--text)}
.chatin{display:flex;gap:8px;padding:11px;border-top:1px solid var(--edge)}
.chatin input{flex:1;background:#0c1119;border:1px solid var(--edge);color:var(--text);border-radius:10px;padding:10px 12px;font-size:13.5px;outline:none}
.chatin input:focus{border-color:var(--gold)}

/* ---- live ---- */
.liverow{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:20px 18px;margin-bottom:6px}
.thumb.live{border-color:var(--red);background:#160c0f}
.livebadge{position:absolute;left:8px;top:8px;background:var(--red);color:#fff;font-size:11px;font-weight:800;
  letter-spacing:.5px;padding:3px 9px;border-radius:7px;box-shadow:0 2px 10px rgba(255,111,111,.45);animation:livepulse 1.6s infinite}
@keyframes livepulse{0%,100%{opacity:1}50%{opacity:.5}}
.thumb .viewers{position:absolute;right:7px;bottom:7px;background:#000b;border-radius:6px;padding:1px 7px;font-size:11.5px;color:#dfe7f5;font-weight:600}
#preview,#livevid{width:100%;height:100%;object-fit:contain;background:#000}
.memberlock{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;background:radial-gradient(circle at 50% 40%,rgba(245,185,65,.08),#0c1119)}

/* ---- notification bell ---- */
.bell{cursor:pointer;position:relative;border:1px solid var(--edge);background:#141b27;font-size:15px;line-height:1;display:inline-flex;align-items:center}
.bellcount{display:none;position:absolute;top:-6px;right:-6px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;
  background:var(--red);color:#fff;font-size:10.5px;font-weight:800;line-height:16px;text-align:center}

/* ---- topic chips ---- */
.topicchip{display:inline-block;padding:4px 10px;border-radius:999px;border:1px solid var(--edge);background:#141b27;
  font-size:12.5px;color:var(--blue);cursor:pointer;line-height:1.4}
.topicchip:hover{border-color:var(--blue)}
.trending{margin:6px 0 18px}     /* clear gap below the trending chips so they don't crowd the banner */

/* ---- resume "continue watching" bar ---- */
.resumebar{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(255,255,255,.18)}
.resumefill{height:100%;background:var(--red)}

/* ---- analytics 30-day bar chart ---- */
.achart{display:flex;align-items:flex-end;gap:3px;height:90px}
.abar{flex:1;display:flex;align-items:flex-end;height:100%;background:#0c1119;border-radius:3px 3px 0 0;overflow:hidden}
.abarfill{width:100%;background:linear-gradient(180deg,var(--gold2),var(--gold));min-height:2px;border-radius:3px 3px 0 0}

/* ---- comments ---- */
.cmtcompose{display:flex;gap:8px;margin-bottom:16px}
.cmtcompose .input{margin:0;flex:1}
.cmt{padding:10px 0;border-top:1px solid var(--edge)}
.cmthead{display:flex;align-items:center;gap:6px;font-size:13.5px}
.cmtbody{margin:4px 0;font-size:14px;line-height:1.5;white-space:pre-wrap;word-break:break-word}
.cmtfoot{font-size:12px;color:var(--muted)}
.cmtfoot a{color:var(--blue);cursor:pointer;margin-right:2px}
.cmtfoot a.liked{color:var(--gold2);font-weight:700}
#comments{max-width:760px}
.cmtreplies{margin:6px 0 0 18px;padding-left:12px;border-left:2px solid var(--edge)}
.cmtreplies .cmt{border-top:none;padding:7px 0}

/* ---- chapters ---- */
.chapters{margin-top:10px;display:flex;flex-direction:column;gap:2px;max-width:520px}
.chapter{display:flex;gap:12px;align-items:baseline;padding:6px 10px;border-radius:9px;cursor:pointer;transition:background .12s}
.chapter:hover{background:var(--card)}
.chaptime{color:var(--gold2);font-weight:700;font-size:12.5px;font-variant-numeric:tabular-nums;min-width:46px}
.chaptitle{font-size:13.5px}

/* ---- crowdfunding goal bar ---- */
.goalbar{background:#141b27;border:1px solid var(--edge);border-radius:12px;padding:11px 14px;margin:0 0 14px}
.goalhead{display:flex;justify-content:space-between;gap:10px;font-size:13.5px;margin-bottom:7px;flex-wrap:wrap}
.goaltrack{height:10px;border-radius:6px;background:#0c1119;overflow:hidden}
.goalfill{height:100%;border-radius:6px;background:linear-gradient(90deg,var(--gold),var(--gold2));transition:width .5s ease}

/* ---- community polls ---- */
.poll{margin-top:10px;display:flex;flex-direction:column;gap:7px}
.pollopt{position:relative;border:1px solid var(--edge);border-radius:9px;padding:9px 12px;cursor:pointer;overflow:hidden;display:flex;justify-content:space-between;gap:10px;font-size:14px}
.pollopt:hover{border-color:var(--gold2)}
.pollopt.mine{border-color:var(--gold2)}
.pollfill{position:absolute;inset:0;background:rgba(245,185,65,.14);width:0;transition:width .5s ease;z-index:0}
.polltext,.pollpct{position:relative;z-index:1}
.pollpct{color:var(--muted);font-variant-numeric:tabular-nums}

/* ---- "why this?" thumbnail button + modal ---- */
.thumb .whybtn{position:absolute;top:6px;right:6px;width:24px;height:24px;border-radius:50%;border:none;
  background:rgba(8,12,18,.7);color:#cdd6e6;font-size:13px;cursor:pointer;opacity:0;transition:opacity .15s;z-index:3}
.vcard:hover .whybtn{opacity:1}
.thumb .whybtn:hover{background:rgba(8,12,18,.95);color:var(--gold2)}
.modal-backdrop{position:fixed;inset:0;background:rgba(4,7,11,.66);display:flex;align-items:center;justify-content:center;z-index:80;padding:18px}
.modal{background:#141b27;border:1px solid var(--edge);border-radius:16px;padding:20px 22px;max-width:480px;width:100%;box-shadow:0 18px 50px rgba(0,0,0,.55)}
.whylist{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.whylist li{background:#0f1420;border:1px solid var(--edge);border-radius:9px;padding:9px 12px;font-size:13.5px;line-height:1.45}

/* ---- mobile bottom navigation (the sidebar is hidden on small screens) ---- */
.bottomnav{display:none;position:fixed;left:0;right:0;bottom:0;z-index:40;
  background:rgba(12,16,24,.94);backdrop-filter:blur(10px);border-top:1px solid var(--edge2);
  padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
.bottomnav .bn{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px;
  border-radius:10px;color:var(--dim);font-size:10.5px;font-weight:700}
.bottomnav .bn .bni{font-size:19px;line-height:1}
.bottomnav .bn.active{color:var(--gold2)}
.bottomnav-inner{display:flex;max-width:560px;margin:0 auto}

@media(max-width:920px){
  .watch{grid-template-columns:1fr}
  .side{display:none}
  .shell{display:block}
  .bottomnav{display:block}
  .view{padding:14px 12px 92px}                        /* room for the bottom nav */
  .top{padding:10px 12px;gap:10px}
  .brand{font-size:16px}
  .brand .brandword{display:none}                      /* logo only — search gets the space */
  .pill.meter,.pill.bal{display:none}                  /* header stays uncluttered on phones */
  .grid,.liverow{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px 12px}
  .h1{font-size:19px}
  .chatbox{height:420px}
  .chanbanner{height:104px}
  .modal{max-height:82vh;overflow:auto}
  .toast{bottom:88px}                                  /* above the bottom nav */
}
@media(max-width:480px){
  .grid,.liverow{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .btn{padding:8px 12px;font-size:13px}
}

/* ---- toast ---- */
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(130%);background:#1b2333;
  border:1px solid var(--edge);border-radius:12px;padding:12px 17px;font-size:14px;z-index:60;
  transition:transform .25s,opacity .25s,visibility .25s;max-width:90vw;box-shadow:0 12px 34px rgba(0,0,0,.5);
  opacity:0;visibility:hidden;pointer-events:none}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1;visibility:visible;pointer-events:auto}
.toast.ok{border-color:#1f5a44;color:var(--green)}.toast.bad{border-color:#5a2630;color:var(--red)}