/* szybkie-logowanie.css — AURIX · M-AUTH · Szybkie logowanie (delegacja sesji).
   Buduje na tokenach z login.css (ładowany PRZED tym plikiem). Nie dubluje :root.
   CSP-safe: brak CDN/fontów/inline. Dwa konteksty urządzeń:
     • .qstation — STANOWISKO (desktop/tablet hali) — duże cele, czytelne z 1,5 m
     • .qphone   — TELEFON (widok mobilny w ramce urządzenia)
   Ton: spokojny, dostępowy. */

/* =================================================================
   WSPÓLNE
   ================================================================= */
.qhidden { display: none !important; }
.qfade { animation: qFade .28s cubic-bezier(.2,.7,.3,1); }
@keyframes qFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* pill „szybkie logowanie" (marker ⚡) */
.qbolt {
  display: inline-grid; place-items: center; width: 1em; height: 1em;
}

/* =================================================================
   KONTEKST A — STANOWISKO
   ================================================================= */
body.qstation {
  min-height: 100%;
  display: grid; place-items: center;
  padding: 32px 24px;
}
.qstation__main { width: 100%; max-width: 620px; }
.qstation__logo { display: block; height: 76px; width: auto; margin: 0 auto 22px; }
.qstation__footer { text-align: center; font-size: 12.5px; color: var(--muted-2); margin: 20px 0 0; }
html.dark .qstation__footer { color: var(--faint); }

/* karta stanowiska — szersza od klasycznego logowania */
.qcard {
  background: var(--card);
  border: 1px solid rgba(0,0,0,.05);
  border-radius: 20px;
  box-shadow: var(--shadow-card);
  padding: 34px 36px 30px;
  position: relative;
  overflow: hidden;
}
html.dark .qcard { border-color: var(--border); }

.qview { display: none; }
.qview.is-active { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .qview.is-active { animation: qFade .3s cubic-bezier(.2,.7,.3,1); }
}

.qhead { text-align: center; margin-bottom: 24px; }
.qhead__title { font-size: 25px; line-height: 1.2; font-weight: 650; letter-spacing: -.015em; margin: 0; }
.qhead__sub { color: var(--muted-2); margin: 8px 0 0; font-size: 15px; }

/* ---- 2a · wejście: klasyczne + szybkie ---- */
.qpaths { display: grid; gap: 16px; }
.qclassic {
  border: 1px solid var(--border); border-radius: 14px; padding: 20px 20px 18px; background: var(--field);
}
.qclassic__label { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--faint); margin: 0 0 14px; }
.qclassic__label svg { width: 15px; height: 15px; }
.qfield { display: block; margin-bottom: 12px; }
.qfield__label { display: block; font-size: 13px; font-weight: 500; color: var(--muted); margin-bottom: 6px; }
.qinput { width: 100%; height: 44px; padding: 0 13px; border-radius: 10px; border: 1px solid var(--border-strong); background: var(--card); color: var(--ink); font: inherit; font-size: 14.5px; outline: none; transition: border-color .12s, box-shadow .12s; }
.qinput::placeholder { color: var(--faint); }
.qinput:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--ring); }
.qclassic__note { display: flex; align-items: flex-start; gap: 7px; margin: 12px 0 0; font-size: 12px; color: var(--faint); }
.qclassic__note svg { width: 14px; height: 14px; margin-top: 1px; flex-shrink: 0; }

.qdivider { display: flex; align-items: center; gap: 14px; color: var(--faint); font-size: 12.5px; font-weight: 500; text-transform: uppercase; letter-spacing: .06em; }
.qdivider::before, .qdivider::after { content: ''; flex: 1; height: 1px; background: var(--border); }

/* duży przycisk szybkiego logowania (główna nowa ścieżka) */
.qbtn-fast {
  display: flex; align-items: center; gap: 16px; width: 100%;
  padding: 20px 22px; border-radius: 16px; cursor: pointer; text-align: left;
  border: 1.5px solid var(--brand); background: var(--lime-soft); color: var(--ink);
  font: inherit; transition: transform .06s, box-shadow .15s, background-color .15s;
}
html.dark .qbtn-fast { background: rgba(86,201,139,.1); }
.qbtn-fast:hover { box-shadow: 0 6px 22px -8px var(--ring); }
.qbtn-fast:active { transform: translateY(1px); }
.qbtn-fast__ic { width: 48px; height: 48px; flex-shrink: 0; border-radius: 13px; background: var(--brand); color: #fff; display: grid; place-items: center; }
.qbtn-fast__ic svg { width: 26px; height: 26px; }
.qbtn-fast__main { flex: 1; min-width: 0; }
.qbtn-fast__t { font-size: 17px; font-weight: 650; letter-spacing: -.01em; }
.qbtn-fast__d { font-size: 13.5px; color: var(--muted); margin-top: 2px; }
.qbtn-fast__chev { color: var(--brand-ink); flex-shrink: 0; }
.qbtn-fast__chev svg { width: 22px; height: 22px; }

/* ---- 2b · QR + kod ---- */
.qback {
  display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; cursor: pointer;
  padding: 0; font: inherit; font-size: 14px; font-weight: 500; color: var(--muted); margin: 0 0 18px;
}
.qback:hover { color: var(--ink); }
.qback svg { width: 16px; height: 16px; }

.qr-stage { display: grid; grid-template-columns: auto 1fr; gap: 30px; align-items: start; }
@media (max-width: 560px) { .qr-stage { grid-template-columns: 1fr; gap: 22px; } }

/* duży QR */
.qr-panel { text-align: center; }
.qr-frame {
  position: relative; width: 248px; height: 248px; margin: 0 auto;
  padding: 16px; background: #fff; border: 1px solid var(--border); border-radius: 18px;
  box-shadow: 0 2px 10px rgba(15,23,42,.06);
}
.qr-frame svg, .qr-frame__img { width: 100%; height: 100%; display: block; border-radius: 4px; }
.qr-frame__overlay {
  position: absolute; inset: 0; border-radius: 18px; display: none;
  flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center;
  background: rgba(255,255,255,.92); backdrop-filter: blur(2px); padding: 20px;
}
html.dark .qr-frame__overlay { background: rgba(20,29,48,.92); }
.qr-frame.is-expired .qr-frame__overlay,
.qr-frame.is-approved .qr-frame__overlay { display: flex; }
.qr-frame.is-expired svg, .qr-frame.is-approved svg { filter: grayscale(1); opacity: .28; }
.qr-frame__ic { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; }
.qr-frame__ic svg { width: 28px; height: 28px; filter: none; opacity: 1; }
.qr-frame.is-expired .qr-frame__ic { background: var(--warn-bg); color: var(--warn); }
.qr-frame.is-approved .qr-frame__ic { background: var(--lime-soft); color: var(--brand); }
html.dark .qr-frame.is-approved .qr-frame__ic { background: rgba(86,201,139,.16); }
.qr-frame__msg { font-size: 15px; font-weight: 600; color: var(--ink); }

/* timer 60 s */
.qtimer { display: inline-flex; align-items: center; gap: 9px; margin-top: 18px; font-size: 14px; color: var(--muted); }
.qtimer__ring { position: relative; width: 30px; height: 30px; }
.qtimer__ring svg { width: 30px; height: 30px; transform: rotate(-90deg); }
.qtimer__ring circle { fill: none; stroke-width: 3; }
.qtimer__track { stroke: var(--track); }
.qtimer__prog { stroke: var(--brand); stroke-linecap: round; transition: stroke-dashoffset 1s linear, stroke .3s; }
.qtimer.is-low .qtimer__prog { stroke: var(--warn); }
.qtimer__num { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink); font-size: 15px; }
.qtimer.is-low .qtimer__num { color: var(--warn); }

.qr-new {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 14px;
  height: 42px; padding: 0 18px; border-radius: 11px; cursor: pointer;
  border: 1px solid var(--border-strong); background: var(--card); color: var(--ink);
  font: inherit; font-size: 14px; font-weight: 600; transition: .12s;
}
.qr-new:hover { border-color: var(--brand); color: var(--brand-ink); background: var(--hover); }
.qr-new svg { width: 17px; height: 17px; }

/* prawa kolumna: instrukcja + fallback kodu */
.qr-side { display: flex; flex-direction: column; gap: 20px; padding-top: 4px; min-width: 0; }
.qr-instr { display: flex; gap: 13px; align-items: flex-start; }
.qr-instr__n { width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; font-size: 13.5px; font-weight: 700; }
.qr-instr__t { font-size: 15px; line-height: 1.45; color: var(--ink); min-width: 0; }
.qr-instr__t b { font-weight: 650; }

.qcode-fallback { border-top: 1px dashed var(--border); padding-top: 20px; }
.qcode-fallback__label { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--muted); margin: 0 0 4px; }
.qcode-fallback__hint { font-size: 13px; color: var(--muted-2); margin: 0 0 14px; }

/* 8 pól kodu na stanowisku */
.qcode-in { display: flex; gap: 8px; }
.qcode-in__cell {
  flex: 1; min-width: 0; height: 58px; text-align: center;
  font-family: var(--mono); font-size: 26px; font-weight: 500; color: var(--ink);
  background: var(--field); border: 1.5px solid var(--border-strong); border-radius: 12px;
  outline: none; transition: border-color .12s, box-shadow .12s;
}
.qcode-in__cell:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--ring); }
.qcode-in__cell.is-filled { border-color: var(--brand); }
.qcode-in__gap { width: 6px; flex-shrink: 0; }
.qcode-err {
  display: none; align-items: center; gap: 8px; margin-top: 12px;
  padding: 10px 13px; border-radius: 10px; font-size: 13.5px; font-weight: 500;
  background: var(--err-bg); border: 1px solid var(--err-bd); color: var(--err);
}
.qcode-err.is-show { display: flex; }
.qcode-err svg { width: 16px; height: 16px; flex-shrink: 0; }
.qcode-submit { margin-top: 14px; }

/* ---- 2c · zalogowano jako (stanowisko) ---- */
.qlogged { text-align: center; padding: 6px 0; }
.qlogged__ring { width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 50%; background: var(--lime-soft); color: var(--brand); display: grid; place-items: center; }
html.dark .qlogged__ring { background: rgba(86,201,139,.14); }
.qlogged__ring svg { width: 32px; height: 32px; }
.qlogged__who { font-size: 24px; font-weight: 650; letter-spacing: -.01em; margin: 0; }
.qlogged__role { font-size: 15.5px; color: var(--muted); margin: 5px 0 0; }

/* trwały, nie-nachalny znacznik sesji tymczasowej */
.qtemp-mark {
  display: inline-flex; align-items: center; gap: 10px; margin: 22px auto 0;
  padding: 11px 16px; border-radius: 12px;
  background: var(--warn-bg); border: 1px solid var(--warn-bd); color: var(--warn);
  font-size: 14px; font-weight: 600;
}
.qtemp-mark svg { width: 18px; height: 18px; flex-shrink: 0; }
.qtemp-mark b { font-weight: 700; }

.qlogged__actions { margin-top: 24px; }
.qlogout {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: 48px; padding: 0 26px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--border-strong); background: var(--card); color: var(--ink);
  font: inherit; font-size: 15px; font-weight: 600; transition: .12s;
}
.qlogout:hover { border-color: var(--err-bd); color: var(--err); background: var(--err-bg); }
.qlogout svg { width: 19px; height: 19px; }
.qlogged__hint { font-size: 13px; color: var(--faint); margin: 16px 0 0; }

/* stały pasek sesji tymczasowej — wariant „chrome" (gdyby był używany na innych ekranach po zalogowaniu) */
.qsessionbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 20px; padding: 12px 16px; border-radius: 12px;
  background: var(--field); border: 1px solid var(--border);
}
.qsessionbar__who { display: flex; align-items: center; gap: 10px; }
.qsessionbar__badge { width: 36px; height: 36px; border-radius: 10px; background: var(--brand); color: #fff; display: grid; place-items: center; font-size: 14px; font-weight: 700; flex-shrink: 0; }
.qsessionbar__name { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.qsessionbar__role { font-size: 12.5px; color: var(--muted-2); }
.qsessionbar__temp { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--warn); }
.qsessionbar__temp svg { width: 15px; height: 15px; }

/* =================================================================
   DEMO — przełącznik stanów (artefakt propozycji, nie część produktu)
   ================================================================= */
.qdemo {
  position: fixed; left: 14px; bottom: 12px; z-index: 60;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 10px; border-radius: 12px;
  background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow-card);
  max-width: calc(100vw - 28px);
}
.qdemo__tag { font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); padding-right: 2px; }
.qdemo button {
  font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
  padding: 6px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--field); color: var(--muted);
  transition: .12s;
}
.qdemo button:hover { border-color: var(--border-strong); color: var(--ink); }
.qdemo button.is-on { background: var(--brand); border-color: var(--brand); color: #fff; }

/* =================================================================
   KONTEKST B — TELEFON (ramka urządzenia + widok mobilny)
   ================================================================= */
body.qphone-body {
  min-height: 100%;
  display: grid; place-items: center;
  padding: 28px 20px;
  background-color: var(--page);
  background-image: radial-gradient(120% 60% at 50% -8%, rgba(208,232,144,.4) 0%, rgba(208,232,144,.08) 42%, rgba(255,255,255,0) 66%);
}
html.dark body.qphone-body { background-image: radial-gradient(120% 60% at 50% -8%, rgba(16,112,64,.32) 0%, rgba(16,112,64,.08) 44%, rgba(11,18,32,0) 68%); }

.phone {
  width: 390px; max-width: 100%; height: 780px; max-height: calc(100vh - 56px);
  background: var(--card); border-radius: 44px; position: relative;
  border: 10px solid #10151f; box-shadow: 0 30px 70px -24px rgba(15,23,42,.5), 0 0 0 2px rgba(0,0,0,.35);
  overflow: hidden; display: flex; flex-direction: column;
}
html.dark .phone { border-color: #05070c; }
.phone__notch { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 148px; height: 26px; background: #10151f; border-radius: 0 0 16px 16px; z-index: 20; }
html.dark .phone__notch { background: #05070c; }
.phone__status { display: flex; align-items: center; justify-content: space-between; padding: 11px 26px 6px; font-size: 12.5px; font-weight: 600; color: var(--ink); flex-shrink: 0; }
.phone__status-r { display: inline-flex; gap: 6px; align-items: center; }
.phone__status-r svg { width: 16px; height: 15px; }

/* nagłówek aplikacji telefonu — Imię i Nazwisko + rola (NIGDY login) */
.papp-head { display: flex; align-items: center; gap: 12px; padding: 8px 20px 14px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.papp-head__badge { width: 40px; height: 40px; border-radius: 12px; background: var(--brand); color: #fff; display: grid; place-items: center; font-size: 15px; font-weight: 700; flex-shrink: 0; }
.papp-head__who { flex: 1; min-width: 0; }
.papp-head__name { font-size: 15px; font-weight: 650; color: var(--ink); }
.papp-head__role { font-size: 12.5px; color: var(--muted-2); }
.papp-head__logo { height: 22px; width: auto; opacity: .85; }

.papp-body { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; }
.papp-title { font-size: 20px; font-weight: 650; letter-spacing: -.01em; margin: 2px 0 4px; }
.papp-sub { font-size: 13.5px; color: var(--muted-2); margin: 0 0 18px; }

/* segment scan / kod */
.pseg { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--track); margin-bottom: 20px; }
.pseg button { flex: 1; height: 40px; border: 0; background: none; border-radius: 9px; cursor: pointer; font: inherit; font-size: 14px; font-weight: 600; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; gap: 7px; transition: .12s; }
.pseg button svg { width: 17px; height: 17px; }
.pseg button.is-on { background: var(--card); color: var(--brand-ink); box-shadow: 0 1px 3px rgba(15,23,42,.12); }
html.dark .pseg button.is-on { box-shadow: none; background: var(--hover); }

.pview { display: none; flex-direction: column; flex: 1; }
.pview.is-active { display: flex; }

/* 2d · skaner */
.scanner {
  position: relative; width: 100%; aspect-ratio: 1; border-radius: 20px; overflow: hidden;
  background: radial-gradient(120% 120% at 50% 40%, #223 0%, #0d1017 75%);
  display: grid; place-items: center;
}
.scanner__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.scanner.is-detected .scanner__video { filter: brightness(.7); }
.scanner__reticle, .scanner__laser, .scanner__hint, .scanner__detected { z-index: 2; }
.scanner__grid { position: absolute; inset: 0; opacity: .5; z-index: 1;
  background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 26px 26px; }
.scanner__reticle { position: relative; width: 62%; height: 62%; }
.scanner__reticle span { position: absolute; width: 30px; height: 30px; border: 3px solid var(--lime); }
.scanner__reticle span:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; border-radius: 8px 0 0 0; }
.scanner__reticle span:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; border-radius: 0 8px 0 0; }
.scanner__reticle span:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; border-radius: 0 0 0 8px; }
.scanner__reticle span:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; border-radius: 0 0 8px 0; }
.scanner__laser { position: absolute; left: 8%; right: 8%; height: 2.5px; top: 10%; background: linear-gradient(90deg, transparent, var(--lime), transparent); box-shadow: 0 0 12px 2px rgba(208,232,144,.7); border-radius: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .scanner.is-scanning .scanner__laser { animation: scanLaser 2.1s cubic-bezier(.5,0,.5,1) infinite; }
}
@keyframes scanLaser { 0% { top: 10%; } 50% { top: 88%; } 100% { top: 10%; } }
.scanner__hint { position: absolute; bottom: 14px; left: 0; right: 0; text-align: center; font-size: 12.5px; color: rgba(255,255,255,.8); }
.scanner.is-detected .scanner__reticle span { border-color: #fff; }
.scanner__detected { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: rgba(13,16,23,.82); color: #fff; }
.scanner.is-detected .scanner__detected { display: flex; }
.scanner.is-detected .scanner__laser { display: none; }
.scanner__detected svg { width: 46px; height: 46px; color: var(--lime); }
.scanner__detected span { font-size: 15px; font-weight: 600; }

.scan-instr { text-align: center; font-size: 14px; color: var(--muted); margin: 18px 4px 0; line-height: 1.5; }

/* dolny sheet potwierdzenia (2d) */
.psheet-scrim { position: absolute; inset: 0; background: rgba(15,23,42,.5); z-index: 30; opacity: 0; pointer-events: none; transition: opacity .2s; }
.psheet-scrim.is-open { opacity: 1; pointer-events: auto; }
.psheet {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 31;
  background: var(--card); border-radius: 22px 22px 0 0; padding: 8px 22px 24px;
  transform: translateY(105%); transition: transform .26s cubic-bezier(.2,.7,.3,1);
  box-shadow: 0 -12px 40px -12px rgba(15,23,42,.3);
}
.psheet.is-open { transform: translateY(0); }
.psheet__grip { width: 40px; height: 4px; border-radius: 3px; background: var(--border-strong); margin: 0 auto 18px; }
.psheet__ic { width: 54px; height: 54px; margin: 0 auto 14px; border-radius: 15px; background: var(--lime-soft); color: var(--brand); display: grid; place-items: center; }
html.dark .psheet__ic { background: rgba(86,201,139,.14); }
.psheet__ic svg { width: 28px; height: 28px; }
.psheet__title { text-align: center; font-size: 18px; font-weight: 650; margin: 0 0 6px; letter-spacing: -.01em; }
.psheet__body { text-align: center; font-size: 14px; color: var(--muted); margin: 0 0 8px; line-height: 1.5; }
.psheet__station { display: flex; align-items: center; gap: 10px; justify-content: center; margin: 14px 0 18px; padding: 12px; border-radius: 12px; background: var(--field); border: 1px solid var(--border); }
.psheet__station svg { width: 18px; height: 18px; color: var(--muted-2); flex-shrink: 0; }
.psheet__station-t { font-size: 13.5px; }
.psheet__station-t b { font-weight: 650; color: var(--ink); }
.psheet__station-t span { color: var(--muted-2); font-family: var(--mono); }
.psheet__12h { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--warn); }
.psheet__actions { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; }

/* 2e · kod */
.pcode { display: flex; flex-direction: column; align-items: center; flex: 1; justify-content: center; padding: 6px 0; }
.pcode__label { font-size: 14px; color: var(--muted); margin: 0 0 18px; text-align: center; line-height: 1.5; }
.pcode__digits {
  display: flex; align-items: center; gap: 10px; font-family: var(--mono);
  font-size: 46px; font-weight: 600; letter-spacing: .02em; color: var(--ink);
  font-variant-numeric: tabular-nums; padding: 22px 26px; border-radius: 18px;
  background: var(--field); border: 1.5px solid var(--border); user-select: all;
}
.pcode__digits .g { display: inline-flex; gap: 3px; }
.pcode__digits .sp { width: 14px; }
.pcode__timer { margin-top: 22px; }
.pcode__actions { margin-top: 26px; width: 100%; }
.pcode__expired-msg { font-size: 14px; font-weight: 600; color: var(--warn); margin: 0 0 16px; display: none; align-items: center; gap: 8px; }
.pcode.is-expired .pcode__expired-msg { display: inline-flex; }
.pcode.is-expired .pcode__digits { filter: grayscale(1); opacity: .4; }

/* przyciski telefonu */
.pbtn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; width: 100%; height: 50px; border: 0; border-radius: 13px; cursor: pointer; font: inherit; font-size: 15.5px; font-weight: 650; transition: background-color .12s, transform .05s; }
.pbtn:active { transform: translateY(1px); }
.pbtn--primary { background: var(--brand); color: #fff; }
.pbtn--primary:hover { background: var(--brand-dark); }
.pbtn--ghost { background: var(--field); border: 1px solid var(--border-strong); color: var(--ink); }
.pbtn--ghost:hover { background: var(--hover); }
.pbtn svg { width: 19px; height: 19px; }

.pdone { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; flex: 1; gap: 4px; }
.pdone__ring { width: 78px; height: 78px; margin-bottom: 18px; border-radius: 50%; background: var(--lime-soft); color: var(--brand); display: grid; place-items: center; }
html.dark .pdone__ring { background: rgba(86,201,139,.14); }
.pdone__ring svg { width: 40px; height: 40px; }
.pdone__t { font-size: 21px; font-weight: 650; margin: 0; }
.pdone__d { font-size: 14.5px; color: var(--muted); margin: 8px 0 0; line-height: 1.5; }
.pdone__back { margin-top: 26px; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.pdone__back .pbtn { text-decoration: none; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; }

/* =================================================================
   SEKCJA 2f — style dodatkowe (reszta z app.css); ładowane na ekranie Użytkownicy
   ================================================================= */

/* ── Zgłoszenie 2026-07-18 (kosmetyka #31): na PRAWDZIWYM telefonie makieta .phone (ekran D) znika —
   pełny viewport, bez ramki/notcha/sztucznego paska statusu (telefon ma własne). Desktop zachowuje mockup. ── */
@media (max-width: 520px) {
  body.qphone-body { padding: 0; }
  .phone { width: 100%; max-width: none; height: 100dvh; max-height: none; border: 0; border-radius: 0; box-shadow: none; }
  .phone__notch, .phone__status { display: none; }
}