/* Dahar — стили приложения. Три темы: «Стекло», «Графит», «Красная пантера».
   Телефон: вкладки внизу. Планшет (≥ 900px): вкладки слева, список и чат рядом. */

:root, [data-theme="glass"] {
  --wall: radial-gradient(60% 40% at 8% 6%, #9BF2CF 0%, transparent 70%), radial-gradient(55% 38% at 96% 18%, #BFD3FF 0%, transparent 70%), radial-gradient(70% 45% at 70% 98%, #F9D7EC 0%, transparent 70%), radial-gradient(60% 40% at 0% 78%, #C9F7E7 0%, transparent 70%), #EEF3F1;
  --surface: rgba(255,255,255,.55); --surface-solid: #FFFFFF; --surface-border: rgba(255,255,255,.88);
  --blur: blur(26px) saturate(190%); --glow: inset 0 1px 0 rgba(255,255,255,.95), 0 10px 30px -14px rgba(20,50,40,.35);
  --text: #0A1A14; --muted: #52605A; --line: rgba(10,26,20,.08); --chip: rgba(255,255,255,.6);
  --accent: #0B8F63; --accent-2: #12A06E; --on-accent: #FFFFFF; --accent-soft: rgba(11,143,99,.12);
  --in: rgba(255,255,255,.88); --in-text: #0A1A14; --out: linear-gradient(160deg,#16B07A,#0B8F63); --out-text: #FFFFFF;
  --danger: #D92D20; --warn: #B35C00; --ok: #0B8F63; --tab-on: rgba(255,255,255,.95); --tab-on-fg: #0B8F63;
  --shade: rgba(10,20,16,.32); --sheet: rgba(250,252,251,.92); --live: #E5372E; --read: #34B7F1;
  --font: 'Golos Text', 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif; --title: var(--font);
  --r: 22px; color-scheme: light;
}
[data-theme="graphite"] {
  --wall: #0D0F0E;
  --surface: #181B1A; --surface-solid: #181B1A; --surface-border: #202423;
  --blur: none; --glow: none;
  --text: #F1F4F2; --muted: #8C9590; --line: #232726; --chip: #1E2221;
  --accent: #2EE59D; --accent-2: #22C98A; --on-accent: #0D0F0E; --accent-soft: #12271E;
  --in: #1E2221; --in-text: #F1F4F2; --out: #0E7A55; --out-text: #FFFFFF;
  --danger: #FF6B5E; --warn: #FFB35C; --ok: #2EE59D; --tab-on: #2EE59D; --tab-on-fg: #0D0F0E;
  --shade: rgba(0,0,0,.6); --sheet: #151817; --live: #FF4D40; --read: #2EE59D;
  --title: 'Unbounded', 'Golos Text', var(--font); --r: 18px; color-scheme: dark;
}
[data-theme="panther"] {
  --wall: radial-gradient(70% 45% at 15% -5%, rgba(229,38,46,.30), transparent 70%), radial-gradient(60% 40% at 105% 105%, rgba(160,16,24,.28), transparent 70%), #060606;
  --surface: rgba(24,22,23,.62); --surface-solid: #151314; --surface-border: rgba(255,255,255,.07);
  --blur: blur(28px) saturate(140%); --glow: inset 0 1px 0 rgba(255,255,255,.06), 0 14px 34px -16px rgba(0,0,0,.9);
  --text: #F5F1F1; --muted: #9C9294; --line: rgba(255,255,255,.07); --chip: rgba(255,255,255,.06);
  --accent: #E5262E; --accent-2: #FF3B42; --on-accent: #FFFFFF; --accent-soft: rgba(229,38,46,.16);
  --in: rgba(255,255,255,.08); --in-text: #F5F1F1; --out: linear-gradient(160deg,#F0353C,#B3131A); --out-text: #FFFFFF;
  --danger: #FF4D55; --warn: #FFB35C; --ok: #FF5A60; --tab-on: linear-gradient(160deg,#F0353C,#B3131A); --tab-on-fg: #FFFFFF;
  --shade: rgba(0,0,0,.65); --sheet: rgba(18,16,17,.94); --live: #FF2A33; --read: #FF6B70;
  --r: 22px; color-scheme: dark;
}
:root[data-size="small"] { --fs: 14.5px } :root { --fs: 16px } :root[data-size="large"] { --fs: 18px }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent }
html, body { height: 100%; margin: 0; overflow: hidden }
body { background: var(--wall); background-attachment: fixed; color: var(--text); font-family: var(--font); font-size: var(--fs); line-height: 1.35; -webkit-font-smoothing: antialiased; overscroll-behavior: none }
button, input, textarea, select { font: inherit; color: inherit }
button { cursor: pointer; border: 0; background: none; padding: 0 }
button:disabled { opacity: .5 }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }
[hidden] { display: none !important }
img { max-width: 100% }
@media (prefers-reduced-motion: reduce) { *, *::before { animation-duration: .01ms !important; transition-duration: .01ms !important } }

.g { background: var(--surface); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border: 1px solid var(--surface-border); box-shadow: var(--glow) }
svg.i { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none }

/* ---------- shell ---------- */
#app { position: fixed; inset: 0 }
.shell { position: absolute; inset: 0; display: flex; flex-direction: column }
.main { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column }
.view { position: absolute; inset: 0; display: flex; flex-direction: column }
.top { flex: none; padding: calc(env(safe-area-inset-top, 0px) + 10px) max(16px, env(safe-area-inset-right, 0px)) 8px max(16px, env(safe-area-inset-left, 0px)); display: flex; flex-direction: column; gap: 10px; position: relative; z-index: 2 }
.bar { display: flex; align-items: center; gap: 8px; min-height: 46px }
.ttl { font-family: var(--title); font-size: 32px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
[data-theme="graphite"] .ttl { font-size: 27px; letter-spacing: -.02em }
.brand { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0 }
.logo { width: 38px; height: 38px; border-radius: 12px; flex: none; background: linear-gradient(150deg,#45E6A9,#0B8F63 68%,#065E43); display: flex; align-items: center; justify-content: center; box-shadow: inset 0 -3px 6px rgba(0,0,0,.2), inset 0 2px 4px rgba(255,255,255,.4) }
[data-theme="panther"] .logo { background: linear-gradient(150deg,#FF5A60,#C3141B 70%,#7A0A0F) }
.gb { width: 46px; height: 46px; border-radius: 23px; display: flex; align-items: center; justify-content: center; flex: none; color: var(--text) }
[data-theme="graphite"] .gb { border-radius: 16px; background: var(--chip) }
.gb.accent { background: var(--accent); color: var(--on-accent); border-color: transparent }
[data-theme="panther"] .gb.accent { background: linear-gradient(160deg,#F0353C,#B3131A) }
.livebtn { height: 46px; padding: 0 15px 0 13px; border-radius: 23px; display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14.5px; color: var(--live) }
.livebtn i { width: 10px; height: 10px; border-radius: 5px; background: var(--live); box-shadow: 0 0 0 4px color-mix(in srgb, var(--live) 22%, transparent); animation: livepulse 1.8s infinite }
@keyframes livepulse { 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--live) 8%, transparent) } }
.search { height: 46px; border-radius: 23px; display: flex; align-items: center; gap: 9px; padding: 0 16px; color: var(--muted) }
[data-theme="graphite"] .search { border-radius: 16px }
.search svg { width: 19px; height: 19px }
.search input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font-size: 16px; color: var(--text) }
.search input::placeholder { color: var(--muted) }
.body { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; padding: 4px max(16px, env(safe-area-inset-right, 0px)) 120px max(16px, env(safe-area-inset-left, 0px)) }
.sec { font-size: 12.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin: 18px 6px 8px }
.card { border-radius: var(--r); overflow: hidden }
.seg { display: flex; padding: 4px; border-radius: 23px; gap: 2px }
.seg button { flex: 1; height: 36px; border-radius: 18px; font-weight: 600; font-size: 14.5px; color: var(--muted) }
.seg button.on { background: var(--tab-on); color: var(--tab-on-fg); box-shadow: 0 2px 8px rgba(0,0,0,.1) }
[data-theme="glass"] .seg button.on { color: var(--text) }

/* tab bar: floating capsule on phones, vertical rail on tablets */
.tabbar { position: absolute; z-index: 20; left: max(12px, env(safe-area-inset-left, 0px)); right: max(12px, env(safe-area-inset-right, 0px)); bottom: calc(env(safe-area-inset-bottom, 0px) + 12px); height: 70px; border-radius: 35px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 6px; gap: 2px }
[data-theme="graphite"] .tabbar { left: 0; right: 0; bottom: 0; height: calc(78px + env(safe-area-inset-bottom, 0px)); padding: 6px 8px calc(env(safe-area-inset-bottom, 0px) + 8px); border-radius: 0; background: #0D0F0E; border: 0; border-top: 1px solid #1E2221 }
.tab { position: relative; border-radius: 28px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 10.5px; font-weight: 600; color: var(--muted); transition: background .2s }
.tab svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round }
.tab.on { background: var(--tab-on); color: var(--tab-on-fg) }
[data-theme="glass"] .tab.on { color: var(--accent) }
[data-theme="graphite"] .tab { background: none !important; color: var(--muted) }
[data-theme="graphite"] .tab .pill { width: 58px; height: 32px; border-radius: 16px; display: flex; align-items: center; justify-content: center }
[data-theme="graphite"] .tab.on { color: var(--text) }
[data-theme="graphite"] .tab.on .pill { background: var(--accent); color: var(--on-accent) }
.tab .pill { display: contents }
[data-theme="graphite"] .tab .pill { display: flex }
.tab .badge { position: absolute; top: 4px; left: calc(50% + 6px); min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; background: var(--live); color: #fff; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center }

/* ---------- lists ---------- */
.rw { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 14px; text-align: left; position: relative }
.rw + .rw::before { content: ''; position: absolute; top: 0; left: 70px; right: 14px; border-top: 1px solid var(--line) }
.rw:active { background: var(--chip) }
.rw .grow { flex: 1; min-width: 0 }
.rw .nm { font-weight: 650; font-size: 16.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 5px }
.rw .sub { font-size: 14px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 4px; margin-top: 2px }
.rw .sub.on { color: var(--ok) }
.rw .meta { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex: none; font-size: 12.5px; color: var(--muted) }
.rw .meta .tm { display: flex; align-items: center; gap: 2px }
.rw .meta .tm svg { width: 17px; height: 17px }
.rw .meta .tm.unread { color: var(--accent) }
.ub { min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px; background: var(--accent); color: var(--on-accent); font-size: 12.5px; font-weight: 800; display: flex; align-items: center; justify-content: center }
[data-theme="graphite"] .ub { border-radius: 8px }
.ub.muted { background: var(--muted) }
.rw .act { width: 38px; height: 38px; border-radius: 19px; display: flex; align-items: center; justify-content: center; color: var(--accent); background: var(--accent-soft); flex: none }
.rw .act svg { width: 19px; height: 19px }
.typing { color: var(--accent) !important }
.av { position: relative; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; background-size: cover; background-position: center; box-shadow: inset 0 -3px 6px rgba(0,0,0,.15), inset 0 2px 4px rgba(255,255,255,.3) }
[data-theme="graphite"] .av { border-radius: 32%; color: #0D0F0E; box-shadow: none }
.av .dot { position: absolute; right: 0; bottom: 0; width: 27%; height: 27%; min-width: 12px; min-height: 12px; border-radius: 50%; background: #2BCB78; border: 2.5px solid var(--surface-solid) }
.av svg { width: 52%; height: 52% }
.verified { display: inline-flex; color: #1D9BF0; flex: none } .verified svg { width: 17px; height: 17px }
[data-theme="panther"] .verified { color: #FF5A60 }
.lockmark { color: var(--accent); display: inline-flex } .lockmark svg { width: 15px; height: 15px; stroke-width: 2.4 }
.empty { padding: 48px 24px; text-align: center; color: var(--muted); font-size: 15px; line-height: 1.5 }
.empty b { display: block; color: var(--text); font-size: 18px; margin-bottom: 4px }
.empty svg { width: 52px; height: 52px; margin-bottom: 10px; opacity: .6 }
.banner { margin: 2px 0 10px; padding: 12px 14px; border-radius: 16px; background: var(--accent-soft); font-size: 14px; line-height: 1.4 }
.banner.warn { background: color-mix(in srgb, var(--danger) 14%, transparent) }
.netbar { position: absolute; z-index: 30; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 6px); transform: translateX(-50%); padding: 6px 14px; border-radius: 14px; font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 8px }
.spin { width: 14px; height: 14px; border-radius: 7px; border: 2px solid var(--muted); border-top-color: transparent; animation: rot .8s linear infinite }
@keyframes rot { to { transform: rotate(360deg) } }

/* ---------- pages pushed on top (chat, profile, settings pages) ---------- */
.page { position: absolute; inset: 0; z-index: 25; display: flex; flex-direction: column; background: var(--wall); animation: slidein .28s cubic-bezier(.2,.8,.2,1) }
.page.out { animation: slideout .22s ease-in forwards }
@keyframes slidein { from { transform: translateX(100%) } }
@keyframes slideout { to { transform: translateX(100%) } }
.ptop { flex: none; padding: calc(env(safe-area-inset-top, 0px) + 6px) max(10px, env(safe-area-inset-right, 0px)) 8px max(6px, env(safe-area-inset-left, 0px)); display: flex; align-items: center; gap: 6px; border-radius: 0 0 24px 24px; z-index: 3 }
[data-theme="graphite"] .ptop { background: #0D0F0E; border-bottom: 1px solid var(--line); border-radius: 0 }
.back { display: flex; align-items: center; color: var(--accent); height: 44px; min-width: 44px; justify-content: center; flex: none }
.back svg { width: 28px; height: 28px }
.ptitle { flex: 1; text-align: center; font-weight: 700; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.pbody { flex: 1; min-height: 0; overflow-y: auto; padding: 12px max(16px, env(safe-area-inset-right, 0px)) calc(env(safe-area-inset-bottom, 0px) + 30px) max(16px, env(safe-area-inset-left, 0px)) }

/* chat */
.chead { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; text-align: left }
.chead .t { font-weight: 700; font-size: 16.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 4px }
.chead .s { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.chead .s.on { color: var(--ok) }
.ib { width: 42px; height: 42px; border-radius: 21px; display: flex; align-items: center; justify-content: center; color: var(--accent); flex: none }
.ib:active { background: var(--chip) }
.msgs { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 10px max(10px, env(safe-area-inset-right, 0px)) 14px max(10px, env(safe-area-inset-left, 0px)); display: flex; flex-direction: column; gap: 3px }
.day { align-self: center; margin: 10px 0 6px; padding: 4px 11px; border-radius: 12px; font-size: 12.5px; font-weight: 600; color: var(--muted) }
.sys { align-self: center; margin: 6px 0; padding: 6px 12px; border-radius: 12px; color: var(--muted); font-size: 13px; text-align: center; max-width: 88%; line-height: 1.4 }
.e2enote { align-self: center; margin: 6px 10px 12px; padding: 12px 14px; border-radius: 18px; font-size: 13px; color: var(--muted); text-align: center; line-height: 1.45; max-width: 330px }
.e2enote b { display: block; color: var(--text); font-size: 14.5px; margin-bottom: 2px }
.m { display: flex; flex-direction: column; align-items: flex-start; max-width: min(82%, 520px); animation: pop .18s ease-out }
.m.me { align-self: flex-end; align-items: flex-end }
@keyframes pop { from { transform: translateY(6px) scale(.97); opacity: 0 } }
.m .who { font-size: 13px; font-weight: 700; margin: 4px 0 2px 12px }
.bub { position: relative; padding: 8px 12px 7px; border-radius: 20px; background: var(--in); color: var(--in-text); white-space: pre-wrap; overflow-wrap: anywhere; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; box-shadow: 0 1px 2px rgba(0,0,0,.06) }
[data-theme="glass"] .bub, [data-theme="panther"] .bub { -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur) }
.m:not(.me) .bub { border-bottom-left-radius: 6px }
.m.me .bub { background: var(--out); color: var(--out-text); border-bottom-right-radius: 6px }
.bub .mt { float: right; display: inline-flex; align-items: center; gap: 3px; margin: 8px -4px -3px 10px; font-size: 11.5px; opacity: .78; line-height: 1 }
.bub .mt svg { width: 16px; height: 16px; stroke-width: 2.2 }
.bub .mt .read { color: var(--read); opacity: 1 }
.m.me .bub .mt .read { color: #B9F3FF }
[data-theme="panther"] .m.me .bub .mt .read { color: #FFE1E2 }
.bub .mt .fail { color: #FFD6D3 }
.bub.media { padding: 3px; overflow: hidden }
.bub.media img, .bub.media video { display: block; max-width: min(260px, 70vw); max-height: 320px; border-radius: 17px; object-fit: cover; background: rgba(0,0,0,.2); min-width: 120px; min-height: 90px }
.bub.media .cap { padding: 6px 9px 2px }
.bub.media .mt { position: absolute; right: 10px; bottom: 9px; margin: 0; padding: 3px 7px; border-radius: 9px; background: rgba(0,0,0,.45); color: #fff; opacity: 1 }
.bub.bare { background: none !important; box-shadow: none; padding: 0; -webkit-backdrop-filter: none; backdrop-filter: none }
.bub .del { font-style: italic; opacity: .7 }
.bub .file { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; min-width: 180px }
.bub .file .fi { width: 42px; height: 42px; border-radius: 12px; background: rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center; flex: none }
.m:not(.me) .bub .file .fi { background: var(--accent-soft); color: var(--accent) }
.reacts { display: flex; gap: 4px; margin-top: -6px; padding: 0 6px; position: relative; z-index: 1 }
.react { height: 26px; padding: 0 8px; border-radius: 13px; background: var(--surface-solid); border: 1.5px solid var(--line); font-size: 14px; font-weight: 700; display: inline-flex; align-items: center; gap: 3px }
.typingb { align-self: flex-start; padding: 12px 14px; border-radius: 20px; border-bottom-left-radius: 6px; background: var(--in); display: flex; gap: 4px }
.typingb i { width: 7px; height: 7px; border-radius: 4px; background: var(--muted); animation: blink 1.2s infinite }
.typingb i:nth-child(2) { animation-delay: .2s } .typingb i:nth-child(3) { animation-delay: .4s }
@keyframes blink { 0%, 60%, 100% { opacity: .25; transform: none } 30% { opacity: 1; transform: translateY(-3px) } }
.composer { flex: none; display: flex; align-items: flex-end; gap: 4px; margin: 0 max(8px, env(safe-area-inset-right, 0px)) calc(env(safe-area-inset-bottom, 0px) + 8px) max(8px, env(safe-area-inset-left, 0px)); padding: 6px; border-radius: 28px }
[data-theme="graphite"] .composer { margin: 0; border-radius: 0; padding: 8px 8px calc(env(safe-area-inset-bottom, 0px) + 8px); background: #0D0F0E; border: 0; border-top: 1px solid var(--line) }
.composer textarea { flex: 1; min-width: 0; max-height: 130px; min-height: 42px; padding: 10px 14px; border: 0; border-radius: 21px; background: var(--chip); resize: none; outline: none; font-size: 16px; line-height: 1.3; color: var(--text) }
.composer textarea::placeholder { color: var(--muted) }
.sendb { width: 42px; height: 42px; border-radius: 21px; background: var(--accent); color: var(--on-accent); display: flex; align-items: center; justify-content: center; flex: none }
[data-theme="panther"] .sendb { background: linear-gradient(160deg,#F0353C,#B3131A) }
.sendb svg { width: 21px; height: 21px; stroke-width: 2.4 }
.readonly { flex: none; padding: 14px 16px calc(env(safe-area-inset-bottom, 0px) + 14px); text-align: center; color: var(--muted); font-size: 14px }
.recbar { flex: 1; display: flex; align-items: center; gap: 10px; padding: 0 12px; font-weight: 600; min-height: 42px }
.recdot { width: 10px; height: 10px; border-radius: 5px; background: var(--live); animation: livepulse 1s infinite }

/* emoji & stickers */
.panel { flex: none; height: 300px; display: flex; flex-direction: column; margin: 0 8px calc(env(safe-area-inset-bottom, 0px) + 8px); border-radius: 26px; overflow: hidden; animation: up .22s ease-out }
.panel .tabsrow { display: flex; gap: 6px; padding: 8px 10px }
.panel .grid { flex: 1; overflow-y: auto; padding: 2px 8px 12px }
.chip { flex: none; height: 34px; padding: 0 14px; border-radius: 17px; background: var(--chip); font-size: 14px; font-weight: 600 }
.chip.on { background: var(--accent); color: var(--on-accent) }
.ecat { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin: 10px 4px 4px }
.egrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)) }
.egrid button { height: 42px; font-size: 27px; border-radius: 10px }
.sgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px }
.stk { width: 120px; height: 120px; border-radius: 32px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: #fff; position: relative; overflow: hidden; box-shadow: 0 10px 22px -10px rgba(0,0,0,.5), inset 0 -6px 12px rgba(0,0,0,.15), inset 0 5px 10px rgba(255,255,255,.35) }
.stk::before { content: ''; position: absolute; left: 10%; right: 10%; top: 4%; height: 40%; border-radius: 40% 40% 50% 50%; background: linear-gradient(rgba(255,255,255,.4), rgba(255,255,255,0)) }
.stk .se { font-size: 50px; line-height: 1; position: relative; filter: drop-shadow(0 3px 3px rgba(0,0,0,.25)) }
.stk .st { font-size: 14px; font-weight: 800; text-shadow: 0 1px 3px rgba(0,0,0,.35); padding: 0 6px; text-align: center; position: relative; line-height: 1.15 }
.stk.sm { width: 100%; height: auto; aspect-ratio: 1; border-radius: 24px }
.stk.sm .se { font-size: 38px } .stk.sm .st { font-size: 12px }
.a-bounce .se { animation: bounce 1.1s infinite } .a-pulse .se { animation: pulse 1.3s infinite } .a-wiggle .se { animation: wiggle 1s infinite } .a-spin .se { animation: rot 2.4s linear infinite } .a-float .se { animation: float 2s ease-in-out infinite }
@keyframes bounce { 0%, 100% { transform: none } 45% { transform: translateY(-12px) } 60% { transform: scale(1.08,.92) } }
@keyframes pulse { 50% { transform: scale(1.18) } }
@keyframes wiggle { 25% { transform: rotate(-14deg) } 75% { transform: rotate(14deg) } }
@keyframes float { 50% { transform: translateY(-7px) rotate(4deg) } }

/* sheets & menus */
.shade { position: absolute; inset: 0; z-index: 60; background: var(--shade); display: flex; flex-direction: column; justify-content: flex-end; animation: fade .18s }
@keyframes fade { from { opacity: 0 } }
.sheet { background: var(--sheet); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border-radius: 26px 26px 0 0; max-height: 90%; display: flex; flex-direction: column; animation: up .24s cubic-bezier(.2,.8,.2,1); padding-bottom: env(safe-area-inset-bottom, 0px); width: 100%; max-width: 640px; align-self: center }
@keyframes up { from { transform: translateY(100%) } }
.sheet .grab { width: 38px; height: 5px; border-radius: 3px; background: var(--line); margin: 8px auto 2px }
.sheet .sh { display: flex; align-items: center; justify-content: space-between; padding: 6px 16px 10px; gap: 10px }
.sheet .sh b { font-size: 18px }
.sheet .sb { overflow-y: auto; padding: 0 16px 18px }
.acts { padding: 8px 8px calc(env(safe-area-inset-bottom, 0px) + 8px); display: flex; flex-direction: column; gap: 8px; animation: up .24s cubic-bezier(.2,.8,.2,1); width: 100%; max-width: 520px; align-self: center }
.grp { border-radius: 18px; overflow: hidden; background: var(--sheet); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur) }
.grp > button { display: flex; align-items: center; gap: 12px; width: 100%; height: 54px; padding: 0 18px; font-size: 17px; text-align: left }
.grp > button + button { border-top: 1px solid var(--line) }
.grp > button.danger { color: var(--danger) }
.grp .note { padding: 14px 18px; font-size: 14px; color: var(--muted); text-align: center; line-height: 1.45 }
.grp .note b { display: block; color: var(--text); font-size: 15.5px; margin-bottom: 3px }
.cancel { height: 54px; border-radius: 18px; background: var(--sheet); font-size: 17px; font-weight: 700; color: var(--accent) }
.reactbar { display: flex; justify-content: space-around; padding: 8px 6px; border-radius: 30px; background: var(--sheet) }
.reactbar button { font-size: 30px; width: 44px; height: 44px; border-radius: 22px }
.toast { position: absolute; z-index: 90; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 12px); transform: translateX(-50%); width: max-content; max-width: min(92%, 460px); padding: 12px 16px; border-radius: 18px; background: rgba(20,24,22,.92); color: #fff; font-size: 14.5px; font-weight: 600; box-shadow: 0 10px 30px rgba(0,0,0,.25); animation: drop .22s ease-out; display: flex; align-items: center; gap: 10px }
.toast.tap { cursor: pointer }
@keyframes drop { from { transform: translate(-50%, -14px); opacity: 0 } }

/* forms & settings */
.field { width: 100%; height: 50px; padding: 0 16px; border-radius: 16px; border: 1.5px solid transparent; background: var(--chip); font-size: 16px; outline: none; color: var(--text) }
.field:focus { border-color: var(--accent) }
textarea.field { height: auto; min-height: 90px; padding: 12px 16px; resize: vertical }
.lbl { font-size: 13.5px; color: var(--muted); margin: 12px 4px 6px; display: block; font-weight: 600 }
.btn { height: 52px; width: 100%; padding: 0 20px; border-radius: 26px; background: var(--accent); color: var(--on-accent); font-size: 17px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 8px }
[data-theme="graphite"] .btn { border-radius: 16px }
[data-theme="panther"] .btn { background: linear-gradient(160deg,#F0353C,#B3131A) }
.btn.ghost { background: var(--chip); color: var(--text) }
.btn.danger { background: var(--danger); color: #fff }
.btn.small { height: 36px; width: auto; padding: 0 14px; font-size: 14px; border-radius: 18px }
.err { color: var(--danger); font-size: 14px; min-height: 18px; margin: 6px 4px }
.srow { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 6px 14px; text-align: left; position: relative }
.srow + .srow::before { content: ''; position: absolute; top: 0; left: 58px; right: 0; border-top: 1px solid var(--line) }
.srow .rt { flex: 1; min-width: 0; font-size: 16.5px; font-weight: 500 }
.srow .rt small { display: block; font-size: 13px; color: var(--muted); font-weight: 400; margin-top: 1px; white-space: normal }
.srow .val { color: var(--muted); font-size: 15px }
.srow.danger .rt { color: var(--danger) }
.sq { width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; color: #fff; flex: none; box-shadow: inset 0 -2px 4px rgba(0,0,0,.15), inset 0 1px 2px rgba(255,255,255,.35) }
.sq svg { width: 18px; height: 18px; stroke-width: 2.1 }
.chev { color: var(--muted); display: flex } .chev svg { width: 17px; height: 17px }
.foot { margin: 8px 8px 0; font-size: 13px; color: var(--muted); line-height: 1.45 }
.switch { position: relative; width: 51px; height: 31px; border-radius: 16px; background: rgba(120,120,128,.32); transition: .2s; flex: none }
.switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 14px; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,.25); transition: .2s }
.switch.on { background: #34C759 } [data-theme="panther"] .switch.on { background: #E5262E }
.switch.on::after { left: 22px }
.account { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: var(--r) }
.account b { display: block; font-size: 19px }
.account small { display: block; font-size: 14px; color: var(--muted) }
.e2etag { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; font-size: 12px; font-weight: 700; color: var(--accent); background: var(--accent-soft); padding: 3px 9px; border-radius: 9px }
.prof { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 3px; padding: 6px 0 14px }
.prof .nm { font-size: 24px; font-weight: 800; margin-top: 10px; letter-spacing: -.02em; display: flex; align-items: center; gap: 6px }
.prof .un { color: var(--muted); font-size: 15px }
.prof .bio { margin-top: 6px; font-size: 15px; line-height: 1.45; max-width: 340px }
.pacts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; width: 100%; margin-top: 16px }
.pacts button { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 11px 4px; border-radius: 16px; font-size: 12.5px; font-weight: 650; color: var(--accent) }
.themes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 14px; border-radius: var(--r) }
.themes button { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 650 }
.themes .pv { width: 100%; aspect-ratio: 3/4; max-height: 150px; border-radius: 16px; padding: 10px 8px; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; border: 3px solid transparent }
.themes .on .pv { border-color: var(--accent) }
.themes .pv i { height: 14px; width: 70%; border-radius: 7px }
.fp { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; font-size: 30px; text-align: center; margin: 8px 0 }
.fpn { font: 600 15px ui-monospace, Menlo, Consolas, monospace; text-align: center; color: var(--muted); letter-spacing: .08em; line-height: 1.8 }
.pickrow { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 2px; text-align: left }
.pickrow .grow { flex: 1; min-width: 0 }
.pickrow small { display: block; color: var(--muted); font-size: 13.5px }
.tick { width: 26px; height: 26px; border-radius: 13px; border: 2px solid var(--line); display: flex; align-items: center; justify-content: center; flex: none }
.tick.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent) }
.tick svg { width: 16px; height: 16px; stroke-width: 3 }

/* welcome / auth */
.auth { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: calc(env(safe-area-inset-top, 0px) + 24px) 24px calc(env(safe-area-inset-bottom, 0px) + 24px); overflow-y: auto }
.auth .box { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 4px; padding: 26px 22px; border-radius: 30px }
.auth h1 { font-family: var(--title); font-size: 34px; margin: 14px 0 4px; letter-spacing: -.03em; text-align: center }
.auth p { color: var(--muted); text-align: center; margin: 0 0 14px; line-height: 1.45 }
.auth .bigicon { width: 104px; height: 104px; border-radius: 30px; align-self: center }
.linkb { color: var(--accent); font-weight: 700; padding: 12px; font-size: 15px }
.small { font-size: 12.5px; color: var(--muted); text-align: center; line-height: 1.45; margin-top: 10px }

/* calls & lives */
.ov { position: absolute; inset: 0; z-index: 80; display: flex; flex-direction: column; color: #fff; background: #050807; animation: fade .2s }
.call { background: radial-gradient(circle at 50% 0%, #1C3A30, #050807 70%); align-items: center; justify-content: space-between; padding: calc(env(safe-area-inset-top, 0px) + 60px) 20px calc(env(safe-area-inset-bottom, 0px) + 34px); text-align: center }
[data-theme="panther"] .call { background: radial-gradient(circle at 50% 0%, #4A0D12, #050505 70%) }
.call .title { font-size: 28px; font-weight: 800; margin-top: 18px }
.call .sub { opacity: .8; margin-top: 6px }
.call video.remote { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0 }
.call video.self { position: absolute; z-index: 2; right: calc(env(safe-area-inset-right, 0px) + 14px); top: calc(env(safe-area-inset-top, 0px) + 14px); width: 110px; height: 160px; border-radius: 18px; object-fit: cover; transform: scaleX(-1); background: #000; box-shadow: 0 8px 20px rgba(0,0,0,.5) }
.call > * { position: relative; z-index: 1 }
.ringing { animation: ringpulse 1.6s infinite; border-radius: 50% }
@keyframes ringpulse { 0% { box-shadow: 0 0 0 0 rgba(52,224,161,.55) } 100% { box-shadow: 0 0 0 34px rgba(52,224,161,0) } }
.ctrls { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap }
.cb { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; color: rgba(255,255,255,.88) }
.cb .cc { width: 64px; height: 64px; border-radius: 32px; background: rgba(255,255,255,.16); display: flex; align-items: center; justify-content: center; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px) }
.cb.off .cc { background: #fff; color: #111 }
.cb.end .cc { background: #E5372E } .cb.ok .cc { background: #22C55E }
.live { background: #000 }
.live video.stage { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }
.live video.stage.mirror { transform: scaleX(-1) }
.live .lt { position: absolute; z-index: 3; top: calc(env(safe-area-inset-top, 0px) + 12px); left: 12px; right: 8px; display: flex; align-items: center; gap: 8px }
.pill { padding: 5px 10px; border-radius: 9px; background: #E5372E; font-size: 12.5px; font-weight: 800; color: #fff }
.pill.dark { background: rgba(0,0,0,.42) }
.live .feedc { position: absolute; z-index: 3; left: 12px; right: 80px; bottom: calc(env(safe-area-inset-bottom, 0px) + 78px); max-height: 42%; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px }
.live .feedc div { align-self: flex-start; max-width: 100%; padding: 7px 11px; border-radius: 14px; background: rgba(0,0,0,.42); font-size: 14px; line-height: 1.35; animation: pop .2s }
.live .lb { position: absolute; z-index: 3; left: 12px; right: 12px; bottom: calc(env(safe-area-inset-bottom, 0px) + 14px); display: flex; gap: 8px }
.live .lb input { flex: 1; min-width: 0; height: 48px; padding: 0 16px; border-radius: 24px; border: 0; background: rgba(0,0,0,.45); color: #fff; outline: none }
.live .lb input::placeholder { color: rgba(255,255,255,.75) }
.live .lb .ib { background: rgba(0,0,0,.45); color: #fff; width: 48px; height: 48px; border-radius: 24px }
.live .lb .ib.h { background: #E5372E }
.hearts { position: absolute; z-index: 3; right: 16px; bottom: calc(env(safe-area-inset-bottom, 0px) + 76px); width: 50px; height: 300px; pointer-events: none }
.hearts span { position: absolute; bottom: 0; left: 10px; font-size: 28px; animation: rise 2.4s ease-out forwards }
@keyframes rise { to { transform: translate(var(--dx), -280px) scale(1.3); opacity: 0 } }
.livecard { position: relative; display: block; width: 100%; padding: 20px; border-radius: 28px; color: #fff; text-align: left; overflow: hidden; background: linear-gradient(140deg,#0B8F63,#2FD49B 55%,#7FB8FF); box-shadow: 0 18px 36px -16px rgba(11,143,99,.7) }
[data-theme="graphite"] .livecard { background: #2EE59D; color: #0D0F0E; box-shadow: none }
[data-theme="panther"] .livecard { background: linear-gradient(140deg,#7A0A0F,#E5262E 60%,#FF6B70); box-shadow: 0 18px 36px -16px rgba(229,38,46,.6) }
.livecard b { display: block; font-size: 23px; font-weight: 800; font-family: var(--title) }
.livecard span { display: block; font-size: 14.5px; margin-top: 4px; max-width: 72% }
.lgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px }
.litem { position: relative; height: 210px; border-radius: 24px; overflow: hidden; color: #fff; text-align: left; background: linear-gradient(160deg,#2FD49B,#163B6B) }
[data-theme="panther"] .litem { background: linear-gradient(160deg,#5A0A0E,#1A0A0B) }
.litem .av { position: absolute; left: 50%; top: 42%; transform: translate(-50%,-50%); border: 3px solid rgba(255,255,255,.8) }
.litem .pill { position: absolute; top: 10px }
.litem .ft { position: absolute; left: 8px; right: 8px; bottom: 8px; padding: 8px 10px; border-radius: 16px; font-size: 12.5px; background: rgba(0,0,0,.35); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px) }
.litem .ft b { display: block; font-size: 14px; line-height: 1.25 }
.updatebox { position: absolute; inset: 0; z-index: 95; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--wall) }

/* ---------- tablets & wide screens ---------- */
.detail { display: none }
@media (min-width: 900px) {
  .shell { flex-direction: row }
  .tabbar { position: relative; left: auto; right: auto; bottom: auto; margin: calc(env(safe-area-inset-top, 0px) + 12px) 0 calc(env(safe-area-inset-bottom, 0px) + 12px) max(12px, env(safe-area-inset-left, 0px)); width: 84px; height: auto; flex: none; grid-template-columns: 1fr; grid-auto-rows: 72px; align-content: center; border-radius: 34px }
  [data-theme="graphite"] .tabbar { margin: 0; height: 100%; padding: 20px 6px; border-top: 0; border-right: 1px solid #1E2221 }
  .main { flex: 0 0 400px; max-width: 42vw; border-right: 1px solid var(--line) }
  .body { padding-bottom: 30px }
  .detail { display: flex; position: relative; flex: 1; min-width: 0 }
  .detail .page { animation: none; background: transparent }
  .detail .page .back.hide-wide { visibility: hidden }
  .detail-empty { margin: auto; text-align: center; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 30px }
  .detail-empty .logo { width: 90px; height: 90px; border-radius: 26px }
  .detail-empty b { font-size: 22px; color: var(--text) }
  .shade { justify-content: center; align-items: center }
  .sheet { border-radius: 26px; max-height: 80%; width: min(560px, 92%) }
  .acts { width: min(440px, 92%) }
}
@media (min-width: 1300px) { .main { flex-basis: 440px } }

/* fixes after device testing */
.call video.self { top: auto; bottom: calc(env(safe-area-inset-bottom, 0px) + 150px) }
.tab:not(.on) { color: color-mix(in srgb, var(--text) 60%, transparent) }
.tab svg { stroke-width: 2.1 }