:root{
  --bg:#eef4ff;
  --panel:rgba(255,255,255,.78);
  --panel-strong:#ffffff;
  --line:#dbeafe;
  --line-strong:#bfd3ff;
  --text:#1e293b;
  --muted:#64748b;
  --accent:#2563eb;
  --accent-2:#7c3aed;
  --accent-3:#0ea5e9;
  --success:#16a34a;
  --warning:#f59e0b;
  --danger:#dc2626;
  --radius:20px;
  --shadow-lg:0 30px 80px rgba(37,99,235,.14), 0 12px 30px rgba(0,0,0,.08);
  --shadow-md:0 20px 50px rgba(37,99,235,.12);
  --shadow-sm:0 10px 24px rgba(37,99,235,.18);
}

*{box-sizing:border-box}

html,body{
  margin:0;
  padding:0;
  min-height:100%;
  font-family:Inter,Arial,Helvetica,sans-serif;
  background:
    linear-gradient(135deg,#eef4ff 0%,#f8fbff 35%,#f3f4ff 100%);
  color:var(--text);
}

/* animated background effects */
body{
  position:relative;
  overflow-x:hidden;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  background:
    radial-gradient(circle at 12% 18%, rgba(37,99,235,.24), transparent 20%),
    radial-gradient(circle at 88% 12%, rgba(124,58,237,.18), transparent 22%),
    radial-gradient(circle at 70% 78%, rgba(34,197,94,.10), transparent 18%),
    radial-gradient(circle at 38% 62%, rgba(14,165,233,.10), transparent 20%);
  pointer-events:none;
  animation:bgFloat 11s ease-in-out infinite alternate;
}

body::after{
  content:"";
  position:fixed;
  width:520px;
  height:520px;
  right:-140px;
  bottom:-140px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(14,165,233,.10), transparent 65%);
  filter:blur(20px);
  pointer-events:none;
  animation:orbDrift 12s ease-in-out infinite alternate;
}

@keyframes bgFloat{
  0%{transform:translateY(0) scale(1)}
  100%{transform:translateY(-14px) scale(1.03)}
}

@keyframes orbDrift{
  0%{transform:translate(0,0) scale(1)}
  100%{transform:translate(-40px,-30px) scale(1.08)}
}

.container{
  max-width:1280px;
  margin:0 auto;
  padding:26px;
  position:relative;
  z-index:1;
}

/* nav */
.nav{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:18px;
}

.nav a,
.nav button{
  padding:12px 16px;
  border-radius:14px;
  background:rgba(255,255,255,.68);
  backdrop-filter:blur(12px);
  border:1px solid var(--line);
  color:var(--text);
  font-weight:700;
  text-decoration:none;
  box-shadow:var(--shadow-sm);
  transition:.25s ease;
  cursor:pointer;
}
button.danger{
background:#ef4444;
color:white;
border:none;
padding:6px 12px;
border-radius:6px;
cursor:pointer;
}

button.danger:hover{
background:#dc2626;
}
.nav a:hover,
.nav button:hover{
  transform:translateY(-2px) scale(1.01);
  background:#fff;
  box-shadow:0 14px 34px rgba(37,99,235,.18);
}

/* general cards */
.card{
  background:var(--panel);
  backdrop-filter:blur(18px);
  border:1px solid var(--line);
  border-radius:24px;
  padding:22px;
  margin-bottom:20px;
  box-shadow:var(--shadow-md);
  animation:fadeUp .45s ease;
  position:relative;
  overflow:hidden;
}

.card::before{
  content:"";
  position:absolute;
  inset:0 auto auto 0;
  width:100%;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.95),transparent);
}

.hero{
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:center;
  flex-wrap:wrap;
}

.hero h1{
  margin:0;
  font-size:34px;
  line-height:1.1;
  letter-spacing:.02em;
}

.hero p{
  margin:8px 0 0;
  color:var(--muted);
}

/* glow effect */
.glow{
  position:relative;
  overflow:hidden;
}

.glow::after{
  content:"";
  position:absolute;
  top:-40%;
  left:-30%;
  width:42%;
  height:210%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.45),transparent);
  transform:rotate(18deg);
  animation:shine 5s linear infinite;
  pointer-events:none;
}

/* stats */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:16px;
}

.stat{
  background:linear-gradient(180deg,#ffffff,#f6faff);
  border:1px solid var(--line);
  border-radius:20px;
  padding:18px;
  box-shadow:var(--shadow-md);
  position:relative;
  overflow:hidden;
  transition:.25s ease;
}

.stat:hover{
  transform:translateY(-4px);
  box-shadow:0 24px 50px rgba(37,99,235,.16);
}

.stat::before{
  content:"";
  position:absolute;
  inset:auto -30px -30px auto;
  width:100px;
  height:100px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(37,99,235,.14),transparent 70%);
}

.stat::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,.35), transparent 30%);
  pointer-events:none;
}

.stat .label{
  font-size:13px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.06em;
}

.stat .value{
  font-size:34px;
  font-weight:800;
  margin-top:8px;
}

/* forms */
form{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px;
}

.full{
  grid-column:1 / -1;
}

label{
  display:block;
  font-size:13px;
  font-weight:700;
  color:#334155;
  margin-bottom:6px;
  letter-spacing:.04em;
}

input,select,textarea,button{
  width:100%;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid var(--line);
  background:#fff;
  color:var(--text);
  font:inherit;
  outline:none;
  transition:.22s ease;
}

input:focus,select:focus,textarea:focus{
  border-color:#93c5fd;
  box-shadow:
    0 0 0 4px rgba(59,130,246,.12),
    0 8px 20px rgba(37,99,235,.08);
  transform:translateY(-1px);
}

textarea{
  min-height:110px;
  resize:vertical;
}

/* buttons */
button{
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:#fff;
  font-weight:800;
  border:none;
  cursor:pointer;
  box-shadow:
    0 10px 24px rgba(37,99,235,.24),
    0 0 18px rgba(124,58,237,.10);
  position:relative;
  overflow:hidden;
}

button:hover{
  transform:translateY(-2px) scale(1.01);
  box-shadow:
    0 16px 34px rgba(37,99,235,.28),
    0 0 22px rgba(124,58,237,.16);
}

button::after{
  content:"";
  position:absolute;
  top:0;
  left:-120%;
  width:90%;
  height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.24),transparent);
  animation:btnShine 3.8s linear infinite;
}

button.secondary{
  background:linear-gradient(135deg,#10b981,#14b8a6);
}

button.print-btn{
  background:linear-gradient(135deg,#0ea5e9,#2563eb);
}

.small-btn{
  padding:8px 10px;
  font-size:12px;
  border-radius:10px;
}

.actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:16px;
}

/* tables */
table{
  width:100%;
  border-collapse:collapse;
  margin-top:14px;
  font-size:14px;
  background:rgba(255,255,255,.92);
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 10px 30px rgba(37,99,235,.06);
}

th,td{
  padding:12px 10px;
  border-bottom:1px solid #edf2ff;
  text-align:left;
  vertical-align:top;
}

th{
  background:#eef4ff;
  color:#334155;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.04em;
}

tr{
  transition:.18s ease;
}

tr:hover td{
  background:#f8fbff;
}

/* badges */
.badge{
  display:inline-block;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.02em;
}

.badge.ok{
  background:#dcfce7;
  color:#166534;
  box-shadow:0 0 0 1px rgba(22,101,52,.08);
  animation:pulseOk 2.2s infinite;
}

.badge.warn{
  background:#fef3c7;
  color:#92400e;
}

.badge.bad{
  background:#fee2e2;
  color:#991b1b;
}

@keyframes pulseOk{
  0%,100%{box-shadow:0 0 0 0 rgba(22,163,74,.0)}
  50%{box-shadow:0 0 0 6px rgba(22,163,74,.10)}
}

/* notices */
.notice{
  padding:12px 14px;
  border-radius:14px;
  background:#fff7ed;
  border:1px solid #fed7aa;
  color:#9a3412;
  margin-bottom:14px;
}

.success{
  padding:12px 14px;
  border-radius:14px;
  background:#ecfdf5;
  border:1px solid #a7f3d0;
  color:#065f46;
  margin-bottom:14px;
}

.error-box{
  padding:12px 14px;
  border-radius:14px;
  background:#fef2f2;
  border:1px solid #fecaca;
  color:#991b1b;
  margin-bottom:14px;
}

.kicker{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:#64748b;
  font-weight:800;
  margin-bottom:8px;
}

/* readonly */
.readonly-box{
  background:#f8fbff;
  border:1px dashed #bfd3ff;
  border-radius:16px;
  padding:16px;
}

.readonly-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
}

.readonly-grid div{
  background:#fff;
  border:1px solid #e5eeff;
  padding:12px;
  border-radius:12px;
}

/* login page */
.login-wrap{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:24px;
  position:relative;
  z-index:1;
}

.login-card{
  width:min(460px,94vw);
  background:rgba(255,255,255,.78);
  border:1px solid rgba(191,219,254,.9);
  border-radius:24px;
  padding:18px;
  box-shadow:
    0 30px 80px rgba(37,99,235,.14),
    0 12px 30px rgba(0,0,0,.08);
  backdrop-filter:blur(18px);
  position:relative;
  overflow:hidden;
}

.login-card::after{
  content:"";
  position:absolute;
  top:-30%;
  left:-35%;
  width:45%;
  height:180%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.42),transparent);
  transform:rotate(18deg);
  animation:loginShine 5s linear infinite;
  pointer-events:none;
}

.inner-panel{
  width:100%;
  background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(248,250,255,.92));
  border:1px solid #dbeafe;
  border-radius:20px;
  padding:30px 26px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
  position:relative;
  z-index:1;
}

.logo{
  width:110px;
  height:auto;
  display:block;
  margin:0 auto;
  filter:
    drop-shadow(0 0 8px rgba(59,130,246,.18))
    drop-shadow(0 10px 24px rgba(37,99,235,.16));
  animation:logoPulse 3s ease-in-out infinite;
}

.login-form{
  width:100%;
  display:grid;
  gap:14px;
}

.login-form input,
.login-form button{
  width:100%;
}

.login-title,
.login-subtitle,
.login-company,
.footer-note{
  text-align:center;
}

.login-company{
  font-weight:800;
  letter-spacing:2px;
  color:#5b6880;
  text-transform:uppercase;
}

.footer-note{
  font-size:12px;
  color:var(--muted);
  margin-top:6px;
}

.error{
  margin-top:8px;
  color:var(--danger);
  font-weight:700;
  text-align:center;
}

/* animations */
@keyframes fadeUp{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:translateY(0)}
}

@keyframes shine{
  0%{transform:translateX(-220%) rotate(18deg)}
  100%{transform:translateX(420%) rotate(18deg)}
}

@keyframes loginShine{
  0%{transform:translateX(-180%) rotate(18deg)}
  100%{transform:translateX(420%) rotate(18deg)}
}

@keyframes btnShine{
  0%{left:-120%}
  100%{left:140%}
}

@keyframes logoPulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.04)}
}

/* responsive */
@media(max-width:768px){
  form,.readonly-grid{
    grid-template-columns:1fr;
  }
  .hero h1{
    font-size:28px;
  }
}
.actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:16px;
}

button.print-btn{
  background:linear-gradient(135deg,#0ea5e9,#2563eb);
}
/* print */
@page{
  size:A4 landscape;
  margin:10mm;
}

@media print{
  body::before,
  body::after,
  .nav,
  .actions,
  button,
  .no-print{
    display:none !important;
  }

  html,body{
    background:#fff !important;
    color:#000 !important;
    font-size:11px !important;
  }

  .container{
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    padding:0 !important;
  }

  .card,.stat,table,.login-card,.inner-panel{
    box-shadow:none !important;
    background:#fff !important;
    border:1px solid #ccc !important;
    backdrop-filter:none !important;
  }

  .card{
    padding:10px !important;
    border-radius:0 !important;
    break-inside:avoid;
    page-break-inside:avoid;
  }

  .glow::after,
  .login-card::after{
    display:none !important;
  }

  table{
    width:100% !important;
    table-layout:fixed !important;
    border-collapse:collapse !important;
    margin-top:10px !important;
    font-size:10px !important;
  }

  th,td{
    border:1px solid #999 !important;
    padding:6px 5px !important;
    vertical-align:top !important;
    white-space:normal !important;
    word-break:break-word !important;
    overflow-wrap:anywhere !important;
    line-height:1.25 !important;
  }

  tr{
    break-inside:avoid;
    page-break-inside:avoid;
  }

  thead{
    display:table-header-group;
  }

  tfoot{
    display:table-footer-group;
  }
}

/* public serial validation */
.public-page{
  max-width:900px;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.public-card{
  max-width:900px;
  margin-left:auto;
  margin-right:auto;
}

.public-hero{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
}

.nav-link-like{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 16px;
  border-radius:14px;
  background:rgba(255,255,255,.85);
  border:1px solid var(--line);
  color:var(--text);
  text-decoration:none;
  font-weight:700;
  min-width:110px;
}

.nav-link-like:hover{
  background:#fff;
}

.public-search-form{
  grid-template-columns:minmax(0,1fr) 180px;
  align-items:end;
}

.public-result-block{
  margin-top:18px;
}

.public-result-table{
  table-layout:fixed;
}

.public-result-table th{
  width:220px;
}

.alert{
  margin-top:16px;
  padding:14px 16px;
  border-radius:14px;
  border:1px solid var(--line);
}

.alert.error{
  background:#fef2f2;
  border-color:#fecaca;
  color:#991b1b;
}

.alert.warning{
  background:#fff7ed;
  border-color:#fed7aa;
  color:#9a3412;
}

.inline-mail-link{
  font-weight:800;
  color:inherit;
  margin-left:8px;
}

@media (max-width: 760px){
  .public-search-form,
  form{
    grid-template-columns:1fr;
  }

  .public-hero{
    align-items:flex-start;
  }

  .public-result-table th{
    width:40%;
  }
}