/* ============================================================
 * CADENCE — Aurora Glass (dark)
 *
 * Every colour, radius, shadow and type step is a token below.
 * Rebranding = edit this block, nothing else.
 * ============================================================ */
:root{
  /* --- canvas & aurora --- */
  --page:#14103A;
  --page-deep:#0C0A24;
  --aurora-1:rgba(255,107,168,.50);   /* pink bloom, top right  */
  --aurora-2:rgba(56,220,214,.34);    /* teal bloom, mid left   */
  --aurora-3:rgba(142,107,255,.46);   /* violet bloom, bottom   */

  /* --- glass surfaces --- */
  --glass:rgba(255,255,255,.075);
  --glass-strong:rgba(255,255,255,.12);
  --glass-line:rgba(255,255,255,.14);
  --solid:rgba(255,255,255,.09);
  --input:rgba(10,8,30,.45);
  --sunken:rgba(0,0,0,.22);
  --chart-surface:#211B45;

  /* --- ink --- */
  --ink:#F2F0FF;
  --ink2:rgba(242,240,255,.70);
  --muted:rgba(242,240,255,.46);
  --line:rgba(255,255,255,.12);

  /* --- brand --- */
  --violet:#8E6BFF;
  --violet-deep:#B7A4FF;             /* the "deep" slot is the LIGHT step on a dark canvas */
  --violet-soft:rgba(142,107,255,.20);
  --pink:#FF6BA8;
  --pink-soft:rgba(255,107,168,.18);
  --teal:#38DCD6;
  --teal-soft:rgba(56,220,214,.16);
  --grad:linear-gradient(100deg,#FF6BA8 0%,#A06BFF 52%,#7B5CF0 100%);
  --grad-soft:linear-gradient(100deg,rgba(255,107,168,.20),rgba(142,107,255,.20));

  /* --- status (dark steps) --- */
  --good:#3DDC91; --good-bg:rgba(61,220,145,.14);
  --warn:#FBBF24; --warn-bg:rgba(251,191,36,.15);
  --crit:#FF7A8A; --crit-bg:rgba(255,122,138,.14);

  /* --- charts: validated against the #211B45 chart surface --- */
  --s1:#8b7ce8; --s2:#d9743e; --s3:#1aa8a0; --s1-soft:rgba(139,124,232,.42);

  /* --- shape & depth --- */
  --r-xl:28px; --r-lg:22px; --r-md:16px; --r-sm:12px; --r-pill:999px;
  --lift-1:0 1px 2px rgba(0,0,0,.25), 0 10px 26px -14px rgba(0,0,0,.7);
  --lift-2:0 2px 8px rgba(0,0,0,.3), 0 22px 48px -20px rgba(0,0,0,.8);
  --lift-grad:0 10px 30px -8px rgba(142,107,255,.65);
  --blur:saturate(150%) blur(22px);

  --topbar-h:40px;
  --font:"Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
}

*{box-sizing:border-box; margin:0; -webkit-tap-highlight-color:transparent}
html{color-scheme:dark}
body{font-family:var(--font); background:var(--page-deep); color:var(--ink);
  min-height:100vh; line-height:1.45; font-size:15px; -webkit-font-smoothing:antialiased}
button{font:inherit; border:0; background:none; cursor:pointer; color:inherit}
input,select,textarea{font:inherit; color:inherit}
h1,h2,h3,h4{line-height:1.15; letter-spacing:-.03em; font-weight:700}
.muted{color:var(--muted)} .small{font-size:12.5px} .b{font-weight:700}
svg{flex-shrink:0}

/* ---- outer frame ----
   The aurora lives in one fixed layer behind everything. Keeping it out of the
   scroll containers matters: an `overflow:hidden` ancestor silently breaks
   `position:sticky` on the coach nav, which is what used to hide the page title. */
#aurora{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;
  background:radial-gradient(125% 80% at 12% -8%, #3B2E7E 0%, #1D1750 46%, #0F0C2C 100%)}
#aurora i{position:absolute; display:block; border-radius:50%; filter:blur(70px)}
#aurora .a1{width:min(52vw,520px); aspect-ratio:1; right:-10vw; top:-12vh;
  background:radial-gradient(circle, var(--aurora-1), transparent 68%)}
#aurora .a2{width:min(46vw,460px); aspect-ratio:1; left:-12vw; top:34vh;
  background:radial-gradient(circle, var(--aurora-2), transparent 68%)}
#aurora .a3{width:min(58vw,600px); aspect-ratio:1; left:22vw; bottom:-24vh;
  background:radial-gradient(circle, var(--aurora-3), transparent 68%)}

#frame{min-height:100vh; position:relative; z-index:1}
#phone{max-width:430px; margin:0 auto; min-height:100vh; position:relative;
  display:flex; flex-direction:column; background:transparent;
  box-shadow:0 0 0 1px rgba(255,255,255,.05)}
#coachwrap{max-width:1080px; margin:0 auto; min-height:100vh; position:relative; background:transparent}

/* ---- top bar ---- */
#rolebar{position:sticky; top:0; z-index:60; display:flex; justify-content:center; align-items:center; gap:5px;
  padding:9px 10px 9px 96px; background:rgba(8,6,24,.82); backdrop-filter:var(--blur); flex-wrap:wrap;
  border-bottom:1px solid rgba(255,255,255,.07)}
#rolebar .rp{color:rgba(255,255,255,.62); font-size:12px; font-weight:500; padding:6px 12px; border-radius:var(--r-pill);
  white-space:nowrap; transition:background .12s}
#rolebar .rp.on{background:#fff; color:#14103A; font-weight:600}
#rolebar .brandmark{position:absolute; left:14px; top:50%; transform:translateY(-50%); color:#fff;
  font-weight:700; font-size:15px; letter-spacing:-.03em}
#rolebar .brandmark span{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
@media (max-width:430px){ #rolebar{padding-left:10px} #rolebar .brandmark{display:none} }

/* ---- glass primitives ---- */
.card{background:var(--glass); backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  border:1px solid var(--glass-line); border-radius:var(--r-lg); box-shadow:var(--lift-1); padding:16px;
  position:relative; z-index:1}
.card-solid{background:rgba(255,255,255,.055); border:1px solid var(--line); backdrop-filter:none}
.chip{display:inline-flex; align-items:center; gap:5px; padding:4px 11px; border-radius:var(--r-pill);
  font-size:11px; font-weight:600; letter-spacing:.02em; white-space:nowrap; flex-shrink:0}

/* ---- buttons: one shape language, three levels ---- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; font-weight:600;
  border-radius:var(--r-pill); padding:14px 20px; transition:transform .07s, box-shadow .15s; letter-spacing:-.01em}
.btn:active{transform:scale(.975)}
.btn-primary{background:var(--grad); color:#fff; width:100%; box-shadow:var(--lift-grad); font-weight:700}
.btn-dark{background:#fff; color:#14103A; width:100%; font-weight:700;
  box-shadow:0 8px 22px -10px rgba(0,0,0,.7)}
.btn-ghost{background:var(--violet-soft); color:#CBBCFF; width:100%; font-weight:600; box-shadow:inset 0 0 0 1px rgba(142,107,255,.34)}
.btn-line{background:rgba(255,255,255,.06); box-shadow:inset 0 0 0 1px var(--line); color:var(--ink); width:100%}
.btn-sm{padding:9px 15px; font-size:13px; width:auto; font-weight:600}
.btn-icon{width:42px; height:42px; padding:0; border-radius:var(--r-pill); flex-shrink:0}
.link{color:#CBBCFF; font-weight:600; text-decoration:underline; text-underline-offset:3px;
  text-decoration-thickness:1.5px; text-decoration-color:rgba(109,74,224,.35)}

.row{display:flex; align-items:center; gap:10px}
.spread{display:flex; align-items:center; justify-content:space-between; gap:10px}
.stack{display:flex; flex-direction:column; gap:10px}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.pill-toggle{display:flex; background:var(--sunken); border-radius:var(--r-md); padding:3px}
.pill-toggle button{flex:1; padding:9px 4px; border-radius:13px; font-weight:600; font-size:13px; color:var(--ink2)}
.pill-toggle button.on{background:rgba(255,255,255,.16); color:var(--ink); box-shadow:var(--lift-1)}
.divider{height:1px; background:var(--line); margin:4px 0}
.tag-good{background:var(--good-bg); color:var(--good)}
.tag-warn{background:var(--warn-bg); color:var(--warn)}
.tag-crit{background:var(--crit-bg); color:var(--crit)}
.tag-brand{background:var(--violet-soft); color:#CBBCFF}
.tag-accent{background:var(--pink-soft); color:#FF9EC4}
.tag-teal{background:var(--teal-soft); color:var(--teal)}
.tag-ink{background:#fff; color:#14103A}
.tag-line{box-shadow:inset 0 0 0 1px var(--line); color:var(--ink2); background:rgba(255,255,255,.05)}

/* ---- client screens ---- */
#screen{flex:1; overflow-y:auto; padding:18px 18px 128px; position:relative; z-index:1; -webkit-overflow-scrolling:touch}
.apphead{padding:2px 2px 14px}
.apphead h1{font-size:25px; font-weight:700; letter-spacing:-.04em}

/* hero — the one place the gradient goes full-bleed */
.hero{background:var(--grad); color:#fff; border-radius:var(--r-xl); padding:22px;
  box-shadow:0 16px 40px -14px rgba(109,74,224,.6); position:relative; overflow:hidden}
.hero::after{content:''; position:absolute; right:-50px; top:-70px; width:200px; height:200px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.28), transparent 65%)}
.hero > *{position:relative; z-index:1}
.hero h2{font-size:26px; font-weight:700; letter-spacing:-.04em; margin:10px 0 6px}
.hero .btn{background:#fff; color:#3B2A8C; width:auto; padding:12px 22px; box-shadow:0 6px 16px -6px rgba(0,0,0,.3)}
.hero-calm{background:var(--glass-strong); backdrop-filter:var(--blur); color:var(--ink);
  border:1px solid var(--glass-line); box-shadow:var(--lift-1)}
.hero-calm .btn{background:#fff; color:#241C5C}
.hero-calm::after{display:none}

.weekdots{display:flex; gap:5px; margin-top:2px}
.weekdots .wd{flex:1; text-align:center; font-size:10.5px; color:var(--muted); font-weight:600}
.wd .dot{height:36px; margin:0 auto 4px; border-radius:13px; display:flex; align-items:center;
  justify-content:center; font-size:12.5px; font-weight:700; background:var(--sunken); color:var(--muted)}
.wd.today .dot{box-shadow:inset 0 0 0 1.6px var(--violet); color:var(--violet-deep); background:var(--violet-soft)}
.wd.done .dot{background:var(--grad); color:#fff}
.wd.run .dot{background:var(--teal-soft); color:var(--teal)}
.wd.run.done .dot{background:linear-gradient(150deg,#0F9D94,#38DCD6); color:#04231F}
.wd.missed .dot{background:var(--crit-bg); color:var(--crit)}

/* session rows */
.sess{display:flex; gap:12px; align-items:center}
.sess .icn{width:44px; height:44px; border-radius:15px; display:flex; align-items:center; justify-content:center; flex-shrink:0}
.icn-gym{background:var(--violet-soft); color:#C5B4FF}
.icn-run{background:var(--teal-soft); color:var(--teal)}
.icn-done{background:var(--good-bg); color:var(--good)}

/* ---- tab bar: Coach left, Today raised centre ---- */
#tabbar{position:sticky; bottom:0; z-index:50; display:flex; align-items:flex-end;
  background:rgba(15,12,44,.78); backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  border-top:1px solid var(--glass-line); padding:8px 6px calc(12px + env(safe-area-inset-bottom))}
#tabbar button{flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; font-size:10px;
  font-weight:600; color:var(--muted); padding:4px 0; position:relative; letter-spacing:.01em}
#tabbar button.on{color:#CBBCFF}
#tabbar .ticn{display:flex; align-items:center; justify-content:center}
#tabbar .badge{position:absolute; top:-2px; left:50%; margin-left:5px; background:var(--pink); color:#3A0A22;
  font-size:9px; font-weight:700; border-radius:var(--r-pill); padding:1px 5px; line-height:1.5}
#tabbar button.mid{flex:1.2; gap:6px; margin-top:-26px; font-size:11px; font-weight:700; color:#CBBCFF}
#tabbar button.mid .ticn{width:56px; height:56px; border-radius:19px; background:var(--grad); color:#fff;
  box-shadow:0 10px 24px -6px rgba(142,107,255,.7), 0 0 0 5px #16123C; transition:transform .08s}
#tabbar button.mid:active .ticn{transform:scale(.94)}
#tabbar button.mid:not(.on){color:var(--ink2)}
#tabbar button.mid:not(.on) .ticn{background:rgba(255,255,255,.10); color:var(--ink2); box-shadow:0 0 0 5px #16123C}

/* ---- onboarding ---- */
.ob-progress{height:5px; background:var(--sunken); border-radius:var(--r-pill); overflow:hidden; margin-bottom:22px}
.ob-progress i{display:block; height:100%; background:var(--grad); border-radius:var(--r-pill); transition:width .3s cubic-bezier(.4,0,.2,1)}
.opt{display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  background:var(--glass); backdrop-filter:var(--blur); border-radius:var(--r-md); padding:14px;
  box-shadow:inset 0 0 0 1px var(--line); transition:box-shadow .12s, background .12s}
.opt.on{box-shadow:inset 0 0 0 2px var(--violet); background:rgba(142,107,255,.14)}
.opt .oicn{width:38px; height:38px; border-radius:12px; background:var(--violet-soft); color:#C5B4FF;
  display:flex; align-items:center; justify-content:center; flex-shrink:0}
.opt.on .oicn{background:var(--grad); color:#fff}
.opt .t{font-weight:600; letter-spacing:-.015em} .opt .d{font-size:12.5px; color:var(--muted); margin-top:1px}
.daypick{display:flex; gap:6px}
.daypick button{flex:1; aspect-ratio:1; border-radius:var(--r-md); font-weight:700; font-size:13.5px;
  background:var(--glass); box-shadow:inset 0 0 0 1px var(--line); color:var(--ink2); transition:all .12s}
.daypick button.on{background:var(--grad); color:#fff; box-shadow:var(--lift-grad)}
.ob-input, .searchbar{width:100%; padding:14px 16px; border-radius:var(--r-md); border:1px solid var(--line);
  background:var(--input); font-size:16px; color:var(--ink); transition:border-color .12s, box-shadow .12s}
.ob-input:focus, .searchbar:focus{outline:none; border-color:var(--violet); box-shadow:0 0 0 3px var(--violet-soft)}
.searchbar{font-size:14px; padding:12px 16px}

/* ---- workout player ---- */
.exrow{display:flex; gap:12px; align-items:flex-start}
.exnum{width:30px; height:30px; border-radius:10px; background:var(--violet-soft); color:#C5B4FF;
  font-weight:700; font-size:13px; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:2px}
.exnum.done{background:var(--good); color:#08301C}
.setgrid{display:grid; grid-template-columns:40px 1fr 1fr 44px; gap:7px; align-items:center; margin-top:12px}
.setgrid .hd{font-size:10px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; text-align:center}
.setgrid input{width:100%; padding:10px 4px; text-align:center; border-radius:var(--r-sm); border:1px solid var(--line);
  background:var(--input); color:var(--ink); font-weight:600; font-size:15px; font-variant-numeric:tabular-nums}
.setgrid input:focus{outline:none; border-color:var(--violet); box-shadow:0 0 0 3px var(--violet-soft)}
.setlbl{font-size:12.5px; font-weight:700; color:var(--ink2); text-align:center}
.ckset{width:40px; height:40px; margin:0 auto; border-radius:var(--r-sm); box-shadow:inset 0 0 0 1px var(--line);
  display:flex; align-items:center; justify-content:center; color:var(--muted); background:rgba(255,255,255,.06); transition:all .12s}
.ckset.on{background:var(--good); color:#08301C; box-shadow:none}
.videobox{background:#0B0824; border-radius:var(--r-md); height:56px; padding:0 14px;
  display:flex; align-items:center; color:#fff; margin:10px 0 4px; gap:11px; font-weight:500; font-size:13px; cursor:pointer;
  position:relative; overflow:hidden}
.videobox::after{content:''; position:absolute; inset:0; background:var(--grad); opacity:.5}
.videobox > *{position:relative; z-index:1}
.videobox .play{width:32px; height:32px; border-radius:var(--r-pill); background:rgba(255,255,255,.22);
  display:flex; align-items:center; justify-content:center; flex-shrink:0}
#sheet .videobox{height:112px; justify-content:center}
.cue{display:flex; gap:9px; font-size:13px; color:var(--ink2); margin-top:7px; line-height:1.45}
.cue::before{content:''; width:5px; height:5px; border-radius:50%; background:var(--violet); margin-top:7px; flex-shrink:0}
.slider{width:100%; accent-color:var(--violet); height:30px}

/* ---- chat ---- */
.msgs{display:flex; flex-direction:column; gap:8px}
.msg{max-width:80%; padding:11px 14px; border-radius:var(--r-lg); font-size:14px; line-height:1.45}
.msg.client{align-self:flex-end; background:var(--grad); color:#fff; border-bottom-right-radius:6px}
.msg.coach{align-self:flex-start; background:var(--glass-strong); backdrop-filter:var(--blur);
  box-shadow:var(--lift-1); border:1px solid var(--glass-line); border-bottom-left-radius:6px}
.msg .mt{font-size:10.5px; opacity:.65; margin-top:4px}
.chatbox{display:flex; gap:8px; padding:12px 0 0}
.chatbox input{flex:1; padding:12px 16px; border-radius:var(--r-pill); border:1px solid var(--line); background:var(--input); color:var(--ink)}
.chatbox input:focus{outline:none; border-color:var(--violet); box-shadow:0 0 0 3px var(--violet-soft)}
.chatbox .send{background:var(--grad); color:#fff; border-radius:var(--r-pill); width:44px; height:44px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; box-shadow:var(--lift-grad)}

/* ---- stat tiles ---- */
.tiles{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.tile{background:var(--glass); backdrop-filter:var(--blur); border:1px solid var(--glass-line);
  border-radius:var(--r-md); box-shadow:var(--lift-1); padding:14px 15px; position:relative; z-index:1}
.tile .v{font-size:26px; font-weight:700; letter-spacing:-.045em; line-height:1.1}
.tile .l{font-size:11.5px; color:var(--muted); font-weight:500; margin-top:3px}
.tile .d{font-size:11.5px; font-weight:600; margin-top:3px; display:flex; align-items:center; gap:3px}
.up{color:var(--good)} .dn{color:var(--crit)}

/* ---- charts ---- */
.viz{position:relative}
.viz svg{display:block; width:100%; height:auto}
.viz .tip{position:absolute; pointer-events:none; background:#F2F0FF; color:#14103A; font-size:11.5px;
  padding:7px 10px; border-radius:10px; opacity:0; transform:translate(-50%,-115%); white-space:nowrap; z-index:5;
  box-shadow:0 8px 22px -6px rgba(0,0,0,.7)}
.legend{display:flex; gap:14px; flex-wrap:wrap; margin-top:9px}
.legend .li{display:flex; align-items:center; gap:6px; font-size:12px; color:var(--ink2); font-weight:500}
.legend .sw{width:10px; height:10px; border-radius:3px}

/* ---- tier cards ---- */
.tier{border-radius:var(--r-lg); padding:17px; box-shadow:inset 0 0 0 1px var(--line);
  background:var(--glass); backdrop-filter:var(--blur); transition:box-shadow .12s}
.tier.on{box-shadow:inset 0 0 0 2px var(--violet); background:rgba(142,107,255,.14)}
.tier .feat{display:flex; gap:9px; font-size:13px; color:var(--ink2); margin-top:8px; align-items:flex-start; line-height:1.4}
.tier .feat svg{color:var(--teal); margin-top:2px; flex-shrink:0}

/* ---- toggles ---- */
.tgl{width:46px; height:27px; border-radius:var(--r-pill); background:rgba(255,255,255,.16); position:relative;
  transition:background .16s; flex-shrink:0}
.tgl::after{content:''; position:absolute; width:21px; height:21px; border-radius:50%; background:#fff; top:3px; left:3px;
  transition:left .16s; box-shadow:0 1px 4px rgba(0,0,0,.5)}
.tgl.on{background:var(--grad)} .tgl.on::after{left:22px}

/* ---- sheet ---- */
#sheetwrap{position:fixed; inset:0; z-index:100; display:none}
#sheetwrap.open{display:block}
#sheetwrap .dim{position:absolute; inset:0; background:rgba(6,4,20,.62); backdrop-filter:blur(4px)}
#sheet{position:absolute; left:50%; transform:translateX(-50%); bottom:0; width:100%; max-width:430px;
  background:#1B1547; border-top:1px solid var(--glass-line); border-radius:var(--r-xl) var(--r-xl) 0 0; padding:18px 18px calc(22px + env(safe-area-inset-bottom));
  max-height:88vh; overflow-y:auto; box-shadow:0 -12px 50px -12px rgba(27,22,56,.4)}
#sheet .grab{width:38px; height:4px; border-radius:var(--r-pill); background:rgba(255,255,255,.22); margin:0 auto 16px}

/* ---- toast ---- */
#toast{position:fixed; left:50%; bottom:96px; transform:translateX(-50%) translateY(20px); background:#F2F0FF;
  color:#14103A; padding:12px 20px; border-radius:var(--r-pill); font-size:13.5px; font-weight:500; opacity:0;
  transition:all .26s cubic-bezier(.4,0,.2,1); z-index:200; pointer-events:none; white-space:nowrap; max-width:92vw;
  box-shadow:0 10px 34px -8px rgba(0,0,0,.75)}
#toast.show{opacity:1; transform:translateX(-50%) translateY(0)}

/* ---- coach portal ---- */
#coachwrap{display:flex; flex-direction:column}
.co-head{display:flex; align-items:center; gap:6px; padding:14px 20px;
  background:rgba(15,12,44,.72); backdrop-filter:var(--blur); border-bottom:1px solid var(--glass-line);
  position:sticky; top:var(--topbar-h); z-index:40; overflow-x:auto}
.co-head .cn{font-weight:500; font-size:13.5px; color:var(--ink2); padding:8px 14px; border-radius:var(--r-pill); white-space:nowrap}
.co-head .cn.on{background:#fff; color:#14103A; font-weight:600}
.co-body{padding:22px 20px 40px; display:flex; flex-direction:column; gap:14px; max-width:900px; margin:0 auto; width:100%;
  position:relative; z-index:1}
.client-row{display:flex; gap:12px; align-items:center; width:100%; text-align:left}
.avatar{width:44px; height:44px; border-radius:50%; color:#14103A; font-weight:700; display:flex; align-items:center;
  justify-content:center; flex-shrink:0; font-size:16px; letter-spacing:-.02em}
table.dtable{width:100%; border-collapse:collapse; font-size:13.5px}
table.dtable th{text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.08em;
  color:var(--muted); padding:7px 8px; font-weight:600}
table.dtable td{padding:9px 8px; border-top:1px solid var(--line); font-variant-numeric:tabular-nums}
.libgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(215px,1fr)); gap:10px}

@media (max-width:520px){ .grid2:not(.keep2){grid-template-columns:1fr} .tiles{grid-template-columns:1fr 1fr} }
#sheet .grid2, #screen .grid2{grid-template-columns:1fr 1fr}

/* ============================================================
 * Library filters, call surface, community
 * ============================================================ */

/* horizontally scrollable chip rows — filters shouldn't wrap on a phone */
.filterscroll{display:flex; gap:6px; overflow-x:auto; padding-bottom:4px; -webkit-overflow-scrolling:touch;
  scrollbar-width:none}
.filterscroll::-webkit-scrollbar{display:none}
.filterwrap{display:flex; gap:6px; flex-wrap:wrap}
.libsel{border:1px solid var(--line); border-radius:var(--r-sm); padding:6px 9px; background:var(--input);
  color:var(--ink); font-size:12.5px; font-weight:600}
.libsel:focus{outline:none; border-color:var(--violet)}

/* ---- call ---- */
#callwrap{position:fixed; inset:0; z-index:150; display:none; background:#07061A}
#callwrap.open{display:block}
#callbody{max-width:520px; margin:0 auto; height:100%; display:flex; flex-direction:column;
  padding-top:env(safe-area-inset-top)}
.callhead{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 18px 10px}
.livedot{width:8px; height:8px; border-radius:50%; background:var(--crit); box-shadow:0 0 0 4px rgba(255,122,138,.18);
  animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.callstage{flex:1; position:relative; padding:8px 18px 12px; display:flex; flex-direction:column; min-height:0}
.calltile{position:relative; border-radius:var(--r-lg); overflow:hidden; background:#15113A;
  border:1px solid var(--glass-line); display:flex; align-items:center; justify-content:center}
.calltile.big{flex:1; min-height:0}
.calltile.pip{position:absolute; right:30px; bottom:26px; width:104px; height:140px; z-index:3;
  box-shadow:0 12px 30px -10px rgba(0,0,0,.8)}
.calltile video{width:100%; height:100%; object-fit:cover; transform:scaleX(-1)}
.callavatar{width:84px; height:84px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:32px; font-weight:700; color:#14103A}
.calltile.pip .callavatar{width:46px; height:46px; font-size:18px}
.calltag{position:absolute; left:12px; bottom:11px; display:flex; align-items:center; gap:5px;
  background:rgba(7,6,26,.6); backdrop-filter:blur(8px); color:#fff; font-size:11.5px; font-weight:600;
  padding:5px 10px; border-radius:var(--r-pill)}
.calltile.pip .calltag{left:8px; bottom:8px; font-size:10px; padding:3px 8px}
.callnote{position:absolute; left:16px; right:16px; bottom:56px; text-align:center; font-size:12px;
  color:var(--muted); line-height:1.45}
.callpulse{width:64px; height:64px; border-radius:50%; margin:0 auto; background:var(--grad);
  animation:breathe 1.4s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.16);opacity:.5}}
.callchatpanel{position:absolute; left:18px; right:18px; bottom:12px; top:40%; z-index:4;
  background:rgba(20,16,58,.92); backdrop-filter:var(--blur); border:1px solid var(--glass-line);
  border-radius:var(--r-lg); padding:12px; display:flex; flex-direction:column}
.callctl{display:flex; gap:8px; justify-content:center; padding:10px 18px calc(20px + env(safe-area-inset-bottom))}
.cbtn{flex:1; max-width:96px; display:flex; flex-direction:column; align-items:center; gap:5px; padding:12px 6px;
  border-radius:var(--r-md); background:rgba(255,255,255,.08); color:var(--ink); font-size:10.5px; font-weight:600}
.cbtn span{white-space:nowrap}
.cbtn.off{background:rgba(255,122,138,.18); color:var(--crit)}
.cbtn.end{background:var(--crit); color:#3A0A10}