:root{
      --brand:#1FB6D5; --brand-dark:#1593AC;
      --brand-soft:rgba(31,182,213,.12);
      --bg:#F3F8FC; --surface:#ffffff;
      --text:#0B1F2A; --muted:#5B6B76;
      --border:rgba(11,31,42,.10);
      --shadow-md:0 18px 50px rgba(11,31,42,.10);
      --nav-h:76px;
      --ring:0 0 0 4px rgba(31,182,213,.15);
    }
    html[data-theme="dark"]{
      --bg:#071821;
      --surface:#0B2230;
      --text:#EAF4FA;
      --muted:#B9D0DD;
      --border:rgba(234,244,250,.12);
      --shadow-md:0 22px 70px rgba(0,0,0,.45);
    }

    /* PAGE */
    .page{
      padding-top: calc(var(--nav-h) + 34px);
      padding-bottom: 40px; /* ✅ no footer, smaller bottom */
    }

    /* ✅ NEW: Header outside the card */
    .login-header{
      text-align:center;
      margin: 8px 0 18px;
    }
    .login-header .panel-title{
      margin:0;
      font-weight:900;
      letter-spacing:-0.05em;
      font-size: clamp(2.4rem, 5vw, 3.3rem);
      line-height:1.05;
    }
    .login-header .panel-title span{ color: var(--brand); }
    .login-header .panel-sub{
      margin:10px 0 0;
      color:var(--muted);
      font-weight:500;
      font-size:1rem;
    }

    .login-grid{
      margin-top: 14px;
      display:grid;
      grid-template-columns: 1.1fr 1fr;
      gap: 34px;
      align-items:center;
    }
    @media (max-width: 992px){
      .login-grid{ grid-template-columns:1fr; gap: 22px; }
      .left-visual{ order:2; }
      .right-card{ order:1; }
    }

    /* LEFT IMAGE */
    .left-visual{
      position:relative;
      min-height: 420px;
      border-radius: 34px;
      border: 1px solid var(--border);
      box-shadow: var(--shadow-md);
      overflow:hidden;
      background: color-mix(in srgb, var(--surface) 70%, transparent);
    }
    .left-visual .left-img{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      object-fit:cover;
      transform: scale(1.02);
      filter: saturate(1.02) contrast(1.02);
    }
    .left-visual .left-img-overlay{
      position:absolute;
      inset:0;
      background:
        radial-gradient(620px 360px at 18% 20%, rgba(31,182,213,.22), transparent 60%),
        radial-gradient(520px 320px at 88% 20%, rgba(120,93,255,.16), transparent 62%),
        linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.04) 40%, rgba(0,0,0,.18));
      pointer-events:none;
    }
    html[data-theme="dark"] .left-visual .left-img{
      filter: saturate(1.03) contrast(1.06) brightness(.92);
    }
    html[data-theme="dark"] .left-visual .left-img-overlay{
      background:
        radial-gradient(620px 360px at 18% 20%, rgba(31,182,213,.18), transparent 60%),
        radial-gradient(520px 320px at 88% 20%, rgba(120,93,255,.14), transparent 62%),
        linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.28));
    }

    /* CARD */
    .form-panel{
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 34px;
      box-shadow: var(--shadow-md);
      overflow:hidden;
    }

    /* ✅ we keep only the body now */
    .form-body{ padding: 26px 30px 30px; }

    @media (max-width: 520px){
      .form-body{ padding: 20px; }
    }

    /* SOCIAL BUTTONS */
    .social-row{ display:grid; grid-template-columns: 1fr 1fr; gap:14px; }
    @media (max-width: 520px){ .social-row{ grid-template-columns:1fr; } }

    .social-btn{
      height:54px;
      border-radius:12px;
      border:1px solid rgba(148,163,184,.45);
      background:#fff;
      display:flex;
      align-items:center;
      justify-content:center;
      gap:12px;
      font-weight:700; /* ✅ reduced weight */
      color:#0B1F2A;
      transition:.16s ease;
      user-select:none;
      padding:0 14px;
    }
    .social-btn:hover{ transform:translateY(-1px); box-shadow:0 10px 26px rgba(11,31,42,.08); }
    .social-btn .logo{ width:20px; height:20px; display:inline-block; }
    .social-btn.apple .logo{ width:18px; height:18px; }
    .social-btn.apple svg{ display:block; width:18px; height:18px; fill:#111; }

    html[data-theme="dark"] .social-btn{
      background: rgba(255,255,255,0.06);
      border-color: rgba(234,244,250,.16);
      color: var(--text);
    }
    html[data-theme="dark"] .social-btn.apple svg{ fill: var(--text); }

    .orline{
      display:flex; align-items:center; gap:12px;
      margin:18px 0 14px;
      color: var(--muted);
      font-weight:700; /* ✅ not super bold */
      font-size:.78rem;
      letter-spacing:.12em;
      justify-content:center;
    }
    .orline:before, .orline:after{
      content:""; height:1px; flex:1; background: var(--border);
    }

    /* INPUTS */
    .form-label{
      font-weight: 700; /* ✅ reduced */
      font-size: 0.85rem;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      margin-bottom: 8px;
      color: var(--muted);
    }
    .form-control{
      height: 56px;
      border-radius: 14px;
      border: 1px solid rgba(148,163,184,0.40);
      background: rgba(248,250,252,0.80);
      font-weight: 600; /* ✅ reduced so not everything looks bold */
      transition: .2s ease;
      color: var(--text);
    }
    html[data-theme="dark"] .form-control{
      background: rgba(255,255,255,0.05);
      border-color: rgba(234,244,250,.16);
      color: var(--text);
    }
    .form-control::placeholder{ color: rgba(91,107,118,.75); font-weight: 500; }
    html[data-theme="dark"] .form-control::placeholder{ color: rgba(185,208,221,.65); }
    .form-control:focus{
      border-color: var(--brand);
      box-shadow: var(--ring);
      outline: none;
    }

    /* PASSWORD EYE */
    .pw-wrap{ position:relative; }
    .pw-eye{
      position:absolute;
      right: 14px;
      top: 50%;
      transform: translateY(-50%);
      border:0;
      background: transparent;
      color: rgba(91,107,118,.85);
      width: 44px; height: 44px;
      display:flex; align-items:center; justify-content:center;
      border-radius: 12px;
      cursor:pointer;
    }
    html[data-theme="dark"] .pw-eye{ color: rgba(185,208,221,.85); }
    .pw-eye:hover{ background: rgba(31,182,213,.10); color: var(--brand); }

    /* REMEMBER / FORGOT */
    .meta-row{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      margin-top: 10px;
      margin-bottom: 16px;
      color: var(--muted);
      font-size: .92rem;
      font-weight: 600; /* ✅ reduced */
    }
    .meta-row a{ color: var(--brand-dark); font-weight: 700; text-decoration:none; }
    .meta-row a:hover{ text-decoration:underline; color: var(--brand); }

    .form-check-input{ width:1.1em; height:1.1em; margin-top:.15em; }
    html[data-theme="dark"] .form-check-input{
      background-color: rgba(255,255,255,0.10);
      border-color: rgba(234,244,250,0.30);
    }
    html[data-theme="dark"] .form-check-input:checked{
      background-color: var(--brand);
      border-color: var(--brand);
    }

    .below{
      margin-top: 16px;
      text-align:center;
      color: var(--muted);
      font-size: .95rem;
      font-weight: 600; /* ✅ reduced */
    }
    .below a{ color: var(--brand-dark); text-decoration:none; font-weight: 700; }
    .below a:hover{ color: var(--brand); text-decoration:underline; }