/* Shared styles for the login and sign-up pages */
body[data-page="login"], body[data-page="sign-up"]{ overflow:auto; background:#08080a; }
.fp-page{ --red:#e30d17; --red-hi:#ff3b3b; --ink:#f4f5f7; --muted:#a3a5ad; --line:#2e3036; --field:#17181c;
  position:relative; min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  padding:clamp(12px,2vw,28px); color:var(--ink); font-family:'Manrope',var(--font),sans-serif;
  background:
    radial-gradient(800px 600px at 100% 100%, rgba(170,8,14,.55), transparent 65%),
    radial-gradient(700px 500px at 0% 0%, rgba(120,8,12,.35), transparent 60%),
    linear-gradient(135deg, #1a1b1f, #0b0b0d 45%, #140607); }

/* ---------- Frame ---------- */
.fp-frame{ position:relative; width:100%; max-width:1760px; min-height:min(800px, calc(100vh - 56px));
  display:grid; grid-template-columns:minmax(0,1.38fr) minmax(400px,1fr); isolation:isolate; overflow:hidden;
  border-radius:30px; background:#0a0a0c;
  box-shadow:0 40px 120px rgba(0,0,0,.75), inset 0 0 0 1px rgba(255,255,255,.06); }
.fp-frame::after{ content:""; position:absolute; inset:0; border-radius:inherit; padding:1.5px; pointer-events:none; z-index:3;
  background:linear-gradient(160deg, rgba(255,42,42,.9), rgba(255,42,42,.12) 30%, rgba(255,255,255,.05) 55%, rgba(255,42,42,.55));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }

/* full-frame photo; dark fades on the left and top keep the text readable */
.fp-scene{ position:absolute; inset:0; z-index:-1;
  background:#0a0a0c url("../images/login-polish-panda-bg.jpg") 60% 60%/cover no-repeat; }
.fp-scene::before{ content:""; position:absolute; inset:0;
  background:
    radial-gradient(24% 26% at 39% 27%, rgba(10,10,12,.88), rgba(10,10,12,.5) 60%, rgba(10,10,12,0)),
    linear-gradient(90deg, rgba(10,10,12,.94) 0%, rgba(10,10,12,.82) 22%, rgba(10,10,12,.35) 40%, rgba(10,10,12,0) 52%),
    linear-gradient(180deg, rgba(10,10,12,.94) 0%, rgba(10,10,12,.82) 30%, rgba(10,10,12,.3) 46%, rgba(10,10,12,0) 58%),
    linear-gradient(0deg, rgba(10,10,12,.7) 0%, rgba(10,10,12,0) 22%); }

/* ---------- Left content ---------- */
.fp-visual{ position:relative; display:flex; flex-direction:column; padding:clamp(22px,2.4vw,40px) clamp(22px,2.4vw,40px) clamp(22px,2.2vw,36px); }
.fp-brand{ display:flex; align-items:center; gap:clamp(14px,1.4vw,24px); text-decoration:none; color:inherit; width:max-content; max-width:100%; }
.fp-brand img{ width:clamp(72px,7vw,128px); height:clamp(72px,7vw,128px); flex:none; border-radius:50%; background:#fff; padding:0; object-fit:contain;
  box-shadow:0 0 0 4px rgba(255,255,255,.06), 0 12px 32px rgba(0,0,0,.55); }
.fp-brand strong{ display:block; font-size:clamp(20px,2vw,36px); font-weight:800; letter-spacing:-.01em; line-height:1.15; }
.fp-brand strong em{ font-style:normal; color:var(--red-hi); }
.fp-brand span{ display:block; margin-top:4px; font-size:clamp(13px,1.15vw,20px); color:#cfd0d5; font-weight:500; }
.fp-brand span::after{ content:""; display:block; width:120px; height:3px; margin-top:14px; border-radius:3px; background:var(--red); box-shadow:0 0 10px rgba(227,13,23,.7); }

.fp-hero{ margin-top:clamp(24px,4vh,52px); max-width:640px; }
.fp-hero h2{ margin:0; font-family:'Montserrat','Manrope',sans-serif; font-weight:800; font-size:clamp(28px,2.9vw,50px); line-height:1.12; letter-spacing:-.01em; text-shadow:0 4px 24px rgba(0,0,0,.6); }
.fp-hero h2 .red{ color:var(--red-hi); }
.fp-hero h2 .sm{ font-size:.86em; }
.fp-hero p{ margin:14px 0 0; max-width:420px; font-size:clamp(14px,1.05vw,18px); line-height:1.5; color:#d2d3d8; }

.fp-features{ display:flex; gap:clamp(14px,1.8vw,32px); margin:clamp(20px,3.4vh,36px) 0 0; padding:0; list-style:none; }
.fp-features li{ display:flex; flex-direction:column; gap:10px; font-size:clamp(12.5px,.95vw,16px); line-height:1.3; color:#e6e7ea; font-weight:500; }
.fp-features .ic{ width:clamp(52px,3.8vw,68px); height:clamp(52px,3.8vw,68px); display:grid; place-items:center; border-radius:14px;
  background:linear-gradient(180deg, rgba(227,13,23,.16), rgba(227,13,23,.05)); border:1px solid rgba(255,59,59,.45); color:var(--red-hi);
  box-shadow:inset 0 0 18px rgba(227,13,23,.15); }
.fp-features .ic svg{ width:46%; height:46%; }

.fp-badge{ margin-top:auto; display:flex; align-items:center; gap:14px; width:max-content; max-width:100%; padding:14px 22px 14px 16px;
  border-radius:16px; background:rgba(22,22,26,.72); border:1px solid rgba(255,255,255,.08); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.fp-badge svg{ width:36px; height:36px; flex:none; }
.fp-badge strong{ display:block; font-size:15px; font-weight:700; }
.fp-badge span{ display:block; font-size:13.5px; color:#b9bbc1; }
.fp-spacer{ flex:1; min-height:24px; }

/* ---------- Card ---------- */
.fp-form-side{ position:relative; display:flex; align-items:center; justify-content:center; padding:clamp(16px,2vw,36px) clamp(16px,2vw,36px) clamp(16px,2vw,36px) 0; }
.fp-card{ position:relative; width:100%; min-height:100%; align-self:stretch; display:flex; flex-direction:column; justify-content:center;
  padding:clamp(28px,3.4vw,64px); border-radius:24px;
  background:linear-gradient(165deg, rgba(36,36,41,.82), rgba(20,20,24,.86) 50%, rgba(18,18,21,.9));

  box-shadow:0 30px 80px rgba(0,0,0,.6), 0 0 40px rgba(227,13,23,.10); }
.fp-card::before{ content:""; position:absolute; inset:0; border-radius:inherit; padding:1.5px; pointer-events:none;
  background:linear-gradient(200deg, #ff2a2a 0%, rgba(255,42,42,.25) 30%, rgba(255,255,255,.07) 55%, rgba(255,42,42,.65) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.fp-card-inner{ flex:none; width:100%; max-width:520px; margin:0 auto; } /* never shrink: the card grows to fit long forms */

.fp-eyebrow{ display:inline-flex; align-items:center; gap:8px; margin:0; padding:7px 14px; border-radius:999px;
  background:rgba(227,13,23,.12); border:1px solid rgba(255,59,59,.45); color:var(--red-hi);
  font-size:13px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }
.fp-eyebrow::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--red-hi); box-shadow:0 0 8px var(--red-hi); }
.fp-card h1{ margin:18px 0 0; font-size:clamp(30px,2.5vw,42px); font-weight:800; letter-spacing:-.03em; line-height:1.1; }
.fp-card h1 .or{ color:#8b8e97; font-weight:700; }
.fp-lead{ margin:10px 0 24px; color:var(--muted); font-size:clamp(14px,1vw,16.5px); line-height:1.5; }

.fp-alert{ display:none; align-items:center; gap:8px; padding:12px 14px; margin-bottom:16px; border-radius:12px; font-size:14px; font-weight:600; }
.fp-alert svg{ width:18px; height:18px; flex:none; }
.fp-alert.err{ background:rgba(227,13,23,.12); border:1px solid rgba(227,13,23,.45); color:#ff8a8a; }
.fp-alert.ok{ background:rgba(34,197,94,.12); border:1px solid rgba(34,197,94,.45); color:#86efac; }

.fp-form{ display:grid; gap:18px; }
.fp-field label{ display:block; margin-bottom:9px; font-size:15.5px; font-weight:700; color:#eceef1; }
.fp-input{ position:relative; }
.fp-input .fp-icon{ position:absolute; left:18px; top:50%; transform:translateY(-50%); width:22px; height:22px; color:#9a9da5; pointer-events:none; transition:color .2s; }
.fp-input .fp-icon svg{ width:22px; height:22px; display:block; }
.fp-input input{ width:100%; height:56px; padding:0 54px 0 54px; border:1.5px solid var(--line); border-radius:12px;
  background:var(--field); color:#fff; font:500 15.5px 'Manrope',var(--font),sans-serif; outline:0; transition:border-color .2s, box-shadow .2s; }
.fp-input input::placeholder{ color:#7a7d85; }
.fp-input input:hover{ border-color:#3c3f46; }
.fp-input input:focus{ border-color:var(--red); box-shadow:0 0 0 4px rgba(227,13,23,.16); }
.fp-input:focus-within .fp-icon{ color:var(--red-hi); }
.fp-input input:-webkit-autofill{ -webkit-text-fill-color:#fff; -webkit-box-shadow:0 0 0 100px var(--field) inset; caret-color:#fff; }
.fp-eye{ position:absolute; right:12px; top:50%; transform:translateY(-50%); width:36px; height:36px; display:grid; place-items:center;
  background:none; border:0; border-radius:8px; color:#a3a5ad; cursor:pointer; }
.fp-eye:hover{ color:#fff; background:rgba(255,255,255,.06); }
.fp-eye svg{ width:22px; height:22px; }

.fp-row{ display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
.fp-remember{ display:flex; align-items:center; gap:12px; font-size:15.5px; font-weight:600; color:#eceef1; cursor:pointer; user-select:none; }
.fp-remember input{ appearance:none; width:22px; height:22px; margin:0; border:1.5px solid #5a5d64; border-radius:6px; background:transparent; display:grid; place-items:center; cursor:pointer; }
.fp-remember input:checked{ background:var(--red); border-color:var(--red); }
.fp-remember input:checked::after{ content:""; width:6px; height:11px; border:solid #fff; border-width:0 2px 2px 0; transform:translateY(-1px) rotate(45deg); }
.fp-forgot{ color:var(--red-hi); font-size:15.5px; font-weight:700; text-decoration:none; }
.fp-forgot:hover{ text-decoration:underline; }

.fp-submit{ position:relative; overflow:hidden; width:100%; height:45px; border:0; border-radius:12px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:10px; color:#fff; font:800 18px 'Manrope',var(--font),sans-serif;
  background:linear-gradient(180deg, #ff2228, #d80a13); box-shadow:0 14px 34px rgba(227,13,23,.38), inset 0 1px 0 rgba(255,255,255,.2);
  transition:transform .15s, box-shadow .2s, filter .2s; }
.fp-submit::after{ content:""; position:absolute; top:0; left:-60%; width:40%; height:100%; transform:skewX(-20deg);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent); transition:left .6s ease; }
.fp-submit:hover{ filter:brightness(1.06); box-shadow:0 18px 40px rgba(227,13,23,.5); }
.fp-submit:hover::after{ left:120%; }
.fp-submit:active{ transform:scale(.99); }
.fp-submit:disabled{ opacity:.7; cursor:progress; }
.fp-submit svg{ width:21px; height:21px; transition:transform .25s; }
.fp-submit:hover svg{ transform:translateX(3px); }


.fp-submit:focus-visible, .fp-forgot:focus-visible, .fp-eye:focus-visible, .fp-brand:focus-visible{ outline:2px solid #fff; outline-offset:3px; }

.fp-credit{ font-size:12px; color:#fff; }
.fp-credit a{ color:#e30d17; text-decoration:none; text-transform: uppercase; }

/* ---------- Short laptop screens ---------- */
@media (min-width: 1200px) and (max-height: 820px){
  .fp-page{ padding:9px; gap:6px; }
  .fp-frame{ min-height:calc(100vh - 40px); }
  .fp-brand img{ width:clamp(64px,5.6vw,92px); height:clamp(64px,5.6vw,92px); }
  .fp-brand span::after{ margin-top:10px; }
  .fp-hero{ margin-top:22px; }
  .fp-hero h2{ font-size:clamp(26px,2.5vw,40px); }
  .fp-hero p{ margin-top:10px; font-size:14.5px; }
  .fp-features{ margin-top:20px; }
  .fp-features .ic{ width:50px; height:50px; border-radius:12px; }
  .fp-badge{ padding:10px 18px 10px 12px; }
  .fp-badge svg{ width:30px; height:30px; }
  .fp-card{ padding:26px clamp(24px,3vw,48px); }
  .fp-eyebrow{ font-size:12px; padding:5px 12px; }
  .fp-card h1{ margin-top:12px; font-size:clamp(28px,2.3vw,36px); }
  .fp-lead{ margin:8px 0 16px; font-size:14.5px; }
  .fp-form{ gap:23px; }
  .fp-field label{ font-size:14.5px; margin-bottom:10px; }
  .fp-input input, .fp-submit{ height:46px; }
  .fp-remember, .fp-forgot{ font-size:14.5px; }
}
@media (min-width: 1200px) and (max-height: 680px){
  .fp-hero p, .fp-badge{ display:none; }
  .fp-hero h2{ font-size:clamp(24px,2.2vw,34px); }
  .fp-lead{ margin-bottom:12px; }
  .fp-form{ gap:10px; }
  .fp-input input, .fp-submit{ height:42px; }
}

/* ---------- 1199px and below: login card only ---------- */
@media (max-width: 1199px){
  .fp-page{ padding:clamp(12px,3vw,32px); gap:8px }
  .fp-frame{ grid-template-columns:minmax(0,1fr); min-height:calc(100vh - 2 * clamp(12px,3vw,32px) - 26px); }
  .fp-visual{ display:none; }
  .fp-scene{ background-position:55% 55%; }
  .fp-scene::before{ background:
    radial-gradient(ellipse at center, rgba(10,10,12,.35) 0%, rgba(10,10,12,.8) 75%),
    linear-gradient(180deg, rgba(10,10,12,.6) 0%, rgba(10,10,12,.2) 40%, rgba(10,10,12,.7) 100%); }
  .fp-form-side{ padding:clamp(16px,4vw,48px); }
  .fp-card{ align-self:center; min-height:0; max-width:560px; }
}
@media (max-width: 600px){
  .fp-page{ padding:0; }
  .fp-frame{ border-radius:0; min-height:calc(100vh - 56px); }
  .fp-frame::after{ display:none; }
  .fp-form-side{ padding:16px; }
  .fp-card{ padding:28px 20px; }
}

/* ---------- Sign-up extras ---------- */
.fp-field-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.fp-branches{ display:grid; gap:18px; }
.fp-remove{ position:absolute; right:12px; top:50%; transform:translateY(-50%); width:36px; height:36px; display:grid; place-items:center;
  background:none; border:0; border-radius:8px; color:#a3a5ad; cursor:pointer; }
.fp-remove:hover{ color:var(--red-hi); background:rgba(227,13,23,.1); }
.fp-remove svg{ width:20px; height:20px; }
.fp-add-branch{ justify-self:start; display:inline-flex; align-items:center; gap:8px; margin-top:-6px; padding:8px 14px; border-radius:10px;
  border:1.5px dashed rgba(255,59,59,.5); background:rgba(227,13,23,.08); color:var(--red-hi);
  font:700 14px 'Manrope',var(--font),sans-serif; cursor:pointer; transition:background .2s, border-color .2s; }
.fp-add-branch:hover{ background:rgba(227,13,23,.16); border-color:var(--red-hi); }
.fp-add-branch svg{ width:16px; height:16px; }
.fp-switch{ margin:10px 0 0; text-align:center; font-size:15px; color:#b9bbc1; }
.fp-switch a{ color:var(--red-hi); font-weight:700; text-decoration:none; }
.fp-switch a:hover{ text-decoration:underline; }
.fp-add-branch:focus-visible, .fp-remove:focus-visible, .fp-switch a:focus-visible{ outline:2px solid #fff; outline-offset:3px; }
@media (max-width: 600px){
  .fp-field-row{ grid-template-columns:1fr; gap:16px; }
}
/* the sign-up form is longer than the login form: tighten its spacing so more of it fits on screen */
body[data-page="sign-up"] .fp-form{ gap:14px; }
/* the fields scroll inside a fixed-height area; "Keep signed in" and Create Account stay visible below it.
   The small padding/negative margin keeps the red focus ring from being clipped by the scroll edge. */
body[data-page="sign-up"] .fp-form-scroll{display: grid;
  gap: 14px;
  max-height: 280px;
  overflow-y: auto;
  padding: 4px 10px 22px 4px;
  margin: -4px -10px 0 -4px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,59,59,.5) transparent;
  /* soft fade at the bottom hints that more fields are below */
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 26px), transparent);
  mask-image: linear-gradient(180deg, #000 calc(100% - 26px), transparent); }
body[data-page="sign-up"] .fp-form-scroll::-webkit-scrollbar{ width:6px; }
body[data-page="sign-up"] .fp-form-scroll::-webkit-scrollbar-thumb{ background:rgba(255,59,59,.5); border-radius:6px; }
body[data-page="sign-up"] .fp-card h1{ margin-top:14px; }
body[data-page="sign-up"] .fp-lead{ margin:8px 0 18px; }
body[data-page="sign-up"] .fp-input input{ height:50px; }
@media (min-width: 1200px){
  body[data-page="sign-up"] .fp-card{ padding-top:clamp(24px,2.6vw,44px); padding-bottom:clamp(24px,2.6vw,44px); }
}
@media (min-width: 1200px) and (max-height: 820px){
  body[data-page="sign-up"] .fp-input input, body[data-page="sign-up"] .fp-submit{ height:44px; }
  body[data-page="sign-up"] .fp-form, body[data-page="sign-up"] .fp-form-scroll{ gap:10px; }
  body[data-page="sign-up"] .fp-field label{ margin-bottom:6px; }
}