/* GAPPFLY - wspólny wygląd stron logowania i rejestracji (views/login.html, views/register.html). */
:root{color-scheme:dark;--cyan:#37dafa;--border:rgba(141,223,255,.82);--field-border:rgba(79,204,255,.83);--text:#fff;--error:#ff9b9b}
*{box-sizing:border-box}
html,body{margin:0;min-width:0;min-height:100%;width:100%;background:#020b1b;color:#fff}
body{font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
a{text-decoration:none;color:#43e3ff}
a:hover{text-decoration:underline}
.viewport{position:relative;isolation:isolate;min-height:100vh;min-height:100dvh;overflow:hidden;background:#020b1b}
/* The images are supplied by the user. They contain NO form/panel: exactly one real HTML card is rendered. */
.cosmos{position:absolute;inset:0;z-index:-3;pointer-events:none;user-select:none;overflow:hidden}
.cosmos picture,.cosmos img{display:block;width:100%;height:100%}
.cosmos img{object-fit:cover;object-position:center center}
/* Slight color balance, but never flatten the source background. */
.cosmos::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(2,9,24,.03),transparent 30%,rgba(2,9,24,.08) 83%,rgba(2,9,24,.17));pointer-events:none}
/* Overlay repeats ONLY the cloud-bearing edges of the same photograph. Very slow, faint drift. */
.moving-clouds{position:absolute;inset:-18px;z-index:-2;pointer-events:none;
 background:url('../photo/gappfly_czyste_tlo_desktop_v135.webp') center center/cover no-repeat;
 -webkit-mask-image:radial-gradient(ellipse 32% 16% at 10% 32%,#000,transparent 100%),radial-gradient(ellipse 32% 17% at 90% 32%,#000,transparent 100%);
 mask-image:radial-gradient(ellipse 32% 16% at 10% 32%,#000,transparent 100%),radial-gradient(ellipse 32% 17% at 90% 32%,#000,transparent 100%);
 opacity:.19;mix-blend-mode:screen;will-change:transform;animation:gappfly-clouds 65s ease-in-out infinite alternate}
/* Gentle warm shaft of light above the horizon. */
.light-aura{position:absolute;left:50%;top:13%;transform:translateX(-50%);width:min(40vw,600px);height:44vh;z-index:-1;pointer-events:none;
 background:radial-gradient(ellipse at 50% 20%,rgba(255,242,195,.09),rgba(255,211,122,.04) 36%,transparent 76%);
 filter:blur(20px);animation:gappfly-light 14s ease-in-out infinite alternate}

.stage{position:relative;z-index:1;min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:28px 16px}
.login-card{position:relative;width:min(100%,548px);padding:36px 40px 29px;border-radius:25px;
 background:linear-gradient(160deg,rgba(28,53,68,.40),rgba(12,39,59,.36) 50%,rgba(7,27,47,.43));
 border:1px solid var(--border);
 box-shadow:0 18px 55px rgba(0,8,19,.23),inset 0 1px 0 rgba(245,253,255,.18),0 0 0 1px rgba(34,179,226,.06);
 backdrop-filter:blur(10px) saturate(1.06) brightness(.80);
 -webkit-backdrop-filter:blur(10px) saturate(1.06) brightness(.80)}
.title{text-align:center;font-size:clamp(26px,2.3vw,34px);font-weight:750;letter-spacing:-.033em;line-height:1.16;margin:0}
.title strong{color:var(--cyan);font-weight:800}
.subtitle{text-align:center;color:#eff7fc;font-size:12px;line-height:1.55;margin:11px 0 26px;text-shadow:0 1px 4px rgba(0,14,28,.4)}
.form-group{position:relative;margin-bottom:13px}
.form-control{display:block;width:100%;height:53px;padding:0 45px;outline:0;appearance:none;
 background:rgba(4,27,46,.64);border:1px solid var(--field-border);border-radius:11px;color:#fff;font-family:inherit;font-size:16px}
.form-control::placeholder{color:#d7e7f2;opacity:1}
.form-control:focus{border-color:#57e7ff;box-shadow:0 0 0 3px rgba(29,210,244,.17)}
.field-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);height:20px;width:20px;color:#deecf4;pointer-events:none}
.password-toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:8px;background:transparent;color:#deecf4;cursor:pointer}
.password-toggle:hover{background:rgba(255,255,255,.08)}
.eye-icon{width:20px;height:20px}.password-toggle.visible .eye-cut{display:none}
.login-btn{width:100%;height:53px;margin-top:5px;display:flex;align-items:center;justify-content:center;gap:12px;border:0;border-radius:11px;
 background:linear-gradient(105deg,#19c0f0,#3fe1f3);color:#011b28;font:800 16px Inter,system-ui,sans-serif;cursor:pointer;box-shadow:0 8px 20px rgba(14,169,220,.21)}
.login-btn:hover{filter:brightness(1.05)}
.login-btn .arrow-icon{width:18px;height:18px}
.wrong-credentials{color:#ffd3d3;background:#7a22265e;border:1px solid #d8696970;border-radius:8px;padding:9px;text-align:center;font-size:12px;margin:12px 0 0}
.not-visible{display:none!important}
.links{display:flex;justify-content:space-between;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:20px;font-size:10.5px;line-height:1.5;color:#f0f5fb}
.divider{height:1px;margin-top:19px;background:rgba(226,241,251,.30)}
.footer{margin-top:17px;display:flex;justify-content:center;flex-wrap:wrap;gap:12px 22px;font-size:10px}
.footer a{color:#c2d7e2}
input:-webkit-autofill{-webkit-text-fill-color:#fff!important;box-shadow:0 0 0 1000px #09263b inset!important}
@keyframes gappfly-clouds{from{transform:translate3d(-10px,2px,0) scale(1.015)}to{transform:translate3d(13px,-5px,0) scale(1.035)}}
@keyframes gappfly-light{from{opacity:.58;transform:translateX(-50%) scaleX(.96)}to{opacity:.98;transform:translateX(-50%) scaleX(1.03)}}
/* v136: On desktop preserve the full original composition, including the bottom motto.
   Wide browser windows otherwise crop top/bottom with object-fit:cover. */
@media (min-width:761px){
 .cosmos::before{
   content:'';position:absolute;inset:-20px;z-index:0;pointer-events:none;
   background:url('../photo/gappfly_czyste_tlo_desktop_v135.webp') center center/cover no-repeat;
   filter:blur(22px) brightness(.64) saturate(.96);
   transform:scale(1.035);
 }
 .cosmos picture{position:relative;z-index:1}
 .cosmos img{object-fit:contain;object-position:center center}
 .cosmos::after{z-index:2}
}
@media(max-width:760px){
 .viewport{min-height:100vh;min-height:100dvh}
 .cosmos img{object-position:center center}
 .moving-clouds{background-image:url('../photo/gappfly_czyste_tlo_mobile_v135.webp');opacity:.14;
 -webkit-mask-image:radial-gradient(ellipse 44% 15% at 5% 28%,#000,transparent 100%),radial-gradient(ellipse 44% 15% at 95% 28%,#000,transparent 100%);
 mask-image:radial-gradient(ellipse 44% 15% at 5% 28%,#000,transparent 100%),radial-gradient(ellipse 44% 15% at 95% 28%,#000,transparent 100%)}
 .stage{min-height:100vh;min-height:100dvh;align-items:flex-start;justify-content:center;padding:clamp(207px,27vh,265px) 12px 115px}
 .login-card{width:min(100%,400px);padding:25px 21px 24px;border-radius:23px;
 background:linear-gradient(168deg,rgba(25,51,68,.43),rgba(6,29,50,.49));
 backdrop-filter:blur(9px) brightness(.83) saturate(1.09);
 -webkit-backdrop-filter:blur(9px) brightness(.83) saturate(1.09)}
 .title{font-size:clamp(25px,7vw,32px)}
 .subtitle{font-size:11px;margin:10px 0 21px}
 .form-control,.login-btn{height:52px}
 .links{font-size:10px;margin-top:17px;justify-content:center;text-align:center;gap:9px 14px}
 .divider{margin-top:17px}.footer{margin-top:15px;font-size:9.5px}
 .light-aura{top:17%;height:39vh;width:75vw}
}
@media(max-width:375px){.stage{padding-top:clamp(190px,26vh,220px)}.login-card{padding:23px 18px}.links{flex-direction:column;gap:8px}}
@media(max-width:760px) and (orientation:landscape){
 .stage{padding-top:135px;padding-bottom:80px}
 .login-card{max-width:480px}
}
@media(min-width:761px) and (max-height:740px){
 .stage{min-height:max(700px,100dvh);padding-top:140px;padding-bottom:70px}
 .login-card{padding:26px 35px 23px}.subtitle{margin:9px 0 17px}.form-control,.login-btn{height:47px}.links{margin-top:13px}.divider{margin-top:14px}.footer{margin-top:12px}
}
@media(prefers-reduced-motion:reduce){.moving-clouds,.light-aura{animation:none!important;will-change:auto}}

/* Wersja geoportalu i informacja o haśle */
.app-version{margin:12px 0 0;text-align:center;font-size:9.5px;letter-spacing:.04em;color:#93afc0}
.app-version[hidden]{display:none}
.forgot-info{margin:12px 0 0;padding:10px 12px;border-radius:9px;background:rgba(9,44,66,.72);border:1px solid rgba(79,204,255,.45);color:#e4f4fc;font-size:11.5px;line-height:1.5}

/* ===== Zasady użytkowania / prywatności ===== */
.doc-card{width:min(100%,860px);max-height:calc(100dvh - 56px);overflow:auto;padding:32px 40px 28px;text-align:left}
.doc-card h1{font-size:26px;margin:0 0 4px;letter-spacing:-.02em}
.doc-card .doc-meta{color:#b9cfdc;font-size:12px;margin:0 0 18px}
.doc-card h2{font-size:15px;margin:22px 0 6px;color:var(--cyan)}
.doc-card p,.doc-card li{font-size:13px;line-height:1.65;color:#eaf4fa}
.doc-card ul{padding-left:20px;margin:6px 0}
.doc-card .doc-back{display:inline-flex;align-items:center;gap:8px;margin-top:22px;font-size:13px;font-weight:700}
@media(max-width:760px){.doc-card{padding:22px 18px;max-height:none}}

/* ===== Rejestracja ===== */
.register-card{width:min(100%,640px)}
.register-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.register-grid .span-2{grid-column:1 / -1}
.field-wrap{position:relative}
select.form-control{cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23deecf4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:18px}
select.form-control option{background:#0a2236;color:#fff}
.form-control.is-invalid{border-color:var(--error);box-shadow:0 0 0 3px rgba(255,120,120,.14)}
.form-control.is-valid{border-color:#5fe3a1}
.field-error{display:block;min-height:0;margin:5px 4px 0;color:var(--error);font-size:11.5px;line-height:1.4}
.field-error:empty{display:none}
.field-hint{margin:5px 4px 0;color:#c2d7e2;font-size:11px;line-height:1.4}
.password-rules{display:flex;flex-wrap:wrap;gap:4px 12px;margin:6px 4px 0;padding:0;list-style:none;font-size:11px;color:#c2d7e2}
.password-rules li::before{content:'○ ';color:#7f9db0}
.password-rules li.met{color:#8ff0bf}
.password-rules li.met::before{content:'✓ ';color:#5fe3a1}
.register-confirmation{color:#d6ffe9;background:#0f5a3a66;border:1px solid #5fe3a199;border-radius:8px;padding:11px;text-align:center;font-size:13px;line-height:1.5;margin:12px 0 0}
.login-btn[disabled]{opacity:.65;cursor:wait}
@media(max-width:640px){.register-grid{grid-template-columns:1fr}}
@media(max-width:760px){.register-card{width:min(100%,420px)}}