:root {
  color-scheme: dark;
  --bg: #0b0e14;
  --panel: #111620;
  --panel2: #171d29;
  --line: #252d3b;
  --text: #f3f6fb;
  --muted: #8f9bad;
  --accent: #5a7dff;
  --accent2: #7492ff;
  --danger: #ff6677;
  --success: #50d890;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif; background: var(--bg); color: var(--text); }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }
.grow { flex: 1; min-width: 0; }
.stack { display: flex; flex-direction: column; }
.gap8 { gap: 8px; }.gap12 { gap: 12px; }.gap16 { gap: 16px; }
.muted, .hint { color: var(--muted); }
.hint { font-size: 13px; line-height: 1.5; }
label { display: flex; flex-direction: column; gap: 7px; color: #cbd3df; font-size: 13px; }
input, textarea { width: 100%; border: 1px solid var(--line); background: #0e131c; color: var(--text); border-radius: 11px; padding: 11px 12px; outline: none; }
input:focus, textarea:focus { border-color: #5877df; box-shadow: 0 0 0 3px rgba(90,125,255,.13); }
textarea { resize: vertical; }
.primary, .danger, .ghost, .side-actions button { border: 0; border-radius: 10px; padding: 11px 14px; color: white; }
.primary { background: var(--accent); }.primary:hover { background: var(--accent2); }.primary:disabled { opacity: .45; cursor: not-allowed; }
.danger { background: rgba(255,102,119,.15); color: #ff8995; border: 1px solid rgba(255,102,119,.25); }
.ghost { background: transparent; color: var(--muted); padding: 8px; }
.login-view { min-height: 100vh; display: grid; place-items: center; background: radial-gradient(circle at 50% 20%, #18213a 0, var(--bg) 45%); }
.login-card { width: min(420px, calc(100vw - 32px)); padding: 30px; background: rgba(17,22,32,.94); border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 25px 80px rgba(0,0,0,.35); }
.login-card h1 { margin: 14px 0 4px; }.login-card p { margin: 0 0 24px; color: var(--muted); }
.brand-mark { width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; background: linear-gradient(135deg,#5071ff,#8a62ff); font-weight: 900; font-size: 24px; }
.brand-mark.small { width: 36px; height: 36px; border-radius: 11px; font-size: 18px; }
.app { height: 100vh; height: 100dvh; min-height: 0; display: grid; grid-template-columns: 360px minmax(0,1fr); overflow: hidden; }
.sidebar { background: var(--panel); border-right: 1px solid var(--line); display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; }
.brand-row { height: 66px; display: flex; align-items: center; gap: 10px; padding: 0 14px; border-bottom: 1px solid var(--line); }
.brand-row > div:nth-child(2) { display: flex; flex-direction: column; flex: 1; }
.status-text { font-size: 11px; color: var(--muted); margin-top: 2px; }
.icon-btn { border: 0; color: #aeb8c7; background: transparent; width: 34px; height: 34px; border-radius: 9px; }
.icon-btn:hover { background: var(--panel2); }
.search-wrap { padding: 12px; }.search-wrap input { background: var(--panel2); }
.side-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 12px 10px; }
.side-actions button { background: #1a2230; color: #ccd5e2; padding: 9px; font-size: 13px; }
.chat-list { flex: 1 1 0; height: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.chat-item { width: 100%; border: 0; background: transparent; color: inherit; text-align: left; display: grid; grid-template-columns: 44px 1fr auto; gap: 10px; padding: 11px 13px; border-left: 3px solid transparent; }
.chat-item:hover { background: #141a25; }.chat-item.active { background: #192234; border-left-color: var(--accent); }
.avatar { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 50%; display: grid; place-items: center; background: #283246; color: #dfe6f2; font-weight: 700; overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.chat-name { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; font-weight: 650; }
.chat-preview { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 4px; }
.chat-time { font-size: 10px; color: var(--muted); }
.unread { min-width: 21px; height: 21px; padding: 0 6px; border-radius: 12px; background: var(--accent); display: grid; place-items: center; font-size: 11px; margin-top: 5px; }
.sidebar-footer { border-top: 1px solid var(--line); display: flex; justify-content: space-between; padding: 7px 10px; }
.chat-pane { min-width: 0; min-height: 0; overflow: hidden; background: linear-gradient(180deg,#0d1119,#0a0d13); position: relative; }
.empty-state { height: 100%; display: grid; place-content: center; text-align: center; color: var(--muted); }.empty-state h2 { color: var(--text); margin: 14px 0 2px; }.empty-state p { margin: 0; }
.empty-icon { margin: auto; width: 64px; height: 64px; border-radius: 21px; display: grid; place-items: center; background: #171e2b; color: #6f87ea; font-weight: 900; font-size: 26px; }
.chat-active { height: 100%; min-height: 0; display: grid; grid-template-rows: 66px minmax(0,1fr) auto; }
.chat-header { display: flex; align-items: center; gap: 11px; padding: 0 18px; border-bottom: 1px solid var(--line); background: rgba(17,22,32,.8); backdrop-filter: blur(12px); }
.chat-header .grow { display: flex; flex-direction: column; }.chat-header span { color: var(--muted); font-size: 12px; margin-top: 2px; }
.messages { min-height: 0; overflow-y: auto; padding: 24px max(24px, calc((100% - 900px)/2)); display: flex; flex-direction: column; gap: 8px; }
.message { max-width: min(72%, 680px); padding: 9px 12px 7px; border-radius: 15px 15px 15px 5px; background: #19202d; align-self: flex-start; box-shadow: 0 3px 9px rgba(0,0,0,.12); }
.message.mine { align-self: flex-end; background: #273761; border-radius: 15px 15px 5px 15px; }
.message .text { white-space: pre-wrap; word-break: break-word; font-size: 14px; line-height: 1.4; }.message .meta { text-align: right; color: #91a0b4; font-size: 9px; margin-top: 3px; }
.composer { display: flex; gap: 10px; padding: 12px max(16px, calc((100% - 920px)/2)); border-top: 1px solid var(--line); background: var(--panel); }.composer textarea { resize: none; max-height: 140px; }.send-btn { width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--accent); color: white; font-size: 18px; }
.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.58); backdrop-filter: blur(4px); z-index: 50; }
dialog.modal { border: 1px solid var(--line); background: var(--panel); color: var(--text); border-radius: 18px; width: min(510px, calc(100vw - 30px)); padding: 24px; z-index: 60; box-shadow: 0 30px 100px rgba(0,0,0,.55); }
dialog.modal::backdrop { background: rgba(0,0,0,.55); backdrop-filter: blur(4px); }.modal.wide { width: min(920px, calc(100vw - 30px)); }.modal h2 { margin: 0 34px 8px 0; }.modal-close { position: absolute; right: 14px; top: 14px; width: 32px; height: 32px; border-radius: 50%; border: 0; background: #202735; color: #b8c0cd; font-size: 22px; }
.tabs { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); background: #0e131c; padding: 4px; border-radius: 11px; margin: 16px 0; }.tab { border: 0; background: transparent; color: var(--muted); padding: 9px; border-radius: 8px; }.tab.active { background: #202a3c; color: white; }
.success-box { padding: 14px; background: rgba(80,216,144,.10); color: #7be5aa; border: 1px solid rgba(80,216,144,.20); border-radius: 12px; }.warning-box { padding: 12px; border-radius: 11px; background: rgba(255,190,80,.08); border: 1px solid rgba(255,190,80,.18); color: #e6c887; font-size: 12px; line-height: 1.5; }
.qr-box { text-align: center; }.qr-box img { width: 280px; max-width: 100%; border-radius: 14px; background: white; padding: 8px; }.qr-box p { color: var(--muted); }
.lookup-result { padding: 13px; border: 1px solid var(--line); border-radius: 12px; background: #141a25; }
.broadcast-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 22px; }.stats-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; }.stat { padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: #141a25; }.stat strong { display: block; font-size: 19px; }.stat span { color: var(--muted); font-size: 11px; }
.campaign-state { border: 1px solid var(--line); border-radius: 12px; min-height: 200px; padding: 13px; max-height: 420px; overflow: auto; font-size: 12px; }.campaign-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 6px 0; border-bottom: 1px solid #202633; }.campaign-row.sent { color: #6edc9d; }.campaign-row.failed { color: #ff8390; }
.toast { position: fixed; right: 20px; bottom: 20px; z-index: 100; background: #1f2735; border: 1px solid var(--line); color: white; padding: 11px 14px; border-radius: 11px; opacity: 0; transform: translateY(10px); pointer-events: none; transition: .2s; max-width: 420px; }.toast.show { opacity: 1; transform: translateY(0); }.toast.error { border-color: rgba(255,102,119,.5); }
@media (max-width: 800px) { .app { grid-template-columns: 300px minmax(0,1fr); }.broadcast-grid { grid-template-columns: 1fr; } }

#browserTab .hint { font-size: 12px; line-height: 1.55; color: var(--muted); }
#browserTab input { font-family: ui-monospace, Consolas, monospace; font-size: 12px; }

.app-version { color: var(--muted); font-size: 10px; font-weight: 500; }

.chat-diag { padding: 4px 14px 6px; color: var(--muted); font-size: 10px; border-top: 1px solid var(--line); text-align: left; }

.chat-diag { display:block; margin:0; padding:6px 12px; border:0; background:transparent; color:var(--muted); font-size:11px; text-align:left; cursor:pointer; }
.chat-diag:hover {color:var(--text);}

/* HMD MAX v0.1.7 — invite panel */
.side-actions button.invite-entry { grid-column:1/-1; text-align:center; background:#253458; }
.bordered { border:1px solid var(--line); }
.row-inline { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.row-inline h3 { margin:0; }
.checkbox-line { display:flex; flex-direction:row; align-items:flex-start; gap:10px; line-height:1.35; }
.checkbox-line input { width:17px; height:17px; margin:0; flex:0 0 17px; accent-color:var(--accent); }
.invite-history { border:1px solid var(--line); border-radius:12px; padding:8px; max-height:245px; overflow:auto; min-height:90px; }
.invite-item { width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px; text-align:left; padding:11px; border:0; border-bottom:1px solid var(--line); background:transparent; color:var(--text); }
.invite-item:hover, .invite-item.active { background:var(--panel2); }
.invite-item small { display:block; color:var(--muted); margin-top:4px; }
.invite-detail { border:1px solid var(--line); border-radius:12px; background:#0e131c; padding:12px; min-height:120px; max-height:270px; overflow:auto; font-size:12px; }
.invite-result-row { display:grid; grid-template-columns: minmax(0, 1fr) auto; gap:10px; padding:8px 0; border-bottom:1px solid var(--line); }
.invite-result-row small { display:block; color:var(--muted); word-break:break-word; }
.invite-status-added, .invite-status-already_member { color:var(--success); }
.invite-status-error, .invite-status-unknown { color:var(--danger); }
.invite-status-sending, .invite-status-pending { color:var(--muted); }

/* External VK ID challenge is opened in a separate browser popup. */
#captchaBox button { width: 100%; }