@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;700;800&family=Sora:wght@600;700;800&display=swap');

    :root {
      --bg: #F7FBFF;
      --ink: #0F2740;
      --ink-soft: #4E647C;
      --brand: #006EB5;
      --brand-2: #004B87;
      --accent: #f59e0b;
      --card: rgba(255, 255, 255, 0.84);
      --line: #C9DDF0;
      --danger: #be123c;
      --ok: #005B96;
    }

    * { box-sizing: border-box; }

    body {
      margin: 0;
      min-height: 100vh;
      display: grid;
      place-items: center;
      font-family: "Manrope", "Segoe UI", sans-serif;
      color: var(--ink);
      background:
        radial-gradient(circle at 8% 12%, rgba(0, 110, 181, 0.16), transparent 30%),
        radial-gradient(circle at 92% 88%, rgba(245, 158, 11, 0.2), transparent 35%),
        linear-gradient(170deg, #F8FBFE 0%, #EDF5FC 100%);
      padding: 20px;
      overflow-x: hidden;
    }

    .orb {
      position: fixed;
      border-radius: 50%;
      filter: blur(26px);
      opacity: .35;
      pointer-events: none;
      z-index: 0;
      animation: drift 14s ease-in-out infinite alternate;
    }

    .orb.one {
      width: 300px;
      height: 300px;
      background: #66AEE0;
      top: -100px;
      right: -70px;
    }

    .orb.two {
      width: 220px;
      height: 220px;
      background: #4DA3D9;
      left: -60px;
      bottom: -70px;
      animation-duration: 18s;
      animation-direction: alternate-reverse;
    }

    .shell {
      width: min(980px, 100%);
      background: var(--card);
      backdrop-filter: blur(12px);
      border: 1px solid rgba(201, 221, 240, .8);
      border-radius: 24px;
      box-shadow: 0 28px 54px rgba(10, 54, 102, 0.14);
      overflow: hidden;
      display: grid;
      grid-template-columns: 1.03fr .97fr;
      position: relative;
      z-index: 2;
      animation: rise .45s ease-out;
    }

    .brand-pane {
      position: relative;
      padding: clamp(22px, 3vw, 40px);
      border-right: 1px solid rgba(201, 221, 240, .9);
      background:
        linear-gradient(140deg, rgba(0, 110, 181, .14), rgba(0, 110, 181, .02)),
        #F2F8FD;
    }

    .brand-pane::before {
      content: "";
      width: 70px;
      height: 70px;
      display: block;
      margin-bottom: 18px;
      background: url("/theme/assets/images/logonew.png") center/contain no-repeat;
    }

    .eyebrow {
      margin: 0 0 10px;
      font-size: .78rem;
      text-transform: uppercase;
      letter-spacing: .09em;
      font-weight: 800;
      color: var(--brand-2);
    }

    .brand-pane h1 {
      margin: 0;
      font-family: "Sora", sans-serif;
      line-height: 1.04;
      font-size: clamp(2rem, 3vw, 2.7rem);
      text-wrap: balance;
    }

    .copy {
      margin: 14px 0 0;
      color: var(--ink-soft);
      max-width: 32ch;
    }

    .stats {
      margin-top: 24px;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
    }

    .stat {
      border: 1px solid var(--line);
      border-radius: 12px;
      background: #fff;
      padding: 12px;
      text-align: center;
    }

    .stat strong {
      display: block;
      font-size: 1.1rem;
      font-weight: 800;
    }

    .stat span {
      color: var(--ink-soft);
      font-size: .76rem;
      text-transform: uppercase;
      letter-spacing: .05em;
    }

    .form-pane {
      padding: clamp(22px, 3vw, 38px);
      background: #fff;
      display: grid;
      align-content: center;
      gap: 14px;
    }

    .form-title {
      margin: 0;
      font-family: "Sora", sans-serif;
      font-size: 1.45rem;
    }

    .sub {
      margin: 0;
      color: var(--ink-soft);
      font-size: .92rem;
    }

    .field {
      display: grid;
      gap: 7px;
      margin-top: 3px;
    }

    label span {
      font-size: .84rem;
      font-weight: 700;
      color: #1F4668;
    }

    input,
    select {
      width: 100%;
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 12px 13px;
      font: inherit;
      background: #F8FBFE;
      color: var(--ink);
      transition: border-color .17s ease, box-shadow .17s ease, background .17s ease;
    }

    input:focus,
    select:focus {
      outline: none;
      border-color: var(--brand);
      box-shadow: 0 0 0 4px rgba(0, 110, 181, .17);
      background: #fff;
    }

    .invalid {
      border-color: var(--danger);
      background: #fff6f9;
    }

    .help {
      min-height: 16px;
      font-size: .74rem;
      color: var(--danger);
    }

    .success,
    .notice-card {
      border: 1px solid rgba(0, 91, 150, .18);
      border-radius: 14px;
      background: rgba(0, 91, 150, .06);
      color: var(--ok);
      padding: 12px 14px;
      font-size: .88rem;
    }

    .notice-card p {
      margin: 0;
      color: var(--ink-soft);
    }

    .switch-auth {
      margin: 4px 0 0;
      color: var(--ink-soft);
      font-size: .86rem;
    }

    .switch-auth a {
      color: var(--brand-2);
      font-weight: 700;
      text-decoration: none;
    }

    .switch-auth a:hover {
      text-decoration: underline;
    }

    .inline {
      position: relative;
    }

    .toggle {
      position: absolute;
      top: 6px;
      right: 6px;
      border: 0;
      border-radius: 9px;
      background: #E5EEF7;
      color: var(--brand-2);
      padding: 7px 10px;
      font-size: .78rem;
      font-weight: 700;
      cursor: pointer;
    }

    .meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      font-size: .83rem;
    }

    .meta label {
      color: var(--ink-soft);
      display: inline-flex;
      gap: 0px;
      align-items: center;
    }


    .meta a {
      color: var(--brand-2);
      text-decoration: none;
      font-weight: 700;
    }


    .meta a:hover { text-decoration: underline; }

    .btn {
      border: 0;
      border-radius: 12px;
      color: #fff;
      font: inherit;
      font-weight: 800;
      padding: 12px 14px;
      background: linear-gradient(120deg, var(--brand), var(--brand-2));
      box-shadow: 0 13px 25px rgba(0, 75, 135, .26);
      cursor: pointer;
      transition: transform .15s ease, filter .15s ease;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      gap: 9px;
    }

    .btn:hover { transform: translateY(-1px); filter: saturate(1.05); }

    .btn:disabled {
      opacity: .58;
      cursor: not-allowed;
      box-shadow: none;
    }

    .msg {
      margin: 0;
      font-size: .85rem;
      border-radius: 10px;
      padding: 9px 11px;
      /*display: none;*/
    }

    .msg.error {
      background: #fff1f5;
      color: #9f1239;
      border: 1px solid #fecdd3;
    }
    .error {
      background: #fff1f5;
      color: #9f1239;
      border: 1px solid #fecdd3;
    }

    .mt-3{
      margin-top: 30px;
    }
    .mt-2{
      margin-top: 20px;
    }
    .mt-1{
      margin-top: 10px;
    }
    

    .msg.ok {
      background: #eefbf3;
      color: #005B96;
      border: 1px solid #bbf7d0;
    }

    .help {
      color: var(--danger);
      font-size: .75rem;
      min-height: 1em;
    }

    .spinner {
      width: 14px;
      height: 14px;
      border: 2px solid rgba(255,255,255,.45);
      border-top-color: #fff;
      border-radius: 50%;
      animation: spin .9s linear infinite;
      display: none;
    }

    .auth-home {
      position: absolute;
      top: 18px;
      right: 18px;
      width: 44px;
      height: 44px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.92);
      border: 1px solid rgba(201, 221, 240, .95);
      color: var(--brand-2);
      box-shadow: 0 12px 24px rgba(10, 54, 102, 0.14);
      text-decoration: none;
      z-index: 4;
      transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
    }

    .auth-home:hover {
      transform: translateY(-1px);
      box-shadow: 0 16px 30px rgba(10, 54, 102, 0.18);
      background: #fff;
      color: var(--brand);
    }

    .auth-home svg {
      width: 20px;
      height: 20px;
      display: block;
    }

    .auth-footer {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 10px;
      z-index: 3;
      display: flex;
      justify-content: center;
      pointer-events: none;
    }

    .auth-footer__inner {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 8px 14px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.84);
      border: 1px solid rgba(201, 221, 240, .9);
      box-shadow: 0 10px 24px rgba(10, 54, 102, 0.08);
      color: var(--ink-soft);
      font-size: .88rem;
      font-weight: 700;
      pointer-events: auto;
    }

    .auth-footer__inner img {
      height: 28px;
      width: auto;
      object-fit: contain;
    }

    @keyframes spin { to { transform: rotate(360deg); } }

    @keyframes rise {
      from { opacity: 0; transform: translateY(12px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @keyframes drift {
      from { transform: translate3d(0,0,0); }
      to { transform: translate3d(8px, 14px, 0); }
    }

    @media (max-width: 860px) {
      .shell { grid-template-columns: 1fr; }
      .brand-pane { border-right: 0; border-bottom: 1px solid rgba(201,221,240,.9); }
      .stats { grid-template-columns: repeat(3, minmax(0,1fr)); }
    }

    @media (max-width: 520px) {
      .stats { grid-template-columns: 1fr; }
      .meta { flex-direction: column; align-items: flex-start; }
      .auth-home {
        top: 12px;
        right: 12px;
        width: 40px;
        height: 40px;
      }
      .auth-footer {
        bottom: 6px;
      }
      .auth-footer__inner {
        font-size: .82rem;
        gap: 8px;
      }
      .auth-footer__inner img {
        height: 24px;
      }
    }