*,
    *::before,
    *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    :root {
      --text: #f7f9ff;
      --muted: rgba(247, 249, 255, .64);
      --brand: #5b8cff;
      --brand-light: #7ca4ff;
      --danger-bg: rgba(239, 68, 68, .12);
      --ok-bg: rgba(52, 211, 153, .12);
      --radius-sm: 20px;
      --pill: 999px;
      --ease: cubic-bezier(.22, 1, .36, 1);
      --ease-bounce: cubic-bezier(.34, 1.56, .64, 1);
    }

    html,
    body {
      min-height: 100%;
      min-height: 100dvh;
      background: #070b14;
    }

    body {
      margin: 0;
      font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif;
      color: var(--text);

      background:
        radial-gradient(circle at 17% 18%, rgba(91, 140, 255, .22), transparent 32%),
        radial-gradient(circle at 83% 22%, rgba(139, 92, 246, .18), transparent 34%),
        radial-gradient(circle at 52% 96%, rgba(14, 165, 233, .09), transparent 34%),
        linear-gradient(rgba(4, 7, 13, .70), rgba(4, 7, 13, .84)),
        url("/assets/img/loginbg.webp");

      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      background-attachment: fixed;

      overflow-x: hidden;
    }

    body::after {
      content: "";
      position: fixed;
      inset: 0;
      z-index: -999;
      background:
        radial-gradient(circle at 17% 18%, rgba(91, 140, 255, .22), transparent 32%),
        radial-gradient(circle at 83% 22%, rgba(139, 92, 246, .18), transparent 34%),
        radial-gradient(circle at 52% 96%, rgba(14, 165, 233, .09), transparent 34%),
        linear-gradient(rgba(4, 7, 13, .70), rgba(4, 7, 13, .84)),
        url("/assets/img/loginbg.webp");
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      background-attachment: fixed;
      pointer-events: none;
    }

    body::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;

      background-image:
        linear-gradient(rgba(255, 255, 255, .018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .018) 1px, transparent 1px);

      background-size: 64px 64px;

      mask-image: radial-gradient(circle at 50% 46%, #000 0%, transparent 76%);

      opacity: .30;

      z-index: -2;
    }

    .scene {
      position: fixed;
      inset: 0;
      overflow: hidden;
      pointer-events: none;
      z-index: -1;
    }

    .aurora {
      position: absolute;
      width: 520px;
      height: 520px;
      border-radius: 50%;
      filter: blur(110px);
      opacity: .20;
      animation: floatAurora 18s var(--ease) infinite alternate;
      will-change: transform;
    }

    .aurora.a1 {
      left: -190px;
      top: -190px;
      background: radial-gradient(circle, #5b8cff 0%, rgba(91, 140, 255, .60) 100%);
    }

    .aurora.a2 {
      right: -200px;
      bottom: -220px;
      background: radial-gradient(circle, #8b5cf6 0%, rgba(139, 92, 246, .60) 100%);
      animation-delay: -8s;
    }

    @keyframes floatAurora {

      0%,
      100% {
        transform: translate3d(0, 0, 0) scale(1);
      }

      50% {
        transform: translate3d(32px, -24px, 0) scale(1.12);
      }
    }

    .page {
      min-height: 100svh;
      min-height: 100vh;
      min-height: 100dvh;
      display: grid;
      place-items: center;
      padding: 32px 22px;
      padding-top: calc(32px + env(safe-area-inset-top));
      padding-bottom: env(safe-area-inset-bottom);
    }

    .login-card {
      width: min(500px, 100%);
      position: relative;
      transform: translateY(-24px);
      animation: cardEnter .56s var(--ease) backwards;
    }

    @keyframes cardEnter {
      from {
        opacity: 0;
        transform: translateY(8px);
      }

      to {
        opacity: 1;
      }
    }

    .form-inner {
      position: relative;
      z-index: 1;
      width: 100%;
      text-align: center;
    }

    .brand {
      display: flex;
      justify-content: center;
      margin-bottom: 22px;
    }

    .logo {
      width: 180px;
      display: flex;
      align-items: center;
      justify-content: center;
      animation: logoFloat 3.2s ease-in-out infinite;
    }

    @keyframes logoFloat {

      0%,
      100% {
        transform: translateY(0);
      }

      50% {
        transform: translateY(-4px);
      }
    }

    .logo img {
      width: 100%;
      height: auto;
      display: block;

      filter:
        drop-shadow(0 20px 38px rgba(0, 0, 0, .40)) drop-shadow(0 12px 26px rgba(91, 140, 255, .24));
    }

    .form-title {
      font-size: clamp(2.2rem, 4vw, 3rem);

      line-height: .92;

      font-weight: 700;

      letter-spacing: -.075em;

      color: #fff;

      text-wrap: balance;

      background:
        linear-gradient(180deg, #ffffff 0%, #eaf1ff 46%, #b7c8ec 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;

      text-shadow:
        0 2px 0 rgba(255, 255, 255, .16),
        0 16px 42px rgba(0, 0, 0, .42),
        0 0 34px rgba(91, 140, 255, .18);

      filter: drop-shadow(0 18px 18px rgba(0, 0, 0, .22));
      animation: titleRise .48s var(--ease) .08s backwards;
    }

    @keyframes titleRise {
      from {
        opacity: 0;
        transform: translateY(8px);
      }

      to {
        opacity: 1;
      }
    }

    .form-sub {
      max-width: 32ch;

      margin: 12px auto 30px;

      font-size: 1rem;

      line-height: 1.45;

      color: rgba(247, 249, 255, .66);

      text-shadow:
        0 10px 28px rgba(0, 0, 0, .28);
    }

    .field {
      margin-bottom: 13px;
      text-align: left;
    }

    .lbl {
      margin: 0 0 7px 4px;

      color: rgba(247, 249, 255, .52);

      font-size: .71rem;
      font-weight: 700;

      letter-spacing: .105em;

      text-transform: uppercase;
    }

    .field-inner {
      min-height: 58px;

      display: flex;
      align-items: center;
      gap: 9px;

      padding: 7px 9px 7px 16px;

      border-radius: var(--radius-sm);

      overflow: hidden;

      background:
        linear-gradient(180deg,
          rgba(255, 255, 255, .08),
          rgba(255, 255, 255, .03)),
        rgba(8, 12, 20, .42);

      border: 1px solid rgba(255, 255, 255, .12);

      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);

      box-shadow:
        0 10px 34px rgba(0, 0, 0, .22),
        inset 0 1px 0 rgba(255, 255, 255, .06);

      transition:
        border-color .26s var(--ease),
        transform .26s var(--ease),
        background .26s var(--ease),
        box-shadow .26s var(--ease);

      position: relative;
    }

    .field-inner::before {
      content: "";
      position: absolute;
      inset: -1px;
      border-radius: var(--radius-sm);
      padding: 1px;
      background: linear-gradient(135deg, rgba(91, 140, 255, .62), rgba(139, 92, 246, .38));

      -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
      mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

      -webkit-mask-composite: xor;
      mask-composite: exclude;

      opacity: 0;
      pointer-events: none;
      transition: opacity .26s var(--ease);
    }

    .field-inner>* {
      position: relative;
      z-index: 1;
    }

    .field-inner:focus-within {
      transform: translateY(-2px);

      border-color: rgba(91, 140, 255, .08);

      background:
        linear-gradient(180deg,
          rgba(255, 255, 255, .10),
          rgba(255, 255, 255, .04)),
        rgba(8, 12, 20, .48);

      box-shadow:
        0 0 0 4px rgba(91, 140, 255, .13),
        0 20px 50px rgba(0, 0, 0, .24),
        inset 0 1px 0 rgba(255, 255, 255, .10);
    }

    .field-inner:focus-within::before {
      opacity: 1;
    }

    .field-inner.error {
      border-color: rgba(239, 68, 68, .68);
      animation: softShake .36s var(--ease);
    }

    @keyframes softShake {

      0%,
      100% {
        transform: translateX(0);
      }

      25% {
        transform: translateX(-3px);
      }

      75% {
        transform: translateX(3px);
      }
    }

    .field-inner input {
      flex: 1;
      min-width: 0;

      border: 0;
      outline: 0;

      background: transparent !important;

      color: var(--text) !important;
      -webkit-text-fill-color: var(--text) !important;

      caret-color: var(--brand);

      font-family: inherit;

      font-size: 1rem;
      font-weight: 600;

      color-scheme: dark;

      box-shadow: none !important;
    }

    .field-inner input::placeholder {
      color: rgba(247, 249, 255, .31);
      font-weight: 600;
    }

    .field-inner input::selection {
      background: rgba(91, 140, 255, .28);
      color: #fff;
    }

    .field-inner input:-webkit-autofill,
    .field-inner input:-webkit-autofill:hover,
    .field-inner input:-webkit-autofill:focus,
    .field-inner input:-webkit-autofill:active {
      -webkit-text-fill-color: var(--text) !important;
      caret-color: var(--brand);
      transition: background-color 9999s ease-in-out 0s;
      -webkit-box-shadow: 0 0 0 1000px rgba(8, 12, 20, .01) inset !important;
      box-shadow: 0 0 0 1000px rgba(8, 12, 20, .01) inset !important;
    }

    .ico {
      width: 35px;
      height: 35px;

      flex: 0 0 auto;

      border-radius: 14px;

      display: grid;
      place-items: center;

      color: rgba(247, 249, 255, .58);

      background: rgba(255, 255, 255, .075);

      border: 1px solid rgba(255, 255, 255, .105);

      transition: .2s var(--ease);
    }

    .ico-btn {
      cursor: pointer;
      padding: 0;
      font-size: 0;
      font-family: inherit;
    }

    .ico-btn:hover {
      color: #fff;

      background: rgba(255, 255, 255, .13);

      border-color: rgba(91, 140, 255, .38);

      transform: scale(1.04);
    }

    .ico-btn:active {
      transform: scale(.97);
    }

    .meta {
      display: flex;
      align-items: center;
      justify-content: space-between;

      gap: 16px;

      margin: 15px 2px 19px;

      text-align: left;
    }

    .toggle-wrap {
      display: inline-flex;
      align-items: center;
      gap: 10px;

      cursor: pointer;

      user-select: none;
    }

    .toggle-wrap input {
      position: absolute;
      width: 1px;
      height: 1px;
      opacity: 0;
    }

    .toggle-track {
      width: 43px;
      height: 24px;

      border-radius: var(--pill);

      position: relative;

      flex: 0 0 auto;

      background: rgba(255, 255, 255, .11);

      border: 1px solid rgba(255, 255, 255, .16);

      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);

      transition: .24s var(--ease);
    }

    .toggle-thumb {
      position: absolute;

      width: 18px;
      height: 18px;

      top: 2px;
      left: 2px;

      border-radius: 50%;

      background: rgba(255, 255, 255, .92);

      box-shadow: 0 4px 12px rgba(0, 0, 0, .34);

      transition: transform .28s var(--ease);
    }

    .toggle-wrap input:checked~.toggle-track {
      background: linear-gradient(135deg, #3b82f6, #7c3aed);

      border-color: rgba(91, 140, 255, .58);

      box-shadow: 0 10px 22px rgba(91, 140, 255, .20);
    }

    .toggle-wrap input:checked~.toggle-track .toggle-thumb {
      transform: translateX(19px);
    }

    .toggle-lbl,
    .link {
      font-size: .85rem;
      font-weight: 700;
    }

    .toggle-lbl {
      color: rgba(247, 249, 255, .74);
    }

    .link {
      color: rgba(247, 249, 255, .64);

      text-decoration: none;

      white-space: nowrap;

      transition: color .24s var(--ease);
      position: relative;
    }

    .link::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: -3px;
      height: 2px;
      border-radius: 999px;
      background: linear-gradient(90deg, var(--brand), var(--brand-light));
      transform: scaleX(0);
      transform-origin: right;
      transition: transform .28s var(--ease);
    }

    .link:hover {
      color: #fff;
    }

    .link:hover::after {
      transform: scaleX(1);
      transform-origin: left;
    }

    .btn-primary {
      width: 100%;

      min-height: 58px;

      border: 0;

      border-radius: 20px;

      cursor: pointer;

      position: relative;
      overflow: hidden;

      font-family: inherit;

      color: #fff;

      font-size: 1rem;
      font-weight: 700;

      letter-spacing: .002em;

      background:
        linear-gradient(135deg,
          #3b82f6 0%,
          #5b8cff 45%,
          #8b5cf6 100%);

      box-shadow:
        0 18px 46px rgba(59, 130, 246, .28);

      transition:
        transform .24s var(--ease),
        box-shadow .24s var(--ease),
        filter .24s var(--ease),
        opacity .24s var(--ease);
    }

    .btn-primary::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(255, 255, 255, .22), transparent 54%);
      opacity: 0;
      transition: opacity .28s var(--ease);
    }

    .btn-primary:hover:not(:disabled) {
      transform: translateY(-3px);

      filter: brightness(1.08);

      box-shadow:
        0 28px 64px rgba(59, 130, 246, .38);
    }

    .btn-primary:hover:not(:disabled)::before {
      opacity: 1;
    }

    .btn-primary:active:not(:disabled) {
      transform: translateY(-1px);
    }

    .btn-primary:disabled {
      opacity: .58;
      cursor: not-allowed;
    }

    .btn-inner {
      position: relative;
      z-index: 1;

      display: inline-flex;
      align-items: center;
      justify-content: center;

      gap: 10px;
    }

    .spinner {
      width: 18px;
      height: 18px;

      border-radius: 50%;

      border: 2.5px solid rgba(255, 255, 255, .30);

      border-top-color: #fff;

      display: none;

      animation: spin .72s linear infinite;
    }

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

    #loginError {
      display: none;

      margin-top: 13px;

      padding: 11px 13px;

      border-radius: 15px;

      background: var(--danger-bg);

      border: 1px solid rgba(239, 68, 68, .28);

      color: #fecaca;

      font-size: .84rem;
      font-weight: 700;

      text-align: left;

      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
    }

    .login-note {
      margin-top: 16px;

      display: flex;
      align-items: center;
      justify-content: center;
      gap: 7px;

      color: rgba(247, 249, 255, .42);

      font-size: .76rem;
      font-weight: 700;
    }

    .login-note svg {
      width: 14px;
      height: 14px;
      opacity: .7;
    }

    .card-footer {
      margin-top: 18px;

      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;

      color: rgba(247, 249, 255, .48);

      font-size: .78rem;
      font-weight: 700;

      opacity: .72;
    }

    .modal-overlay {
      position: fixed;
      inset: 0;

      z-index: 100;

      display: none;
      align-items: center;
      justify-content: center;

      padding: 18px;

      background: rgba(0, 0, 0, .60);

      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
    }

    .modal-overlay.open {
      display: flex;
      animation: fadeIn .2s ease both;
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
      }

      to {
        opacity: 1;
      }
    }

    .modal-box {
      width: min(470px, 100%);

      border-radius: 26px;

      overflow: hidden;

      background: rgba(11, 16, 27, .86);

      border: 1px solid rgba(255, 255, 255, .14);

      backdrop-filter: blur(34px);
      -webkit-backdrop-filter: blur(34px);

      box-shadow:
        0 50px 140px rgba(0, 0, 0, .68),
        inset 0 1px 0 rgba(255, 255, 255, .14);

      animation: modalEnter .36s var(--ease) backwards;
    }

    @keyframes modalEnter {
      from {
        opacity: 0;
        transform: translateY(16px);
      }

      to {
        opacity: 1;
      }
    }

    .modal-head {
      padding: 21px 21px 14px;

      display: flex;
      align-items: flex-start;
      justify-content: space-between;

      gap: 18px;

      border-bottom: 1px solid rgba(255, 255, 255, .085);
    }

    .modal-title {
      font-size: 1.08rem;
      font-weight: 700;
      letter-spacing: -.04em;
    }

    .modal-sub {
      margin-top: 6px;
      color: var(--muted);
      font-size: .86rem;
      line-height: 1.5;
    }

    .modal-meta {
      margin-top: 10px;
      color: rgba(167, 243, 208, .92);
      font-size: .8rem;
      font-weight: 700;
      line-height: 1.45;
    }

    .modal-x {
      width: 37px;
      height: 37px;

      border: 1px solid rgba(255, 255, 255, .12);

      border-radius: 14px;

      display: grid;
      place-items: center;

      background: rgba(255, 255, 255, .065);

      color: rgba(247, 249, 255, .72);

      cursor: pointer;
    }

    .modal-body {
      padding: 17px 21px 10px;
    }

    .modal-label {
      margin-bottom: 8px;
    }

    .modal-actions {
      padding: 13px 21px 21px;

      display: flex;
      gap: 10px;

      justify-content: flex-end;
    }

    .btn-ghost {
      min-height: 43px;

      padding: 0 19px;

      border-radius: 16px;

      border: 1px solid rgba(255, 255, 255, .12);

      background: rgba(255, 255, 255, .065);

      color: rgba(247, 249, 255, .74);

      cursor: pointer;

      font-family: inherit;

      font-size: .86rem;
      font-weight: 700;
      transition:
        transform .22s var(--ease),
        border-color .22s var(--ease),
        background .22s var(--ease),
        opacity .22s var(--ease);
    }

    .btn-ghost:hover:not(:disabled) {
      transform: translateY(-1px);
      border-color: rgba(91, 140, 255, .28);
      background: rgba(255, 255, 255, .09);
    }

    .btn-ghost:disabled {
      opacity: .56;
      cursor: not-allowed;
    }

    .btn-sm {
      width: auto;

      min-height: 43px;

      padding: 0 23px;

      border-radius: 16px;

      font-size: .86rem;
    }

    .modal-msg {
      display: none;

      margin-top: 13px;

      padding: 11px 13px;

      border-radius: 15px;

      font-size: .84rem;
      font-weight: 700;
    }

    .modal-msg.ok {
      background: var(--ok-bg);

      border: 1px solid rgba(52, 211, 153, .28);

      color: #a7f3d0;
    }

    .modal-msg.err {
      background: var(--danger-bg);

      border: 1px solid rgba(239, 68, 68, .28);

      color: #fecaca;
    }

    button:focus-visible,
    input:focus-visible,
    a:focus-visible {
      outline: 0;
      box-shadow: 0 0 0 4px rgba(91, 140, 255, .22);
    }

    .login-card,
    .form-inner,
    .field-inner,
    .btn-primary,
    .modal-box {
      transform-style: preserve-3d;
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
    }

    /* SOLO PC: card glass minimalista */
    @media (min-width: 641px) {
      .login-card {
        width: min(560px, 100%);
        padding: 30px 42px 28px;

        border-radius: 50px;

        background: rgba(10, 14, 24, .22);

        border: 1px solid rgba(255, 255, 255, .055);

        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);

        box-shadow:
          0 24px 68px rgba(0, 0, 0, .22),
          inset 0 1px 0 rgba(255, 255, 255, .045);
      }
    }

    @media (max-width: 1024px) {

      .login-card {
        width: min(560px, 100%);
        transform: translateY(-10px);
      }

      .logo {
        width: 156px;
      }

      .form-title {
        font-size: 2.3rem;
      }

      .form-sub {
        font-size: .94rem;
      }
    }

    @media (min-width: 1101px) {
      .login-card {
        width: min(476px, 100%);
        padding: 22px 38px 80px;
        transform: translateY(-18px);
      }

      .brand {
        margin-bottom: 14px;
      }

      .logo {
        width: 158px;
      }

      .form-sub {
        margin: 10px auto 24px;
      }

      .field {
        margin-bottom: 11px;
      }

      .meta {
        margin: 14px 2px 18px;
      }

      .card-footer {
        margin-top: 14px;
      }
    }

    @media (max-width: 640px) {

      body {
        background-attachment: scroll;
      }

      .page {
        padding: 18px;
        padding-top: calc(18px + env(safe-area-inset-top));
        margin: 0;
      }

      .login-card {
        max-width: 360px;
        width: 100%;
        transform: none;
        animation: mobileCardEnter .38s ease-out backwards;
      }

      @keyframes mobileCardEnter {
        from {
          opacity: 0;
          transform: translateY(6px);
        }

        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      .brand {
        margin-bottom: 14px;
      }

      .logo {
        width: 138px;
      }

      .form-title {
        font-size: clamp(1.9rem, 8vw, 2.15rem);
        animation: none;
      }

      .form-sub {
        margin-bottom: 20px;
        font-size: .9rem;
      }

      .field-inner {
        min-height: 52px;
      }

      .btn-primary {
        min-height: 52px;
      }

      .meta {
        gap: 12px;
        flex-direction: column;
        align-items: stretch;
      }

      .toggle-wrap {
        justify-content: space-between;
        width: 100%;
      }

      .toggle-wrap .toggle-lbl {
        order: -1;
      }

      .link {
        display: flex;
        justify-content: center;
        width: 100%;
      }
    }

    @media (max-width: 380px) {

      .page {
        padding: 14px;
        padding-top: calc(14px + env(safe-area-inset-top));
      }

      .logo {
        width: 126px;
      }

      .field-inner {
        min-height: 48px;
      }

      .btn-primary {
        min-height: 48px;
      }

      .login-note {
        display: none;
      }
    }

    @media (prefers-reduced-motion: reduce) {

      *,
      *::before,
      *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
      }
    }