/* ================================================================
   XCHANGE — app.css
   Структура:
   1. BASE       — переменные, reset, типографика
   2. LAYOUT     — app, topbar, screens, nav
   3. COMPONENTS — card, btn, badge, stat, form, toast, spinner...
   4. MARKET     — stock list, ticker box, страница акции
   5. WALLET     — holdings, tx rows, дивиденды
   6. HOLDING    — holding detail page tabs и секции
   7. COMPANY    — IPO section, owner tag
   8. PROFILE    — карточка игрока, о платформе
   ================================================================ */

/* ── 1. BASE ─────────────────────────────────────────────────── */
:root {
  --bg: #f5f6fa;
  --white: #ffffff;
  --border: #e2e5ed;
  --border2: #d0d5df;
  --txt: #1a1d2e;
  --muted: #6b7280;
  --muted2: #9ca3af;
  --green: #16a34a;
  --green-bg: #f0fdf4;
  --green-border: #bbf7d0;
  --red: #dc2626;
  --red-bg: #fef2f2;
  --red-border: #fecaca;
  --blue: #2563eb;
  --blue-bg: #eff6ff;
  --blue-border: #bfdbfe;
  --gold: #d97706;
  --gold-bg: #fffbeb;
  --nav-h: 60px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent }
html, body { height: 100%; overflow: hidden; background: var(--bg) }
body { font-family: 'Inter', sans-serif; color: var(--txt); overscroll-behavior: none; -webkit-font-smoothing: antialiased }
::-webkit-scrollbar { width: 3px }
::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 3px }

/* ── 2. LAYOUT ───────────────────────────────────────────────── */
#app { display: flex; flex-direction: column; height: 100%; max-width: 480px; margin: 0 auto; position: relative; background: var(--bg) }

#topbar {
  padding: 12px 16px 10px;
  background: var(--white);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  position: relative; z-index: 10; flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,.05)
}
.logo { font-size: 17px; font-weight: 700; letter-spacing: -.02em; color: var(--txt) }
.logo span { color: var(--blue) }
.balance-chip {
  background: var(--gold-bg); border: 1px solid #fde68a;
  border-radius: 8px; padding: 5px 11px;
  font-size: 13px; font-weight: 600; color: var(--gold); display: flex; align-items: center; gap: 5px
}

#screens { flex: 1; overflow: hidden; position: relative }
.screen {
  position: absolute; inset: 0; overflow-y: auto;
  padding: 0 0 calc(var(--nav-h) + var(--safe-bottom) + 8px);
  display: none; opacity: 0; transition: opacity .15s
}
.screen.active { display: block; opacity: 1 }

#screen-stock {
  position: absolute; inset: 0; overflow-y: auto;
  padding: 0 0 calc(var(--nav-h) + var(--safe-bottom) + 8px);
  display: none; opacity: 0; transition: opacity .15s;
  background: var(--bg); z-index: 5
}
#screen-stock.active { display: block; opacity: 1 }

#nav {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: calc(var(--nav-h) + var(--safe-bottom));
  background: var(--white); border-top: 1px solid var(--border);
  display: flex; align-items: flex-start; padding-top: 6px;
  z-index: 20; flex-shrink: 0
}
.nav-btn {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  border: none; background: none; cursor: pointer; padding: 0;
  color: var(--muted2); transition: color .12s
}
.nav-btn.active { color: var(--blue) }
.nav-btn svg { width: 22px; height: 22px; stroke-width: 1.8 }
.nav-label { font-size: 10px; font-weight: 600; letter-spacing: .01em }
.nav-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--blue); margin-top: 1px; opacity: 0; transition: opacity .15s }
.nav-btn.active .nav-dot { opacity: 1 }

.page-head { padding: 16px 16px 10px; display: flex; align-items: center; justify-content: space-between }
.page-title { font-size: 18px; font-weight: 700; color: var(--txt) }
.page-sub { font-size: 12px; color: var(--muted); font-weight: 500 }

/* ── 3. COMPONENTS ───────────────────────────────────────────── */
.card { background: var(--white); border: 1px solid var(--border); border-radius: 12px; padding: 16px; margin: 0 12px 10px }
.card-flat { background: var(--white); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; margin: 0 12px 10px }

.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 12px 10px }
.stat-box { background: var(--white); border: 1px solid var(--border); border-radius: 10px; padding: 12px }
.stat-lbl { font-size: 10px; color: var(--muted); font-weight: 500; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px }
.stat-val { font-size: 17px; font-weight: 700 }
.stat-val.green { color: var(--green) }
.stat-val.red { color: var(--red) }
.stat-val.blue { color: var(--blue) }
.stat-val.gold { color: var(--gold) }
.stat-unit { font-size: 10px; color: var(--muted); margin-top: 2px }

.field { margin-bottom: 12px }
.field label { display: block; font-size: 11px; font-weight: 600; color: var(--muted); margin-bottom: 5px; letter-spacing: .04em; text-transform: uppercase }
.field input {
  width: 100%; background: var(--bg); border: 1px solid var(--border2);
  border-radius: 9px; padding: 10px 13px; color: var(--txt); font-family: 'Inter', sans-serif;
  font-size: 14px; outline: none; transition: border .15s; font-weight: 500
}
.field input:focus { border-color: var(--blue); background: var(--white) }
.field-hint { font-size: 11px; color: var(--muted2); margin-top: 4px }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px }

.btn {
  width: 100%; padding: 12px; border: none; border-radius: 10px; cursor: pointer;
  font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600;
  transition: opacity .12s, transform .1s; display: flex; align-items: center; justify-content: center; gap: 7px
}
.btn:active { transform: scale(.98) }
.btn-primary { background: var(--blue); color: #fff }
.btn-primary:hover { opacity: .9 }
.btn-success { background: var(--green); color: #fff }
.btn-danger { background: var(--red); color: #fff }
.btn-secondary { background: var(--white); border: 1px solid var(--border2); color: var(--txt) }
.btn:disabled { opacity: .4; pointer-events: none }
.btn-sm { padding: 8px 14px; width: auto; font-size: 12px; border-radius: 8px }

.badge { display: inline-block; padding: 2px 7px; border-radius: 6px; font-size: 10px; font-weight: 600; margin-top: 3px }
.up { background: var(--green-bg); color: var(--green) }
.dn { background: var(--red-bg); color: var(--red) }
.flat { background: var(--bg); color: var(--muted) }

.divider { height: 1px; background: var(--border); margin: 12px 0 }

.info-row { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; font-size: 13px; border-bottom: 1px solid var(--border) }
.info-row:last-child { border-bottom: none }
.info-row .lbl { color: var(--muted); font-weight: 500 }
.info-row .val { font-weight: 600 }

.prog-bar { height: 5px; background: var(--border); border-radius: 3px; overflow: hidden }
.prog-fill { height: 100%; background: var(--green); border-radius: 3px; transition: width .3s }

.qty-row { display: flex; align-items: center; gap: 0; margin-bottom: 12px; border: 1px solid var(--border2); border-radius: 9px; overflow: hidden }
.qty-btn { width: 44px; height: 42px; border: none; background: var(--bg); color: var(--txt); font-size: 20px; cursor: pointer; flex-shrink: 0; transition: background .1s; font-weight: 300 }
.qty-btn:active { background: var(--border) }
.qty-inp { flex: 1; height: 42px; border: none; border-left: 1px solid var(--border2); border-right: 1px solid var(--border2); background: var(--white); color: var(--txt); text-align: center; font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 700; outline: none }

#toast {
  position: fixed; top: 16px; left: 50%; transform: translateX(-50%) translateY(-80px);
  background: var(--txt); border-radius: 10px; padding: 9px 18px;
  font-size: 13px; font-weight: 600; color: #fff;
  z-index: 999; transition: transform .3s; white-space: nowrap;
  box-shadow: 0 4px 16px rgba(0,0,0,.2)
}
#toast.show { transform: translateX(-50%) translateY(0) }
#toast.ok { background: var(--green) }
#toast.err { background: var(--red) }

.live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); display: inline-block; margin-right: 5px; animation: pulse 1.5s ease-in-out infinite }
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1) } 50% { opacity: .4; transform: scale(.7) } }

.spinner { width: 20px; height: 20px; border: 2px solid var(--border2); border-top-color: var(--blue); border-radius: 50%; animation: spin .6s linear infinite; margin: 0 auto }
@keyframes spin { to { transform: rotate(360deg) } }

.empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 20px; gap: 10px; text-align: center; color: var(--muted) }
.empty svg { opacity: .35 }
.empty-txt { font-size: 13px; font-weight: 500 }
.empty--padded { margin-top: 60px }
.empty--lg { margin-top: 80px }

.back-btn { display: flex; align-items: center; gap: 6px; background: none; border: none; cursor: pointer; color: var(--blue); font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; padding: 0 }

.banner { border-radius: 10px; padding: 11px 13px; font-size: 12px; line-height: 1.6; margin-bottom: 12px }
.banner-blue { background: var(--blue-bg); border: 1px solid var(--blue-border); color: var(--blue) }
.banner-green { background: var(--green-bg); border: 1px solid var(--green-border); color: var(--green) }

.price-big { font-size: 28px; font-weight: 700; letter-spacing: -.02em }
.price-big-unit { font-size: 14px; color: var(--muted); font-weight: 500 }

.trade-card { background: var(--white); border: 1px solid var(--border); border-radius: 12px; padding: 16px }
.trade-card-wrap { padding: 0 12px 8px }
.trade-title { font-size: 14px; font-weight: 700; margin-bottom: 14px }
.trade-qty-label { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px }
.trade-btn-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px }
.trade-spacer { height: 12px }

.sold-out-card { text-align: center; padding: 8px 0; color: var(--muted); font-size: 13px; font-weight: 500 }

/* ── 4. MARKET ───────────────────────────────────────────────── */
.stock-item {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  cursor: pointer; border-bottom: 1px solid var(--border);
  background: var(--white); transition: background .1s
}
.stock-item:last-child { border-bottom: none }
.stock-item:active { background: var(--bg) }
.ticker-box {
  width: 42px; height: 42px; border-radius: 10px; flex-shrink: 0;
  background: var(--blue-bg); border: 1px solid var(--blue-border);
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700; color: var(--blue); letter-spacing: .03em; text-align: center; line-height: 1.1
}
.s-info { flex: 1; min-width: 0 }
.s-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.s-sub { font-size: 11px; color: var(--muted); margin-top: 2px }
.s-price-col { text-align: right; flex-shrink: 0 }
.s-price { font-size: 14px; font-weight: 700 }

/* Страница детали акции */
.sp-wrap { padding: 0 12px 4px }
.sp-header { background: var(--white); border: 1px solid var(--border); border-radius: 12px; padding: 18px }
.sp-header-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px }
.sp-ticker { font-size: 11px; font-weight: 700; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 4px }
.sp-name { font-size: 20px; font-weight: 700 }
.sp-owner { font-size: 12px; color: var(--muted); margin-top: 3px }
.sp-price-row { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px }
.sp-cap { font-size: 12px; color: var(--muted) }

.sp-treasury { margin: 0 12px 8px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; display: flex; align-items: center; justify-content: space-between }
.sp-treasury-label { font-size: 12px; color: var(--muted) }
.sp-treasury-pct { font-size: 12px; font-weight: 700 }
.sp-treasury-pct.good  { color: var(--green) }
.sp-treasury-pct.warn  { color: var(--gold) }
.sp-treasury-pct.bad   { color: var(--red) }

.sp-prog-card { padding: 14px 16px }
.sp-prog-header { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 7px }
.sp-prog-label { color: var(--muted); font-weight: 500 }
.sp-prog-value { font-weight: 700 }
.sp-prog-footer { display: flex; justify-content: space-between; font-size: 10px; color: var(--muted); margin-top: 5px }

/* ── 5. WALLET ───────────────────────────────────────────────── */
.tab-bar { display: flex; gap: 0; background: var(--white); border: 1px solid var(--border); border-radius: 10px; padding: 3px; margin: 0 12px 12px }
.tab-btn { flex: 1; padding: 8px; border: none; background: none; border-radius: 8px; cursor: pointer; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; color: var(--muted); transition: all .15s; position: relative; }
.tab-btn.active { background: var(--blue); color: #fff }

.tx-row { display: flex; align-items: center; justify-content: space-between; padding: 11px 16px; border-bottom: 1px solid var(--border) }
.tx-row:last-child { border-bottom: none }
.tx-left { display: flex; align-items: center; gap: 10px }
.tx-icon { width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0 }
.tx-icon.buy { background: var(--green-bg) }
.tx-icon.sell { background: var(--red-bg) }
.tx-icon.div { background: rgba(52,199,89,0.12); border-radius: 8px; width: 34px; height: 34px }
.tx-name { font-size: 12px; font-weight: 600 }
.tx-ticker { font-weight: 700 }
.tx-date { font-size: 11px; color: var(--muted); margin-top: 1px }
.tx-right { text-align: right }
.tx-total { font-size: 13px; font-weight: 700 }
.tx-total.buy { color: var(--red) }
.tx-total.sell { color: var(--green) }
.tx-total.div { color: var(--green) }
.tx-shares { font-size: 11px; color: var(--muted); margin-top: 1px }
.tx-per-share { color: var(--muted); font-size: 11px }

.holding-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--border) }
.holding-row:last-child { border-bottom: none }
.holding-left { display: flex; align-items: center; gap: 10px }
.holding-badge { width: 38px; height: 38px; border-radius: 9px; background: var(--blue-bg); border: 1px solid var(--blue-border); display: flex; align-items: center; justify-content: center; font-size: 8px; font-weight: 700; color: var(--blue) }
.holding-name { font-size: 13px; font-weight: 600 }
.holding-sub { font-size: 11px; color: var(--muted); margin-top: 2px }
.holding-right { text-align: right }
.holding-val { font-size: 13px; font-weight: 700 }
.holding-pnl { font-size: 11px; margin-top: 2px; font-weight: 600 }
.holding-pnl.green { color: var(--green) }
.holding-pnl.red { color: var(--red) }

/* Дивиденды */
.div-total-card { margin: 8px 12px 0; background: var(--white); border: 1px solid var(--border); border-radius: 12px; padding: 16px; text-align: center }
.div-total-label { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px }
.div-total-amount { font-size: 28px; font-weight: 800; color: var(--green) }
.div-total-unit { font-size: 12px; color: var(--muted); margin-top: 3px }
.div-list { margin-top: 8px }

/* ── Чёрный рынок — мобильный bottom sheet попап ── */
#bm-popup {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
}
.bm-popup-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(2px);
}
.bm-popup-card {
  position: relative;
  background: var(--white);
  border-radius: 20px 20px 0 0;
  padding: 20px 16px calc(16px + var(--safe-bottom));
  max-height: 88vh;
  overflow-y: auto;
  box-shadow: 0 -4px 32px rgba(0,0,0,0.18);
  animation: sheetUp .22s cubic-bezier(.32,0,.36,1);
}
@keyframes sheetUp {
  from { transform: translateY(60px); opacity: 0 }
  to   { transform: translateY(0);    opacity: 1 }
}
/* Ручка сверху */
.bm-popup-card::before {
  content: '';
  display: block;
  width: 36px; height: 4px;
  background: var(--border2);
  border-radius: 2px;
  margin: 0 auto 16px;
}
.bm-popup-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 4px;
}

/* ── Баннер-инфо чёрного рынка ── */
.bm-info-banner {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: rgba(37,99,235,0.06);
  border: 1px solid var(--blue-border);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
  margin: 0 12px 8px;
  word-break: break-word;
}
.bm-info-banner svg { flex-shrink: 0; margin-top: 1px }

/* ── Кнопка "Выставить на ЧР" ── */
.btn-blackmarket {
  width: 100%;
  padding: 11px 14px;
  background: rgba(99,102,241,0.08);
  border: 1px solid rgba(99,102,241,0.25);
  border-radius: 10px;
  color: #818cf8;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s, transform .1s;
  text-align: center;
}
.btn-blackmarket:active { background: rgba(99,102,241,0.15); transform: scale(.98) }

/* ── 6. HOLDING DETAIL ───────────────────────────────────────── */
.htab-bar { display: flex; gap: 0; background: var(--white); border-bottom: 1px solid var(--border); padding: 0 12px; position: sticky; top: 0; z-index: 2 }
.htab-btn { flex: 1; padding: 12px 0 10px; border: none; background: none; cursor: pointer; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; color: var(--muted2); border-bottom: 2px solid transparent; transition: all .15s; letter-spacing: .01em }
.htab-btn.active { color: var(--blue); border-bottom-color: var(--blue) }

.hi-section { background: var(--white); border: 1px solid var(--border); border-radius: 12px; margin: 10px 12px; overflow: hidden }
.hi-head { padding: 12px 16px; border-bottom: 1px solid var(--border); font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em }
.hi-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--border); font-size: 13px }
.hi-row:last-child { border-bottom: none }
.hi-row .lbl { color: var(--muted); font-weight: 500 }
.hi-row .val { font-weight: 700 }

.txm-row { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--border) }
.txm-row:last-child { border-bottom: none }
.txm-icon { width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0 }
.txm-icon.buy { background: var(--green-bg) }
.txm-icon.sell { background: var(--red-bg) }
.txm-body { flex: 1; min-width: 0 }
.txm-title { font-size: 12px; font-weight: 600 }
.txm-sub { font-size: 11px; color: var(--muted); margin-top: 1px }
.txm-right { text-align: right; flex-shrink: 0 }
.txm-total { font-size: 13px; font-weight: 700 }
.txm-total.buy { color: var(--red) }
.txm-total.sell { color: var(--green) }
.txm-date { font-size: 10px; color: var(--muted2); margin-top: 1px }

/* Шапка страницы позиции */
.hp-topbar { background: var(--white); border-bottom: 1px solid var(--border); padding: 12px 16px 0; position: sticky; top: 0; z-index: 10 }
.hp-topbar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px }
.hp-spacer { flex: 1 }
.hp-ticker-tag { background: var(--blue-bg); border: 1px solid var(--blue-border); border-radius: 5px; padding: 2px 8px; font-size: 11px; font-weight: 700; color: var(--blue) }
.hp-company-name { font-size: 14px; font-weight: 700 }

/* Карточка позиции */
.pos-card { margin: 12px 12px 0; background: var(--white); border: 1px solid var(--border); border-radius: 12px; padding: 18px }
.pos-label { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px }
.pos-main-row { display: flex; justify-content: space-between; align-items: flex-end }
.pos-value { font-size: 26px; font-weight: 700; color: var(--txt) }
.pos-value-unit { font-size: 13px; color: var(--muted); font-weight: 500 }
.pos-shares-count { font-size: 12px; color: var(--muted); margin-top: 3px }
.pos-pnl { text-align: right }
.pos-pnl-amount { font-size: 18px; font-weight: 700 }
.pos-pnl-pct { font-size: 12px; font-weight: 600 }
.pos-pnl.green .pos-pnl-amount,
.pos-pnl.green .pos-pnl-pct { color: var(--green) }
.pos-pnl.red .pos-pnl-amount,
.pos-pnl.red .pos-pnl-pct { color: var(--red) }

/* Рыночная вкладка в holding */
.mkt-price-wrap { padding: 10px 12px 4px }
.mkt-price-card { background: var(--white); border: 1px solid var(--border); border-radius: 12px; padding: 16px }
.mkt-price-row { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px }
.mkt-cap-row { font-size: 12px; color: var(--muted) }

/* ── 7. COMPANY ──────────────────────────────────────────────── */
.owner-tag { display: inline-flex; align-items: center; gap: 4px; background: var(--gold-bg); border: 1px solid #fde68a; border-radius: 6px; padding: 3px 9px; font-size: 11px; font-weight: 600; color: var(--gold) }
.ipo-section { background: var(--white); border: 1px solid var(--border); border-radius: 12px; margin: 0 12px 10px; overflow: hidden }
.ipo-head { padding: 14px 16px 12px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center }
.ipo-title { font-size: 14px; font-weight: 700 }
.ipo-body { padding: 14px 16px }

/* ── 8. PROFILE ──────────────────────────────────────────────── */
.profile-card { margin: 0 12px 10px }
.profile-avatar-row { display: flex; align-items: center; gap: 14px; margin-bottom: 16px }
.profile-avatar { width: 56px; height: 56px; border-radius: 14px; background: var(--blue-bg); border: 1px solid var(--blue-border); display: flex; align-items: center; justify-content: center; flex-shrink: 0 }
.profile-name { font-size: 18px; font-weight: 700 }
.profile-id { font-size: 11px; color: var(--muted); margin-top: 3px }
.profile-divider { margin: 0 0 14px }
.profile-val-gold { color: var(--gold) }
.profile-val-green { color: var(--green) }

.about-card { margin: 0 12px 10px }
.about-label { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 10px }
.about-desc { font-size: 13px; line-height: 1.7; color: var(--muted) }
.about-desc strong { color: var(--txt) }

/* ── Бейдж дивидендов — позиция относительно иконки, не всей кнопки ── */
.nav-icon-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.nav-badge {
  position: absolute;
  top: -5px; right: -7px;
  background: var(--red);
  color: #fff;
  font-size: 9px; font-weight: 700;
  min-width: 16px; height: 16px;
  border-radius: 8px; padding: 0 4px;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  border: 2px solid var(--white);
  animation: badgePop .18s cubic-bezier(.34,1.56,.64,1);
}
.tab-badge {
  position: absolute;
  top: 1px; right: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--red); color: #fff;
  font-size: 9px; font-weight: 700;
  min-width: 15px; height: 15px;
  border-radius: 8px; padding: 0 4px;
  pointer-events: none;
  border: 2px solid var(--white);
  animation: badgePop .18s cubic-bezier(.34,1.56,.64,1);
}
@keyframes badgePop {
  from { transform: scale(0) }
  to   { transform: scale(1) }
}

/* ── Главная карточка «Забрать дивиденды» ── */
.div-claim-card {
  margin: 8px 12px 4px;
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  border: 1.5px solid var(--green-border);
  border-radius: 14px;
  padding: 16px;
  display: flex; flex-direction: column; gap: 14px;
}
.div-claim-card-inner {
  display: flex; align-items: center; gap: 14px;
}
.div-claim-card-icon {
  font-size: 32px; line-height: 1; flex-shrink: 0;
}
.div-claim-card-info {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.div-claim-card-lbl {
  font-size: 11px; color: var(--green); font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em;
}
.div-claim-card-amt {
  font-size: 26px; font-weight: 800; color: var(--green); line-height: 1.15;
  letter-spacing: -.02em;
}
.div-claim-card-unit {
  font-size: 14px; font-weight: 600; color: rgba(22,163,74,.7);
}
.div-claim-main-btn {
  width: 100%; padding: 13px; border: none; border-radius: 10px; cursor: pointer;
  font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 700;
  background: var(--green); color: #fff;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: opacity .12s, transform .1s;
  box-shadow: 0 3px 10px rgba(22,163,74,.35);
  letter-spacing: .01em;
}
.div-claim-main-btn:active { opacity: .87; transform: scale(.98); }

/* ── Строка незабранной выплаты ── */
.div-row--pending { background: rgba(22,163,74,.025); }
.div-row--pending .tx-icon.div { background: rgba(22,163,74,.14); }
.div-pending-lbl { color: var(--green); font-size: 11px; font-weight: 600; margin-top: 2px; }