:root{
  --accent:#2B5CF0; --accent-dark:#2355E8; --ink:#0C1440; --muted:#596298;
  --light:#EEF2FF; --lighter:#F5F7FE; --line:#E1E6F5; --green:#1A9E6A; --amber:#F5A623;
  --bg:#EDF0FA; --surface:#fff;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Helvetica Neue',-apple-system,Segoe UI,Arial,sans-serif;color:var(--ink);
  background:var(--bg);line-height:1.6;font-size:15px;-webkit-font-smoothing:antialiased}
a{color:var(--accent-dark);text-decoration:none}
img{max-width:100%}

.toolbar{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.93);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);display:flex;align-items:center;gap:14px;padding:11px 22px;flex-wrap:wrap}
.toolbar img{height:24px}
.toolbar .sp{flex:1}
.toolbar a.back{font-size:13px;color:var(--muted);font-weight:600;padding:7px 13px;border-radius:9px}
.toolbar a.back:hover{background:var(--light);color:var(--accent-dark)}
.toolbar button{background:var(--accent);color:#fff;border:0;border-radius:10px;padding:9px 17px;
  font-size:13.5px;font-weight:700;cursor:pointer;transition:.2s}
.toolbar button:hover{background:var(--accent-dark)}

.page{max-width:900px;margin:22px auto 90px;background:var(--surface);border:1px solid var(--line);
  border-radius:18px;box-shadow:0 8px 30px rgba(12,20,64,.06);padding:46px 52px}

.hero{background:linear-gradient(135deg,#0C1440,#13205c);color:#fff;border-radius:16px;padding:30px 32px;margin-bottom:26px}
.hero .kick{font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#9DB4FF}
.hero h1{font-size:26px;margin:9px 0 6px;line-height:1.18}
.hero .sub{color:#C8D4FF;font-size:15px;max-width:680px}
.hero .meta{color:#7E92D6;font-size:12px;margin-top:14px;border-top:1px solid rgba(255,255,255,.12);padding-top:12px}

h2.sec{font-size:19px;color:var(--ink);margin:28px 0 8px;padding-bottom:6px;border-bottom:2px solid var(--light)}
h3.sub{font-size:15.5px;color:var(--accent-dark);margin:20px 0 6px;font-weight:800}
p{margin:9px 0;color:#26314f;text-align:justify}
ul{margin:8px 0 8px 4px;padding:0;list-style:none}
ul li{position:relative;padding:4px 0 4px 22px;color:#26314f}
ul li::before{content:"";position:absolute;left:4px;top:13px;width:6px;height:6px;border-radius:50%;background:var(--accent)}

.note{border-radius:11px;padding:13px 17px;font-size:13.6px;margin:14px 0;border-left:4px solid var(--accent);background:var(--light)}
.note.ok{background:#EAF7F1;border-left-color:var(--green)}
.note.warn{background:#FFF6E5;border-left-color:var(--amber)}
.note.info{background:#EEF2FF;border-left-color:var(--accent)}
.note.fund{background:#EFEAFB;border-left-color:#7C5CFF}

table.data{width:100%;border-collapse:collapse;margin:14px 0;font-size:13px}
table.data th,table.data td{border:1px solid var(--line);padding:8px 11px;text-align:left;vertical-align:top}
table.data th{background:var(--light);color:var(--ink);font-weight:800;font-size:12px;text-transform:uppercase;letter-spacing:.02em}
table.data td.num{text-align:right;white-space:nowrap;font-weight:700}
table.data tr:nth-child(even) td{background:var(--lighter)}
.subtotal{display:flex;justify-content:space-between;align-items:center;background:var(--ink);color:#fff;
  border-radius:11px;padding:13px 18px;margin:12px 0;font-weight:700}
.subtotal .v{font-size:18px;color:#9DB4FF}

.fiche{border:1px solid var(--line);border-radius:13px;padding:16px 18px;margin:11px 0;background:var(--surface)}
.fiche .b{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  padding:3px 9px;border-radius:20px;background:var(--light);color:var(--accent-dark);margin-bottom:8px}
.fiche .b.cib{background:var(--accent);color:#fff}
.fiche .b.rec{background:#FFF1D6;color:#9A6A00}
.fiche .b.hw{background:#E8FAF2;color:#0d7a50}
.fiche h4{font-size:16px;margin-bottom:6px}
.fiche .kv{font-size:13px;margin:3px 0;color:#26314f}
.fiche .kv b{color:var(--ink)}
.fiche .price{margin-top:7px;font-size:13px;font-weight:700;color:var(--ink);background:var(--lighter);
  border:1px solid var(--line);border-radius:8px;padding:7px 11px}
.grouphead{font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);
  margin:24px 0 4px}

.foot{text-align:center;color:var(--muted);font-size:11.5px;margin-top:34px;padding-top:18px;border-top:1px solid var(--line)}

@media print{
  body{background:#fff}
  .toolbar{display:none}
  .page{margin:0;border:0;box-shadow:none;border-radius:0;max-width:none;padding:14mm 15mm}
  .hero{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  table.data th,.subtotal,.fiche .b,.hero,.note{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  h2.sec,h3.sub,.fiche,.note,table.data tr,.subtotal{break-inside:avoid}
  @page{size:A4;margin:12mm}
}
@media(max-width:680px){
  .page{padding:24px 18px;margin:12px;border-radius:14px}
  .hero{padding:22px 18px}.hero h1{font-size:21px}
  table.data{font-size:12px}table.data th,table.data td{padding:6px 7px}
}