*{box-sizing:border-box}
:root{
  --bg:#f4f7fb;
  --card:#ffffff;
  --line:#dbe4ef;
  --text:#17324d;
  --muted:#6d84a0;
  --primary:#1f7ae0;
  --primary-soft:#eaf3ff;
  --green:#179a57;
  --green-soft:#eefcf4;
  --violet-soft:#f4efff;
  --shadow:0 10px 28px rgba(25,54,91,.08);
  --radius:22px;
}
html,body{margin:0;padding:0}
body{
  min-height:100vh;
  font-family:Arial,Helvetica,sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at top left, rgba(31,122,224,.08), transparent 28%),
    radial-gradient(circle at bottom right, rgba(23,154,87,.08), transparent 26%),
    var(--bg);
}
.container{width:min(100%,900px);margin:0 auto;padding:18px 14px 40px}
.badge{
  display:inline-block;padding:8px 12px;border-radius:999px;background:var(--primary-soft);
  color:var(--primary);border:1px solid #cfe2ff;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em
}
h1{margin:14px 0 10px;font-size:38px;line-height:1.04;letter-spacing:-.04em;color:#0f2740}
h2{margin:0 0 6px;font-size:20px}
h3{margin:0 0 10px;font-size:16px}
.lead,.section-head p,code,.muted{color:var(--muted)}
.lead,.section-head p{line-height:1.6}
.card,.hero-total{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:18px;margin-bottom:14px
}
.hero{padding:8px 4px 16px}
.hero-total{
  background:linear-gradient(180deg,#f3fff8 0%, #ebfff4 100%);
  border-color:#cdebd9;
}
.hero-total-label{font-size:12px;text-transform:uppercase;letter-spacing:.10em;font-weight:800;color:var(--green)}
.hero-total-value{margin:8px 0 6px;font-size:46px;line-height:1;font-weight:900;letter-spacing:-.05em;color:#10653a}
.hero-total-sub{color:#4f7d64}
.status-grid,.row,.stats-grid,.compare-table,.price-list{display:grid;gap:12px}
.status-box,.mini-card,.stat,.price-row,.compare-row,.empty-box{
  border:1px solid var(--line);border-radius:18px;background:#fff;padding:14px
}
.status-box{
  display:flex;flex-direction:column;gap:6px
}
.status-box strong{font-size:18px}
.status-box small{color:var(--muted)}
.btn{
  border:none;border-radius:16px;padding:14px 16px;font-size:16px;font-weight:700;cursor:pointer
}
.btn-primary{width:100%;background:var(--primary);color:#fff}
.btn-secondary{width:100%;background:#fff;color:var(--text);border:1px solid #c8d8ea}
.form{display:grid;gap:14px}
.field{display:block}
.field>span{display:block;margin-bottom:8px;color:#22405f;font-size:14px;font-weight:700}
.input-wrap{position:relative}
input,select{
  width:100%;border:1px solid #c8d8ea;background:#fff;color:var(--text);border-radius:16px;
  padding:15px 44px 15px 14px;font-size:16px;outline:none
}
select{padding-right:14px}
input:focus,select:focus{border-color:#8bb8ef;box-shadow:0 0 0 4px rgba(31,122,224,.10)}
.input-wrap i{position:absolute;right:14px;top:50%;transform:translateY(-50%);font-style:normal;color:var(--muted);font-size:14px}
.row-cards{grid-template-columns:1fr}
.mini-card{display:flex;flex-direction:column;gap:8px;background:#f9fbff}
.mini-card strong{font-size:22px;line-height:1.15}
.mini-card small{color:var(--muted)}
.mini-card-soft{background:var(--violet-soft)}
.mini-card-green{background:var(--green-soft);border-color:#caead7}
.compare-card{background:linear-gradient(180deg,#fcfaff 0%,#f7f1ff 100%);border-color:#e6dbff}
.stats-grid{grid-template-columns:1fr}
.stat{min-height:96px;display:flex;flex-direction:column;justify-content:space-between;gap:10px}
.stat strong{font-size:18px;line-height:1.28}
.stat-accent{background:var(--primary-soft);border-color:#cfe2ff}
.price-row{
  display:flex;justify-content:space-between;align-items:center;gap:10px
}
.compare-row{
  display:grid;grid-template-columns:1fr;gap:6px
}
.compare-head{background:#f7faff;border-color:#d8e6fb;font-weight:700}
.empty-box{color:var(--muted);border-style:dashed;background:#fbfcfe}
.debug{
  padding:14px;border-radius:18px;border:1px dashed #e2b4b4;background:#fff7f7;color:#a33b3b;
  white-space:pre-wrap;font-size:13px;line-height:1.45;margin-top:12px
}
.table-head{margin-top:18px}
@media (min-width:700px){
  .status-grid,.row{grid-template-columns:1fr 1fr}
  .row-cards{grid-template-columns:1fr 1fr}
  .stats-grid{grid-template-columns:1fr 1fr}
  .compare-row{grid-template-columns:1.2fr .9fr .9fr .8fr;align-items:center;gap:10px}
}
@media (min-width:860px){
  .status-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:520px){
  h1{font-size:32px}
  .hero-total-value{font-size:40px}
}