:root{
  --navy:#0b1c3d;
  --indigo:#4f46e5; --indigo-dark:#4338ca; --violet:#7c3aed;
  --teal:#0d9488; --cyan:#06b6d4;
  --amber:#f59e0b; --amber-bg:#fffbeb;
  --rose:#e11d48; --rose-bg:#fff1f2;
  --emerald:#059669; --emerald-bg:#ecfdf5;
  --card:#ffffff; --line:#e6e9f5;
  --text:#1b1f3b; --muted:#6b7290;
  --shadow-sm:0 2px 8px rgba(30,32,90,.06);
  --shadow-md:0 10px 30px rgba(30,32,90,.10);
  --shadow-lg:0 20px 48px rgba(30,32,90,.14);
  --radius:18px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:
    radial-gradient(1200px 600px at 100% -10%, rgba(124,58,237,.10), transparent),
    radial-gradient(1000px 500px at -10% 0%, rgba(6,182,212,.10), transparent),
    linear-gradient(180deg,#f6f7fd 0%, #f2f4fb 40%, #eef1fa 100%);
  font-family:'Segoe UI',Inter,Roboto,Arial,sans-serif;
  color:var(--text);
  min-height:100vh;
}
a{color:var(--indigo);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2{font-family:inherit}

/* ============ Topbar ============ */
.nav-toggle-checkbox{display:none}
.topbar{
  background:linear-gradient(120deg,#1e1b4b 0%,#3730a3 45%,#4f46e5 75%,#6d28d9 100%);
  color:#fff;
  box-shadow:0 6px 24px rgba(30,20,80,.25);
  position:sticky; top:0; z-index:50;
}
.topbar-inner{
  max-width:1440px;margin:0 auto;padding:14px 22px;
  display:flex;align-items:center;gap:22px;flex-wrap:wrap;
}
.brand{color:#fff;font-weight:800;font-size:18px;letter-spacing:.2px;display:flex;align-items:center;gap:8px}
.brand:hover{text-decoration:none;opacity:.92}
.brand-icon{font-size:20px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.25))}
.mainnav{display:flex;gap:6px;flex-wrap:wrap;flex:1}
.mainnav a{
  color:#e4e4ff;font-weight:600;font-size:13.5px;padding:8px 12px;border-radius:10px;
  transition:background .15s ease, color .15s ease;
}
.mainnav a:hover{background:rgba(255,255,255,.14);color:#fff;text-decoration:none}
.userbox{display:flex;align-items:center;gap:12px;font-size:13px;color:#e4e4ff}
.userbox .logout{
  color:#fff;font-weight:700;background:rgba(255,255,255,.16);padding:7px 14px;border-radius:10px;
  transition:background .15s ease;
}
.userbox .logout:hover{background:rgba(255,255,255,.28);text-decoration:none}
.userbox-mobile{display:none}
.nav-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:34px;height:34px;cursor:pointer}
.nav-burger span{display:block;height:2.5px;width:100%;background:#fff;border-radius:2px;transition:transform .2s ease, opacity .2s ease}

/* ============ Shell ============ */
.app-shell{max-width:1440px;margin:26px auto;padding:0 20px}
.app-footer{
  text-align:center;color:var(--muted);font-size:12px;padding:26px 20px 10px;
}
.prepared-by{margin-top:6px;font-weight:700;color:#8b8fb3;letter-spacing:.02em;padding-bottom:20px}

/* ============ Alerts ============ */
.alert{padding:13px 18px;border-radius:14px;margin-bottom:16px;font-weight:600;font-size:14px;box-shadow:var(--shadow-sm)}
.alert-success{background:linear-gradient(135deg,#d1fae5,#ecfdf5);color:#047857;border:1px solid #a7f3d0}
.alert-error{background:linear-gradient(135deg,#ffe4e6,#fff1f2);color:#be123c;border:1px solid #fecdd3}

/* ============ Cards & layout ============ */
.grid{display:grid;grid-template-columns:400px 1fr;gap:20px}
.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-md);padding:20px;margin-bottom:20px;
  transition:box-shadow .2s ease, transform .2s ease;
}
.card:hover{box-shadow:var(--shadow-lg)}
.card h2{margin:0 0 14px;font-size:17px;color:var(--navy);font-weight:800;display:flex;align-items:center;gap:8px}
.card h1{margin:0 0 6px;font-size:25px;color:var(--navy);font-weight:800;letter-spacing:-.01em}
.section-title{
  font-size:11.5px;font-weight:800;color:var(--indigo);
  background:linear-gradient(135deg,#eef0ff,#f3e8ff);
  padding:8px 12px;border-radius:10px;margin:16px 0 9px;
  text-transform:uppercase;letter-spacing:.07em;display:inline-block;
}

/* ============ Forms ============ */
label{font-size:12px;font-weight:700;color:#3a3f66;display:block;margin:11px 0 5px}
input,select,textarea{
  width:100%;padding:10px 12px;border:1.5px solid #dfe2f5;border-radius:11px;
  background:#fbfbff;font-size:14px;color:var(--text);font-family:inherit;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--indigo);background:#fff;
  box-shadow:0 0 0 4px rgba(79,70,229,.12);
}
.row{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:11px}

.btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
button,.btn{
  border:0;border-radius:12px;padding:11px 18px;font-weight:700;cursor:pointer;
  background:linear-gradient(135deg,var(--indigo),var(--violet));color:#fff;
  box-shadow:0 8px 20px rgba(79,70,229,.28);font-size:14px;display:inline-block;
  transition:transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
button:hover,.btn:hover{transform:translateY(-1px);box-shadow:0 12px 26px rgba(79,70,229,.36);text-decoration:none;opacity:1}
button:active,.btn:active{transform:translateY(0)}
button.secondary,.btn.secondary{background:linear-gradient(135deg,#334155,#1e293b);box-shadow:0 8px 20px rgba(30,41,59,.28)}
button.light,.btn.light{background:#eef0fb;color:var(--indigo-dark);box-shadow:none}
button.light:hover,.btn.light:hover{background:#e2e5fb;box-shadow:0 4px 12px rgba(79,70,229,.12)}
button.danger,.btn.danger{background:linear-gradient(135deg,#e11d48,#be123c);box-shadow:0 8px 20px rgba(225,29,72,.28)}

/* ============ KPIs ============ */
.kpis{display:grid;grid-template-columns:repeat(4,minmax(150px,1fr));gap:14px}
.kpi{
  padding:16px;border-radius:16px;background:linear-gradient(160deg,#fff,#f7f8ff);
  border:1px solid var(--line);border-left:4px solid var(--indigo);
  box-shadow:var(--shadow-sm);
}
.kpi:nth-child(2){border-left-color:var(--teal)}
.kpi:nth-child(3){border-left-color:var(--violet)}
.kpi:nth-child(4){border-left-color:var(--amber)}
.kpi span{font-size:11.5px;color:var(--muted);display:block;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.kpi strong{font-size:23px;color:var(--navy);display:block;margin-top:6px;line-height:1.2;font-weight:800}
.kpi small{color:var(--muted)}

.status{display:inline-flex;align-items:center;border-radius:999px;padding:5px 12px;font-weight:800;font-size:11.5px;letter-spacing:.02em}
.ok{background:linear-gradient(135deg,#d1fae5,#a7f3d0);color:#047857}
.no{background:linear-gradient(135deg,#ffe4e6,#fecdd3);color:#be123c}
.warn{background:linear-gradient(135deg,#fef3c7,#fde68a);color:#92400e}
.ok-text{color:var(--emerald)}
.no-text{color:var(--rose)}

/* ============ Tables ============ */
.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:var(--shadow-sm)}
table{border-collapse:collapse;width:100%;font-size:13px}
th,td{border-bottom:1px solid #f0f1f9;padding:11px 14px;text-align:left;vertical-align:top}
th{position:sticky;top:0;background:linear-gradient(135deg,#f3f4fd,#eef0ff);color:var(--navy);z-index:1;font-weight:800;font-size:12px;text-transform:uppercase;letter-spacing:.03em}
.result-table td:nth-child(1){width:42%;font-weight:700;color:#3a3f66;background:#fafaff}
.group-row td{background:linear-gradient(135deg,#eef0ff,#f3e8ff)!important;color:var(--navy);font-weight:900;font-size:14px;border-top:2px solid var(--line)}
tbody tr{transition:background .12s ease}
tbody tr:hover td{background:#fafaff}

.note-box{background:linear-gradient(135deg,var(--amber-bg),#fff8ea);border:1px solid #fde68a;border-radius:16px;padding:16px;line-height:1.55;color:#78350f;font-size:13px}
.recommend{background:linear-gradient(135deg,var(--emerald-bg),#f0fdf9);border:1px solid #a7f3d0;color:#065f46;border-radius:16px;padding:16px;line-height:1.55;font-size:13px}
.muted{color:var(--muted)}
.hidden{display:none!important}
.pill-row{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 2px}
.pill{
  background:linear-gradient(135deg,#eef0ff,#f3e8ff);border:1px solid #d9dcfb;color:var(--indigo-dark);
  border-radius:999px;padding:6px 12px;font-size:12px;font-weight:700;
}

/* ============ Login ============ */
.login-wrap{max-width:420px;margin:70px auto;padding:0 16px}
.login-wrap .card{text-align:left}
.login-wrap h1{text-align:center;color:var(--navy);font-size:22px}

/* ============ Pagination ============ */
.pagination{display:flex;gap:6px;margin-top:16px;flex-wrap:wrap}
.pagination a,.pagination span{padding:7px 13px;border-radius:10px;background:#eef0fb;font-weight:700;font-size:13px;color:var(--indigo-dark)}
.pagination .current{background:linear-gradient(135deg,var(--indigo),var(--violet));color:#fff}

.filters{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;margin-bottom:16px}
.filters .field{min-width:170px}
.filters label{margin-top:0}

/* ============ Mobile nav (hamburger) ============ */
@media(max-width:900px){
  .nav-burger{display:flex}
  .mainnav{
    display:none;flex-direction:column;width:100%;
    background:rgba(15,12,50,.35);
    border-radius:14px;padding:6px;margin-top:4px;
    gap:2px;
  }
  .mainnav a{padding:11px 14px;border-radius:10px}
  .userbox-desktop{display:none}
  .userbox-mobile{
    display:flex;flex-direction:column;align-items:flex-start;gap:8px;
    padding:12px 14px 6px;border-top:1px solid rgba(255,255,255,.14);margin-top:6px;
  }
  .userbox-mobile .logout{align-self:flex-start}
  .nav-toggle-checkbox:checked ~ .topbar .mainnav{display:flex}
}

@media(max-width:980px){.grid{grid-template-columns:1fr}.kpis{grid-template-columns:1fr 1fr}}
@media(max-width:560px){
  .row,.row3,.kpis{grid-template-columns:1fr}
  .topbar-inner{padding:12px 14px}
  .app-shell{margin:16px auto;padding:0 12px}
  .card{padding:16px;border-radius:16px}
  .login-wrap{margin:40px auto}
}
@media print{.topbar,.no-print,button{display:none!important}.app-shell{margin:0;padding:0}.grid{display:block}.card{box-shadow:none;border:0}}