/* Portal klienta (moje.…) — osobny, prosty wygląd, czytelny na telefonie. */
:root{--bg:#F4F5F2;--surface:#fff;--ink:#15211C;--muted:#5B6A62;--line:#D8DED9;--accent:#1E5B47;--accent-ink:#fff;
  --accent-soft:#DCEAE3;--brass:#8C6624;--brass-soft:#F4EBD8;--danger:#A9372B;--danger-soft:#F8E3E0}
@media (prefers-color-scheme:dark){:root{--bg:#0F1513;--surface:#161F1B;--ink:#E4ECE7;--muted:#93A39B;--line:#2A3731;
  --accent:#62C29C;--accent-ink:#0B1712;--accent-soft:#1B392D;--brass:#D4AC63;--brass-soft:#382D18;--danger:#E5806F;--danger-soft:#3A1F1B}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 -apple-system,"Segoe UI",system-ui,sans-serif}
a{color:var(--accent)}
.top{background:var(--surface);border-bottom:1px solid var(--line)}
.top-in,.wrap{max-width:720px;margin:0 auto;padding:12px 16px}
.top-in{display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{font-weight:700;text-decoration:none;color:var(--ink);display:flex;flex-direction:column;line-height:1.2}
.brand small{font-weight:500;color:var(--muted);font-size:.8rem}
.nav{display:flex;gap:6px;align-items:center}
.wrap{padding-top:20px;padding-bottom:48px;display:flex;flex-direction:column;gap:14px}
h1{font-size:1.5rem;margin:0 0 4px}
h2{font-size:1.1rem;margin:0 0 8px}
.muted{color:var(--muted)}
.small{font-size:.88rem}
.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px}
.narrow{max-width:420px;width:100%;margin:0 auto}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font:inherit;font-weight:600;cursor:pointer;
  border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:10px;padding:10px 16px;
  text-decoration:none;min-height:44px}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.sm{padding:6px 12px;min-height:36px;font-size:.9rem}
.btn.link{border:0;background:none;color:var(--accent);padding:0;min-height:0;font-weight:600}
.btn.block{width:100%}
form p{margin:0 0 12px}
label{display:block;font-weight:600;font-size:.92rem;margin-bottom:4px}
input[type=email],input[type=password],input[type=text]{width:100%;font:inherit;color:inherit;padding:10px 12px;
  border:1px solid var(--line);border-radius:10px;background:var(--surface);min-height:46px}
input[name=code]{font-size:1.5rem;letter-spacing:.3em;text-align:center;font-variant-numeric:tabular-nums}
.check label{display:flex;gap:8px;font-weight:500;align-items:flex-start}
.check input{margin-top:4px;width:18px;height:18px;accent-color:var(--accent)}
.help{font-size:.82rem;color:var(--muted);margin-top:2px}
.errorlist{color:var(--danger);font-size:.88rem;margin:4px 0 0;padding:0;list-style:none}
.messages{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.messages li{padding:10px 12px;border-radius:10px;background:var(--accent-soft);color:var(--accent);font-weight:600}
.messages li.error{background:var(--danger-soft);color:var(--danger)}
.summary{display:flex;flex-wrap:wrap;gap:10px}
.summary .stat{flex:1 1 140px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 16px}
.stat b{display:block;font-size:1.35rem}
.policy{display:flex;flex-direction:column;gap:10px}
.policy-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.policy-head h2{margin:0}
.pill{display:inline-block;border-radius:20px;padding:2px 10px;font-size:.8rem;font-weight:700;white-space:nowrap;
  background:var(--accent-soft);color:var(--accent)}
.pill.warn{background:var(--brass-soft);color:var(--brass)}
.pill.danger{background:var(--danger-soft);color:var(--danger)}
dl.props{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0}
dl.props dt{color:var(--muted);font-size:.9rem}
dl.props dd{margin:0;font-weight:600}
.alert{padding:10px 12px;border-radius:10px;background:var(--danger-soft);color:var(--danger);font-weight:600}
.qr svg{width:200px;height:200px;background:#fff;padding:8px;border-radius:8px}
code{font-family:ui-monospace,Consolas,monospace;word-break:break-all}
.foot{max-width:720px;margin:0 auto;padding:0 16px 32px;color:var(--muted);font-size:.82rem}
.tabs{border-top:1px solid var(--line)}
.tabs-in{max-width:720px;margin:0 auto;padding:0 8px;display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
.tabs a{flex:1 1 0;text-align:center;padding:12px 12px 10px;text-decoration:none;color:var(--muted);font-weight:600;font-size:.95rem;
  border-bottom:3px solid transparent;white-space:nowrap}
.tabs a.on{color:var(--accent);border-bottom-color:var(--accent)}
.gauge{display:flex;align-items:center;gap:16px}
.ring{--p:0;width:96px;height:96px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
  background:conic-gradient(var(--accent) calc(var(--p)*1%),var(--line) 0)}
.ring b{width:76px;height:76px;border-radius:50%;background:var(--surface);display:grid;place-items:center;font-size:1.4rem}
.bar{height:10px;border-radius:6px;background:var(--line);overflow:hidden}
.bar span{display:block;height:100%;background:var(--accent)}
.items{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.item{display:flex;flex-direction:column;gap:6px}
.item-head{display:flex;gap:10px;align-items:flex-start}
.item-ico{font-size:1.2rem;line-height:1.3}
.item-actions{display:flex;flex-wrap:wrap;gap:6px;padding-left:30px}
.item-actions form{margin:0}
.weight{font-size:.78rem;color:var(--muted);white-space:nowrap;margin-left:auto}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:.82rem;color:var(--muted)}
.item-head>div{flex:1;min-width:0}
.item .pill,.policy .pill{white-space:normal}
.item-actions .btn{min-height:40px}
body{overflow-x:hidden}
.pay{border-top:1px solid var(--line);padding-top:10px;display:flex;flex-direction:column;gap:8px}
.pay-row{margin:0;border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.pay-row.open{border-color:#C9A227;background:#FFF6D6}
.pay-row.late{border-color:#B3261E;background:#B3261E;color:#fff}
.pay-row.late .pay-check input{accent-color:#fff}
.pay-row.paid{border-color:var(--accent);background:var(--accent-soft)}
.pay-check{display:flex;gap:12px;align-items:center;margin:0;font-weight:500;cursor:pointer}
.pay-check input{width:24px;height:24px;flex:0 0 auto;accent-color:var(--accent)}
.pay-check span{display:flex;flex-direction:column}
.pay-row.late .small{color:#fff;font-weight:600}
@media (prefers-color-scheme:dark){.pay-row.open{border-color:#C9A227;background:#3A3110}}