:root{--color-background:#0a0a0a;--color-surface:#1a1a1a;--color-surface-hover:#262626;--color-border:#2a2a2a;--color-border-hover:#404040;
--color-primary:#10b981;--color-primary-hover:#059669;--color-primary-foreground:#0a0a0a;--color-text-primary:#fafafa;--color-text-secondary:#a1a1aa;
--color-text-muted:#71717a;--color-error:#ef4444;--color-warning:#f59e0b;--radius-md:.375rem;--radius-lg:.5rem;--radius-xl:.75rem}
*{box-sizing:border-box}html{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif}
body{margin:0;background:var(--color-background);color:var(--color-text-primary)}a{color:inherit}
.nav{border-bottom:1px solid var(--color-border);position:sticky;top:0;background:#0a0a0aee;backdrop-filter:blur(8px);z-index:10}
.nav__in{max-width:1400px;margin:auto;display:flex;align-items:center;gap:1.5rem;padding:.75rem 1rem}
.brand{display:flex;gap:.5rem;align-items:center;font-weight:700;font-size:1.25rem;text-decoration:none}
.nav__links{display:flex;gap:1rem}.nav__links a{text-decoration:none;color:var(--color-text-secondary);font-size:.9rem}.nav__links a.active,.nav__links a:hover{color:var(--color-text-primary)}
.nav__auth{margin-left:auto;display:flex;gap:.5rem;align-items:center;font-size:.85rem;color:var(--color-text-secondary)}
.btn{border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text-primary);padding:.5rem .9rem;border-radius:var(--radius-lg);cursor:pointer;font-size:.85rem;text-decoration:none;display:inline-flex;gap:.4rem;align-items:center}
.btn:hover{background:var(--color-surface-hover)}.btn--primary{background:var(--color-primary);color:var(--color-primary-foreground);border-color:transparent;font-weight:600}
.btn--primary:hover{background:var(--color-primary-hover)}.btn--outline{background:transparent;border-color:var(--color-primary)}.btn--danger{background:#ef44441a;color:var(--color-error);border-color:#ef444455}
.btn--sm{padding:.3rem .6rem;font-size:.78rem}
main{max-width:1400px;margin:auto;padding:1.25rem 1rem}
.watch{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:1.25rem}
.player{position:relative;aspect-ratio:16/9;background:#000;border-radius:var(--radius-xl);overflow:hidden;border:1px solid var(--color-border)}
.player iframe,.player video{position:absolute;inset:0;width:100%;height:100%;border:0}
.player--tall{aspect-ratio:9/12;max-height:80vh;margin:auto}
.unmute{position:absolute;left:1rem;bottom:1rem;z-index:3}
.vt{font-size:1.3rem;margin:.9rem 0 .3rem}.meta{color:var(--color-text-secondary);font-size:.85rem;display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
.badge{background:#10b9811f;color:var(--color-primary);border:1px solid #10b98155;border-radius:999px;padding:.1rem .55rem;font-size:.72rem;text-transform:uppercase;letter-spacing:.03em}
.badge--pending{background:#f59e0b1f;color:var(--color-warning);border-color:#f59e0b55}.badge--rejected{background:#ef44441f;color:var(--color-error);border-color:#ef444455}
.side h3{margin:0 0 .75rem;font-size:1rem;color:var(--color-text-secondary)}
.item{display:flex;gap:.7rem;padding:.45rem;border-radius:var(--radius-lg);cursor:pointer;border:1px solid transparent}
.item:hover{background:var(--color-surface)}.item.on{border-color:var(--color-primary);background:var(--color-surface)}
.thumb{width:160px;flex:none;aspect-ratio:16/9;border-radius:var(--radius-md);background:var(--color-surface-hover) center/cover;display:grid;place-items:center;color:var(--color-text-muted);font-size:.75rem;text-transform:uppercase}
.item b{font-size:.88rem;font-weight:600;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.item small{color:var(--color-text-muted);display:block;margin-top:.3rem}
.card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:1.5rem;max-width:560px;margin:2rem auto}
.card h2{margin-top:0}label{display:block;font-size:.85rem;color:var(--color-text-secondary);margin:.8rem 0 .3rem}
input,select,textarea{width:100%;background:var(--color-background);border:1px solid var(--color-border);color:var(--color-text-primary);border-radius:var(--radius-lg);padding:.6rem .7rem;font:inherit}
input:focus{outline:none;border-color:var(--color-primary)}.row{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}.mt{margin-top:1rem}
.err{color:var(--color-error);font-size:.85rem}.ok{color:var(--color-primary);font-size:.85rem}.muted{color:var(--color-text-muted);font-size:.85rem}
.chips{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.5rem}.chip{font-size:.72rem;border:1px solid var(--color-border);border-radius:999px;padding:.15rem .55rem;color:var(--color-text-secondary)}
table{width:100%;border-collapse:collapse;font-size:.85rem}th,td{text-align:left;padding:.6rem;border-bottom:1px solid var(--color-border);vertical-align:middle}th{color:var(--color-text-muted);font-weight:500}
.adm .thumb{width:110px}.tabs{display:flex;gap:.4rem;margin:1rem 0}.tabs .btn.on{border-color:var(--color-primary);color:var(--color-primary)}
.linkout{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:2rem;color:var(--color-text-secondary)}
@media (max-width:900px){.watch{grid-template-columns:1fr}.thumb{width:140px}.nav__in{gap:.75rem;flex-wrap:wrap}.nav__auth{font-size:.75rem}.adm{overflow-x:auto}}
.stack{display:flex;flex-direction:column;gap:.6rem;margin-top:1rem}.btn--social{justify-content:center;padding:.7rem;font-size:.95rem}
.or{display:flex;align-items:center;gap:.6rem;color:var(--color-text-muted);font-size:.8rem;margin:1.2rem 0 0}.or:before,.or:after{content:"";flex:1;border-top:1px solid var(--color-border)}
.mock{margin-top:1rem;padding:.8rem;border:1px dashed var(--color-warning);border-radius:var(--radius-lg);font-size:.85rem}
.react .btn.on{border-color:var(--color-primary);color:var(--color-primary)}.btn:disabled{opacity:.55;cursor:not-allowed}
.comments{margin-top:1.2rem}.comments h3{font-size:1rem}.cm{border-bottom:1px solid var(--color-border);padding:.6rem 0}.cm p{margin:.25rem 0 0;font-size:.9rem;color:var(--color-text-secondary)}.cm .del{margin-left:.5rem;font-size:.75rem}
.thread{border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:.7rem;margin:.6rem 0}
.bubble{padding:.5rem .7rem;border-radius:var(--radius-lg);margin:.4rem 0;max-width:85%}.bubble p{margin:.2rem 0 0;font-size:.9rem}.bubble small{color:var(--color-text-muted)}
.bubble.staff{background:var(--color-surface-hover)}.bubble.me{background:#10b9811f;margin-left:auto}
.threads{display:grid;grid-template-columns:340px 1fr;gap:1rem}@media (max-width:900px){.threads{grid-template-columns:1fr}}
.foot__x{color:inherit;text-decoration:none;transition:color .15s,opacity .15s}.foot__x:hover{color:var(--color-text,#fff);text-decoration:underline;text-underline-offset:2px}

/* Up next: fixed-height paged list + sort toggle */
.up__hd{display:flex;align-items:center;justify-content:space-between;gap:8px}
.sorttg{display:inline-flex;border:1px solid var(--color-border);border-radius:999px;overflow:hidden}
.sorttg button{background:none;border:0;color:var(--color-text-muted,#8a93a6);font-size:11px;padding:3px 9px;cursor:pointer;letter-spacing:.02em}
.sorttg button.on{background:rgba(47,107,255,.18);color:var(--color-text,#fff)}
.up__list{overflow:hidden;display:flex;flex-direction:column}
.up__list .item{flex:0 0 auto}
.up--in{animation:upIn .28s ease-out}.up--back{animation:upBack .28s ease-out}
@keyframes upIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes upBack{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
.up__nav{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:8px;font-size:12px}
.up__btn{background:none;border:1px solid var(--color-border);color:var(--color-text-muted,#8a93a6);border-radius:999px;padding:3px 10px;font-size:12px;cursor:pointer}
.up__btn:hover:not(:disabled){color:var(--color-text,#fff);border-color:rgba(47,107,255,.6)}.up__btn:disabled{opacity:.35;cursor:default}
.up__pg{color:var(--color-text-muted,#8a93a6);font-size:11px}
.up__all{display:block;text-align:right;font-size:12px;margin-top:6px;color:var(--color-text-muted,#8a93a6);text-decoration:none}.up__all:hover{color:var(--color-text,#fff)}
.vg__hd{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.vg__tools{display:flex;gap:8px;align-items:center}.vg__tools input{min-width:200px}
.vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.vcard{display:flex;flex-direction:column;gap:6px;color:inherit;text-decoration:none}.vcard .thumb{width:100%;aspect-ratio:16/9;height:auto;border-radius:10px}
.vcard b{font-size:13px;line-height:1.3}.vcard small{color:var(--color-text-muted,#8a93a6);font-size:11px}.vcard:hover b{color:#6f9bff}
.up__list .thumb{width:96px}.up__list .item{padding:.3rem .45rem;height:66px;box-sizing:border-box;align-items:center}
.up__list .item b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:.82rem;line-height:1.25}
.up__list .item small{font-size:.68rem}.up__list .item small+small{display:none}
.up__list{height:calc(7 * 66px)}

/* ---- 3-column watch layout: socials LEFT ~22% · player MIDDLE ~56% · Up Next RIGHT ~22% ---- */
.watch--3{grid-template-columns:minmax(0,22fr) minmax(0,56fr) minmax(0,22fr);grid-template-areas:"rail main side";align-items:start}
.watch--3>.rail{grid-area:rail;margin-top:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.watch--3>.panel--main{grid-area:main}
.watch--3>.side{grid-area:side;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.watch--3 .rail__hd{flex-direction:column;align-items:flex-start;gap:.2rem}
.watch--3 .rail__grid{grid-template-columns:1fr;gap:.9rem}
.watch--3 .pc{padding:1.05rem 1.05rem .9rem;gap:.65rem}
.watch--3 .pc__thumb{aspect-ratio:16/9;border-radius:12px}
.watch--3 .pc__body,.watch--3 .pc--x .pc__body{font-size:1rem;line-height:1.42}
.watch--3 .pc__name b{font-size:1rem}
.watch--3 .up__list .thumb{width:88px}
@media (max-width:1100px){
  .watch--3{grid-template-columns:minmax(0,1fr) 320px;grid-template-areas:"main side" "rail rail"}
  .watch--3>.rail{max-height:none!important;overflow:visible}
  .watch--3 .rail__grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
  .watch--3 .rail__hd{flex-direction:row;align-items:baseline}
}
@media (max-width:900px){
  .watch--3{grid-template-columns:1fr;grid-template-areas:"main" "side" "rail"}
  .watch--3>.side{max-height:none!important;overflow:visible}
  .watch--3 .up__list .thumb{width:120px}
}
/* v2: Up Next fills the balanced column; 7 rows share the height evenly, paging pinned at bottom */
@media (min-width:1101px){
  .watch--3>.side{display:flex;flex-direction:column;overflow:hidden}
  .watch--3>.side .up__list{flex:1 1 auto;height:auto;min-height:0;display:grid;grid-template-rows:repeat(7,minmax(0,1fr));gap:2px}
  .watch--3>.side .up__list .item{height:auto;min-height:0;overflow:hidden}
  .watch--3>.side .up__list .thumb{width:auto;height:calc(100% - 4px);max-height:72px;aspect-ratio:16/9}
  .watch--3>.side .up__nav{margin-top:auto;padding-top:8px}
  .watch--3>.side #pods{display:none}
}