:root{
  --bg:#0b0b0c;
  --fg:#f4f4f5;
  --muted:#a1a1aa;      /* zinc-400 */
  --line:#232326;
  --line-strong:#2f2f33;
  --card:#111113;
  --radius:12px;

  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:20px; --space-7:32px; --space-8:40px;
}

*{ box-sizing:border-box; }

body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background:var(--bg);
  color:var(--fg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Containers & auth layout */
.container{ max-width: 1120px; margin: 0 auto; padding: 0 var(--space-5); }
.auth{ min-height: auto; display:flex; align-items:center; justify-content:center; padding: 24px var(--space-5); }

/* Layout */
.app{
  display:grid;
  grid-template-columns: 1fr 240px; /* правая панель */
  min-height:100svh;
}
.app.app--admin{
  grid-template-columns: 1fr 260px; /* контент + правая панель */
}

.sidebar{
  border-right:1px solid var(--line);
  padding: var(--space-6) var(--space-4); /* меньше отступы */
  background: var(--card);
}
.sidebar .brand{
  font-weight:700;
  font-size:20px;
  letter-spacing:.5px;
  margin-bottom: var(--space-7);
}
.nav{
  display:grid;
  gap: var(--space-2);
}
.nav a{
  display:flex; align-items:center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3); /* компактнее */
  border-radius: 8px;
  color: var(--fg);
  text-decoration:none;
  border:1px solid transparent;
}
.nav a:hover{ border-color: var(--line-strong); background:rgba(255,255,255,.05); }
.nav a.active{ border-color: var(--fg); }

.main{ padding: var(--space-6); } /* было 32px */
.topbar{
  display:flex;
  flex-direction: column;
  align-items:center;
  justify-content:center;
  gap: 8px;
  margin-bottom: var(--space-5);
}
.topbar h1{
  text-align: center;
  width: 100%;
}
.brand-banner{ font-size:22px; font-weight:800; letter-spacing:.06em; margin: 0 0 var(--space-6); text-align:center; }
.brand-banner .shimmer{
  display:inline-block;
  background: linear-gradient(90deg, #f6f6f7, #a1a1aa, #f6f6f7);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: banner-gradient 3s ease-in-out infinite;
}
@keyframes banner-gradient{
  0%{ background-position: 0% 50%; }
  50%{ background-position: 100% 50%; }
  100%{ background-position: 0% 50%; }
}

/* Surfaces */
.card{
  background: var(--card);
  border:1px solid var(--line);
  border-radius: 10px;
  padding: var(--space-4); /* компактнее */
  box-shadow: 0 8px 24px rgba(0,0,0,.22);
}
.card.auth-card{ width: 40%; max-width: 480px; }

.grid{ display:grid; gap: var(--space-4); } /* меньше зазоры */
/* Вспомогательный отступ для секций под баннером */
.section-gap{ margin-top: var(--space-6); }
.grid.kpi{ grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 1200px){ .grid.kpi{ grid-template-columns: repeat(2, minmax(0,1fr)); } }

@media (max-width: 960px){
  .app{ grid-template-columns: 1fr; }
  .sidebar{ position:sticky; top:0; z-index:10; display:flex; align-items:center; justify-content:space-between; }
  .grid.kpi{ grid-template-columns: 1fr; }
  .app.app--admin{ grid-template-columns: 1fr; }
  .sidebar--right{ position: static; height: auto; }
}

/* Typography */
h1{ font-size: 20px; margin: 0 0 var(--space-3); } /* компактнее заголовки */
h2{ font-size:16px; margin:0 0 var(--space-2); color:inherit; }
.subtle{ color: var(--muted); font-size:13px; }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap: var(--space-2);
  border:1px solid var(--fg);
  background:transparent; color:var(--fg);
  padding: 8px 12px;
  border-radius: 10px;
  cursor:pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.btn:hover{ background:var(--fg); color:var(--bg); }
.btn-ghost{ border-color:transparent; }
.btn-ghost:hover{ background:rgba(255,255,255,.08); }
.btn-primary{ background:#eaeaf0; color: var(--bg); border-color:#eaeaf0; }
/* При наведении кнопка "загорается" белым, фон страницы не меняется */
.btn-primary:hover{
  background:#ffffff;
  color:#0b0b0c;
  border-color:#ffffff;
  box-shadow: 0 0 0 4px rgba(255,255,255,0.12);
}
.btn-block{ width:100%; }

/* Danger (красная) кнопка — для выхода из аккаунта */
.btn-danger{ border-color:#ef4444; color:#ef4444; }
.btn-danger:hover{ background:#ef4444; border-color:#ef4444; color:#0b0b0c; }

/* Inputs & forms */
.input, input, select, textarea{
  width:100%;
  padding:12px 14px;
  border-radius:10px;
  border:1px solid var(--line-strong);
  background:#0f0f12; color:var(--fg);
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.input::placeholder, input::placeholder{ color: var(--muted); }
.input:focus, input:focus, select:focus, textarea:focus{
  border-color: var(--fg);
  box-shadow: 0 0 0 3px rgba(255,255,255,.06) inset;
  background:#111115;
}

/* Textarea UX: аккуратная высота, без ручного ресайза, автоперенос */
textarea{
  min-height: 64px; /* изначально ниже, будет расти по мере ввода */
  line-height: 1.55;
  resize: none;              /* убираем уголок-резайзер */
  overflow: auto;            /* скролл если очень много текста */
  white-space: pre-wrap;     /* сохраняем переносы */
}

/* Подпись/счётчик под полем */
.field-hint{ margin-top: 6px; font-size: 12px; color: var(--muted); display:flex; justify-content:space-between; }
.field-hint .counter{ font-variant-numeric: tabular-nums; }

/* Убираем стрелочки у числовых полей ввода */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type=number] {
    appearance: textfield;
    -moz-appearance: textfield;
}


.form{ display:grid; gap: var(--space-3); }

/* Utility: hide elements marked as hidden */
.hidden{ display:none !important; }

/* Увеличим вертикальные отступы только в форме выплат */
#payout-form{ row-gap: var(--space-6); }

/* Уменьшаем зазор между текстом label и полем ввода */
.form label {
  display: grid;
  gap: 10px;
  margin: 0;
}
.form label > :where(input, select, textarea, .input) {
  margin: 0;
}

/* Table */
.table{ width:100%; border-collapse: collapse; font-size:14px; }
.table th, .table td{
  border-bottom:1px solid var(--line);
  padding: 10px 8px; text-align:left; white-space: nowrap;
}
.table th{ color: var(--muted); font-weight:600; text-transform: uppercase; font-size:12px; letter-spacing:.04em; }
.table tr:hover td{ background:rgba(255,255,255,.05); }


/* Chart.js frame */
/* Перенесли рамку на контейнер, чтобы canvas не искажался по box-sizing */
.chart-wrap{ 
  height: 383px; 
  width: 100%;
  position: relative; 
  border:1px solid var(--line); 
  border-radius: 8px; 
  padding: 10px; /* больше «воздуха» вокруг графика */
}
.chart-wrap canvas{
  width:100% !important;
  height:100% !important;
  display:block;
}
@media (max-width: 960px){ .chart-wrap{ height: 320px; } }

/* Удалены переопределения осей через CSS — управляем из Chart.js опциями */

/* Top-right tools */
.tools{ display:flex; gap: var(--space-3); align-items:center; }

/* Brand logo (login) */
.brand-logo{
  display:flex;
  justify-content:center;
  align-items:center;
  gap: 0.35ch;
  font-weight:800;
  font-size:28px;
  letter-spacing:.06em;
  margin-top: 50px;
  margin-bottom: 40px;
  color: var(--fg);
}
.brand-logo .muted{
  color: var(--muted);
  font-weight:700;
  letter-spacing:.02em;
}
@media (max-width: 520px){
  .brand-logo{ font-size: 24px; margin-top: 100px; margin-bottom: 24px; }
}

/* Error states for inputs */
input.error {
  border: 1px solid #e74c3c;
  box-shadow: 0 0 0 2px rgba(231,76,60,0.25);
}

.error-text {
  color: #e74c3c;
  font-size: 12px;
  margin-top: -3px;
  margin-left: 2px;
  display: block;
}

/* Autofill background fix */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px #0f0f12 inset !important;
  -webkit-text-fill-color: var(--fg) !important;
  caret-color: var(--fg);
  transition: background-color 9999s ease-in-out 0s;
}

/* Badges */
.badge{ display:inline-block; padding:2px 8px; border:1px solid var(--line-strong); border-radius:999px; font-size:12px; line-height:1.6; }
.badge.ok{ border-color:#16a34a; color:#16a34a; }
.badge.warn{ border-color:#f59e0b; color:#f59e0b; }

.sidebar--right{
  border-left:1px solid var(--line);
  border-right:none;
  padding: var(--space-6) var(--space-4);
  position: sticky;
  top: 0;
  height: 100svh;
  overflow:auto;
  background: var(--card);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.sidebar__spacer{ flex: 1; }
.sidebar__back{
  text-decoration: none;
  display:inline-flex; align-items:center; justify-content:center;
  gap: var(--space-2);
  padding: 10px 14px;
  border-radius: 10px;
  border:1px solid var(--fg);
  background: transparent;
  color: var(--fg) !important; /* на случай visited */
}
.sidebar__back:visited{ color: var(--fg) !important; }
.sidebar__back:hover{
  background: var(--fg);
  color: var(--bg) !important;
}
.cards-3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width: 1200px){ .cards-3{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 720px){ .cards-3{ grid-template-columns: 1fr; } }

.m-card{
  display:flex;
  align-items:flex-start;
  gap:12px;
  min-width: 0;           /* важно для ellipsis внутри flex */
}

.m-main{
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:flex-start;
  min-width:0;
  flex:1 1 auto;
  height:100%;
}
.m-ava{ width:56px; height:56px; border-radius:50%; background:#0f0f12; border:1px solid var(--line-strong); display:flex; align-items:center; justify-content:center; font-weight:700; }
.m-meta{
  display:flex;
  flex-direction:column;
  gap:6px;
  flex:1 1 auto; /* занимает всё доступное место, выталкивая кнопки вниз */
  min-width:0;
}
.m-meta .row{
  display:flex;
  align-items:center;
  gap: 8px;
  min-width: 0;               /* нужно, чтобы ellipsis работал */
  overflow: hidden;
}

/* по умолчанию держим строки компактными */
.m-meta .row{
  flex-wrap: nowrap;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.m-meta .row-top{ gap: 6px; }
.m-meta .row-top .m-nick{
  /* не растягиваем ник на всю строку — чтобы steam шёл рядом */
  flex: 0 1 auto;
  max-width: 50%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.m-meta .row-top .m-steam{
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
  overflow: visible;
  text-overflow: initial;
  white-space: nowrap;
}

/* Базовые защиты от вылезания текста */
.m-nick,
.m-steam{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.m-meta .row > strong,
.m-meta .row > span{
  min-width: 0;
}

/* Балансы: разрешаем переноситься на узких карточках */
.m-meta .row:nth-child(2){
  flex-wrap: wrap;
  white-space: normal;
  row-gap: 6px;
}
@media (max-width: 900px){
  /* делаем карточку более "узкой" по контенту */
  .m-card{ gap: 10px; }
  .m-ava{ width: 48px; height: 48px; }

  /* верхняя строка: даём больше места под steam */
  .m-meta .row-top .m-nick{ max-width: 55%; }
  .m-meta .row-top .m-steam{ font-size: 12px; opacity: .85; }

  /* кнопки: допускаем перенос, чтобы не вылезали */
  .m-actions{ flex-wrap: wrap; }
  .m-actions .m-action-btn{ flex: 1 1 48%; white-space: nowrap; }
}
.m-meta .row-bal strong{ flex:0 0 auto; }
.m-meta .row-ref .m-ref{ flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; }

.m-actions{
  margin-top:auto;   /* прижимаем кнопки к низу карточки */
  display:flex;
  gap:12px;
  align-items:stretch;
  width:100%;
}

/* Mammoth card: растягиваем внутренний flex по высоте карточки */
.m-card{
  align-items: stretch;
}
.m-main{
  width: 100%;
}
.m-actions{
  padding-top: 12px;
}
.m-actions .m-action-btn{
  flex: 1 1 0;
  min-width: 0;
  font-size: 13px;
  padding: 10px 10px;
  white-space: nowrap;
}

/* пары label → value выравниваем стабильнее */
.m-meta .row .kv{ flex:0 0 auto; opacity:.8; }
.m-meta .row .kv + span{ flex:0 0 auto; max-width: 180px; overflow:hidden; text-overflow:ellipsis; }
/* длинный ник в первой строке — не растягиваем на всю ширину */
.m-meta .row:first-child > strong:first-child{
  flex: 0 1 auto;
  max-width: 60%;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* значения после меток (steam, реферал) — позволяем сжиматься и усекать */
.m-meta .row > span:not(.kv){
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- FORCE GAP OVERRIDE только для верхней строки --- */
.m-meta .row-top{
  column-gap: 4px !important; /* чуть больше */
  gap: 4px !important;
}
.m-meta .row-top .m-nick,
.m-meta .row-top .kv,
.m-meta .row-top .m-steam{ margin: 0 !important; }

/* Скрываем метку "steam:" в первой строке и ставим компактный разделитель */
.m-meta .row-top .kv{ display:none; }
.m-meta .row-top .m-steam::before{
  content: "·";
  margin: 0 4px;
  opacity: .6;
  max-width: 10ch;
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

/* ===== Modal (generic) ===== */
.modal{ position: fixed; inset:0; display:grid; place-items:center; z-index: 100; }
.modal.hidden{ display:none !important; }
.modal__backdrop{ position:absolute; inset:0; background: rgba(0,0,0,.55); backdrop-filter: blur(2px); }
.modal__dialog{ position:relative; width:min(560px, 92vw); background: var(--card); border:1px solid var(--line); border-radius: var(--radius); box-shadow: 0 24px 80px rgba(0,0,0,.45); }
.modal__header{ display:flex; align-items:center; justify-content:space-between; padding: 14px 16px; border-bottom:1px solid var(--line); }
.modal__body{ padding:16px; color: var(--fg); }
.modal__footer{ display:flex; justify-content:flex-end; gap:12px; padding:14px 16px; border-top:1px solid var(--line); }

/* Close (✕) button: фиксируем ховер — никакой инверсии цвета */
.modal__header [data-modal-close]{
  width: 36px; height: 36px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius: 10px;
  color: var(--fg);
  border-color: transparent;
}
.modal__header [data-modal-close]:hover{
  background: rgba(255,255,255,.08);
  color: var(--fg);
  border-color: transparent;
}

/* Кнопка "Отправить заявку" как у "Создать заявку" */
.submit-button {
    background-color: transparent;
    border: 1px solid #fff;
    color: #fff;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 15px;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}

.submit-button:hover {
    background-color: #fff;
    color: #0b0b0c;
}

/* Custom select arrow styling (более явная стрелка и выше специфичность) */
select,
.input select,
.form select{
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-repeat: no-repeat !important;
  /* сероватая стрелка по умолчанию */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-position: right 12px center !important;
  background-size: 16px 16px !important;
  padding-right: 42px !important; /* оставляем место под иконку */
  line-height: 1.4;
  min-height: 44px; /* чтобы иконка не прилипала к краю */
}

/* при фокусе делаем стрелку белой */
select:focus,
.input select:focus,
.form select:focus{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-position: right 12px center !important;
}

/* ===== Admin page layout tweaks ===== */
.app.app--single{
  grid-template-columns: 1fr; /* на админке нет правой панели */
}
.page{
  max-width: none;   /* растягиваем на всю ширину */
  width: 100%;
  margin: 0;
  padding: 0 var(--space-6); /* немного больше внутренний отступ по краям */
}
/* KPI сетка на админке */
.grid.admin-kpi{
  grid-template-columns: repeat(4, minmax(0,1fr));
}
@media (max-width: 1280px){
  .grid.admin-kpi{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 960px){
  .grid.admin-kpi{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
  .grid.admin-kpi{ grid-template-columns: 1fr; }
}
/* Две колонки: лог слева (2fr) и быстрые действия справа (1fr) */

.grid.admin-two{
  grid-template-columns: 1fr;
}
@media (max-width: 960px){
  .grid.admin-two{ grid-template-columns: 1fr; }
}

/* === Fix: logs tabs text color stays visible on hover/active === */
.logs-tabs .btn-ghost,
.logs-tabs .btn-ghost:hover,
.logs-tabs .btn-ghost:focus{
  color:#fff !important;
}

.logs-tabs .btn-ghost:hover,
.logs-tabs .btn-ghost:focus{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.35);
}

/* Smoothen only the logs tabs buttons (scoped) */
#log-tab-users.btn,
#log-tab-admins.btn{
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

/* Контрастный ховер для табов-«кнопок» в логах */
button.btn.btn-ghost:hover,
button.btn.btn-ghost:focus,
a.btn.btn-ghost:hover,
a.btn.btn-ghost:focus {
  color: #fff !important;            /* белый текст при наведении */
  border-color: rgba(255,255,255,.6); /* немного ярче рамка */
}

/* Dim a mammoth card if status is false */
.card.is-down {
  opacity: 0.4;
  filter: grayscale(0.15);
  transition: opacity .2s ease;
}
/* Make buttons inactive inside dimmed cards */
.card.is-down .btn {
  pointer-events: none;
  opacity: 0.4;
  cursor: not-allowed;
}


.error-text {
  color: #ff5a5f;
  display: block;
  font-size: 0.9em;
}

/* ===== Accessible focus rings for all form controls (login + modals) ===== */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
select,
textarea,
.input {
  transition: box-shadow .15s ease, outline-color .15s ease, border-color .15s ease;
}

/* Базовый красный контур для полей с ошибкой (без фокуса) */
.input.is-error,
input.error,
select.input.is-error,
textarea.input.is-error {
  border-color: #ef4444 !important;
}
.btn-loader {
  width: 16px; height: 16px;
  border: 2px solid #fff;
  border-top-color: transparent;
  border-radius: 50%;
  display: inline-block;
  vertical-align: middle;
  margin-left: 8px;
  animation: spin 0.6s linear infinite;
}
.hidden { display: none; }

@keyframes spin {
  to { transform: rotate(360deg); }
}

.btn.loading .btn-loader {
  animation: spin 0.7s linear infinite !important;
  border-color: currentColor !important;
  border-top-color: transparent !important;
  display: inline-block !important;
  will-change: transform;
}

/* Убираем курсор загрузки при наведении */
.btn.loading {
  cursor: default !important;
}

/* Профиль: блок с балансом и кнопкой поддержки */
.profile-extra{
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.profile-extra-row{
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
}
.profile-extra-label{
  color: var(--muted);
}
.profile-extra-value{
  font-weight: 600;
}
.profile-support-btn{
  flex: 1 1 0;
  min-width: 0;
  margin-top: 0;
  border-color:#3b82f6;
  color:#3b82f6;
}
.profile-support-btn:hover{
  background:#3b82f6;
  color:#0b0b0c;
  border-color:#3b82f6;
}

/* Современный профиль */
/* Современный, улучшенный, более читаемый профиль */
.profile-summary{
  display:flex;
  flex-direction:column;
  gap:22px;
  padding:10px 4px;
}

.profile-summary-header{
  display:flex;
  align-items:center;
  gap:20px;
}


.profile-summary-main{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.profile-summary-name{
  font-size:22px;
  font-weight:700;
  letter-spacing:.01em;
}

.profile-summary-sub{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  font-size:14px;
  color:var(--muted);
}

.profile-tag{
  padding:3px 10px;
  border-radius:999px;
  border:1px solid var(--line-strong);
  background:rgba(255,255,255,.04);
  font-size:13px;
}

.profile-tag--muted{
  opacity:.7;
}

/* Блок характеристик */
 .profile-summary-body{
   display:grid;
   grid-template-columns:minmax(0,1fr) auto;
   gap:10px 20px;
   font-size:16px;
   padding:0 0 4px;
 }

 .profile-summary-row{
   display:flex;
   justify-content:space-between;
   align-items:center;
 }

 .profile-summary-label{
   color:var(--muted);
   font-size:15px;
 }

 .profile-summary-value{
   font-weight:600;
   font-size:17px;
   letter-spacing:.01em;
 }

 /* код воркера — на отдельной строке под подписью */
 .profile-summary-row--code{
   flex-direction:column;
   align-items:flex-start;
   gap:4px;
 }
 .profile-summary-row--code .profile-summary-label{
   font-size:14px;
 }
 .profile-summary-row--code .profile-summary-value{
   font-size:16px;
 }

/* Нижние кнопки */
.profile-summary-actions{
  display:flex;
  flex-wrap:nowrap;
  gap:12px;
  margin-top:2px;
  justify-content: center;
}

.profile-summary-actions .btn{
  flex:1 1 0;
  min-width:0;
  padding:10px 12px; /* уменьшенная высота и ширина */
  font-size:14px;    /* меньший текст */
  border-radius:12px;
}

/* Кнопка поддержки — акцентированная */
.profile-support-btn{
  flex:1 1 0;
  min-width:0;
  border-color:#3b82f6;
  color:#3b82f6;
  font-weight:600;
}
.profile-support-btn{
  padding:10px 12px !important;
  font-size:14px !important;
}
.profile-support-btn:hover{
  background:#3b82f6;
  color:#0b0b0c;
}

/* Мобильные правки */
@media (max-width: 640px){
  .profile-summary-header{
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
  }

  .profile-summary-actions{
    flex-direction:column;
  }

  .profile-avatar{
    width:64px;
    height:64px;
    font-size:22px;
  }

  .profile-summary-name{
    font-size:20px;
  }

  .profile-summary-body{
    grid-template-columns:1fr;
  }
}

.profile-chips{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content: center;
}

.profile-chip{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 16px;
  border-radius:12px;
  border:1px solid var(--line-strong);
  background:rgba(255,255,255,.03);
  min-height:56px;
  max-width:100%;
}

/* Убираем фон и рамку у контейнера профиля */
#view-profile .card{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  padding:0 !important;
}

#view-profile{
  max-width: 840px;
  margin: 0 auto;
  padding-top: 12px;
}

/* Чипы-плашки: разные режимы отображения */
.profile-chip{
  position: relative;
}

.profile-chip--metric,
.profile-chip--code{
  flex-direction: column;
  align-items: flex-start;
  padding-top: 12px;
  padding-bottom: 12px;
}

.profile-chip-label{
  color: var(--muted);
  font-size: 13px;
}

.profile-chip--metric .profile-chip-value,
.profile-chip--code .profile-chip-value{
  font-size: 18px;
}

.profile-chip-value--muted{
  opacity: 0.6;
  font-weight: 400;
}


.profile-chip--hero{
  padding-right:20px;
}

.profile-chip-main{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.profile-chip-title{
  font-size:17px;
  font-weight:600;
}


.profile-chip-value{
  font-weight:600;
  font-size:15px;
}

.profile-chip--wide{
}

.profile-chip-email{
  opacity:.9;
}

.profile-chip-sep{
  opacity:.6;
  margin:0 6px;
}

.profile-chip--code .profile-chip-value{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  letter-spacing:.08em;
}

@media (max-width: 640px){
  .profile-chips{
    flex-direction:column;
  }
}
.profile-chip--metric{
  padding-left: 16px;
}
.profile-chip--code{
  padding-left: 16px;
}

/* Сессия бота */
.bot-card{
  margin-bottom: 16px;
}

.bot-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}

.bot-header-main{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.bot-title{
  font-size:18px;
  font-weight:600;
}

.bot-sub{
  font-size:13px;
  color:var(--muted);
}

.bot-metrics{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
}

.bot-metric{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
}

.bot-metric-label{
  font-size:12px;
  color:var(--muted);
}

.bot-metric-value{
  font-size:16px;
  font-weight:600;
}

@media (max-width: 640px){
  .bot-header{
    align-items:flex-start;
  }
}
/* Inventory modal scrollbar – subtle & non-overlapping */
#inventory-grid {
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: rgba(255,255,255,.18) transparent;
}

#inventory-grid::-webkit-scrollbar {
  width: 10px;
}

#inventory-grid::-webkit-scrollbar-track {
  background: transparent;
}

#inventory-grid::-webkit-scrollbar-thumb {
  background-color: rgba(255,255,255,.16);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: content-box;
}

#inventory-grid::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255,255,255,.28);
}
/* Safeguard: очень длинные строки не ломают карточку */
.m-steam{
  overflow-wrap: anywhere;
  word-break: break-word;
}