:root{
      --bg:#0b0f14; --panel:rgba(255,255,255,.06); --panel2:rgba(255,255,255,.05);
      --border:rgba(255,255,255,.13); --text:#d7e3f4; --muted:rgba(215,227,244,.58);
      --accent:#7cff6b; --headH:64px;
      --tHour: #f5b24a;
      --tMin:  #ff6aa6;
      --tSec:  #b36cff;
      --accent2:#6be4ff; --danger:#ff7a7a;
      --mono:ui-monospace, Menlo, Consolas, monospace; --radius:16px; --shadow:0 16px 44px rgba(0,0,0,.36);
    }

    /* Theme: Hestio (default) */
    html[data-theme="hestio"]{
      --bg:#0b0f14; --panel:rgba(255,255,255,.06); --panel2:rgba(255,255,255,.05);
      --border:rgba(255,255,255,.13); --text:#d7e3f4; --muted:rgba(215,227,244,.58);
      --accent:#7cff6b; --headH:64px; --accent2:#6be4ff;
    }
    html[data-theme="hestio"] body{
      background:
        radial-gradient(900px 520px at 15% 10%, rgba(124,255,107,.14), transparent 60%),
        radial-gradient(900px 520px at 80% 35%, rgba(107,228,255,.12), transparent 60%),
        linear-gradient(180deg, rgba(0,0,0,.40), rgba(0,0,0,.58)), var(--bg);
    }

    /* Theme: Mono (neutral, minimal color) */
    html[data-theme="mono"]{
      --bg:#08090b; --panel:rgba(255,255,255,.03); --panel2:rgba(255,255,255,.025);
      --border:rgba(255,255,255,.18); --text:#f2f6ff; --muted:rgba(242,246,255,.55);
      --accent:#f2f6ff; --accent2:rgba(242,246,255,.75);
    }
    html[data-theme="mono"] body{
      background:
        radial-gradient(900px 520px at 20% 15%, rgba(255,255,255,.06), transparent 62%),
        linear-gradient(180deg, #050607, #0a0b0d 65%, #050507);
    }

    /* Theme: Grafitas (soft premium gray) */
    html[data-theme="graphite"]{
      --bg:#0e1013; --panel:rgba(255,255,255,.07); --panel2:rgba(255,255,255,.06);
      --border:rgba(255,255,255,.16); --text:#e2e8f3; --muted:rgba(226,232,243,.60);
      --accent:#aeb7c6; --accent2:#7cff6b;
    }
    html[data-theme="graphite"] body{
      background:
        radial-gradient(900px 520px at 15% 10%, rgba(255,255,255,.05), transparent 62%),
        radial-gradient(700px 420px at 90% 30%, rgba(255,255,255,.03), transparent 60%),
        linear-gradient(180deg, #0b0d10, #0a0c0f 62%, #07080a);
    }

    /* Theme: Vandenynas (teal / cyan) */
    html[data-theme="ocean"]{
      --bg:#041217; --panel:rgba(255,255,255,.06); --panel2:rgba(255,255,255,.05);
      --border:rgba(107,228,255,.22); --text:#d8f1ff; --muted:rgba(216,241,255,.60);
      --accent:#2cf0d0; --accent2:#6be4ff;
    }
    html[data-theme="ocean"] body{
      background:
        radial-gradient(900px 520px at 15% 10%, rgba(44,240,208,.18), transparent 60%),
        radial-gradient(900px 520px at 85% 20%, rgba(107,228,255,.12), transparent 62%),
        radial-gradient(700px 420px at 60% 90%, rgba(0,140,255,.07), transparent 60%),
        linear-gradient(180deg, #021014, #041217 55%, #02080b);
    }

    
    /* Theme: Slyva (violet / magenta night) */
    html[data-theme="plum"]{
      --bg:#120713; --panel:rgba(255,255,255,.06); --panel2:rgba(255,255,255,.05);
      --border:rgba(255,165,245,.22); --text:#f3e6ff; --muted:rgba(243,230,255,.62);
      --accent:#ff57d8; --accent2:#b58bff;
    }
    html[data-theme="plum"] body{
      background:
        radial-gradient(900px 520px at 14% 12%, rgba(255,87,216,.16), transparent 60%),
        radial-gradient(900px 520px at 86% 22%, rgba(181,139,255,.14), transparent 62%),
        radial-gradient(760px 440px at 55% 92%, rgba(255,140,0,.06), transparent 60%),
        linear-gradient(180deg, #0a0610, #120713 56%, #07040b);
    }

    /* Theme: Kosmosas (crazy cosmic multicolor) */
    html[data-theme="cosmos"]{
      --bg:#070410; --panel:rgba(255,255,255,.06); --panel2:rgba(255,255,255,.05);
      --border:rgba(181,139,255,.24); --text:#f3edff; --muted:rgba(243,237,255,.62);
      --accent:#6be4ff; --accent2:#ff57d8;
    }
    html[data-theme="cosmos"] body{
      background:
        radial-gradient(900px 520px at 12% 12%, rgba(107,228,255,.18), transparent 60%),
        radial-gradient(900px 520px at 86% 18%, rgba(255,87,216,.16), transparent 62%),
        radial-gradient(760px 440px at 26% 86%, rgba(181,139,255,.14), transparent 60%),
        radial-gradient(760px 440px at 74% 88%, rgba(124,255,107,.08), transparent 62%),
        radial-gradient(520px 320px at 50% 45%, rgba(255,255,255,.05), transparent 60%),
        linear-gradient(180deg, #05020b, #070410 58%, #020108);
    }

html,body{height:100%;}
body{
      margin:0; color:var(--text); font-family:var(--mono); overflow:hidden;
      background:
        radial-gradient(900px 520px at 15% 10%, rgba(124,255,107,.14), transparent 60%),
        radial-gradient(900px 520px at 80% 35%, rgba(107,228,255,.12), transparent 60%),
        linear-gradient(180deg, rgba(0,0,0,.40), rgba(0,0,0,.58)), var(--bg);
    }
/* UI autoscale for small desktop windows (keeps buttons visible) */
:root{ --ui-scale: 1; }
@media (max-width: 1200px), (max-height: 820px){
  :root{
    --ui-scale: min(1, calc(100vw / 1200), calc(100vh / 820));
  }
}
#app{
  transform: scale(var(--ui-scale));
  transform-origin: top left;
  width: calc(100% / var(--ui-scale));
  height: calc(100% / var(--ui-scale));
}
    /* Watermark logo removed (moved to #log watermark) */
.wrap{ position:relative; z-index:1; height:100%; display:grid; grid-template-rows: auto 1fr auto; gap:12px; padding:14px; box-sizing:border-box; }
    .top{
      border:1px solid var(--border); border-radius:var(--radius); background:var(--panel);
      padding:12px 14px; display:flex; justify-content:space-between; align-items:center; gap:12px;
      backdrop-filter: blur(10px); box-shadow: var(--shadow);
    }

    .top .actions{ margin-left:auto; }
    
.dimLinks{
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
}
.dimLinks .playLink{ margin:0; flex:1 1 0; max-width:220px; }
.playLink{
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:7px 12px;
  border-radius:14px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.04);
  box-shadow:0 10px 28px rgba(0,0,0,.22);
  cursor:pointer;
  user-select:none;
}
.playLink:hover{
  border-color: rgba(255,255,255,.26);
  background:rgba(255,255,255,.06);
}
.playLink img{
  height:34px;
  width:auto;
  display:block;
  filter: brightness(1.22) saturate(1.18);
}
.playLink .playText{
  font-weight:900;
  letter-spacing:.35px;
  font-size:16px;
  line-height:1;
  background: linear-gradient(90deg, #f6b14a, #ff6aa7, #b36cff);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow: 0 0 18px rgba(255,255,255,.08);
  white-space:nowrap;
}

.arenaLink img{
  filter: brightness(1.35) saturate(1.25);
}
.arenaLink .playText{
  background: linear-gradient(90deg, #7fe6ff, #ff6aa7, #b36cff);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

    .toast{
      position:fixed;
      top:76px;
      left:50%;
      transform:translateX(-50%);
      z-index:9998;
      display:none;
      padding:12px 14px;
      border-radius:16px;
      border:1px solid rgba(110,255,200,.35);
      background:rgba(0,0,0,.62);
      backdrop-filter: blur(12px);
      box-shadow: 0 10px 30px rgba(0,0,0,.45);
      max-width:min(560px, 94vw);
      cursor:pointer;
      user-select:none;
    }
    .toast.show{ display:block; }
    .toast .row{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
    .toast .x{
      flex:0 0 auto;
      border:1px solid rgba(255,255,255,.16);
      background:rgba(255,255,255,.06);
      color:rgba(235,245,255,.85);
      border-radius:10px;
      padding:2px 8px;
      line-height:20px;
      font-weight:900;
      cursor:pointer;
    }
    .toast .x:hover{ background:rgba(255,255,255,.10); }
    .toast b{ color: var(--text); }
    .toast .small{ color: rgba(215,227,244,.80); }

    
    .actions{ display:flex; align-items:center; gap:10px; }
    .vltime{
      display:inline-flex; align-items:center;
      padding:6px 10px;
      border:1px solid rgba(70,255,170,.25);
      background:rgba(0,0,0,.14);
      border-radius:999px;
      /* color set per-part */
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      font-weight:900;
      letter-spacing:.8px;
      font-variant-numeric: tabular-nums;
      text-transform: none;
      box-shadow: 0 10px 25px rgba(0,0,0,.25);
    }
.brand{ display:flex; gap:12px; align-items:center; }
    .brand img{ width:38px; height:38px; border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,.35); }
    .brand b{ 
      font-weight:900;
      letter-spacing:.4px;
      background: linear-gradient(90deg, #f6b14a, #ff6aa7, #b36cff);
      -webkit-background-clip:text;
      background-clip:text;
      color:transparent;
      text-shadow: 0 0 18px rgba(255,255,255,.08);
    }
    .topic{ color:var(--text); font-weight:900; }
    .pill{ display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; border:1px solid var(--border); background:rgba(0,0,0,.18);}
    .dot{ width:10px; height:10px; border-radius:50%; background:#ff5c5c; }
    .dot.ok{ background:#21d07a; }
    .main{ min-height:0; display:grid; grid-template-columns: 280px 1fr 280px; gap:12px; }
    .panel{ min-height:0; border:1px solid var(--border); border-radius:var(--radius); background:var(--panel2); overflow:hidden; backdrop-filter: blur(10px); box-shadow: var(--shadow); }
    .chatPanel{ display:flex; flex-direction:column; min-height:0; }
    .chatHeadTools{ display:flex; justify-content:flex-start; align-items:center; gap:10px; flex-wrap:wrap; }
.chatHead{ display:flex; flex-direction:column; gap:8px; width:100%; }
.chatHeadTop{ display:flex; justify-content:space-between; align-items:center; }
.chatHeadTitle{ display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; width:100%; gap:8px; }
.chatHeadTitleRow{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; width:100%; }

.chatHeadTools{ display:flex; justify-content:flex-end; align-items:center; gap:10px; flex-wrap:wrap; }
.chatHeadActions{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
#searchQ{ width:130px; max-width:34vw; min-width:120px; }

.chatHeadToolsBar{ display:flex; justify-content:flex-end; align-items:center; gap:10px; flex-wrap:wrap; }
#clearView{ white-space:nowrap; background: linear-gradient(135deg, var(--accent2), var(--accent)); color:#061015; border:1px solid rgba(255,255,255,.18); box-shadow: 0 6px 14px rgba(0,0,0,.28); border-radius: 10px; padding:3px 7px; font-size:10px; line-height:1.0; }
#clearView:hover{ filter: brightness(1.05); }
#clearView:active{ transform: translateY(1px); }

#cleanView{ white-space:nowrap; background: linear-gradient(135deg, rgba(255,122,122,.98), rgba(255,90,90,.86)); color:#1a0b00; border:1px solid rgba(255,255,255,.18); box-shadow: 0 6px 14px rgba(0,0,0,.28); border-radius: 10px; padding:3px 7px; font-size:10px; line-height:1.0; font-weight:900; }
#cleanView:hover{ filter: brightness(1.05); }
#cleanView:active{ transform: translateY(1px); }

#btn{ white-space:nowrap; border:1px solid rgba(255,255,255,.18); box-shadow: 0 6px 14px rgba(0,0,0,.28); border-radius: 10px; padding:8px 12px; min-width:72px; font-size:12px; line-height:1.0; font-weight:950; }
#btn:hover{ filter: brightness(1.05); }
#btn:active{ transform: translateY(1px); }

.typingLine{ padding:6px 12px; border-top:1px solid var(--border); color: rgba(219,229,246,.70); font-size:12px; display:flex; align-items:center; gap:8px; }
.typingDot{ width:7px; height:7px; border-radius:50%; background: var(--accent2); box-shadow: 0 0 10px rgba(255,162,58,.35); flex:0 0 auto; }
#typingText{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

#searchBtn{ white-space:nowrap; background: linear-gradient(135deg, #ffb15a, #ff7a18); color:#1a0b00; border:1px solid rgba(255,255,255,.18); box-shadow: 0 6px 14px rgba(0,0,0,.28); border-radius: 10px; padding:3px 7px; font-size:10px; line-height:1.0; font-weight:900; }
#searchBtn:hover{ filter: brightness(1.05); }
#searchBtn:active{ transform: translateY(1px); }

#soundToggle{ white-space:nowrap; border-radius:10px; padding:5px 8px; font-size:12px; line-height:1.0; }
#soundToggle.on{ background: linear-gradient(135deg, #ffd36a, #ff9a2b); color:#1a0b00; border:1px solid rgba(255,255,255,.18); box-shadow: 0 6px 14px rgba(0,0,0,.28); }
#donateBtn, #donateBtnLobby{
  white-space:nowrap;
  border-radius:10px;
  padding:5px 10px;
  font-size:12px;
  line-height:1.0;
  font-weight:900;
  border:1px solid rgba(124,255,107,.45);
  background: linear-gradient(135deg, rgba(124,255,107,.30), rgba(107,228,255,.20));
  color:#eaffef;
  box-shadow: 0 6px 14px rgba(0,0,0,.28), inset 0 0 0 1px rgba(0,0,0,.18);
}
#donateBtn:hover, #donateBtnLobby:hover{ filter: brightness(1.06); }
#donateBtn:active, #donateBtnLobby:active{ transform: translateY(1px); }
#appQrBtn, #appQrBtnLobby{
  white-space:nowrap;
  border-radius:10px;
  padding:5px 10px;
  font-size:12px;
  line-height:1.0;
  font-weight:900;
  border:1px solid rgba(107,228,255,.45);
  background: linear-gradient(135deg, rgba(107,228,255,.26), rgba(124,255,107,.16));
  color:#eaf9ff;
  box-shadow: 0 6px 14px rgba(0,0,0,.28), inset 0 0 0 1px rgba(0,0,0,.18);
  opacity: 1 !important;
  pointer-events: auto !important;
}
#appQrBtn:hover, #appQrBtnLobby:hover{ filter: brightness(1.06); }
#appQrBtn:active, #appQrBtnLobby:active{ transform: translateY(1px); }
#manTodoBtnLobby{
  display:inline-flex;
  align-items:center;
  gap:6px;
  text-decoration:none;
  white-space:nowrap;
  border-radius:10px;
  padding:5px 10px;
  font-size:12px;
  line-height:1.0;
  font-weight:900;
  border:1px solid rgba(255, 171, 82, .58);
  background: linear-gradient(135deg, rgba(255, 171, 82, .22), rgba(124,255,107,.14));
  color:#fff4e5;
  box-shadow: 0 6px 14px rgba(0,0,0,.28), inset 0 0 0 1px rgba(0,0,0,.18);
}
#manTodoBtnLobby:hover{ filter: brightness(1.08); }
#manTodoBtnLobby:active{ transform: translateY(1px); }
#manTodoBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  min-width:34px;
  height:34px;
  padding:0;
  border-radius:10px;
  border:1px solid rgba(255, 171, 82, .58);
  background: linear-gradient(135deg, rgba(255, 171, 82, .22), rgba(124,255,107,.14));
  box-shadow: 0 6px 14px rgba(0,0,0,.28), inset 0 0 0 1px rgba(0,0,0,.18);
}
#manTodoBtn:hover{ filter: brightness(1.08); }
#manTodoBtn:active{ transform: translateY(1px); }
#manTodoBtn .manTodoIcon,
#manTodoBtnLobby .manTodoIcon{
  width:12px;
  height:12px;
  border-radius:3px;
  border:1px solid rgba(255, 191, 132, .75);
  background:
    linear-gradient(180deg, rgba(255,255,255,.44), rgba(255,255,255,.08)),
    linear-gradient(135deg, rgba(255,133,33,.90), rgba(80,230,130,.84));
  box-shadow: 0 0 8px rgba(255, 159, 57, .30);
  flex:0 0 auto;
}
.walletBadge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
  border-radius:10px;
  padding:5px 10px;
  font-size:12px;
  line-height:1.0;
  font-weight:900;
  border:1px solid rgba(107,228,255,.45);
  background: linear-gradient(135deg, rgba(107,228,255,.22), rgba(124,255,107,.16));
  color:#e9f9ff;
  box-shadow: 0 6px 14px rgba(0,0,0,.28), inset 0 0 0 1px rgba(0,0,0,.18);
  cursor:pointer;
}
.walletBadge.empty{ opacity:.86; }
.walletBadge:hover{ filter: brightness(1.04); }
.pstnBtn{
  min-width:48px;
  height:34px;
  font-size:24px;
  line-height:1;
  padding:0 6px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#f4fff8;
  text-shadow: 0 0 10px rgba(124,255,107,.35), 0 0 4px rgba(255,255,255,.55);
}
.pstnBtn.active{
  border-color: rgba(124,255,107,.50);
  background: linear-gradient(135deg, rgba(124,255,107,.24), rgba(107,228,255,.18));
  color:#e9fff0;
}
.pstnBtn:disabled{
  opacity:.60;
  cursor:not-allowed;
}
.pstnBtnIcon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:auto;
  min-width:auto;
  font-size:28px;
  line-height:1;
  font-weight:900;
  transform: translateY(-1px);
}

    .toolCheck{ flex:0 0 auto;  display:flex; align-items:center; gap:6px; user-select:none; cursor:pointer; }
    .toolCheck input{ accent-color: var(--accent); }
        .toolCheck span{ white-space:nowrap; }
.smallBtn{ padding:4px 8px; font-size:11px; line-height:1.05; }

.smallBtn > span{ pointer-events:none; }
#profileBtn, #profileBtnLobby{ position:relative; z-index:10001; pointer-events:auto; }
#clearView, #cleanView{ position:relative; z-index:10001; pointer-events:auto; touch-action: manipulation; }

.plusBtn{ width:30px; min-width:30px; height:28px; padding:0; border-radius:12px; font-weight:900; font-size:16px; line-height:1; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid rgba(124,255,107,.55);
  background: linear-gradient(180deg, rgba(124,255,107,.34), rgba(124,255,107,.14));
  color:#ddffd7;
  box-shadow: 0 0 0 1px rgba(0,0,0,.22) inset, 0 10px 22px rgba(124,255,107,.10);
}
.plusBtn:hover{ filter:brightness(1.08); }
.plusBtn:active{ transform: translateY(1px); }

.roomTitle{ font-weight:950; font-size:16px; letter-spacing:.2px; color:var(--text); text-shadow: 0 0 12px rgba(124,255,107,.10); }


.vltime .tH{ color:var(--tHour); }
.vltime .tM{ color:var(--tMin); }
.vltime .tS{ color:var(--tSec); }
.vltime .tSep{ color:rgba(255,255,255,.35); padding:0 2px; font-weight:800; }
.vltime .tDate{ color:rgba(215,227,244,.90); font-size:12px; letter-spacing:.2px; margin-right:2px; }
    .head{ padding:10px 12px; min-height:var(--headH); box-sizing:border-box; border-bottom:1px solid var(--border); color:var(--muted); display:flex; justify-content:space-between; align-items:center; gap:10px; position:relative; z-index:5; }
    .list{ padding:10px 10px 12px 10px; overflow:auto; min-height:0; }
    .item{
      display:flex; align-items:center; justify-content:space-between; gap:10px;
      padding:10px 10px; border-radius:14px; border:1px solid rgba(255,255,255,0.04);
      background-color:rgba(0,0,0,0.12); margin-bottom:8px; cursor:pointer; user-select:none;
    }
    .item:hover{ filter:brightness(1.06); }
    .item.active{ border-color: rgba(124,255,107,.55); background-color: rgba(124,255,107,.10); box-shadow: 0 0 0 1px rgba(124,255,107,.20) inset, 0 10px 20px rgba(0,0,0,.22); }
    .item.roomBg{
      background-image:
        linear-gradient(180deg, rgba(4,10,18,.62) 0%, rgba(4,10,18,.78) 100%),
        var(--room-bg-url);
      background-size: cover;
      background-position: center center;
      background-repeat: no-repeat;
      box-shadow: 0 0 0 1px rgba(255,255,255,0.06) inset, 0 8px 16px rgba(0,0,0,.22);
    }
    .item.roomBg .iname{ text-shadow: 0 1px 6px rgba(0,0,0,.55); }
    .item.roomBg .idesc{ color: rgba(230,240,255,.86); text-shadow: 0 1px 5px rgba(0,0,0,.45); }
    .iname{ font-weight:900; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .idesc{ color:var(--muted); font-size:11px; margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

    /* Ensure long room names don't push action buttons off-screen */
    .item .rmeta{ flex:1 1 auto; min-width:0; overflow:hidden; }
    .item .ractions{ flex:0 0 auto; display:flex; gap:8px; align-items:center; }
    .iname, .idesc{ max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    /* Rooms panel sections */
    .secTitle{ color:var(--muted); font-size:11px; font-weight:900; letter-spacing:.06em; text-transform:uppercase; margin:2px 2px 8px; }
    .friendsTitleRow{
      display:flex;
      align-items:center;
      gap:8px;
      flex-wrap:wrap;
    }
    .friendsTitleRow > span{
      flex:0 0 auto;
      min-width:0;
      white-space:nowrap;
    }
    .friendsControls{
      margin-left:auto;
      flex:1 1 240px;
      min-width:0;
      display:flex;
      align-items:center;
      justify-content:flex-end;
      gap:6px;
    }
    .friendsFilter{
      flex:1 1 130px;
      width:auto;
      min-width:88px;
      max-width:180px;
      padding:6px 10px;
      border-radius:12px;
    }
    .friendsChip{ white-space:nowrap; flex:0 0 auto; }
#friendsOnlineToggle.active{ border-color: rgba(124,255,107,.65); color:#ddffd7; box-shadow: 0 0 0 1px rgba(0,0,0,.22) inset, 0 10px 22px rgba(124,255,107,.10); }

    .friendsPlus{ width:24px; min-width:24px; height:24px; border-radius:10px; font-size:14px; }
    #friends .dot{ width:8px; height:8px; border-radius:50%; background:rgba(219,229,246,.28); display:inline-block; box-shadow: 0 0 0 2px rgba(0,0,0,.18) inset; }
    #friends .dot.on{ background: var(--accent); }
    #friends .item.off{ opacity:.55; }

    .roomsGroup{ display:flex; flex-direction:column; }
    
    /* Rooms split: two sections (joined vs available) */
    .roomsSplit{
      overflow:hidden; display:flex; flex-direction:column; gap:12px;
    }
    
    .head.roomsHead{ justify-content:flex-start; gap:10px; }
    .roomsTitle{ white-space:nowrap; }
    .roomsHint{ white-space:nowrap; }
    .roomsHeadFilter{ flex:1; min-width:0; display:flex; align-items:center; gap:8px; }
    .roomsHeadFilter #roomFilter{ flex:1; min-width:0; }
.roomFilterBar{ padding:8px 10px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:8px; }
    #roomFilter{ flex:1; padding:8px 10px; border-radius:12px; border:1px solid rgba(255,255,255,.10); background:rgba(0,0,0,.18); color:var(--text); outline:none; font-size:12px; }
    #roomFilter::placeholder{ color: rgba(219,229,246,.55); }
    #roomFilterClear{ width:32px; min-width:32px; padding:6px 0; border-radius:12px; line-height:1; }
    .roomsPane{
      flex:1; min-height:0; display:flex; flex-direction:column;
    }
    .roomsPane .roomsGroup{
      flex:1; min-height:0; overflow:auto; padding-right:2px;
    }
    .roomsDivider{
      height:1px; background:var(--border); opacity:.75;
    }
    /* Rooms visual hierarchy */
    #roomsMine .item.joined{
      border-color: rgba(255,255,255,0.10);
      background-color: rgba(255,255,255,0.05);
    }
    #roomsMine .item.joined.active{
      border-color: rgba(124,255,107,.72);
      background-color: rgba(124,255,107,.14);
      box-shadow: 0 0 0 1px rgba(124,255,107,.22) inset, 0 10px 22px rgba(124,255,107,.08);
    }
    #roomsMine .item.joined.active .iname{ font-weight:950; }
    #roomsAvail .item.notjoined{
      opacity:.78;
      border-style:dashed;
      border-color: rgba(255,255,255,0.08);
      background-color: rgba(0,0,0,0.08);
    }
    #roomsAvail .item.notjoined:hover{
      opacity:.95;
      border-color: rgba(255,255,255,0.16);
      background-color: rgba(0,0,0,0.10);
    }

    /* Online count highlight */
    #cnt{ color:var(--accent); font-weight:900; }

    /* Logout: subtle red cue */
    #logout{
      color: rgba(255,120,120,0.90);
      border-color: rgba(255,120,120,0.25);
    }
    #logout:hover{
      color: var(--text);
      border-color: rgba(255,120,120,0.40);
      background: rgba(255,120,120,0.10);
    }
.leaveBtn{
      width:28px; height:28px; border-radius:12px; border:1px solid rgba(255,255,255,0.08);
      background:rgba(0,0,0,0.12); color:var(--muted); font-weight:900; cursor:pointer;
      display:inline-flex; align-items:center; justify-content:center; padding:0; flex:0 0 auto;
      line-height:1; font-size:18px;
    }
    .leaveBtn:hover{ border-color:rgba(255,255,255,0.18); color:var(--text); }
    .leaveBtn:disabled{ opacity:.35; cursor:not-allowed; }

.delBtn{
  width:28px; height:28px; border-radius:12px; border:1px solid rgba(239,68,68,.45);
  background:rgba(239,68,68,.10); color:rgba(239,68,68,.95); font-weight:900; cursor:pointer;
  display:flex; align-items:center; justify-content:center; line-height:1; padding:0; font-size:18px;
}
.delBtn:hover{ background:rgba(239,68,68,.16); }
.delBtn:disabled{ opacity:.35; cursor:not-allowed; }
    /* Online users list: compact layout */
    #users .item{ padding:6px 10px; margin-bottom:4px; }
    #users .urow{ display:flex; align-items:center; gap:6px; }
    #users .meMark{ color:var(--accent); font-weight:900; }
    #users .item.me{ border-color: rgba(124,255,107,.22); background: rgba(124,255,107,.05); }


    #friends .item{ padding:6px 10px; margin-bottom:4px; }
    #friends .urow{ display:flex; align-items:center; gap:6px; }
    #friends .meMark{ color:var(--accent); font-weight:900; }
    #friends .item.me{ border-color: rgba(124,255,107,.22); background: rgba(124,255,107,.05); }
    .badge{
      min-width:22px; padding:2px 8px; border-radius:999px; font-size:12px; font-weight:900;
      color:var(--bg); background:var(--accent2); display:none; align-items:center; justify-content:center;
    }

.badge.mention{
  background: rgba(255,140,0,.92);
  color: var(--bg);
  box-shadow: 0 0 0 1px rgba(255,140,0,.22) inset;
}

    .countpill{
      min-width:22px;
      padding:2px 8px;
      border-radius:999px;
      font-size:12px;
      font-weight:900;
      color:var(--bg);
      background:var(--accent);
      display:inline-flex;
      align-items:center;
      justify-content:center;
      opacity:.85;
    }

.lastpill{
  min-width:46px;
  padding:2px 8px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  color:var(--text);
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.12);
  text-align:center;
  opacity:.85;
}
.item.notjoined{ opacity:.72; }
.joinDot{
  width:10px; height:10px; border-radius:999px;
  background: var(--accent2);
  box-shadow:0 0 10px rgba(107,228,255,.18);
  opacity:0;
}
.item.joined .joinDot{ opacity:1; }

    #log{ padding:12px 14px; overflow:auto; min-height:0; white-space:normal; line-height:1.45; flex:1; position:relative; z-index:1; }


/* Stable watermark: keep logo fixed while #log scrolls */
.logWrap{
  position:relative;
  flex:1;
  min-height:0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.logWrap .logWm{
  position:absolute; inset:0;
  background-image:url('/static/branding/logo_watermark.png');
  background-repeat:no-repeat;
  background-position:50% 50%;
  background-size:auto 92%;
  opacity:.26;
  pointer-events:none;
  z-index:0;
  filter:none;
}

#log .line{ position:relative; z-index:1; }

    .msgText{ white-space:pre-wrap; }

    /* clickable links in messages */
    a.alink{
      color: var(--accent2);
      text-decoration: underline;
      text-decoration-thickness: 1px;
      text-underline-offset: 2px;
      cursor: pointer;
      word-break: break-word;
    }
    a.alink:visited{ color: var(--accent2); }
    a.alink:hover{ color: var(--accent); }


    





.line.mention .msgText{
      background: rgba(255,140,0,.12);
      border: 1px solid rgba(255,140,0,.22);
      padding: 0 6px;
      border-radius: 10px;
      box-shadow: 0 0 0 1px rgba(255,140,0,.05) inset;
    }
    .line.mention .nick{ text-shadow: 0 0 12px rgba(255,140,0,.18); }

    .line{ margin:2px 0; transition: opacity .32s ease, transform .32s ease, filter .32s ease; }
    .t{ color: rgba(124,255,107,.40); }
    .sys{ color: var(--muted); }
    .nick{ font-weight:900; }
    .idTag{
      color: rgba(215,227,244,.35);
      font-size: 12px;
      margin-right: 8px;
      user-select:none;
      cursor:pointer;
    }
    .meta{ color: rgba(215,227,244,.45); font-size: 12px; margin-left: 8px; }
    .expBadge{
      display:inline-flex;
      align-items:center;
      margin-left:8px;
      padding:1px 7px;
      border-radius:999px;
      font-size:11px;
      font-weight:800;
      color:#d7ffe1;
      border:1px solid rgba(124,255,107,.45);
      background: rgba(124,255,107,.12);
      box-shadow: 0 0 0 1px rgba(0,0,0,.18) inset;
    }
    .threadRef{
      display:inline-flex;
      align-items:center;
      margin-left:6px;
      padding:1px 7px;
      border-radius:999px;
      border:1px solid rgba(123,221,255,.40);
      background:rgba(123,221,255,.14);
      color:rgba(216,245,255,.96);
      font-size:11px;
      cursor:pointer;
      user-select:none;
    }
    .threadRef:hover{ background:rgba(123,221,255,.20); }
    .line.expiringOut{
      opacity: 0;
      transform: translateY(-4px) scale(0.985);
      filter: blur(2px);
    }
    .reactions{ display:inline-flex; gap:6px; margin-left:10px; flex-wrap:wrap; }
    .react{
      border:1px solid rgba(255,255,255,.10);
      background:rgba(0,0,0,.18);
      padding:2px 8px;
      border-radius:999px;
      font-size:12px;
      color:var(--text);
      cursor:pointer;
      user-select:none;
    }

    .bar{
      border:1px solid var(--border); border-radius:var(--radius); background:var(--panel);
      /* compact single-line composer: msg + clear + clean + send */
      padding:10px;
      display:grid;
      align-items:center;
      grid-template-columns: auto minmax(0,1fr) auto;
      gap:8px;
      backdrop-filter: blur(10px); box-shadow: var(--shadow);
    }
    .replyBar{
      margin-bottom:8px;
      padding:8px 10px;
      border:1px solid rgba(123,221,255,.35);
      border-radius:13px;
      background:rgba(123,221,255,.10);
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
    }
    .replyMeta{
      flex:1 1 auto;
      min-width:0;
      font-size:12px;
      color:rgba(220,242,255,.95);
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .replyActions{
      display:flex;
      align-items:center;
      gap:6px;
      flex:0 0 auto;
    }
    .threadList{
      max-height:min(52vh, 420px);
      overflow:auto;
      border:1px solid rgba(255,255,255,.10);
      border-radius:14px;
      background:rgba(255,255,255,.03);
      padding:8px;
    }
    .threadMsg{
      border:1px solid rgba(255,255,255,.09);
      border-radius:12px;
      padding:8px 10px;
      margin-bottom:8px;
      background:rgba(0,0,0,.20);
    }
    .threadMsg:last-child{ margin-bottom:0; }
    .threadMsg.parent{
      border-color: rgba(124,255,107,.35);
      background: rgba(124,255,107,.10);
    }
    .threadMsgHead{
      display:flex;
      align-items:center;
      gap:8px;
      margin-bottom:4px;
      font-size:12px;
    }
    .threadMsgNick{ font-weight:800; }
    .threadMsgMeta{ opacity:.74; }
    .threadMsgText{
      font-size:13px;
      line-height:1.35;
      white-space:pre-wrap;
      word-break:break-word;
    }
    .ephemeralSelect{
      --ephemeralClockIcon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dbe5f6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
      width: 48px;
      max-width: 48px;
      min-width: 48px;
      height: 38px;
      border-radius: 12px;
      border:1px solid var(--border);
      background-color: rgba(255,255,255,.07);
      background-image: var(--ephemeralClockIcon);
      background-repeat: no-repeat;
      background-position: center center;
      background-size: 18px 18px;
      color: transparent;
      padding: 0;
      outline:none;
      font-weight: 700;
      font-size: 0;
      text-shadow: none;
      appearance:none;
      -webkit-appearance:none;
      -moz-appearance:none;
      transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
    }
    .ephemeralSelect.mode-0{
      border-color: var(--border);
      background-color: rgba(255,255,255,.07);
      color: transparent;
      box-shadow: none;
    }
    .ephemeralSelect.mode-30{
      border-color: rgba(255,120,120,.75);
      background-color: rgba(255,120,120,.22);
      color: transparent;
      box-shadow: 0 0 0 1px rgba(255,120,120,.20) inset, 0 0 16px rgba(255,120,120,.20);
    }
    .ephemeralSelect.mode-300{
      border-color: rgba(255,189,90,.80);
      background-color: rgba(255,189,90,.20);
      color: transparent;
      box-shadow: 0 0 0 1px rgba(255,189,90,.24) inset, 0 0 14px rgba(255,189,90,.18);
    }
    .ephemeralSelect.mode-3600{
      border-color: rgba(120,255,160,.80);
      background-color: rgba(120,255,160,.18);
      color: transparent;
      box-shadow: 0 0 0 1px rgba(120,255,160,.24) inset, 0 0 14px rgba(120,255,160,.18);
    }
    .ephemeralSelect.mode-86400{
      border-color: rgba(123,221,255,.85);
      background-color: rgba(123,221,255,.20);
      color: transparent;
      box-shadow: 0 0 0 1px rgba(123,221,255,.26) inset, 0 0 14px rgba(123,221,255,.18);
    }
    .ephemeralSelect option{
      color: #0a1320 !important;
      background:#eef4fb;
      font-size: 12px;
    }
    .ephemeralModeBadge{
      margin-top:6px;
      font-size:12px;
      color: rgba(124,255,107,.95);
      text-shadow: 0 0 10px rgba(124,255,107,.20);
    }
    .bar input#msg{ min-width:0; padding:10px 12px; }
    input{
      width:100%; padding:12px 12px; border-radius:12px; border:1px solid var(--border);
      background:rgba(0,0,0,.22); color:var(--text); font-family:var(--mono); outline:none; box-sizing:border-box;
    }
    button{
      padding:12px 12px; border-radius:12px; border:1px solid rgba(0,0,0,.2);
      background:var(--accent); color:#061015; font-weight:900; cursor:pointer;
    }
    button:disabled{ opacity:.6; cursor:not-allowed; }

    
    button.secondary{
      padding:10px 12px; border-radius:12px;
      background: rgba(255,255,255,.08);
      color: var(--text);
      border:1px solid var(--border);
      font-weight:800;
    }
    button.secondary:hover{ background: rgba(255,255,255,.12); }
#lobby{
  position:fixed;
  inset:0;
  z-index:3;
  display:grid;
  justify-items:center;
  align-items:center;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  padding:clamp(12px, 2.8vw, 24px);
  box-sizing:border-box;
  background:rgba(0,0,0,.60);
}
    #lobby::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        radial-gradient(72vmax 38vmax at 50% 72%, rgba(124,255,107,.08), transparent 62%),
        radial-gradient(52vmax 28vmax at 50% 15%, rgba(107,228,255,.06), transparent 65%);
      pointer-events:none;
    }
    #lobby .lobbyStack{
      position:relative;
      z-index:1;
      width:min(980px, 96vw);
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      gap:clamp(14px, 3vh, 28px);
      margin:0 auto;
    }
    #lobby .lobbyBrandMark{
      width:clamp(148px, 25vmin, 300px);
      opacity:.52;
      pointer-events:none;
      user-select:none;
      filter: drop-shadow(0 8px 28px rgba(0,0,0,.45));
    }
    #lobby .lobbyBrandMark img{
      display:block;
      width:100%;
      height:auto;
    }
    #lobby .card{
      position:relative;
      width:100%;
      border:1px solid var(--border);
      border-radius:18px;
      background:rgba(255,255,255,.06);
      overflow:auto;
      max-height:min(70dvh, 760px);
      overscroll-behavior:contain;
      backdrop-filter:blur(12px);
      box-shadow:var(--shadow);
    }
    .publicLegalCard{
      width:100%;
      border:1px solid var(--border);
      border-radius:16px;
      background:rgba(255,255,255,.05);
      padding:12px 14px;
      box-sizing:border-box;
      backdrop-filter: blur(10px);
    }
    .publicLegalTitle{
      font-size:12px;
      letter-spacing:.06em;
      text-transform:uppercase;
      color:var(--muted);
      font-weight:900;
      margin-bottom:6px;
    }
    .publicLegalSeller{
      font-size:15px;
      font-weight:900;
      color:var(--text);
      margin-bottom:4px;
      word-break:break-word;
    }
    .publicLegalLine{
      font-size:13px;
      color:rgba(219,229,246,.94);
      margin-bottom:4px;
      word-break:break-word;
    }
    .publicLegalSep{
      margin:0 8px;
      color:rgba(219,229,246,.45);
    }
    .publicLegalLinks{
      margin-top:8px;
      display:flex;
      align-items:center;
      gap:8px;
      flex-wrap:wrap;
    }
    .publicLegalLinks a,
    .donateLegalLinks a{
      color:#bff8ff;
      text-decoration:none;
      border:1px solid rgba(107,228,255,.26);
      background:rgba(107,228,255,.08);
      border-radius:999px;
      padding:5px 9px;
      font-size:12px;
      line-height:1;
      font-weight:800;
    }
    .publicLegalLinks a:hover,
    .donateLegalLinks a:hover{
      background:rgba(107,228,255,.14);
      border-color:rgba(107,228,255,.38);
    }
    #lobby .cardHead{
      padding:14px 16px;
      border-bottom:1px solid var(--border);
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:12px;
      flex-wrap:wrap;
      position:sticky;
      top:0;
      z-index:2;
      background:rgba(0,0,0,.18);
      backdrop-filter:blur(12px);
    }
    #lobby .lobbyHeadActions{
      display:flex;
      align-items:center;
      justify-content:flex-end;
      gap:8px;
      flex-wrap:wrap;
    }
    #lobby .cardBody{
      padding:14px 16px;
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:12px;
    }
    .err{ color:var(--danger); font-size:12px; display:none; margin-top:8px; }
    .err.ok{ color:#7dffb2; }
    .regVerifyTools{ margin-top:10px; display:grid; gap:6px; }
    #resendVerifyBtn{ width:100%; }
    .regVerifyHint{
      min-height:14px;
      color:var(--muted);
      font-size:12px;
      line-height:1.2;
    }
    .regVerifyHint.ok{ color:#7dffb2; }
    .regVerifyHint.err{ color:var(--danger); }
    .pwStrength{
      margin-top:6px;
      min-height:16px;
      font-size:12px;
      color:var(--muted);
      display:flex;
      align-items:center;
      gap:8px;
    }
    .pwStrength::before{
      content:"";
      display:block;
      width:84px;
      height:6px;
      border-radius:999px;
      background:rgba(255,255,255,.14);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
      transition: all .18s ease;
    }
    .pwStrength[data-level="1"]::before{
      background:linear-gradient(90deg, rgba(255,95,95,.92) 25%, rgba(255,255,255,.14) 25%);
    }
    .pwStrength[data-level="2"]::before{
      background:linear-gradient(90deg, rgba(255,173,92,.92) 50%, rgba(255,255,255,.14) 50%);
    }
    .pwStrength[data-level="3"]::before{
      background:linear-gradient(90deg, rgba(141,233,108,.92) 75%, rgba(255,255,255,.14) 75%);
    }
    .pwStrength[data-level="4"]::before{
      background:linear-gradient(90deg, rgba(124,255,107,.98) 100%, rgba(124,255,107,.98) 100%);
      box-shadow: inset 0 0 0 1px rgba(124,255,107,.30), 0 0 10px rgba(124,255,107,.20);
    }
    .pwStrength[data-state="weak"]{ color:#ffb3b3; }
    .pwStrength[data-state="medium"]{ color:#ffd6a4; }
    .pwStrength[data-state="strong"]{ color:#9dffb5; }
    .regTurnstileWrap{ margin-top:12px; }
    .regTurnstile{
      min-height:66px;
      display:flex;
      align-items:center;
      justify-content:center;
    }
    .regTurnstile > *{ margin:0 auto; }
    .regTurnstileHint{
      margin-top:8px;
      font-size:12px;
      color:var(--muted);
      display:none;
      text-align:center;
    }
    .regTurnstileHint.error{ color:#ff9b9b; }
    .small{ color:var(--muted); font-size:12px; }

    @media (max-width: 980px){
      .main{ grid-template-columns: 1fr; }
      #lobby .cardBody{ grid-template-columns: 1fr; }
    }
    @media (max-width: 520px){
      #lobby .cardHead{ flex-direction:column; align-items:flex-start; }
      #lobby .lobbyHeadActions{ width:100%; justify-content:space-between; }
    }
    @media (max-height: 820px){
      #lobby .lobbyBrandMark{ width:clamp(124px, 22vmin, 220px); opacity:.44; }
      #lobby .card{ max-height:min(76dvh, 680px); }
    }
    @media (max-height: 680px){
      #lobby{ align-items:start; padding-top:12px; padding-bottom:12px; }
      #lobby .lobbyStack{ justify-content:flex-start; gap:12px; }
      #lobby .lobbyBrandMark{ width:clamp(96px, 18vmin, 170px); opacity:.34; }
      #lobby .card{ max-height:none; }
    }
  
    
    /* Mobile tabs */
    .mobileTabs{
      display:none;
      border:1px solid var(--border);
      border-radius: var(--radius);
      background: var(--panel2);
      padding: 8px;
      gap: 8px;
      align-items:center;
      justify-content:space-between;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      box-shadow: var(--shadow);
    }
    .mobileTabs .tabBtn{
      flex: 1 1 0;
      padding: 10px 12px;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,.08);
      background: rgba(255,255,255,.04);
      color: var(--text);
      font-weight: 900;
      letter-spacing: .2px;
      cursor:pointer;
      min-width: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .mobileTabs .tabBtn.active{
      background: rgba(124,255,107,.12);
      border-color: rgba(124,255,107,.45);
      color: var(--accent);
      box-shadow: 0 12px 26px rgba(124,255,107,.10);
    }

/* Online header enhancements */
    #onlineLabel{ color: var(--accent); font-weight: 900; }
    #cnt{ color: var(--accent); font-weight: 900; }
    .tiny{ color: var(--muted); font-size: 12px; opacity: .85; }
/* Context menu */
.ctx{
  position:fixed; z-index:9999;
  min-width: 220px;
  width: 320px;
  max-width: calc(100vw - 16px);
  background: rgba(15, 17, 20, .96);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  box-shadow: 0 18px 48px rgba(0,0,0,.55);
  padding: 8px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.ctx.hidden{ display:none; }
.ctx .ctxTitle{ font-size: 12px; color: var(--muted); padding: 6px 10px 8px; }
.ctx button{
  width:100%;
  text-align:left;
  padding: 9px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.03);
  color: var(--text);
  cursor: pointer;
  font-weight: 700;
  margin-bottom: 6px;
}
.ctx button:last-child{ margin-bottom: 0; }
.ctx button:hover{ background: rgba(255,255,255,.06); }
.ctx button.danger{ border-color: rgba(255,90,90,.28); color: rgba(255,130,130,.95); }
.ctx button.muted{ opacity: .55; cursor: default; }

/* Inactive product tiles (SOON) */
.playLink.soon{
  opacity:.55;
  cursor:not-allowed;
}
.playLink.soon img{ filter: grayscale(1) brightness(1.12) saturate(.65); }
.playLink.soon:hover{
  border-color: var(--border);
  background: rgba(255,255,255,.04);
}
.playLink .soonTag{
  margin-left:6px;
  padding:2px 8px;
  border-radius:999px;
  font-size:11px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.18);
  color: rgba(255,255,255,.78);
}

/* Channel count glow */
#cntChan .cntGlow{
  color: var(--accent);
  font-weight:900;
  text-shadow: 0 0 10px currentColor, 0 0 22px currentColor;
}

/* Pinned preview */
.pinBar{
  margin: 6px 10px 0 10px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(255,255,255,.03);
  display: flex;
  align-items: center;
  gap: 8px;
  user-select: none;
  cursor: pointer;
  min-height: 30px;
}
.pinBar:hover{ background: rgba(255,255,255,.05); }
.pinBar:active{ transform: translateY(1px); }
.pinBar .pinIcon{ opacity: .9; }
.pinBar .pinText{
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  line-height: 1.2;
  color: rgba(255,255,255,.92);
}

    /* Modal */
    .modal{
      position:fixed;
      inset:0;
      z-index:9999;
      display:flex;
      align-items:center;
      justify-content:center;
      background:rgba(0,0,0,.55);
      backdrop-filter: blur(10px);
    }
    .modalCard{
      width:min(520px, 92vw);
      border-radius:18px;
      border:1px solid rgba(255,255,255,.10);
      background:rgba(15,16,20,.92);
      box-shadow: 0 18px 60px rgba(0,0,0,.55);
      overflow:hidden;
    }

/* Admin panel */
.adminIntro{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.adminPill{
  display:inline-flex;
  align-items:center;
  padding:4px 9px;
  border-radius:999px;
  border:1px solid rgba(124,255,107,.35);
  background:rgba(124,255,107,.10);
  color:#e9fff1;
  font-size:11px;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
  cursor:pointer;
  transition: filter .12s ease, transform .08s ease, border-color .12s ease, background .12s ease;
}
.adminPill:hover{ filter:brightness(1.08); }
.adminPill:active{ transform:translateY(1px); }
.adminPill.isActive{
  border-color:rgba(107,228,255,.55);
  background:linear-gradient(135deg, rgba(107,228,255,.26), rgba(124,255,107,.18));
  color:#f4feff;
}
.adminAnchor{
  position:relative;
  top:-8px;
  height:0;
  width:0;
}
.adminSectionTitle{
  margin-top:4px;
  padding-top:8px;
  border-top:1px solid rgba(255,255,255,.08);
  color:rgba(229,238,250,.80);
  font-size:11px;
  letter-spacing:.09em;
  text-transform:uppercase;
  font-weight:900;
}
.adminGrid{ display:grid; grid-template-columns: 1.3fr .9fr; gap:12px; align-items:start; }
@media (max-width: 980px){ .adminGrid{ grid-template-columns: 1fr; } }
.adminGrid > .adminBox:only-child{ grid-column:1 / -1; }
.adminBox{
  border:1px solid rgba(255,255,255,.11);
  border-radius:14px;
  padding:12px;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.16);
}
.adminBox .lbl{
  font-size:13px;
  font-weight:900;
  letter-spacing:.02em;
  color:#edf5ff;
  margin-bottom:6px;
}
.adminSubTitle{
  margin-top:8px;
  margin-bottom:6px;
  color:rgba(233,243,255,.92);
  font-size:12px;
  font-weight:900;
  letter-spacing:.03em;
}
.adminBox .hint{
  color:rgba(198,213,232,.85);
  font-size:12px;
}
.adminPassBox{
  margin-top:6px;
  padding:10px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  background:rgba(0,0,0,.16);
}
.adminPassBox .hint{
  margin-top:0;
  margin-bottom:8px;
}
.adminPassBox .pwStrength{
  margin-top:8px;
}
#admUserPwHint{
  margin-top:8px;
  min-height:16px;
}
.btnRow{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.sep{ border:none; height:1px; background:rgba(255,255,255,.08); margin:12px 0; }
.admList{
  margin-top:10px;
  max-height:250px;
  overflow:auto;
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  padding:6px;
  background:rgba(10,10,12,.35);
}
#admUsers.admList{ max-height:320px; }
.admItem{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 10px; border-radius:12px; cursor:pointer; user-select:none; }
.admItem:hover{ background:rgba(255,255,255,.06); }
.admItem.sel{ background:rgba(124,255,107,.14); box-shadow: inset 0 0 0 1px rgba(124,255,107,.35); }
.admItem b{ font-size:14px; }
.admItem .tag{ font-size:12px; opacity:.8; }
#adminModal{
  overflow:auto;
  padding:14px;
  box-sizing:border-box;
  -webkit-overflow-scrolling:touch;
}
#adminModal .modalCard{
  width:min(1080px, 96vw);
  max-height:calc(100vh - 28px);
  max-height:calc(100dvh - 28px);
  display:flex;
  flex-direction:column;
}
#adminModal .modalHead{
  position:sticky;
  top:0;
  z-index:2;
  background:rgba(15,16,20,.96);
}
#adminModal .modalBody{
  overflow:auto;
  display:flex;
  flex-direction:column;
  gap:10px;
}
#adminModal .input{
  font-size:14px;
  min-height:40px;
}
#adminModal .themeSelect{
  min-height:40px;
}
@media (max-width: 760px){
  #adminModal{
    padding:8px;
  }
  #adminModal .modalCard{
    width:96vw;
    max-height:calc(100dvh - 16px);
  }
}

    .checkBox{ width:18px; height:18px; accent-color: var(--accent); }
    .checkLabel{ color: var(--text); font-weight:700; cursor:pointer; user-select:none; line-height:1.25; word-break:break-word; }
    .checkRow{ display:grid; grid-template-columns: 20px 1fr auto; align-items:center; column-gap:10px; row-gap:6px; margin-top:10px; }
@media (max-width: 420px){ .checkRow{ grid-template-columns: 20px 1fr; } .checkRow .modeWrap{ grid-column: 1 / -1; justify-self:start; margin-left:30px; } }
    .checkWrap{ display:flex; align-items:flex-start; gap:10px; cursor:pointer; user-select:none; min-width:0; }
    .checkWrap .checkBox{ margin:3px 0 0 0; flex:0 0 auto; }
    .checkWrap .checkLabel{ margin:0; line-height:1.25; white-space:normal; overflow-wrap:break-word; word-break:normal; }
    .modeWrap{ display:inline-flex; align-items:center; gap:10px; white-space:nowrap; justify-self:end; }
    @media (max-width: 560px) and (pointer: coarse){
      /* Mobile compact layout: reduce padding/font sizes so everything fits without horizontal scrolling */
      body{ overflow-x:hidden; }
      /* mobile grid needs an extra row for tabs */
      .wrap{ padding:10px; gap:8px; grid-template-rows:auto auto 1fr auto auto; }

      /* Top bar: wrap links cleanly (no overlap), 2×2 grid */
      .top{ padding:10px 10px; gap:10px; }

/* Mobile topbar: put clock on the same row with title; pack actions below */
.top{ flex-wrap:wrap; }
.brand{ width:100%; min-width:0; }
.brand b{ flex:1 1 auto; min-width:0; }
#vilniusTime.inBrand{ margin-left:auto; }
.actions{ width:100%; order:2; margin-left:0; justify-content:space-between; gap:10px; }
.actions .pill{ flex:1 1 auto; justify-content:center; min-width:140px; }
.dimLinks{ order:3; }
      .dimLinks{
        order:3;
        width:100%;
        display:grid;
        grid-template-columns: 1fr 1fr;
        /* make buttons look narrower: center inside each half-column and add side insets */
        justify-items:center;
        gap:10px;
        padding:0 12px;
        margin:4px 0 0 0;
        min-width:0;
        box-sizing:border-box;
      }
      .dimLinks .playLink{
        /* cap width so buttons don't look "full width" on mobile */
        max-width:180px;
        width:100%;
        min-width:0;
        justify-self:center;
      }
      .playLink{ padding:3px 3px; border-radius:11px; gap:5px; overflow:hidden; }
      .playLink img{ height:18px; flex:0 0 auto; }
            .playLink .playText{
        font-size:12px;
        letter-spacing:.15px;
        min-width:0;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
      }
      .soonTag{ font-size:10px; padding:2px 6px; border-radius:999px; }

      /* Main layout */
      .main{ gap:10px; }
      .panel{ border-radius:14px; }

      /* Headers + lists */
      .head{ padding:9px 10px; }
      .list{ padding:8px 8px 10px 8px; }
      .item{ padding:8px 9px; border-radius:12px; margin-bottom:6px; }
      .iname{ font-size:12px; }
      .idesc{ font-size:10px; }
      .roomTitle{ font-size:14px; }

      /* Chat header tools */
      #searchQ{ width:110px; min-width:90px; max-width: 48vw; }
      .chatHeadTools, .chatHeadActions, .chatHeadToolsBar{ gap:8px; }

      /* Message lines */
      .line{ margin:1px 0; font-size:13px; }
      .idTag{ font-size:11px; margin-right:6px; }
      .meta{ font-size:11px; margin-left:6px; }

      /* Composer */
      .bar{ padding:8px; gap:8px; grid-template-columns: auto minmax(0,1fr) auto; }
      .replyBar{ padding:7px 8px; gap:8px; }
      .replyMeta{ font-size:11px; }
      /* Composer: prevent iOS zoom + keep buttons visible */
      .bar input#msg{ font-size:16px; line-height:1.2; }
      .ephemeralSelect{ width:44px; min-width:44px; max-width:44px; height:36px; font-size:0; }
      #clearView{ padding:7px 9px; font-size:12px; border-radius:12px; }
      #cleanView{ padding:7px 9px; font-size:12px; border-radius:12px; }
      #btn{ padding:8px 12px; min-width:72px; border-radius:12px; }
      .bar{ position:sticky; bottom: calc(8px + env(safe-area-inset-bottom)); z-index:50; }

      input{ padding:10px 10px; }
      button{ padding:10px 12px; }
      #clearView{ padding:7px 9px; }
      #cleanView{ padding:7px 9px; }
      #btn{ padding:8px 12px; min-width:72px; }

      /* Context menu */
      .ctx{ width:280px; max-width: calc(100vw - 16px); }

      /* Existing small-screen tweaks */
      .checkRow{ grid-template-columns: 1fr; }
      .modeWrap{ justify-self:start; margin-left:26px; }
    
      /* Mobile tabs + 1-panel view (no endless scrolling / no horizontal overflow) */
      /* Stack top bar on mobile: brand -> actions (clock+status) -> links */
      .top{ flex-direction: column; align-items: stretch; }
      .brand{ flex: 0 0 auto; width:100%; }
      .actions{
        flex: 0 0 auto;
        width:100%;
        display:grid;
        grid-template-columns: auto auto auto auto auto 1fr auto auto;
        grid-template-rows: auto auto;
        column-gap:10px;
        row-gap:8px;
        align-items:center;
      }
      #vilniusTime{ grid-column:1 / -1; grid-row:1; justify-self:start; }
      #soundToggle{ grid-column:1; grid-row:2; }
      #donateBtn{ grid-column:2; grid-row:2; justify-self:start; }
      #appQrBtn{ grid-column:3; grid-row:2; justify-self:start; }
      #walletBadge{ grid-column:4; grid-row:2; justify-self:start; }
      #pstnBtn{ grid-column:5; grid-row:2; justify-self:start; }
      .actions .pill{ grid-column:6; grid-row:2; justify-self:start; }
      #profileBtn{ grid-column:7; grid-row:2; justify-self:end; }
      #logout{ grid-column:8; grid-row:2; justify-self:end; }

      .mobileTabs{ display:flex; }
      .main{ grid-template-columns: 1fr; }
      .panelChannels, .chatPanel, .panelOnline{ display:none !important; }
      body[data-mtab="channels"] .panelChannels{ display:grid !important; }
      body[data-mtab="chat"] .chatPanel{ display:flex !important; }
      body[data-mtab="online"] .panelOnline{ display:grid !important; }

      /* Ensure no child forces horizontal scroll */
      .top, .main, .panel, .dimLinks, .playLink{ min-width:0; max-width:100%; }

}
    .modeDot{ color: rgba(245,178,74,.75); font-weight:900; }
    .modeWord{ color: var(--tHour); font-weight:900; }
    .modeTag{ display:inline-flex; align-items:center; justify-content:center; font-size:11px; font-weight:900; letter-spacing:.08em; padding:3px 9px; border-radius:999px; color: var(--accent); border:1px solid rgba(124,255,107,.55); background: rgba(124,255,107,.12); }
    .modeTag.private{ color: var(--danger); border:1px solid rgba(255,122,122,.60); background: rgba(255,122,122,.12); }

    .modalHead{
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:12px 12px;
      border-bottom:1px solid rgba(255,255,255,.08);
    }
    .modalTitle{ font-weight:800; letter-spacing:.3px; }
    .modalBody{ padding:12px 12px 14px 12px; line-height:1.35; }
    .modalLabel{ display:block; font-size:12px; opacity:.8; margin-bottom:6px; }
    .modalBody input{
      width:100%;
      padding:10px 12px;
      border-radius:14px;
      border:1px solid rgba(255,255,255,.12);
      background:rgba(0,0,0,.30);
      color:var(--text);
      outline:none;
    }
    .modalBody input[type="checkbox"],
    .modalBody input[type="radio"]{
      width:18px;
      height:18px;
      padding:0;
      margin:0;
      border-radius:4px;
      border:none;
      background:transparent;
      accent-color:var(--accent);
      flex:0 0 auto;
    }

    .modalBody input[type="color"]{
      padding:0;
      height:44px;
      border-radius:14px;
      background:transparent;
      cursor:pointer;
      -webkit-appearance:none;
      appearance:none;
    }
    .modalBody input[type="color"]::-webkit-color-swatch-wrapper{ padding:6px; }
    .modalBody input[type="color"]::-webkit-color-swatch{ border:none; border-radius:10px; }
    .modalBody input[type="color"]::-moz-color-swatch{ border:none; border-radius:10px; }
    .profHex{ margin-top:6px; font-size:12px; color:var(--muted); letter-spacing:.4px; }
    .modalActions{
      display:flex;
      gap:10px;
      margin-top:12px;
    }
    .modalActions .primary{ flex:1; }
    .modalActions .secondary{ flex:1; }
    .pstnCard{ width:min(980px, 96vw); }
    #pstnModal.mini{
      align-items:flex-end;
      justify-content:flex-end;
      padding:12px;
      background:transparent;
      backdrop-filter:none;
      -webkit-backdrop-filter:none;
      pointer-events:none;
    }
    #pstnModal.mini .pstnCard{
      width:min(360px, calc(100vw - 24px));
      pointer-events:auto;
    }
    #pstnModal.mini .pstnBody{ display:none; }
    #pstnModal.mini .modalHead{
      border-bottom:0;
      cursor:pointer;
    }
    .pstnBody{
      display:grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap:14px;
      align-items:start;
    }
    .pstnPanel{
      border:1px solid rgba(255,255,255,.10);
      border-radius:16px;
      padding:12px;
      background:rgba(255,255,255,.03);
      min-height: 520px;
    }
    .pstnDialpad{
      margin-top:12px;
      display:grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap:8px;
    }
    .pstnKey{
      height:56px;
      border-radius:14px;
      border:1px solid rgba(255,255,255,.14);
      background:rgba(255,255,255,.06);
      color:var(--text);
      font-size:24px;
      font-weight:900;
      cursor:pointer;
    }
    .pstnKey:hover{ filter:brightness(1.08); }
    .pstnBack{ color:#ffd7d7; }
    .pstnPadActions{
      margin-top:10px;
      display:flex;
      justify-content:flex-end;
    }
    .pstnPadActions .secondary{
      flex:0 0 auto;
      min-width:112px;
    }
    .pstnDialFooter{
      margin-top:14px;
      display:flex;
      align-items:center;
      justify-content:center;
    }
    .pstnCallFab{
      width:84px;
      height:84px;
      border-radius:999px;
      border:1px solid rgba(124,255,107,.45);
      background:linear-gradient(180deg, rgba(99,255,147,.38), rgba(62,235,112,.30));
      color:#eaffef;
      font-size:38px;
      line-height:1;
      cursor:pointer;
      box-shadow: 0 16px 34px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.16);
    }
    .pstnCallFab:hover{ filter:brightness(1.06); }
    .pstnCallFab:disabled{
      opacity:.55;
      cursor:not-allowed;
      filter:none;
    }
    .pstnRecentWrap{
      margin-top:12px;
      border:1px solid rgba(255,255,255,.10);
      border-radius:12px;
      background:rgba(0,0,0,.18);
      padding:8px;
    }
    .pstnRecentHead{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:8px;
      margin-bottom:8px;
    }
    .pstnRecentTitle{
      margin:0;
      font-size:13px;
      font-weight:800;
    }
    .pstnRecentList{
      min-height:102px;
      max-height:180px;
      overflow:auto;
      display:flex;
      flex-direction:column;
      gap:6px;
    }
    .pstnRecentItem{
      width:100%;
      text-align:left;
      border:1px solid rgba(255,255,255,.08);
      border-radius:10px;
      background:rgba(255,255,255,.03);
      color:var(--text);
      padding:8px 10px;
      cursor:pointer;
    }
    .pstnRecentItem:hover{
      border-color: rgba(111,239,255,.35);
      background: rgba(111,239,255,.10);
    }
    .pstnRecentName{
      font-size:13px;
      font-weight:900;
      letter-spacing:.2px;
    }
    .pstnRecentMeta{
      margin-top:3px;
      font-size:11px;
      color:var(--muted);
      opacity:.92;
    }
    .pstnRecentEmpty{
      font-size:12px;
      color:var(--muted);
      opacity:.8;
      text-align:center;
      padding:14px 8px;
    }
    .pstnBookHeader{
      display:grid;
      grid-template-columns: 1fr;
      gap:6px;
      margin-bottom:10px;
    }
    .pstnBookTitle{
      font-size:14px;
      font-weight:800;
      margin-bottom:0;
    }
    .pstnBookList{
      border:1px solid rgba(255,255,255,.10);
      border-radius:12px;
      min-height:162px;
      max-height:206px;
      overflow:auto;
      background:rgba(0,0,0,.20);
      padding:6px;
    }
    .pstnBookItem{
      width:100%;
      text-align:left;
      padding:8px 10px;
      border:1px solid rgba(255,255,255,.08);
      border-radius:10px;
      background:rgba(255,255,255,.03);
      color:var(--text);
      cursor:pointer;
      margin-bottom:6px;
    }
    .pstnBookItem:last-child{ margin-bottom:0; }
    .pstnBookItem.active{
      border-color: rgba(124,255,107,.5);
      background: rgba(124,255,107,.12);
    }
    .pstnBookItemName{
      font-weight:900;
      font-size:14px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
    }
    .pstnBookItemPhone{
      margin-top:4px;
      font-size:12px;
      opacity:.85;
    }
    .pstnBookItemNote{
      margin-top:4px;
      font-size:11px;
      opacity:.65;
    }
    .pstnBookStar{
      color:#ffd86a;
      font-size:14px;
      flex:0 0 auto;
    }
    .pstnBookEmpty{
      font-size:12px;
      opacity:.75;
      padding:10px;
      text-align:center;
    }
    .pstnFriendQuick{
      margin-top:10px;
      border:1px solid rgba(255,255,255,.10);
      border-radius:12px;
      padding:10px;
      background:rgba(255,255,255,.03);
    }
    .pstnFriendRow{
      margin-top:6px;
      display:grid;
      grid-template-columns:minmax(0,1fr) auto;
      gap:8px;
      align-items:center;
    }
    .pstnFriendRow select{
      width:100%;
      height:40px;
      border-radius:12px;
      border:1px solid rgba(255,255,255,.12);
      background:rgba(0,0,0,.30);
      color:var(--text);
      padding:0 10px;
      outline:none;
    }
    .pstnFriendHint{
      margin-top:6px;
      color:var(--muted);
      opacity:.85;
    }
    .pstnBookEditor{
      margin-top:10px;
      border:1px solid rgba(255,255,255,.10);
      border-radius:12px;
      padding:10px;
      background:rgba(255,255,255,.03);
    }
    .pstnBookEditor .modalLabel{ margin-top:8px; }
    .pstnBookEditor .modalLabel:first-child{ margin-top:0; }
    .pstnFavoriteRow{
      margin-top:10px;
      display:flex;
      align-items:center;
      gap:8px;
      font-size:12px;
      opacity:.9;
      cursor:pointer;
      user-select:none;
      white-space:nowrap;
    }
    .pstnFavoriteRow input[type="checkbox"]{
      width:18px;
      height:18px;
      margin:0;
      flex:0 0 auto;
    }
    .pstnBookActions{
      margin-top:10px;
      display:grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap:8px;
    }
    .pstnBookActions .smallBtn{
      min-height:38px;
      font-weight:800;
    }
    @media (max-width: 900px){
      .pstnBody{
        grid-template-columns: 1fr;
      }
      .pstnPanel{
        min-height:0;
      }
    }
    @media (max-width: 560px) and (pointer: coarse){
      #pstnModal.mini{ padding:8px; }
      #pstnModal.mini .pstnCard{
        width:calc(100vw - 16px);
      }
    }
    .roomBgCropCard{ width:min(760px, 94vw); }
    .roomBgCropStageWrap{
      border:1px solid rgba(255,255,255,.12);
      border-radius:14px;
      overflow:hidden;
      background:rgba(0,0,0,.28);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
    }
    .roomBgCropCanvas{
      width:100%;
      height:auto;
      display:block;
      touch-action:none;
      cursor:grab;
      user-select:none;
      background:rgba(0,0,0,.3);
    }
    .roomBgCropCanvas.dragging{ cursor:grabbing; }
    .roomBgCropHelp{
      margin-top:8px;
      font-size:12px;
      color:var(--muted);
    }
    .roomBgCropZoomRow{
      margin-top:10px;
      display:grid;
      grid-template-columns: 96px 1fr;
      align-items:center;
      gap:10px;
    }
    .roomBgCropZoomRow label{ font-size:12px; color:var(--muted); }
    .roomBgCropZoomRow input[type="range"]{ width:100%; }
    .donateBanks{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap:8px;
    }
    .donateTopRow{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      flex-wrap:wrap;
    }
    .donateLangToggle{
      display:inline-flex;
      align-items:center;
      gap:6px;
    }
    .donateLangToggle .smallBtn{
      min-width:44px;
      font-weight:800;
      opacity:.78;
    }
    .donateLangToggle .smallBtn.active{
      opacity:1;
      border-color:rgba(124,255,107,.6);
      box-shadow: inset 0 0 0 1px rgba(124,255,107,.18);
      background:rgba(124,255,107,.12);
      color:#eaffef;
    }
    .donateBankBtn{
      width:100%;
      text-align:left;
      padding:10px 12px;
      border-radius:12px;
      border:1px solid rgba(255,255,255,.12);
      background:rgba(255,255,255,.05);
      color:var(--text);
      font-weight:800;
      cursor:pointer;
    }
    .donateBankBtn:hover{ background:rgba(255,255,255,.09); }
    .donateBankBtn:disabled{
      opacity:.45;
      cursor:not-allowed;
    }
    .donateLegalLinks{
      margin-top:10px;
      padding-top:10px;
      border-top:1px solid var(--border);
      display:flex;
      align-items:center;
      gap:8px;
      flex-wrap:wrap;
    }
    .walletCard .modalBody{
      display:flex;
      flex-direction:column;
      gap:10px;
    }
    .appQrCard .modalBody{
      display:flex;
      flex-direction:column;
      gap:10px;
    }
    .appQrLayout{
      display:grid;
      grid-template-columns: 230px minmax(0, 1fr);
      gap:12px;
      align-items:start;
    }
    .appQrImageWrap{
      border:1px solid rgba(255,255,255,.12);
      border-radius:14px;
      background:rgba(0,0,0,.24);
      padding:10px;
      display:flex;
      align-items:center;
      justify-content:center;
      min-height:230px;
    }
    #appQrImage{
      width:210px;
      height:210px;
      max-width:100%;
      max-height:100%;
      border-radius:10px;
      border:1px solid rgba(255,255,255,.08);
      background:rgba(255,255,255,.98);
    }
    .appQrActions{
      display:grid;
      grid-template-columns:1fr;
      gap:8px;
    }
    .walletModalBalanceRow{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
    }
    .walletModalBalance{
      font-size:30px;
      line-height:1;
      font-weight:900;
      letter-spacing:.02em;
      color:#eaffef;
      text-shadow: 0 0 10px rgba(124,255,107,.22);
    }
    .walletModalActions{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:8px;
    }
    .walletQuickTopupRow{
      display:grid;
      grid-template-columns:repeat(3, 1fr);
      gap:8px;
    }
    .walletQuickBtn{
      font-weight:900;
      letter-spacing:.02em;
    }
    .walletQuickTopupCustom{
      display:grid;
      grid-template-columns:minmax(0,1fr) auto;
      gap:8px;
      align-items:center;
    }
    .walletQuickTopupCustom input{
      width:100%;
      min-width:0;
    }
    .walletQuickTopupCustom .primary{
      white-space:nowrap;
      min-width:120px;
    }
    .walletLedgerList{
      min-height:120px;
      max-height:260px;
      overflow:auto;
      border:1px solid rgba(255,255,255,.10);
      border-radius:12px;
      background:rgba(0,0,0,.20);
      padding:8px;
      display:flex;
      flex-direction:column;
      gap:6px;
    }
    .walletLedgerEmpty{
      font-size:12px;
      color:var(--muted);
      opacity:.82;
      text-align:center;
      padding:14px 8px;
    }
    .walletLedgerItem{
      border:1px solid rgba(255,255,255,.10);
      border-radius:10px;
      background:rgba(255,255,255,.03);
      padding:8px 10px;
      display:flex;
      flex-direction:column;
      gap:3px;
    }
    .walletLedgerTop{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:8px;
      font-size:12px;
    }
    .walletLedgerAmt{
      font-weight:900;
      letter-spacing:.02em;
    }
    .walletLedgerAmt.pos{ color:#86ff9b; }
    .walletLedgerAmt.neg{ color:#ff9a9a; }
    .walletLedgerMeta{
      font-size:11px;
      color:var(--muted);
      opacity:.88;
    }
    @media (max-width: 560px){
      .donateBanks{ grid-template-columns: 1fr; }
      .walletModalActions{ grid-template-columns:1fr; }
      .walletQuickTopupRow{ grid-template-columns:1fr; }
      .walletQuickTopupCustom{ grid-template-columns:1fr; }
      .appQrLayout{ grid-template-columns:1fr; }
      .appQrImageWrap{ min-height:210px; }
    }
    .inviteBox{
      margin-top:14px;
      padding:10px 10px;
      border-radius:16px;
      border:1px solid rgba(110,255,200,.20);
      background:rgba(0,0,0,.22);
    }
    .inviteRow{
      display:flex;
      align-items:center;
      justify-content:space-between;
      margin-bottom:8px;
    }
    .inviteLabel{ font-size:12px; opacity:.85; font-weight:700; }
    .lockBadge{
      display:inline-flex;
      margin-right:6px;
      opacity:.85;
      transform: translateY(-1px);
    }


/* --- Profile avatars + accent --- */
.line.accLine{ border-left:3px solid var(--acc, transparent); padding-left:6px; border-radius:10px; }
.mava{ width:16px; height:16px; border-radius:6px; object-fit:cover; vertical-align:middle; margin:0 6px 0 0; display:inline-block; }
.uava{ width:18px; height:18px; border-radius:7px; object-fit:cover; margin-right:8px; flex:0 0 auto; }
.uava.ph, .mava.ph{ background: rgba(255,255,255,0.08); }

/* --- Avatar hover zoom (desktop pointer) --- */
@media (hover:hover) and (pointer:fine){
  img.mava, img.uava, img.profPrev, #profAvatarPrev{
    position:relative;
    z-index:1;
    transition: transform 140ms ease, box-shadow 140ms ease, outline-color 140ms ease;
  }
  img.mava, img.uava{ transform-origin: left center; }
  img.profPrev, #profAvatarPrev{ transform-origin: center center; }

  img.mava:hover, img.uava:hover, img.profPrev:hover, #profAvatarPrev:hover{
    z-index:9999;
    transform: scale(3);
    outline: 1px solid rgba(255,255,255,0.18);
    box-shadow: 0 18px 50px rgba(0,0,0,0.45);
  }
}

img.mava:hover, img.uava:hover, img.profPrev:hover, #profAvatarPrev:hover{
    z-index:9999;
    transform: scale(3);
    outline: 1px solid rgba(255,255,255,0.18);
    box-shadow: 0 18px 50px rgba(0,0,0,0.45);
  }
}
.profileGrid{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width:560px) and (pointer: coarse){ .profileGrid{ grid-template-columns: 1fr; } }
.profRow{ display:flex; align-items:center; gap:10px; }
.profPrev{ width:48px; height:48px; border-radius:14px; object-fit:cover; background: rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12); }
.profHint{ font-size:12px; opacity:0.75; margin-top:6px; }
.profPwBox{
  margin-top:12px;
  padding-top:10px;
  border-top:1px solid rgba(255,255,255,.10);
  display:grid;
  gap:8px;
}
.profSessionsBox{
  margin-top:12px;
  padding-top:10px;
  border-top:1px solid rgba(255,255,255,.10);
  display:grid;
  gap:8px;
}
.profPwActions{
  display:flex;
  justify-content:flex-start;
  gap:8px;
}
#profilePwHint{
  min-height:16px;
}
.profileSessionsList{
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  background:rgba(0,0,0,.16);
  max-height:180px;
  overflow:auto;
  padding:6px;
  display:grid;
  gap:6px;
}
.profileSessionItem{
  border:1px solid rgba(255,255,255,.10);
  border-radius:10px;
  padding:7px 9px;
  background:rgba(255,255,255,.03);
}
.profileSessionItem.current{
  border-color: rgba(124,255,107,.38);
  box-shadow: inset 0 0 0 1px rgba(124,255,107,.16);
}
.profileSessionMain{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  font-size:12px;
  font-weight:800;
}
.profileSessionTag{
  display:inline-flex;
  align-items:center;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid rgba(124,255,107,.35);
  background:rgba(124,255,107,.12);
  color:#c8ffd3;
  font-size:11px;
  line-height:1;
  font-weight:900;
}
.profileSessionMeta{
  margin-top:4px;
  color:rgba(198,213,232,.88);
  font-size:11px;
}
#profileSessionsHint{
  min-height:16px;
}



/* --- Theme selector (step07) --- */
/* step08: compact dropdown list (atsidaranti lista) */
.themeSelectRow{ display:flex; align-items:center; gap:10px; }
.themeSelect{
  width:100%;
  height:42px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.05);
  color: var(--text);
  padding:0 12px;
  outline:none;
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  cursor:pointer;
}
.themeSelect:focus{ border-color: rgba(255,255,255,0.20); box-shadow: 0 0 0 2px rgba(124,255,107,0.14); }
.themeSelect option{
  color: #0a1320;
  background: #eef4fb;
}
.themeSelect option:checked{
  color: #061015;
  background: #baf6c7;
}
.themeSelectRow::after{
  content:"▾";
  margin-left:-28px;
  pointer-events:none;
  opacity:.75;
}

.themeGrid{ display:grid; grid-template-columns: 1fr; gap:10px; }
.themeTile{
  width:100%;
  display:flex; gap:12px; align-items:center;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.05);
  color: var(--text);
  cursor:pointer;
  user-select:none;
}
.themeTile:hover{ border-color: rgba(255,255,255,0.18); }
.themeTile.sel{ border-color: var(--accent); box-shadow: 0 0 0 2px rgba(124,255,107,0.18); }
.themeSwatch{
  width:44px; height:32px; border-radius:12px;
  border:1px solid rgba(255,255,255,0.14);
  background: linear-gradient(135deg, var(--bg), rgba(255,255,255,0.08));
  position:relative;
  overflow:hidden;
}
.themeSwatch:after{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(circle at 20% 20%, rgba(124,255,107,0.35), transparent 60%),
              radial-gradient(circle at 80% 70%, rgba(107,228,255,0.28), transparent 55%);
  opacity:.9;
}

/* Theme swatch previews */
#themeTileHestio .themeSwatch{
  background: linear-gradient(135deg, #0b0f14, rgba(255,255,255,0.10));
}
#themeTileMono .themeSwatch{
  background: linear-gradient(135deg, #050607, #23262b);
  border-color: rgba(255,255,255,0.18);
}
#themeTileMono .themeSwatch:after{
  background: radial-gradient(circle at 25% 30%, rgba(255,255,255,0.18), transparent 60%),
              radial-gradient(circle at 75% 70%, rgba(255,255,255,0.10), transparent 55%);
  opacity:.8;
}
.themeText{ display:flex; flex-direction:column; line-height:1.15; }
.themeName{ font-weight:700; letter-spacing:.2px; }
.themeDesc{ font-size:12px; color: var(--muted); margin-top:2px; }


/* --- step100: Mobile topbar compaction + stable profile click --- */
@media (max-width: 560px) and (pointer: coarse){
  .top{
    display:grid;
    grid-template-columns: repeat(14, minmax(0, 1fr));
    grid-template-rows: 36px 32px auto;
    align-items:center;
    column-gap:4px;
    row-gap:6px;
    padding:8px;
  }
  .brand{
    display:contents;
  }
  .brand img{
    grid-column:1 / span 1;
    grid-row:1;
    width:20px;
    height:20px;
    border-radius:5px;
    box-shadow:0 4px 10px rgba(0,0,0,.28);
    align-self:center;
    justify-self:start;
  }
  .brand b{
    grid-column:2 / span 6;
    grid-row:1;
    min-width:0;
    font-size:clamp(13px, 4.4vw, 18px);
    line-height:1;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    align-self:center;
  }
  #vilniusTime.vltime{
    grid-column:7 / span 5;
    grid-row:1;
    margin:0;
    justify-self:start;
    align-self:center;
    padding:4px 6px;
    letter-spacing:0;
    box-shadow:0 5px 10px rgba(0,0,0,.16);
    font-size:clamp(12px, 3.3vw, 16px);
    line-height:1;
    white-space:nowrap;
    max-width:100%;
    overflow:hidden;
    transform:none;
  }
  #vilniusTime .tDate{
    display:inline;
    font-size:9px;
    opacity:.92;
    white-space:nowrap;
    margin-right:2px;
  }
  #vilniusTime .tSep{ padding:0; }

  .actions{
    display:contents;
    width:auto;
    margin:0;
    order:0;
  }

  #adminBtn{ grid-column:14 / span 1; grid-row:1; align-self:center; }
  .actions .pill{ grid-column:13 / span 1; grid-row:1; align-self:center; margin-left:2px; }
  #manTodoBtn{ grid-column:12 / span 1; grid-row:1; align-self:center; }

  #soundToggle{ grid-column:1 / span 2; grid-row:2; }
  #pstnBtn{ grid-column:3 / span 2; grid-row:2; }
  #profileBtn{ grid-column:5 / span 2; grid-row:2; }
  #donateBtn{ grid-column:7 / span 2; grid-row:2; }
  #appQrBtn{ grid-column:9 / span 2; grid-row:2; }
  #walletBadge{ grid-column:11 / span 2; grid-row:2; }
  #logout{ grid-column:13 / span 2; grid-row:2; }

  #soundToggle, #pstnBtn, #profileBtn, #adminBtn, #manTodoBtn{
    width:100%;
    height:30px;
    min-height:30px;
    min-width:0;
    padding:0;
    justify-self:stretch;
  }
  #donateBtn, #appQrBtn, #walletBadge, #logout{
    height:30px;
    min-height:30px;
    min-width:0;
    width:100%;
    padding:0 5px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  #donateBtn, #appQrBtn, #logout{ font-size:9px; }
  #walletBadge{
    width:100%;
    font-size:9px;
    justify-content:center;
    padding-left:0;
    letter-spacing:0;
  }
  #logout{ width:100%; padding:0 4px; font-size:8.5px; }

  .actions .pill{
    min-width:0;
    width:26px;
    height:26px;
    padding:0;
    gap:0;
    border:1px solid var(--border);
    background:rgba(0,0,0,.16);
    border-radius:11px;
    box-shadow: 0 6px 12px rgba(0,0,0,.18);
    justify-self:center;
    align-self:center;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  .actions .pill #st{ display:none !important; }
  .actions .dot{
    width:11px;
    height:11px;
    box-shadow: 0 0 0 2px rgba(0,0,0,.12);
  }
  #soundToggle, #pstnBtn, #profileBtn{ font-size:20px; }
  #manTodoBtn .manTodoIcon{ width:11px; height:11px; }

  .dimLinks{
    grid-column:1 / -1;
    grid-row:3;
    order:0;
    width:100%;
    margin-top:2px;
  }
}

@media (max-width: 900px){
  .friendsTitleRow > span{ flex:1 0 100%; }
  .friendsControls{
    margin-left:0;
    flex:1 0 100%;
    justify-content:flex-start;
  }
}


/* --- DM WebRTC call controls (DM only) --- */
#dmVoiceBtn, #dmVideoBtn{
  position: relative;
  z-index: 10002;
  pointer-events: auto;
  touch-action: manipulation;
  white-space:nowrap;
  border-radius: 10px;
  padding: 3px 7px;
  font-size: 12px;
  line-height: 1;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 6px 14px rgba(0,0,0,.28);
}
#dmVoiceBtn{ background: linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.06)); }
#dmVideoBtn{ background: linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.07)); }
#dmVoiceBtn:hover, #dmVideoBtn:hover{ filter: brightness(1.08); }
#dmVoiceBtn:disabled, #dmVideoBtn:disabled{ opacity:.5; cursor:not-allowed; }
#rtcHeadStatus{
  display:none;
  white-space:nowrap;
  align-items:center;
  gap:6px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  line-height: 1;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.22);
  color: rgba(235,245,255,.92);
}
#rtcHeadStatus.rtcOk{ background: rgba(76,255,176,.12); border-color: rgba(76,255,176,.28); }
#rtcHeadStatus.rtcWarn{ background: rgba(255,198,76,.12); border-color: rgba(255,198,76,.28); }
#rtcHeadStatus.rtcErr{ background: rgba(255,92,92,.12); border-color: rgba(255,92,92,.28); }

#rtcHistoryBtn{
  position: relative;
  z-index: 10002;
  pointer-events: auto;
  touch-action: manipulation;
  border-radius: 10px;
  padding: 3px 8px;
  font-size: 12px;
  line-height: 1;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 6px 14px rgba(0,0,0,.28);
  background: linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.05));
}
#rtcHistoryBtn:hover{ filter: brightness(1.08); }
#rtcHistoryBtn .rtcBadge{
  position:absolute;
  top:-5px;
  right:-5px;
  min-width: 16px;
  height: 16px;
  padding: 0 5px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius: 999px;
  font-size: 10px;
  line-height: 1;
  background: rgba(255,92,92,.92);
  color: #fff;
  border: 1px solid rgba(0,0,0,.35);
  box-shadow: 0 8px 18px rgba(0,0,0,.35);
}

#rtcHistList{ display:flex; flex-direction:column; gap:8px; }
.rtcHistItem{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius: 12px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
}
.rtcHistItem .rtcHistMain{ flex:1; min-width:0; }
.rtcHistItem .rtcHistTop{ display:flex; align-items:baseline; gap:8px; min-width:0; }
.rtcHistItem .rtcHistPeer{ font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rtcHistItem .rtcHistMeta{ font-size: 12px; opacity:.75; white-space:nowrap; }
.rtcHistItem .rtcHistRes{ font-size: 12px; opacity:.85; }
.rtcHistItem .rtcHistDir{
  width: 26px; height: 26px;
  display:flex; align-items:center; justify-content:center;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
}

/* RTC history modal: keep actions visible even with long history */
#rtcHistModal .modalCard{
  width: min(720px, 94vw);
  max-height: min(86dvh, 760px);
  display: flex;
  flex-direction: column;
}
#rtcHistModal .modalBody{
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
#rtcHistList{
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  max-height: none;
  padding-right: 2px;
}
#rtcHistActions{
  margin-top: 10px !important;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.10);
  background: rgba(15,16,20,.92);
  position: sticky;
  bottom: 0;
  z-index: 1;
}

#rtcModal .modalCard{ max-width: 820px; }
#rtcGrid{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
#rtcGrid video{ width:100%; height: 280px; background: rgba(0,0,0,.35); border-radius: 14px; border:1px solid rgba(255,255,255,.10); object-fit: cover; }
#rtcGrid .rtcLabel{ font-size: 12px; opacity:.85; margin: 0 0 6px 2px; }
#rtcStatus{ font-size:12px; opacity:.85; margin-top:8px; }
#rtcActions{ display:flex; gap:10px; justify-content:flex-end; margin-top:12px; flex-wrap:wrap; }
#rtcDevicePanel{
  display:none;
  margin-top:10px;
  padding:10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
}
#rtcDevicePanel .rtcDevRow{
  display:grid;
  grid-template-columns: 92px 1fr;
  align-items:center;
  gap:10px;
  margin-bottom:8px;
}
#rtcDevicePanel .rtcDevRow:last-of-type{ margin-bottom:0; }
#rtcDevicePanel label{
  font-size:12px;
  opacity:.88;
}
#rtcMicSelect, #rtcCamSelect{
  min-width:0;
  height:34px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: var(--text);
  padding: 0 10px;
  outline:none;
}
#rtcMicSelect option, #rtcCamSelect option{
  color:#0a1320;
  background:#eef4fb;
}
#rtcMicSelect option:checked, #rtcCamSelect option:checked{
  color:#061015;
  background:#baf6c7;
}
#rtcMicSelect:focus, #rtcCamSelect:focus{
  border-color: rgba(255,255,255,.20);
  box-shadow: 0 0 0 2px rgba(124,255,107,.14);
}
#rtcDeviceHint{
  margin-top:8px;
  opacity:.78;
}
@media (max-width: 700px){
  #rtcGrid{ grid-template-columns: 1fr; }
  #rtcGrid video{ height: 220px; }
  #rtcDevicePanel .rtcDevRow{ grid-template-columns: 1fr; gap:6px; }
}


/* RTC docked call panel (keep chatting while in call) */
#rtcModal.docked{
  inset: auto !important;
  top: auto !important;
  left: auto !important;
  right: 14px !important;
  bottom: 14px !important;
  width: auto !important;
  height: auto !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  pointer-events: none;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 0;
}
#rtcModal.docked .modalCard{
  pointer-events: auto;
  max-width: 420px;
  width: 360px;
  margin: 0;
  box-shadow: 0 18px 55px rgba(0,0,0,.45);
}
#rtcModal.docked.mini .modalCard{ width: 260px; }
#rtcModal.docked #rtcGrid video{ height: 140px; }
#rtcModal.docked .modalHead{ padding: 10px 12px; }
#rtcModal.docked .modalBody{ padding: 10px 12px 12px 12px; }
#rtcModal.docked #rtcActions{ justify-content: flex-end; }
#rtcModal.docked.mini #rtcGrid{ display: none; }
#rtcModal.docked.mini #rtcPeerLine{ display: none; }
#rtcModal.docked.mini .modalBody{ padding-top: 8px; }
#rtcModal.docked.mini #rtcActions{ margin-top: 8px; }
@media (max-width: 420px){
  #rtcModal.docked .modalCard{ width: calc(100vw - 28px); }
  #rtcModal.docked #rtcGrid video{ height: 120px; }
}


/* RTC extras: timer + controls */
#rtcTimer{ font-size:12px; opacity:.8; margin-left:auto; padding-left:10px; white-space:nowrap; }
#rtcModal.docked .modalHead{ cursor: grab; user-select:none; }
#rtcModal.docked.dragging .modalHead{ cursor: grabbing; }
.rtcToolBtn{
  min-width:44px;
  justify-content:center;
  position:relative;
  font-size:20px;
  line-height:1;
}
.rtcToolBtn .rtcIcon{
  display:inline-block;
  font-size:22px;
  line-height:1;
}
.rtcToolBtn.rtcOff::after{
  content:"";
  position:absolute;
  width:30px;
  height:2px;
  background:#ff4d4d;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%) rotate(-25deg);
  border-radius:2px;
  box-shadow:0 0 6px rgba(255,77,77,0.6);
  pointer-events:none;
}
#rtcNet{ font-size:11px; opacity:.75; margin-top:6px; }
#rtcModal.docked #rtcNet{ margin-top:4px; }

/* File transfer modal (docked) */
#ftModal.docked{
  inset:auto !important;
  top:auto !important;
  left:auto !important;
  right:14px !important;
  bottom: calc(14px + 430px) !important; /* above call dock */
  width:auto !important;
  height:auto !important;
  background: transparent !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  pointer-events:none;
  align-items:flex-end;
  justify-content:flex-end;
  padding:0;
}
#ftModal.docked .modalCard{
  pointer-events:auto;
  max-width:420px;
  width:360px;
  margin:0;
  box-shadow: 0 18px 55px rgba(0,0,0,.45);
}
#ftModal.docked.mini .modalCard{ width:260px; }
#ftModal.docked .modalHead{ padding:10px 12px; cursor:default; }
#ftModal.docked .modalBody{ padding:10px 12px 12px 12px; }
#ftProgWrap{ width:100%; background:rgba(255,255,255,.08); border-radius:10px; overflow:hidden; height:10px; }
#ftProgBar{ height:10px; width:0%; background:rgba(120,255,120,.85); }
#ftMeta{ font-size:12px; opacity:.85; margin:8px 0 10px 0; word-break:break-word; }
#ftStatus{ font-size:12px; opacity:.9; margin-top:8px; }


/* ---- Bulk multi-send (selected recipients) ---- */
.userItem.bulkSel, .friendItem.bulkSel{
  outline: 1px solid rgba(124,255,107,.55);
  background: rgba(124,255,107,.09);
}

.bulkBar{
  position: fixed;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  z-index: 9999;
  display: none;
  width: min(860px, calc(100% - 24px));
  pointer-events: auto;
}
.bulkBar.show{ display:block; }

.bulkBar .bulkInner{
  display:flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(8,12,18,.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 14px 36px rgba(0,0,0,.35);
}
.bulkBar .bulkInfo{
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  color: var(--text);
  opacity: .92;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bulkBar .bulkBtns{
  display:flex;
  gap: 8px;
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
}


/* ---- Bulk summary modal (step53) ---- */
.bulkSummaryModal{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.45);
  z-index: 10000;
}
.bulkSummaryCard{
  width: min(560px, calc(100% - 24px));
  max-height: min(72vh, 640px);
  overflow: auto;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 12px 12px 10px 12px;
  box-shadow: 0 14px 40px rgba(0,0,0,.28);
}
.bulkSummaryHead{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.bulkSummaryTitle{
  font-weight: 800;
  font-size: 15px;
}
.bulkSummaryClose{
  background: transparent;
  border: 1px solid var(--border);
  color: inherit;
  border-radius: 12px;
  padding: 6px 10px;
  cursor: pointer;
}
.bulkSummarySub{
  font-size: 12px;
  opacity: .85;
  margin-bottom: 10px;
}
.bulkSummaryList{
  border-top: 1px solid var(--border);
  padding-top: 8px;
}
.bulkSummaryItem{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 2px;
  border-bottom: 1px dashed rgba(255,255,255,.10);
}
.bulkSummaryPeer{
  font-weight: 700;
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bulkSummaryReason{
  font-size: 12px;
  opacity: .85;
  white-space: nowrap;
}
.bulkSummaryEmpty{
  padding: 10px 2px;
  opacity: .9;
}
.bulkSummaryBtns{
  display:flex;
  justify-content: flex-end;
  margin-top: 10px;
}