:root{
  --bg:#ffffff; --surface:#F6FAFA; --ink:#1F3345; --on-ink:#ffffff; --muted:#5B6E7C; --line:#E4ECEE;
  --brand:#0B7F8C; --on-brand:#ffffff; --brand-tint:rgba(11,127,140,.1);
  --clean:#0F9BA8; --green:#3E9F4B; --snow:#4A86E8; --amber:#E9A23B;
  --clean-tint:rgba(15,155,168,.11); --green-tint:rgba(62,159,75,.12); --snow-tint:rgba(74,134,232,.12); --amber-tint:rgba(233,162,59,.17);
  --shadow:0 1px 2px rgba(31,51,69,.05), 0 16px 36px -18px rgba(31,51,69,.18);
  --display:"Bricolage Grotesque","Segoe UI",system-ui,-apple-system,sans-serif;
  --body:"Figtree",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color-scheme:light;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 20px); -webkit-text-size-adjust:100%}
body{margin:0; background:var(--surface); color:var(--ink); font-family:var(--body); font-size:1.0625rem; line-height:1.6; -webkit-font-smoothing:antialiased; min-height:100%}
h1,h2,h3{font-family:var(--display); line-height:1.15; letter-spacing:-.015em; margin:0; font-weight:700}
p{margin:0}
ul,ol{margin:0; padding:0; list-style:none}
button{font:inherit}
:focus-visible{outline:3px solid var(--brand); outline-offset:3px; border-radius:8px}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

.topbar{padding:16px clamp(16px,4vw,32px); padding-top:calc(env(safe-area-inset-top,0px) + 16px); display:flex; align-items:center; justify-content:space-between; gap:12px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); font-family:var(--display); font-weight:700; font-size:1.05rem}
.brand svg{flex:none}
.q1{fill:var(--clean)} .q2{fill:var(--green)} .q3{fill:var(--snow)} .q4{fill:var(--amber)}
.exit{font-size:.92rem; color:var(--muted); text-decoration:none; padding:8px 10px}
.exit:hover{color:var(--ink)}

.shell{max-width:720px; margin:0 auto; padding:8px clamp(16px,4vw,32px) 72px}

.progress-wrap{margin-bottom:28px}
.progress-track{height:6px; border-radius:999px; background:var(--line); overflow:hidden}
.progress-fill{height:100%; border-radius:999px; background:var(--brand); width:8%; transition:width .35s cubic-bezier(.2,.7,.2,1)}
.progress-label{margin-top:10px; font-size:.88rem; color:var(--muted); font-weight:600}

.card{background:var(--bg); border:1px solid var(--line); border-radius:28px; padding:clamp(22px,4vw,36px); box-shadow:var(--shadow)}
.card h2{font-size:clamp(1.4rem,3.4vw,1.85rem)}
.card .sub{margin-top:8px; color:var(--muted); max-width:52ch}

.step{animation:fadein .35s cubic-bezier(.2,.7,.2,1) both}
@keyframes fadein{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}

/* Tiles (kroki wyboru) */
.tiles{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; margin-top:24px}
.tile{display:flex; flex-direction:column; align-items:flex-start; gap:10px; text-align:left; padding:18px 16px; border-radius:18px; border:1.5px solid var(--line); background:var(--bg); cursor:pointer; transition:border-color .15s, background .15s, transform .1s}
.tile:hover{border-color:var(--brand); background:var(--brand-tint)}
.tile:active{transform:scale(.98)}
.tile .ic{font-size:1.5rem; line-height:1}
.tile .tl{font-weight:600; font-size:.98rem; line-height:1.25}
.tile .ic img{width: 150%}
.tile[aria-pressed="true"]{border-color:var(--brand); background:var(--brand-tint); box-shadow:0 0 0 1px var(--brand) inset}

/* Formularz pól dynamicznych */
.fields{margin-top:24px; display:grid; gap:22px}
.field{display:grid; gap:10px}
.field > label.flabel{font-weight:600; font-size:.98rem}
.numfield{display:flex; align-items:center; gap:10px; max-width:280px; width:100%}
.numfield input{font:inherit; font-weight:600; width:100%; min-width:0; flex:1 1 auto; text-align:center; border:1.5px solid var(--line); border-radius:14px; padding:12px 8px; min-height:48px}
.numfield input:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-tint)}
.numfield .unit{color:var(--muted); font-size:.92rem; white-space:nowrap}
.step-btn{width:40px; height:40px; border-radius:12px; border:1.5px solid var(--line); background:var(--bg); font-size:1.15rem; font-weight:600; cursor:pointer; flex:none}
.step-btn:hover{border-color:var(--brand); color:var(--brand)}

.opts{display:flex; flex-wrap:wrap; gap:8px}
.opt{padding:10px 16px; border-radius:999px; border:1.5px solid var(--line); background:var(--bg); font-size:.94rem; font-weight:600; cursor:pointer; transition:border-color .15s, background .15s, color .15s}
.opt:hover{border-color:var(--brand)}
.opt[aria-pressed="true"]{background:var(--ink); color:var(--on-ink); border-color:var(--ink)}
.check{display:flex; align-items:center; gap:10px; padding:11px 4px; border-bottom:1px solid var(--line); cursor:pointer}
.check:last-child{border-bottom:0}
.check input{width:19px; height:19px; accent-color:var(--brand); flex:none}
.check span{font-size:.97rem}
.hint{font-size:.86rem; color:var(--muted)}

.actions{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:32px}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:12px 24px; border-radius:999px; font:600 1rem/1 var(--body); text-decoration:none; border:1.5px solid transparent; cursor:pointer; transition:transform .15s, background .15s, border-color .15s, opacity .15s}
.btn-primary{background:var(--brand); color:var(--on-brand)}
.btn-primary:hover{background:#096B77}
.btn-primary[disabled]{opacity:.45; cursor:not-allowed}
.btn-ghost{border-color:var(--line); background:transparent; color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink)}

/* Wynik */
.result-badges{display:flex; flex-wrap:wrap; gap:8px; margin-top:20px}
.badge{display:inline-flex; align-items:center; gap:7px; padding:9px 14px; border-radius:999px; background:var(--surface); border:1px solid var(--line); font-size:.92rem; font-weight:600}
.price-box{margin-top:28px; padding:26px 24px; border-radius:22px; background:var(--brand-tint); border:1px solid rgba(11,127,140,.25); text-align:center}
.price-box .lbl{font-size:.92rem; font-weight:600; color:var(--brand-ink,#0B6F79); letter-spacing:.01em}
.price-box .amt{margin-top:8px; font-family:var(--display); font-size:clamp(2rem,6vw,2.7rem); font-weight:750; color:var(--ink)}
.price-box .per{font-size:1rem; font-weight:500; color:var(--muted); margin-left:4px}
.disclaimer{margin-top:18px; font-size:.9rem; color:var(--muted); line-height:1.55}
.final-actions{margin-top:28px; display:flex; flex-wrap:wrap; gap:12px}

.stepper-dots{display:flex; gap:6px; margin-top:6px}
.stepper-dots span{width:6px; height:6px; border-radius:50%; background:var(--line)}
.stepper-dots span.done{background:var(--brand)}