/* Parva International — pastel auth theme
   Themes use the client palette: Pastel Pink #F8C8DC, Mint Green #BFE8D5, Baby Blue #C9DAF8,
   Lavender #E6D5F7, Pastel Yellow #FFF0B3, Peach #FFD7C2, Dusty Rose #F3C6C6,
   Pastel Sage #D9E8B8, Cream #F5E6CC, Pastel Aqua #C5E7E8.
   --c1/--c2/--c3 = the three pastels of the combination
   --accent/--accent2 = deeper shades of the same hues (for text, buttons, lines — keeps it readable) */

:root,[data-theme="lavender"]{ /* Lavender + Pastel Pink + Peach */
  --c1:#E6D5F7; --c2:#F8C8DC; --c3:#FFD7C2;
  --accent:#7b5fc4; --accent2:#c46f9a; --accent-rgb:123,95,196;
}
[data-theme="mint"]{ /* Mint Green + Pastel Aqua + Baby Blue */
  --c1:#BFE8D5; --c2:#C5E7E8; --c3:#C9DAF8;
  --accent:#2f8a72; --accent2:#3b78bf; --accent-rgb:47,138,114;
}
[data-theme="rose"]{ /* Dusty Rose + Cream + Peach */
  --c1:#F3C6C6; --c2:#F5E6CC; --c3:#FFD7C2;
  --accent:#b0525e; --accent2:#c0814a; --accent-rgb:176,82,94;
}
[data-theme="sage"]{ /* Pastel Sage + Cream + Mint Green */
  --c1:#D9E8B8; --c2:#F5E6CC; --c3:#BFE8D5;
  --accent:#5a7d38; --accent2:#3d8a6d; --accent-rgb:90,125,56;
}
[data-theme="sky"]{ /* Baby Blue + Lavender + Pastel Pink */
  --c1:#C9DAF8; --c2:#E6D5F7; --c3:#F8C8DC;
  --accent:#4a6cc0; --accent2:#8a60c2; --accent-rgb:74,108,192;
}

:root{
  --ink:#2f2a3d; --muted:#76718a; --line:#e7e3ef;
  --err:#c4566e; --err-bg:#fdecef; --ok:#3f8f72; --ok-bg:#e8f7f0;
  --radius:22px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;color:var(--ink);
  background:linear-gradient(135deg,color-mix(in srgb,var(--c1) 45%,#fff) 0%,#fbfaf8 50%,color-mix(in srgb,var(--c3) 40%,#fff) 100%);
  min-height:100vh;overflow-x:hidden;position:relative;
}
.blob{position:fixed;border-radius:50%;filter:blur(70px);opacity:.75;z-index:0;pointer-events:none}
.b1{width:420px;height:420px;background:var(--c1);top:-120px;left:-100px}
.b2{width:360px;height:360px;background:var(--c3);bottom:-120px;right:-80px}
.b3{width:300px;height:300px;background:var(--c2);top:40%;left:45%}

.shell{position:relative;z-index:1;min-height:100vh;display:grid;grid-template-columns:1.1fr 1fr;
  max-width:1240px;margin:0 auto;padding:32px;gap:32px;align-items:center}

/* Brand side */
.brand{background:linear-gradient(160deg,rgba(255,255,255,.78),rgba(255,255,255,.45));
  border:1px solid rgba(255,255,255,.9);border-radius:32px;padding:40px 44px;
  backdrop-filter:blur(14px);box-shadow:0 20px 60px -30px rgba(var(--accent-rgb),.45);
  display:flex;flex-direction:column;gap:22px;min-height:620px}
.brand-top{display:flex;align-items:center;gap:14px}
.logo{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;flex:none;
  font-family:'Cormorant Garamond',serif;font-weight:700;font-size:28px;color:#fff;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  box-shadow:0 8px 18px -8px rgba(var(--accent-rgb),.8)}
.brand-name{font-family:'Cormorant Garamond',serif;font-weight:700;font-size:24px;letter-spacing:.3px}
.brand-tag{font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-top:2px}
.art{flex:1;display:grid;place-items:center}
.art svg{width:100%;max-width:380px;height:auto;animation:float 6s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
/* illustration colours follow the theme */
.s-line{stroke:var(--accent)} .s-body{fill:#fff} .s-collar{fill:var(--c1)}
.s-btn{fill:var(--c3);stroke:var(--accent2)} .s-tape{stroke:var(--c3)} .s-tick{stroke:var(--accent2)}
.s-thread{stroke:var(--accent2)} .s-spool{fill:var(--c2)} .s-stitch{stroke:var(--accent2)}

.brand-copy h1{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:40px;line-height:1.1}
.brand-copy h1 em{color:var(--accent)}
.brand-copy p{color:var(--muted);margin-top:12px;line-height:1.6;max-width:440px}
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.chips li{font-size:12.5px;font-weight:600;padding:7px 14px;border-radius:999px;color:var(--ink)}
.chips li:nth-child(1){background:var(--c1)} .chips li:nth-child(2){background:var(--c2)}
.chips li:nth-child(3){background:var(--c3)} .chips li:nth-child(4){background:var(--c1)}

/* Form side */
.panel{display:flex;flex-direction:column;align-items:center;gap:18px}
.card{width:100%;max-width:440px;background:rgba(255,255,255,.85);border:1px solid rgba(255,255,255,.95);
  border-radius:var(--radius);padding:40px 38px;backdrop-filter:blur(18px);
  box-shadow:0 30px 70px -35px rgba(var(--accent-rgb),.5)}
.card::before{content:"";display:block;height:5px;margin:-40px -38px 34px;border-radius:var(--radius) var(--radius) 0 0;
  background:linear-gradient(90deg,var(--c1),var(--c2),var(--c3))}
.mobile-brand{display:none}
.card h2{font-family:'Cormorant Garamond',serif;font-weight:700;font-size:34px}
.sub{color:var(--muted);margin:6px 0 26px;font-size:14.5px}

.alert{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:14px;
  font-size:13.5px;margin-bottom:18px;line-height:1.45}
.alert svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2;margin-top:1px}
.alert-error{background:var(--err-bg);color:var(--err);border:1px solid #f6d0d8}
.alert-ok{background:var(--ok-bg);color:var(--ok);border:1px solid #cdeee0}

.field{display:block;margin-bottom:18px}
.label{display:block;font-size:13px;font-weight:600;margin-bottom:8px}
.input-wrap{position:relative;display:flex;align-items:center}
.input-wrap>svg{position:absolute;left:15px;width:18px;height:18px;fill:none;stroke:#a7a2b8;stroke-width:1.8;pointer-events:none;transition:stroke .2s}
.input-wrap input{width:100%;height:52px;border:1.5px solid var(--line);border-radius:14px;
  padding:0 46px;font:inherit;font-size:15px;color:var(--ink);background:#fcfbfd;outline:none;
  transition:border-color .2s,box-shadow .2s,background .2s}
.input-wrap input::placeholder{color:#b4afc4}
.input-wrap input:focus{border-color:var(--accent);background:#fff;box-shadow:0 0 0 4px rgba(var(--accent-rgb),.15)}
.input-wrap:focus-within>svg{stroke:var(--accent)}
.eye{position:absolute;right:8px;width:36px;height:36px;border:0;background:none;border-radius:10px;cursor:pointer;display:grid;place-items:center}
.eye svg{width:18px;height:18px;fill:none;stroke:#a7a2b8;stroke-width:1.8}
.eye:hover{background:var(--c1)}
.eye.on svg{stroke:var(--accent)}

.row{display:flex;justify-content:space-between;align-items:center;margin:4px 0 24px;font-size:13.5px;gap:12px;flex-wrap:wrap}
.check{display:flex;align-items:center;gap:8px;cursor:pointer;color:var(--muted)}
.check input{width:17px;height:17px;accent-color:var(--accent)}
.link{color:var(--accent);font-weight:600;text-decoration:none}
.link:hover{text-decoration:underline}

.btn{width:100%;height:54px;border:0;border-radius:14px;cursor:pointer;font:inherit;font-weight:700;font-size:15.5px;
  color:#fff;display:flex;align-items:center;justify-content:center;gap:10px;
  background:linear-gradient(120deg,var(--accent) 0%,var(--accent2) 100%);background-size:160% 100%;
  box-shadow:0 12px 26px -12px rgba(var(--accent-rgb),.9);transition:background-position .4s,transform .15s,box-shadow .2s}
.btn svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:2.2;transition:transform .2s}
.btn:hover{background-position:100% 0}
.btn:hover svg{transform:translateX(3px)}
.btn:active{transform:translateY(1px)}
.btn.loading{opacity:.85;pointer-events:none}

.secure{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:22px;font-size:12.5px;color:var(--muted)}
.secure svg{width:15px;height:15px;fill:var(--c1);stroke:var(--accent);stroke-width:1.5}
.foot{font-size:12.5px;color:var(--muted);text-align:center}
.foot a{color:var(--accent);text-decoration:none}

@media (max-width:960px){
  .shell{grid-template-columns:1fr;padding:16px;min-height:100vh;align-content:center}
  .brand{display:none}
  .mobile-brand{display:flex;align-items:center;gap:12px;margin-bottom:26px}
  .card{padding:32px 24px}
  .card::before{margin:-32px -24px 28px}
}
@media (prefers-reduced-motion:reduce){.art svg{animation:none}}