/* ============== Pastel UI Theme (Light) ============== */
/* Color system */
:root{
  --bg:#f9fafc;
  --surface:#ffffff;
  --surface-2:#f3f6fb;
  --text:#1f2430;
  --muted:#6c7890;
  --line:#e6ebf3;

  /* Pastel accents */
  --pink:#ff9ecb;
  --pink-700:#ff6aa8;
  --mint:#9ee7d7;
  --mint-700:#56d6be;
  --lav:#c9c6ff;
  --lav-700:#9f9aff;
  --amber:#ffd28a;
  --red:#ff7070;
  --green:#34d399;

  /* Radii / spacing / shadow */
  --br:18px;
  --gap:14px;
  --pad:18px;
  --shadow:0 10px 30px rgba(20,20,40,.06);

  /* Typography */
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
}

/* Basic reset */
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;
  font:16px/1.6 var(--font);
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 20% -10%, #fff 0%, #f6f8fd 60%) no-repeat,
    var(--bg);
}

/* App container */
.app{max-width:960px; margin:0 auto; padding:22px}

/* Header */
.header{
  display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:12px;
}
.brand{display:flex; align-items:center; gap:12px}
.logo{width:48px; height:48px; border-radius:12px; background:#fff; box-shadow:var(--shadow)}
.brand-text h1{margin:0; font-size:22px}
.tagline{margin:2px 0 0; color:var(--muted); font-size:14px}
.lang label{display:block; font-size:12px; color:var(--muted); margin-bottom:6px}
.lang select{
  padding:10px 12px; border-radius:12px; border:1px solid var(--line); background:var(--surface); color:var(--text);
  outline:none;
}

/* Progress bar */
.progress-wrap{
  height:10px; background:var(--surface-2); border-radius:999px; overflow:hidden;
  border:1px solid var(--line); box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
}
.progress-bar{
  height:100%; width:0;
  background:linear-gradient(90deg, var(--pink), var(--lav), var(--mint));
  background-size:200% 100%;
  animation:barMove 6s linear infinite;
}
@keyframes barMove { 0%{background-position:0 0} 100%{background-position:200% 0} }

/* Steps */
.steps{margin-top:16px}
.step{
  display:none;
  background:var(--surface);
  border-radius:var(--br);
  padding:calc(var(--pad) + 6px);
  box-shadow:var(--shadow);
  border: 1px solid var(--line);
}
.step.active{display:block}
.lead{color:#364157}

/* Card blocks */
.card{
  background:var(--surface-2);
  border:1px dashed var(--line);
  border-radius:16px;
  padding:var(--pad);
  margin:16px 0;
}
.lbl{display:block; margin-bottom:8px; color:#48536a; font-size:14px}
.muted{color:var(--muted); font-size:13px}
textarea, input[type="email"]{
  width:100%; padding:12px 14px; border-radius:12px;
  border:1px solid var(--line); background:#fff; color:var(--text);
  outline:none; transition:border-color .2s, box-shadow .2s;
}
textarea:focus, input[type="email"]:focus{
  border-color:#c9d7ff;
  box-shadow:0 0 0 4px rgba(156, 163, 255, .18);
}

/* Layout helpers */
.row{display:flex; align-items:center}
.row.gap{gap:10px; flex-wrap:wrap}
.hide{display:none}

/* Buttons */
.btn{
  appearance:none; border:0; border-radius:12px; padding:10px 16px; cursor:pointer;
  background:var(--surface); color:var(--text); box-shadow:var(--shadow);
  border:1px solid var(--line); transition:transform .06s ease, filter .15s ease, box-shadow .2s ease;
}
.btn:hover{filter:brightness(1.03)}
.btn:active{transform:translateY(1px)}
.btn.primary{
  background: linear-gradient(180deg, var(--pink), var(--pink-700));
  color:white; border:0;
}
.btn.secondary{
  background: linear-gradient(180deg, var(--lav), var(--lav-700));
  color:white; border:0;
}
.btn.next{
  background: linear-gradient(180deg, var(--mint), var(--mint-700));
  color:#053b34; border:0;
}
.btn.back{
  background: linear-gradient(180deg, #e8eefc, #cfe0ff);
  color:#1d2b53; border:0;
}
.btn.ghost{
  background:#fff; color:#425274; border:1px dashed var(--line);
}
.btn[disabled]{opacity:.6; cursor:not-allowed}

/* Nav areas */
.nav{display:flex; justify-content:flex-end; gap:10px; margin-top:14px}
.nav.two{justify-content:space-between}

/* Messages */
.msg{min-height:1.4em; margin-top:10px; font-weight:500}
.msg.ok{color:#0f9d6e}
.msg.err{color:#d64545}

/* Footer */
.footer{margin:18px auto 10px; text-align:center; color:var(--muted)}

/* Toast (JS injects inline styles; here just enhance) */
.toast{backdrop-filter: blur(6px)}

/* ============== Motion & Effects ============== */
/* Subtle glow on focusable blocks */
.fx-glow{transition:box-shadow .25s ease, transform .25s ease}
.fx-glow:focus-within{box-shadow:0 8px 30px rgba(156,163,255,.25); transform:translateY(-1px)}

/* Press effect for buttons */
.fx-press{transform:translateY(0); transition:transform .06s ease}
.fx-press:active{transform:translateY(1px)}

/* Pop-in for logos/smaller elements */
.fx-pop{animation:fx-pop .4s ease-out both}
@keyframes fx-pop{
  from{transform:scale(.94); opacity:0}
  to{transform:scale(1); opacity:1}
}

/* Drop-in for header */
.fx-drop{animation:fx-drop .5s cubic-bezier(.2,.7,.2,1) both}
@keyframes fx-drop{
  from{transform:translateY(-12px); opacity:0}
  to{transform:translateY(0); opacity:1}
}

/* Fade for containers/footer */
.fx-fade{animation:fx-fade .5s ease-out both}
@keyframes fx-fade{
  from{opacity:0} to{opacity:1}
}

/* Slide for step sections */
.fx-slide{animation:fx-slide .45s cubic-bezier(.2,.7,.2,1) both}
@keyframes fx-slide{
  from{transform:translateY(10px); opacity:0}
  to{transform:translateY(0); opacity:1}
}

/* ============== RTL tweaks ============== */
html[dir="rtl"] .brand-text h1, 
html[dir="rtl"] .tagline,
html[dir="rtl"] .lbl,
html[dir="rtl"] .lead,
html[dir="rtl"] .muted { text-align:right }
html[dir="rtl"] .row{flex-direction:row-reverse}
html[dir="rtl"] .nav{flex-direction:row-reverse}
html[dir="rtl"] .nav.two{flex-direction:row-reverse; justify-content:space-between}

/* ============== Responsiveness ============== */
@media (max-width: 720px){
  .header{flex-direction:column; align-items:flex-start}
  .brand{width:100%}
  .tagline{font-size:13px}
  .app{padding:16px}
  .step{padding:18px}
  textarea{min-height:120px}
  .nav.two{flex-direction:column; gap:8px}
}
@media (max-width: 420px){
  .logo{width:44px; height:44px}
  .brand-text h1{font-size:20px}
  .btn{width:100%}
  .row.gap{gap:8px}
}

/* ============== Accessibility ============== */
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  *{animation:none!important; transition:none!important; scroll-behavior:auto!important}
}

/* High-contrast tweak (opt-in with class on body if needed) */
.hc .muted{color:#3b4255}
.hc .progress-wrap{border-color:#cbd5e1}