:root{color-scheme:dark;--gold:#b9a05a;--gold2:#c5af73;--ink:#050505;--panel:#111318;--line:rgba(255,255,255,.13)}
*{box-sizing:border-box}html,body{margin:0;height:100%;background:#050505;color:#fff;font-family:Inter,Arial,sans-serif;overflow:hidden}button,input,textarea{font:inherit}
.reels-head{position:fixed;z-index:20;top:0;left:0;right:0;height:58px;padding:max(8px,env(safe-area-inset-top)) 15px 8px;display:grid;grid-template-columns:42px 1fr 42px;align-items:end;background:linear-gradient(#050505,transparent);pointer-events:none}.reels-head a,.reels-head strong,.reels-head span{pointer-events:auto}.reels-head a{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;text-decoration:none;font-size:22px}.reels-head strong{text-align:center;font-size:14px;letter-spacing:.08em}.reels-head span{align-self:center;color:var(--gold2);font-size:10px;font-weight:900}
.reels{height:100%;overflow-y:auto;scroll-snap-type:y mandatory;overscroll-behavior-y:contain;scrollbar-width:none}.reels::-webkit-scrollbar{display:none}.reel{position:relative;height:100dvh;min-height:520px;scroll-snap-align:start;scroll-snap-stop:always;background:#050505;overflow:hidden}.reel>video{width:100%;height:100%;object-fit:contain;background:#050505}.reel-gradient{position:absolute;inset:35% 0 0;pointer-events:none;background:linear-gradient(transparent,rgba(0,0,0,.12) 25%,rgba(0,0,0,.86))}
.sound{position:absolute;z-index:3;top:70px;right:16px;width:42px;height:42px;border:1px solid var(--line);border-radius:50%;background:rgba(0,0,0,.54);color:#fff;cursor:pointer}.reel-copy{position:absolute;z-index:2;left:17px;right:92px;bottom:max(23px,env(safe-area-inset-bottom))}.reel-copy b{color:var(--gold2);font-size:13px}.reel-copy h1{margin:8px 0 0;font-size:clamp(17px,4.8vw,24px);line-height:1.3;text-shadow:0 2px 12px #000}
.reel-actions{position:absolute;z-index:3;right:10px;bottom:max(20px,env(safe-area-inset-bottom));display:grid;gap:16px;text-align:center}.reel-actions button,.reel-actions .views{display:grid;place-items:center;gap:3px;width:72px;padding:0;border:0;background:transparent;color:#fff;cursor:pointer}.reel-actions span{display:grid;place-items:center;width:48px;height:48px;border:1px solid var(--line);border-radius:50%;background:rgba(0,0,0,.62);font-size:25px}.reel-actions b{font-size:12px}.reel-actions small{font-size:9px;color:#ddd}.reel-actions .like.active span{color:#211b10;background:var(--gold);border-color:var(--gold)}
.comment-sheet{position:absolute;z-index:10;left:0;right:0;bottom:0;height:min(72%,650px);display:grid;grid-template-rows:auto 1fr auto;background:rgba(12,14,18,.98);border-radius:24px 24px 0 0;transform:translateY(105%);transition:transform .28s ease;box-shadow:0 -20px 50px rgba(0,0,0,.5)}.comment-sheet.open{transform:none}.comment-head{display:flex;align-items:center;justify-content:space-between;padding:15px 18px;border-bottom:1px solid var(--line)}.comment-head button{width:36px;height:36px;border:0;border-radius:50%;background:#272b32;color:#fff;font-size:25px}.comment-list{overflow:auto;padding:5px 18px}.comment{padding:13px 0;border-bottom:1px solid rgba(255,255,255,.08)}.comment b{font-size:12px;color:var(--gold2)}.comment p{margin:5px 0 0;line-height:1.45;font-size:14px}.no-comments{padding:30px 0;text-align:center;color:#999}.comment-form{display:grid;grid-template-columns:120px 1fr auto;gap:7px;padding:10px max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom));border-top:1px solid var(--line)}.comment-form input,.comment-form textarea{min-width:0;border:1px solid var(--line);border-radius:12px;background:#1b1f26;color:#fff;padding:10px;resize:none}.comment-form textarea{height:44px}.comment-form button,.reels-empty a{border:0;border-radius:12px;background:var(--gold);color:#211b10;font-weight:900;padding:10px 15px;text-decoration:none}.toast{position:fixed;z-index:40;left:50%;bottom:30px;transform:translate(-50%,25px);padding:10px 16px;border-radius:999px;background:#fff;color:#111;font-size:13px;opacity:0;transition:.2s;pointer-events:none}.toast.show{opacity:1;transform:translate(-50%,0)}
.reels-empty{height:100%;display:grid;place-content:center;text-align:center;padding:25px}.reels-empty h1{margin:0}.reels-empty p{color:#aaa;max-width:440px}.reels-empty a{justify-self:center}
@media(min-width:760px){.reel{width:min(100%,560px);margin:auto;border-left:1px solid var(--line);border-right:1px solid var(--line)}.reels-head{width:min(100%,560px);margin:auto}.comment-form{grid-template-columns:130px 1fr auto}}
@media(max-width:520px){.comment-form{grid-template-columns:1fr auto}.comment-form input{grid-column:1/-1}.reel-actions{gap:12px}.reel-actions span{width:44px;height:44px}.reel-actions button,.reel-actions .views{width:66px}}
@media(prefers-reduced-motion:reduce){.comment-sheet,.toast{transition:none}}

/* ONFIX UNIVERSAL LIGHT OVERRIDE 2026-09-17 */
html{color-scheme:light!important;background:#fff!important}body{background-color:#fff!important;color:#111!important;background-image:none!important}
body button,body .btn,body a.btn,body input[type=submit],body input[type=button],body [class*="button"],body [class*="-btn"]{background:#fff!important;background-image:none!important;color:#111!important;border:1px solid #111!important;box-shadow:none!important}
body input,body select,body textarea{background:#fff!important;color:#111!important;border-color:#111!important}

/* =========================================================
   ONFIX VIDEO CONTROLS — 2026-09-19
   Separate transparent glass buttons + expressive colors.
   Loaded last by videos.php so global light-theme button rules
   do not turn the reel controls into white boxes.
   ========================================================= */
body .sound{
  width:48px !important;
  height:48px !important;
  padding:0 !important;
  display:grid !important;
  place-items:center !important;
  border-radius:50% !important;
  border:1px solid rgba(255,255,255,.34) !important;
  background:rgba(8,10,14,.34) !important;
  color:#fff !important;
  box-shadow:0 10px 28px rgba(0,0,0,.26) !important;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  transition:transform .18s ease,background .18s ease,border-color .18s ease !important;
}
body .sound.is-on{
  background:rgba(46,204,113,.22) !important;
  border-color:rgba(102,255,166,.72) !important;
}
body .sound.is-off{
  background:rgba(255,75,95,.20) !important;
  border-color:rgba(255,120,135,.72) !important;
}
body .sound:hover{transform:scale(1.05)}

.reel-actions{gap:10px !important}
body .reel-actions .reel-action{
  width:72px !important;
  min-height:70px !important;
  padding:7px 5px !important;
  border-radius:18px !important;
  border:1px solid rgba(255,255,255,.24) !important;
  background:rgba(8,10,14,.30) !important;
  color:#fff !important;
  box-shadow:0 10px 26px rgba(0,0,0,.20) !important;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  display:grid !important;
  place-items:center !important;
  align-content:center !important;
  gap:3px !important;
  transition:transform .18s ease,background .18s ease,border-color .18s ease !important;
}
body .reel-actions button.reel-action:hover{
  transform:translateY(-2px) scale(1.02);
  background:rgba(15,18,24,.44) !important;
  border-color:rgba(255,255,255,.44) !important;
}
.reel-actions .reel-action span{
  width:42px !important;
  height:42px !important;
  border-radius:50% !important;
  border:1px solid currentColor !important;
  background:rgba(255,255,255,.045) !important;
  font-size:24px !important;
}
.reel-actions .reel-action b{font-size:12px !important;line-height:1.05 !important}
.reel-actions .reel-action small{font-size:9px !important;line-height:1.05 !important;color:rgba(255,255,255,.90) !important}

body .reel-actions .reel-action--like{
  color:#ff5577 !important;
  border-color:rgba(255,85,119,.38) !important;
  background:rgba(255,85,119,.11) !important;
}
body .reel-actions .reel-action--comment{
  color:#54b7ff !important;
  border-color:rgba(84,183,255,.38) !important;
  background:rgba(84,183,255,.11) !important;
}
body .reel-actions .reel-action--share{
  color:#ffd166 !important;
  border-color:rgba(255,209,102,.40) !important;
  background:rgba(255,209,102,.11) !important;
}
body .reel-actions .reel-action--views{
  color:#78e89b !important;
  border-color:rgba(120,232,155,.38) !important;
  background:rgba(120,232,155,.11) !important;
  cursor:default !important;
}
body .reel-actions .like.active{
  color:#fff !important;
  border-color:rgba(255,85,119,.86) !important;
  background:rgba(255,64,104,.34) !important;
}
body .reel-actions .like.active span{
  background:#ff5577 !important;
  color:#fff !important;
  border-color:#ff9aae !important;
}

/* Keep comment controls dark/readable even with the site-wide light theme. */
body .comment-head button{
  background:#272b32 !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.14) !important;
}
body .comment-form input,
body .comment-form textarea{
  background:#1b1f26 !important;
  color:#fff !important;
  border-color:rgba(255,255,255,.16) !important;
}
body .comment-form button{
  background:var(--gold) !important;
  color:#211b10 !important;
  border:0 !important;
}

@media(max-width:520px){
  body .reel-actions .reel-action{
    width:64px !important;
    min-height:64px !important;
    border-radius:16px !important;
    padding:6px 4px !important;
  }
  .reel-actions .reel-action span{
    width:38px !important;
    height:38px !important;
    font-size:22px !important;
  }
  body .sound{width:46px !important;height:46px !important}
}