/* Estratto da templates/registration/login.html il 09/07/2026 */
    :root{
      --navy-900:#061A3F; --navy-800:#0c2350; --navy-700:#112d5c;
      --teal:#3DB6B8; --teal-300:#5cc8ca; --teal-050:#d1f4f6; --teal-ink:#2E8B8B;
      --bg:#f2f5fb; --card:#fff; --border:#dde3ee; --border-strong:#c8d3e6;
      --ink:#0f1b2d; --muted:#64748b; --subtle:#8898aa;
      --err-bg:#fef2f2; --err-bd:#fca5a5; --err-tx:#991b1b;
      --ok-bg:#e6f7ef; --ok-tx:#1a7c4a;
      --warn-bg:#fffbeb; --warn-tx:#92400e;
      --info-bg:#e0f2fe; --info-tx:#075985;
      --shadow:0 24px 64px -12px rgba(6,26,63,.30);
      --shadow-sm:0 2px 8px rgba(6,26,63,.06);
    }
    *,*::before,*::after{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
      background:var(--bg);
      color:var(--ink);
      -webkit-font-smoothing:antialiased;
      text-rendering:optimizeLegibility;
    }
    .shell{
      display:grid;
      grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
      min-height:100vh;
    }

    /* ============ LEFT: BRAND PANEL ============ */
    .brand{
      position:relative;
      overflow:hidden;
      color:#eaf1fb;
      background:
        radial-gradient(1200px 600px at 12% 8%, rgba(61,182,184,.22), transparent 55%),
        radial-gradient(900px 700px at 92% 100%, rgba(17,45,92,.9), transparent 60%),
        linear-gradient(155deg,var(--navy-900) 0%,var(--navy-800) 52%,var(--navy-700) 100%);
      padding:56px 60px;
      display:flex;
      flex-direction:column;
    }
    /* soft aurora glow (very subtle, disabled under reduced-motion) */
    .brand .aurora{
      position:absolute;
      width:760px;height:760px;
      left:-220px;top:-260px;
      background:radial-gradient(circle,rgba(61,182,184,.20),transparent 62%);
      filter:blur(10px);
      pointer-events:none;
      z-index:0;
      animation:aurora 18s ease-in-out infinite alternate;
    }
    @keyframes aurora{
      0%{transform:translate3d(0,0,0) scale(1);opacity:.85}
      100%{transform:translate3d(60px,40px,0) scale(1.12);opacity:1}
    }
    /* watermark shield */
    .brand .watermark{
      position:absolute;
      right:-70px;bottom:-60px;
      width:420px;height:420px;
      opacity:.09;
      z-index:0;
      pointer-events:none;
    }
    .brand .watermark img{width:100%;height:100%;display:block}
    /* subtle mesh grid */
    .brand::before{
      content:"";
      position:absolute;inset:0;
      background-image:
        linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
      background-size:56px 56px;
      -webkit-mask-image:radial-gradient(120% 100% at 20% 0%,#000 30%,transparent 80%);
      mask-image:radial-gradient(120% 100% at 20% 0%,#000 30%,transparent 80%);
      pointer-events:none;
      z-index:0;
    }
    .brand-top,.brand-mid,.brand-bottom{position:relative;z-index:1}
    .brand-top{display:flex;align-items:center;gap:14px}
    .logo-lockup{display:flex;align-items:center;gap:14px}
    .logo-mark{
      width:48px;height:48px;
      display:grid;place-items:center;
      filter:drop-shadow(0 6px 18px rgba(61,182,184,.45));
    }
    .logo-mark img{width:100%;height:100%;display:block}
    .logo-word{font-family:'Outfit',sans-serif;font-weight:800;font-size:22px;letter-spacing:-.01em;color:#fff}
    .logo-word span{color:var(--teal-300)}

    .brand-mid{margin:auto 0;max-width:520px}
    .hero-shield{
      width:118px;height:118px;
      margin-bottom:34px;
      display:grid;place-items:center;
      border-radius:28px;
      background:linear-gradient(160deg,rgba(61,182,184,.16),rgba(255,255,255,.04));
      border:1px solid rgba(209,244,246,.22);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 30px 60px -30px rgba(0,0,0,.6);
    }
    .hero-shield img{width:80px;height:80px;display:block}
    .eyebrow{
      display:inline-flex;align-items:center;gap:8px;
      font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
      color:var(--teal-300);
      margin-bottom:18px;
      padding:7px 14px;
      border-radius:999px;
      background:rgba(61,182,184,.12);
      border:1px solid rgba(92,200,202,.38);
    }
    .eyebrow svg{width:15px;height:15px}
    .brand-mid h1{
      font-family:'Outfit',sans-serif;
      font-weight:800;
      font-size:clamp(30px,3.2vw,44px);
      line-height:1.08;
      letter-spacing:-.02em;
      margin:0 0 18px;
      color:#fff;
    }
    .brand-mid p.lede{
      margin:0;
      font-size:16.5px;
      line-height:1.6;
      color:#b9c8e0;
      max-width:440px;
    }

    .trust{
      display:grid;
      gap:12px;
      margin-top:38px;
    }
    .trust-item{
      display:flex;align-items:flex-start;gap:13px;
      padding:13px 16px;
      border-radius:14px;
      background:rgba(255,255,255,.05);
      border:1px solid rgba(209,244,246,.12);
      backdrop-filter:blur(2px);
    }
    .trust-ic{
      flex:0 0 auto;
      width:36px;height:36px;
      display:grid;place-items:center;
      border-radius:10px;
      background:rgba(61,182,184,.16);
      color:var(--teal-300);
    }
    .trust-ic svg{width:19px;height:19px}
    .trust-tx b{display:block;font-size:14px;font-weight:600;color:#eef4ff;letter-spacing:-.005em}
    .trust-tx small{display:block;font-size:12.5px;color:#93a6c6;margin-top:2px;line-height:1.4}

    .brand-bottom{
      margin-top:40px;
      display:flex;justify-content:space-between;align-items:center;
      font-size:12.5px;color:#8296b8;
    }
    .brand-bottom .ver{font-variant-numeric:tabular-nums;letter-spacing:.02em}

    /* ============ MOBILE COMPACT HEADER (hidden on desktop) ============ */
    .m-header{display:none}

    /* ============ RIGHT: FORM PANEL ============ */
    .pane{
      display:flex;
      align-items:center;
      justify-content:center;
      padding:48px 40px;
    }
    .card{
      position:relative;
      width:100%;
      max-width:408px;
      background:var(--card);
      border:1px solid var(--border);
      border-radius:20px;
      padding:36px 34px 30px;
      box-shadow:var(--shadow);
      overflow:hidden;
    }
    /* luminous teal top edge */
    .card::before{
      content:"";
      position:absolute;left:0;right:0;top:0;height:3px;
      background:linear-gradient(90deg,transparent,var(--teal-300) 22%,var(--teal) 50%,var(--teal-300) 78%,transparent);
      opacity:.9;
    }
    .card h2{
      font-family:'Outfit',sans-serif;
      font-weight:700;
      font-size:27px;
      letter-spacing:-.02em;
      margin:6px 0 6px;
      color:var(--ink);
    }
    .card .sub{
      margin:0 0 26px;
      font-size:14.5px;
      color:var(--muted);
    }

    /* messages + errors */
    .alert{
      display:flex;gap:10px;align-items:flex-start;
      padding:12px 14px;
      border-radius:12px;
      font-size:13.5px;line-height:1.45;
      margin-bottom:16px;
      border:1px solid transparent;
    }
    .alert svg{flex:0 0 auto;width:17px;height:17px;margin-top:1px}
    .alert-error,.alert.error{background:var(--err-bg);border-color:var(--err-bd);color:var(--err-tx)}
    .alert-ok,.alert.success{background:var(--ok-bg);border-color:#a7e3c4;color:var(--ok-tx)}
    .alert-warn,.alert.warning{background:var(--warn-bg);border-color:#fde68a;color:var(--warn-tx)}
    .alert-info,.alert.info{background:var(--info-bg);border-color:#bae6fd;color:var(--info-tx)}

    .field{margin-bottom:18px}
    .field label{
      display:block;
      font-size:13px;font-weight:600;
      color:#334155;
      margin-bottom:7px;
      letter-spacing:.005em;
    }
    .input-wrap{position:relative;display:flex;align-items:center}
    .input-wrap .lead-ic{
      position:absolute;left:14px;
      width:18px;height:18px;color:var(--subtle);pointer-events:none;
      transition:color .15s ease;
      z-index:1;
    }
    /* Django-rendered widgets get .form-control */
    .field input,.form-control{
      width:100%;
      font-family:inherit;
      font-size:15px;
      color:var(--ink);
      background:#fff;
      border:1.5px solid var(--border-strong);
      border-radius:12px;
      padding:13px 14px 13px 42px;
      line-height:1.2;
      transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
      appearance:none;
    }
    .field input::placeholder{color:#a7b2c6}
    .field input:hover,.form-control:hover{border-color:#b3c1db}
    .field input:focus,.form-control:focus{
      outline:2px solid transparent;
      outline-offset:2px;
      border-color:var(--teal);
      background:#fff;
      box-shadow:0 0 0 4px rgba(61,182,184,.18);
    }
    .input-wrap:focus-within .lead-ic{color:var(--teal-ink)}
    /* password field gets right padding for toggle */
    .field.has-toggle input,.field.has-toggle .form-control{padding-right:48px}
    /* invalid state — restyle the input itself, not only the message */
    .field.invalid input,.field.invalid .form-control{
      border-color:var(--err-bd);
      background:var(--err-bg);
    }
    .field.invalid .lead-ic{color:#c2606a}
    .field.invalid input:focus,.field.invalid .form-control:focus{
      border-color:#e2626c;
      box-shadow:0 0 0 4px rgba(220,80,90,.16);
    }
    .toggle-pw{
      position:absolute;right:6px;top:50%;transform:translateY(-50%);
      display:grid;place-items:center;
      width:44px;height:44px;
      border:none;background:transparent;cursor:pointer;
      color:var(--subtle);border-radius:9px;
      transition:color .15s ease,background .15s ease;
    }
    .toggle-pw:hover{color:var(--ink);background:#eef2f9}
    .toggle-pw:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
    .toggle-pw svg{width:19px;height:19px}
    .toggle-pw .eye-off{display:none}
    .toggle-pw.is-on .eye-on{display:none}
    .toggle-pw.is-on .eye-off{display:block}

    .field-err{
      display:flex;align-items:center;gap:6px;
      margin-top:7px;font-size:12.5px;color:var(--err-tx);font-weight:500;
    }
    .field-err svg{width:14px;height:14px;flex:0 0 auto}
    /* Django wraps field errors in <ul class="errorlist"> */
    .errorlist{list-style:none;margin:7px 0 0;padding:0;font-size:12.5px;color:var(--err-tx);font-weight:500}
    .errorlist li{margin-top:2px}

    .btn{
      width:100%;
      display:inline-flex;align-items:center;justify-content:center;gap:9px;
      font-family:'Outfit',sans-serif;
      font-size:15.5px;font-weight:700;letter-spacing:.01em;
      color:#fff;
      background:linear-gradient(160deg,var(--navy-700),var(--navy-900));
      border:1px solid var(--navy-800);
      border-radius:12px;
      padding:14px 18px;
      margin-top:4px;
      cursor:pointer;
      box-shadow:0 12px 28px -12px rgba(6,26,63,.7), inset 0 1px 0 rgba(255,255,255,.08);
      transition:transform .12s ease, box-shadow .2s ease, filter .2s ease;
    }
    .btn svg{width:18px;height:18px}
    .btn:hover{filter:brightness(1.08);box-shadow:0 16px 34px -12px rgba(6,26,63,.75)}
    .btn:active{transform:translateY(1px)}
    .btn:focus-visible{outline:2px solid var(--teal);outline-offset:3px;box-shadow:0 0 0 4px rgba(61,182,184,.35)}

    .card-foot{
      margin-top:24px;
      padding-top:18px;
      border-top:1px solid var(--border);
      display:flex;justify-content:space-between;align-items:center;
      font-size:12px;color:var(--subtle);
    }
    .card-foot .secure{display:inline-flex;align-items:center;gap:6px}
    .card-foot .secure svg{width:14px;height:14px;color:var(--teal-ink)}
    .card-foot .ver{font-variant-numeric:tabular-nums;letter-spacing:.02em}

    /* ============ RESPONSIVE ============ */
    @media (max-width:900px){
      .shell{grid-template-columns:1fr}
      .brand{display:none}
      .m-header{
        display:flex;align-items:center;gap:12px;
        padding:18px 22px;
        color:#eaf1fb;
        background:
          radial-gradient(700px 300px at 100% 0%, rgba(61,182,184,.25), transparent 60%),
          linear-gradient(120deg,var(--navy-900),var(--navy-700));
        box-shadow:var(--shadow-sm);
      }
      .m-header .logo-mark{width:40px;height:40px;border-radius:11px}
      .m-header .logo-mark svg{width:23px;height:23px}
      .m-header .m-word{font-family:'Outfit',sans-serif;font-weight:800;font-size:19px;color:#fff}
      .m-header .m-word span{color:var(--teal-300)}
      .m-header .m-tag{margin-left:auto;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--teal-050);opacity:.85}
      .pane{padding:30px 22px 48px;align-items:flex-start}
      .card{margin-top:8px}
    }
    @media (max-width:420px){
      .m-header .m-tag{display:none}
      .card{padding:28px 22px 26px}
      .card h2{font-size:24px}
      .pane{padding:24px 16px 40px}
    }
    @media (prefers-reduced-motion:reduce){
      *{transition:none !important;animation:none !important}
    }