/* ============================================================
   VULU v2 — Discord-flavored base. Cozy, social, polished.
   Reuses tokens.css color vars. On-brand: near-black + green/purple/gold.
   ============================================================ */

:root {
  --rail-bg: #050505;
  --side-bg: #0b0b0b;
  --main-bg: #101010;
  --hair: rgba(255,255,255,0.06);
}

.frame {
  background: var(--main-bg);
  color: var(--text);
  font-family: var(--font);
  height: 100%; overflow: hidden; position: relative;
  -webkit-font-smoothing: antialiased;
}
.frame *, .frame *::before, .frame *::after { box-sizing: border-box; }
.tnum { font-variant-numeric: tabular-nums; }

/* ---------- placeholder media tile (clean, soft) ---------- */
.shot {
  position: relative; overflow: hidden;
  background: linear-gradient(150deg, #141918 0%, #0d100f 55%, #10201a 130%);
}
.shot::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 80% at 70% -10%, rgba(255,255,255,0.05), transparent 55%);
}
.shot::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 38px; height: 38px;
  transform: translate(-50%,-50%);
  border-radius: 999px; background: rgba(255,255,255,0.05);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
}
.shot__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 1; opacity: 0.5; }
.shot__play .ic { width: 16px; height: 16px; color: var(--text); }
.shot__tag {
  position: absolute; bottom: 9px; left: 10px; z-index: 2;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted);
}

/* ---------- avatar ---------- */
.av { position: relative; border-radius: 999px; display: inline-grid; place-items: center; flex: 0 0 auto; overflow: visible; }
.av .avbg {
  width: 100%; height: 100%; border-radius: 999px; display: grid; place-items: center;
  font-weight: 700; color: #d7e0db; background: linear-gradient(140deg, #232b29, #14241d);
}
.av--live .avbg { box-shadow: 0 0 0 2px var(--main-bg), 0 0 0 4px var(--red); }
.av--watch .avbg { box-shadow: 0 0 0 2px var(--main-bg), 0 0 0 4px var(--blue); }
.av--ring .avbg { box-shadow: 0 0 0 2px var(--main-bg), 0 0 0 4px var(--green); }
.av__dot { position: absolute; right: -1px; bottom: -1px; width: 32%; height: 32%; min-width: 9px; min-height: 9px; border-radius: 999px; border: 2.5px solid var(--side-bg); }
.dot-online { background: var(--green); } .dot-busy { background: var(--red); } .dot-idle { background: var(--gold); } .dot-off { background: #4a514e; }

/* ---------- presence / live bits ---------- */
.livedot { display: inline-flex; align-items: center; gap: 6px; color: var(--red); font-weight: 700; font-size: 11px; letter-spacing: 0.04em; }
.livedot i { width: 7px; height: 7px; border-radius: 999px; background: var(--red); display: inline-block; }
.viewers { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--text-2); }
.viewers i { width: 6px; height: 6px; border-radius: 999px; background: var(--red); display: inline-block; }
.glasspill {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(0,0,0,0.5); backdrop-filter: blur(6px);
  border-radius: 7px; padding: 4px 8px; font-size: 11px; font-weight: 700; color: #fff;
}
.glasspill i { width: 6px; height: 6px; border-radius: 999px; background: var(--red); display: inline-block; }

/* ---------- face pile ---------- */
.fp { display: flex; align-items: center; }
.fp .av { margin-left: -9px; } .fp .av:first-child { margin-left: 0; }
.fp .av .avbg { box-shadow: 0 0 0 2.5px var(--card-bg, var(--main-bg)); }
.fp .more {
  margin-left: -9px; height: 26px; min-width: 26px; padding: 0 6px; border-radius: 999px;
  background: var(--raised-2); box-shadow: 0 0 0 2.5px var(--card-bg, var(--main-bg));
  display: grid; place-items: center; font-size: 11px; font-weight: 700; color: var(--text-2);
}

/* ---------- squircle space rail (shared) ---------- */
.rail { width: 72px; flex: 0 0 auto; background: var(--rail-bg); display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 0; }
.sqlogo { width: 46px; height: 46px; border-radius: 15px; background: var(--raised-2); color: var(--text); display: grid; place-items: center; font-weight: 800; font-size: 22px; flex: 0 0 auto; }
.railsep { width: 32px; height: 2px; border-radius: 2px; background: var(--hair); margin: 2px 0; flex: 0 0 auto; }
.sq {
  position: relative; width: 46px; height: 46px; border-radius: 999px; flex: 0 0 auto;
  display: grid; place-items: center; cursor: pointer;
  background: var(--raised); color: var(--text-2);
  transition: border-radius .2s var(--ease, ease), background .15s, color .15s;
}
.sq .ic { width: 23px; height: 23px; }
.sq .em { font-size: 19px; font-weight: 700; }
.sq:hover { border-radius: 15px; background: var(--raised-2); color: var(--text); }
.sq.active { border-radius: 16px; background: var(--raised-2); color: var(--text); }
.sq::before { content: ""; position: absolute; left: -13px; top: 50%; transform: translateY(-50%); width: 4px; height: 0; background: var(--text); border-radius: 0 4px 4px 0; transition: height .2s var(--ease, ease); }
.sq:hover::before { height: 18px; } .sq.active::before { height: 26px; }
.sq .bd { position: absolute; bottom: -2px; right: -2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--red); color: #fff; font-size: 10px; font-weight: 700; line-height: 18px; text-align: center; box-shadow: 0 0 0 3px var(--rail-bg); }
.sq.gem { color: var(--purple); } .sq.gem:hover, .sq.gem.active { background: rgba(190,56,243,0.14); color: var(--purple); }
.sq.add { color: var(--text); }

/* ---------- Event button (rail) — circular with progress ring ---------- */
.evt { position: relative; width: 48px; height: 48px; flex: 0 0 auto; border: 0; background: none; padding: 0; cursor: pointer; display: grid; place-items: center; }
.evt__ring { position: absolute; inset: 0; width: 48px; height: 48px; transform: rotate(-90deg); }
.evt__track { fill: none; stroke: var(--raised-2); stroke-width: 3; }
.evt__prog { fill: none; stroke: var(--text); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 141.4; stroke-dashoffset: 50.9; }
.evt__face { position: relative; z-index: 1; width: 38px; height: 38px; border-radius: 999px; background: var(--raised); display: grid; place-items: center; color: var(--text); transition: background .15s, transform .15s; }
.evt__face .ic { width: 19px; height: 19px; }
.evt:hover .evt__face { background: var(--raised-2); transform: scale(1.05); }
.evt:active .evt__face { transform: scale(0.96); }
.evt__badge { position: absolute; z-index: 2; top: 0; right: 0; width: 9px; height: 9px; border-radius: 999px; background: var(--red); box-shadow: 0 0 0 3px var(--rail-bg); }

/* ---------- Event popup — anchored to the button, matches app cards ---------- */
.evtmodal { position: absolute; inset: 0; z-index: 90; background: rgba(0,0,0,0.45); opacity: 0; pointer-events: none; transition: opacity .18s var(--ease); }
.evtmodal.open { opacity: 1; pointer-events: auto; }
.evtpop { position: absolute; left: 88px; bottom: 54px; width: 340px; max-width: calc(100% - 104px); background: var(--raised); border: 1px solid var(--border); border-radius: 18px; padding: 18px; box-shadow: 0 28px 70px rgba(0,0,0,0.62); transform: scale(0.95); transform-origin: bottom left; opacity: 0; transition: transform .22s var(--ease), opacity .22s var(--ease); }
.evtmodal.open .evtpop { transform: scale(1); opacity: 1; }
.evtpop::before { content: ""; position: absolute; left: -7px; bottom: 76px; width: 13px; height: 13px; background: var(--raised); border-left: 1px solid var(--border); border-bottom: 1px solid var(--border); transform: rotate(45deg); }
.evtpop__head { display: flex; align-items: flex-start; gap: 12px; }
.evtpop__icon { position: relative; width: 42px; height: 42px; border-radius: 13px; background: var(--raised-2); color: var(--text-2); display: grid; place-items: center; flex: 0 0 auto; }
.evtpop__icon .ic { width: 21px; height: 21px; }
.evtpop__title { flex: 1 1 auto; min-width: 0; }
.evtpop__title h3 { margin: 0 0 5px; font-size: 16.5px; font-weight: 800; letter-spacing: -0.02em; }
.evtpop__live { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--text-2); }
.evtpop__live i { width: 6px; height: 6px; border-radius: 999px; background: var(--red); }
.evtpop__live .tnum { color: var(--text); font-weight: 700; }
.evtpop__x { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px; background: var(--fill); border: 1px solid var(--border); color: var(--text-2); display: grid; place-items: center; cursor: pointer; transition: background .12s, color .12s; }
.evtpop__x:hover { background: var(--fill-hover); color: var(--text); }
.evtpop__x .ic { width: 15px; height: 15px; }
.evtpop__stats { display: flex; gap: 10px; margin: 16px 0; }
.evtstat { flex: 1 1 0; min-width: 0; background: rgba(255,255,255,0.03); border-radius: 13px; padding: 12px 13px; }
.evtstat .k { font-size: 11px; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
.evtstat .v { display: flex; align-items: center; gap: 6px; font-size: 18px; font-weight: 800; letter-spacing: -0.01em; color: var(--text); }
.evtstat .v .ic { width: 15px; height: 15px; color: var(--green); }
.evtpop__join { width: 100%; height: 46px; padding: 0 16px; border-radius: 12px; background: var(--fill); border: 1px solid var(--border); color: var(--text); font-size: 15px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: space-between; transition: background .14s, border-color .14s; }
.evtpop__join:hover { background: var(--fill-hover); border-color: #313838; }
.evtpop__join .cost { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); font-weight: 700; font-size: 14px; }
.evtpop__join .cost .ic { width: 15px; height: 15px; color: var(--green); }

/* ---------- channel sidebar (shared) ---------- */
.side { width: 248px; flex: 0 0 auto; background: var(--side-bg); display: flex; flex-direction: column; }
.side__head { height: 50px; flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; border-bottom: 1px solid var(--hair); font-weight: 700; font-size: 15px; letter-spacing: -0.01em; }
.side__head .ic { width: 16px; height: 16px; color: var(--muted); }
.side__body { flex: 1 1 auto; overflow: hidden; padding: 10px 8px; }
.grp { display: flex; align-items: center; justify-content: space-between; padding: 13px 8px 5px; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.grp .n { color: var(--text-2); }
.ch { display: flex; align-items: center; gap: 9px; padding: 8px 9px; border-radius: 8px; color: var(--text-2); font-size: 14px; font-weight: 500; cursor: pointer; transition: background .12s, color .12s; }
.ch .ic { width: 19px; height: 19px; color: var(--muted); flex: 0 0 auto; }
.ch:hover { background: var(--raised); color: var(--text); }
.ch.active { background: var(--raised-2); color: var(--text); }
.ch.active .ic { color: var(--green); }
.ch .bd { margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--red); color: #fff; font-size: 10.5px; font-weight: 700; line-height: 18px; text-align: center; }
.ch .ct { margin-left: auto; font-size: 12px; color: var(--muted); font-weight: 600; }
.ch .livei { width: 8px; height: 8px; border-radius: 999px; background: var(--red); flex: 0 0 auto; }

/* user panel */
.upanel { flex: 0 0 auto; height: 56px; display: flex; align-items: center; gap: 9px; padding: 0 10px; background: var(--rail-bg); }
.upanel .nm { font-size: 13px; font-weight: 700; line-height: 1.15; }
.upanel .st { font-size: 11.5px; color: var(--muted); }
.upanel .acts { margin-left: auto; display: flex; gap: 2px; }
.upanel .ib { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: var(--muted); cursor: pointer; }
.upanel .ib:hover { background: var(--raised); color: var(--text); }
.upanel .ib .ic { width: 18px; height: 18px; }

/* ---------- buttons ---------- */
.btng { height: 36px; padding: 0 16px; border-radius: 9px; background: var(--green); color: var(--green-ink); font-weight: 700; font-size: 13.5px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; cursor: pointer; border: 0; white-space: nowrap; transition: background .15s; }
.btng:hover { background: #5be88e; }
.btng .ic { width: 16px; height: 16px; }
.btns { height: 36px; padding: 0 14px; border-radius: 9px; background: var(--fill); color: var(--text); font-weight: 600; font-size: 13.5px; display: inline-flex; align-items: center; gap: 7px; cursor: pointer; border: 1px solid var(--border); }
.btns:hover { background: var(--fill-hover); }
.btns .ic { width: 16px; height: 16px; }
.iconbtn { width: 36px; height: 36px; border-radius: 9px; background: var(--fill); border: 1px solid var(--border); display: grid; place-items: center; color: var(--text-2); cursor: pointer; }
.iconbtn:hover { background: var(--fill-hover); color: var(--text); }
.iconbtn .ic { width: 18px; height: 18px; }

/* currency chips for top bars */
.cchip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 11px; background: var(--raised); border-radius: 9px; font-size: 13px; font-weight: 700; }
.cchip .ic { width: 14px; height: 14px; }
.cchip.cash { color: var(--green); } .cchip.gems { color: var(--purple); }

/* main scaffolding */
.maincol { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; background: var(--main-bg); }
.topbar { height: 56px; flex: 0 0 auto; display: flex; align-items: center; gap: 12px; padding: 0 20px; border-bottom: 1px solid var(--hair); }
.topbar h1 { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
.topbar .sub { color: var(--muted); font-size: 13px; font-weight: 500; }
.searchin { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; background: var(--rail-bg); border-radius: 9px; color: var(--muted); font-size: 13px; min-width: 200px; }
.searchin .ic { width: 15px; height: 15px; }
.scrollarea { flex: 1 1 auto; overflow: hidden; }