:root{
  --bg:#0b1220; --panel:#0e1628; --muted:#1a2440; --brand:#23a1ff; --ok:#2dd4bf; --warn:#f59e0b; --bad:#ef4444;
  --text:#eaf2ff; --sub:#a9b7d0; --border:#1f2a44; --shadow:0 10px 30px rgba(0,0,0,.35);
  --radius:18px; --radius-sm:12px; --gap:16px; --max:1100px;
}
*{box-sizing:border-box}
html,body{margin:0;background:linear-gradient(180deg,#0b1220 0%,#0a1020 100%);color:var(--text);font:16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial}
a{color:var(--brand);text-decoration:none}
.wrap{max-width:var(--max);margin:0 auto;padding:24px}
header{position:sticky;top:0;background:rgba(11,18,32,.7);backdrop-filter:blur(8px);border-bottom:1px solid var(--border);z-index:50}
header .bar{display:flex;align-items:center;justify-content:space-between;padding:14px 24px}
.logo{display:flex;gap:10px;align-items:center;padding: 10px;}
.logo i{width:28px;height:28px;border-radius:8px;background:radial-gradient(120% 120% at 10% 10%,#24a2ff 0%,#0b7bd6 50%,#0b1220 100%);box-shadow:inset 0 0 20px rgba(35,161,255,.35)}
.logo b{letter-spacing:.3px}
nav{display:flex;gap:18px;flex-wrap:wrap}
nav a{padding:8px 12px;border:1px solid var(--border);border-radius:12px;color:var(--sub)}
nav a:hover{border-color:var(--brand);color:var(--text)}
.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:28px;align-items:center;padding:48px 24px}
.hero h1{font-size:clamp(26px,4vw,40px);line-height:1.2;margin:0 0 12px}
.hero p{margin:0 0 14px;color:var(--sub)}
.chip{display:inline-flex;gap:8px;align-items:center;background:linear-gradient(180deg,#0d1933,#0b162d);border:1px solid var(--border);padding:8px 12px;border-radius:999px;color:var(--sub)}
.btn{display:inline-flex;align-items:center;gap:10px;background:linear-gradient(180deg,#1b2745,#15203a);border:1px solid var(--border);padding:12px 16px;border-radius:14px;color:var(--text);box-shadow:var(--shadow);cursor:pointer}
.btn:hover{border-color:var(--brand);transform:translateY(-1px)}
.card{background:linear-gradient(180deg,#0f1830,#0d162b);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
.grid{display:grid;gap:16px}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
@media (max-width:900px){.hero{grid-template-columns:1fr}.grid.cols-3{grid-template-columns:1fr}.grid.cols-2{grid-template-columns:1fr}}
.kpi{padding:18px;text-align:center}
.kpi b{font-size:20px}
.section{padding:24px; margin-bottom:20px;}
h2{margin:0 0 14px;font-size:clamp(20px,3.2vw,28px)}
table{width:100%;border-collapse:separate;border-spacing:0;overflow:hidden;border-radius:14px;border:1px solid var(--border)}
th,td{padding:12px 14px;border-bottom:1px solid var(--border)}
th{background:#0f1a33;color:#cfe3ff;text-align:left}
tr:last-child td{border-bottom:none}
.note{font-size:14px;color:var(--sub)}
.muted{color:var(--sub)}
.badge{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;border:1px solid var(--border);background:#0f1a33}
.field{display:flex;gap:10px;align-items:center;margin-bottom: 10px;}
input[type="text"],input[type="number"],input[type="search"]{width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--border);background:#0c1427;color:var(--text);outline:none}
input::placeholder{color:#6b7da0}
.actions{display:flex;gap:10px;flex-wrap:wrap}
.toast{position:fixed;inset:auto 16px 16px auto;background:#0f1a33;border:1px solid var(--border);padding:10px 14px;border-radius:12px;color:var(--text);opacity:0;transform:translateY(6px);transition:.25s;z-index:99}
.toast.show{opacity:1;transform:translateY(0)}
footer{padding:40px 24px;color:#7f90b3}
.list{display:flex;flex-wrap:wrap;gap:8px}
.list .badge{background:#0c1427}
.ok{color:var(--ok)} .warn{color:var(--warn)} .bad{color:var(--bad)}
/* small helpers */
.hidden{display:none}
/* === Mobile overflow fixes === */
html, body { overflow-x: hidden; }
.wrap { padding: clamp(16px, 4vw, 24px); }
.grid, .card, .section, .hero, nav { min-width: 0; }
.field { flex-wrap: wrap; }
.field > * { min-width: 0; }
.field input[type="text"],
.field input[type="number"],
.field input[type="search"] { flex: 1 1 220px; }

/* Long words/URLs */
*, :before, :after { overflow-wrap: anywhere; word-break: break-word; }

/* Buttons and badges */
.btn { white-space: normal; }
.badge { max-width: 100%; }
.badge > span { display: inline-block; max-width: 70vw; vertical-align: middle; }

/* Responsive media */
img, svg, video { max-width: 100%; height: auto; }

/* Tables: make horizontally scrollable on small screens without HTML changes */
@media (max-width: 768px) {
  table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  th, td { white-space: nowrap; }
}

/* Header/nav tweaks on mobile */
@media (max-width: 640px) {
  header .bar { padding: 12px 16px; }
  nav { gap: 10px; }
  .actions { gap: 8px; }
  .hero { padding: 32px 16px; }
}
summary {
    margin-bottom: 10px;
    padding: 10px;
    background: #0f1a33;
    border-radius: 15px;
    border: 1px solid var(--border);
}
details p {
    padding: 10px;
}
.logo img {
    width: 80px;
}
.vhod {
    background: #00b24b;
    color: #fff;
}