/* ===== Material Dark — Modular ===== */
:root{
  /* Палитра Material‑вдохновлённая (Dark) */
  --md-surface:#0f1115;           /* фон страницы */
  --md-surface-1:#141821;         /* базовая карточка */
  --md-surface-2:#182031;         /* при наведении/фокусе — «повышение» */
  --md-outline:#2a3552;           /* контур/границы */
  --md-divider:#1e2742;

  --md-text:#ecf0ff;              /* основной текст */
  --md-text-weak:#aeb9db;         /* вторичный текст */
  --md-on-tonal:#0b1020;          /* текст на ярких кнопках */

  --md-primary:#82a8ff;           /* основной акцент */
  --md-primary-cta:#6a9aff;       /* для кнопок */
  --md-secondary:#95f1cb;         /* доп. акцент для состояний */
  --md-error:#ff7a8b;             /* ошибки/удаление */

  --md-inp-bg:#111827;            /* фон поля ввода (пустое) */
  --md-inp-filled:#0f1524;        /* фон поля (заполнено) */

  --radius-xl:16px;
  --radius-lg:14px;
  --radius-md:12px;

  --shadow-1:0 6px 18px rgba(0,0,0,.35);
  --shadow-2:0 10px 28px rgba(0,0,0,.45);

  --gap:16px;
  --gap-sm:12px;

  --focus:0 0 0 3px rgba(130,168,255,.25);
}

/* База */
*{box-sizing:border-box}
html,body{
  margin:0; padding:0;
  background:var(--md-surface);
  color:var(--md-text);
  font:14px/1.55 Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

.container{max-width:1200px;margin:24px auto;padding:0 16px}

/* Шапка */
.topbar{
  display:flex; align-items:center; gap:12px;
  padding:16px 18px;
  position:sticky; top:0; z-index:10;
  background:linear-gradient(0deg, rgba(15,17,21,.75), rgba(15,17,21,.75));
  backdrop-filter:saturate(1.1) blur(6px);
  border-bottom:1px solid var(--md-divider);
}
.brand{font-weight:800; letter-spacing:.2px; font-size:22px}
.brand strong{font-size:28px}

/* Вкладки */
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0}
.tab{
  position:relative;
  background:var(--md-surface-1);
  color:var(--md-text);
  border:1px solid var(--md-outline);
  border-radius:999px;
  padding:8px 14px;
  cursor:pointer;
  transition:transform .06s ease, background .15s, border-color .15s, box-shadow .15s;
  box-shadow:var(--shadow-1);
}
.tab:hover{background:var(--md-surface-2); border-color:#344065}
.tab:active{transform:translateY(1px)}
.tab.active{
  background:linear-gradient(180deg, #1a2340, #141a29);
  border-color:#3b4b7a;
  box-shadow:var(--shadow-2);
}

.tabpanel{display:none}
.tabpanel.active{display:block}

/* Карточки/модули */
.card{
  background:var(--md-surface-1);
  border:1px solid var(--md-outline);
  border-radius:var(--radius-xl);
  padding:16px;
  box-shadow:var(--shadow-1);
}
.card:hover{box-shadow:var(--shadow-2)}
.card-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}

h2{margin:10px 0 14px;font-size:18px;font-weight:700;letter-spacing:.2px}
h3{margin:6px 0 10px;font-size:15px;font-weight:700;color:var(--md-text)}
h4{margin:0 0 6px;font-size:13px;font-weight:700;color:var(--md-text-weak)}
.hint{color:var(--md-text-weak)}

/* Сетка модулей */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
@media (max-width:900px){.grid-2{grid-template-columns:1fr}}

/* Формы — Material Outlined */
.form-row{margin-bottom:var(--gap-sm);display:flex;gap:12px;align-items:center}
.form-row label{min-width:220px;color:var(--md-text-weak)}

.inp{
  width:100%;
  color:var(--md-text);
  background:var(--md-inp-bg);
  border:1px solid var(--md-outline);
  border-radius:var(--radius-md);
  padding:11px 12px;
  transition:border-color .15s, box-shadow .15s, background .15s, transform .06s;
  outline:0;
}
.inp.empty{background:var(--md-inp-bg); opacity:.95; border-color:var(--md-outline)}
.inp.filled{background:var(--md-inp-filled); opacity:1; border-color:#344065}
.inp:focus{border-color:var(--md-primary); box-shadow:var(--focus)}
.inp:disabled{opacity:.6; cursor:not-allowed}

/* Автополя (read-only) */
.auto{opacity:.9}

/* Кнопки — Material variants */
.btn{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px; cursor:pointer; user-select:none;
  padding:10px 14px;
  border-radius:var(--radius-md);
  border:1px solid var(--md-outline);
  background:var(--md-surface-1);
  color:var(--md-text);
  transition:transform .06s ease, background .15s, border-color .15s, box-shadow .15s;
  box-shadow:var(--shadow-1);
}
.btn:hover{background:var(--md-surface-2)}
.btn:active{transform:translateY(1px)}
.btn-primary{
  background:linear-gradient(180deg, var(--md-primary-cta), #5e8fff);
  color:var(--md-on-tonal);
  border-color:transparent;
}
.btn-primary:hover{filter:brightness(1.05)}
.btn-danger{background:#2a1420;border-color:#5c2742;color:#ffc9d0}
.btn-danger:hover{background:#331625}

/* «Риппл» псевдоэффект */
.btn:active::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(120px 120px at var(--x,50%) var(--y,50%), rgba(255,255,255,.15), transparent 70%);
}
.btn{--x:50%;--y:50%}
.btn:hover{--x:50%;--y:50%}

/* Таблицы */
.table-wrap{
  overflow:auto;
  border:1px solid var(--md-outline);
  border-radius:var(--radius-lg);
}
table{
  width:100%;
  border-collapse:separate; border-spacing:0;
  min-width:1000px;
}
thead th{
  position:sticky; top:0; z-index:1;
  background:linear-gradient(0deg, #0f1424, #0f1424);
  border-bottom:1px solid var(--md-outline);
  padding:10px;
  font-weight:700; color:#dfe6ff;
}
tbody td, tfoot td{
  border-top:1px solid #141c2b;
  padding:8px;
}
tbody tr:hover{background:#131a2a}
.col-inp{color:#c5d3ff}
.col-out{color:#d7ffe9}
.calc{font-weight:700}

/* Действия в строке */
.row-actions{display:flex;gap:8px}
.row-actions .btn{padding:8px 10px}

/* Сводки/статистика */
.stats{list-style:none; padding:0; margin:0}
.stats li{
  display:flex; justify-content:space-between; gap:16px;
  border-top:1px dashed #2a365a;
  padding:10px 0;
}

/* Ошибки */
.error-item{
  background:#2a1621;
  border:1px solid #64314b;
  border-radius:var(--radius-md);
  padding:10px;
  box-shadow:var(--shadow-1);
}

/* Футер */
.footer{opacity:.65;text-align:center;padding:28px 12px}

/* Мелкие улучшения расстояний */
.tabpanel > .card{margin-bottom:var(--gap)}
.table-wrap + .card{margin-top:var(--gap)}

/* Подсказки/secondary текст */
.hint{color:var(--md-text-weak)}

/* Ссылки в списках загрузок */
.list a{
  color:#cfe0ff; text-decoration:none; border-bottom:1px dotted #495a88;
}
.list a:hover{color:#fff}