/* CS2RENT — тема «премиум-минимализм».
   Подключается последней на публичных страницах и только перекрывает оформление:
   разметку и скрипты не трогает. Откат — убрать <link href="/theme.css">. */

:root{
  --bg:#09090b;
  --bg-panel:#111113;
  --bg-elevated:#18181b;
  --bg-elevated-2:#202024;
  --border:rgba(255,255,255,.08);
  --border-strong:rgba(255,255,255,.14);
  --text:#f4f4f5;
  --text-dim:#a1a1aa;
  --text-faint:#71717a;
  --accent-orange:#ff6b1a;
  --accent-orange-hover:#ff8340;
  --accent-orange-dim:#ff6b1a26;
  --accent-blue:#f4f4f5;      /* синий акцент старой темы → нейтральный светлый */
  --accent-green:#4ade80;
  --radius:14px;
}

html, body{ background:var(--bg); }
body{ letter-spacing:-.005em; }
::selection{ background:var(--accent-orange); color:#140800; }
:focus-visible{ outline:2px solid var(--accent-orange); outline-offset:2px; }

/* ---------- Шапка ---------- */
.topbar{
  height:64px;
  background:rgba(9,9,11,.8);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
}
.pg-profile .topbar{ padding:12px 28px; }
.primary-nav a{
  text-transform:none; letter-spacing:0;
  font-size:14px; font-weight:500;
  color:var(--text-dim);
  padding:8px 12px; border-radius:999px;
}
.primary-nav a:hover{ background:transparent; color:var(--text); }
.primary-nav a.active{ color:var(--text); }
.topnav a{ font-weight:500; }

.icon-btn, .menu-toggle{
  background:transparent; border-color:var(--border);
  color:var(--text-dim);
}
.icon-btn:hover, .menu-toggle:hover{ color:var(--text); border-color:var(--border-strong); }
.balance-pill, .pill{ background:transparent; border-color:var(--border); }
.balance-item.credits{ color:var(--text); }
.topup-btn, .pill button{ background:var(--accent-orange); color:#140800; }
.avatar{ border-color:var(--border-strong); }
.dropdown{ background:var(--bg-panel); border-color:var(--border); border-radius:14px; box-shadow:0 24px 48px rgba(0,0,0,.6); }
.mobile-nav{ background:var(--bg); }

/* ---------- Боковая лента «онлайн» ---------- */
.sidebar{ background:var(--bg); border-right:1px solid var(--border); }
.live-status{ border-bottom-color:var(--border); }
.live-status .lbl{ letter-spacing:.14em; font-weight:600; color:var(--text-faint); }
.live-dot{ box-shadow:0 0 0 3px rgba(74,222,128,.15); }
.feed-tabs button{ background:transparent; border-color:var(--border); border-radius:999px; }
.feed-tabs button.active{ background:var(--text); border-color:var(--text); color:var(--bg); }
.feed-card{ background:transparent; border-color:var(--border); border-radius:12px; }
.feed-card:hover{ border-color:var(--border-strong); }
.feed-thumb{ border-radius:8px; }

/* Цвет редкости — мягкое свечение вместо заливки */
.r-mil{ background:radial-gradient(circle at 50% 60%, #4b69ff33, transparent 70%), var(--bg-elevated); }
.r-restricted{ background:radial-gradient(circle at 50% 60%, #8847ff33, transparent 70%), var(--bg-elevated); }
.r-classified{ background:radial-gradient(circle at 50% 60%, #d32ce633, transparent 70%), var(--bg-elevated); }
.r-covert{ background:radial-gradient(circle at 50% 60%, #eb4b4b33, transparent 70%), var(--bg-elevated); }
.r-gold{ background:radial-gradient(circle at 50% 60%, #e4ae3933, transparent 70%), var(--bg-elevated); }

/* ---------- Кнопки ---------- */
.btn{
  border-radius:999px;
  font-weight:600;
  box-shadow:none;
}
.btn-primary{ background:var(--accent-orange); color:#140800; border-color:var(--accent-orange); }
html .btn-primary:hover{ background:var(--accent-orange-hover); filter:none; }
.btn-ghost, .pg-profile .btn:not(.btn-primary){
  background:var(--bg-elevated); border:1px solid var(--border-strong); color:var(--text);
}
.btn-ghost:hover, .pg-profile .btn:not(.btn-primary):hover{ background:var(--bg-elevated-2); }
.rent-btn{
  border-radius:999px;
  background:var(--accent-orange);
  color:#140800; font-weight:700; letter-spacing:0;
  box-shadow:none;
}
html .rent-btn:hover, html .item-card:hover .rent-btn{ background:var(--accent-orange-hover); filter:none; box-shadow:none; transform:none; }
.rent-btn.busy-btn{ background:var(--bg-elevated); border:1px solid var(--border); color:var(--text-dim); }
.cart-add{ border-radius:999px; background:transparent; border-color:var(--border-strong); }
.cart-add:hover{ transform:none; }
.cart-add.in{ background:var(--accent-orange); border-color:var(--accent-orange); color:#140800; }
.cart-btn .cart-count{ background:var(--accent-orange); color:#140800; }

/* ---------- Главная: баннеры и первый экран ---------- */
main{ padding-top:28px; }
.pg-home .banner{ border-radius:var(--radius); border-color:var(--border); }
.pg-home .banner-wall{ margin-bottom:44px; }

.pg-home .hero{
  padding:56px 4px 64px;
  border-bottom:1px solid var(--border);
  gap:48px;
}
.pg-home .hero h1{
  font-size:clamp(34px, 4.6vw, 56px);
  line-height:1.06;
  letter-spacing:-.02em;
  max-width:14ch;
}
.pg-home .hero h1 span{ color:var(--accent-orange); }
.pg-home .hero p{ font-size:16px; line-height:1.65; max-width:44ch; margin-top:20px; }
.hero-actions{ margin-top:32px; }
.hero-actions .btn{ padding:13px 24px; }
.hero-stats{
  gap:40px; margin-top:44px; padding-top:22px;
  border-top:1px solid var(--border); max-width:520px;
}
.hero-stats div b{ font-family:'Inter',sans-serif; font-size:21px; font-weight:600; }
.hero-stats div span{ font-size:12px; }
.hero-badge{
  background:transparent; border-color:var(--border);
  color:var(--text-faint); font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; font-size:11px;
  -webkit-backdrop-filter:none; backdrop-filter:none;
}
.hero-badge svg{ color:var(--accent-orange); }
.hero-visual{
  background:transparent;
  border:0;
  border-radius:0;
}
.hero-visual::before{
  background-image:none;
  background:radial-gradient(circle at 50% 55%, rgba(255,107,26,.22), transparent 60%);
  opacity:1;
  filter:blur(30px);
  mask-image:none;
}
.hero-visual > img, .hero-visual > svg{ filter:drop-shadow(0 30px 40px rgba(0,0,0,.6)); }
.hero-visual > .hero-badge{
  /* центрируем без transform: его занимает входная анимация из fx.css */
  top:auto; bottom:12px; left:0; right:0; margin:0 auto; width:max-content;
  background:rgba(9,9,11,.7); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  white-space:nowrap;
}

/* ---------- Заголовки секций, поиск, фильтры ---------- */
.section-head{ margin-bottom:22px; }
.section-head h2, .about h2{ font-weight:700; font-size:22px; letter-spacing:-.02em; }
.search-wrap{ background:var(--bg-panel); border-color:var(--border); border-radius:999px; padding:10px 18px; }
.search-wrap:focus-within{ border-color:var(--border-strong); }
.chip{ background:transparent; border-color:var(--border); color:var(--text-dim); padding:7px 16px; }
.chip:hover{ color:var(--text); border-color:var(--border-strong); }
.chip.active{ background:var(--text); border-color:var(--text); color:var(--bg); }

/* ---------- Карточки каталога ---------- */
.catalog{ gap:16px; }
.item-card{
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
}
html .item-card:hover{ transform:none; border-color:var(--border-strong); box-shadow:none; }
.item-thumb.r-mil, .item-thumb.r-restricted, .item-thumb.r-classified,
.item-thumb.r-covert, .item-thumb.r-gold{ box-shadow:none; }
.item-thumb.r-mil{ background:radial-gradient(60% 55% at 50% 55%, #4b69ff38, transparent 70%); }
.item-thumb.r-restricted{ background:radial-gradient(60% 55% at 50% 55%, #8847ff38, transparent 70%); }
.item-thumb.r-classified{ background:radial-gradient(60% 55% at 50% 55%, #d32ce638, transparent 70%); }
.item-thumb.r-covert{ background:radial-gradient(60% 55% at 50% 55%, #eb4b4b38, transparent 70%); }
.item-thumb.r-gold{ background:radial-gradient(60% 55% at 50% 55%, #e4ae3938, transparent 70%); }
/* полоска редкости — тонкая линия, затухающая к краям */
.item-thumb::after{ height:1px; opacity:.9; }
.item-thumb.r-mil::after{ background:linear-gradient(90deg, transparent, #4b69ff, transparent); }
.item-thumb.r-restricted::after{ background:linear-gradient(90deg, transparent, #8847ff, transparent); }
.item-thumb.r-classified::after{ background:linear-gradient(90deg, transparent, #d32ce6, transparent); }
.item-thumb.r-covert::after{ background:linear-gradient(90deg, transparent, #eb4b4b, transparent); }
.item-thumb.r-gold::after{ background:linear-gradient(90deg, transparent, #e4ae39, transparent); }
.item-thumb img{ width:74%; height:74%; filter:drop-shadow(0 10px 16px rgba(0,0,0,.5)); transition:transform .3s ease; }
html .item-card:hover .item-thumb img{ transform:scale(1.04); filter:drop-shadow(0 10px 16px rgba(0,0,0,.5)); }
.item-tag{ background:rgba(0,0,0,.5); color:var(--text-dim); border-radius:999px; padding:3px 9px; font-weight:500; letter-spacing:0; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.item-tag.busy{ color:var(--accent-orange); }
.item-body{ padding:14px 16px 16px; gap:10px; }
.item-name{ font-size:12.5px; font-weight:500; color:var(--text-dim); }
.item-skin{ font-size:15px; font-weight:600; color:var(--text); }
.wear-bar{ height:3px; }
.price b{ font-size:16px; font-weight:600; }
.view3d-btn{ background:rgba(0,0,0,.5); color:var(--text); border-color:var(--border); border-radius:999px; }
.view3d-btn:hover{ background:var(--text); color:var(--bg); }
.request-bar{ background:transparent; border:1px dashed var(--border-strong); border-radius:var(--radius); }
.empty-state{ border-color:var(--border-strong); border-radius:var(--radius); }

/* ---------- Как это работает: единая сетка вместо отдельных плашек ---------- */
.steps{
  gap:1px;
  background:var(--border);
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
}
.step-card{ background:var(--bg-panel); border:0; border-radius:0; padding:26px 24px; }
html .step-card:hover{ transform:none; box-shadow:none; border-color:transparent; }
.step-num{ font-size:13px; opacity:1; margin-bottom:18px; }
.step-card h3{ font-size:15px; font-weight:600; }
.step-card p{ font-size:13.5px; line-height:1.6; }

/* ---------- Доверие, о сервисе, поддержка ---------- */
.trust-strip{ background:var(--bg-panel); border-color:var(--border); border-radius:var(--radius); }
.trust-item svg{ color:var(--accent-orange); }
.trust-item div b{ font-weight:600; }
.about{ color:var(--text-dim); }
.rentals-box, .support-box, .profile-header{ background:var(--bg-panel); border-color:var(--border); border-radius:var(--radius); }
html .support-box:hover{ transform:none; box-shadow:none; border-color:var(--border); }

/* ---------- Подвал ---------- */
footer{ border-top-color:var(--border); padding:32px 28px 40px; }
footer a:hover{ color:var(--text); }

/* ---------- Окна, формы, аренда ---------- */
.modal-overlay, .viewer-overlay{ background:rgba(0,0,0,.72); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.modal-box, .viewer-box{ background:var(--bg-panel); border-color:var(--border); border-radius:18px; box-shadow:0 30px 60px rgba(0,0,0,.6); }
.modal-box h3{ font-weight:700; letter-spacing:-.01em; }
.rent-hero{ background:radial-gradient(60% 60% at 50% 55%, rgba(255,107,26,.16), transparent 70%), var(--bg); border-radius:14px; }
.text-input, .text-area{ background:var(--bg); border-color:var(--border); border-radius:12px; }
.text-input:focus, .text-area:focus{ border-color:var(--border-strong); outline:none; }
.day-btn{ background:transparent; border-color:var(--border); border-radius:10px; color:var(--text-dim); }
.day-btn:hover{ color:var(--text); border-color:var(--border-strong); }
.day-btn.selected{ background:var(--text); border-color:var(--text); color:var(--bg); }
.day-btn.selected small{ color:var(--bg); }
.day-btn small{ color:var(--accent-green); }
.mode-btn{ background:transparent; border-color:var(--border); border-radius:12px; }
.mode-btn.selected{ border-color:var(--accent-orange); background:var(--accent-orange-dim); }
.rarity-chip, .float-chip{ background:transparent; border-color:var(--border); }
.view3d-inline{ background:var(--text); color:var(--bg); }
.window-note{ background:transparent; border-color:var(--border-strong); border-radius:12px; }
.cart-row{ background:transparent; border-color:var(--border); border-radius:12px; }
.rent-total b{ font-size:22px; }
.busy-box{ border-color:rgba(255,107,26,.35); background:rgba(255,107,26,.06); border-radius:14px; }
.consent-bar{ background:rgba(17,17,19,.92); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border-top-color:var(--border); }
.consent-bar a, .login-gate-box a{ color:var(--accent-orange); }

/* Статусы аренды — приглушённые */
.status-badge{ font-weight:600; }
.status-pending_delivery{ background:rgba(244,244,245,.08); color:var(--text-dim); }
.status-return_due{ background:var(--accent-orange-dim); color:var(--accent-orange); }

/* ---------- Профиль ---------- */
.pg-profile .hero{ background:var(--bg-panel); border-color:var(--border); border-radius:18px; }
.pg-profile .banner{ border-color:rgba(255,107,26,.35); background:rgba(255,107,26,.06); color:#ffd2b3; border-radius:14px; }

/* ---------- Анимации: спокойнее, без свечения и прыжков ----------
   fx.css подключается позже темы, поэтому здесь селекторы усилены префиксом html. */
html .fx-progress{ height:2px; background:var(--accent-orange); }
html .btn:hover{ transform:none; box-shadow:none; filter:none; }
html .btn:active{ transform:scale(.98); box-shadow:none; }
html .chip:hover, html .chip:active{ transform:none; }
html .logo:hover img{ transform:none; filter:none; }
html .hero-visual > img, html .hero-visual > svg{ animation:themeFloat 7s ease-in-out infinite; }
@keyframes themeFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-8px); } }
html .banner img{ transform:none; }
html .cw-fab{ animation:none; }
html .cw-fab:hover{ transform:scale(1.05); }

@media (max-width:640px){
  .pg-home .hero{ padding:28px 0 40px; gap:28px; }
  .hero-stats{ gap:24px; }
}

@media (prefers-reduced-motion:reduce){
  html .hero-visual > img, html .hero-visual > svg{ animation:none; }
}

/* ---------- Виджеты, которые вставляют свои стили из JS (gate, chat, reviews, ui, bell) ----------
   Их <style> добавляется на страницу позже темы, поэтому селекторы с префиксом html. */
html .gt-ov, html .rvm-ov, html .ui-ov{ background:rgba(0,0,0,.72); }
html .gt-box, html .rvm, html .ui-dlg, html .ui-toast{
  background:var(--bg-panel); border:1px solid var(--border); border-radius:20px;
  box-shadow:0 30px 60px rgba(0,0,0,.6);
}
html .gt-box::before{ display:none; }
html .gt-logo{ box-shadow:none; }
html .gt-pts li, html .rv-skin{ background:transparent; border-color:var(--border); }
html .gt-chk a, html .rv-more-t{ color:var(--accent-orange); }
html .gt-all{ color:var(--accent-orange); }
html .gt-chk input{ border-color:var(--border-strong); background:var(--bg); border-radius:6px; }
html .gt-chk input:checked{ background:var(--accent-orange); border-color:var(--accent-orange); }
html .gt-btn, html .ui-btn, html .rvm-ok, html .rvm-no{ border-radius:999px; }
html .gt-steam, html .ui-primary, html .rvm-ok{ background:var(--accent-orange); color:#140800; box-shadow:none; }
html .gt-steam:hover, html .ui-primary:hover, html .rvm-ok:hover{ background:var(--accent-orange-hover); }
html .gt-ghost, html .ui-ghost, html .rvm-no{ background:var(--bg-elevated); border-color:var(--border-strong) !important; color:var(--text); }
html .ui-danger{ background:#dc2626; box-shadow:none; }
html .gt-x, html .rvm-x{ background:transparent; border:1px solid var(--border); }

html .cw-fab{ background:var(--accent-orange); color:#140800; box-shadow:0 10px 30px rgba(0,0,0,.5); }
html .cw-panel{ background:var(--bg-panel); border-color:var(--border); border-radius:20px; box-shadow:0 30px 60px rgba(0,0,0,.6); }
html .cw-head{ background:var(--bg-panel); border-bottom-color:var(--border); }
html .cw-adm{ background:var(--bg-elevated); }
html .cw-me{ background:var(--accent-orange); color:#140800; }
html .cw-opt{ border-color:var(--border-strong); color:var(--text); border-radius:999px; }
html .cw-opt:hover{ border-color:var(--accent-orange); }

html .rv-card{ background:var(--bg-panel); border-color:var(--border); border-radius:var(--radius); }
html .rv-reply{ border-left-color:var(--accent-orange); background:rgba(255,107,26,.05); }
html .nb-item.unread{ background:rgba(255,107,26,.05); box-shadow:inset 2px 0 0 var(--accent-orange); }
html .ui-t-info .ui-ti, html .ui-d-info .ui-di{ background:rgba(244,244,245,.08); color:var(--text); }
html .ui-t-info .ui-tbar{ background:var(--text-dim); }

/* ---------- Мобильная версия (перекрываем mobile.css) ---------- */
@media (max-width:860px){
  html .mnav{ background:rgba(9,9,11,.92); border-top-color:var(--border); box-shadow:none; }
  html .mnav-i.on::before{ background:var(--accent-orange); box-shadow:none; }
  html .pg-home .topbar{ background:rgba(9,9,11,.85) !important; }
  html .pg-profile .topbar, html .pg-profile .tabs{ background:rgba(9,9,11,.9); }
  html .modal-overlay .modal-actions{ background:linear-gradient(180deg, rgba(17,17,19,.94), var(--bg-panel) 35%); border-top-color:var(--border); }
  html .pg-home .hero-stats div{ background:transparent; }
}

/* Агенты и другие предметы без износа — прячем пустую полоску износа */
.wear-row:has(.wear-label:empty){ display:none; }

/* ---------- Блок «Сдай свой скин» (#earn) и строка на первом экране ---------- */
/* «таблетка» под кнопками первого экрана: метка + короткий текст + стрелка, кликабельна целиком */
.hero-earn{
  display:inline-flex; align-items:center; gap:10px; margin-top:22px; max-width:100%;
  padding:5px 14px 5px 5px; border:1px solid var(--border-strong); border-radius:999px;
  background:var(--bg-panel); color:var(--text); font-size:13.5px; line-height:1.3;
  transition:border-color .2s, background .2s;
}
.hero-earn:hover{ border-color:rgba(255,107,26,.55); background:var(--bg-elevated); }
.hero-earn .he-tag{ flex-shrink:0; padding:5px 11px; border-radius:999px; background:var(--accent-orange-dim); color:var(--accent-orange); font-size:12px; font-weight:600; }
.hero-earn .he-text b{ color:var(--accent-orange); font-weight:700; }
.hero-earn .he-arrow{ flex-shrink:0; color:var(--text-faint); transition:transform .2s, color .2s; }
.hero-earn:hover .he-arrow{ transform:translateX(3px); color:var(--accent-orange); }
.pg-home .hero-earn{ animation:fxUp .9s .42s cubic-bezier(.2,.8,.2,1) both; }
@media (max-width:520px){ .hero-earn{ border-radius:18px; align-items:flex-start; } .hero-earn .he-arrow{ display:none; } }

/* картинка первого экрана */
html .hero-visual > img.hero-skin{ width:82%; height:82%; object-fit:contain; }

/* Первый экран: рука в перчатке с керамбитом выезжает из правого края экрана (install-hero.js).
   Обёртка прижата к краю окна: 4px отступ хиро + 28px отступ main + 68px заходит за край —
   запас, чтобы при покачивании и осмотре ножа обрез рукава не показывался в окне;
   а на экранах шире 1810px ещё и половина пустого места, которое остаётся по бокам main.
   Уже 820px блок .hero-visual скрыт стилями главной, поэтому мобильных правил нет. */
html:has(body.pg-home), html body.pg-home{ overflow-x:clip; }
html .pg-home .hero-visual{ overflow:visible; }
/* рука может заходить на текст — текст остаётся поверх неё */
html .pg-home .hero > div:first-child{ position:relative; z-index:1; }
html .pg-home .hero-visual > .hero-badge{ top:calc(50% - 250px); bottom:auto; z-index:1; }
.hero-hand{
  position:absolute; top:56%; z-index:0; width:clamp(480px, 44vw, 860px); aspect-ratio:688/468;
  right:calc(-60px - max(0px, (100vw - 1810px) / 2));
  transform:translateY(-50%); pointer-events:none;
}
/* На компьютере первый экран начинается сразу под шапкой, на телефоне баннер остаётся вместо руки. */
@media (min-width:821px){
  .pg-home main > .banner:first-child{ display:none; }
  html .pg-home main{ padding-top:12px; }
  html .pg-home .hero{ padding:12px 4px 56px; gap:24px; }
  html .pg-home .hero h1{ font-size:clamp(38px, 4.1vw, 64px); font-weight:800; line-height:1.04; }
}
.hero-hand .hh-in{
  height:100%; transform-origin:100% 75%;
  transition:transform .6s cubic-bezier(.2,.8,.2,1);
  animation:handIn 1.3s .5s cubic-bezier(.16,.84,.3,1) backwards;
}
.hero-hand img{
  display:block; width:100%; height:100%; transform-origin:100% 75%;
  filter:drop-shadow(-18px 26px 34px rgba(0,0,0,.6));
  animation:handIdle 5.5s 1.8s ease-in-out infinite;
}
/* как осмотр ножа в игре */
.hero-visual:hover .hero-hand .hh-in{ transform:rotate(-4deg); }
@keyframes handIn{ from{ transform:translateX(110%) rotate(18deg); } to{ transform:none; } }
@keyframes handIdle{ 0%,100%{ transform:translateY(0) rotate(0); } 50%{ transform:translateY(-8px) rotate(-1.8deg); } }
@media (prefers-reduced-motion:reduce){ .hero-hand .hh-in, .hero-hand img{ animation:none; } }

.earn{
  margin:0 0 52px; padding:40px 36px;
  border:1px solid var(--border); border-radius:20px;
  background:radial-gradient(70% 90% at 100% 0%, rgba(255,107,26,.10), transparent 60%), var(--bg-panel);
  scroll-margin-top:84px;
}
.earn-head{ max-width:640px; margin-bottom:28px; }
.earn-eyebrow{ display:inline-block; font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--text-faint); margin-bottom:12px; }
.earn-head h2{ font-family:'Unbounded',sans-serif; font-size:clamp(22px,3vw,30px); line-height:1.2; letter-spacing:-.02em; }
.earn-head p{ margin-top:12px; color:var(--text-dim); font-size:15px; line-height:1.65; }
.earn-head [data-lessor-share], .earn-steps [data-lessor-share]{ color:var(--accent-orange); font-weight:700; }
.earn .earn-steps{ margin-bottom:24px; }
.earn .earn-steps .step-card{ background:var(--bg); }
.earn-cta{ display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; }
.earn-example{ font-size:13.5px; color:var(--text-dim); max-width:560px; line-height:1.55; }
.earn-example b{ color:var(--text); }
.earn-cta .btn{ padding:13px 26px; }
@media (max-width:640px){ .earn{ padding:26px 18px; border-radius:16px; } .earn-cta .btn{ width:100%; } }