:root{
  --bg:#eef2f6;
  --white:#fff;
  --ink:#0b1f33;
  --muted:#5b6b7c;
  --line:#d7e0ea;
  --blue:#0d4cd3;
  --blue-2:#0a3fb3;
  --ok:#0f7a3d;
  --bad:#c62828;
  --shadow:0 8px 24px rgba(13,30,54,.06);
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:"Segoe UI",Arial,sans-serif}
body{min-height:100svh}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
.bar{
  background:var(--white);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:5
}
.bar-in{
  width:min(1120px,calc(100% - 28px));margin:0 auto;
  display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:64px
}
.brand{display:flex;align-items:center;gap:10px}
.mark{
  width:36px;height:36px;border-radius:8px;background:var(--blue);color:#fff;
  display:grid;place-items:center;font-weight:800;font-size:13px
}
.brand b{display:block;font-size:16px;line-height:1.1}
.brand small{display:block;color:var(--muted);font-size:12px}
.nav{display:flex;gap:8px;flex-wrap:wrap}
.nav a{
  padding:9px 14px;border-radius:8px;color:var(--ink);font-size:14px;font-weight:600
}
.nav a:hover{background:#eef3fb}
.nav a.main{background:var(--blue);color:#fff}
.shell{width:min(1120px,calc(100% - 28px));margin:0 auto;padding:20px 0 32px}

.hero{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(280px,.8fr);
  gap:16px;align-items:start
}
.card{background:var(--white);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow)}
.check{padding:22px}
.kicker{color:var(--blue);font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.check h1{margin:8px 0 8px;font-size:28px;line-height:1.2}
.check p{margin:0 0 16px;color:var(--muted);font-size:15px;line-height:1.5}
.form{display:flex;gap:8px}
.form input{
  flex:1;min-height:48px;padding:0 14px;border:1px solid #c5d0dc;border-radius:10px;background:#fff
}
.form input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(13,76,211,.12)}
.form button{
  min-width:148px;border:0;border-radius:10px;background:var(--blue);color:#fff;font-weight:700;cursor:pointer
}
.form button:hover{background:var(--blue-2)}
.form button:disabled{opacity:.6;cursor:wait}

.result{display:none;margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.result.show{display:block}
.head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:12px}
.head strong{font-size:16px}
.badge{padding:4px 8px;border-radius:999px;font-size:12px;font-weight:700}
.badge.ok{background:#e8f6ee;color:var(--ok)}
.badge.bad{background:#fdecea;color:var(--bad)}
.dossier{display:grid;grid-template-columns:96px 1fr;gap:14px}
.dossier.no-photo{grid-template-columns:1fr}
.photo{display:none;width:96px;height:120px;overflow:hidden;border-radius:10px;background:#eef2f6}
.photo.show{display:block}
.photo img{width:100%;height:100%;object-fit:cover}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.fact{padding:10px 12px;border-radius:10px;background:#f6f8fb;min-width:0}
.fact.span{grid-column:1/-1}
.fact span{display:block;color:var(--muted);font-size:12px;margin-bottom:3px}
.fact b{display:block;font-size:14px;line-height:1.4;overflow-wrap:anywhere}
.note{margin:10px 0 0;color:var(--muted);font-size:13px}

.side{padding:16px}
.side h2{margin:0;font-size:18px}
.side-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.state{color:var(--muted);font-size:12px}
.list{display:grid;gap:6px}
.item{display:block;padding:10px 12px;border-radius:10px;background:#f6f8fb}
.item:hover{background:#eef3fb}
.item strong{display:block;font-size:14px;line-height:1.35}
.item span{display:block;margin-top:4px;color:var(--muted);font-size:12px}
.footer{margin-top:18px;color:var(--muted);font-size:13px}

.page{min-height:calc(100svh - 65px);display:grid;place-items:start center;padding:28px 14px}
.page .card{width:min(640px,100%);padding:22px}
.page h1{margin:8px 0 8px;font-size:26px}
.page p{margin:0 0 16px;color:var(--muted);line-height:1.5}
.links{display:flex;gap:8px;margin-bottom:10px}
.links a{padding:8px 12px;border-radius:8px;background:#eef3fb;font-weight:600;font-size:14px}
.stack{display:grid;gap:8px}
.stack input{min-height:48px;padding:0 14px;border:1px solid #c5d0dc;border-radius:10px}
.stack input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(13,76,211,.12)}
.stack button{min-height:48px;border:0;border-radius:10px;background:var(--blue);color:#fff;font-weight:700;cursor:pointer}
.msg{min-height:18px;margin-top:8px;font-size:14px}
.msg.error{color:var(--bad)}
.msg.ok{color:var(--ok)}

@media (max-width:860px){
  .hero{grid-template-columns:1fr}
  .bar-in,.nav{flex-wrap:wrap}
  .form{flex-direction:column}
  .facts{grid-template-columns:1fr}
  .dossier,.dossier.no-photo{grid-template-columns:1fr}
  .photo.show{margin:0 auto}
}