:root {
      /* ═══════════════════════════════════════════════════════════════
         InfogenX Light Theme (Default) — fully light
         bg: light blue-white, card: white, text: deep navy
         ══════════════════════════════════════════════════════════════ */
      --bg: #f8faff;
      --bg-card: #ffffff;
      --bg-input: #f1f5f9;
      --bg-input-focus: #ffffff;
      --border: rgba(0, 18, 60, 0.10);
      --text: #00123c;
      --text-heading: #00123c;
      --muted: #64748b;
      --accent: #d33e00;
      --accent-light: #e65525;
      --accent-gradient: linear-gradient(135deg, #d33e00, #ac3300);
      --red: #dc2626;
      --logo-src: url("/static/dialer/images/logo.png");
    }

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

    html,
    body {
      width: 100%;
      min-height: 100%;
      margin: 0;
      padding: 0;
      overflow: hidden;
    }

    body {
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: var(--text);
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      padding: 20px;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-rendering: optimizeLegibility;
      background-image: linear-gradient(90deg, #00123c 15%, #d33e00 85%);
      background-clip: border-box;
      border: 1.5px solid transparent;
      backdrop-filter: blur(16px);
      overflow: hidden;
    }

    /* Ambient Background Glows */
    .glow-blob {
      position: fixed;
      border-radius: 50%;
      filter: blur(120px);
      opacity: 0.18;
      z-index: 1;
      pointer-events: none;
      transition: opacity 0.3s;
    }

    .glow-1 {
      top: -10%;
      left: -10%;
      width: 450px;
      height: 450px;
      background: #d33e00;
      opacity: 0.08;
    }

    .glow-2 {
      bottom: -10%;
      right: -10%;
      width: 500px;
      height: 500px;
      background: #00123c;
      opacity: 0.06;
    }

    @keyframes float {
      0% {
        transform: translateY(0) scale(1);
      }

      100% {
        transform: translateY(40px) scale(1.1);
      }
    }

    .login-container {
      position: relative;
      z-index: 10;
      width: min(440px, 100%);
      max-height: calc(100vh - 40px);
      overflow-y: auto;
      padding: 2.5rem;
      background:
        linear-gradient(135deg,
          rgba(255, 255, 255, 0.95),
          rgba(245, 247, 250, 0.92)) padding-box,
        linear-gradient(90deg,
          #00123c 15%,
          #d33e00 85%) border-box;

      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border: 1px solid var(--border);
      border-radius: 20px;
      box-shadow: 0 8px 40px rgba(0, 18, 60, 0.12);
    }

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

    /* Shake Animation for Login Errors */
    .shake {
      animation: shake 0.4s ease-in-out;
    }

    @keyframes shake {

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

      20%,
      60% {
        transform: translateX(-10px);
      }

      40%,
      80% {
        transform: translateX(10px);
      }
    }

    /* Logo & Header */
    .header {
      text-align: center;
      margin-bottom: 2rem;
    }

    .logo-lines {
      display: flex;
      flex-direction: column;
      width: 100%;
      gap: 4px;
      padding: 0 0.5rem;
      margin-top: 0.5rem;
    }

    .logo-line {
      height: 1.5px;
      border-radius: 2px;
      background: rgba(255, 255, 255, 0.1);
    }

    .logo-line-center {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .logo-line-center::before,
    .logo-line-center::after {
      content: "";
      flex: 1;
      height: 1.5px;
      background: linear-gradient(90deg, transparent, #d33e00 80%, #d33e00);
    }

    .logo-line-center::after {
      background: linear-gradient(90deg, #d33e00, transparent);
    }

    .logo-wrapper {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: transparent;
      padding: 0.5rem;
      margin-bottom: 0.1rem;
    }

    .logo-wrapper img {
      max-height: 30px;
      width: auto;
      object-fit: contain;
      display: block;
    }

    .logo-tag {
      background: rgba(211, 62, 0, 0.15);
      padding: 0.12rem 0.45rem;
      border-radius: 4px;
      font-weight: 700;
      font-size: 0.6rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      display: inline-block;
      line-height: 1.4;
      flex-shrink: 0;
      margin: 0 5px;
      white-space: nowrap;
    }

    .logo-tag span {
      background: conic-gradient(at 50% 0%,
          #b23f0d 0deg,
          #b23f0d 110deg,
          #00123C 175deg,
          #00123C 180deg);

      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      color: transparent;
    }

    h1 {
      font-family: 'Manrope', sans-serif;
      font-size: 1.5rem;
      font-weight: 800;
      letter-spacing: -0.02em;
      margin-bottom: 0.4rem;
      color: #00123c !important;
    }

    .subtitle {
      font-size: 0.85rem;
      color: #00123c !important;
    }

    /* Form Fields */
    .form-group {
      margin-bottom: 1.25rem;
      position: relative;
    }

    .form-label {
      display: block;
      font-size: 0.8rem;
      font-weight: 600;
      margin-bottom: 0.5rem;
      color: #00123c !important;
      /* color: var(--muted); */
      letter-spacing: 0.03em;
      text-transform: uppercase;
    }

    .input-wrapper {
      position: relative;
      border-color: #00123c !important;
    }

    .input-wrapper svg {
      position: absolute;
      left: 14px;
      top: 50%;
      transform: translateY(-50%);
      width: 18px;
      height: 18px;
      stroke: #00123c;
      /* Navy Blue */
      fill: none;
      stroke-width: 2;
      transition: all 0.2s ease;
    }

    .form-input {
      width: 100%;
      padding: 12px 14px 12px 42px;

      background-color: #ffffff;
      background-image:
        linear-gradient(#ffffff, #ffffff),
        linear-gradient(135deg,
          #00123c 0%,
          #00123c 55%,
          #d33e00 100%);
      background-clip: padding-box, border-box;

      border: 1.5px solid transparent;
      border-radius: 10px;

      color: #000000;
    }

    .form-input:focus {
      border-color: var(--accent);
      box-shadow: 0 0 12px rgba(211, 62, 0, 0.22);
      background-color: var(--bg-input-focus);
      outline: none;
    }

    .form-input:focus+svg {
      stroke: var(--accent);
    }

    .password-toggle {
      position: absolute;
      right: 14px;
      top: 70%;
      transform: translateY(-50%);
      width: 20px;
      height: 20px;
      color: #00123c !important;
      /* color: var(--muted); */
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: color 0.2s ease;
    }

    .password-toggle:hover {
      color: var(--accent);
    }

    .password-toggle svg {
      position: static;
      width: 20px;
      height: 20px;
      stroke: currentColor;
      fill: none;
      stroke-width: 2;
    }

    .password-input {
      padding-right: 46px;
    }

    .error-box {
      background: conic-gradient(at 50% 0, #ac3300 0deg, #eb632a 90deg, #a53606 110deg, #00123c 150deg, #00123c 180deg);
      border: 1px solid #ff4444;
      color: #ffffff;
      padding: 0.75rem 1rem;
      border-radius: 10px;
      font-size: 0.85rem;
      display: flex;
      align-items: center;
      gap: 0.5rem;
      opacity: 0;
      transform: scale(0.95);
      transition: all 0.2s ease;
      pointer-events: none;
      height: 0;
      overflow: hidden;
    }

    .error-box.show {
      opacity: 1;
      transform: scale(1);
      pointer-events: auto;
      height: auto;
      margin-bottom: 1.25rem;
    }

    .submit-btn {
      width: 100%;
      padding: 14px;
      background: conic-gradient(at 50% 0%, #b23f0d 0deg, #b23f0d 110deg, #00123C 175deg, #00123C 180deg);
      border: 2px solid transparent;
      border-radius: 50px;
      color: #ffffff;
      font-family: 'Manrope', sans-serif;
      font-size: 0.95rem;
      font-weight: 700;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      position: relative;
      transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease;
      box-shadow: none;
    }

    .submit-btn:hover {
      background-image: linear-gradient(#f0f4ff, #f0f4ff),
        linear-gradient(110deg, #081256, #001b5e 35%, #eb632a 70%, #f36b2a) !important;
      background-clip: padding-box, border-box !important;
      background-origin: border-box !important;
      color: #00123c !important;
      -webkit-text-fill-color: #00123c !important;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
      border: 2px solid transparent !important;
    }

    .submit-btn:active {
      transform: translateY(-2px);
    }

    .submit-btn:disabled {
      opacity: 0.5;
      box-shadow: none;
      cursor: not-allowed;
      transform: none;
    }

    /* Spinner */
    .spinner {
      width: 16px;
      height: 16px;
      border: 2px solid rgba(255, 255, 255, 0.3);
      border-top-color: #ffffff;
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
      display: none;
    }

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

    /* Footer */
    .footer {
      text-align: center;
      margin-top: 2rem;
      font-size: 0.85rem;
      color: #00123c !important;
      /* color: var(--muted); */
    }

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

    img,
    svg {
      max-width: 100%;
    }

    @media (max-width: 768px) {
      body {
        padding: 16px;
      }

      .login-container {
        padding: 1.75rem;
      }
    }

    @media (max-width: 480px) {
      body {
        padding: 12px;
      }

      .login-container {
        padding: 1.4rem;
        border-radius: 16px;
      }

      .logo-wrapper img {
        max-height: 26px;
      }

      .subtitle {
        font-size: 0.8rem;
      }
    }

    /* Theme Toggle Button Style */
    .theme-toggle-fixed {
      position: fixed;
      top: 20px;
      right: 20px;
      background: var(--bg-card);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid var(--border);
      padding: 12px;
      border-radius: 50%;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--text);
      z-index: 100;
      transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .theme-toggle-fixed:hover {
      transform: scale(1.1);
      border-color: var(--accent);
      color: var(--accent);
    }

    .theme-toggle-fixed svg {
      width: 20px;
      height: 20px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      display: block;
    }