:root{
    /* Warmed to the global theme; single typeface (Bricolage Grotesque). */
    --ink:#2A211E;
    --ink-2:#4A3F3A;
    --muted:#8A7C74;
    --line:#EBDFD3;
    --line-strong:#2A211E;
    --paper:#FBF6F0;
    --white:#FFFFFF;
    --accent:#F0533B;
    --serif:'Bricolage Grotesque', system-ui, sans-serif;
    --sans:'Bricolage Grotesque', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    --ease:cubic-bezier(.22,.61,.36,1);
  }
  *{box-sizing:border-box}
  html,body{height:100%}
  body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

  .auth{min-height:100dvh;display:grid;grid-template-columns:1.05fr .95fr}

  /* ---------- Left visual stage ---------- */
  .stage{position:relative;overflow:hidden;background:#0A0A0B}
  .stage__photos{position:absolute;inset:0}
  /* Single fixed backdrop image (no rotation / no Ken Burns loop). */
  /* Image is set inline in the template via asset('images/login.jpg') so it
     resolves to a committed, served file (public/images/) online too. */
  .stage__photo{position:absolute;inset:0;background-size:cover;background-position:center}
  .stage__scrim{position:absolute;inset:0;background:
    linear-gradient(180deg,rgba(10,10,11,.55) 0%,rgba(10,10,11,.05) 32%,rgba(10,10,11,.12) 62%,rgba(10,10,11,.78) 100%)}
  .stage__grain{position:absolute;inset:0;opacity:.5;mix-blend-mode:soft-light;pointer-events:none;
    background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.06),transparent 60%)}

  .stage__content{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;
    padding:clamp(28px,3.4vw,52px);color:#fff}
  .brand{display:inline-flex;align-items:center;gap:12px;font-family:var(--serif);font-weight:500;
    font-size:clamp(20px,1.5vw,24px);letter-spacing:-.01em;color:#fff}
  .brand__dot{width:34px;height:34px;border-radius:50%;background:#fff;color:#0A0A0B;display:grid;place-items:center;
    font-family:var(--serif);font-size:20px;line-height:1}
  .brand__logo{height:clamp(42px,4vw,58px);width:auto;display:block}
  .stage__quote{max-width:43ch}
  /* Playfair Display italic — the design system's "titre 2" face */
  .stage__quote p{font-family:"Playfair Display",Georgia,serif;font-style:italic;font-weight:500;
    font-size:clamp(26px,2.6vw,42px);line-height:1.15;margin:0;letter-spacing:-.005em;color:#fff}
  .stage__quote span{font-family:var(--sans);font-size:13px;letter-spacing:.14em;text-transform:uppercase;
    opacity:.72}

  /* ---------- Right form panel ---------- */
  .panel{display:flex;align-items:center;justify-content:center;padding:clamp(28px,4vw,64px);background:var(--paper)}
  .panel__inner{width:100%;max-width:392px}
  .panel .brand--mobile{display:none}

  .eyebrow{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin:0 0 14px}
  .title{font-family:var(--serif);font-weight:500;font-size:clamp(32px,3.4vw,44px);line-height:1.02;
    letter-spacing:-.015em;margin:0 0 12px}
  .lede{font-size:15px;line-height:1.55;color:var(--muted);margin:0 0 30px}

  .oauth{width:100%;display:flex;align-items:center;justify-content:center;gap:12px;
    height:52px;border:1px solid var(--line);border-radius:999px;background:var(--white);
    font-family:var(--sans);font-size:15px;font-weight:500;color:var(--ink);cursor:pointer;text-decoration:none;
    transition:border-color .2s var(--ease),background .2s var(--ease),transform .2s var(--ease)}
  .oauth:hover{background:#F5F3F0;border-color:#D9D5CE}
  .oauth:active{transform:translateY(1px)}
  .oauth svg{width:18px;height:18px}

  .divider{display:flex;align-items:center;gap:16px;margin:22px 0;color:var(--muted);
    font-size:12px;letter-spacing:.16em;text-transform:uppercase}
  .divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line)}

  .field{margin-bottom:18px}
  .field__label{display:block;font-size:13px;font-weight:500;color:var(--ink);margin:0 0 8px;letter-spacing:.01em}
  .field__wrap{position:relative}
  .input{width:100%;height:52px;padding:0 16px;border:1px solid var(--line);border-radius:12px;background:var(--white);
    font-family:var(--sans);font-size:15px;color:var(--ink);transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
  .input::placeholder{color:#B7B3AC}
  .input:hover{border-color:#D9D5CE}
  .input:focus{outline:none;border-color:var(--line-strong);box-shadow:0 0 0 3px rgba(10,10,11,.07)}
  .field__wrap .input{padding-right:52px}

  .toggle{position:absolute;top:0;right:0;height:52px;width:50px;display:grid;place-items:center;
    border:0;background:transparent;color:var(--muted);cursor:pointer;transition:color .2s var(--ease)}
  .toggle:hover{color:var(--ink)}
  .toggle svg{width:20px;height:20px}
  .toggle .eye-off{display:none}
  .toggle[aria-pressed="true"] .eye-on{display:none}
  .toggle[aria-pressed="true"] .eye-off{display:block}

  .row{display:flex;align-items:center;justify-content:space-between;margin:-2px 0 26px}
  .check{display:inline-flex;align-items:center;gap:9px;font-size:14px;color:var(--muted);cursor:pointer;user-select:none}
  .check input{position:absolute;opacity:0;width:0;height:0}
  .check__box{width:18px;height:18px;border:1px solid #CFCBC3;border-radius:5px;background:var(--white);
    display:grid;place-items:center;transition:all .18s var(--ease)}
  .check__box svg{width:12px;height:12px;color:#fff;opacity:0;transform:scale(.6);transition:all .18s var(--ease)}
  .check input:checked + .check__box{background:var(--ink);border-color:var(--ink)}
  .check input:checked + .check__box svg{opacity:1;transform:scale(1)}
  .check input:focus-visible + .check__box{box-shadow:0 0 0 3px rgba(10,10,11,.12)}
  .link{color:var(--ink);text-decoration:none;font-size:14px;border-bottom:1px solid transparent;
    padding-bottom:1px;transition:border-color .2s var(--ease)}
  .link:hover{border-color:var(--ink)}
  .link--muted{color:var(--muted)}

  .submit{width:100%;height:54px;border:0;border-radius:999px;background:var(--ink);color:#fff;cursor:pointer;
    font-family:var(--sans);font-size:16px;font-weight:600;letter-spacing:.01em;
    display:inline-flex;align-items:center;justify-content:center;gap:10px;
    transition:background .2s var(--ease),transform .2s var(--ease),box-shadow .25s var(--ease);
    box-shadow:0 1px 2px rgba(42,33,30,.24)}
  .submit:hover{background:var(--ink-2);transform:translateY(-2px);box-shadow:0 16px 30px -12px rgba(42,33,30,.5)}
  .submit:active{transform:translateY(1px)}
  .submit svg{width:17px;height:17px;transition:transform .25s var(--ease)}
  .submit:hover svg{transform:translateX(4px)}

  .switch{text-align:center;font-size:14.5px;color:var(--muted);margin:28px 0 0}
  .legal{text-align:center;font-size:12px;line-height:1.6;color:#9A968E;margin:26px auto 0;max-width:34ch}
  .legal a{color:#7A766E}

  /* ---------- Submit loading state ---------- */
  @keyframes spin{to{transform:rotate(360deg)}}
  .submit--loading{pointer-events:none;opacity:.85}
  .submit--loading .submit__spinner{display:inline-block}
  .submit--loading .submit__label,
  .submit--loading .submit__arrow{display:none}
  .submit__spinner{display:none;width:18px;height:18px;border:2px solid rgba(255,255,255,.35);
    border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}
  @media (prefers-reduced-motion:reduce){
    .submit__spinner{animation:none;border-top-color:#fff;opacity:.6}
  }

  .alert{border:1px solid #E7C7C7;background:#FBF1F1;color:#8A2B2B;border-radius:12px;
    padding:12px 14px;font-size:13.5px;margin:0 0 20px}
  .alert--ok{border-color:#CDE4D2;background:#F0F7F1;color:#245B34}

  :where(a,button,input,.check):focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:8px}

  /* ---------- Responsive ---------- */
  @media (max-width:900px){
    .auth{grid-template-columns:1fr;grid-template-rows:auto 1fr}
    .stage{min-height:36vh}
    .stage__content{padding:26px 24px}
    .stage__quote{display:none}
    .panel{padding:34px 22px 40px;border-radius:26px 26px 0 0;margin-top:-26px;position:relative;z-index:2}
    .panel .brand--mobile{display:none}
    .panel__inner{max-width:440px}
    .title{font-size:clamp(30px,8vw,38px)}
  }
  @media (max-width:520px){
    .stage{min-height:30vh}
    .stage .brand__dot{width:30px;height:30px;font-size:18px}
  }

  @media (prefers-reduced-motion:reduce){
    .submit,.oauth,.input,.link,.submit svg{transition:none}
  }