:root{
      --primary:#6A1B9A;
  --primary-dark:#4A126E;
  --primary-light:#F4EAFB;
  --primary-mid:#9C4DCC;

   /* Background */
  --bg:#FAF8FC;
  --card:#FFFFFF;

 

  /* Text */
  --ink:#2A2332;
  --ink-soft:#6F657A;

  /* Borders */
  --line:#E9DEF3;
    --radius:8px; /* control radius (Neuform token) — was 12px */
    --font-display:'Inter', sans-serif;
    --font-body:'Inter', sans-serif;

    /* Neuform depth tokens — derived from existing --ink / --card, no new hues */
    --shadow-raised: 8px 8px 20px rgba(42,35,50,0.12), -8px -8px 20px rgba(255,255,255,0.85);
    --shadow-raised-sm: 4px 4px 10px rgba(42,35,50,0.10), -4px -4px 10px rgba(255,255,255,0.8);
    --shadow-inset: inset 3px 3px 7px rgba(42,35,50,0.08), inset -3px -3px 7px rgba(255,255,255,0.75);
  }

  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    font-family:var(--font-body);
    color:var(--ink);
    background:var(--bg);
    min-height:100vh;
  }

  a{color:var(--primary);}

  /* ---------- top bar ---------- */
.logo {
    display: inline-block;
    margin-bottom: 1rem;
}

.logo img {
    display: block;
    height: 42px;      /* Adjust as needed */
    width: auto;
}

  .brand-mark{
    font-family:var(--font-display);
    font-weight:600;
    font-size:1.4rem;
     color:var(--primary);
    margin:0;
  }

  /* ---------- main two column layout ---------- */
  .layout{
    max-width:1180px;
    margin:0 auto;
    padding:3.5rem 2rem 4rem;
    display:grid;
    grid-template-columns:1.15fr 0.85fr;
    gap:3rem;
    align-items:start;
  }

  /* ---------- left: hero + map ---------- */
  .intro-heading{
    font-family:var(--font-display);
    font-weight:600;
    font-size:clamp(1.7rem,3vw,2.3rem);
    color:var(--primary);
    line-height:1.25;
    margin:0 0 0.85rem;
  }

  .intro-sub{
    font-size:1rem;
    color:var(--ink-soft);
    line-height:1.55;
    margin:0 0 1rem;
  }

  .map-wrap{
    width:100%;
  }

  .world-map{
    width:100%;
    height:auto;
    display:block;
  }



  /* ---------- right: auth card ---------- */
  .auth-panel{
    display:flex;
    justify-content:center;
  }

  .auth-card{
    width:100%;
    max-width:400px;
    background:var(--card);
    border:1px solid var(--line);
    border-radius:16px; /* card radius (Neuform token) — unchanged, already matched */
    padding:2rem 1.85rem;
    box-shadow:var(--shadow-raised); /* was a mismatched green-tinted shadow; now a soft embossed depth in-palette */
  }

  .auth-heading{
    font-family:var(--font-display);
    font-weight:600;
    font-size:1.6rem;
    margin:0 0 0.35rem;
    line-height:1.2;
  }

  .auth-subheading{
    color:var(--ink-soft);
    font-size:0.92rem;
    margin:0 0 1.6rem;
  }

  .tab-input{
    position:absolute;
    width:1px;
    height:1px;
    opacity:0;
  }

  .tab-switch{
    display:grid;
    grid-template-columns:1fr 1fr;
    background:var(--bg);
    border:1px solid var(--line);
    border-radius:999px; /* pill radius (Neuform token) — unchanged, already matched */
    padding:4px;
    margin-bottom:1.6rem;
    box-shadow:var(--shadow-inset); /* recessed groove for the pill track */
  }

  .tab-label{
    text-align:center;
    padding:0.55rem 0;
    border-radius:999px;
    font-size:0.9rem;
    font-weight:500;
    color:var(--ink-soft);
    cursor:pointer;
    transition:background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
  }

  #tab-login:checked ~ .tab-switch label[for="tab-login"],
  #tab-signup:checked ~ .tab-switch label[for="tab-signup"]{
    background:var(--primary);
    color:#fff;
    box-shadow:var(--shadow-raised-sm); /* active tab pops out of the recessed track */
  }

  #tab-login:focus-visible ~ .tab-switch label[for="tab-login"],
  #tab-signup:focus-visible ~ .tab-switch label[for="tab-signup"]{
    outline:2px solid var(--primary-dark);
    outline-offset:2px;
  }

  .auth-form{display:none;}
  #tab-login:checked ~ .forms .login-form{display:block;}
  #tab-signup:checked ~ .forms .signup-form{display:block;}

  .form-row{
    display:flex;
    gap:0.75rem;
    margin-bottom:1.05rem;
  }

  .form-field{
    flex:1;
    display:flex;
    flex-direction:column;
    gap:0.4rem;
    margin-bottom:1.05rem;
  }

  .form-row .form-field{margin-bottom:0;}

  .form-field label{
    font-size:0.82rem;
    font-weight:500;
    color:var(--ink);
  }

  .input,.select{
    font-family:var(--font-body);
    font-size:0.95rem;
    padding:0.68rem 0.8rem;
    border:1px solid var(--line);
    border-radius:var(--radius);
    background:var(--card);
    color:var(--ink);
    width:100%;
    box-shadow:var(--shadow-inset); /* pressed-in Neuform field */
    transition:box-shadow 0.15s ease, border-color 0.15s ease;
  }

  .field-hint{
    font-size:0.78rem;
    color:var(--ink-soft);
  }

  .options-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:1.3rem;
    font-size:0.85rem;
  }

  .checkbox-row{
    display:flex;
    align-items:flex-start;
    gap:0.55rem;
    font-size:0.82rem;
    color:var(--ink-soft);
    margin-bottom:1.3rem;
    line-height:1.45;
  }

  .checkbox-row input{
    margin-top:0.2rem;
    accent-color:var(--primary);
  }

  .btn{
    width:100%;
    font-family:var(--font-body);
    font-weight:600;
    font-size:0.95rem;
    padding:0.78rem 0;
    border-radius:var(--radius);
    border:none;
    cursor:pointer;
    transition:background 0.15s ease, box-shadow 0.1s ease, transform 0.1s ease;
  }

  .btn-primary{
    background:var(--primary);
    color:#fff;
    box-shadow:var(--shadow-raised-sm); /* raised, tactile button */
  }

  .btn-primary:hover{background:var(--primary);}

  .btn-primary:active{
    box-shadow:var(--shadow-inset); /* pressed feedback on click */
    transform:translateY(1px);
  }

  .input:focus-visible,
  .select:focus-visible{
    outline:none;
    border-color:var(--primary);
    box-shadow:var(--shadow-inset), 0 0 0 3px var(--primary-light);
  }

  .switch-note{
    text-align:center;
    font-size:0.85rem;
    color:var(--ink-soft);
    margin-top:1.3rem;
  }

  .switch-note a{font-weight:500;}

  .form-message{
    display:none;
    font-size:0.85rem;
    padding:0.65rem 0.85rem;
    border-radius:var(--radius);
    margin-bottom:1.1rem;
    line-height:1.45;
  }

  .form-message.error{background:#FDECEA;color:#B3261E;}
  .form-message.success{background:var(--primary-light);color:var(--primary-dark);}

  .site-footer {
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  padding: 28px 20px;
  margin-top: 60px;
  background: transparent;
}

.footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

.footer-brand {
  font-size: 13px;
  color: rgba(0, 0, 0, 0.6);
  margin: 0;
}

.footer-links {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  justify-content: center;
}

.footer-links a {
  font-size: 13px;
  color: rgba(0, 0, 0, 0.65);
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-links a:hover {
  color: var(--primary-mid, #6d28d9);
}



.g-recaptcha {
  margin: 12px 0 20px;
}

/* Optional: dark mode support (if you ever add it) */
@media (prefers-color-scheme: dark) {
  .site-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }

  .footer-brand,
  .footer-links a {
    color: rgba(255, 255, 255, 0.7);
  }

  .footer-links a:hover {
    color: #a78bfa;
  }


}

@media (max-width:768px){
  body {
    background: #fff !important;
  }

  .layout{
    grid-template-columns:1fr;
    padding:2.5rem 1.25rem 3rem;
    gap:2.5rem;
    background: #fff !important;
  }

  .top-bar{padding:1rem 1.5rem;}
  .map-wrap{max-width:420px;margin:0 auto;}

  .auth-card{
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
  }

   .auth-panel{
    background: #fff !important;
    padding: 0 !important;
  }
    .forms{
    background: #fff !important;
  }
    form,
  .auth-form,
  .forms,
  .auth-card,
  .auth-panel {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
  }
}

  .cookie-banner {
    position: fixed;
    left: 20px;
    right: 20px;
    bottom: 20px;
    z-index: 99999;
    background: #ffffff;
    border: 1px solid #e5e5e5;
    border-radius: 14px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    padding: 18px 22px;
    display: none;
  }

  .cookie-banner-content {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
  }

  .cookie-banner-text {
    flex: 1;
  }

  .cookie-banner-text strong {
    display: block;
    font-size: 16px;
    margin-bottom: 4px;
    color: var(--text-main);
  }

  .cookie-banner-text p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-muted);
  }

  .cookie-banner-text a {
    color: var(--primary);
    text-decoration: underline;
  }

  .cookie-banner-actions {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
  }

  .cookie-btn {
    border: none;
    border-radius: 8px;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
  }

  .cookie-reject {
    background: #f2f2f2;
    color: #333;
  }

  .cookie-accept {
    background: var(--primary);
    color: #fff;
  }

  .cookie-btn:hover {
    opacity: 0.9;
  }

  @media (max-width: 700px) {
    .cookie-banner {
      left: 12px;
      right: 12px;
      bottom: 12px;
      padding: 16px;
    }

    .cookie-banner-content {
      display: block;
    }

    .cookie-banner-actions {
      margin-top: 14px;
      display: flex;
    }

    .cookie-btn {
      flex: 1;
    }
  }
  
  .password-field {
  position: relative;
}
.password-field .input {
  padding-right: 40px;
}
.toggle-password {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 4px;
  margin: 0;
  cursor: pointer;
  color: #8a8a8a;
  line-height: 0;
}
.toggle-password:hover {
  color: #333;
}
.toggle-password .eye-slash {
  opacity: 0;
  transition: opacity .15s ease;
}
.toggle-password.showing .eye-slash {
  opacity: 1;
}