:root{
    --ink: #0E2A23;
    --ink-soft: #163832;
    --paper: #FFFFFF;
    --sage: #EEF5F0;
    --gold: #F2B705;
    --gold-dark: #8A6900;
    --coral: #C2451F;
    --denim: #3E6E8E;
    --moss: #4F7A68;
    --slate: #4B5A54;
    --slate-light: #647670;
    --border: rgba(14,42,35,0.12);
    --border-light: rgba(255,255,255,0.16);
    --shadow: 0 30px 60px -30px rgba(14,42,35,0.5);
    --font-display: 'Fraunces', Georgia, serif;
    --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
    --radius-sm: 10px;
    --radius-md: 18px;
    --radius-lg: 28px;
  }
  *{ box-sizing:border-box; margin:0; padding:0; }
  body{
    font-family: var(--font-body);
    color: var(--ink);
    line-height:1.6;
    -webkit-font-smoothing: antialiased;
  }
  a{ color:inherit; text-decoration:none; }
  p{ text-align: justify; text-justify: inter-word; }
  button{ font-family:inherit; cursor:pointer; }

  .logo{
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    font-style: italic;
    color: var(--ink);
  }
  .logo span{ color: var(--gold-dark); }

  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    padding: 14px 26px; border-radius: 999px; font-weight:700; font-size:0.98rem;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  }
  .btn:focus-visible{ outline:3px solid var(--gold); outline-offset:3px; }
  .btn-primary{ background: var(--gold); color: var(--ink); }
  .btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 14px 28px -12px rgba(242,183,5,0.55); }

  /* ---------- Auth page shell ---------- */
  .auth-page{
    min-height: 100vh;
    background: var(--ink);
    position: relative;
    overflow: hidden;
    display:flex;
    flex-direction:column;
  }
  .auth-page::before{
    content:""; position:absolute; width:560px; height:560px;
    background: radial-gradient(circle, rgba(242,183,5,0.2), transparent 70%);
    top:-200px; right:-140px; border-radius:50%;
  }
  .auth-page::after{
    content:""; position:absolute; width:420px; height:420px;
    background: radial-gradient(circle, rgba(255,107,74,0.15), transparent 70%);
    bottom:-160px; left:-120px; border-radius:50%;
  }
  .auth-topbar{
    position:relative; z-index:2;
    display:flex; justify-content:space-between; align-items:center;
    padding: 26px 36px; flex-wrap:wrap; gap:14px;
  }
  .back-link{
    color: var(--paper); font-weight:800; font-size:0.88rem;
    display:inline-flex; align-items:center; gap:8px; transition: all .18s ease;
    background: rgba(255,255,255,0.08); border: 1.5px solid var(--border-light);
    padding: 9px 16px; border-radius: 999px;
  }
  .back-link:hover{ background: rgba(255,255,255,0.16); border-color: rgba(255,255,255,0.35); transform: translateY(-2px); }
  .back-link:focus-visible{ outline:3px solid var(--gold); outline-offset:2px; }
  .trust-items{ display:flex; gap:24px; flex-wrap:wrap; }
  .trust-item{
    display:flex; align-items:center; gap:8px;
    font-size:0.82rem; color: rgba(255,255,255,0.65); font-weight:600;
  }
  .trust-item i{ color: var(--gold); }

  .auth-main{
    position:relative; z-index:2; flex:1;
    display:flex; align-items:center; justify-content:center;
    padding: 20px 20px 70px;
  }
  .auth-card{
    background: var(--paper);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: 48px 44px;
    width:100%;
    max-width: 460px;
  }
  .auth-card .logo{ display:block; text-align:center; margin-bottom:26px; }
  .auth-head{ text-align:center; margin-bottom:26px; }
  .auth-head h1{
    font-family: var(--font-display);
    font-weight:600; font-size:1.7rem; margin-bottom:8px; letter-spacing:-0.01em;
  }
  .auth-head p{ color:var(--slate); font-size:0.95rem; }

  .auth-tabs{
    display:flex; background: var(--sage); border-radius:999px; padding:4px; margin-bottom:28px;
  }
  .auth-tabs a{
    flex:1; text-align:center; padding:11px 0; border-radius:999px;
    font-weight:700; font-size:0.9rem; color:var(--slate); transition: all .15s ease;
  }
  .auth-tabs a.active{ background: var(--ink); color:var(--paper); }
  .auth-tabs a:focus-visible{ outline:3px solid var(--gold); outline-offset:2px; }

  .field{ margin-bottom:18px; }
  .field label{ display:block; font-size:0.86rem; font-weight:700; margin-bottom:8px; color: var(--ink); }
  .input-wrap{ position:relative; }
  .input-wrap i.input-icon{
    position:absolute; left:16px; top:50%; transform:translateY(-50%);
    color: var(--slate-light); font-size:0.95rem; pointer-events:none;
  }
  .input-wrap input{
    width:100%; padding:13px 16px 13px 44px;
    border:1.5px solid var(--border); border-radius:var(--radius-sm);
    font-family:var(--font-body); font-size:0.95rem; color:var(--ink);
    transition: border-color .15s ease, box-shadow .15s ease; background: var(--paper);
  }
  .input-wrap input:focus{
    outline:none; border-color: var(--gold); box-shadow: 0 0 0 4px rgba(242,183,5,0.16);
  }
  .toggle-pass{
    position:absolute; right:14px; top:50%; transform:translateY(-50%);
    color:var(--slate-light); background:none; border:none; font-size:0.95rem;
  }

  .check-row{ display:flex; gap:10px; align-items:flex-start; margin: 22px 0 24px; }
  .check-row input{ margin-top:3px; width:16px; height:16px; accent-color: var(--gold-dark); flex-shrink:0; }
  .check-row label{ font-size:0.84rem; color:var(--slate); line-height:1.5; }
  .check-row a{ color: var(--ink); font-weight:700; text-decoration: underline; text-underline-offset:2px; }

  .submit-btn{ width:100%; padding:15px 0; font-size:1rem; border:none; }

  @media (max-width: 560px){
    .auth-topbar{ padding: 20px 20px; }
    .trust-items{ display:none; }
    .auth-card{ padding: 36px 26px; }
  }
  @media (max-width: 380px){
    .auth-main{ padding: 12px 12px 50px; }
    .auth-card{ padding: 28px 18px; }
    .auth-head h1{ font-size: 1.45rem; }
    .logo{ font-size: 1.3rem; }
  }