/* /static_v2/profile.css */

/* ===== TOKENS (общие) ===== */
:root{
  --color-primary:#0076FF; --color-accent:#8E58FF;
  --color-success:#32D583; --color-warning:#FFC107; --color-danger:#FF4D4F;

  --bg-canvas:#0B0E1A; --bg-surface:#12131A; --bg-elevated:#0F111A; --bg-card:#1A1C25;

  --text-primary:#fff; --text-secondary:#C7CBD1; --text-muted:#9AA0A6;

  --stroke:#3B3B3B; --divider:#2A2D36;

  --radius-lg:16px; --radius-md:12px; --radius-sm:8px; --radius-pill:100px;

  --shadow-sm:0 2px 8px rgba(0,0,0,.24); --shadow-md:0 8px 24px rgba(0,0,0,.32);

  --space-4:4px; --space-8:8px; --space-12:12px; --space-16:16px; --space-20:20px; --space-24:24px; --space-32:32px;

  --font-sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --font-weight-bold:700; --font-weight-extra:800;

  --app-width:390px; --hero-w:343px; --hero-h:191px; --card-w:106px; --card-h:146px; --grid-gap:12px;

  --topbar-h:64px;
  --tabbar-h:57px;
}

/* ===== База страницы ===== */
*{box-sizing:border-box}
html,body{height:100%}
body.profile-page{
  margin:0;background:var(--bg-canvas);color:var(--text-primary);
  font-family:var(--font-sans);
  -webkit-user-select:none;user-select:none;overflow-x:hidden;

  /* запас снизу, чтобы контент не упирался в таббар (≈20% экрана) */
  padding-bottom:calc(20vh + var(--tabbar-h) + env(safe-area-inset-bottom,0px));

  /* сдвиг контента ниже фиксированного топбара */
  padding-top:var(--topbar-h);
}
:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}

/* ===== TOPBAR (1:1 как на главной) ===== */
/* Совместимость: можно использовать .c-topbar / .c-topbar__actions ИЛИ ваши top-panel / topbar-actions */
.c-topbar,
.top-panel{
  position:fixed;inset:0 0 auto 0;height:var(--topbar-h);
  background:var(--bg-elevated);display:flex;align-items:center;justify-content:space-between;
  gap:var(--space-8);padding:0 var(--space-16);box-shadow:var(--shadow-sm);z-index:10;
  --balance-h:42px;
}
.c-topbar__logo .logo,
.logo-container .logo{height:24px;display:block}

.c-topbar__actions,
.topbar-actions{display:flex;align-items:center;gap:10px}

/* Кнопки — как на главной */
.c-btn{display:inline-flex;align-items:center;justify-content:center;font-weight:var(--font-weight-bold);border-radius:9px;border:0;cursor:pointer;transition:.18s ease;line-height:1}
.c-btn--primary{height:35px;min-width:116px;padding:0 14px;background:var(--color-primary);color:#fff;font-size:16px}
.c-btn--primary:hover{filter:brightness(1.05)}
.c-btn--primary:active{transform:translateY(1px)}

/* Кнопка «плюс» */
.c-btn--plus{
  width:var(--balance-h);height:var(--balance-h);border-radius:12px;background:var(--color-primary);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;border:0;cursor:pointer
}
.c-btn--plus svg{display:block}
.c-btn--plus:active{transform:translateY(1px)}

/* Баланс */
.c-balance{
  display:flex;align-items:center;gap:8px;background:rgba(0,0,0,.25);
  border:1px solid rgba(255,255,255,.6);
  border-radius:10px;padding:6px 10px;height:var(--balance-h);
}
.c-balance .bal-icon{width:22px;height:22px}
.c-balance__value{min-width:48px;text-align:right;font-size:16px;font-weight:var(--font-weight-bold)}

/* Кнопка входа, если не авторизован (визуально — как .c-btn--primary) */
.login-btn{height:35px;padding:0 14px;border-radius:9px;background:var(--color-primary);border:0;color:#fff;font-weight:var(--font-weight-bold)}

/* ===== Обёртка и заголовок ===== */
.l-shell{width:min(100% - 32px, var(--app-width));margin:0 auto;position:relative}
.page-title{
  width:min(100% - 0px, var(--app-width));
  margin:20px auto 14px;
  text-align:center;
  font-size:40px;line-height:1.1;font-weight:var(--font-weight-extra);letter-spacing:.4px;
}

/* ===== Сетка статистики ===== */
.stats-grid{
  width:min(100% - 0px, var(--app-width));
  margin:0 auto;
  display:grid;
  grid-template-columns: 1fr 1.3fr;
  gap:12px;
}
.stat-card{
  border-radius:16px;padding:16px;
  background:rgba(0,0,0,.35);
  border:1px solid var(--stroke);
  min-height:64px;display:flex;align-items:center;justify-content:flex-start;
}
.stat-label{color:var(--text-secondary);font-weight:var(--font-weight-bold)}
.stat-value{
  background:rgba(6,8,16,.9);
  border:1px solid rgba(0,118,255,.55);
  box-shadow:var(--shadow-sm);
}
.stat-line{line-height:1.25}
.stat-card.stat-value{display:flex;gap:8px;flex-direction:column;justify-content:center}

/* Чуть шире на больших экранах */
@media (min-width:420px){
  .stats-grid{grid-template-columns: 1fr 1.4fr;}
}

/* ===== Нижний отступ-«заглушка» (если используете отдельным блоком) ===== */
.page-end-spacer{height:20vh}

/* ===== TABBAR (из общего набора) ===== */
.c-tabbar{
  position:fixed;left:0;right:0;bottom:0;width:100%;
  height:var(--tabbar-h);background:#020410;border-top:1px solid var(--stroke);
  display:flex;align-items:center;justify-content:space-around;z-index:9
}
.c-tabbar__item{
  color:#fff;text-decoration:none;display:flex;flex-direction:column;align-items:center;gap:4px;
  font-size:10px;font-weight:300;opacity:.95
}
.c-tabbar__item.is-active{opacity:1}
.c-tabbar__item svg{display:block;width:22px;height:22px;transform:translateY(1px)}
.c-tabbar__item svg *, .c-tabbar__item svg path, .c-tabbar__item svg line, .c-tabbar__item svg circle, .c-tabbar__item svg rect{
  stroke-width:2 !important;vector-effect:non-scaling-stroke
}
@media (min-width:400px){ .c-tabbar__item svg{width:24px;height:24px} }

/* ===== Toast (верх, под топбаром) — если используете уведомления на странице ===== */
#toast-container{
  position:fixed;top:calc(var(--topbar-h) + 8px);left:50%;transform:translateX(-50%);
  width:min(100% - 32px, var(--app-width));max-width:var(--app-width);
  z-index:40;
}
.toast{
  width:100%;background:rgba(8,10,18,.94);border:1px solid var(--stroke);color:#fff;
  padding:12px 14px;border-radius:12px;margin-top:10px;box-shadow:var(--shadow-sm);text-align:left;position:relative
}
.toast::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;border-radius:12px 0 0 12px}
.toast-info{border-color:rgba(0,118,255,.55);background:linear-gradient(0deg, rgba(0,118,255,.10), rgba(0,118,255,.10)), rgba(8,10,18,.94)}
.toast-info::before{background:var(--color-primary)}
.toast-success{border-color:rgba(50,213,131,.55);background:linear-gradient(0deg, rgba(50,213,131,.10), rgba(50,213,131,.10)), rgba(8,10,18,.94)}
.toast-success::before{background:var(--color-success)}
.toast-error{border-color:rgba(255,77,79,.55);background:linear-gradient(0deg, rgba(255,77,79,.10), rgba(255,77,79,.10)), rgba(8,10,18,.94)}
.toast-error::before{background:var(--color-danger)}