/* =====================================================================
   PonziRider cabinet — design layer in the landing style
   (glass cards, golden gradient, ambient orbs, Inter). Loaded after the
   inline base styles and only re-skins — no DOM/JS contracts change.
   ===================================================================== */

:root, :root[data-theme="dark"] {
  --bg: #0b0e11;
  --card: rgba(30, 35, 41, .62);
  --card-solid: #1a1f26;
  --elev: rgba(255, 255, 255, .04);
  --elev-solid: #161a1e;
  --text: #e8eaf0;
  --hint: #8b93a5;
  --accent: #f0b90b;
  --accent-2: #ffd75e;
  --accent-text: #14171b;
  --accent-soft: rgba(240, 185, 11, .10);
  --accent-glow: rgba(240, 185, 11, .28);
  --up: #22c55e;
  --down: #f6465d;
  --danger: #f6465d;
  --border: rgba(255, 255, 255, .07);
  --border-hi: rgba(255, 255, 255, .16);
  --input: rgba(11, 14, 17, .7);
  --grad: linear-gradient(135deg, #f0b90b, #ff8a00 60%, #ff5e62);
  --shadow: 0 10px 34px rgba(0, 0, 0, .38);
  --shadow-sm: 0 4px 14px rgba(0, 0, 0, .3);
  --r-lg: 20px; --r-md: 14px; --r-sm: 10px;
  --nav-h: 62px;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}
:root[data-theme="light"] {
  --bg: #eef1f6;
  --card: rgba(255, 255, 255, .92);
  --card-solid: #ffffff;
  --elev: rgba(20, 24, 32, .05);
  --elev-solid: #eef1f6;
  --text: #171b22;
  --hint: #5c6474;
  --accent: #d99a00;
  --accent-2: #b37d00;
  --accent-text: #14171b;
  --accent-soft: rgba(217, 154, 0, .12);
  --accent-glow: rgba(217, 154, 0, .28);
  --border: rgba(20, 24, 32, .14);
  --border-hi: rgba(20, 24, 32, .28);
  --input: rgba(255, 255, 255, .95);
  --shadow: 0 10px 30px rgba(23, 27, 34, .10);
  --shadow-sm: 0 3px 14px rgba(23, 27, 34, .09);
}

html { -webkit-text-size-adjust: 100%; overflow-x: hidden; }
body {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
  padding: 12px 14px calc(16px + var(--safe-b));
  overflow-x: hidden;
}
/* overflow-x:hidden на html/body робить їх скрол-контейнерами і ламає
   position:sticky у нащадків (шапка їздить зі сторінкою). clip дає той самий
   захист від горизонтального скролу, але не створює скрол-контейнер. */
@supports (overflow-x: clip) {
  html, body { overflow-x: clip; }
}
::selection { background: rgba(240, 185, 11, .35); color: #fff; }
:root[data-theme="light"] ::selection { color: #14171b; }

/* ---------- ambient background (grid + orbs + noise) ---------- */
.bgfx { position: fixed; inset: 0; z-index: -2; pointer-events: none; }
.bgfx::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(900px 480px at 85% -5%, rgba(240,185,11,.13), transparent 60%),
    radial-gradient(700px 420px at -10% 30%, rgba(94,124,255,.09), transparent 60%),
    radial-gradient(800px 500px at 60% 110%, rgba(255,94,98,.07), transparent 60%);
}
.bgfx::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 75%);
}
:root[data-theme="light"] .bgfx::before {
  background:
    radial-gradient(900px 480px at 85% -5%, rgba(240,185,11,.16), transparent 60%),
    radial-gradient(700px 420px at -10% 30%, rgba(94,124,255,.10), transparent 60%);
}
:root[data-theme="light"] .bgfx::after {
  background-image:
    linear-gradient(rgba(20,24,32,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20,24,32,.045) 1px, transparent 1px);
}
.orb {
  position: fixed; border-radius: 50%; z-index: -1; pointer-events: none;
  filter: blur(70px); opacity: .5; will-change: transform;
  animation: orbfloat 22s ease-in-out infinite alternate;
}
.orb.o1 { width: 520px; height: 520px; top: -160px; right: -140px;
  background: radial-gradient(circle, rgba(240,185,11,.28), transparent 65%); }
.orb.o2 { width: 460px; height: 460px; top: 40%; left: -220px; animation-delay: -8s;
  background: radial-gradient(circle, rgba(94,124,255,.22), transparent 65%); }
.orb.o3 { width: 420px; height: 420px; bottom: -140px; right: 16%; animation-delay: -15s;
  background: radial-gradient(circle, rgba(255,94,98,.18), transparent 65%); }
@keyframes orbfloat {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(-60px, 50px) scale(1.12); }
}
.noise {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: reduce) {
  .orb { animation: none; }
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ---------- typography ---------- */
h1 { font-weight: 900; letter-spacing: -.6px; }
.card h2 {
  font-size: 12px; letter-spacing: .9px; font-weight: 800;
  color: var(--hint); margin-bottom: 14px;
}
.sub { line-height: 1.5; }
a { color: var(--accent); }

/* ---------- sticky glass top bar ---------- */
.topline {
  gap: 8px; margin: -12px -14px 16px; width: auto;
  padding: 10px 14px; border-radius: 0 0 18px 18px;
  border: 1px solid var(--border); border-top: 0;
  background: rgba(11, 14, 17, .62);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 10px 40px rgba(0, 0, 0, .25);
  padding-top: calc(10px + var(--safe-t));
}
:root[data-theme="light"] .topline { background: rgba(243, 245, 249, .72); }
.topline::after {
  /* тонкая золотая линия на нижней кромке шапки */
  content: ""; position: absolute; left: 0; right: 0;
  bottom: -1px; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent 10%, rgba(240,185,11,.45) 50%, transparent 90%);
}
.topline h1 {
  font-size: 19px; letter-spacing: -.5px;
  display: inline-flex; align-items: center; gap: 0;
}
.topline h1 .brandlogo { margin-right: 8px; }
.topline .ghost, .topline a.ghost, .topline select.ghost {
  background: rgba(255, 255, 255, .05) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important; border-radius: 10px; padding: 7px 11px;
  font-size: 13px; font-weight: 600;
  transition: background .15s, border-color .15s, transform .15s;
}
:root[data-theme="light"] .topline .ghost,
:root[data-theme="light"] .topline a.ghost,
:root[data-theme="light"] .topline select.ghost {
  background: rgba(20, 24, 32, .04) !important;
}
.topline .ghost:hover { background: rgba(255,255,255,.09) !important; border-color: var(--border-hi) !important; }
.topline #balBtn {
  color: var(--accent) !important; border-color: rgba(240,185,11,.35) !important;
  background: var(--accent-soft) !important; font-weight: 800;
}
.topline #cartBtn, .topline #topAdminBtn { color: var(--accent) !important; }
.topline .uchip { font-weight: 700; }

/* ---------- surfaces ---------- */
.card {
  border-radius: var(--r-lg); padding: 18px;
  background: var(--card);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.04);
  position: relative; margin-bottom: 14px;
  transition: border-color .25s, box-shadow .25s;
}
.card:hover { border-color: rgba(255,255,255,.11); }
:root[data-theme="light"] .card:hover { border-color: var(--border-hi); }

.dtile {
  border-radius: var(--r-md); padding: 16px;
  background: var(--elev); border: 1px solid var(--border);
  position: relative; overflow: hidden;
  transition: transform .22s, border-color .22s, box-shadow .22s;
}
.dtile::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 2px;
  background: var(--grad); opacity: 0; transition: opacity .25s;
}
.dtile:hover { transform: translateY(-3px); border-color: rgba(240,185,11,.35); box-shadow: 0 14px 34px rgba(0,0,0,.35); }
.dtile:hover::before { opacity: .85; }
.dtile .dv { font-weight: 900; letter-spacing: -.6px; }
.dtile .dico { font-size: 20px; }

.stat {
  border-radius: var(--r-md); background: var(--elev);
  border: 1px solid var(--border); padding: 12px 14px;
  position: relative; overflow: hidden; transition: border-color .2s, transform .2s;
}
.stat:hover { border-color: rgba(240,185,11,.3); }
.stat .v, #pfStats .stat .v {
  font-weight: 900; letter-spacing: -.5px;
  background: linear-gradient(180deg, #fff, #c7cbd6);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
:root[data-theme="light"] .stat .v, :root[data-theme="light"] #pfStats .stat .v {
  background: linear-gradient(180deg, #171b22, #4a5160);
  -webkit-background-clip: text; background-clip: text;
}
.stat .v.num-up, .stat .v .num-up { -webkit-text-fill-color: var(--up); background: none; }
.stat .v.num-down, .stat .v .num-down { -webkit-text-fill-color: var(--down); background: none; }
.stat .k { font-weight: 700; letter-spacing: .6px; }

/* ---------- controls ---------- */
button {
  border-radius: 12px; font-weight: 700; font-family: inherit;
  background: var(--grad); color: var(--accent-text);
  box-shadow: 0 6px 20px rgba(240,185,11,.22), inset 0 1px 0 rgba(255,255,255,.35);
  position: relative; overflow: hidden;
  transition: transform .18s, box-shadow .18s, filter .18s;
}
button:hover { filter: none; transform: translateY(-1px); box-shadow: 0 10px 28px rgba(240,185,11,.38), inset 0 1px 0 rgba(255,255,255,.35); }
button:active { transform: translateY(0) scale(.985); }
button:disabled { opacity: .45; transform: none; box-shadow: none; }
button.ghost, .ghost, .act-row .ghost, .back, .tab, .chip, .fpreset, .pager button {
  background: rgba(255,255,255,.05); color: var(--text);
  border: 1px solid var(--border); box-shadow: none;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
:root[data-theme="light"] button.ghost, :root[data-theme="light"] .ghost,
:root[data-theme="light"] .tab, :root[data-theme="light"] .chip,
:root[data-theme="light"] .fpreset, :root[data-theme="light"] .pager button {
  background: rgba(20,24,32,.04);
}
button.ghost:hover, .ghost:hover, .pager button:hover {
  background: rgba(255,255,255,.09); border-color: var(--border-hi);
  box-shadow: none; transform: translateY(-1px);
}
:root[data-theme="light"] button.ghost:hover,
:root[data-theme="light"] .ghost:hover,
:root[data-theme="light"] .pager button:hover {
  background: rgba(20,24,32,.07);
}
:root[data-theme="light"] .topline .ghost:hover {
  background: rgba(20,24,32,.08) !important;
}
.back {
  background: none !important; border: 0 !important; backdrop-filter: none;
  color: var(--accent); font-weight: 700; padding: 6px 0;
}
.back:hover { transform: none; }
.fpreset.on, .chip.sel {
  background: var(--accent-soft); border-color: rgba(240,185,11,.45);
  color: var(--accent); font-weight: 700;
}
.hbtn { background: var(--grad); border: 0; border-radius: 10px; }
/* мультиселект типов проекта — выглядит как поле ввода, не как CTA */
.catdd-btn {
  background: var(--input) !important; color: var(--hint) !important;
  border: 1px solid var(--border) !important; box-shadow: none !important;
  border-radius: 12px; padding: 11px 13px;
}
.catdd-btn:hover { transform: none; border-color: var(--border-hi) !important; }
.catdd-panel { border-radius: 12px; background: var(--card-solid); }

input, textarea, select {
  background: var(--input); border: 1px solid var(--border);
  border-radius: 12px; padding: 11px 13px; font-family: inherit;
  color: var(--text); transition: border-color .15s, box-shadow .15s, background .15s;
}
input:hover, textarea:hover, select:hover { border-color: var(--border-hi); }
input:focus, textarea:focus, select:focus {
  border-color: rgba(240,185,11,.6);
  box-shadow: 0 0 0 3px rgba(240,185,11,.14);
}
input::placeholder, textarea::placeholder { color: var(--hint); opacity: .7; }
select option { background: var(--card-solid); color: var(--text); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }

/* ---------- tabs → segmented control ---------- */
.tabs {
  gap: 4px; padding: 4px; border-radius: 14px;
  background: rgba(255,255,255,.04); border: 1px solid var(--border);
}
:root[data-theme="light"] .tabs { background: rgba(20,24,32,.04); }
#app > .tabs {
  background: rgba(11,14,17,.6);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  margin-bottom: 16px;
}
:root[data-theme="light"] #app > .tabs { background: rgba(243,245,249,.7); }
.tab {
  border: 0; border-radius: 10px; padding: 10px 12px; font-weight: 600;
  background: transparent; backdrop-filter: none; color: var(--hint);
  transition: background .18s, color .18s, box-shadow .18s;
}
.tab:hover { background: rgba(255,255,255,.06); color: var(--text); transform: none; }
:root[data-theme="light"] .tab { color: var(--text); }
:root[data-theme="light"] .tab:hover { background: rgba(20,24,32,.07); }
.tab.active {
  background: var(--grad); color: var(--accent-text); font-weight: 800;
  box-shadow: 0 6px 18px rgba(240,185,11,.3);
}
/* світла тема: .tab-оверрайд вище має більшу специфічність, ніж .tab.active —
   активний таб без неї блідне до сірого */
:root[data-theme="light"] .tab.active {
  background: var(--grad); color: var(--accent-text);
}
:root[data-theme="light"] .fpreset.on,
:root[data-theme="light"] .chip.sel {
  background: var(--accent-soft); border-color: rgba(240,185,11,.45);
  color: var(--accent-2); font-weight: 700;
}

/* ---------- badges / chips ---------- */
.badge {
  background: var(--accent-soft); color: var(--accent-2);
  border: 1px solid rgba(240,185,11,.28); padding: 2px 9px;
}
:root[data-theme="light"] .badge { color: var(--accent-2); }
.chip { padding: 7px 13px; font-weight: 600; }

/* ---------- lists / rows ---------- */
.proj, .chan { border-radius: var(--r-sm); border-bottom-color: var(--border); }
.proj:hover, .chan:hover { background: rgba(255,255,255,.04); }
:root[data-theme="light"] .proj:hover, :root[data-theme="light"] .chan:hover { background: rgba(20,24,32,.035); }
.chan.hit { background: var(--accent-soft); border-color: rgba(240,185,11,.3); }
.proj .name { font-weight: 800; letter-spacing: -.2px; }

/* ---------- tables ---------- */
.ptable { border-radius: var(--r-md); overflow: hidden; }
.ptable th { padding: 10px 12px; font-weight: 800; letter-spacing: .6px; }
.ptable td { padding: 11px 12px; border-bottom: 1px solid var(--border); }
.ptable tbody tr:nth-child(even) td { background: rgba(255,255,255,.025); }
:root[data-theme="light"] .ptable tbody tr:nth-child(even) td { background: rgba(20,24,32,.025); }
.ptable tr:hover td { background: var(--accent-soft); }

/* ---------- horizontal share bars (портфолио) ---------- */
.hbwrap { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; height: 100%; overflow-y: auto; }
.hbgroup { min-width: 0; }
.hbtitle { font-size: 11px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--hint); margin: 0 0 8px 2px; position: sticky; top: 0; background: var(--card-solid); z-index: 1; }
.hbar { display: flex; align-items: center; height: 30px; gap: 8px; min-width: 0; }
.hbname { flex: 0 0 96px; font-size: 12px; font-weight: 600; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbmid { flex: 1; display: flex; align-items: center; min-width: 0; }
.hbfill { flex: 0 0 auto; height: 20px; border-radius: 5px; min-width: 2px; display: flex; align-items: center; justify-content: flex-end; }
.hbfv { padding: 0 8px; font-size: 12px; white-space: nowrap; overflow: hidden; }
.hbfv b { font-weight: 800; }
.hbval { padding: 0 8px; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hbval b { font-weight: 800; }
@media (max-width: 640px) { .hbwrap { grid-template-columns: 1fr; } }

/* ---------- modal → glass; bottom-sheet on phones ---------- */
.overlay { background: rgba(5, 7, 10, .7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.overlay .card {
  background: linear-gradient(160deg, rgba(28,33,41,.97), rgba(14,18,23,.98));
  border-radius: 22px; box-shadow: 0 30px 80px rgba(0,0,0,.6);
  animation: popin .28s cubic-bezier(.2,.8,.2,1) both;
}
:root[data-theme="light"] .overlay .card {
  background: linear-gradient(160deg, rgba(255,255,255,.98), rgba(243,245,249,.99));
}
@keyframes popin { from { opacity: 0; transform: translateY(14px) scale(.97); } }
/* унифицированное закрытие: кнопки «Закрыть»/«Отмена» → ✕ в правом верхнем
   углу каждой модалки (переносит JS .modal-x) */
.overlay .card { position: relative; }
button.modal-x {
  /* sticky, не absolute: .card скролится (max-height+overflow-y:auto),
     absolute-угол уезжал бы вверх вместе с контентом модалки */
  position: sticky; top: 8px; z-index: 5;
  margin-left: auto; margin-bottom: -34px;
  width: 34px; height: 34px; padding: 0; border-radius: 10px;
  background: rgba(255,255,255,.06) !important; color: var(--hint) !important;
  border: 1px solid var(--border) !important; box-shadow: none;
  font-size: 15px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  flex: none;
}
button.modal-x:hover {
  background: rgba(255,255,255,.12) !important; color: var(--text) !important;
  transform: none;
}
:root[data-theme="light"] button.modal-x { background: rgba(20,24,32,.05) !important; }
/* заголовок карточки с ✕: не залезать под кнопку */
.overlay .card.has-x > h2, .overlay .card.has-x > .card-title,
.overlay .card.has-x > .payrow:has(> h2, > .card-title) {
  padding-right: 44px;
}
/* ✕ имеет margin-bottom:-34px — первый ряд поднимается под кнопку.
   Если этот ряд ниже кнопки (короткий заголовок, заголовок в обычном
   div, а не h2/.payrow), под ✕ заползает уже ВТОРОЙ ряд (фильтры
   журнала транзакций). Гарантируем полосу высотой не меньше кнопки
   и отступ справа для широких первых рядов. */
.overlay .card.has-x > .modal-x + * {
  min-height: 34px;
  padding-right: 44px;
}

/* ---------- toast / tips ---------- */
.toast {
  border-radius: 12px; padding: 11px 18px; font-weight: 600;
  background: rgba(22,26,32,.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border-hi); box-shadow: 0 16px 40px rgba(0,0,0,.5);
  bottom: calc(24px + var(--safe-b));
}
:root[data-theme="light"] .toast { background: rgba(255,255,255,.95); }
#tip, #tipc {
  border-radius: 12px; background: rgba(22,26,32,.96);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-color: var(--border-hi); box-shadow: 0 16px 40px rgba(0,0,0,.5);
}
:root[data-theme="light"] #tip, :root[data-theme="light"] #tipc { background: rgba(255,255,255,.97); }

/* ---------- gate / login ---------- */
#gate { padding: 40px 16px; }
#gate .card {
  background: linear-gradient(160deg, rgba(28,33,41,.92), rgba(14,18,23,.96));
  border-radius: 24px; padding: 30px 26px; box-shadow: var(--shadow);
}
:root[data-theme="light"] #gate .card {
  background: linear-gradient(160deg, rgba(255,255,255,.96), rgba(243,245,249,.98));
}
#gate .card::before {
  content: ""; position: absolute; inset: -1px; border-radius: 25px; padding: 1px; z-index: -1;
  background: linear-gradient(120deg, rgba(240,185,11,.55), transparent 35%, transparent 65%, rgba(94,124,255,.45));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
#gate h1 { font-size: 30px; letter-spacing: -1px; }
#gate h1::first-letter { color: var(--accent); }
#termsGate .card { border-radius: 22px; }

/* ---------- messages (AI chat) ---------- */
.msg { border-radius: 14px; }
.msg.u { background: var(--accent-soft); border-color: rgba(240,185,11,.3); border-bottom-right-radius: 4px; }
.msg.a { background: rgba(255,255,255,.05); border-bottom-left-radius: 4px; }
:root[data-theme="light"] .msg.a { background: rgba(20,24,32,.05); }

/* ---------- світла тема: то, що було «білим по білому» ---------- */
:root[data-theme="light"] .emwhite { filter: brightness(0); }
:root[data-theme="light"] .dtile:hover {
  box-shadow: 0 14px 30px rgba(23,27,34,.14);
}
:root[data-theme="light"] .overlay { background: rgba(23,27,34,.42); }
:root[data-theme="light"] a { color: var(--accent-2); }
:root[data-theme="light"] button.modal-x:hover {
  background: rgba(20,24,32,.1) !important;
}
:root[data-theme="light"] * {
  scrollbar-color: rgba(20,24,32,.25) transparent;
}
:root[data-theme="light"] *::-webkit-scrollbar-thumb {
  background: rgba(20,24,32,.18);
}
:root[data-theme="light"] *::-webkit-scrollbar-thumb:hover {
  background: rgba(20,24,32,.3);
}
/* посилання-«назад» і акцентний текст читабельніші на білому */
:root[data-theme="light"] .back { color: var(--accent-2); }
:root[data-theme="light"] .topline h1 b,
:root[data-theme="light"] .topline #balBtn,
:root[data-theme="light"] .topline #cartBtn,
:root[data-theme="light"] .topline #topAdminBtn { color: var(--accent-2) !important; }

/* ---------- gift widget (новичкам, над саппортом) ---------- */
#giftFab {
  z-index: 65; /* под модалками (.overlay z=70), над контентом */
  bottom: calc(84px + var(--safe-b));
}

/* ---------- support widget ---------- */
#supFab {
  z-index: 66; /* под модалками (.overlay z=70), над контентом */
  background: var(--grad); color: #14171b;
  box-shadow: 0 8px 28px rgba(240,185,11,.4), inset 0 1px 0 rgba(255,255,255,.35);
  bottom: calc(18px + var(--safe-b)); transition: transform .2s, box-shadow .2s;
}
#supFab:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 14px 40px rgba(240,185,11,.5); }
#supPanel {
  background: linear-gradient(160deg, rgba(26,30,37,.97), rgba(12,15,19,.98));
  border-radius: 20px; border-color: var(--border-hi);
  bottom: calc(18px + var(--safe-b));
}
:root[data-theme="light"] #supPanel { background: linear-gradient(160deg, #fff, #f3f5f9); }
.sup-user { background: var(--grad); color: #14171b; }
.sup-agent, .sup-admin { background: rgba(255,255,255,.06); }
:root[data-theme="light"] .sup-agent, :root[data-theme="light"] .sup-admin { background: rgba(20,24,32,.05); }
.sup-head .ghost { border-radius: 8px; }
.sup-img {
  display: block; max-width: 200px; max-height: 200px;
  border-radius: 10px; margin-top: 4px; border: 1px solid var(--border);
}
.sup-file {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 4px;
  padding: 7px 10px; border-radius: 9px; font-size: 12px; font-weight: 600;
  background: rgba(255,255,255,.05); border: 1px dashed var(--border-hi);
  color: var(--accent-2); text-decoration: none; max-width: 100%;
}
:root[data-theme="light"] .sup-file { background: rgba(20,24,32,.04); }
.sup-file:hover { border-color: var(--accent); }
#supAttach { flex: 0 0 44px; width: 44px; border-radius: 10px; padding: 0; font-size: 17px; }

/* ---------- admin impersonation bar ---------- */
#impBar { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }

/* ---------- scrollbars ---------- */
* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.15) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 8px; }
*::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.25); }

/* ---------- mobile bottom navigation (phones + Telegram Mini App) ---------- */
#bnav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 65;
  display: none; grid-template-columns: repeat(5, 1fr); gap: 2px;
  padding: 6px 8px calc(6px + var(--safe-b));
  background: rgba(11,14,17,.82);
  backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border-top: 1px solid var(--border);
  box-shadow: 0 -10px 40px rgba(0,0,0,.35);
}
:root[data-theme="light"] #bnav { background: rgba(243,245,249,.86); }
#bnav button {
  background: none; border: 0; box-shadow: none; border-radius: 12px;
  color: var(--hint); font-size: 10.5px; font-weight: 700; letter-spacing: .2px;
  padding: 6px 2px 4px; display: flex; flex-direction: column; align-items: center; gap: 3px;
  transform: none; min-height: 50px;
}
#bnav button i { font-style: normal; font-size: 20px; line-height: 1; transition: transform .2s; }
#bnav button.on { color: var(--accent); }
#bnav button.on i { transform: translateY(-2px) scale(1.1); filter: drop-shadow(0 4px 10px rgba(240,185,11,.45)); }
#bnav button.on::after {
  content: ""; width: 18px; height: 3px; border-radius: 3px; background: var(--grad); margin-top: 1px;
}
#bnav button:active i { transform: scale(.9); }

/* ---------- responsive ---------- */
@media (max-width: 640px) {
  body { padding: 10px 12px calc(84px + var(--safe-b)); }
  .topline { margin: -10px -12px 16px; padding: 8px 12px; padding-top: calc(8px + var(--safe-t)); border-radius: 0; border-left: 0; border-right: 0; }
  .topline h1 { font-size: 17px; }
  .topline h1 .brandlogo { width: 24px; height: 24px; }
  /* шапка — один компактный ряд: лого · баланс · 📖 · 🔔 · 👤 · 🚪 (язык — в настройках) */
  .topline { flex-wrap: nowrap; gap: 5px; overflow-x: auto; scrollbar-width: none; }
  .topline::-webkit-scrollbar { display: none; }
  .topline > * { order: 0 !important; flex: 0 0 auto !important; }
  .topline #topRefBtn, .topline #topPayBtn, .topline .topbrk,
  .topline #langSel, .topline #topFbLink, .topline #topKbLink {
    display: none !important;
  }
  .topline > span:not(.topbrk) { display: block !important; flex: 1 1 0 !important; min-width: 4px; }
  .topline h1 { margin-right: 2px; }
  .topline .ghost, .topline select.ghost {
    padding: 6px 8px !important; font-size: 12px !important; border-radius: 9px;
  }
  .topline #balBtn { padding: 6px 9px !important; }
  .topline select#langSel { padding: 6px 2px 6px 6px !important; }
  .topline .uchip { max-width: 34px !important; padding: 6px 7px !important; }
  .topline .uchip b { display: none; }
  .topline h1 { font-size: 16px; }
  .topline h1 .brandlogo { width: 22px; height: 22px; margin-right: 6px; }
  .topline select#langSel { font-size: 11px !important; padding: 6px 0 6px 4px !important; }
  .topline #cartBtn, .topline #topAdminBtn { padding: 6px 8px !important; }
  /* фильтры каталога / тулбары — сетка 2 колонки вместо «лесенки» */
  #catProjects > div:first-child {
    display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px;
  }
  #catProjects > div:first-child > * {
    width: 100% !important; min-width: 0; margin: 0 !important;
  }
  /* статистика портфеля — 3 в ряд, компактно */
  #pfStats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  #pfStats .stat { min-width: 0; padding: 9px 10px; }
  #pfStats .stat .v { font-size: 16px; }
  #pfStats .stat .k { font-size: 9.5px; letter-spacing: .3px; }
  .card { padding: 14px; border-radius: 16px; }
  .dtile { padding: 12px; border-radius: 12px; }
  .stat { padding: 10px 12px; border-radius: 12px; }
  /* главные вкладки живут в нижней панели */
  #app > .tabs { display: none; }
  #bnav { display: grid; }
  #giftFab { bottom: calc(144px + var(--safe-b)); right: 14px; width: 48px; height: 48px; font-size: 22px; }
  #supFab { bottom: calc(84px + var(--safe-b)); right: 14px; width: 48px; height: 48px; font-size: 21px; }
  #supPanel {
    right: 0; left: 0; bottom: 0; width: 100%; max-width: 100%;
    height: min(78vh, 620px); max-height: none;
    border-radius: 20px 20px 0 0; border-bottom: 0;
    padding-bottom: var(--safe-b);
  }
  /* модалки — bottom sheet */
  .overlay { align-items: flex-end; padding: 0; }
  .overlay .card {
    max-width: 100%; border-radius: 22px 22px 0 0; max-height: 92vh;
    padding-bottom: calc(18px + var(--safe-b));
    animation: sheetin .32s cubic-bezier(.2,.8,.2,1) both;
  }
  .overlay .card::before {
    content: ""; display: block; width: 40px; height: 4px; border-radius: 4px;
    background: var(--border-hi); margin: -4px auto 12px;
  }
  @keyframes sheetin { from { transform: translateY(40px); opacity: 0; } }
  .toast { bottom: calc(92px + var(--safe-b)); max-width: calc(100vw - 28px); text-align: center; }
  .tab { padding: 9px 8px; font-size: 13px; }
  button { padding: 12px; font-size: 14px; }
  input, textarea, select { font-size: 16px; /* iOS: без зума при фокусе */ padding: 11px 12px; }
  .payrow select, .payrow input { font-size: 15px; }
  h1 { font-size: 20px; }
}
@media (max-width: 360px) {
  body { padding-left: 8px; padding-right: 8px; }
  .topline { margin-left: -8px; margin-right: -8px; padding-left: 8px; padding-right: 8px; }
  #bnav button { font-size: 9.5px; }
  #bnav button i { font-size: 18px; }
}
@media (max-width: 420px) {
  /* чип юзера — единственный вход в меню профиля/настройки, не прячем */
  .topline .uchip { display: block !important; }
}
@media (min-width: 641px) and (max-width: 899px) {
  body { padding: 14px 20px calc(16px + var(--safe-b)); }
  .topline { margin: -14px -20px 16px; padding: 10px 20px; padding-top: calc(10px + var(--safe-t)); border-radius: 0; border-left: 0; border-right: 0; }
}
@media (min-width: 900px) {
  body { padding: 18px 26px calc(24px + var(--safe-b)); max-width: 1180px; }
  .topline { margin: -18px 0 16px; padding: 12px 18px; padding-top: calc(12px + var(--safe-t)); }
  .topline h1 { font-size: 21px; }
  .card { padding: 22px; }
  .card h2 { font-size: 12.5px; }
  .dtile { padding: 18px; }
  .dtile .dv { font-size: 28px; }
}
@media (min-width: 1400px) {
  body { max-width: 1320px; }
}

/* ---------- Telegram Mini App ---------- */
html.tgapp .topline { padding-top: calc(10px + var(--tg-content-safe-area-inset-top, 0px) + var(--tg-safe-area-inset-top, 0px)); }
html.tgapp body { padding-bottom: calc(84px + var(--tg-safe-area-inset-bottom, 0px) + var(--safe-b)); }
html.tgapp #bnav { padding-bottom: calc(6px + var(--tg-safe-area-inset-bottom, 0px) + var(--safe-b)); }
html.tgapp .orb { opacity: .4; filter: blur(60px); }  /* экономим GPU в webview */

/* ---------- детальная страница проекта ---------- */
#detail, .sect { max-width: none !important; }
/* исход проекта — чипы в один ряд рядом с мета-инфо карточки */
.ocrow {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 6px 10px; margin-top: 6px;
}
.ocdates { color: var(--hint); font-size: 13px; }
.occhips { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 260px; }
.occhip {
  flex: 0 0 auto;
  width: auto; padding: 5px 11px; font-size: 11.5px; font-weight: 700;
  border-radius: 999px; white-space: nowrap;
  background: rgba(255,255,255,.05); color: var(--hint);
  border: 1px solid var(--border); box-shadow: none;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
:root[data-theme="light"] .occhip { background: rgba(20,24,32,.04); }
:root[data-theme="light"] .occhip.sel { background: var(--accent-soft); }
.occhip:hover { transform: none; border-color: var(--border-hi); color: var(--text); }
.occhip.sel {
  background: var(--accent-soft);
  box-shadow: 0 0 12px rgba(240,185,11,.15);
}
@media (min-width: 900px) {
  /* верхняя карточка — на всю ширину; ниже агент | чат.
     Агент чуть шире: его контент длиннее — так колонки выравниваются
     по высоте */
  #detail .dgrid {
    display: grid; grid-template-columns: 1.3fr 1fr;
    gap: 0 16px; align-items: start;
  }
  /* широкий контент внутри карточки (архив агента и пр.) не должен
     раздвигать колонку грида — скроллим внутри карточки */
  #detail .dgrid > .card { min-width: 0; }
}
@media (max-width: 640px) {
  /* тулбары чата: формы шире, кнопки компактнее */
  #chatCard .payrow > select, #chatModBody .payrow > select {
    flex: 1 1 auto; min-width: 0;
  }
  #chatCard .payrow > button, #chatModBody .payrow > button {
    flex: 0 0 auto; width: auto; padding: 6px 9px; font-size: 13px;
    min-height: 0;
  }
  #chatCard #chatInput, #chatModBody textarea#chatInput {
    min-height: 54px;
  }
  #chatCard #chatSend { flex: 0 0 52px; width: 52px; padding: 0; }
}
@media (max-width: 640px) {
  /* шапка проекта: имя на всю строку, кнопки действий — строкой ниже */
  #detail > .card > .payrow { flex-wrap: wrap; }
  #detail > .card > .payrow > div:first-child { flex: 1 1 100%; }
  #detail > .card > .payrow > div:last-child {
    flex-wrap: wrap; width: 100%; gap: 6px;
  }
  #detail > .card > .payrow .hbtn { flex: 1 1 auto; }
}

/* ---------- полноэкранный AI-чат (мини-апп / телефоны) ---------- */
#chatModal {
  position: fixed; inset: 0; z-index: 95;
  background: var(--bg); display: flex; flex-direction: column;
  padding: 10px 12px calc(10px + var(--safe-b));
}
html.tgapp #chatModal {
  padding-top: calc(10px + var(--tg-content-safe-area-inset-top, 0px));
}
#chatModal .cm-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 2px 10px; font-size: 16px;
}
#chatModal .cm-head button { width: auto; padding: 7px 14px; font-size: 13px; }
#chatModBody { flex: 1; display: flex; min-height: 0; }
#chatModBody .card {
  flex: 1; margin: 0; display: flex; flex-direction: column;
  max-height: 100%; overflow: hidden;
}
#chatModBody #chatMsgs {
  flex: 1; max-height: none !important; min-height: 0;
}
#chatModBody textarea#chatInput {
  font-size: 16px; min-height: 58px; max-height: 140px;
}
#chatModBody #chatSend { min-height: 52px; padding: 0 18px; }
#chatModBody #chatOpenFull { display: none !important; }
#chatModBody .payrow { flex-wrap: wrap; }
#chatModBody #chatCost { flex: 1 1 100%; margin-left: 0 !important; }
#chatModBody #chatModel { max-width: 140px; }
/* статы агента в половинной колонке — компактнее */
#agentStats { display: flex; flex-wrap: wrap; gap: 8px; }
#agentStats .stat { min-width: 0; flex: 1 1 30%; }
#agentStats .stat .v { font-size: 15px; }
#agentStats .stat .k { font-size: 9px; }

/* ---------- motion polish ---------- */
#app, #detail, #finance, #partner, #admin, #adminSub, #review, #reviewDetail {
  animation: viewin .3s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes viewin { from { opacity: 0; transform: translateY(8px); } }

/* Выбор языка в настройках — только мобильная версия */
.mob-lang { display: none; }
@media (max-width: 640px) { .mob-lang { display: block; } }