:root{
      --panel: rgba(17,25,40,.65);
      --panel-2: rgba(17,25,40,.55);
      --outline: rgba(255,255,255,.14);
      --text: #e7e9f3;
      --muted: #aab1c6;
      --primary: #8b5cf6; /* violet */
      --accent: #3b82f6;  /* blue */
    }
    :root[data-theme="light"]{
      --panel: rgba(255,255,255,.92);
      --panel-2: rgba(255,255,255,.88);
      --outline: rgba(10,20,40,.12);
      --text:#0f1527;
      --muted:#50607a;
      --primary:#6d28d9;
      --accent:#2563eb;
    }

    *{ box-sizing:border-box; }
    html,body{ height:100%; }

    /* Background identical to register.php */
    body{
      margin:0;
      color:var(--text);
      background:
        radial-gradient(1400px 800px at -10% -20%, rgba(59,130,246,.22) 0%, transparent 55%),
        radial-gradient(1200px 700px at 110% -10%, rgba(139,92,246,.18) 0%, transparent 55%),
        linear-gradient(180deg, #0b1020, #0a0f1b 45%, #0b1221);
      font: 15px/1.45 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
    }
    :root[data-theme="light"] body{
      background:
        radial-gradient(1200px 600px at -10% -20%, rgba(59,130,246,.16) 0%, transparent 55%),
        radial-gradient(1100px 600px at 110% -10%, rgba(139,92,246,.14) 0%, transparent 55%),
        linear-gradient(180deg, #f8fafc, #eef2f7 50%, #e9eef6);
    }

    /* Center wrapper (brand + card) */
    .auth-wrap{
      min-height:100vh;
      display:grid;
      place-items:center;
      padding:32px 16px;
    }
    .stack{
      display:flex;
      flex-direction:column;
      align-items:center;
      gap:14px; /* places brand close to form, like register.php */
    }

    /* Brand (same as register) */
    .brand{
      display:flex; align-items:center; gap:10px;
      user-select:none;
    }
    .brand-badge{
      width:32px; height:32px; border-radius:10px;
      background: linear-gradient(135deg, var(--primary), var(--accent));
      box-shadow: 0 10px 26px rgba(59,130,246,.35);
    }
    .brand-name{
      font-weight:600; letter-spacing:.2px;
      color: var(--text);
      text-shadow: 0 2px 10px rgba(0,0,0,.35);
    }

    /* Glass card (identical shape/effects to register) */
    .card{
      position:relative;
      width:min(460px, 94vw);
      border-radius:16px;
      border:1px solid var(--outline);
      background:
        linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0)),
        var(--panel);
      box-shadow:
        0 35px 90px rgba(2,8,20,.55),
        inset 0 1px 0 rgba(255,255,255,.08);
      backdrop-filter:saturate(160%) blur(14px);
      -webkit-backdrop-filter:saturate(160%) blur(14px);
      overflow:hidden;
    }
    .card::before{
      content:"";
      position:absolute; inset:0; pointer-events:none; z-index:0;
      background:
        radial-gradient(130% 70% at -15% -20%, color-mix(in oklab, var(--accent), transparent 70%) 0%, transparent 60%),
        radial-gradient(120% 70% at 120% -15%, color-mix(in oklab, var(--primary), transparent 72%) 0%, transparent 62%);
      opacity:.55;
    }
    .card-head{
      position:relative; z-index:1;
      padding:16px 18px;
      border-bottom:1px solid var(--outline);
      display:flex; align-items:center; justify-content:center;
      background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0));
    }
    .card-title{ margin:0; font-size:16px; letter-spacing:.3px; }

    .card-body{ position:relative; z-index:1; padding:18px; display:grid; gap:12px; }

    label{ display:block; font-size:13px; color:var(--muted); margin-bottom:6px; }

    .control{
      width:100%;
      border-radius:12px;
      border:1px solid var(--outline);
      padding:10px 12px;
      color:var(--text);
      background:
        linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
        var(--panel-2);
      outline:none;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
    }
    .control:focus{
      border-color: color-mix(in oklab, var(--accent), white 12%);
      box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 78%);
    }

    .row{
      display:flex; gap:10px; align-items:center; justify-content:space-between;
    }

    .btn{
      appearance:none; border:0; cursor:pointer;
      border-radius:12px; padding:10px 14px; font-weight:600;
    }
    .btnPrimary{
      background:
        linear-gradient(180deg, color-mix(in oklab, var(--accent), white 8%), color-mix(in oklab, var(--accent), black 6%));
      color:white;
      box-shadow: 0 10px 24px rgba(59,130,246,.35), inset 0 1px 0 rgba(255,255,255,.18);
      min-width:110px;
    }
    .btnPrimary:hover{ transform: translateY(-1px); }
    .btnPrimary:active{ transform: translateY(0); }

    .aux{
      font-size:13px; color:var(--muted); text-decoration:none;
    }
    .aux:hover{ color: color-mix(in oklab, var(--accent), white 10%); }

    .errors{
      margin:0; padding:10px 12px;
      border:1px solid color-mix(in oklab, crimson, white 35%);
      background: linear-gradient(180deg, rgba(220,38,38,.16), rgba(220,38,38,.08));
      color:#fecaca; border-radius:12px; list-style:none;
    }
    :root[data-theme="light"] .errors{
      color:#7f1d1d; background: linear-gradient(180deg,#fee2e2,#ffe4e4); border-color:#fecaca;
    }

    @media (max-width:480px){
      .card-body{ padding:14px; }
      .card-head{ padding:14px; }
    }

.row-start{ justify-content:flex-start; }