/* Konta i panel administratora v2. Wygląd 1:1 z makiety badania/prototypy/montaz-ux/2026-10-01-makieta-v2/konto.html.
   Bez atrybutów style (CSP style-src 'self'). */
:root{--bg:#f7f6f1;--card:#fff;--ink:#17180f;--mute:#7c7c71;--faint:#b4b2a7;--line:#e4e2d9;--line2:#d6d4ca;
  --soft:#efeee8;--seg:#ecebe4;--acc:#4d5a2c;--acc-soft:#eceee2;--pend:#fff1b8;--rec:#e0472d;--r:20px}
*{box-sizing:border-box}
html,body{min-height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.5 "Funnel Sans",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
button,input{font:inherit;color:inherit}
[hidden]{display:none!important}
h1{font-size:30px;font-weight:500;letter-spacing:-.035em;line-height:1.1;margin:0}
h2{font-size:18px;font-weight:500;letter-spacing:-.02em;margin:0}
.hint{color:var(--mute);font-size:13.5px;margin:0}
.tnum{font-variant-numeric:tabular-nums}


.top{display:flex;align-items:center;gap:18px;padding:14px 28px;max-width:1560px;margin:0 auto}
.logo{font-weight:600;letter-spacing:-.02em;font-size:17px}
.grow{flex:1}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 18px;border-radius:999px;border:1px solid var(--line2);background:transparent;font-size:14px;font-weight:500;cursor:pointer;white-space:nowrap}
.btn:hover{background:var(--card)}
.btn.pri{background:var(--ink);border-color:var(--ink);color:#fff}
.btn.pri:hover{background:#000}
.btn.sm{height:32px;padding:0 13px;font-size:13px}
.btn.lg{height:48px;padding:0 24px;font-size:15px}
.btn.wide{width:100%}
.btn.danger{color:var(--rec);border-color:#efc7bf}
.link{border:0;background:none;padding:0;color:var(--mute);font-size:13.5px;cursor:pointer;text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:3px}
.link:hover{color:var(--ink)}
.seg{display:inline-flex;padding:3px;border-radius:999px;background:var(--seg)}
.seg button{border:0;background:transparent;color:var(--mute);height:30px;padding:0 14px;border-radius:999px;font-size:13px;cursor:pointer}
.seg button.on{background:var(--ink);color:#fff}

/* ---------- logowanie i kreator: jedna karta na środku ---------- */
.center{min-height:calc(100vh - 80px);display:grid;place-items:center;padding:20px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:28px;display:grid;gap:16px;align-content:start}
.auth{width:min(400px,100%)}
.auth h1{font-size:26px}
.field{display:grid;gap:6px;font-size:13px;color:var(--mute)}
.field input{height:44px;border-radius:12px;border:1px solid var(--line);background:var(--card);padding:0 14px;font-size:15px;color:var(--ink)}
.field input:focus{outline:2px solid var(--ink);outline-offset:-1px;border-color:transparent}
.or{display:flex;align-items:center;gap:12px;color:var(--faint);font-size:12.5px}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
.g{width:18px;height:18px}
.row{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.err{background:#fdecea;color:#9b2c1c;border-radius:12px;padding:10px 14px;font-size:13.5px}
.big-ico{width:56px;height:56px;border-radius:16px;background:var(--soft);display:grid;place-items:center}
.code{display:flex;justify-content:center;gap:8px}
.code input{width:48px;min-width:0;height:56px;padding:0;text-align:center;font-size:24px;border-radius:12px;border:1px solid var(--line);background:var(--card);font-variant-numeric:tabular-nums}
.code input:nth-child(3){margin-right:10px}
.code input:focus{outline:2px solid var(--ink);outline-offset:-1px;border-color:transparent}
.meter{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.meter i{height:4px;border-radius:2px;background:var(--line)}
.meter i.on{background:var(--ink)}

/* kroki kreatora jako kafelki */
.steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.st{border:1px solid var(--line);border-radius:16px;padding:12px;display:grid;gap:6px;justify-items:start;font-size:13px;color:var(--mute)}
.st b{color:var(--ink);font-weight:500;font-size:14px}
.st.on{border-color:var(--ink)}
.st.done{background:var(--acc-soft);border-color:transparent}
.tick{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--seg);font-size:12px}
.st.done .tick{background:var(--acc);color:#fff}
.st.on .tick{background:var(--ink);color:#fff}
.wizard{width:min(520px,100%)}
.qr{display:grid;grid-template-columns:150px 1fr;gap:18px;align-items:center}
.qr svg{width:150px;height:150px;border-radius:12px;border:1px solid var(--line)}
.secret{font:13px ui-monospace,monospace;background:var(--soft);border-radius:10px;padding:8px 10px;word-break:break-all}
.codes{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;font:15px ui-monospace,monospace}
.codes span{background:var(--soft);border-radius:10px;padding:8px;text-align:center}

/* ---------- konto i panel ---------- */
.page{max-width:1160px;margin:0 auto;padding:10px 28px 40px;display:grid;gap:18px}
.bento{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.tile{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;display:grid;gap:2px;text-align:left;cursor:pointer}
.tile strong{font-size:28px;font-weight:500;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.tile span{font-size:13px;color:var(--mute);display:flex;gap:6px;align-items:center}
.tile.on{border-color:var(--ink)}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--faint)}
.dot.active{background:var(--acc)}.dot.pending{background:#d9b400}.dot.disabled{background:var(--rec)}.dot.deleted{background:var(--line2)}
.search{display:flex;gap:10px}
.search input{flex:1;height:40px;border-radius:999px;border:1px solid var(--line);background:var(--card);padding:0 16px}
.adm{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:18px;align-items:start}
.list{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.u{display:grid;grid-template-columns:36px minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:12px 16px;border-top:1px solid var(--line);width:100%;border-left:0;border-right:0;border-bottom:0;background:none;text-align:left;cursor:pointer}
.u:first-child{border-top:0}
.u:hover,.u.on{background:var(--soft)}
.av{width:36px;height:36px;border-radius:50%;background:var(--seg);display:grid;place-items:center;font-weight:500;font-size:13px}
.u b{font-weight:500;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.u small{color:var(--mute);font-size:12.5px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chips{display:flex;gap:4px}
.chip{font-size:11.5px;border-radius:999px;padding:2px 8px;background:var(--seg);color:var(--mute);white-space:nowrap}
.chip.admin{background:var(--ink);color:#fff}
.side h2{display:flex;gap:10px;align-items:center}
.facts{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:13.5px;margin:0}
.facts dt{color:var(--mute)}
.facts dd{margin:0}
.acts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.log{display:grid;gap:0;font-size:13.5px}
.log div{display:grid;grid-template-columns:120px 1fr;gap:10px;padding:8px 0;border-top:1px solid var(--line)}
.log time{color:var(--mute);font-variant-numeric:tabular-nums}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink);color:#fff;border-radius:999px;padding:10px 18px;font-size:14px;opacity:0;transition:opacity .2s;pointer-events:none}
.toast.on{opacity:1}
.acc{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.acc .card{padding:20px}
.ok{color:var(--acc);font-weight:500}
@media (max-width:900px){.adm{grid-template-columns:1fr}.bento{grid-template-columns:repeat(2,1fr)}.acc{grid-template-columns:1fr}.steps3{grid-template-columns:1fr}}

/* tylko w aplikacji */
.okmsg{background:var(--acc-soft);color:var(--acc);border-radius:12px;padding:10px 14px;font-size:13.5px}
.btn[aria-busy=true]{opacity:.6;pointer-events:none}
a.btn{text-decoration:none;color:inherit}
a.btn.pri{color:#fff}
.qr .svg{width:150px;height:150px;border-radius:12px;border:1px solid var(--line);overflow:hidden}
.qr .svg svg{width:100%;height:100%;display:block}
.more{display:flex;justify-content:center;padding:12px}
.chip.warn{background:var(--pend);color:var(--ink)}
.log div span small{color:var(--mute)}