*,*::before,*::after{box-sizing:border-box}
  /* Same token names/values as login.html so the two pages cannot drift. */
  :root{

    --accent:#1aa6df; --accent-2:#0f8ec4; --accent-ink:#04202e;
    --ink:#0e2136; --ink-2:#4d5f74; --mut:#6b7a90;
    --paper:#ffffff; --paper-2:#f5f9fc; --line:#e4ecf4; --card:#fcfcfc;
    /* Neutral button fills — warm greys, not blue-tinted, so they read as
       chrome next to the cyan primary rather than as a second accent. */
    --neutral:#f1f0ee; --neutral-2:#e8e6e3; --neutral-3:#dedbd7;
    --danger:#d92d20;
    --disp:'Jost','Century Gothic',system-ui,sans-serif;
    --body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
    --ease:cubic-bezier(.16,1,.3,1);
  }
  :root[data-theme="dark"]{
    --ink:#f5f9fc; --ink-2:#9ea3a6; --mut:#7a7f82;
    --paper:#18191b; --paper-2:#212225; --card:#26282b; --line:#33363a;
    --neutral:#2e2a26; --neutral-2:#383430; --neutral-3:#423d38;
  }


  html,body{margin:0;padding:0;min-height:100vh;background:var(--paper);color:var(--ink);
    font-family:var(--body);-webkit-font-smoothing:antialiased}
  a{color:inherit}

  /* Split layout: form left, brand panel right. The panel is decorative
     only, so it is the half that collapses on narrow screens. */
  .su-wrap{display:grid;grid-template-columns:1fr 1fr;min-height:100vh}
  .su-form-col{display:flex;flex-direction:column;padding:clamp(24px,4vw,48px);
    background:var(--paper)}
  /* Hovering the wordmark turns it into Back, the same gesture checkout.html
     uses — it is the only way off this page, and "Souqi" did not look like a
     way off anything. */
  .su-brand{display:inline-flex;align-items:center;gap:9px;font-family:var(--disp);
    font-weight:800;font-size:1.1rem;color:var(--ink);text-decoration:none;width:fit-content}
  .su-brand img{width:26px;height:26px;object-fit:contain;border-radius:5px}
  .su-brand .arrow{font-size:1.05rem;color:var(--mut);transition:transform .15s ease,color .15s ease}
  .su-brand .back-text{display:none}
  .su-brand:hover .brand-text{display:none}
  .su-brand:hover .back-text{display:inline-block}
  .su-brand:hover .arrow{transform:translateX(-3px);color:var(--ink)}
  .su-body{flex:1;display:flex;flex-direction:column;justify-content:center;
    max-width:400px;width:100%;margin:0 auto;padding:32px 0}
  .su-h1{font-family:var(--disp);font-size:clamp(1.6rem,3vw,2rem);font-weight:600;
    text-align:center;margin:0 0 26px;letter-spacing:-.01em}

  /* Flat neutral fills with no visible border — the provider logo is the
     only colour in the row, so the eye lands on the primary action rather
     than on four competing outlined boxes. */
  .su-oauth{display:flex;flex-direction:column;gap:9px}
  .su-oa{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
    height:48px;border:0;border-radius:10px;background:var(--neutral);
    color:var(--ink);font:inherit;font-size:.95rem;font-weight:500;cursor:pointer;
    transition:background .15s ease}
  .su-oa:hover{background:var(--neutral-2)}
  .su-oa:active{background:var(--neutral-3)}
  .su-oa svg{width:18px;height:18px;flex:none}

  .su-or{display:flex;align-items:center;gap:12px;color:var(--mut);
    font-size:.8rem;font-weight:600;margin:18px 0}
  .su-or::before,.su-or::after{content:"";flex:1;border-bottom:1px solid var(--line)}

  .su-field{margin-bottom:14px}
  .su-label{display:block;font-size:.82rem;font-weight:600;color:var(--ink-2);margin-bottom:6px}
  .su-input{width:100%;height:46px;padding:0 13px;border:1px solid var(--line);
    border-radius:10px;background:var(--card);color:var(--ink);font:inherit;font-size:.95rem;
    transition:border-color .15s ease,box-shadow .15s ease}
  .su-input:focus{outline:0;border-color:var(--accent);
    box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
  .su-input[aria-invalid="true"]{border-color:var(--danger)}
  .su-pw-wrap{position:relative}
  .su-pw-wrap .su-input{padding-right:44px}
  .su-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:32px;height:32px;
    border:0;background:none;color:var(--mut);cursor:pointer;display:grid;place-items:center;
    border-radius:7px}
  .su-eye:hover{color:var(--ink);background:var(--paper-2)}
  .su-eye svg{width:17px;height:17px}
  .su-hint{font-size:.76rem;color:var(--mut);margin-top:6px}
  .su-hint.ok{color:var(--ok,#22a565)}
  .su-hint.bad{color:var(--danger,#d92d20)}

  .su-submit{width:100%;height:48px;border:0;border-radius:10px;cursor:pointer;
    background:var(--accent);color:#fff;font:inherit;font-size:.98rem;font-weight:700;
    margin-top:6px;transition:background .15s ease,transform .12s ease}
  .su-submit:hover:not(:disabled){background:var(--accent-2);transform:translateY(-1px)}
  .su-submit:disabled{opacity:.6;cursor:not-allowed;transform:none}

  .su-err{display:none;margin-top:12px;padding:10px 12px;border-radius:9px;
    background:color-mix(in srgb,var(--danger) 10%,transparent);
    border:1px solid color-mix(in srgb,var(--danger) 32%,transparent);
    color:var(--danger);font-size:.86rem;font-weight:500}
  .su-err.show{display:block}

  .su-legal{margin-top:16px;text-align:center;font-size:.76rem;color:var(--mut);line-height:1.55}
  .su-legal a{color:var(--ink-2);font-weight:600}
  .su-alt{margin-top:20px;text-align:center;font-size:.88rem;color:var(--ink-2)}
  .su-alt a{color:var(--accent);font-weight:600;text-decoration:none}
  .su-alt a:hover{text-decoration:underline}

  /* ---- the ad half -------------------------------------------------------
     This was a full-bleed SVG with a tagline over it, and the SVG lost. Its
     glass cards were drawn at 3-16% white and then TWO vignettes were painted
     on top — one of them 72% opaque across exactly the third the type sits in
     — so a composition with a browser, a phone and a code fragment in it
     never reached the eye, and the panel read as a flat navy rectangle. The
     art was also a 1200x1600 portrait canvas cropped by object-fit:cover into
     a short panel, which threw away most of whatever survived.

     So: no image at all. The field is built from the same palette that SVG
     used (#1aa6df, #7c3aed, #63d0ff over #0b1e33) as CSS gradients — which
     cannot be cropped wrong, weigh nothing next to an 8KB file, and leave the
     foreground free for what this half is actually for: saying what you get. */
  .su-panel{position:relative;overflow:hidden;color:#fff;
    display:flex;align-items:center;padding:clamp(32px,4vw,60px);
    background:
      radial-gradient(58% 44% at 78% 10%,rgba(26,166,223,.34),transparent 62%),
      radial-gradient(64% 52% at 6% 94%,rgba(124,58,237,.30),transparent 64%),
      radial-gradient(42% 34% at 52% 56%,rgba(99,208,255,.13),transparent 66%),
      linear-gradient(158deg,#0b1e33 0%,#102a45 54%,#0d3f5c 100%)}
  /* The 60px grid the SVG had, kept and masked to a soft centre. It gives the
     orbs something to sit on, so they read as light in a space rather than as
     coloured smudges on a flat fill. */
  .su-panel::before{content:"";position:absolute;inset:0;pointer-events:none;
    background:
      repeating-linear-gradient(to right,rgba(255,255,255,.05) 0 1px,transparent 1px 60px),
      repeating-linear-gradient(to bottom,rgba(255,255,255,.05) 0 1px,transparent 1px 60px);
    -webkit-mask-image:radial-gradient(120% 92% at 50% 38%,#000 28%,transparent 78%);
    mask-image:radial-gradient(120% 92% at 50% 38%,#000 28%,transparent 78%)}
  .su-panel-in{position:relative;z-index:1;width:100%;max-width:470px;margin:0 auto}

  .su-eyebrow{display:flex;align-items:center;gap:9px;margin:0 0 15px;
    font-size:.7rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
    color:rgba(255,255,255,.6)}
  .su-eyebrow::before{content:"";width:18px;height:1px;background:var(--accent);flex:none}
  .su-panel-in h2{font-family:var(--disp);font-size:clamp(1.65rem,2.5vw,2.25rem);font-weight:600;
    margin:0 0 11px;line-height:1.14;letter-spacing:-.018em}
  .su-lede{margin:0 0 26px;font-size:.97rem;line-height:1.6;color:rgba(255,255,255,.7)}

  /* The tiles. These numbers ARE the fix: the old artwork failed because it
     was drawn at 3-16% white, so 7% fill against a 13% border is the floor
     that still reads as a surface over the gradient rather than dissolving
     into it. Lower them and this panel goes straight back to looking empty. */
  .su-caps{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .su-cap{position:relative;border-radius:14px;padding:15px 14px 14px;
    background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13);
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
  /* One-pixel top highlight — the difference between a translucent panel that
     reads as lit from above and one that reads as a flat grey box. */
  .su-cap::after{content:"";position:absolute;inset:0 0 auto;height:1px;
    border-radius:14px 14px 0 0;pointer-events:none;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent)}
  /* .su-cap .su-cap-ic, not .su-cap-ic. The tile is a <span>, so the
     description rule below — .su-cap span — matched it too, and at (0,1,1) it
     outranked a bare (0,1,0) class: display:block won over display:grid,
     place-items did nothing, and every glyph sat jammed in the top-left
     corner of its tile with a quarter of the blue square empty beside it.
     Two classes here settles it, and the rule below no longer reaches the
     tile at all. */
  .su-cap .su-cap-ic{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;
    margin-bottom:12px;background:linear-gradient(150deg,rgba(26,166,223,.95),rgba(26,166,223,.42));
    box-shadow:0 4px 14px rgba(26,166,223,.34)}
  /* 15px was small enough that a 1.8 stroke landed between pixels and every
     icon read as a smudge. Bigger tile, bigger glyph, round joins so the four
     match each other. */
  .su-cap .su-cap-ic svg{width:19px;height:19px;color:#fff;
    stroke-linecap:round;stroke-linejoin:round}
  .su-cap b{display:block;font-size:.89rem;font-weight:600;margin-bottom:4px;letter-spacing:-.005em}
  .su-cap span:not(.su-cap-ic){display:block;font-size:.79rem;line-height:1.5;color:rgba(255,255,255,.64)}

  .su-panel-foot{display:flex;align-items:center;gap:9px;margin:24px 0 0;
    padding-top:17px;border-top:1px solid rgba(255,255,255,.12);
    font-size:.85rem;color:rgba(255,255,255,.7)}
  .su-panel-foot svg{width:15px;height:15px;color:var(--accent);flex:none}

  @media (max-width:900px){
    .su-wrap{grid-template-columns:1fr}
    .su-panel{display:none}
  }
  @media (prefers-reduced-motion:reduce){
    .su-submit:hover:not(:disabled){transform:none}
  }