/* ══════════════════════════════════════════════════════════════════
   Okno logowania, rejestracji i weryfikacji certyfikatu.
   Jeden plik dla strony głównej, portalu i centrum pomocy — dzięki temu
   okno wygląda identycznie niezależnie od tego, skąd zostało otwarte.
   ══════════════════════════════════════════════════════════════ */
/* ── okno rejestracji i logowania ── */
.mod{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:20px}
.mod.on{display:flex;animation:modin .25s}
@keyframes modin{from{opacity:0}to{opacity:1}}
.mod-bg{position:absolute;inset:0;cursor:pointer;background:rgba(10,14,32,.55);backdrop-filter:blur(6px)}
.mod-box{position:relative;background:var(--card);border-radius:20px;width:100%;max-width:520px;
  max-height:88vh;overflow:auto;box-shadow:0 30px 80px -20px rgba(16,20,39,.5);
  animation:modup .3s cubic-bezier(.2,.8,.3,1)}
@keyframes modup{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:none}}
.mod-top{display:flex;align-items:center;gap:12px;padding:22px 26px 0}
.mod-top h3{font-size:1.35rem;font-weight:400;flex:1}
.mod-x{width:34px;height:34px;border-radius:50%;border:1px solid var(--br);background:var(--card);
  cursor:pointer;font-size:16px;color:var(--tx3);flex:none;transition:all .16s}
.mod-x:hover{background:var(--soft);color:var(--tx)}
.mod-body{padding:18px 26px 26px}
.mod-load{padding:50px;text-align:center;color:var(--tx3);font-size:.9rem}
.mod-tabs{display:flex;gap:6px;padding:0 26px;margin-top:14px}
.mod-tab{flex:1;padding:10px;border:0;border-bottom:2px solid var(--br);background:transparent;
  cursor:pointer;font-family:var(--body);font-size:.92rem;color:var(--tx2);font-weight:500}
.mod-tab.on{border-bottom-color:var(--acc);color:var(--acc)}
body.mod-open{overflow:hidden}

/* Formularz ładowany do okna przychodzi bez własnego nagłówka, więc style
   dla jego pól definiujemy tutaj — inaczej pola byłyby surowymi prostokątami. */
.mod-body .auth-box{border:0;box-shadow:none;padding:0;margin:0;max-width:none;background:none}
.mod-body h1{font-family:var(--display);font-size:1.3rem;font-weight:400;margin:0 0 .3em}
.mod-body .sub{color:var(--tx2);font-size:.92rem;margin:0 0 20px}
.mod-body label{display:block;font-size:.86rem;font-weight:500;color:var(--tx);margin:15px 0 6px}
.mod-body input[type=text],.mod-body input[type=email],.mod-body input[type=password],
.mod-body input[type=url],.mod-body select{
  width:100%;height:46px;border:1px solid var(--br2);border-radius:10px;padding:0 14px;
  font-family:var(--body);font-size:.95rem;color:var(--tx);background:var(--card);outline:0;
  transition:border-color .16s,box-shadow .16s}
.mod-body input:focus,.mod-body select:focus{border-color:var(--acc);box-shadow:0 0 0 3px rgba(74,91,232,.13)}
.mod-body select{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--tx3) 50%),linear-gradient(135deg,var(--tx3) 50%,transparent 50%);
  background-position:calc(100% - 18px) 20px,calc(100% - 13px) 20px;background-size:5px 5px;background-repeat:no-repeat}
.mod-body .form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0 16px}
.mod-body .form-grid .full{grid-column:1/-1}
.mod-body .field-row{display:flex;align-items:center;gap:8px}
.mod-body .field-row input{flex:1;min-width:0}
.mod-body .dash{color:var(--tx3);font-family:var(--mono);font-size:.86rem;white-space:nowrap}
.mod-body .hint{color:var(--tx3);font-size:.82rem;margin:6px 0 0;line-height:1.45}
.mod-body .check{display:flex;align-items:flex-start;gap:10px;margin:16px 0 0;
  font-size:.88rem;color:var(--tx2);font-weight:400;line-height:1.5;cursor:pointer}
.mod-body .check input{width:auto;height:auto;margin:3px 0 0;flex:none;accent-color:var(--acc)}
.mod-body .btn,.mod-body button[type=submit],.mod-body .form-actions button{
  width:100%;height:48px;margin-top:22px;border:0;border-radius:10px;background:var(--grad);
  color:#fff;font-family:var(--body);font-size:.98rem;font-weight:500;cursor:pointer;
  box-shadow:0 4px 16px rgba(74,91,232,.3)}
.mod-body .btn:hover,.mod-body button:hover{filter:brightness(1.06)}
.mod-body .flash{padding:11px 14px;border-radius:10px;margin-bottom:16px;font-size:.9rem}
.mod-body .flash-err{background:rgba(209,67,67,.09);border:1px solid rgba(209,67,67,.25);color:#B93636}
.mod-body .flash-ok{background:rgba(18,180,142,.1);border:1px solid rgba(18,180,142,.25);color:#0E7A5F}
.mod-body .chosen-plan{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:13px 16px;
  border-radius:12px;margin:16px 0 4px;background:rgba(74,91,232,.07);border:1px solid rgba(74,91,232,.2)}
.mod-body .chosen-l{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--tx3)}
.mod-body .chosen-plan strong{font-family:var(--display);font-size:1.05rem;font-weight:500}
.mod-body .chosen-p{font-family:var(--mono);font-size:.84rem;color:var(--tx2)}
.mod-body .chosen-t{margin-left:auto;font-size:.78rem;color:var(--acc3);
  background:rgba(18,180,142,.12);border-radius:99px;padding:3px 10px}
.mod-body .nav-shell,.mod-body .brand{display:none}

/* wynik weryfikacji certyfikatu w oknie */
.mod-body .box{background:none;border:0;padding:0;box-shadow:none}
.mod-body .res{margin-top:20px;border-radius:14px;padding:22px;border:1px solid}
.mod-body .res.ok{border-color:rgba(18,180,142,.3);background:rgba(18,180,142,.06)}
.mod-body .res.no{border-color:rgba(209,67,67,.3);background:rgba(209,67,67,.05)}
.mod-body .res-h{display:flex;align-items:center;gap:10px;margin-bottom:16px;
  font-family:var(--display);font-size:1.05rem;font-weight:500}
.mod-body .ico{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  color:#fff;font-size:14px;flex:none}
.mod-body .ok .ico{background:var(--acc3)}
.mod-body .no .ico{background:#D14343}
.mod-body .row{display:flex;gap:12px;padding:9px 0;border-bottom:1px solid var(--br);font-size:.9rem}
.mod-body .row:last-child{border-bottom:0}
.mod-body .row span:first-child{color:var(--tx3);min-width:130px}
.mod-body .mono{font-family:var(--mono);font-size:.84rem}
.mod-body .ftr,.mod-body .top{display:none}