:root{
  --bg:#050814;--panel:rgba(10,14,24,.78);--text:#f3f7ff;--muted:#9fb0cf;--accent:#4f8cff;--accent2:#7cf0c0;--danger:#ff5d6c;--border:rgba(255,255,255,.08);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:#050814;color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
body{min-height:100vh}
a{text-decoration:none;color:inherit}
.hidden{display:none!important}
.wrap{max-width:1220px;margin:0 auto;padding:16px}
.topnav{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--border);background:rgba(11,16,29,.72);backdrop-filter:blur(16px);border-radius:18px;position:sticky;top:10px;z-index:20}
.links{display:flex;gap:10px;flex-wrap:wrap}
.links a,.links button,.btn{padding:11px 14px;border-radius:14px;border:0;background:linear-gradient(135deg,var(--accent),#3565ff);color:#fff;font-weight:700;cursor:pointer}
.btn.secondary,.links .secondary{background:#1b2747}
.btn.ghost,.links .ghost{background:transparent;border:1px solid var(--border)}
.btn.danger{background:linear-gradient(135deg,#ff6b7a,#e13d56)}
.badge,.pill{display:inline-flex;align-items:center;gap:8px;padding:7px 11px;border-radius:999px;background:#182444;color:#e6eeff;font-size:13px}
.pill{background:#10182f}
.card{border:1px solid var(--border);background:linear-gradient(180deg,rgba(18,26,47,.96),rgba(10,15,27,.96));border-radius:22px;padding:18px}
.grid{display:grid;gap:16px}
.home-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:16px;margin-top:16px}
.home-lists{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
.stream-list{display:grid;gap:12px}
.stream-card{display:grid;grid-template-columns:120px 1fr auto;gap:14px;align-items:center;padding:14px;border:1px solid var(--border);border-radius:18px;background:#0b1222}
.stream-cover{width:120px;height:74px;border-radius:14px;background:linear-gradient(135deg,#101c3a,#162a58);display:flex;align-items:center;justify-content:center;color:#91a6d1;font-size:13px;overflow:hidden}
.stream-cover img{width:100%;height:100%;object-fit:cover}
.stream-meta h3,.stream-meta p{margin:0}
.stream-meta p{color:var(--muted);margin-top:5px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-size:13px;color:var(--muted)}
.field input,.field textarea,.field select{width:100%;padding:13px 14px;border-radius:14px;border:1px solid var(--border);background:#0d1427;color:#fff}
.field textarea{min-height:100px;resize:vertical}
.studio-layout{display:grid;grid-template-columns:1fr 360px;gap:16px;margin-top:16px}
.preview-shell{position:relative;aspect-ratio:16/9;min-height:280px;background:#000;border-radius:24px;overflow:hidden;border:1px solid var(--border)}
.preview-main,.remote-main{position:absolute;inset:0;background:#000}
.preview-main video,.remote-main video{width:100%;height:100%;object-fit:cover}
.overlay-cam,.remote-cam{position:absolute;right:14px;bottom:14px;width:min(32vw,230px);aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:#000;border:1px solid rgba(255,255,255,.16);box-shadow:0 14px 40px rgba(0,0,0,.35)}
.overlay-cam video,.remote-cam video{width:100%;height:100%;object-fit:cover}
.empty{height:100%;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--muted);padding:20px}
.stage-status{margin-top:10px;color:var(--muted)}
.viewer-stage{position:fixed;inset:0;background:#000;overflow:hidden}
.viewer-back{position:fixed;top:10px;left:10px;z-index:40}
.viewer-top{position:fixed;top:10px;left:50%;transform:translateX(-50%);z-index:40;display:flex;gap:8px;align-items:center;background:rgba(6,8,16,.52);backdrop-filter:blur(12px);border:1px solid var(--border);padding:8px 12px;border-radius:999px}
.viewer-side{position:fixed;right:10px;top:62px;z-index:35;width:min(92vw,340px);display:grid;gap:10px}
.poll-box,.likes-box{background:rgba(5,8,16,.48);backdrop-filter:blur(12px);border:1px solid var(--border);border-radius:18px;padding:12px}
.likes-box{width:fit-content;max-width:calc(100vw - 20px)}
.chat-box{position:fixed;left:10px;right:10px;bottom:10px;z-index:35;display:grid;gap:8px}
.chat-list{display:flex;flex-direction:column;gap:8px;max-height:28vh;overflow:auto}
.comment{padding:8px 10px;border-radius:14px;background:rgba(5,8,16,.18);color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.8)}
.comment b{color:#9fd0ff}
.chat-form{display:flex;gap:8px;align-items:flex-end}
.chat-form textarea{flex:1;min-height:46px;max-height:120px;padding:12px 14px;border-radius:16px;border:1px solid rgba(255,255,255,.14);background:rgba(5,8,16,.35);backdrop-filter:blur(10px);color:#fff}
.audio-btn{position:fixed;left:50%;top:62px;transform:translateX(-50%);z-index:42}
.name-gate{position:fixed;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.72);z-index:50;padding:16px}
.name-gate__card{width:min(100%,420px);border:1px solid var(--border);background:#09101f;border-radius:22px;padding:20px}
.section-title{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px}
.muted{color:var(--muted)}
.top-likers{display:flex;gap:8px;flex-wrap:wrap}
.top-likers span{padding:4px 8px;border-radius:999px;background:#111b35;font-size:12px;color:#d5e6ff}
@media (max-width:900px){
  .home-grid,.home-lists,.studio-layout{grid-template-columns:1fr}
  .stream-card{grid-template-columns:1fr}
  .stream-cover{width:100%;height:140px}
}
@media (max-width:680px){
  .wrap{padding:10px}
  .topnav{padding:10px 12px;border-radius:16px}
  .links{gap:8px}
  .links a,.links button,.btn{padding:10px 12px;border-radius:12px;font-size:14px}
  .overlay-cam,.remote-cam{width:min(40vw,150px);right:10px;bottom:10px;border-radius:14px}
  .viewer-side{left:10px;right:10px;top:auto;bottom:110px;width:auto}
  .poll-box{max-height:28vh;overflow:auto}
  .viewer-top{top:8px;left:8px;right:8px;transform:none;justify-content:space-between}
  .viewer-back{top:8px;left:auto;right:8px}
  .chat-box{bottom:8px;left:8px;right:8px}
  .chat-list{max-height:22vh}
}

/* update_019 mobile watch refinements */
html, body {
  overscroll-behavior: none;
}
body.watch-mobile {
  touch-action: manipulation;
}
.viewer-stage,
.viewer-stage * {
  -webkit-tap-highlight-color: transparent;
}
.mobile-top {
  top: max(8px, env(safe-area-inset-top));
  left: 8px;
  right: 8px;
  transform: none;
  justify-content: flex-start;
  gap: 8px;
  flex-wrap: wrap;
}
.top-link-btn {
  border: 0;
  background: rgba(8,12,22,.52);
  color: #dce7ff;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 999px;
  padding: 7px 10px;
  font-size: 12px;
  cursor: pointer;
}
.mobile-split {
  position: fixed;
  inset: 0;
  display: grid;
  grid-template-rows: 34dvh 66dvh;
  background: #000;
}
.mobile-cam-area,
.mobile-screen-area {
  position: relative;
  overflow: hidden;
  background: #000;
}
.remote-cam-full,
.remote-screen-full {
  position: absolute;
  inset: 0;
}
.remote-cam-full video,
.remote-screen-full video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.remote-screen-full video {
  object-fit: contain;
  background: #000;
}
.floating-like-counter {
  position: fixed;
  right: 10px;
  top: max(72px, calc(env(safe-area-inset-top) + 56px));
  z-index: 42;
  background: rgba(8,12,22,.56);
  color: #fff;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 999px;
  padding: 9px 12px;
  font-weight: 700;
  backdrop-filter: blur(12px);
}
.tap-hint {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  top: max(72px, calc(env(safe-area-inset-top) + 56px));
  z-index: 41;
  background: rgba(8,12,22,.42);
  color: #d2e3ff;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 12px;
  backdrop-filter: blur(10px);
}
.top-sheet {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: end center;
  background: rgba(0,0,0,.45);
  padding: 12px;
}
.top-sheet__card {
  width: min(100%, 460px);
  max-height: 52dvh;
  overflow: auto;
  background: #09101f;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 22px 22px 12px 12px;
  padding: 16px;
}
.top-sheet__list {
  display: grid;
  gap: 8px;
}
.top-sheet__list .row-item {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: #10182f;
  color: #eef4ff;
}
.poll-mobile {
  position: fixed;
  left: 8px;
  right: 8px;
  top: calc(34dvh + max(16px, env(safe-area-inset-top)));
  z-index: 45;
  background: rgba(8,12,22,.62);
  backdrop-filter: blur(12px);
  max-height: 28dvh;
  overflow: auto;
}
.mobile-chat {
  position: fixed;
  left: 8px;
  right: 8px;
  bottom: max(8px, env(safe-area-inset-bottom));
  z-index: 45;
}
.mobile-chat .chat-list {
  max-height: 18dvh;
}
.hearts-layer {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 44;
  overflow: hidden;
}
.floating-heart {
  position: absolute;
  bottom: 18dvh;
  font-size: 22px;
  opacity: 0;
  animation: heartFloat .9s ease-out forwards;
}
@keyframes heartFloat {
  0% { transform: translateY(0) scale(.8); opacity: 0; }
  15% { opacity: 1; }
  100% { transform: translateY(-120px) scale(1.25); opacity: 0; }
}
@media (min-width: 700px) {
  .mobile-split {
    grid-template-rows: 1fr;
  }
  .mobile-cam-area {
    display: none;
  }
  .poll-mobile {
    left: auto;
    right: 10px;
    top: 70px;
    width: min(92vw, 340px);
  }
  .mobile-chat .chat-list {
    max-height: 24vh;
  }
}

/* update_020 studio comment overlay + mobile buttons */
.studio-shell {
  overflow: hidden;
}
.studio-comments {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 8;
  width: min(44%, 360px);
  max-height: 44%;
  overflow: auto;
  display: grid;
  gap: 8px;
  padding-right: 4px;
}
.studio-comment {
  display: grid;
  gap: 2px;
  padding: 9px 11px;
  border-radius: 14px;
  background: rgba(4,7,14,.58);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.08);
  color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,.9);
}
.studio-comment b {
  color: #9fd0ff;
}
.studio-comments__empty {
  padding: 9px 11px;
  border-radius: 14px;
  background: rgba(4,7,14,.42);
  border: 1px solid rgba(255,255,255,.06);
  color: #d6e1ff;
  font-size: 13px;
}
.studio-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.studio-toolbar .btn {
  flex: 1 1 180px;
}
@media (max-width: 900px) {
  .studio-comments {
    width: calc(100% - 24px);
    left: 12px;
    right: 12px;
    bottom: 12px;
    max-height: 34%;
  }
}
@media (max-width: 680px) {
  .studio-toolbar {
    gap: 8px;
  }
  .studio-toolbar .btn {
    flex: 1 1 calc(50% - 8px);
    min-width: 0;
    padding: 11px 10px;
    font-size: 13px;
  }
  .studio-comments {
    width: calc(100% - 16px);
    left: 8px;
    right: 8px;
    bottom: 8px;
    max-height: 30%;
  }
  .studio-comment,
  .studio-comments__empty {
    font-size: 12px;
    padding: 8px 9px;
  }
}