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

    html,
    body {
      height: 100%;
    }

    body {
      font-family: 'DM Sans', sans-serif;
      background: #f0f4ff;
      min-height: 100vh;
      min-height: 100dvh;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
      overflow: hidden;
    }

    body::before {
      content: '';
      position: fixed;
      inset: 0;
      background:
        radial-gradient(ellipse 80% 60% at 15% 20%, #dce8ff 0%, transparent 55%),
        radial-gradient(ellipse 70% 50% at 85% 80%, #e4edff 0%, transparent 55%),
        #f0f4ff;
      z-index: 0;
    }

    
    .blob {
      position: fixed;
      border-radius: 50%;
      pointer-events: none;
      z-index: 0;
    }

    .blob-a {
      width: 600px;
      height: 600px;
      background: radial-gradient(circle, #c7d9ff55, #a8c4ff22);
      top: -200px;
      left: -150px;
      --d: 11s;
      filter: blur(60px);
      animation: blob-float 11s ease-in-out infinite;
    }

    .blob-b {
      width: 450px;
      height: 450px;
      background: radial-gradient(circle, #dde8ff44, #c0d6ff11);
      bottom: -150px;
      right: -100px;
      --d: 14s;
      filter: blur(50px);
      animation: blob-float 14s ease-in-out infinite;
      animation-delay: -3s;
    }

    @keyframes blob-float {
      0%, 100% { transform: translate(0, 0) scale(1); }
      33%      { transform: translate(30px, -20px) scale(1.05); }
      66%      { transform: translate(-20px, 25px) scale(.97); }
    }

    
    /* ── card ── */
    .card {
      position: relative;
      z-index: 1;
      width: min(960px, 100%);
      min-height: 560px;
      background: rgba(255, 255, 255, 0.75);
      backdrop-filter: blur(32px) saturate(180%);
      -webkit-backdrop-filter: blur(32px) saturate(180%);
      border: 1px solid rgba(255, 255, 255, 0.9);
      border-radius: 32px;
      box-shadow:
        0 2px 0 rgba(255, 255, 255, 0.8) inset,
        0 40px 80px rgba(100, 130, 200, 0.18),
        0 8px 20px rgba(100, 130, 200, 0.1);
      display: grid;
      grid-template-columns: 1fr 1fr;
      overflow: hidden;
    }

    
    @media (max-width: 700px) {
      .card {
        grid-template-columns: 1fr;
      }

      .side-art {
        display: none;
      }
    }

    /* ── art side ── */
    .side-art {
      background: linear-gradient(145deg, #1a2a6c, #2a4090, #3b5fd4);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 48px 40px;
      position: relative;
      overflow: hidden;
    }

    .side-art::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .12), transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(120, 160, 255, .2), transparent 50%);
    }

    .side-art::after {
      content: '';
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
      background-size: 40px 40px;
    }

    
    .art-content {
      position: relative;
      z-index: 1;
      text-align: center;
    }

    .qr-box {
      width: 160px;
      height: 160px;
      margin: 0 auto 32px;
      position: relative;
    }

    
    .qr-box svg {
      width: 100%;
      height: 100%;
      animation: qr-flash 2.8s ease-in-out infinite;
    }

    @keyframes qr-flash {
      0%, 42%, 58%, 100% { filter: none; }
      50%                { filter: brightness(1.4) drop-shadow(0 0 6px rgba(160, 205, 255, .6)); }
    }

    .scan-beam {
      position: absolute;
      left: 8px;
      right: 8px;
      height: 2px;
      background: linear-gradient(90deg, transparent, #7eb8ff, #a0cdff, #7eb8ff, transparent);
      border-radius: 2px;
      top: 8px;
      box-shadow: 0 0 8px 2px rgba(126, 184, 255, .5);
      /* Scan animation — transform only, GPU-accelerated, zero lag */
      animation: qr-scan 2.8s ease-in-out infinite;
      will-change: transform;
    }

    @keyframes qr-scan {
      0%, 100% { transform: translateY(0); opacity: .9; }
      45%      { transform: translateY(142px); opacity: .9; }
      50%      { transform: translateY(142px); opacity: 0; }
      55%      { transform: translateY(0); opacity: 0; }
      60%      { transform: translateY(0); opacity: .9; }
    }

    /* Vertical beam — scans left to right */
    .scan-beam-h {
      position: absolute;
      top: 8px;
      bottom: 8px;
      width: 2px;
      background: linear-gradient(180deg, transparent, #7eb8ff, #a0cdff, #7eb8ff, transparent);
      border-radius: 2px;
      left: 8px;
      box-shadow: 0 0 8px 2px rgba(126, 184, 255, .5);
      animation: qr-scan-h 2.8s ease-in-out infinite;
      animation-delay: 1.4s;
      will-change: transform;
    }

    @keyframes qr-scan-h {
      0%, 100% { transform: translateX(0); opacity: .9; }
      45%      { transform: translateX(142px); opacity: .9; }
      50%      { transform: translateX(142px); opacity: 0; }
      55%      { transform: translateX(0); opacity: 0; }
      60%      { transform: translateX(0); opacity: .9; }
    }

    /* Corner brackets pulse subtly */
    .qr-corner {
      position: absolute;
      width: 20px;
      height: 20px;
      border-color: rgba(255, 255, 255, .7);
      border-style: solid;
      animation: qr-corner-pulse 2.8s ease-in-out infinite;
    }

    @keyframes qr-corner-pulse {
      0%, 100% { border-color: rgba(255, 255, 255, .7); }
      50%      { border-color: rgba(126, 184, 255, .9); }
    }

    .qr-corner.tl {
      top: 0;
      left: 0;
      border-width: 2px 0 0 2px;
      border-radius: 4px 0 0 0;
    }

    .qr-corner.tr {
      top: 0;
      right: 0;
      border-width: 2px 2px 0 0;
      border-radius: 0 4px 0 0;
    }

    .qr-corner.bl {
      bottom: 0;
      left: 0;
      border-width: 0 0 2px 2px;
      border-radius: 0 0 0 4px;
    }

    .qr-corner.br {
      bottom: 0;
      right: 0;
      border-width: 0 2px 2px 0;
      border-radius: 0 0 4px 0;
    }

    .art-tagline {
      font-size: .7rem;
      font-weight: 600;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, .5);
      margin-bottom: 10px;
    }

    .art-title {
      font-size: 1.9rem;
      font-weight: 800;
      color: #fff;
      line-height: 1.1;
      margin-bottom: 10px;
    }

    .art-desc {
      font-size: .82rem;
      color: rgba(255, 255, 255, .55);
      line-height: 1.7;
    }

    .ring {
      position: absolute;
      border-radius: 50%;
      border: 1px solid rgba(255, 255, 255, .08);
      pointer-events: none;
    }

    .ring-1 {
      width: 260px;
      height: 260px;
      top: -60px;
      right: -60px;
    }

    .ring-2 {
      width: 180px;
      height: 180px;
      bottom: -30px;
      left: -40px;
    }

        .side-form {
      padding: 52px 48px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .brand-row {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 36px;
    }

    .brand-icon {
      width: 36px;
      height: 36px;
      border-radius: 10px;
      border: 1px solid #e4ecff;
      background: #f4f8ff;
      overflow: hidden;
      display: grid;
      place-items: center;
      flex-shrink: 0;
    }

    .brand-icon img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    .brand-text {
      font-size: .78rem;
      font-weight: 700;
      color: #1a2a6c;
      line-height: 1.3;
    }

    .brand-text small {
      display: block;
      font-weight: 400;
      color: #8fa0c8;
      font-size: .68rem;
    }

    .form-title {
      font-size: 2rem;
      font-weight: 800;
      color: #0d1b4b;
      line-height: 1.1;
      margin-bottom: 6px;
    }

    .form-caption {
      font-size: .82rem;
      color: #8fa0c8;
      margin-bottom: 30px;
    }

    
    .flash {
      background: #fff2f2;
      border: 1px solid #ffd6d6;
      color: #c0392b;
      border-radius: 12px;
      padding: 10px 14px;
      font-size: .8rem;
      font-weight: 600;
      margin-bottom: 18px;
    }

    .flash-success {
      background: #f0fff4;
      border-color: #c6f6d5;
      color: #2f855a;
    }

    .field-group {
      margin-bottom: 16px;
    }

    .field-label {
      font-size: .7rem;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: #6b7fa8;
      margin-bottom: 8px;
      display: block;
    }

    .field-wrap {
      position: relative;
    }

    .field {
      width: 100%;
      background: #f4f7ff;
      border: 1.5px solid #e2e9ff;
      border-radius: 14px;
      padding: 13px 16px;
      font-family: 'DM Sans', sans-serif;
      font-size: .88rem;
      color: #0d1b4b;
      outline: none;
    }

    .field::placeholder {
      color: #b8c4df;
    }

    .field:focus {
      border-color: #6b8fff;
      background: #fff;
      box-shadow: 0 0 0 4px rgba(107, 143, 255, .12);
    }

    /* Invalid validation state — shows after submit attempt */
    .field:invalid:not(:placeholder-shown) {
      border-color: #ef4444;
      background: #fef2f2;
    }
    .field:invalid:not(:placeholder-shown):focus {
      box-shadow: 0 0 0 4px rgba(239, 68, 68, .1);
    }

    .field:hover:not(:focus) {
      border-color: #c8d6ff;
    }

    /* Entrance animations — the animation-delay values on field-group children now work */
    .field-group {
      animation: fade-in-up .5s ease both;
    }
    .field-group:nth-child(1) { animation-delay: .25s; }
    .field-group:nth-child(2) { animation-delay: .32s; }

    @keyframes fade-in-up {
      from { opacity: 0; transform: translateY(12px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    .brand-row { animation: fade-in-up .5s ease both; animation-delay: .1s; }
    .form-title { animation: fade-in-up .5s ease both; animation-delay: .15s; }
    .form-caption { animation: fade-in-up .5s ease both; animation-delay: .2s; }
    .forgot-row { animation: fade-in-up .5s ease both; animation-delay: .38s; }
    .btn-main { animation: fade-in-up .5s ease both; animation-delay: .42s; }
    .signup-note { animation: fade-in-up .5s ease both; animation-delay: .48s; }

    .toggle-pass {
      position: absolute;
      right: 14px;
      top: 50%;
      transform: translateY(-50%);
      background: none;
      border: none;
      color: #b8c4df;
      cursor: pointer;
      font-size: .85rem;
      padding: 4px;
      line-height: 1;
    }

    .toggle-pass:hover {
      color: #6b8fff;
    }

    .forgot-row {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      margin: 10px 0 24px;
    }

    .forgot-link {
      font-size: .75rem;
      font-weight: 600;
      color: #8fa0c8;
      text-decoration: none;
    }

    .forgot-link:hover {
      color: #6b8fff;
    }

    .btn-main {
      width: 100%;
      padding: 14px;
      border: none;
      border-radius: 18px;
      font-family: 'DM Sans', sans-serif;
      font-size: .88rem;
      font-weight: 700;
      color: #fff;
      cursor: pointer;
      letter-spacing: .04em;
      position: relative;
      overflow: hidden;
      background: linear-gradient(135deg, #2a4090, #4266d4, #3b5fd4);
      background-size: 200% 100%;
      box-shadow: 0 12px 28px rgba(42, 64, 144, .3), 0 4px 8px rgba(42, 64, 144, .2);
      transition: transform .18s ease, box-shadow .18s ease;
    }

    .btn-main:hover {
      transform: translateY(-2px);
      box-shadow: 0 18px 36px rgba(42, 64, 144, .35), 0 6px 12px rgba(42, 64, 144, .2);
      background-position: 100% 0;
    }

    .btn-main:active {
      transform: translateY(0) scale(.98);
    }

    /* Loading state */
    .btn-main.is-loading { pointer-events: none; opacity: .85; }
    .btn-main .btn-spinner {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 20px;
      height: 20px;
      margin: -10px 0 0 -10px;
      border: 2.5px solid rgba(255,255,255,.3);
      border-top-color: #fff;
      border-radius: 50%;
      opacity: 0;
      transition: opacity .2s ease;
    }
    .btn-main.is-loading .btn-spinner { opacity: 1; animation: btn-spin .6s linear infinite; }
    .btn-main.is-loading .btn-label { opacity: .4; }
    @keyframes btn-spin { to { transform: rotate(360deg); } }

    .btn-main::after {
      content: '';
      position: absolute;
      top: -50%;
      left: -80%;
      width: 60%;
      height: 200%;
      background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .22), transparent);
      transform: skewX(-20deg);
    }

    
    .btn-main span {
      position: relative;
      z-index: 1;
    }

    .signup-note {
      text-align: center;
      margin-top: 20px;
      font-size: .78rem;
      color: #8fa0c8;
    }

    .signup-note a {
      color: #3b5fd4;
      font-weight: 700;
      text-decoration: none;
      border-bottom: 1.5px solid #c0d0ff;
      padding-bottom: 1px;
    }

    .signup-note a:hover {
      border-color: #3b5fd4;
    }

    /* ===== Android app download (below the sign-in form) ===== */
    .app-download {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      margin-top: 18px;
      padding: 10px 14px;
      border: 1.5px solid #c0d0ff;
      border-radius: 12px;
      color: #3b5fd4;
      text-decoration: none;
      transition: background .15s ease, border-color .15s ease;
    }
    .app-download:hover { background: #f2f5ff; border-color: #3b5fd4; color: #3b5fd4; text-decoration: none; }
    .app-download .fa { font-size: 1.5rem; line-height: 1; color: #3ddc84; }
    .app-download span { display: flex; flex-direction: column; text-align: left; line-height: 1.25; }
    .app-download strong { font-size: .8rem; font-weight: 700; }
    .app-download small { font-size: .7rem; color: #8fa0c8; }

    .install-guide-link {
      display: block;
      margin: 8px auto 0;
      padding: 4px 8px;
      background: none;
      border: none;
      font: inherit;
      font-size: .74rem;
      font-weight: 600;
      color: #8fa0c8;
      cursor: pointer;
    }
    .install-guide-link:hover { color: #3b5fd4; }

    /* Install guide modal */
    .install-steps { list-style: none; counter-reset: step; padding: 0; margin: 0 0 18px; }
    .install-steps li {
      counter-increment: step;
      position: relative;
      padding: 0 0 16px 44px;
    }
    .install-steps li::before {
      content: counter(step);
      position: absolute;
      left: 0;
      top: -2px;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: #eef2ff;
      color: #3b5fd4;
      font-weight: 800;
      font-size: .82rem;
      display: grid;
      place-items: center;
    }
    /* Connector line between step numbers */
    .install-steps li:not(:last-child)::after {
      content: "";
      position: absolute;
      left: 14px;
      top: 32px;
      bottom: 2px;
      width: 2px;
      background: #e6ebf5;
    }
    .install-steps h6 { font-weight: 800; font-size: .88rem; margin: 3px 0 4px; }
    .install-steps h6 .fa { color: #3b5fd4; width: 16px; text-align: center; margin-right: 2px; }
    .install-steps p { font-size: .8rem; line-height: 1.6; margin: 0 0 6px; }
    .install-server {
      display: flex;
      align-items: center;
      gap: 8px;
      margin: 4px 0 8px;
      padding: 8px 8px 8px 12px;
      border: 1px solid #dfe6f5;
      border-radius: 10px;
      background: #f6f8fd;
    }
    .install-server code {
      flex: 1;
      min-width: 0;
      overflow-wrap: anywhere;
      font-size: .78rem;
      color: #0d1b4b;
      background: none;
      user-select: all;
    }
    .install-copy {
      flex: none;
      padding: 5px 12px;
      border: 1.5px solid #c0d0ff;
      border-radius: 8px;
      background: #fff;
      color: #3b5fd4;
      font: inherit;
      font-size: .74rem;
      font-weight: 700;
      cursor: pointer;
    }
    .install-copy.is-copied { border-color: #3ddc84; color: #1f9d57; }
    .install-note {
      font-size: .78rem;
      line-height: 1.55;
      color: #4a5a7a;
      padding: 10px 12px;
      border-radius: 10px;
      background: #f6f8fd;
      margin-top: 8px;
    }

    /* ===== Legal / Privacy footer (inside the form card) ===== */
    .legal-footer {
      text-align: center;
      margin-top: 24px;
      padding-top: 18px;
      border-top: 1px solid #e6ebf5;
    }
    .legal-links {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      margin-bottom: 6px;
    }
    .legal-links a {
      font-size: .76rem;
      font-weight: 600;
      color: #6b7fa8;
      text-decoration: none;
      transition: color .18s ease;
    }
    .legal-links a:hover {
      color: #3b5fd4;
      text-decoration: underline;
    }
    .legal-dot {
      width: 3px;
      height: 3px;
      border-radius: 50%;
      background: #b8c4df;
      flex-shrink: 0;
    }
    .legal-copy {
      font-size: .72rem;
      color: #b8c4df;
      margin: 0;
    }

    /* Dark mode for legal footer */
    @media (prefers-color-scheme: dark) {
      .legal-footer { border-top-color: #2a3a5c; }
      .legal-links a { color: #8fa0c8; }
      .legal-links a:hover { color: #6b8fff; }
      .legal-dot { background: #2a3a5c; }
      .legal-copy { color: #5a6a8e; }
    }

    @media (max-width: 700px) {
      .legal-footer { margin-top: 16px; }
      .legal-links { gap: 8px; }
      .legal-links a { font-size: .72rem; }
    }

    .modal-content {
      border-radius: 20px !important;
      border: 1px solid #e2e9ff !important;
      box-shadow: 0 20px 60px rgba(42, 64, 144, .15) !important;
      color: #0d1b4b;
    }

    .modal-header {
      border-bottom: 1px solid #f0f4ff !important;
    }

    .modal-title {
      font-weight: 800 !important;
      font-size: 1rem !important;
    }

    /* Modal header with dark gradient keeps white title */
    .modal-header[style*="linear-gradient"] .modal-title,
    .modal-header[style*="background:linear-gradient"] .modal-title {
      color: #fff !important;
    }

    /* Legal modal body text colors */
    .modal-body h6 { color: #0d1b4b; }
    .modal-body p { color: #4a5a7a; }
    .modal-body ul { color: #4a5a7a; }
    .modal-body strong { color: #0d1b4b; }

    .reset-hint {
      display: block;
      margin-bottom: 10px;
      font-size: .74rem;
      color: #8fa0c8;
    }

    .reset-status {
      margin: 2px 0 14px;
      padding: 11px 14px;
      border-radius: 14px;
      border: 1px solid #d8e2ff;
      background: #f6f9ff;
      color: #3154c8;
      font-size: .77rem;
      font-weight: 600;
      line-height: 1.45;
    }

    .reset-status.is-error {
      border-color: #ffd4d4;
      background: #fff4f4;
      color: #c0392b;
    }

    .reset-status.is-success {
      border-color: #d2eedc;
      background: #f2fbf6;
      color: #1f8f53;
    }

    .reset-alt-link {
      display: block;
      width: fit-content;
      margin: 16px 0 0;
      color: #3b5fd4;
      font-size: .78rem;
      font-weight: 700;
      text-decoration: none;
      border-bottom: 1.5px solid #c5d4ff;
      padding-bottom: 1px;
    }

    .reset-alt-link:hover {
      color: #2a4090;
      border-color: #3b5fd4;
    }

    .reset-password-fields {
      margin-top: 14px;
    }

    html,
    body {
      height: auto;
    }

    body {
      font-family: 'DM Sans', sans-serif;
      background: #f0f4ff;

      /* instead of min-height:100vh + overflow:hidden */
      min-height: 100dvh;
      /* better on mobile than 100vh */
      padding: 20px;

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

      overflow-x: hidden;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }

    body::before {
      content: '';
      position: fixed;
      inset: 0;
      background:
        radial-gradient(ellipse 80% 60% at 15% 20%, #dce8ff 0%, transparent 55%),
        radial-gradient(ellipse 70% 50% at 85% 80%, #e4edff 0%, transparent 55%),
        #f0f4ff;
      z-index: 0;
      pointer-events: none;
    }
    .card {
      position: relative;
      z-index: 1;
      width: min(960px, 100%);
      min-height: unset;
      max-height: calc(100dvh - 40px);
      overflow: hidden;

      background: rgba(255, 255, 255, 0.75);
      backdrop-filter: blur(32px) saturate(180%);
      -webkit-backdrop-filter: blur(32px) saturate(180%);
      border: 1px solid rgba(255, 255, 255, 0.9);
      border-radius: 32px;
      box-shadow:
        0 2px 0 rgba(255, 255, 255, 0.8) inset,
        0 40px 80px rgba(100, 130, 200, 0.18),
        0 8px 20px rgba(100, 130, 200, 0.1);

      display: grid;
      grid-template-columns: 1fr 1fr;
    }

    .side-form {
      padding: 52px 48px;
      display: flex;
      flex-direction: column;
      justify-content: center;

      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }

    @media (max-width: 700px) {
      body {
        padding: 14px;
        align-items: stretch;
        /* . allow full height layout */
        justify-content: center;
      }

      .card {
        grid-template-columns: 1fr;
        border-radius: 22px;
        max-height: none;
        overflow: visible;
        background: #fff;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
      }

      /* Large animated blurred layers are expensive on phone GPUs and made
         the login screen visibly stutter while scrolling. */
      .blob {
        display: none;
      }

      .side-art {
        display: none;
      }

      .side-form {
        padding: 28px 20px;
        overflow: visible;
      }

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

    @media (max-height: 640px) and (max-width: 900px) {
      .card {
        max-height: calc(100dvh - 24px);
      }

      .side-form {
        justify-content: flex-start;
      }
    }

    /* ===== Auto dark mode for login page (respects OS preference) ===== */
    @media (prefers-color-scheme: dark) {
      body {
        background: #0a0f1e;
      }
      body::before {
        background:
          radial-gradient(ellipse 80% 60% at 15% 20%, #1a2845 0%, transparent 55%),
          radial-gradient(ellipse 70% 50% at 85% 80%, #1e2a4a 0%, transparent 55%),
          #0a0f1e;
      }
      .blob-a { background: radial-gradient(circle, #1a284555, #0f1a3022); }
      .blob-b { background: radial-gradient(circle, #1e2a4a44, #141d3511); }

      .card {
        background: rgba(20, 28, 48, 0.75);
        border: 1px solid rgba(60, 80, 130, 0.3);
        box-shadow:
          0 2px 0 rgba(60, 80, 130, 0.15) inset,
          0 40px 80px rgba(0, 0, 0, 0.4),
          0 8px 20px rgba(0, 0, 0, 0.2);
      }

      .brand-text { color: #e0e8ff; }
      .brand-text small { color: #8fa0c8; }

      .form-title { color: #f0f4ff; }
      .form-caption { color: #8fa0c8; }

      .field {
        background: #141d35;
        border-color: #2a3a5c;
        color: #e0e8ff;
      }
      .field::placeholder { color: #5a6a8e; }
      .field:focus {
        border-color: #6b8fff;
        background: #1a2540;
        box-shadow: 0 0 0 4px rgba(107, 143, 255, .15);
      }
      .field:invalid:not(:placeholder-shown) {
        border-color: #ef4444;
        background: #2a1414;
      }

      .field-label { color: #8fa0c8; }

      .flash {
        background: #2a1414;
        border-color: #5a2020;
        color: #ff8080;
      }
      .flash-success {
        background: #0a2818;
        border-color: #1a5030;
        color: #60e0a0;
      }

      .forgot-link { color: #8fa0c8; }
      .forgot-link:hover { color: #6b8fff; }

      .signup-note { color: #8fa0c8; }
      .signup-note a { color: #6b8fff; border-color: #2a3a5c; }

      .app-download { color: #6b8fff; border-color: #2a3a5c; }
      .app-download:hover { background: #16213a; border-color: #6b8fff; color: #6b8fff; }
      .install-guide-link:hover { color: #6b8fff; }
      .install-steps li::before { background: #1e2c4d; color: #8fb0ff; }
      .install-steps li:not(:last-child)::after { background: #2a3a5c; }
      .install-steps h6 .fa { color: #6b8fff; }
      .install-server { background: #121c33; border-color: #2a3a5c; }
      .install-server code { color: #e0e8ff; }
      .install-copy { background: #16213a; border-color: #2a3a5c; color: #8fb0ff; }
      .install-copy.is-copied { border-color: #3ddc84; color: #3ddc84; }
      .install-note { background: #121c33; color: #b0c0e0; }

      .toggle-pass { color: #5a6a8e; }
      .toggle-pass:hover { color: #6b8fff; }

      /* Modal dark mode */
      .modal-content {
        background: #141d35 !important;
        border-color: #2a3a5c !important;
        color: #e0e8ff !important;
      }
      .modal-content[style*="color"] { color: #e0e8ff !important; }
      .modal-header { border-bottom-color: #2a3a5c !important; }
      .modal-title { color: #f0f4ff !important; }
      .modal-body { color: #e0e8ff !important; }
      .modal-body h6 { color: #f0f4ff !important; }
      .modal-body p { color: #b0c0e0 !important; }
      .modal-body ul { color: #b0c0e0 !important; }
      .modal-body strong { color: #e0e8ff !important; }
      .modal-footer { border-top-color: #2a3a5c !important; }
      .reset-hint { color: #8fa0c8; }
      .reset-status {
        background: #1a2540;
        border-color: #2a3a5c;
        color: #8fb0ff;
      }
      .reset-status.is-error { background: #2a1414; border-color: #5a2020; color: #ff8080; }
      .reset-status.is-success { background: #0a2818; border-color: #1a5030; color: #60e0a0; }
      .reset-alt-link { color: #6b8fff; border-color: #2a3a5c; }
    }