/* ============================================================
   Zividax Live — Premium Dark UI
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Space+Grotesk:wght@500;700&display=swap');

:root {
  --z-bg:          #07080f;
  --z-surface:     #0e1019;
  --z-card:        #141620;
  --z-border:      rgba(255,255,255,.07);
  --z-red:         #e8274b;
  --z-red-glow:    rgba(232,39,75,.35);
  --z-gold:        #f5c842;
  --z-gold-glow:   rgba(245,200,66,.28);
  --z-purple:      #7c4dff;
  --z-cyan:        #00d4ff;
  --z-text:        #f0f1f5;
  --z-muted:       #6b7280;
  --z-radius:      14px;
  --z-radius-lg:   22px;
  --z-font:        'Inter', system-ui, sans-serif;
  --z-display:     'Space Grotesk', sans-serif;
  --z-transition:  .18s cubic-bezier(.4,0,.2,1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--z-font);
  background: var(--z-bg);
  color: var(--z-text);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* ── No-screenshot layer ──────────────────────────────── */
body { -webkit-user-select: none; user-select: none; }
/* CSS-level deterrent (JS does more) */

/* ── Typography ───────────────────────────────────────── */
h1,h2,h3,h4 { font-family: var(--z-display); font-weight: 700; letter-spacing: -.02em; }

/* ── Buttons ──────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .7rem 1.5rem; border-radius: var(--z-radius);
  font-family: var(--z-font); font-weight: 600; font-size: .9rem;
  border: none; cursor: pointer; transition: var(--z-transition);
  text-decoration: none; white-space: nowrap;
}
.btn-red {
  background: var(--z-red);
  color: #fff;
  box-shadow: 0 0 20px var(--z-red-glow);
}
.btn-red:hover  { filter: brightness(1.1); box-shadow: 0 0 32px var(--z-red-glow); }
.btn-ghost {
  background: transparent; border: 1px solid var(--z-border); color: var(--z-muted);
}
.btn-ghost:hover { border-color: var(--z-red); color: var(--z-text); }
.btn-gold {
  background: linear-gradient(135deg,#f5c842,#f09819);
  color: #000; font-weight: 700;
  box-shadow: 0 0 24px var(--z-gold-glow);
}
.btn-gold:hover { filter: brightness(1.08); }
.btn-sm { padding: .45rem 1rem; font-size: .8rem; }
.btn-full { width: 100%; justify-content: center; }
.btn:disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }

/* ── Cards ────────────────────────────────────────────── */
.card {
  background: var(--z-card);
  border: 1px solid var(--z-border);
  border-radius: var(--z-radius-lg);
  padding: 1.75rem;
}

/* ── Inputs ───────────────────────────────────────────── */
.field { margin-bottom: 1.2rem; }
.field label { display: block; font-size: .8rem; color: var(--z-muted); margin-bottom: .45rem; text-transform: uppercase; letter-spacing: .06em; }
.field input, .field select, .field textarea {
  width: 100%; padding: .85rem 1.1rem;
  background: var(--z-surface); border: 1.5px solid var(--z-border);
  border-radius: var(--z-radius); color: var(--z-text);
  font-family: var(--z-font); font-size: .95rem; outline: none;
  transition: border-color var(--z-transition);
}
.field input:focus, .field select:focus {
  border-color: var(--z-red);
  box-shadow: 0 0 0 3px var(--z-red-glow);
}

/* ── Badge ────────────────────────────────────────────── */
.badge {
  display: inline-block; padding: .22rem .7rem;
  border-radius: 50px; font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em;
}
.badge-live { background: var(--z-red); color: #fff; animation: pulse-badge 1.4s infinite; }
@keyframes pulse-badge { 0%,100%{opacity:1} 50%{opacity:.6} }
.badge-gold   { background: var(--z-gold); color: #000; }
.badge-purple { background: var(--z-purple); color: #fff; }

/* ── Navbar ───────────────────────────────────────────── */
.navbar {
  position: sticky; top: 0; z-index: 200;
  background: rgba(7,8,15,.85);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--z-border);
  padding: 0 2rem; height: 62px;
  display: flex; align-items: center; justify-content: space-between;
}
.navbar-brand {
  font-family: var(--z-display); font-size: 1.3rem; font-weight: 700;
  color: var(--z-text); text-decoration: none;
  display: flex; align-items: center; gap: .5rem;
}
.navbar-brand span { color: var(--z-red); }
.navbar-right { display: flex; align-items: center; gap: 1rem; }
.wallet-chip {
  background: var(--z-surface); border: 1px solid var(--z-border);
  border-radius: 50px; padding: .35rem .9rem;
  font-size: .82rem; color: var(--z-gold);
  display: flex; align-items: center; gap: .4rem;
}

/* ── Live viewer layout ───────────────────────────────── */
.live-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  height: calc(100vh - 62px);
  overflow: hidden;
}
@media (max-width: 900px) {
  .live-layout { grid-template-columns: 1fr; grid-template-rows: 60vh 1fr; }
}

/* Video area */
.video-wrap {
  position: relative; background: #000; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
#remote-video, #local-video {
  width: 100%; height: 100%; object-fit: cover;
}
.live-overlay-top {
  position: absolute; top: 0; left: 0; right: 0;
  padding: 1rem 1.25rem;
  background: linear-gradient(to bottom, rgba(0,0,0,.7), transparent);
  display: flex; align-items: center; justify-content: space-between;
}
.live-overlay-bottom {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 1rem 1.25rem;
  background: linear-gradient(to top, rgba(0,0,0,.8), transparent);
}
.viewer-count {
  display: flex; align-items: center; gap: .4rem;
  background: rgba(0,0,0,.55); border-radius: 50px;
  padding: .3rem .8rem; font-size: .85rem; font-weight: 600;
}
.live-timer {
  font-size: 1rem; font-weight: 700; color: var(--z-gold); font-family: var(--z-display);
  background: rgba(0,0,0,.55); border-radius: 50px; padding: .3rem .8rem;
}

/* Chat sidebar */
.chat-sidebar {
  display: flex; flex-direction: column;
  background: var(--z-surface); border-left: 1px solid var(--z-border);
  overflow: hidden;
}
.chat-head {
  padding: 1rem 1.25rem; border-bottom: 1px solid var(--z-border);
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
}
.chat-messages {
  flex: 1; overflow-y: auto; padding: 1rem 1.25rem;
  display: flex; flex-direction: column; gap: .6rem;
  scroll-behavior: smooth;
}
.chat-messages::-webkit-scrollbar { width: 4px; }
.chat-messages::-webkit-scrollbar-thumb { background: var(--z-border); border-radius: 4px; }
.chat-msg {
  display: flex; gap: .6rem; align-items: flex-start;
  animation: msg-in .2s ease;
}
@keyframes msg-in { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
.chat-msg .avatar {
  width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
}
.chat-msg .body { font-size: .83rem; line-height: 1.4; }
.chat-msg .uname { font-weight: 600; color: var(--z-cyan); margin-right: .3rem; }

/* Gift messages */
.chat-msg.gift {
  background: linear-gradient(135deg, rgba(245,200,66,.12), rgba(240,152,25,.08));
  border: 1px solid rgba(245,200,66,.25);
  border-radius: var(--z-radius); padding: .6rem .8rem;
}
.gift-amount { font-size: 1.5rem; font-weight: 800; color: var(--z-gold); font-family: var(--z-display); }

/* Chat footer */
.chat-footer {
  padding: .9rem 1rem; border-top: 1px solid var(--z-border); flex-shrink: 0;
}
.chat-input-row { display: flex; gap: .5rem; }
.chat-input-form { display:flex; flex:1; gap:.5rem; }
.chat-input-form input { min-width:0; }
.chat-input-form button, .gift-chip, .ctrl-btn { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.chat-input-row input {
  flex: 1; background: var(--z-card); border: 1.5px solid var(--z-border);
  border-radius: 50px; color: var(--z-text); padding: .6rem 1rem;
  font-size: 16px; outline: none; font-family: var(--z-font); -webkit-appearance:none; appearance:none;
}
.chat-input-row input:focus { border-color: var(--z-red); }
.gift-btn-row { display: flex; gap: .5rem; margin-top: .6rem; flex-wrap: wrap; }
.gift-chip {
  background: var(--z-card); border: 1px solid var(--z-border);
  border-radius: 50px; padding: .3rem .75rem; font-size: .78rem;
  cursor: pointer; color: var(--z-gold); transition: var(--z-transition);
  font-weight: 600;
}
.gift-chip:hover { background: var(--z-gold); color: #000; border-color: var(--z-gold); }

/* Big gift celebration */
.big-gift-animation {
  position:absolute; left:50%; top:52%; transform:translate(-50%,-50%);
  min-width:min(360px,82vw); max-width:min(520px,90vw); padding:1.1rem 1.4rem;
  text-align:center; border-radius:22px; background:rgba(8,9,16,.88);
  border:1px solid rgba(245,200,66,.55); box-shadow:0 0 45px rgba(245,200,66,.28),0 18px 60px rgba(0,0,0,.5);
  backdrop-filter:blur(12px); animation:big-gift-pop 4.2s ease forwards;
}
.big-gift-emoji { font-size:4.2rem; line-height:1; animation:gift-bounce .75s ease-in-out infinite alternate; }
.big-gift-amount { margin-top:.35rem; font:800 clamp(2rem,6vw,3.8rem)/1 var(--z-display); color:var(--z-gold); text-shadow:0 0 22px rgba(245,200,66,.45); }
.big-gift-from { margin-top:.35rem; font-weight:800; font-size:1rem; }
.big-gift-message { margin-top:.45rem; color:var(--z-muted); font-size:.85rem; overflow-wrap:anywhere; }
@keyframes big-gift-pop { 0%{opacity:0;transform:translate(-50%,-50%) scale(.55)} 10%{opacity:1;transform:translate(-50%,-50%) scale(1.06)} 20%{transform:translate(-50%,-50%) scale(1)} 78%{opacity:1;transform:translate(-50%,-56%) scale(1)} 100%{opacity:0;transform:translate(-50%,-68%) scale(.92)} }
@keyframes gift-bounce { from{transform:scale(.94) rotate(-4deg)} to{transform:scale(1.08) rotate(4deg)} }
.floating-gift { position:fixed; bottom:120px; right:380px; pointer-events:none; z-index:999; font-size:2rem; font-weight:900; color:var(--z-gold); font-family:var(--z-display); animation:gift-fly 2.5s ease forwards; }
@media(max-width:900px){.floating-gift{right:20px}}
@keyframes gift-fly { 0%{opacity:0;transform:translateY(0) scale(.5)} 20%{opacity:1;transform:translateY(-20px) scale(1.3)} 80%{opacity:1;transform:translateY(-120px) scale(1)} 100%{opacity:0;transform:translateY(-160px) scale(.8)} }

/* ── Packs page ───────────────────────────────────────── */
.packs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.25rem; margin-top: 2rem;
}
.pack-card {
  background: var(--z-card); border: 1.5px solid var(--z-border);
  border-radius: var(--z-radius-lg); padding: 1.75rem 1.5rem;
  position: relative; cursor: pointer; transition: var(--z-transition);
  text-align: center;
}
.pack-card:hover { border-color: var(--z-red); transform: translateY(-3px); box-shadow: 0 12px 40px var(--z-red-glow); }
.pack-card.popular { border-color: var(--z-red); box-shadow: 0 0 30px var(--z-red-glow); }
.pack-badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  padding: .2rem .9rem; border-radius: 50px; font-size: .7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  background: var(--z-red); color: #fff;
}
.pack-badge.gold { background: linear-gradient(135deg,#f5c842,#f09819); color:#000; }
.pack-name { font-family: var(--z-display); font-size: 1.1rem; margin-top: .5rem; }
.pack-mins { font-size: 2.5rem; font-weight: 800; font-family: var(--z-display); color: var(--z-cyan); margin: .5rem 0; }
.pack-mins small { font-size: 1rem; font-weight: 400; color: var(--z-muted); }
.pack-price { font-size: 1.2rem; font-weight: 700; color: var(--z-gold); margin-bottom: 1rem; }

/* ── Admin table ──────────────────────────────────────── */
.admin-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.admin-table th { text-align: left; padding: .9rem 1rem; color: var(--z-muted); font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; border-bottom: 1px solid var(--z-border); }
.admin-table td { padding: .85rem 1rem; border-bottom: 1px solid var(--z-border); vertical-align: middle; }
.admin-table tr:hover td { background: rgba(255,255,255,.02); }

/* ── Toast ────────────────────────────────────────────── */
#toast-wrap {
  position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%);
  z-index: 9999; display: flex; flex-direction: column; gap: .5rem; align-items: center;
}
.toast {
  background: var(--z-card); border: 1px solid var(--z-border);
  border-radius: var(--z-radius); padding: .8rem 1.4rem;
  font-size: .88rem; box-shadow: 0 8px 32px rgba(0,0,0,.5);
  animation: toast-in .25s ease; min-width: 240px; text-align: center;
}
.toast.success { border-color: #22c55e; color: #22c55e; }
.toast.error   { border-color: var(--z-red); color: var(--z-red); }
@keyframes toast-in { from { opacity:0; transform: translateY(12px); } to { opacity:1; transform:none; } }

/* ── Modal ────────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.75);
  backdrop-filter: blur(6px); z-index: 500;
  display: none; align-items: center; justify-content: center;
}
.modal-overlay.open { display: flex; }
.modal-box {
  background: var(--z-card); border: 1px solid var(--z-border);
  border-radius: var(--z-radius-lg); padding: 2rem; width: 480px; max-width: 95vw;
  animation: modal-in .22s ease;
}
@keyframes modal-in { from { opacity:0; transform:scale(.95); } to { opacity:1; transform:none; } }
.modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
.modal-close { background: none; border: none; color: var(--z-muted); cursor: pointer; font-size: 1.3rem; padding: .2rem; }
.modal-close:hover { color: var(--z-text); }

/* ── Login page ───────────────────────────────────────── */
.login-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 2rem;
  background: radial-gradient(ellipse at 20% 80%, rgba(232,39,75,.12) 0%, transparent 55%),
              radial-gradient(ellipse at 80% 10%, rgba(124,77,255,.10) 0%, transparent 50%),
              var(--z-bg);
}
.login-card { width: 420px; max-width: 100%; }
.login-logo { font-family: var(--z-display); font-size: 2rem; font-weight: 700; margin-bottom: .3rem; }
.login-logo span { color: var(--z-red); }
.login-sub { color: var(--z-muted); font-size: .9rem; margin-bottom: 2rem; }

/* ── Utility ──────────────────────────────────────────── */
.text-muted   { color: var(--z-muted); }
.text-gold    { color: var(--z-gold); }
.text-red     { color: var(--z-red); }
.text-cyan    { color: var(--z-cyan); }
.text-sm      { font-size: .82rem; }
.mt-1  { margin-top: .5rem; }
.mt-2  { margin-top: 1rem; }
.mt-3  { margin-top: 1.5rem; }
.mb-1  { margin-bottom: .5rem; }
.mb-2  { margin-bottom: 1rem; }
.flex  { display: flex; }
.items-center { align-items: center; }
.gap-2 { gap: 1rem; }
.space-x { justify-content: space-between; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }
.page-content { padding: 2rem 0; }
.section-title { font-size: 1.5rem; margin-bottom: .4rem; }
.section-sub   { color: var(--z-muted); font-size: .9rem; }

/* ── Screen capture deterrent overlay ────────────────── */
.capture-guard {
  position: fixed; inset: 0; z-index: 10000; pointer-events: none;
  background: transparent;
  mix-blend-mode: difference;
}

/* Zividax content monetization wall */
.zdx-membership-wall{position:absolute;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(5,7,15,.78);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.zdx-membership-wall-card{width:min(440px,92vw);padding:28px;border:1px solid var(--z-border);border-radius:22px;background:var(--z-card);text-align:center;box-shadow:0 20px 70px rgba(0,0,0,.45)}
.zdx-membership-lock{font-size:44px;margin-bottom:10px}.zdx-membership-wall-card h3{margin:0 0 8px}.zdx-membership-wall-card p{color:var(--z-muted);line-height:1.55;margin:0 0 20px}.zdx-membership-pay{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 20px;border-radius:12px;background:var(--z-red);color:#fff;text-decoration:none;font-weight:800}

.milestone-chip{display:inline-flex;align-items:center;gap:.4rem;padding:.5rem .7rem;border:1px solid var(--z-border);border-radius:999px;background:var(--z-surface);font-size:.78rem;color:var(--z-text);cursor:pointer}
.milestone-chip input{accent-color:var(--z-red)}
.big-gift-animation{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;animation:gift-pop 4.2s ease forwards;min-width:220px;padding:18px;border-radius:22px;background:rgba(10,10,18,.82);backdrop-filter:blur(10px);border:1px solid rgba(245,200,66,.35);box-shadow:0 18px 60px rgba(0,0,0,.45)}
.big-gift-emoji{font-size:5rem;line-height:1}.big-gift-amount{font-size:2rem;font-weight:900;color:var(--z-gold);font-family:var(--z-display)}.big-gift-from{font-weight:800;margin-top:.2rem}.big-gift-message{font-size:.82rem;color:var(--z-muted);margin-top:.35rem;overflow-wrap:anywhere}
@keyframes gift-pop{0%{opacity:0;transform:translate(-50%,-50%) scale(.55)}12%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}22%{transform:translate(-50%,-50%) scale(1)}82%{opacity:1}100%{opacity:0;transform:translate(-50%,-70%) scale(.95)}}

/* Final Live UX polish — fixed-position video + YouTube-style comments */
.live-stage { isolation: isolate; }
.live-stage #remote-video { position:absolute; inset:0; }
.live-stage #remote-video video { object-fit:cover !important; object-position:center center !important; }
.live-comment-feed { position:absolute; left:14px; bottom:82px; width:min(440px,72%); max-height:42%; display:flex; flex-direction:column; gap:7px; overflow:hidden; z-index:18; pointer-events:none; }
.live-comment { width:max-content; max-width:100%; box-sizing:border-box; padding:7px 11px; border-radius:16px; background:rgba(0,0,0,.58); color:#fff; font-size:.86rem; line-height:1.25; box-shadow:0 6px 20px rgba(0,0,0,.18); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.live-comment .cu { color:#43e1ff; font-weight:900; margin-right:5px; }
.live-comment.gift { border:1px solid rgba(255,214,74,.45); background:rgba(40,30,7,.72); }
.live-comment.gift .cu { color:#ffd64a; }
@media (max-width:900px){
  .live-shell { position:fixed !important; inset:0 !important; top:0 !important; bottom:0 !important; height:100dvh !important; padding-top:0 !important; display:block !important; overflow:hidden !important; }
  .live-stage { position:absolute !important; inset:0 !important; height:100dvh !important; min-height:100dvh !important; width:100% !important; }
  .live-stage #remote-video, .live-stage #remote-video video { width:100% !important; height:100% !important; }
  .live-stage #remote-video video { object-fit:cover !important; object-position:center center !important; }
  .live-comment-feed { left:12px; bottom:128px; width:min(86vw,430px); max-height:33%; gap:6px; }
  .live-comment { font-size:.84rem; padding:7px 10px; border-radius:15px; }
  .floating-chat-btn { display:block !important; bottom:136px !important; right:14px !important; z-index:28 !important; }
  .live-chat-panel { z-index:100 !important; }
}


/* FINAL LIVE CHAT / VIDEO POLISH */
.live-stage{isolation:isolate}.live-stage #remote-video{position:absolute;inset:0}.live-stage #remote-video video{object-fit:cover!important;object-position:center center!important}.live-comment-feed{position:absolute;left:14px;bottom:82px;width:min(440px,72%);max-height:42%;display:flex;flex-direction:column;gap:7px;overflow:hidden;z-index:18;pointer-events:none}.live-comment{width:max-content;max-width:100%;box-sizing:border-box;padding:7px 11px;border-radius:16px;background:rgba(0,0,0,.58);color:#fff;font-size:.86rem;line-height:1.25;box-shadow:0 6px 20px rgba(0,0,0,.18);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.live-comment .cu{color:#43e1ff;font-weight:900;margin-right:5px}.live-comment.gift{border:1px solid rgba(255,214,74,.45);background:rgba(40,30,7,.72)}.live-comment.gift .cu{color:#ffd64a}
@media(max-width:900px){.live-shell{position:fixed!important;inset:0!important;top:0!important;bottom:0!important;height:100dvh!important;padding-top:0!important;display:block!important;overflow:hidden!important}.live-stage{position:absolute!important;inset:0!important;height:100dvh!important;min-height:100dvh!important;width:100%!important}.live-stage #remote-video,.live-stage #remote-video video{width:100%!important;height:100%!important}.live-stage #remote-video video{object-fit:cover!important;object-position:center center!important}.live-comment-feed{left:12px;bottom:130px;width:min(86vw,430px);max-height:34%;gap:6px}.live-comment{font-size:.84rem;padding:7px 10px;border-radius:15px}.floating-chat-btn{display:block!important;bottom:136px!important;right:14px!important;z-index:28!important}.live-chat-panel{z-index:100!important}}

/* FINAL MOBILE CHAT SHEET + COMMENT STREAM */
.chat-messages{-webkit-overflow-scrolling:touch;overscroll-behavior:contain;scrollbar-width:thin}
.chat-composer{position:sticky;bottom:0;background:rgba(13,15,23,.98);z-index:2;padding-bottom:calc(10px + env(safe-area-inset-bottom,0px))}
@media(max-width:900px){
  .chat-messages{padding-bottom:8px}
  .live-chat-panel{height:min(68dvh,620px)!important;padding-bottom:env(safe-area-inset-bottom,0px)}
  .chat-head{padding-top:13px}
  .chat-head:before{content:"";position:absolute;top:7px;left:50%;transform:translateX(-50%);width:42px;height:4px;border-radius:20px;background:rgba(255,255,255,.22)}
  .live-comment-feed{bottom:145px!important}
}