:root {
    --bg:#090b12; --side:#0e1019; --panel:#11131d; --card:#171a26; --card2:#1d2130; --line:#232738;
    --txt:#eceef5; --mut:#8a90a6; --acc:#7c5cff; --acc2:#9b82ff; --accbg:#7c5cff22;
    --grn:#34d399; --red:#e5484d; --redbg:#b4232a; --r:14px;
  }
  * { box-sizing:border-box; }
  [hidden] { display:none !important; }
  html, body { height:100%; }
  body { margin:0; background:var(--bg); color:var(--txt); font:15px/1.4 "Segoe UI", system-ui, sans-serif; overflow:hidden; }
  button, select, input { font:inherit; color:inherit; }
  button { cursor:pointer; border:0; background:none; }
  svg.i { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:none; }

  .app { display:grid; grid-template-columns:230px 1fr 340px; gap:14px; height:100vh; padding:14px; }
  body.nochat .app { grid-template-columns:230px 1fr; }
  body.nochat .chat { display:none; }

  /* ---------- Barra lateral ---------- */
  .side { background:var(--side); border:1px solid var(--line); border-radius:var(--r); display:flex; flex-direction:column; padding:18px 12px; min-height:0; }
  .logo { display:flex; align-items:center; gap:10px; padding:0 8px 22px; font-size:21px; font-weight:700; letter-spacing:-.01em; }
  .logo .mark { width:38px; height:38px; border-radius:11px; display:grid; place-items:center; font-size:22px; background:linear-gradient(135deg,#7c5cff,#34d399); box-shadow:0 4px 18px #7c5cff55; }
  .logo b { color:var(--acc2); font-weight:700; }
  .nav button { display:flex; align-items:center; gap:12px; width:100%; padding:12px 14px; border-radius:10px; color:#c9cddd; margin-bottom:4px; text-align:left; position:relative; }
  .nav button:hover { background:#ffffff08; }
  .nav button.active { background:var(--accbg); color:var(--acc2); }
  .badge { background:var(--acc); color:#fff; font-size:11px; border-radius:20px; padding:1px 7px; margin-left:auto; }
  .side .grow { flex:1; }
  .roominfo { padding:0 10px 14px; }
  .roominfo small { color:var(--mut); font-size:13px; }
  .roominfo h3 { margin:4px 0 2px; font-size:17px; word-break:break-word; }
  .roominfo p { margin:0; color:var(--mut); font-size:14px; }
  .btn2 { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:11px; border-radius:10px; background:var(--card2); border:1px solid var(--line); }
  .btn2:hover { background:#262b3d; }
  .me { display:flex; align-items:center; gap:10px; border-top:1px solid var(--line); margin-top:14px; padding:14px 6px 0; }
  .me .nm { font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .me .st { font-size:13px; color:var(--mut); display:flex; align-items:center; gap:6px; }
  .me .st::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--grn); }

  .av { width:38px; height:38px; border-radius:50%; display:grid; place-items:center; font-weight:700; font-size:15px; color:#fff; flex:none; transition:box-shadow .15s; }
  .av.talk { box-shadow:0 0 0 2px var(--bg), 0 0 0 4px var(--grn); }

  /* ---------- Centro ---------- */
  .center { display:flex; flex-direction:column; gap:14px; min-width:0; min-height:0; }
  .top { display:flex; align-items:center; gap:14px; background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:14px 18px; }
  .top h1 { margin:0; font-size:21px; display:flex; align-items:center; gap:10px; min-width:0; }
  .top h1 span.t { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .live { font-size:13px; font-weight:600; color:#ff8a8f; background:#e5484d22; border-radius:6px; padding:2px 9px; display:flex; align-items:center; gap:6px; }
  .live::before { content:""; width:7px; height:7px; border-radius:50%; background:#ff5a61; animation:pulse 1.4s infinite; }
  @keyframes pulse { 50% { opacity:.3; } }
  .top .sub { color:var(--mut); font-size:14px; display:flex; align-items:center; gap:7px; margin-top:3px; }
  .top .grow { flex:1; min-width:0; }
  .pill { display:flex; align-items:center; gap:7px; padding:10px 14px; border-radius:10px; background:var(--card); border:1px solid var(--line); font-weight:600; }
  .btnacc { display:flex; align-items:center; gap:8px; padding:10px 16px; border-radius:10px; background:var(--acc); color:#fff; font-weight:600; }
  .btnacc:hover { background:var(--acc2); }

  .stage { position:relative; flex:1; min-height:0; background:#000; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
  .stage video { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#000; }
  .stage.cover video { object-fit:cover; }
  .stage .ov { position:absolute; display:flex; gap:8px; align-items:center; }
  .chip { display:flex; align-items:center; gap:7px; background:#0b0d16d9; backdrop-filter:blur(6px); border:1px solid #ffffff14; border-radius:9px; padding:7px 11px; font-size:14px; }
  button.chip:hover { background:#1a1d2bdd; }
  .stage .tl { left:14px; top:14px; } .stage .bl { left:14px; bottom:14px; } .stage .br { right:14px; bottom:14px; }
  .chip input[type=range] { width:110px; accent-color:var(--acc); }
  .stage .ui { opacity:1; transition:opacity .25s; }
  .stage.idle .ui { opacity:0; }
  .empty { position:absolute; inset:0; display:grid; place-items:center; text-align:center; color:var(--mut); padding:20px;
           background:radial-gradient(ellipse at 50% 120%, #7c5cff33, transparent 60%), radial-gradient(ellipse at 20% -10%, #34d39922, transparent 50%); }
  .empty .big { font-size:72px; filter:drop-shadow(0 6px 24px #7c5cff66); }
  .empty h2 { color:var(--txt); margin:8px 0 6px; font-size:22px; }
  .floaty { position:absolute; bottom:70px; font-size:38px; pointer-events:none; animation:floatup 3s ease-out forwards; text-align:center; }
  .floaty small { display:block; font-size:12px; background:#000a; border-radius:6px; padding:1px 6px; color:#fff; }
  @keyframes floatup { 0% { transform:translateY(0) scale(.6); opacity:0; } 12% { opacity:1; transform:translateY(-20px) scale(1); } 100% { transform:translateY(-320px); opacity:0; } }

  .strip { display:flex; gap:10px; height:150px; flex:none; }
  .pt { position:relative; flex:1; max-width:230px; min-width:0; background:var(--card); border:2px solid transparent; border-radius:12px; overflow:hidden; display:grid; place-items:center; cursor:default; }
  .pt.sharing { cursor:pointer; }
  .pt.feat { border-color:var(--acc); }
  .pt video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
  .pt .av { width:64px; height:64px; font-size:24px; }
  .pt .nm { position:absolute; left:8px; bottom:8px; background:#000b; border-radius:7px; padding:3px 9px; font-size:14px; max-width:calc(100% - 16px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .pt .ic { position:absolute; right:8px; top:8px; display:flex; gap:5px; }
  .pt .ic span { width:28px; height:28px; border-radius:8px; display:grid; place-items:center; background:#000b; }
  .pt .ic .scr { background:var(--acc); }
  .pt .ic svg { width:16px; height:16px; }
  .pt.more { flex-direction:column; cursor:pointer; color:var(--mut); }
  .pt.more b { font-size:28px; color:var(--txt); }

  .bar { display:flex; align-items:center; gap:6px; background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:10px 14px; flex:none; }
  .ctl { display:flex; flex-direction:column; align-items:center; gap:5px; min-width:88px; padding:9px 12px; border-radius:11px; color:#d4d7e3; font-size:13px; position:relative; }
  .ctl:hover { background:#ffffff0a; }
  .ctl svg.i { width:24px; height:24px; }
  .ctl.on { background:var(--accbg); color:var(--acc2); }
  .ctl.bad { color:#ff7b81; }
  .ctl .dot { position:absolute; top:6px; right:22px; width:9px; height:9px; border-radius:50%; background:var(--acc); }
  .bar .grow { flex:1; }
  .end { display:flex; align-items:center; gap:9px; padding:14px 22px; border-radius:11px; background:var(--redbg); color:#fff; font-weight:600; }
  .end:hover { background:var(--red); }
  .pop { position:absolute; bottom:calc(100% + 10px); left:50%; transform:translateX(-50%); background:var(--card2); border:1px solid var(--line); border-radius:12px; padding:6px; display:flex; gap:2px; box-shadow:0 10px 30px #0008; z-index:5; }
  .pop button { font-size:24px; padding:6px 8px; border-radius:8px; }
  .pop button:hover { background:#ffffff12; transform:scale(1.15); }

  /* ---------- Chat / participantes ---------- */
  .chat { background:var(--panel); border:1px solid var(--line); border-radius:var(--r); display:flex; flex-direction:column; min-height:0; }
  .chat h2 { margin:0; padding:18px 20px 8px; font-size:22px; display:flex; align-items:center; }
  .chat h2 button { margin-left:auto; color:var(--mut); padding:4px; border-radius:8px; }
  .chat h2 button:hover { color:var(--txt); background:#ffffff0a; }
  .tabs { display:flex; margin:0 14px; border-bottom:1px solid var(--line); }
  .tabs button { flex:1; padding:12px; color:var(--mut); border-bottom:2px solid transparent; margin-bottom:-1px; }
  .tabs button.active { color:var(--acc2); border-color:var(--acc); }
  .msgs { flex:1; overflow:auto; padding:14px 18px; }
  .msg { display:flex; gap:12px; margin-bottom:18px; }
  .msg .hd { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
  .msg .hd b { font-weight:600; }
  .msg .hd time { color:var(--mut); font-size:12px; }
  .tag { font-size:11px; color:var(--acc2); background:var(--accbg); border-radius:5px; padding:1px 7px; }
  .msg .tx { margin-top:2px; word-wrap:break-word; overflow-wrap:anywhere; }
  .sys { text-align:center; color:var(--mut); font-size:13px; margin:0 0 14px; }
  .send { display:flex; gap:8px; padding:14px; border-top:1px solid var(--line); }
  .send input { flex:1; min-width:0; background:var(--card); border:1px solid var(--line); border-radius:10px; padding:12px 14px; outline:none; }
  .send input:focus { border-color:var(--acc); }
  .send button { width:46px; border-radius:10px; background:var(--acc); color:#fff; display:grid; place-items:center; }
  .plist { flex:1; overflow:auto; padding:10px 14px; }
  .pr { display:flex; align-items:center; gap:10px; padding:9px 6px; border-radius:10px; }
  .pr:hover { background:#ffffff06; }
  .pr .nm { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .pr .nm small { color:var(--mut); }
  .pr svg { width:17px; height:17px; color:var(--mut); }
  .pr input[type=range] { width:80px; accent-color:var(--acc); }

  /* ---------- Música ---------- */
  .music { flex:1; overflow:auto; padding:14px; display:flex; flex-direction:column; gap:14px; }
  .addf { display:flex; gap:8px; }
  .addf input { flex:1; min-width:0; background:var(--card); border:1px solid var(--line); border-radius:10px; padding:11px 13px; outline:none; }
  .addf input:focus { border-color:var(--acc); }
  .addf button { padding:0 14px; border-radius:10px; background:var(--acc); color:#fff; font-weight:600; }
  .addf button:disabled { opacity:.6; }
  .now { background:linear-gradient(160deg,#7c5cff26,var(--card) 60%); border:1px solid var(--line); border-radius:14px; padding:14px; }
  .now img { width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:10px; display:block; background:#000; }
  .now h4 { margin:10px 0 2px; font-size:15px; line-height:1.3; overflow-wrap:anywhere; }
  .now .by { color:var(--mut); font-size:13px; }
  .prog { height:6px; background:#ffffff14; border-radius:6px; margin:12px 0 4px; cursor:pointer; position:relative; }
  .prog i { position:absolute; inset:0 auto 0 0; background:var(--acc); border-radius:6px; width:0; }
  .times { display:flex; justify-content:space-between; font-size:12px; color:var(--mut); }
  .mctl { display:flex; align-items:center; gap:8px; margin-top:10px; }
  .mctl button { width:42px; height:42px; border-radius:50%; display:grid; place-items:center; background:var(--card2); border:1px solid var(--line); }
  .mctl button.main { background:var(--acc); border-color:var(--acc); color:#fff; }
  .mctl input { flex:1; accent-color:var(--acc); min-width:0; }
  .mempty { text-align:center; color:var(--mut); padding:24px 10px; border:1px dashed var(--line); border-radius:14px; }
  .mempty b { display:block; font-size:34px; margin-bottom:6px; }
  .qh { display:flex; align-items:center; color:var(--mut); font-size:12px; text-transform:uppercase; letter-spacing:.06em; }
  .qh button { margin-left:auto; color:var(--mut); font-size:12px; text-transform:none; letter-spacing:0; }
  .qh button:hover { color:var(--txt); }
  .qi { display:flex; gap:10px; align-items:center; padding:6px; border-radius:10px; }
  .qi:hover { background:#ffffff06; }
  .qi img { width:64px; height:36px; object-fit:cover; border-radius:6px; flex:none; background:#000; }
  .qi div { flex:1; min-width:0; }
  .qi .t { font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .qi .b { font-size:12px; color:var(--mut); }
  .qi button { color:var(--mut); padding:4px; border-radius:6px; }
  .qi button:hover { color:#ff7b81; background:#ffffff0a; }
  .qi button svg { width:16px; height:16px; }
  .nowchip { display:flex; align-items:center; gap:8px; max-width:260px; padding:10px 14px; border-radius:10px; background:var(--card); border:1px solid var(--line); font-size:14px; }
  .nowchip span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .nowchip .eq { display:flex; gap:2px; align-items:flex-end; height:14px; flex:none; }
  .nowchip .eq i { width:3px; background:var(--acc2); border-radius:2px; animation:eq 1s infinite ease-in-out; }
  .nowchip .eq i:nth-child(2) { animation-delay:.2s; } .nowchip .eq i:nth-child(3) { animation-delay:.4s; }
  .nowchip.paused .eq i { animation:none; height:4px; }
  @keyframes eq { 0%,100% { height:4px; } 50% { height:14px; } }
  /* ---------- Menu de pessoa ---------- */
  .pmenu { position:fixed; z-index:40; min-width:230px; background:var(--card2); border:1px solid #2e3346; border-radius:12px; padding:6px; box-shadow:0 14px 40px #000b; }
  .pmenu .hd { display:flex; align-items:center; gap:10px; padding:8px 8px 10px; border-bottom:1px solid var(--line); margin-bottom:4px; font-weight:600; }
  .pmenu .hd .av { width:34px; height:34px; font-size:13px; }
  .pmenu button { display:flex; align-items:center; gap:10px; width:100%; text-align:left; padding:9px 10px; border-radius:8px; font-size:14px; }
  .pmenu button:hover { background:#ffffff0d; }
  .pmenu button.danger { color:#ff7b81; }
  .pmenu button svg { width:17px; height:17px; }
  .pmenu .vol { display:flex; align-items:center; gap:8px; padding:8px 10px; font-size:13px; color:var(--mut); }
  .pmenu .vol input { flex:1; accent-color:var(--acc); }
  .pmenu .note { font-size:12px; color:var(--mut); padding:4px 10px 6px; }
  .pt .ic .forced { background:var(--redbg); }
  .pt .crown, .pr .crown { font-size:13px; margin-left:4px; }
  .pt .more-btn { position:absolute; left:8px; top:8px; width:28px; height:28px; border-radius:8px; background:#000b; display:grid; place-items:center; opacity:0; transition:.15s; }
  .pt:hover .more-btn { opacity:1; }
  .pr .more-btn { color:var(--mut); padding:4px 6px; border-radius:6px; font-size:18px; line-height:1; }
  .pr .more-btn:hover { background:#ffffff12; color:var(--txt); }

  /* ---------- Foto de perfil ---------- */
  .av.img { background-size:cover !important; background-position:center !important; color:transparent; }
  .pick { display:flex; align-items:center; gap:14px; }
  .pick .av { width:64px; height:64px; font-size:24px; cursor:pointer; position:relative; }
  .pick .av::after { content:"📷"; position:absolute; right:-4px; bottom:-4px; font-size:14px; background:var(--card2); border:1px solid var(--line); border-radius:50%; width:26px; height:26px; display:grid; place-items:center; color:#fff; }
  .pick .links { display:flex; flex-direction:column; gap:4px; align-items:flex-start; }
  .pick .links button { color:var(--acc2); font-size:14px; padding:0; }
  .pick .links button.rm { color:var(--mut); font-size:13px; }
  #meAv { cursor:pointer; }

  /* ---------- Soundpad ---------- */
  .sounds { flex:1; overflow:auto; padding:14px; display:flex; flex-direction:column; gap:12px; }
  .sbar { display:flex; gap:8px; align-items:center; }
  .sbar input[type=search] { flex:1; min-width:0; background:var(--card); border:1px solid var(--line); border-radius:10px; padding:10px 12px; outline:none; }
  .sbar input[type=search]:focus { border-color:var(--acc); }
  .sbar .sq { width:40px; height:40px; border-radius:10px; display:grid; place-items:center; background:var(--card2); border:1px solid var(--line); flex:none; }
  .sbar .sq.acc { background:var(--acc); border-color:var(--acc); color:#fff; }
  .sbar .sq.stop { color:#ff7b81; }
  .svol { display:flex; align-items:center; gap:8px; color:var(--mut); font-size:13px; }
  .svol input { flex:1; accent-color:var(--acc); }
  .sgrid { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
  .sb { position:relative; text-align:left; padding:12px 12px 12px 14px; border-radius:12px; background:var(--card); border:1px solid var(--line); min-height:62px; display:flex; flex-direction:column; justify-content:center; overflow:hidden; transition:transform .08s; }
  .sb:hover { background:var(--card2); border-color:#363c55; }
  .sb:active { transform:scale(.97); }
  .sb .t { font-size:14px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding-right:20px; }
  .sb .k { position:absolute; top:7px; right:8px; font-size:11px; color:var(--mut); border:1px solid var(--line); border-radius:5px; padding:0 5px; }
  .sb .pv { position:absolute; bottom:6px; right:6px; color:var(--mut); padding:3px; border-radius:6px; }
  .sb .pv:hover { color:var(--txt); background:#ffffff12; }
  .sb .pv svg { width:15px; height:15px; }
  .sb.playing { border-color:var(--acc); background:linear-gradient(90deg,#7c5cff33,var(--card)); }
  .sb.playing::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--acc); }
  .shelp { font-size:12px; color:var(--mut); line-height:1.5; }
  .shelp code { background:var(--card2); padding:1px 5px; border-radius:4px; }
  .drop { outline:2px dashed var(--acc); outline-offset:-6px; }

  #ytHolder { position:fixed; left:-10000px; top:0; width:320px; height:180px; }

  /* ---------- Modais ---------- */
  .modal { position:fixed; inset:0; background:#05060bcc; backdrop-filter:blur(4px); display:grid; place-items:center; z-index:20; }
  .box { background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:28px; width:min(420px,92vw); display:flex; flex-direction:column; gap:10px; box-shadow:0 20px 60px #000a; }
  .box h2 { margin:0 0 6px; display:flex; align-items:center; gap:10px; }
  .box label { font-size:13px; color:var(--mut); margin-top:4px; }
  .box input, .box select { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:11px 13px; outline:none; width:100%; }
  .box input:focus, .box select:focus { border-color:var(--acc); }
  .box .btnacc { justify-content:center; padding:12px; margin-top:8px; }
  .box .note { font-size:12px; color:var(--mut); margin:0; }
  .warn { background:#5a1d1d; color:#ffd7d7; padding:10px 12px; border-radius:10px; font-size:13px; }
  .toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); background:var(--card2); border:1px solid var(--line); padding:11px 18px; border-radius:10px; z-index:30; box-shadow:0 10px 30px #0008; }

  /* ---------- Modo cinema ---------- */
  body.cinema .app { grid-template-columns:1fr; padding:0; }
  body.cinema .side, body.cinema .chat, body.cinema .top, body.cinema .strip, body.cinema .bar { display:none; }
  body.cinema .stage { border:0; border-radius:0; }

  @media (max-width:1100px) {
    .app { grid-template-columns:76px 1fr 300px; }
    body.nochat .app { grid-template-columns:76px 1fr; }
    .logo span, .nav button span, .roominfo, .side .btn2 span, .me > div { display:none; }
    .logo { justify-content:center; padding:0 0 20px; }
    .nav button { justify-content:center; }
    .ctl { min-width:64px; font-size:11px; }
  }

  /* ---------- Conta, configurações em abas, administração ---------- */
  .linkbtn { color:var(--acc2); padding:0; }
  .linkbtn:hover { text-decoration:underline; }
  .stabs { display:flex; gap:4px; background:var(--card); border:1px solid var(--line); border-radius:10px; padding:4px; margin-bottom:4px; }
  .stabs button { flex:1; padding:8px; border-radius:7px; color:var(--mut); font-size:14px; }
  .stabs button.active { background:var(--accbg); color:var(--acc2); }
  .spage { display:flex; flex-direction:column; gap:10px; max-height:60vh; overflow:auto; padding-right:2px; }
  .box .row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
  .box .row input { flex:1; width:auto; min-width:0; }
  .btn2.small { width:auto; padding:10px 14px; }
  .btn2.danger { color:#ff7b81; }
  details.pw { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:10px 12px; }
  details.pw summary { cursor:pointer; color:var(--mut); font-size:14px; }
  details.pw[open] { display:flex; flex-direction:column; gap:8px; }
  .box.wide { width:min(860px,94vw); max-height:90vh; overflow:auto; }
  .box h3 { margin:12px 0 2px; font-size:15px; color:var(--mut); text-transform:uppercase; letter-spacing:.05em; }
  .xbtn { margin-left:auto; color:var(--mut); padding:4px; border-radius:8px; }
  .xbtn:hover { color:var(--txt); background:#ffffff0a; }
  #invForm label { display:flex; flex-direction:column; gap:4px; margin:0; }
  #invForm label.grow { flex:1; min-width:160px; }
  #invForm input { width:100px; }
  #invForm label.grow input { width:100%; }
  #invForm .btnacc { margin-top:auto; padding:11px 16px; }
  .tbl { display:flex; flex-direction:column; gap:6px; }
  .tr { display:flex; align-items:center; gap:10px; flex-wrap:wrap; background:var(--card); border:1px solid var(--line); border-radius:10px; padding:10px 12px; font-size:14px; }
  .tr .grow { flex:1; min-width:140px; }
  .tr small { color:var(--mut); }
  .tr code { font-size:15px; letter-spacing:.06em; background:var(--card2); padding:3px 8px; border-radius:6px; }
  .tr button { color:var(--acc2); font-size:13px; padding:4px 8px; border-radius:6px; }
  .tr button:hover { background:#ffffff0d; }
  .tr button.danger { color:#ff7b81; }
  .tr.off { opacity:.55; }
  .pill-s { font-size:11px; padding:1px 7px; border-radius:5px; background:var(--accbg); color:var(--acc2); }
  .pill-s.red { background:#e5484d22; color:#ff8a8f; }
  .sb .del { position:absolute; bottom:6px; right:28px; color:var(--mut); padding:3px; border-radius:6px; }
  .sb .del:hover { color:#ff7b81; background:#ffffff12; }
  .sb .del svg { width:15px; height:15px; }
  .ptt-on { box-shadow:0 0 0 2px var(--grn) inset; }