/* Скелет без дизайна — только сетка и отступы под ПК */
:root{ --gap:24px; --sidebar:280px; --max:1400px; font-family:system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
*{ box-sizing:border-box }
body{ margin:0; color:#e5e7eb; background:#0b0f16 }
a{ color:inherit; text-decoration:none }
.container{ max-width:var(--max); margin:0 auto; padding:0 var(--gap) }

.top__inner{ padding:16px 0 }
.brand{ display:flex; align-items:center; gap:12px }
.brand__logo{ width:38px; height:38px; border-radius:12px; background:#888 } /* перекрасим позже */
.brand__title{ margin:0; font-size:22px; font-weight:800 }
.brand__right{ margin-left:auto; }

.toolbar{ display:flex; gap:12px; align-items:center; padding-bottom:16px }
.input{ height:42px; padding:0 12px; border:1px solid #333; border-radius:12px; background:#0f1322; color:#e5e7eb; flex:1 }
.btn{ display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border-radius:999px; border:1px solid #444; background:#1a2238; cursor:pointer }
.btn--primary{ border:0; background:#5c6ac4; }
.btn--outline{ background:transparent }
.btn--ghost{ background:#162036; }
.chip{ padding:6px 10px; border:1px solid #333; border-radius:999px; background:#0f1322; font-size:12px }

.nav-top{ display:flex; gap:18px; padding:10px 0 18px; font-size:14px; opacity:.9 }

.layout{ display:grid; grid-template-columns: var(--sidebar) 1fr; gap:var(--gap); padding:var(--gap) 0 }
.layout__sidebar{ }
.layout__main{ display:grid; grid-template-columns: repeat(12,1fr); gap:var(--gap) }

.sidebar__nav{ display:flex; flex-direction:column; gap:10px }
.s-item{ display:flex; align-items:center; gap:10px; padding:12px 14px; border:1px solid #333; border-radius:14px; }
.s-item.is-active{ border-color:#5c6ac4 }
.s-item__icon{ width:28px; text-align:center }

.card{ grid-column: span 12; border:1px solid #333; border-radius:16px; padding:16px; background:#0e1526 }
.card__title{ margin:0 0 10px; font-size:14px; opacity:.85; }

.grid{ display:grid; gap:var(--gap) }
.grid--3{ grid-template-columns: repeat(12,1fr) }
.grid--2{ grid-template-columns: repeat(12,1fr); margin-top:var(--gap) }
.grid--3 > .card{ grid-column: span 12 }
.grid--2 > .card{ grid-column: span 12 }
@media (min-width:1200px){
  .grid--3 > .card{ grid-column: span 4 }
  .grid--2 > .card:nth-child(1){ grid-column: span 6 }
  .grid--2 > .card:nth-child(2){ grid-column: span 6 }
}

.manager{ display:grid; grid-template-columns: 80px 1fr; gap:16px; align-items:center }
.manager__avatar{ width:80px; height:80px; border-radius:14px; background:#222 }
.manager__name{ font-weight:800; font-size:18px }
.manager__contacts{ display:flex; gap:16px; margin:6px 0 12px }

.kpi__main{ display:flex; align-items:baseline; gap:8px }
.kpi__big{ font-size:28px; font-weight:900 }
.kpi__unit{ opacity:.8; font-weight:700 }
.kpi__sub{ opacity:.7; font-size:12px; margin-top:8px }

.tags{ display:flex; gap:10px; flex-wrap:wrap }
.tag{ border:1px solid #333; border-radius:999px; padding:6px 10px; font-size:12px; background:#0f1322 }

.table{ width:100%; border-collapse: collapse; }
.table th, .table td{ border:1px solid #333; padding:10px; text-align:left; }
.table thead th{ font-size:12px; opacity:.8 }

.auth{ display:grid; place-items:center; min-height:100vh }
.auth__form{ min-width:340px; border:1px solid #333; border-radius:16px; padding:20px; background:#0e1526; display:grid; gap:10px }
.auth__form label{ display:grid; gap:6px }
.auth__form input{ height:40px; border:1px solid #333; border-radius:10px; background:#0f1322; color:#e5e7eb; padding:0 10px }
.auth__err{ color:#ff6b6b }

/* --- FIX: grids must span full width of the main layout --- */
.layout__main > .grid{ grid-column: span 12; }

/* чтобы грид-элементы не сжимались внутри */
.layout__main > *{ min-width:0; }
.grid > *{ min-width:0; }

/* KPI-карточки: фиксированная приятная высота и равные отступы */
.card.kpi{ min-height:170px; display:flex; flex-direction:column; justify-content:space-between; }
.kpi__main{ margin-top:2px; }

/* === Green theme — global overrides === */
:root{
  --g-bg-1:#0f1117;  /* base deep green */
  --g-bg-2:#131826;
  --g-bg-3:#151b2e;
  --g-ink:#eafff3;   /* text */
  --g-sub:#a7e7c9;   /* subtext */
  --g-accent:#6c5ce7;      /* emerald-500 */
  --g-accent-2:#6c5ce7;    /* emerald-400 */
  --g-accent-3:#6c5ce7;    /* emerald-600 */
  --g-border:rgba(108, 92, 231, .18);
  --g-card:rgba(108, 92, 231, .06);
  --g-card-strong:rgba(108, 92, 231, .09);
  --g-glow:0 0 0 1px rgba(108, 92, 231, .12), 0 8px 24px rgba(108, 92, 231, .10);
}

html,body{
  background:
    radial-gradient(1200px 800px at 20% 10%, #0b2d1c 0%, transparent 60%),
    radial-gradient(900px 700px at 80% 20%, #0c3b27 0%, transparent 65%),
    radial-gradient(1000px 800px at 50% 90%, #052015 0%, transparent 60%),
    linear-gradient(180deg, var(--g-bg-1) 0%, var(--g-bg-2) 60%, var(--g-bg-3) 100%) !important;
  background-attachment: fixed;
  color: var(--g-ink);
}

a{ color: var(--g-accent-2); }
a:hover{ color: var(--g-accent); }

/* selection + scrollbars */
::selection{ background: rgba(34,197,94,.28); color:#fff; }
*::-webkit-scrollbar{ width:10px; height:10px }
*::-webkit-scrollbar-track{ background: rgba(255,255,255,.03) }
*::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, var(--g-accent-2), var(--g-accent-3));
  border-radius: 12px;
  border: 2px solid rgba(0,0,0,.12);
}

/* === MH OVERRIDE: графитовый/тёмно-фиолетовый вместо зелёного === */
:root{
  --g-bg-1:#0f1117;  /* графитовые пласты */
  --g-bg-2:#131826;
  --g-bg-3:#151b2e;
  --g-ink:#e8ecff;
  --g-sub:#a7b1d6;
  --g-accent:#8b5cf6;     /* фиолетовый (как на "Оплатить") */
  --g-accent-2:#7c3aed;   /* темнее — для ссылок/hover */
  --g-accent-3:#a78bfa;   /* светлее — градиенты */
  --g-border:rgba(108, 92, 231, .18);
  --g-card:rgba(108, 92, 231, .06);
  --g-card-strong:rgba(108, 92, 231, .09);
}
/* фон страницы — фиолетовые радиальные пятна + графит */
html,body{
  background:
    radial-gradient(1200px 900px at 85% -10%, #2a1b5f 0%, var(--g-bg-2) 45%, var(--g-bg-1) 70%),
    radial-gradient(900px 600px at -10% 20%, #15355266 0%, transparent 60%) !important;
  background-attachment: fixed;
  color: var(--g-ink);
}
/* ссылки/selection/скроллбар — тоже во фиолетовую гамму */
a{ color: var(--g-accent-2); }
a:hover{ color: var(--g-accent); }
::selection{ background: rgba(139,92,246,.28); color:#fff; }
*::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, var(--g-accent-2), var(--g-accent-3));
  border-radius: 12px; border: 2px solid rgba(0,0,0,.12);
}