/* ====== Тёмная тема / базовые переменные ====== */
:root{
  --bg:#0f141a;
  --bg-soft:#151b22;
  --panel:#111821;
  --bg-hover:#18212a;
  --text:#e6edf3;
  --text-dim:#a8b3bf;
  --border:#243042;
  --accent:#4ea1ff;
  --accent-2:#6bc46d;
  --danger:#ef4444;
  --shadow:0 8px 24px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",Arial}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
input,select,button{font:inherit;color:inherit}
.wrap{max-width:1100px;margin:0 auto;padding:16px}

/* ====== Заголовки / подписи ====== */
h1{font-size:24px;margin:8px 0 12px}
h4{margin:0 0 8px}
.small{font-size:13px}
.muted{color:var(--text-dim)}

/* ====== Карточки / элементы ====== */
.card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:14px;
  padding:14px;
  box-shadow:var(--shadow);
}

.table-wrap{overflow-x:auto}

/* ====== Кнопки ====== */
button,.btn,a.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:10px 14px;border-radius:12px;border:1px solid var(--border);
  background:var(--bg-soft);color:var(--text);cursor:pointer;gap:8px;
}
button:hover,.btn:hover{background:var(--bg-hover)}
button.primary,.primary{
  background:var(--accent);border-color:transparent;color:#081118;font-weight:600;
}
button.primary:hover,.primary:hover{filter:brightness(0.95)}
button.ghost,.ghost{
  background:transparent;border-color:var(--border);color:var(--text);
}
button.danger,.danger{
  background:#2a1517;border-color:#4a1f22;color:#ffb4b4;
}
button.small{padding:6px 10px;border-radius:10px;font-size:13px}

/* ====== Формы ====== */
label{display:block}
input,select,textarea{
  width:100%;padding:10px;border-radius:10px;
  border:1px solid var(--border);background:var(--bg-soft);color:var(--text);
}
input:focus,select:focus,textarea:focus{outline:2px solid rgba(78,161,255,.35);outline-offset:1px}

/* ====== Прочее ====== */
.progress{display:block}
.progress-bar{height:8px;background:var(--bg-hover);border-radius:999px;overflow:hidden}
.progress-fill{height:100%;background:var(--accent);width:0}

/* чип/бейдж */
.chip{
  display:inline-block;padding:2px 8px;border-radius:999px;
  background:var(--bg-soft);border:1px solid var(--border);color:var(--text-dim)
}

/* стутусы */
.status-ok{color:#22c55e;font-weight:700}
.status-bad{color:#ef4444;font-weight:700}

/* таблица */
table{width:100%}
th,td{vertical-align:middle}

/* медиаправила */
@media (max-width:720px){
  .wrap{padding:12px}
  h1{font-size:20px}
}
/* ... ваш текущий файл ... */

/* Обязательно добавьте/обновите вот это: */
.table-wrap{
  overflow-x:auto;
  -webkit-overflow-scrolling: touch; /* инерционная прокрутка на iOS/Android */
}

@media (max-width:900px){
  .hide-md{display:none}
}
/* ...ваши текущие стили... */

.table-wrap{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

/* чёткие линии строк/столбцов */
table.with-lines{
  border-collapse:separate;
  border-spacing:0;
  width:100%;
}
table.with-lines thead th{
  border-bottom:1px solid var(--border);
  padding:10px 12px;
  color:var(--text-dim);
  font-weight:600;
}
table.with-lines tbody td{
  padding:10px 12px;
  border-bottom:1px solid var(--border);
  border-right:1px solid var(--border);
  background:var(--panel);
}
table.with-lines tbody tr td:first-child{ border-left:1px solid var(--border); }
table.with-lines tbody tr:last-child td{ border-bottom:1px solid var(--border); }

@media (max-width:900px){
  .hide-md{display:none}
}