*{box-sizing:border-box}
body{margin:0;font-family:system-ui,Segoe UI,Roboto,Arial,sans-serif;color:#1a2230;background:#f4f6fa;line-height:1.5}
.wrap{max-width:960px;margin:0 auto;padding:0 20px}
.nav{background:#0d1b2a;color:#fff;padding:12px 0}
.nav .wrap{display:flex;align-items:center;justify-content:space-between}
.brand{color:#fff;text-decoration:none;font-weight:700;font-size:1.15rem}
.nav nav a{color:#cdd7e6;text-decoration:none;margin-left:18px}
.nav nav a:hover{color:#fff}
main.wrap{padding:28px 20px;min-height:60vh}
.hero{background:linear-gradient(120deg,#12325a,#1f6feb);color:#fff;padding:44px;border-radius:14px;margin-bottom:26px}
.hero h1{margin:0 0 8px;font-size:1.9rem}
.hero .lead{opacity:.9;margin:0 0 16px}
.cta{display:inline-block;background:#1f6feb;color:#fff;border:0;padding:11px 20px;border-radius:8px;text-decoration:none;font-weight:600;cursor:pointer;font-size:1rem}
.cta:hover{background:#1a5fd0}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px}
.card{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:18px;text-decoration:none;color:inherit;transition:.15s}
.card:hover{box-shadow:0 6px 18px rgba(20,40,80,.1);transform:translateY(-2px)}
.thumb{font-size:2.4rem;text-align:center}
.thumb.big{font-size:5rem}
.card h3{margin:10px 0 4px;font-size:1rem}
.price{color:#0d3b66;font-weight:700;margin:0}
.price.big{font-size:1.6rem}
.product{display:flex;gap:28px;align-items:center;background:#fff;padding:26px;border-radius:14px;border:1px solid #e2e8f0}
.muted{color:#5b6b82}
.tbl{width:100%;border-collapse:collapse;background:#fff;border-radius:10px;overflow:hidden;margin:14px 0}
.tbl th,.tbl td{padding:11px 14px;text-align:left;border-bottom:1px solid #eef2f7}
.tbl th{background:#0d3b66;color:#fff}
.tbl .total td{font-weight:700;background:#f0f5ff}
.form,.product form{display:flex;flex-direction:column;gap:12px;max-width:340px}
.form label{display:flex;flex-direction:column;gap:4px;font-size:.9rem;color:#33415c}
.form input,select{padding:9px;border:1px solid #cbd5e1;border-radius:7px;font-size:1rem}
.link{background:none;border:0;color:#d33;cursor:pointer;text-decoration:underline;font-size:.9rem}
.flash{padding:11px 14px;border-radius:8px;margin:12px 0}
.flash.ok{background:#e7f7ee;color:#0a7d43}
.flash.warn{background:#fff4e5;color:#a35200}
.flag{background:#0a7d43;color:#fff;padding:14px 18px;border-radius:10px;margin:16px 0;font-size:1.05rem}
.flag code{background:rgba(255,255,255,.2);padding:2px 8px;border-radius:5px}
.foot{background:#0d1b2a;color:#8ea0b8;padding:20px 0;margin-top:30px;font-size:.9rem}