/* ===== THEME (desktop-first) ===== */

/* Палитра */
:root{
  --bg-1:#0b0f16;
  --bg-2:#111834;
  --teal:#1c3a4d;
  --panel:#0c1221;
  --surface:#0d1426;
  --edge:#ffffff16;
  --edge-soft:#ffffff10;

  --accent:#8b5cf6;   /* фиолетовый */
  --accent-2:#7c3aed; /* чуть темнее */
  --accent-3:#22d3ee; /* голубой акцент */

  --text:#e8ecff;
  --muted:#a7b1d6;

  --good:#3be08f;
  --warn:#f59e0b;
  --bad:#ef4444;

  --radius:18px;
  --gap:24px;
}

/* Фон и типографика */
body{
  color:var(--text);
  background:
    radial-gradient(1200px 900px at 85% -10%, #2a1b5f 0%, var(--bg-2) 45%, var(--bg-1) 70%),
    radial-gradient(900px 600px at -10% 20%, #15355266 0%, transparent 60%);
}

/* ===== Topbar / Brand ===== */
.top{
  background:linear-gradient(180deg, rgba(11,15,22,.92), rgba(11,15,22,0));
  border-bottom:1px solid var(--edge-soft);
  backdrop-filter: blur(6px);
}
.brand__logo{
  background: conic-gradient(from 180deg, var(--accent), #9f7aea, #60a5fa, #22d3ee, var(--accent));
  box-shadow: 0 12px 28px rgba(139,92,246,.35);
}
.brand__title{ letter-spacing:.3px; text-shadow:0 1px 0 #000; }
.brand__right .btn{ border-color:var(--edge); }

/* Поиск + телефон + CTA */
.input{
  border:1px solid var(--edge);
  background:#0b1120;
  color:var(--text);
  outline:none;
  transition:.15s ease;
}
.input:focus{
  border-color:#9f7aea88;
  box-shadow:0 0 0 3px #8b5cf622;
}
.btn{
  border:1px solid var(--edge);
  background:#ffffff0a;
  color:var(--text);
  font-weight:800;
  border-radius:999px;
  transition:.15s ease;
}
.btn:hover{ background:#ffffff14; transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }
.btn--primary{
  border:0;
  background:linear-gradient(135deg, var(--accent), #a78bfa);
  box-shadow:0 10px 28px rgba(139,92,246,.35);
}
.btn--outline{
  background:transparent;
  border:1px solid var(--edge);
}
.btn--ghost{
  background:#0f172a;
  border:1px solid var(--edge-soft);
}
.chip{
  background:#0b1120;
  border:1px solid var(--edge);
  color:#cbd5ff;
  border-radius:999px;
}
.nav-top a{ color:#d9d6ff; opacity:.9 }
.nav-top a:hover{ opacity:1 }

/* ===== Sidebar ===== */
.sidebar__nav{ gap:12px }
.s-item{
  background:#0b1120;
  border:1px solid var(--edge);
  border-radius:16px;
  color:#dce2ff;
  transition:.18s ease;
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
}
.s-item .s-item__icon{
  width:28px; height:28px; border-radius:10px;
  display:grid; place-items:center;
  background:linear-gradient(135deg,#1a223b,#0e152a);
  border:1px solid var(--edge-soft);
}
.s-item:hover{ transform:translateY(-1px); box-shadow:0 10px 24px rgba(0,0,0,.45); }
.s-item.is-active{
  background:linear-gradient(135deg, #8b5cf61a, #8b5cf60a);
  border-color:#8b5cf655;
  box-shadow:
    inset 0 0 0 1px #8b5cf650,
    0 10px 24px rgba(139,92,246,.25);
}

/* ===== Cards ===== */
.card{
  background:
    linear-gradient(180deg, rgba(11,16,34,.96), rgba(11,15,22,.96)),
    radial-gradient(600px 220px at 110% -10%, #7c3aed22, transparent);
  border:1px solid var(--edge);
  border-radius: var(--radius);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 24px 60px rgba(0,0,0,.55);
}
.card + .card{ /* чуть больше воздуха между вертикальными блоками на узких рядах */
  margin-top:0;
}
.card__title{
  color:#b7bfdc;
  font-weight:800;
  letter-spacing:.2px;
  margin:0 0 12px;
}

/* Карточка менеджера */
.card--manager{ padding:22px }
.manager__avatar{
  background:
    linear-gradient(135deg,#1f2937,#0f172a);
  border:1px solid var(--edge);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
  position:relative; overflow:hidden;
}
.manager__avatar::after{
  content:"";
  position:absolute; inset:-40% -40% auto auto;
  background:conic-gradient(from 0deg, #22d3ee, #8b5cf6, #22d3ee);
  filter:blur(16px); opacity:.25;
}
.manager__name{ font-weight:900; font-size:18px }
.manager__contacts span{ color:var(--muted) }

/* KPI */
.kpi__big{ color:var(--good); font-size:32px }
.kpi__unit{ color:#9fb1ff }
.kpi__sub{ color:var(--muted) }

/* Tags */
.tag{
  background:#0b1120;
  border:1px solid var(--edge);
  color:#cbd5ff;
  border-radius:999px;
}

/* Таблица */
.table{
  border-spacing:0 12px; /* «пилюли» */
}
.table thead th{
  color:#9aa3c7; font-weight:800; letter-spacing:.2px; background:transparent; border:none;
}
.table tbody tr td{
  background:#0b1120;
  border:1px solid var(--edge);
  border-radius:12px;
  box-shadow: 0 10px 22px rgba(0,0,0,.35);
}
.table tbody tr:hover td{
  border-color:#8b5cf644;
  box-shadow: 0 14px 26px rgba(139,92,246,.18);
}

/* Сетка / отступы */
.layout{ padding: var(--gap) 0 var(--gap) }
.layout__main{ gap: var(--gap) }
.grid{ gap: var(--gap) }

/* Скролл (красиво, не мешает) */
*::-webkit-scrollbar{ height:10px; width:10px }
*::-webkit-scrollbar-thumb{ background:#1a2540; border-radius:10px; border:2px solid #0b0f16 }
*::-webkit-scrollbar-thumb:hover{ background:#253259 }

/* Мелочи */
.auth__form{ background:#0e1526; border-color:var(--edge); box-shadow:0 24px 60px rgba(0,0,0,.55) }
.auth__form input{ background:#0b1120; border-color:var(--edge) }
.auth__form .btn--primary{ background:linear-gradient(135deg,var(--accent),#a78bfa) }

/* Тонкая анимация для кнопок/линков */
a, .btn, .s-item{ transition:background .15s ease, transform .12s ease, box-shadow .2s ease, border-color .15s ease; }

/* extra tiny form polish */
.btn-sm{ padding:6px 10px; font-size:12px }
#editForm{ grid-template-columns: repeat(6, minmax(120px,1fr)); gap:12px }
@media (max-width:1200px){ #editForm{ grid-template-columns: 1fr 1fr; } }
#flt{ display:flex; gap:10px; flex-wrap:wrap }
#minersTbl .input{ height:34px }

/* tabs */
.tabs .tabbtn{ border:1px solid var(--edge); background:#0b1120; color:#dfe3ff; border-radius:999px; padding:8px 14px; cursor:pointer }
.tabs .tabbtn.active{ background:linear-gradient(135deg, var(--accent), #a78bfa); border:0; box-shadow:0 8px 24px rgba(139,92,246,.35) }
.tabsec.hidden{ display:none }
#balTbl td code{ font-size:12px }

/* events table small polish */
#evtTbl tbody tr td:nth-child(3){ font-weight:800 }
#evtTbl tbody tr td:nth-child(4){ opacity:.85 }
#minersList label.chip{ user-select:none; cursor:pointer }
#minersList input{ margin-right:6px }

/* simple modal */
.modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.3);backdrop-filter:blur(2px);z-index:50}
.modal[hidden]{display:none}
.modal__body{background:var(--c-surface);padding:20px;border-radius:16px;box-shadow:0 10px 40px rgba(0,0,0,.4);min-width:340px}
.modal.open .modal__body{animation:pop .18s ease}
@keyframes pop{from{transform:scale(.96);opacity:.6}to{transform:scale(1);opacity:1}}
.btn.sm{padding:6px 10px;font-size:.9rem}
.kpi--xl .kpi__value{font-size:2rem}

/* helper */
.table-like input.input{min-width:240px}
.table .btn{padding:6px 10px}
#stratumBox{font-weight:600}
.table .nm{min-width:220px}

/* ==== Sidebar (новые классы) ==== */
.sidebar{min-width:260px;max-width:280px;padding:8px 10px}
.sidebar__brand{font-weight:700;font-size:18px;margin:6px 6px 14px;color:var(--c-text,#e8ebff);opacity:.9}
.sidebar__nav{display:flex;flex-direction:column;gap:12px}

.sidebar__link{
  display:flex;align-items:center;gap:12px;
  padding:14px 16px;border-radius:16px;text-decoration:none;
  color:var(--c-text,#e8ebff);
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 6px 24px rgba(0,0,0,.25);
  transition:background .15s ease, transform .12s ease, box-shadow .2s ease, border-color .2s ease;
}
.sidebar__link:hover{
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.03));
  transform:translateY(-1px);
  border-color:rgba(255,255,255,.14);
}
.sidebar__link--active{
  background:linear-gradient(135deg,rgba(147,85,255,.22),rgba(63,154,255,.18));
  border-color:rgba(138,73,247,.6);
  box-shadow:
    0 0 0 1px rgba(138,73,247,.25),
    0 10px 32px rgba(138,73,247,.25),
    inset 0 1px 0 rgba(255,255,255,.18);
}

.sidebar__icon{
  width:28px;height:28px;display:grid;place-items:center;
  font-size:18px;line-height:1;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  border-radius:10px;
  backdrop-filter:blur(2px);
}
.sidebar__text{white-space:nowrap}

@media (max-width: 1100px){
  .sidebar{position:sticky;top:72px}
}
.chip--green{background:rgba(57,201,76,.18); border:1px solid rgba(57,201,76,.35)}
.chip--red{background:rgba(255,86,86,.15); border:1px solid rgba(255,86,86,.35)}
.chip--gray{background:rgba(180,190,200,.10); border:1px solid rgba(180,190,200,.25)}
.spacer{flex:1}
.modal .input{margin:6px 0}
.btn.sm{padding:6px 10px;font-size:.9rem}
/* --- subtabs (вкладки) --- */
.subtabs{display:flex;gap:10px;margin:-4px 0 14px}
.subtabs a{padding:10px 14px;border-radius:14px;text-decoration:none;color:#e8ebff;border:1px solid rgba(255,255,255,.06);background:rgba(108, 92, 231, .06)}
.subtabs a:hover{border-color:rgba(255,255,255,.18)}
.subtabs a.active{background:linear-gradient(135deg,rgba(147,85,255,.22),rgba(63,154,255,.18));border-color:rgba(138,73,247,.6);box-shadow:0 8px 24px rgba(138,73,247,.25)}
/* --- плитки балансов --- */
.balance-strip{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0 16px}
.balance-tile{min-width:150px;flex:0 0 auto;padding:12px 14px;border-radius:14px;border:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.03)}
.balance-tile .coin{opacity:.8;font-size:.9rem}
.balance-tile .amt{font-weight:700;font-size:1.15rem}
/* --- сегменты (переключатель способа) --- */
.seg{display:inline-flex;border-radius:12px;border:1px solid rgba(255,255,255,.12);overflow:hidden}
.seg button{padding:10px 14px;border:0;background:transparent;color:#e8ebff}
.seg button.active{background:rgba(255,255,255,.08)}
/* --- копирование --- */
.copy{display:inline-flex;gap:8px;align-items:center}
.copy .btn{padding:6px 10px}
/* --- сетка форм --- */
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(280px,1fr));gap:12px}
@media (max-width:1100px){ .form-grid{grid-template-columns:1fr} }
/* --- тумблер --- */
.switch{position:relative;width:46px;height:26px;display:inline-block}
.switch input{display:none}
.switch .track{position:absolute;inset:0;background:rgba(255,255,255,.15);border-radius:13px;transition:.2s}
.switch .thumb{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:.2s}
.switch input:checked + .track{background:linear-gradient(90deg,#7f5cff,#5ac8ff)}
.switch input:checked + .track .thumb{left:23px}

/* miners table cosmetics */
#tbl .chip{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);padding:.15rem .5rem;border-radius:999px}

/* coupon table */
#cpTbl td:nth-child(5){font-weight:700}

/* summary kpis spacing */
#sumKPI .kpi__value{ font-size:22px }

/* admin */
#admTabs a.active{ background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1) }
.adm-pane .form-grid label{ min-width:240px }

/* summary kpis */
#sumKPI .kpi__value{ font-size:22px }

/* --- Subtabs (горизонтальные "таб-кнопки") --- */
.subtabs{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0 14px}
.subtabs a{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;
  border-radius:14px;border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);text-decoration:none}
.subtabs a:hover{background:rgba(255,255,255,.06)}
.subtabs a.active{border-color:#9b6cff66;box-shadow:0 0 0 2px rgba(155,108,255,.18) inset}

/* --- Плитки баланса (фикс "прыжков") --- */
.balance-strip{display:flex;flex-wrap:wrap;gap:12px}
.balance-tile{flex:1 1 190px;min-width:190px;max-width:230px;padding:12px;border-radius:14px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  display:flex;flex-direction:column;justify-content:space-between;min-height:90px;
  transition:transform .15s}
.balance-tile:hover{transform:translateY(-2px)}
.balance-tile .coin{opacity:.8}
.balance-tile .amt{font-size:18px;font-weight:700;word-break:break-all}

/* KPI на сводке — чутка крупнее */
#sumKPI .kpi__value{font-size:22px}


/* admin header */
.admin-shell .topbar{display:flex;align-items:center;justify-content:space-between;margin:8px 0 12px}
.admin-shell .topbar .title{font-weight:700;letter-spacing:.2px}
.admin-shell .logout{padding:8px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.1);text-decoration:none}
.admin-shell .logout:hover{background:rgba(255,255,255,.05)}

/* better file input */
.input-file{display:inline-block;padding:10px 12px;border-radius:12px;border:1px dashed rgba(255,255,255,.2);cursor:pointer}
.input-file input{display:none}

/* fix admin subtabs height/spacing */
.subtabs{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0 14px}
.subtabs a{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:14px;
  border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.04);text-decoration:none;min-width:150px}
.subtabs a.active{border-color:#9b6cff66;box-shadow:0 0 0 2px rgba(155,108,255,.18) inset}

/* balance tiles stable */
.balance-strip{display:flex;flex-wrap:wrap;gap:12px}
.balance-tile{flex:1 1 190px;min-width:190px;max-width:230px;padding:12px;border-radius:14px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  min-height:90px;display:flex;flex-direction:column;justify-content:space-between}
.balance-tile .coin{opacity:.8}
.balance-tile .amt{font-size:18px;font-weight:700;word-break:break-all}

/* summary KPI size */
#sumKPI .kpi__value{font-size:22px}

/* --- финансы: стабильные плитки на grid --- */
.balance-strip{ display:grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap:12px }
.balance-tile{ min-width:auto; max-width:none }

/* --- Финансы: табы в один ряд --- */
.fin-wrap .subtabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.fin-wrap .subtabs a{min-width:120px}
/* support lists */
#sList .chip, #supList .chip{ background:rgba(255,255,255,.03); }
/* support lists look */
#sList .chip, #supList .chip{ background:rgba(255,255,255,.03); }

/* === Green theme components === */
.card{
  background: var(--g-card) !important;
  border: 1px solid var(--g-border) !important;
  box-shadow: var(--g-glow) !important;
  backdrop-filter: blur(6px);
}
.card__title{ color: var(--g-ink); }

/* buttons */
.btn{
  color: var(--g-ink);
  background: rgba(34,197,94,.08);
  border:1px solid var(--g-border);
  border-radius:14px;
  transition: transform .08s ease, box-shadow .2s ease, background .2s ease;
}
.btn:hover{ background: rgba(108, 92, 231, .12); box-shadow: var(--g-glow); transform: translateY(-1px); }
.btn:active{ transform: translateY(0); }
.btn--primary{
  background: linear-gradient(135deg, var(--g-accent) 0%, var(--g-accent-3) 100%) !important;
  border-color: rgba(0,0,0,.2) !important;
  color:#062312 !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.25);
}
.btn--primary:hover{ filter: brightness(1.05); box-shadow: 0 8px 20px rgba(34,197,94,.25); }
.btn--outline{
  background: transparent !important;
  border-color: var(--g-accent-2) !important;
  color: var(--g-ink) !important;
}
.btn.xs{ padding:6px 10px; border-radius:10px }

/* inputs/selects */
.input, select.input, textarea.input{
  color: var(--g-ink);
  background: rgba(3, 40, 28, .45);
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
}
.input:focus, select.input:focus, textarea.input:focus{
  outline: none;
  border-color: var(--g-accent-2);
  box-shadow: 0 0 0 3px rgba(34,197,94,.15);
}

/* chips */
.chip{
  background: rgba(34,197,94,.07);
  border:1px solid var(--g-border);
  color: var(--g-ink);
}

/* tables */
.table thead th{
  background: rgba(34,197,94,.08);
  border-bottom: 1px solid var(--g-border);
  color: var(--g-ink);
}
.table tbody tr{ border-bottom: 1px solid rgba(255,255,255,.06); }
.table tbody tr:hover{ background: rgba(108, 92, 231, .06); }

/* subtabs (вкладки) */
.subtabs a{
  background: rgba(108, 92, 231, .06);
  border:1px solid var(--g-border);
  border-radius: 14px;
}
.subtabs a.active{
  box-shadow: 0 0 0 2px rgba(34,197,94,.22) inset, 0 10px 24px rgba(108, 92, 231, .12);
  border-color: rgba(108, 92, 231, .45);
}

/* balance tiles */
.balance-strip{ display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap:12px }
.balance-tile{
  background: var(--g-card-strong);
  border:1px solid var(--g-border);
  border-radius:14px;
  box-shadow: var(--g-glow);
}
.balance-tile .coin{ color: var(--g-sub); }

/* sidebar (если есть отдельная панель) */
.sidebar{
  background: rgba(3, 40, 28, .6) !important;
  border-right: 1px solid var(--g-border) !important;
}
.sidebar a{ color: var(--g-ink) }
.sidebar a.active{ color:#062312; background: linear-gradient(135deg, var(--g-accent-2), var(--g-accent)); }

/* admin topbar/logout */
.topbar .title{ color: var(--g-ink); }
.logout{
  color: var(--g-ink) !important;
  border:1px solid var(--g-border) !important;
  background: rgba(108, 92, 231, .06) !important;
}
.logout:hover{ background: rgba(108, 92, 231, .12) !important; }

/* support lists slight tint */
#sList .chip, #supList .chip{ background: rgba(108, 92, 231, .06); }

/* events table emphasize level/type a bit */
#evtTbl tbody tr td:nth-child(3){ font-weight:700; color: var(--g-accent-2); }
#evtTbl tbody tr td:nth-child(4){ opacity:.9 }

/* === Green theme: table body fill (zebra + hover) === */
.table{
  --g-row:#17162a;      /* глубокий зелёный */
  --g-row2:#1c1833;     /* чередующаяся строка */
  --g-rowH:rgba(108, 92, 231, .12); /* hover */
}

/* фон ячеек тела таблицы */
.table tbody tr > th,
.table tbody tr > td{
  background: var(--g-row) !important;
  border-color: var(--g-border) !important;
}

/* зебра */
.table tbody tr:nth-child(odd) > th,
.table tbody tr:nth-child(odd) > td{
  background: var(--g-row2) !important;
}

/* hover */
.table tbody tr:hover > th,
.table tbody tr:hover > td{
  background: var(--g-rowH) !important;
}

/* шапка таблицы — чуть ярче */
.table thead th{
  background: linear-gradient(180deg, rgba(34,197,94,.16), rgba(34,197,94,.08)) !important;
  border-color: var(--g-border) !important;
}

/* элементы управления внутри таблиц в зелёной теме */
.table td .input,
.table td select.input,
.table td .btn{
  background: rgba(3,40,28,.6) !important;
  border-color: var(--g-border) !important;
  color: var(--g-ink) !important;
}

/* --- sidebar safe styles --- */
.menu{display:flex;flex-direction:column;gap:14px}
.menu__item{display:flex;align-items:center;gap:10px;padding:14px 16px;border-radius:16px;background:rgba(0,0,0,.22);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);transition:all .15s}
.menu__item:hover{transform:translateY(-1px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 6px 20px rgba(0,0,0,.25)}
.menu__item--active{outline:2px solid rgba(108, 92, 231, .45);box-shadow:0 0 0 8px rgba(108, 92, 231, .12)}
.menu__ico{width:26px;text-align:center;opacity:.9}
.menu__txt{font-weight:600}

/* ==== APP HEADER (кабинет) ==== */
.app-top{
  position: sticky; top:0; z-index:1000;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 20px;
  background: rgba(10,40,24,.78);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
}
.app-top__brand{display:flex; align-items:center; gap:12px}
.app-top__title{font-weight:800; font-size:18px; color:#e6ffe8; text-decoration:none}
.app-top__actions{display:flex; gap:10px}

/* погасить «старые» шапки, если их вдруг где-то включили */
header.top:not(.app-top), .topbar, .navbar, .site-top { display:none !important; }

/* ==== APP HEADER (кабинет) ==== */
.app-top{
  position: sticky; top:0; z-index:1000;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 20px;
  background: rgba(10,40,24,.78);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
}
.app-top__brand{display:flex; align-items:center; gap:12px}
.app-top__title{font-weight:800; font-size:18px; color:#e6ffe8; text-decoration:none}
.app-top__actions{display:flex; gap:10px}

/* погасить «старые» шапки, если вдруг где-то подгрузились */
header.top:not(.app-top), .topbar, .navbar, .site-top { display:none !important; }

/* --- sidebar safe styles (на месте для целостности) --- */
.menu{display:flex;flex-direction:column;gap:14px}
.menu__item{display:flex;align-items:center;gap:10px;padding:14px 16px;border-radius:16px;background:rgba(0,0,0,.22);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);transition:all .15s}
.menu__item:hover{transform:translateY(-1px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 6px 20px rgba(0,0,0,.25)}
.menu__item--active{outline:2px solid rgba(108, 92, 231, .45);box-shadow:0 0 0 8px rgba(108, 92, 231, .12)}
.menu__ico{width:26px;text-align:center;opacity:.9}
.menu__txt{font-weight:600}

/* === Green Accent Overrides === */
:root{
  --accent: #6c5ce7;   /* green-500 */
  --accent-600:    #6c5ce7;
  --accent-700:    #15803d;
  --accent-300:    #86efac;
  --ring:          rgba(108, 92, 231, .45);
  --ring-soft:     rgba(108, 92, 231, .12);
}

.btn,
.btn:focus{outline:none}
.btn--primary{
  background: linear-gradient(180deg,var(--accent) 0%, var(--accent-600) 100%) !important;
  box-shadow: 0 8px 24px rgba(34,197,94,.25) !important;
}
.btn--outline{border-color: var(--accent-300) !important; color: var(--accent-300) !important}
.btn--outline:hover{background: rgba(34,197,94,.08) !important}

.menu__item--active{
  outline: 2px solid var(--ring) !important;
  box-shadow: 0 0 0 8px var(--ring-soft) !important;
}

.card{
  border: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 10px 30px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.04);
}
.card .card__title{color:#dfffe8}

.chip--ok{background: rgba(108, 92, 231, .12); color:#b8f7c8; border:1px solid rgba(34,197,94,.35)}
.chip--warn{background: rgba(250,204,21,.10); color:#fde68a; border:1px solid rgba(250,204,21,.32)}
.chip--bad{background: rgba(239,68,68,.10); color:#fecaca; border:1px solid rgba(239,68,68,.32)}

/* grid helpers for summary */
.grid{display:grid; gap:16px}
@media (min-width: 1100px){
  .grid--2{grid-template-columns: 1fr 1fr;}
}

/* temp nowrap helper */
.temp-wrap{white-space:nowrap}

/* --- quick fixes --- */
.btn{ white-space:nowrap; }
.btn-row{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.pill, .chip { line-height: 28px; }

/* подравниваем «°C» в сводке */
.kpi__row .pill--temp, .pill--temp { display:inline-flex; align-items:center; gap:4px; }
.pill--temp .deg { font-weight:700; }


/* -------- header polish ---------- */
.top .brand__title { white-space:nowrap }
.top__actions, .top .right {
  display:flex; gap:10px; align-items:center;
}
.top__actions .btn,
.top .right .btn {
  padding:10px 16px; line-height:1; border-radius:14px;
  white-space:nowrap;
}
/* не даём кнопке прыгать на новую строку */
@media (max-width: 560px){
  .top__actions, .top .right { gap:8px }
  .top__actions .btn, .top .right .btn { padding:9px 14px; font-size:14px }
}

/* --------- mobile: общие правки --------- */
@media (max-width: 560px){
  body.app { padding-bottom: 68px; }   /* место под нижнее меню */
  .btn { white-space: nowrap; }
  .row, .kpi__row { gap:10px }
  .card__title { font-size:16px }

  /* аккуратные чипы/значки, чтобы °C не “уплывал” */
  .chip { display:inline-flex; align-items:center; gap:6px; line-height:1; }

  /* низовое меню без вертикального скролла */
  .mnav, .mobile-nav, .tabbar {
    position:fixed; left:0; right:0; bottom:0;
    height:68px; display:flex; justify-content:space-around; align-items:center;
    backdrop-filter:saturate(180%) blur(8px);
    background:rgba(8,40,20,.65);
    z-index:1000;
  }
}

/* --------- mobile: miners table -> cards --------- */
#minersTbl { width:100% }
@media (max-width: 560px){
  #minersTbl thead { display:none; }
  #minersTbl tr{
    display:grid;
    grid-template-columns: 1fr auto;   /* слева данные, справа статус/температура, ниже кнопки */
    gap:6px;
    padding:10px 12px;
    border-radius:14px;
    background: rgba(13,64,36,.6);
    box-shadow: 0 0 0 1px rgba(120,255,170,.08) inset;
    margin-bottom:12px;
  }
  #minersTbl td { display:block; padding:4px 0; border:0 }
  #minersTbl td:last-child{
    grid-column:1 / -1;               /* ACTIONS на всю ширину */
  }
  /* Кнопки действий в одну строку */
  #minersTbl td:last-child .btn{
    display:inline-flex; min-width:0; flex:1 1 auto;
    justify-content:center; margin-right:8px; margin-bottom:0;
  }
  #minersTbl td:last-child .btn:last-child{ margin-right:0 }
}

/* --------- mobile: любые кнопки-столбики выпрямляем --------- */
@media (max-width: 560px){
  .actions, .table .actions, .fin-actions, .profile-actions{
    display:flex; gap:8px; flex-wrap:nowrap;
  }
  .actions .btn, .table .actions .btn, .fin-actions .btn, .profile-actions .btn{
    flex:1 1 auto; min-width:0;
  }
}

/* --------- фиксим “перенос” текста на кнопках --------- */
.btn { overflow:hidden; text-overflow:ellipsis }
.kpi .chip, .kpi__chip{ display:inline-flex; align-items:center; gap:6px; padding:6px 10px }

/* guard */
}

/* ==== MOBILE POLISH PACK ==== */
@media (max-width:768px){
  .top .btn { font-size:14px; padding:8px 14px; white-space:nowrap }  /* поддержка не обрезается */
  .brand__title { font-size:22px }

  /* компактные карточки и чипы */
  .card { padding:14px }
  .chip, .kpi__chip { display:inline-flex; align-items:center; gap:6px; padding:6px 10px }
  .chip small, .kpi__chip small, .chip sup { opacity:.8; line-height:1 }

  /* универсальный "таблица -> карточки" без правки PHP */
  table.table.responsive { display:block; width:100% }
  .table.responsive thead { display:none }
  .table.responsive tbody { display:block }
  .table.responsive tr { display:block; margin:10px 0; border:1px solid rgba(255,255,255,.06); border-radius:14px; overflow:hidden; background:rgba(0,0,0,.12) }
  .table.responsive td { display:flex; justify-content:space-between; gap:12px; padding:10px 12px; border:0; border-bottom:1px solid rgba(255,255,255,.06) }
  .table.responsive td:last-child { border-bottom:0 }
  .table.responsive td::before { content:attr(data-label); opacity:.7 }

  /* блок действий у майнеров: 2 ряда по 2 кнопки */
  .miner-actions { display:flex; flex-wrap:wrap; gap:8px; padding:8px 12px }
  .miner-actions .btn { flex:1 0 calc(50% - 8px); text-align:center; white-space:nowrap }
}

/* не даём длинным кнопкам рваться на 2 строки на любых экранах */
.btn { white-space:nowrap }

/* аккуратный вывод значений/единиц в чипах */
.chip .val, .kpi__chip .val { font-variant-numeric: tabular-nums }
.chip sup, .kpi__chip sup { font-size:.8em; top:-.2em; position:relative }
/* --- Sidebar footer --- */
.sidebar__foot{
  margin: 16px 14px 18px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
  text-align: center;
  line-height: 1.35;
}
.sidebar__foot .foot-brand{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  letter-spacing: .2px;
  color: #e9ffef;
}
.sidebar__foot .foot-brand::before{
  content:"";
  width: 18px; height: 18px;
  border-radius: 6px;
  background: conic-gradient(#6cf, #7f5, #6cf);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.08);
}
.sidebar__foot small, .sidebar__foot div:last-child{
  display:block;
  margin-top: 4px;
  font-size: 12.5px;
  color: rgba(255,255,255,.68);
}

/* На мобильных футер сайдбара не нужен */
@media (max-width: 991px){
  .sidebar__foot{ display:none; }
}

/* ==== OVERRIDES: графит/тёмно-фиолетовый ==== */
:root{
  --mh-bg:           #0f1116;   /* графитовый фон */
  --mh-panel:        #141723;   /* панели/карточки */
  --mh-panel-2:      #171a28;
  --mh-border:       #2a2d3e;
  --mh-text:         #e6e8ef;
  --mh-text-dim:     #a9aec4;

  /* фиолетовый акцент как у "Оплатить" */
  --mh-accent:       #6c5ce7;
  --mh-accent-700:   #5748c8;
  --mh-accent-800:   #4a3db2;
}

/* Фон и базовая типографика */
html, body{ background: var(--mh-bg) !important; color: var(--mh-text); }
a{ color: var(--mh-accent); }
a:hover{ color: var(--mh-accent-700); }

/* Хедер/топбар + кнопки в нём */
.header, .topbar, header, .navbar{
  background: linear-gradient(180deg, #111320 0%, #0e1018 100%) !important;
  border-bottom: 1px solid var(--mh-border) !important;
}
.header .btn, .topbar .btn, .navbar .btn{
  background: linear-gradient(180deg, var(--mh-accent) 0%, var(--mh-accent-700) 100%) !important;
  border: 1px solid var(--mh-accent-800) !important;
  color: #fff !important;
}

/* Карточки/панели/таблицы */
.card, .panel, .box, .table-wrapper, .content .box,
.table, .table thead th, .table td, .table th{
  background-color: var(--mh-panel) !important;
  border-color: var(--mh-border) !important;
  color: var(--mh-text);
}
.table thead th{ background: var(--mh-panel-2) !important; }

/* Кнопки (все варианты) */
.btn, button, .button, a.btn{
  border-radius: 12px !important;
  border: 1px solid var(--mh-accent-800) !important;
  color: #e9ecff;
}
.btn-primary, .btn-success, .btn-confirm, .btn-pay,
button.primary, a.btn-primary{
  background: linear-gradient(180deg, var(--mh-accent) 0%, var(--mh-accent-700) 100%) !important;
  border-color: var(--mh-accent-800) !important;
  color:#fff !important;
}
.btn:hover, .btn-primary:hover{
  filter: brightness(1.06);
}
/* Убираем зелёные обводки/успех */
.btn-outline, .btn-outline-success, .btn-success, .badge-success, .label-success{
  border-color: var(--mh-accent-800) !important;
  color: var(--mh-accent) !important;
  background: transparent !important;
}

/* Активный пункт сайдбара и акценты */
.sidebar .menu-item.active, .sidebar .menu-item:focus{
  outline: 0;
  box-shadow: 0 0 0 2px rgba(108,92,231,.3) inset !important;
  border-color: var(--mh-accent-800) !important;
}
.sidebar .menu-item .icon,
.sidebar .menu-item.active, .sidebar .menu-item:hover{
  color: var(--mh-accent) !important;
}

/* Отступ сверху для всех страниц — от хедера */
main, .content, .container, .page, .page-content{
  margin-top: 16px !important;
}

/* Профиль — базовая косметика без изменения PHP-разметки */
h1,h2,h3,h4{
  color: #f0f1ff;
}
.content h1, .content h2{
  margin: 6px 0 14px 0;
}
.content .box + .box{ margin-top: 12px; }
.content .box .row{ align-items: center; }
.content .box .row > div{ padding: 8px 10px; }

/* === OVERRIDES: все «зелёные» кнопки/бейджи -> фиолетовые === */
.btn-success, .btn.btn-success, a.btn-success, button.btn-success,
.btn-green, .button-success, .button-green,
.header .btn-success, .header .btn-outline-success, .header .btn-green,
.topbar .btn-success, .topbar .btn-outline-success, .topbar .btn-green,
.btn-outline-success, .btn-outline-green,
.badge-success, .label-success, .tag-success, .chip-success, .pill-success,
.status-success, .status-ok, .status-green {
  background: linear-gradient(180deg, var(--mh-accent) 0%, var(--mh-accent-700) 100%) !important;
  border-color: var(--mh-accent-800) !important;
  color: #fff !important;
}
.btn-outline-success, .btn-outline-green{
  background: transparent !important;
  color: var(--mh-accent) !important;
  border-color: var(--mh-accent-800) !important;
}
.btn-success:focus, .btn-green:focus, .btn-outline-success:focus, .btn-outline-green:focus{
  box-shadow: 0 0 0 3px rgba(108,92,231,.35) !important;
}

/* === Profile page polish (общие селекторы без правки PHP) === */
/* Контейнеры-инфоблоки */
.content .profile-header, .content .contract, .content .tariff, .content .payment-box{
  background: var(--mh-panel) !important;
  border: 1px solid var(--mh-border) !important;
  border-radius: 14px;
  padding: 12px 14px;
}
/* Заголовки */
h1,h2,h3,h4{ color:#f0f1ff; }
.content h1, .content h2{ margin: 6px 0 14px; }

/* Список майнеров — карточками (работает на любом <ol> внутри .content) */
.content ol{
  list-style: none;
  margin: 16px 0 0 0;
  padding: 0;
  counter-reset: idx;
}
.content ol > li{
  position: relative;
  background: var(--mh-panel);
  border: 1px solid var(--mh-border);
  border-radius: 12px;
  padding: 12px 12px 10px 48px;
  margin: 10px 0;
  color: var(--mh-text);
}
.content ol > li::before{
  counter-increment: idx;
  content: counter(idx) ".";
  position: absolute;
  left: 14px; top: 12px;
  color: var(--mh-accent);
  font-weight: 700;
}
/* Если внутри элемента есть .row — делаем 2 колонки на десктопе */
.content ol > li .row{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
}
.content ol > li .row > div{
  background: var(--mh-panel-2);
  border-radius: 10px;
  padding: 8px 10px;
}

/* Единый вид кнопок на странице профиля */
.content .btn{ padding: 8px 14px; font-weight: 600; border-radius:12px; }

/* === THEME OVERRIDES ($ts): graphite + dark-purple === */
:root{
  --accent:#6c5ce7;
  --accent-600:#5748c8;
  --accent-300:#968df0;
  --bg:#0f1118;
  --bg-2:#121420;
  --border:#26263a;
  --text:#e7e7fb;
  --muted:#9aa0c3;
}

/* Хедер */
.top, header.top{
  background: linear-gradient(180deg, rgba(15,17,24,.85) 0%, rgba(18,20,32,.85) 100%) !important;
  border-bottom:1px solid var(--border) !important;
}

/* Кнопки — фиолетовые */
.btn, .btn-primary, .btn--primary, a.btn, button.btn{
  background: linear-gradient(180deg,var(--accent) 0%, var(--accent-600) 100%) !important;
  color:#fff !important;
  border:1px solid var(--accent) !important;
}
.btn:hover, .btn-primary:hover, .btn--primary:hover{
  filter:brightness(1.02);
  box-shadow:0 6px 24px rgba(108,92,231,.35);
}
/* Обводочные */
.btn--outline, .btn-outline, .btn-secondary{
  background:transparent !important;
  border:1px solid var(--accent) !important;
  color:var(--accent) !important;
}
/* Любые "success/green" — тоже фиолетовыми */
.badge-success, .btn-success, .tag.tag--green{
  background:var(--accent) !important;
  border-color:var(--accent) !important;
}

/* Сайдбар: активные пункты */
.sidebar__nav .s-item.active, .sidebar__nav .s-item:focus{
  background:rgba(108,92,231,.08) !important;
  border-color:var(--accent) !important;
  color:var(--text) !important;
}

/* Карточки/таблицы — графит */
.card, .mh-card, .table, .table th, .table td{
  background:var(--bg-2) !important;
  border-color:var(--border) !important;
  color:var(--text) !important;
}

/* Профиль: hero + карточки майнеров */
.mh-hero{
  display:grid; grid-template-columns:1fr 320px; gap:24px;
}
.mh-hero .kpis{ display:flex; gap:16px; flex-wrap:wrap; }
.mh-hero .kpi{
  background:rgba(108,92,231,.06);
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px 14px;
}
.mh-list .miner{
  background:var(--bg-2);
  border:1px solid var(--border);
  border-radius:14px;
  padding:14px;
  margin-bottom:14px;
}
@media (max-width: 991.98px){
  .mh-hero{ grid-template-columns:1fr; }
}
/* === miners cards (profile.php) ========================================= */
.mh-list{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:16px;
  margin-top:20px;
}
.mh-card.miner{
  background:#161623;
  border:1px solid #2b2e40;
  border-radius:14px;
  padding:16px;
  box-shadow:0 4px 16px rgba(0,0,0,.35);
  color:#e8e8f6;
}
.miner__hdr{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.miner__idx{
  width:28px;height:28px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(108,92,231,.12);
  border:1px solid rgba(108,92,231,.40);
  font-weight:600;
}
.miner__model{font-weight:700}
.miner__row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.miner__item{
  background:rgba(255,255,255,.02);
  border:1px solid #2b2e40;
  border-radius:10px;
  padding:10px;
}
.miner__item .lbl{font-size:12px;color:#9aa0b4;margin-bottom:4px}
.miner__item .val{font-weight:600}
.muted{color:#9aa0b4}
@media (max-width: 991.98px){
  .mh-list{grid-template-columns:1fr}
  .miner__row{grid-template-columns:1fr 1fr}
}
/* ======================================================================= */
/* ===== Stats: compact chart + dark polish ===== */
.card canvas,
canvas[id*="chart"], canvas[id*="Chart"], canvas[id*="stats"], canvas[id*="Stats"]{
  /* делаем любой график в карточке компактным */
  height: 360px !important;
  max-height: 360px !important;
}

/* Внешний вид самой карточки с графиком */
.card, .chart-card{
  background: #151522 !important;
  border: 1px solid #2b2e40 !important;
  border-radius: 14px !important;
}

/* ApexCharts (если используется) — чутка наводим красоту */
.apexcharts-canvas, .apexcharts-svg { max-height: 360px !important; }
.apexcharts-legend-text, .apexcharts-tooltip, .apexcharts-xaxistooltip,
.apexcharts-yaxistooltip {
  color: #e8e8f6 !important;
}
.apexcharts-tooltip, .apexcharts-xaxistooltip, .apexcharts-yaxistooltip {
  background: #1b1b2b !important;
  border: 1px solid #2b2e40 !important;
}
.apexcharts-gridline {
  stroke: rgba(199,201,217,.14) !important;
}
/* акцентная линия/точки (мягкий фиолетовый) */
.apexcharts-series path, .apexcharts-marker {
  stroke: #6c5ce7 !important;
  fill: #6c5ce7 !important;
}

/* Чуть плотнее заголовки и внутренние отступы в карточке графика */
.card .card-header, .chart-card .card-header { padding: 12px 16px !important; }
.card .card-body,   .chart-card .card-body   { padding: 16px !important; }
/* ===== /Stats ===== */