:root{
      --brand: #0f172a;         /* deep navy */
      --accent: #22c55e;        /* green */
      --bg: #0b1220;            /* page background */
      --card-bg: #ffffff;
      --muted: #64748b;
      --radius: 20px;
      --shadow: 0 10px 30px rgba(3,7,18,.15);
      --card-max-w: 480px;      /* “phone” width */
      --card-max-w-desktop: 768px; /* “tablet” preview when opened on desktop */
    }

    /* Page scaffold */
    html, body { height: 100%; }
    body{
      margin:0;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
      background:
        radial-gradient(1200px 600px at 100% -10%, #193353 0%, transparent 60%),
        radial-gradient(1200px 600px at -10% 100%, #0b2f26 0%, transparent 60%),
        var(--bg);
      color:#0f172a;
      display:grid;
      place-items:center;
      padding: clamp(16px, 3vh, 40px);
    }

    /* Phone/Tablet card */
    .device{
      width: min(100%, var(--card-max-w));
      background: var(--card-bg);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      overflow: clip;
    }

    /* On large screens, preview a tablet-sized card */
    @media (min-width: 1024px){
      .device{ width: min(100%, var(--card-max-w-desktop)); }
    }

    .header{
      padding: 28px 24px 12px;
      display:flex;
      align-items:center;
      gap:65px;
    }
    .logo{
      width:42px; height:42px; border-radius:12px;
      display:grid; place-items:center;
      padding: 5px;
      color:#fff; font-weight:700;
      box-shadow: 0 6px 16px rgba(107, 114, 128, 0.35);
      user-select:none;
    }
    .brand{
      line-height:1.1; margin:0;
      font-size: 18px; color: var(--brand);
      letter-spacing:.2px; font-weight: 800;
    }
    .subtitle{ margin:2px 0 0; color: var(--muted); font-size: 12px; }

    .content{ padding: 6px 24px 24px; }

    .title{ margin: 10px 0 18px; font-size: 22px; color: var(--brand); }

    form{ display:grid; gap:14px; }

    .field{
      display:grid; gap:8px;
    }
    label{ font-size: 12px; color: var(--muted); }
    .control{
      position:relative;
      display:flex; align-items:center;
      border:1px solid #e2e8f0;
      border-radius: 14px;
      padding: 12px 14px;
      background:#fff;
      transition: border-color .2s ease, box-shadow .2s ease;
    }
    .control:focus-within{
      border-color:#93c5fd;
      box-shadow: 0 0 0 4px rgba(59,130,246,.15);
    }
    .control input{
      border:0; outline:0; width:100%;
      font-size:16px; background:transparent;
    }
    .icon{
      width:20px; height:20px; margin-right:10px; color:#94a3b8;
      flex:0 0 auto;
    }

    .toggle{
      position:absolute; right:10px; top:50%; transform: translateY(-50%);
      border:0; background:transparent; cursor:pointer; padding:6px; border-radius:10px;
      color:#64748b;
    }
    .toggle:focus{ outline:2px solid rgba(59,130,246,.4); outline-offset:2px; }

    .row{
      display:flex; align-items:center; justify-content:space-between;
      gap:12px; margin: 4px 0 4px;
    }
    .remember{ display:flex; align-items:center; gap:8px; font-size: 13px; color:#1f2937; }
    .muted-link{
      font-size: 13px; color:#2563eb; text-decoration:none;
    }
    .muted-link:hover{ text-decoration:underline; }

   /* 1) Slate (balanced, default) */
    .submit{
    margin-top:6px; appearance:none; border:0; width:100%;
    background: linear-gradient(135deg, #6B7280, #4B5563); /* slate-500 → slate-600 */
    color:#fff; padding:14px 16px; border-radius:14px;
    font-weight:700; font-size:16px; letter-spacing:.2px; cursor:pointer;
    box-shadow: 0 10px 20px rgba(55,65,81,.25), 0 2px 6px rgba(0,0,0,.06);
    transition: transform .05s ease, filter .15s ease;
    }
    .submit:hover{ filter:brightness(1.05); }
    .submit:active{ transform:translateY(1px); filter:brightness(.96); }

    /* 2) Graphite (darker, higher contrast) */
    .submit--graphite{
    background: linear-gradient(135deg, #374151, #1F2937); /* gray-700 → gray-800 */
    box-shadow: 0 10px 20px rgba(31,41,55,.28), 0 2px 6px rgba(0,0,0,.08);
    }

    /* 3) Light steel (softer) */
    .submit--light{
    background: linear-gradient(135deg, #9CA3AF, #6B7280); /* gray-400 → slate-500 */
    box-shadow: 0 10px 20px rgba(107,114,128,.22), 0 2px 6px rgba(0,0,0,.05);
    }

    /* Optional disabled look */
    .submit:disabled{
    background: linear-gradient(135deg, #E5E7EB, #D1D5DB);
    color:#9CA3AF; box-shadow:none; cursor:not-allowed;
    }

    .submit:active{ transform: translateY(1px); filter: brightness(.96); }

    .foot{
      padding: 16px 24px 22px; color:#94a3b8; font-size:12px; text-align:center;
    }

    /* Safe-area padding for iOS */
    .device{ padding-bottom: env(safe-area-inset-bottom); }


    #error{
        text-align: center;
        margin-top: 15px;
        font-size: 12px;
        color: red;
    }