@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');

:root{
  --primary:#0d6efd;
  --primary-dark:#0b5ed7;
  --bg:#ffffff;
  --text:#0a1630;
  --muted:#6b7280;
  --border:#e7edf7;
  --shadow:0 18px 40px rgba(13,110,253,.12);
}

html,body{height:100%;}
body{
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, 'Helvetica Neue', Arial, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
  background: var(--bg);
  color: var(--text);
}

/* Decorative background waves (soft blue, no purple) */
body::before, body::after{
  content:""; position: fixed; left:0; width:100%; z-index: -1; pointer-events:none; background-repeat:no-repeat; background-size:cover; opacity: 1;
}
/* Top wave */
body::before{
  top:0; height:140px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 160'><path fill='%23eaf2ff' d='M0,96L48,101.3C96,107,192,117,288,128C384,139,480,149,576,144C672,139,768,117,864,112C960,107,1056,117,1152,128C1248,139,1344,149,1392,154.7L1440,160L1440,0L0,0Z'/></svg>");
}
/* Bottom wave */
body::after{
  bottom:0; height:160px; transform: rotate(180deg);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 160'><path fill='%23dbe9ff' d='M0,96L48,101.3C96,107,192,117,288,128C384,139,480,149,576,144C672,139,768,117,864,112C960,107,1056,117,1152,128C1248,139,1344,149,1392,154.7L1440,160L1440,0L0,0Z'/></svg>");
}

/* Cards */
.card.signup-form,
.card.login-form{
  border:2px solid rgba(13,110,253,.10);
  border-radius:20px;
  box-shadow: var(--shadow);
  overflow:hidden;
}
.card.signup-form:hover,
.card.login-form:hover{ box-shadow: 0 24px 48px rgba(13,110,253,.16); border-color: rgba(13,110,253,.18); }
.card .card-body{ padding: 2rem; }

/* Headings */
.card .card-body h5{ font-weight: 700; letter-spacing:.2px; color:#0a1630; }
.card .card-body p.lead{ color:#334155; }

/* Logo */
.login-form-logo img,
.signup-form-logo img{ filter: drop-shadow(0 3px 10px rgba(0,0,0,.08)); margin-bottom: .25rem; }

/* Buttons */
.btn{ border-radius: 10px; font-weight:600; }
.btn-primary{ background-color: var(--primary) !important; border-color: var(--primary) !important; }
.btn-primary:hover{ background-color: var(--primary-dark) !important; border-color: var(--primary-dark) !important; }
.btn-primary:focus{ box-shadow: 0 0 0 .2rem rgba(13,110,253,.25) !important; }
.btn-outline-secondary{ color: var(--primary); border-color: var(--primary); }
.btn-outline-secondary:hover{ background-color: rgba(13,110,253,.08); color: var(--primary-dark); }

/* Inputs */
.form-group label{ font-weight:600; color:#0f172a; }
.form-control{ border-color:#e5eaf3; height: 48px; border-radius:10px; }
.form-control:focus{ border-color: var(--primary); box-shadow: 0 0 0 .2rem rgba(13,110,253,.15); }
.input-group .btn{ border-top-left-radius:0; border-bottom-left-radius:0; }
/* Icon prefix styling */
.input-group-text{ background-color:#f6faff; border-color:#e5eaf3; color: var(--primary); }
::placeholder{ color:#9aa4b2 !important; }

/* Feedback */
.form-text{ color: var(--muted); }
.invalid-feedback, .valid-feedback{ display:block; }

/* Progress */
.progress{ height: .5rem; background-color:#eef4ff; border-radius: 10px; overflow: hidden; }
.progress-bar{ background-color: var(--primary); }

/* Links */
.login-form-links a, .login-form-links span, .signup-form-links a, .signup-form-links span{ color: var(--muted); }
.login-form-links a, .signup-form-links a{ color: var(--primary); font-weight:600; }
.login-form-links a:hover, .signup-form-links a:hover{ color: var(--primary-dark); text-decoration: none; }

/* Password toggles */
.fa-eye, .fa-eye-slash{ color: var(--primary); }

/* Containers */
.container{ padding-top: 2.25rem; padding-bottom: 2.25rem; }

/* Tiny top header bar */
.auth-topbar{ position: sticky; top:0; z-index: 10; background:#f7faff; border-bottom:1px solid var(--border); }
.auth-topbar .topbar-inner{ display:flex; gap:.75rem; align-items:center; justify-content:space-between; flex-wrap:wrap; padding:.35rem 0; font-size: .85rem; color:#0a1630; }
.auth-topbar .topbar-inner .item{ display:flex; align-items:center; gap:.4rem; }
.auth-topbar a{ color: var(--primary); text-decoration:none; }
.auth-topbar a:hover{ color: var(--primary-dark); text-decoration: underline; }
.auth-topbar i{ color: var(--primary); }