/* Team-Flow «Рост» (2026-10-13) — onboarding, quests, invite banner, «Сообщества», templates, partner badge.
   Graphite + purple, works in classic and glass (glass vars fall back to classic). No backdrop-filter; motion = transform/opacity only. */
.gx-rail { color: #b9a8ff; }
.gx-rail svg { width: 20px; height: 20px; }
.gx-quest-btn { display: flex; align-items: center; gap: 8px; margin: 6px 10px 0; padding: 8px 12px; border-radius: 10px; border: 1px solid rgba(124,108,255,.28); background: linear-gradient(135deg, rgba(124,108,255,.14), rgba(91,140,255,.06)); color: var(--text); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; text-align: left; }
.gx-quest-btn:hover { border-color: rgba(124,108,255,.6); background: rgba(124,108,255,.2); }
.gx-quest-btn svg { color: #b9a8ff; flex: none; }
.gx-quest-btn span { flex: 1; }
.gx-quest-btn b { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 11.5px; display: grid; place-items: center; }

/* invite banner (narrow channel column: title row, then progress + action) */
.gx-invite { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); grid-template-areas: "art t" "p p"; gap: 8px 10px; align-items: center; margin: 8px 10px 4px; padding: 10px 12px; border-radius: 12px; cursor: pointer;
  background: radial-gradient(120% 140% at 0% 0%, rgba(167,139,250,.28), transparent 60%), linear-gradient(135deg, #24203a, #1a1b26); border: 1px solid rgba(167,139,250,.38); box-shadow: 0 6px 22px rgba(60,40,140,.25); }
.gx-invite:hover { border-color: rgba(167,139,250,.7); }
.gx-invite .gx-trio-art { grid-area: art; width: 40px; height: 40px; }
.gx-trio-art { flex: none; filter: drop-shadow(0 2px 6px rgba(124,108,255,.5)); }
.gx-inv-t { grid-area: t; min-width: 0; padding-right: 14px; }
.gx-inv-t b { display: block; font-size: 12.5px; line-height: 1.3; color: #f1edff; }
.gx-inv-p { grid-area: p; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.gx-inv-p .gx-pips { margin: 0; }
.gx-inv-x { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); cursor: pointer; display: grid; place-items: center; }
.gx-inv-x:hover { background: rgba(255,255,255,.08); color: #fff; }
.gx-pips { display: flex; align-items: center; gap: 4px; margin-top: 6px; flex-wrap: wrap; }
.gx-pips i { width: 18px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.12); }
.gx-pips i.on { background: linear-gradient(90deg, #a78bfa, #7c6cff); box-shadow: 0 0 8px rgba(167,139,250,.6); }
.gx-pips small { margin-left: 6px; color: var(--muted); font-size: 11px; }
.gx-pips.big i { width: 42px; height: 8px; }

/* buttons */
.gx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 0; border-radius: 9px; padding: 9px 16px; background: linear-gradient(135deg, #8b7cff, #6a5cf0); color: #fff; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.gx-btn:hover { filter: brightness(1.1); }
.gx-btn:disabled { opacity: .45; cursor: default; filter: none; }
.gx-btn.sm { padding: 6px 11px; font-size: 12.5px; }
.gx-btn.ghost { background: transparent; border: 1px solid rgba(255,255,255,.16); color: var(--text); }
.gx-link { border: 0; background: none; color: var(--muted); font: inherit; font-size: 12px; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.gx-x { width: 30px; height: 30px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; display: grid; place-items: center; flex: none; }
.gx-x:hover { background: rgba(255,255,255,.08); color: #fff; }

/* progress */
.gx-prog { height: 6px; border-radius: 3px; background: rgba(255,255,255,.08); overflow: hidden; margin: 6px 0 2px; }
.gx-prog i { display: block; height: 100%; background: linear-gradient(90deg, #7c6cff, #b79cff); transform-origin: left; transition: transform .4s ease; }
.gx-prog.sm { height: 4px; }

/* onboarding tour */
.gx-tour { position: fixed; right: 18px; bottom: 18px; z-index: 900; width: 340px; max-width: calc(100vw - 24px); max-height: calc(100vh - 36px); overflow: auto; padding: 16px; border-radius: 16px;
  background: linear-gradient(180deg, #22232f, #1b1c26); border: 1px solid rgba(124,108,255,.35); box-shadow: 0 18px 50px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.2); animation: gx-in .35s ease both; }
.gx-tour-h { display: flex; justify-content: space-between; gap: 8px; }
.gx-tour-h small { color: #b9a8ff; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.gx-tour-h h3 { font-size: 16px; margin-top: 2px; }
.gx-steps { list-style: none; margin: 12px 0 8px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.gx-steps li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: 10px; color: var(--muted); }
.gx-steps li.cur { background: rgba(124,108,255,.12); color: var(--text); border: 1px solid rgba(124,108,255,.3); }
.gx-steps li.done { color: #c9cde0; }
.gx-steps li.done b { text-decoration: line-through; text-decoration-color: rgba(255,255,255,.3); }
.gx-steps p { font-size: 12.5px; color: var(--muted); margin-top: 3px; line-height: 1.4; }
.gx-steps b { font-size: 13.5px; }
.gx-n { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: rgba(255,255,255,.08); }
.gx-steps li.cur .gx-n { background: var(--accent); color: #fff; }
.gx-steps li.done .gx-n { background: #2dd4a0; color: #0d1a14; }
.gx-starter { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: rgba(255,200,90,.08); border: 1px solid rgba(255,200,90,.25); color: #ffd98a; margin-bottom: 10px; }
.gx-starter > div { flex: 1; }
.gx-starter b { color: #ffe4a8; font-size: 13px; display: block; }
.gx-starter small { color: var(--muted); font-size: 12px; }
.gx-starter .gx-prog i { background: linear-gradient(90deg, #f5b84a, #ffd98a); }
.gx-starter.ok { background: rgba(45,212,160,.08); border-color: rgba(45,212,160,.3); color: #2dd4a0; }
.gx-live { border-top: 1px solid rgba(255,255,255,.07); padding-top: 10px; }
.gx-live-h { display: flex; align-items: center; gap: 6px; color: #2dd4a0; font-size: 12.5px; margin-bottom: 6px; }
.gx-live-h b { color: var(--text); }
.gx-live-l { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.gx-live-l li { display: flex; align-items: center; gap: 10px; padding: 7px 9px; border-radius: 10px; background: rgba(255,255,255,.035); }
.gx-live-l li > div { flex: 1; min-width: 0; }
.gx-live-l b { font-size: 13px; display: block; }
.gx-live-l small { display: block; color: var(--muted); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gx-dot { flex: none; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #2dd4a0; box-shadow: 0 0 0 3px rgba(45,212,160,.18); animation: gx-pulse 2s ease-in-out infinite; vertical-align: middle; margin-right: 4px; }
.gx-empty { color: var(--muted); font-size: 12.5px; padding: 8px 2px; }
.gx-spot { position: relative; z-index: 2; box-shadow: 0 0 0 2px #a78bfa, 0 0 18px rgba(167,139,250,.6) !important; border-radius: 12px; animation: gx-spot 1.8s ease-in-out infinite; }
@keyframes gx-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes gx-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes gx-spot { 0%, 100% { opacity: 1; } 50% { opacity: .82; } }

/* modal */
.gx-modal { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; padding: 16px; background: rgba(6,7,12,.72); }
.gx-modal.open { display: flex; }
.gx-dlg { width: 520px; max-width: 100%; max-height: calc(100vh - 32px); display: flex; flex-direction: column; border-radius: 18px; background: #1d1e29; border: 1px solid rgba(124,108,255,.25); box-shadow: 0 24px 70px rgba(0,0,0,.6); animation: gx-in .25s ease both; }
.gx-dlg.wide { width: 820px; }
.gx-dlg-h { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px 10px; }
.gx-dlg-h h2 { font-size: 19px; }
.gx-dlg-b { padding: 0 18px 18px; overflow: auto; }
.gx-tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid rgba(255,255,255,.08); margin-bottom: 14px; align-items: center; }
.gx-tabs button { border: 0; background: none; color: var(--muted); font: inherit; font-size: 13.5px; font-weight: 600; padding: 9px 12px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.gx-tabs button.on { color: #fff; border-bottom-color: var(--accent); }
.gx-tab-link { margin-left: auto; color: var(--muted); font-size: 12.5px; text-decoration: none; }
.gx-tab-link:hover { color: #fff; }
.gx-sub { color: var(--muted); font-size: 13px; margin: 0 0 12px; }
.gx-fine { color: var(--muted); font-size: 11.5px; margin-top: 12px; line-height: 1.45; }
.gx-fine a { color: #b9a8ff; }
.gx-ok { color: #2dd4a0; font-size: 12.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.gx-ok.big { font-size: 15px; margin: 12px 0; }
.gx-warn { color: #ffb86b; font-size: 12.5px; }
.gx-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

/* quests */
.gx-quests { display: grid; gap: 10px; }
.gx-q { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 14px; background: #232432; border: 1px solid rgba(255,255,255,.06); }
.gx-q.done { border-color: rgba(167,139,250,.55); background: linear-gradient(135deg, rgba(124,108,255,.16), #232432 60%); }
.gx-q.claimed { opacity: .7; }
.gx-q-ico { flex: none; width: 42px; height: 42px; border-radius: 12px; background: #2c2d3d center / 24px no-repeat; }
.gx-q-ico.k-voice { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23b9a8ff' d='M12 14a3 3 0 0 0 3-3V5a3 3 0 0 0-6 0v6a3 3 0 0 0 3 3zm5-3a5 5 0 0 1-10 0H5a7 7 0 0 0 6 6.92V21h2v-3.08A7 7 0 0 0 19 11h-2z'/%3E%3C/svg%3E"); }
.gx-q-ico.k-messages { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%237dd3fc' d='M4 4h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H8l-4 4V6a2 2 0 0 1 2-2z'/%3E%3C/svg%3E"); }
.gx-q-ico.k-invite { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23f0abfc' d='M15 12a4 4 0 1 0-4-4 4 4 0 0 0 4 4zm-9-2V7H4v3H1v2h3v3h2v-3h3v-2zm9 4c-2.7 0-8 1.34-8 4v2h16v-2c0-2.66-5.3-4-8-4z'/%3E%3C/svg%3E"); }
.gx-q-ico.k-daily { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fcd34d' d='M19 4h-1V2h-2v2H8V2H6v2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 16H5V9h14v11zm-8-2.5 5-5-1.4-1.4-3.6 3.6-1.6-1.6L8 14.5z'/%3E%3C/svg%3E"); }
.gx-q-b { flex: 1; min-width: 0; }
.gx-q-b b { font-size: 14px; }
.gx-q-b small { color: var(--muted); font-size: 12px; }
.gx-q-r { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.gx-rw { color: #ffd98a; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.gx-live-hub { margin-top: 16px; }
.gx-inv-big { display: flex; gap: 18px; align-items: flex-start; }
.gx-inv-big h3 { font-size: 17px; margin-bottom: 6px; }
.gx-inv-big p { color: #c9cde0; font-size: 13.5px; line-height: 1.5; }

/* forms */
.gx-form { display: grid; gap: 10px; }
.gx-form label { display: grid; gap: 5px; font-size: 12.5px; color: var(--muted); }
.gx-form input:not([type=checkbox]):not([type=radio]), .gx-form textarea, .gx-form select, .gx-search input { width: 100%; background: #13141c; border: 1px solid rgba(255,255,255,.1); color: var(--text); border-radius: 10px; padding: 10px 12px; font: inherit; font-size: 14px; outline: none; }
.gx-form input:focus, .gx-form textarea:focus, .gx-search input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(124,108,255,.2); }
.gx-form textarea { resize: vertical; }
.gx-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 640px) { .gx-row2 { grid-template-columns: 1fr; } }
.gx-switch { display: flex !important; grid-template-columns: none !important; align-items: center; gap: 12px; cursor: pointer; padding: 10px 0; color: var(--text) !important; }
.gx-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.gx-switch > span { flex: none; width: 40px; height: 22px; border-radius: 999px; background: #3a3c4e; position: relative; transition: background .2s; }
.gx-switch > span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .2s; }
.gx-switch input:checked + span { background: var(--accent); }
.gx-switch input:checked + span::after { transform: translateX(18px); }
.gx-switch input:focus-visible + span { box-shadow: 0 0 0 3px rgba(124,108,255,.4); }
.gx-switch small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.gx-switch.sm { padding: 0; margin-left: auto; font-size: 12.5px; }
.gx-perm { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid rgba(255,255,255,.07); }
.gx-perm small { display: block; color: var(--muted); font-size: 12px; }

/* catalog */
.gx-search { margin-bottom: 10px; }
.gx-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.gx-chips button, .gx-chk span { border: 1px solid rgba(255,255,255,.12); background: transparent; color: var(--muted); border-radius: 999px; padding: 5px 11px; font: inherit; font-size: 12.5px; cursor: pointer; display: inline-block; }
.gx-chips button.on, .gx-chk input:checked + span { background: rgba(124,108,255,.22); color: #fff; border-color: var(--accent); }
.gx-chk { display: inline-flex !important; }
.gx-chk input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.gx-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.gx-card { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 14px; background: #232432; border: 1px solid rgba(255,255,255,.06); }
.gx-card.feat { border-color: rgba(167,139,250,.5); background: linear-gradient(160deg, rgba(124,108,255,.14), #232432 55%); }
.gx-card-h { display: flex; gap: 10px; align-items: center; }
.gx-card-h b { font-size: 14.5px; }
.gx-card-h small { display: block; color: var(--muted); font-size: 11.5px; margin-top: 2px; }
.gx-card p { color: #c9cde0; font-size: 13px; line-height: 1.45; flex: 1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.gx-sicon { flex: none; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; color: #fff; font-weight: 700; overflow: hidden; }
.gx-sicon img { width: 100%; height: 100%; object-fit: cover; }
.gx-tagl { display: flex; flex-wrap: wrap; gap: 4px; }
.gx-tagl span { font-size: 11px; color: #c4b5fd; background: rgba(124,108,255,.14); border-radius: 6px; padding: 2px 7px; }
.gx-card-f { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.gx-pbadge { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px 1px 18px; border-radius: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .02em; color: #1a1330; vertical-align: middle;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%231a1330' d='M12 2 4 5v6c0 5 3.4 9.7 8 11 4.6-1.3 8-6 8-11V5l-8-3zm-1.5 14L7 12.5l1.4-1.4 2.1 2.1 5.1-5.1L17 9.5 10.5 16z'/%3E%3C/svg%3E") 4px center / 11px no-repeat, linear-gradient(135deg, #e9d5ff, #a78bfa); }
.gx-pbadge.big { font-size: 12px; padding: 3px 10px 3px 22px; background-size: 13px, auto; margin-left: 6px; }
.gx-feat { font-size: 10.5px; color: #ffd98a; border: 1px solid rgba(255,217,138,.4); border-radius: 6px; padding: 0 6px; }
.gx-mine { padding: 14px; border-radius: 14px; background: #232432; margin-bottom: 12px; }
.gx-mine-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gx-partner-hero { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 14px; }
.gx-partner-hero h3 { font-size: 16px; margin-bottom: 4px; }
.gx-partner-hero p { color: #c9cde0; font-size: 13px; line-height: 1.5; }

/* templates */
.gx-tpls { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.gx-tpl { cursor: pointer; display: block !important; }
.gx-tpl input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.gx-tpl > span { display: block; height: 100%; padding: 12px 12px 12px 54px; border-radius: 12px; border: 1px solid rgba(255,255,255,.1); background: #232432 12px 12px / 32px no-repeat; color: var(--text); position: relative; }
.gx-tpl > span b { display: block; font-size: 14px; }
.gx-tpl > span small { display: block; color: var(--muted); font-size: 11.5px; margin-top: 3px; line-height: 1.4; }
.gx-tpl input:checked + span { border-color: var(--accent); background-color: rgba(124,108,255,.14); box-shadow: 0 0 0 1px var(--accent); }
.gx-tpl input:focus-visible + span { box-shadow: 0 0 0 3px rgba(124,108,255,.45); }
.gx-tpl > span::before { content: ""; position: absolute; left: 12px; top: 12px; width: 32px; height: 32px; border-radius: 10px; background: #3a3c4e; }
.gx-tpl .tpl-gaming::before { background: linear-gradient(135deg, #7c6cff, #ef4444); }
.gx-tpl .tpl-study::before { background: linear-gradient(135deg, #22c55e, #0ea5e9); }
.gx-tpl .tpl-friends::before { background: linear-gradient(135deg, #f472b6, #f59e0b); }
.gx-tpl .tpl-streamer::before { background: linear-gradient(135deg, #a855f7, #ec4899); }
.gx-tpl .tpl-import::before { background: linear-gradient(135deg, #5865f2, #7c6cff); }
.gx-prev { font-size: 12.5px; color: var(--muted); display: grid; gap: 4px; }
.gx-prev b { color: var(--text); }
.gx-prev span { display: inline-block; margin: 2px 4px 0 0; padding: 1px 7px; border-radius: 6px; background: rgba(255,255,255,.06); color: #d7dbea; }

/* friends in voice */
.gx-fv-wrap { position: fixed; left: 50%; top: 58px; transform: translateX(-50%); z-index: 1100; display: grid; gap: 8px; width: 420px; max-width: calc(100vw - 20px); }
.gx-fv { display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 14px; border-radius: 14px; background: #20212d; border: 1px solid rgba(45,212,160,.4); box-shadow: 0 12px 34px rgba(0,0,0,.5); animation: gx-in .3s ease both; }
.gx-fv > div { flex: 1; min-width: 0; }
.gx-fv b { font-size: 13px; display: block; }
.gx-fv small { color: var(--muted); font-size: 12px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* glass theme */
html[data-theme="glass"] .gx-dlg, html[data-theme="glass"] .gx-tour, html[data-theme="glass"] .gx-fv { background: rgba(12,14,24,.94); border-color: var(--g-border, rgba(140,120,255,.35)); border-radius: var(--g-radius, 18px); }
html[data-theme="glass"] .gx-q, html[data-theme="glass"] .gx-card, html[data-theme="glass"] .gx-mine, html[data-theme="glass"] .gx-tpl > span { background-color: rgba(20,22,38,.85); border-color: rgba(140,120,255,.2); }
html[data-theme="glass"] .gx-invite { background: linear-gradient(135deg, rgba(46,230,255,.12), rgba(167,139,250,.2)); border-color: rgba(46,230,255,.35); }
html[data-theme="glass"] .gx-btn:not(.ghost) { background: linear-gradient(135deg, #8b7cff, #2ee6ff); color: #071018; }

@media (prefers-reduced-motion: reduce) {
  .gx-tour, .gx-dlg, .gx-fv, .gx-dot, .gx-spot { animation: none !important; }
  .gx-prog i, .gx-switch > span, .gx-switch > span::after { transition: none !important; }
}
@media (max-width: 700px) { .gx-tour { right: 8px; left: 8px; bottom: 8px; width: auto; } .gx-inv-big { flex-direction: column; } }
/* 2026-10-13 shop-mobile: friends-in-voice toast must not exceed the phone viewport */
@media (max-width: 768px) { .gx-fv-wrap { grid-template-columns: minmax(0, 1fr); width: auto; left: 10px; right: 10px; transform: none; top: calc(58px + env(safe-area-inset-top, 0px)); } .gx-fv .gx-btn { flex: 0 0 auto; min-height: 40px; } .gx-fv .gx-x { flex: 0 0 auto; min-width: 36px; min-height: 36px; } }
@media (max-width: 768px) {
  .gx-dlg { max-height: calc(100dvh - 32px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); }
  .gx-q { flex-wrap: wrap; gap: 10px 12px; } .gx-q-b { flex: 1 1 calc(100% - 60px); }
  .gx-q-r { flex: 1 1 100%; flex-direction: row; align-items: center; justify-content: space-between; } .gx-q-r button { min-height: 40px; }
  .gx-tabs { overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; } .gx-tabs button { flex: 0 0 auto; min-height: 44px; white-space: nowrap; }
}