:root { --ink:#101a2b; --muted:#57637a; --line:#ccd6e5; --brand:#0f294f; --brand-dark:#0b1f3e; --surface:#fff; --soft:#f4f7fc; --brand-soft:#e8eff9; --danger:#b42318; font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:var(--ink); background:var(--soft); }
* { box-sizing:border-box; } body { margin:0; min-width:320px; } .app-shell { width:min(100%,640px); min-height:100vh; margin:0 auto; background:var(--surface); }
.topbar { display:flex; align-items:center; gap:13px; padding:21px 20px 18px; border-bottom:1px solid var(--line); } .brand-mark { display:grid; place-items:center; width:40px; height:40px; border-radius:12px; color:#fff; font-weight:800; font-size:22px; background:var(--brand); } .topbar p { margin:0 0 2px; color:var(--brand); font-size:11px; font-weight:800; letter-spacing:.13em; } h1 { margin:0; font-size:18px; letter-spacing:-.02em; }
.topbar-action { min-height:36px; margin-left:auto; padding:0 13px; background:var(--brand-soft); color:var(--brand); font-size:13px; }
.offer-archive { padding:26px 20px 40px; } .new-offer { width:100%; margin:0 0 20px; } .archive-status { margin:0; color:var(--muted); font-size:14px; } .offer-list { display:grid; gap:10px; list-style:none; padding:0; margin:0; } .offer-card { display:flex; align-items:stretch; border:1px solid var(--line); border-radius:11px; background:#fff; overflow:hidden; } .offer-list a { display:grid; flex:1; grid-template-columns:1fr auto; gap:4px 12px; padding:15px; color:var(--ink); text-decoration:none; } .offer-list a:active { background:var(--brand-soft); } .offer-list strong { grid-column:1/-1; font-size:15px; } .offer-list span { color:var(--muted); font-size:12px; overflow-wrap:anywhere; } .offer-total { color:var(--brand); font-size:14px; white-space:nowrap; } .offer-total:empty { display:none; } .edit-offer { min-height:auto; padding:0 16px; border-left:1px solid var(--line); border-radius:0; background:var(--brand-soft); color:var(--brand); font-size:14px; }
.progress { padding:19px 20px 10px; } .progress ol { display:flex; justify-content:space-between; gap:3px; list-style:none; padding:0; margin:0; } .progress li { display:grid; justify-items:center; gap:5px; color:#8b98ad; font-size:10px; font-weight:600; text-align:center; width:25%; } .progress b { display:grid; place-items:center; width:27px; height:27px; border-radius:50%; background:#e7edf6; color:#697890; font-size:12px; z-index:1; } .progress .active { color:var(--brand); } .progress .active b { background:var(--brand); color:#fff; } .progress-line { height:2px; background:#e7edf6; transform:translateY(14px); margin:0 12%; } .progress-line span { display:block; height:100%; width:0; background:var(--brand); transition:width .2s ease; }
form { padding:14px 20px 110px; } .form-step { display:none; } .form-step.active { display:block; } .section-heading { margin:0 0 22px; } h2 { margin:0 0 5px; font-size:23px; letter-spacing:-.035em; } .section-heading p, small { color:var(--muted); line-height:1.45; } .section-heading p { margin:0; font-size:14px; } label { display:block; position:relative; margin:0 0 18px; font-size:14px; font-weight:700; } label strong { color:var(--danger); } input,textarea { width:100%; min-height:50px; margin-top:7px; padding:12px 13px; border:1px solid #b8c6d8; border-radius:9px; background:#fff; color:var(--ink); font:inherit; font-size:16px; font-weight:400; outline:none; transition:border .15s,box-shadow .15s; } textarea { resize:vertical; } input:focus,textarea:focus { border-color:var(--brand); box-shadow:0 0 0 3px #dce7f7; } input[type=file] { padding:11px; font-size:13px; } small { display:block; margin-top:5px; font-size:12px; font-weight:400; }
.catalogue-menu { position:absolute; z-index:20; top:calc(100% - 18px); left:0; right:0; max-height:270px; overflow-y:auto; border:1px solid #b8c6d8; border-radius:10px; background:#fff; box-shadow:0 10px 25px rgba(15,41,79,.18); } .catalogue-option { display:flex; justify-content:space-between; gap:12px; width:100%; min-height:52px; padding:12px 14px; border-radius:0; border-bottom:1px solid #e7edf6; background:#fff; color:var(--ink); text-align:left; font-size:15px; } .catalogue-option:last-child { border-bottom:0; } .catalogue-option:active { background:var(--brand-soft); } .catalogue-option span { flex:1; } .catalogue-option b { align-self:center; color:var(--brand); font-size:13px; white-space:nowrap; }
.card { padding:16px; margin:0 0 16px; border:1px solid var(--line); border-radius:13px; background:#fff; } .primary-product { border-color:#aec2df; background:#f3f7fc; } h3 { margin:0 0 17px; font-size:16px; } .compact { display:grid; gap:0; } .compact label:last-child,.card label:last-child { margin-bottom:0; }
.service { padding:0 0 15px; margin:0 0 15px; border-bottom:1px solid var(--line); } .service:last-child { border:0; padding:0; margin:0; } .service > div { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; } .service b { font-size:14px; } .service label { margin:0; }
.toggle { width:50px; height:30px; } .toggle input { position:absolute; opacity:0; width:1px; min-height:1px; } .toggle span { display:block; width:50px; height:30px; border-radius:99px; background:#cbd5e3; transition:background .15s; } .toggle span::after { display:block; width:24px; height:24px; margin:3px; border-radius:50%; background:white; box-shadow:0 1px 3px #667; content:""; transition:transform .15s; } .toggle input:checked + span { background:var(--brand); } .toggle input:checked + span::after { transform:translateX(20px); }
.photo-preview { display:flex; gap:8px; flex-wrap:wrap; margin:-6px 0 20px; } .photo-preview img { width:84px; height:84px; border-radius:8px; object-fit:cover; } .form-error { min-height:20px; margin-bottom:10px; color:var(--danger); font-size:13px; font-weight:700; } .form-nav { position:fixed; display:flex; gap:10px; align-items:center; justify-content:flex-end; left:0; right:0; bottom:0; width:min(100%,640px); margin:auto; padding:14px 20px max(14px,env(safe-area-inset-bottom)); border-top:1px solid var(--line); background:rgba(255,255,255,.96); backdrop-filter:blur(8px); } button { min-height:50px; padding:0 20px; border:0; border-radius:9px; background:var(--brand); color:#fff; cursor:pointer; font:700 15px inherit; } button:active { background:var(--brand-dark); } button.secondary { margin-right:auto; background:var(--brand-soft); color:var(--brand-dark); }
#print-offer { display:none; }
@media print { body { background:#fff; } .app-shell { display:none; } #print-offer { display:block; padding:10mm; color:#101a2b; font:11pt Arial,sans-serif; } #print-offer h1 { font-size:22pt; color:#0f294f; margin:0 0 4mm; } #print-offer h2 { font-size:14pt; border-bottom:1px solid #aec2df; padding-bottom:2mm; margin:7mm 0 3mm; } #print-offer p { margin:1.5mm 0; } #print-offer .pdf-item { display:flex; justify-content:space-between; gap:8mm; padding:2mm 0; border-bottom:1px solid #e2e8f2; } #print-offer .pdf-note { white-space:pre-wrap; } #print-offer .pdf-images { display:flex; gap:3mm; flex-wrap:wrap; margin-top:3mm; } #print-offer img { width:48mm; height:36mm; object-fit:cover; } }
@media (min-width:530px) { .compact { grid-template-columns:1fr 1fr; column-gap:14px; } }