@font-face {
      font-family: 'Vazirmatn';
      src: url('/static/fonts/Vazirmatn-Regular.woff2') format('woff2'),
           url('/static/fonts/Vazirmatn-Regular.woff') format('woff');
      font-weight: normal;
      font-style: normal;
      font-display: swap;
    }

    /* پایه */
    body {
      font-family: 'Vazirmatn', Tahoma, Arial, sans-serif !important;
      min-height: 100vh;
      margin: 0;
      padding: 0;
    }

    /* پس‌زمینه و رنگ‌های پایه */
    :root[data-theme="dark"] {
      --bg: #16222a;
      --bg-img: url('/static/images/bg.png');
      --fg: #f0f6fa;
      --muted: #737e9c;
      --brand: #6cc4ff;
      --card-bg: rgba(34,42,56,0.98);
      --card-shadow: 0 6px 32px #5689a890;
      --input-bg: rgb(104 121 156 / 90%);
      --input-border: #6cc4ff;
      --input-focus: #009ca850;
      --btn1-bg: #1976d2;
      --btn2-bg: #194168;
      --btn2-fg: #faf3cf;
      --badge-fg: #111;
      --help: #e6f1ff;
      --error: #ff6868;
      --success: #4caf50;
      --hint: #9ec9ff;
      --modal-bg: #223049;
      --modal-fg: #e8f2ff;
      --shadow-soft: 0 6px 28px #295b8a22;
    }
    :root[data-theme="light"] {
      --bg: #f7fafd;
      --bg-img: url('/static/images/bgl.png');
      --fg: #20232a;
      --muted: #7a8aa2;
      --brand: #1c67b4;
      --card-bg: rgba(255,255,255,0.98);
      --card-shadow: 0 6px 28px #295b8a22;
      --input-bg: #f1f6fb;
      --input-border: #89bff5;
      --input-focus: #2aa2ff40;
      --btn1-bg: #1976d2;
      --btn2-bg: #1d5aa2;
      --btn2-fg: #eaf6ff;
      --badge-fg: #111;
      --help: #233446;
      --error: #ff6868;
      --success: #4caf50;
      --hint: #1f5f9f;
      --modal-bg: #ffffff;
      --modal-fg: #1f2b3a;
      --shadow-soft: 0 6px 28px #295b8a22;
    }

    :root[data-theme] body {
      background: var(--bg) var(--bg-img) repeat;
      color: var(--fg);
    }

    /* نوار بالایی: سوییچر تم */
    .top-controls {
      display: flex; justify-content: flex-end; gap: 8px;
      padding: 10px 14px 0 14px;
    }
    .theme-switcher i { font-size: 1.25em; }

    /* بنر */
    .banner-img {
      width: 100%;
      max-width: 370px;
      margin: 12px auto 18px auto;
      display: block;
      border-radius: 18px;
      box-shadow: 0 4px 24px #4446;
      background: rgba(230,245,255,0.14);
      padding: 7px;
    }
    @media (max-width: 800px) { .banner-img { max-width: 97vw; } }

    /* کارت لاگین */
    .login-card {
      width: 100%;
      max-width: 380px;
      border-radius: 22px;
      box-shadow: var(--card-shadow);
      padding: 32px 28px 24px 28px;
      margin: 10px auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      transition: background .2s, color .2s, box-shadow .2s;
      background: var(--card-bg);
      color: var(--fg);
    }

    .login-title {
      font-size: 1.35em;
      font-weight: bold;
      color: var(--brand);
      margin-bottom: 18px;
      text-align: center;
    }

    /* فرم‌ها */
    .form-label { color: inherit; }
    .form-control {
      border-radius: 10px !important;
      border: 1px solid var(--input-border) !important;
      background: var(--input-bg) !important;
      color: #0f2436 !important; /* روی تیره هم روشن نمایش می‌دهد */
    }
    [data-theme="dark"] .form-control { color: #fff !important; }
    .form-control:focus {
      border-color: #2aa2ff !important;
      box-shadow: 0 0 0 2px var(--input-focus) !important;
    }

    /* دکمه‌ها */
    .btn-primary {
      background: var(--btn1-bg) !important;
      color: #fff !important;
      border: none !important;
      font-weight: bold;
      font-size: 1.12em;
      padding: 7px 0;
      border-radius: 10px;
      margin-top: 8px;
    }
    .btn-primary2 {
      background: var(--btn2-bg) !important;
      color: var(--btn2-fg) !important;
      border: none !important;
      font-size: 1.0em;
      padding: 5px 7px;
      border-radius: 10px;
      margin-top: 6px;
    }

    /* مودال‌ها */
    .modal-content {
      background: var(--modal-bg);
      color: var(--modal-fg);
      box-shadow: var(--shadow-soft);
    }
    .modal-content .form-control {
      background: var(--input-bg) !important;
      color: inherit !important;
      border: 1px solid var(--input-border) !important;
    }
    .btn-close { filter: invert(0); }
    [data-theme="dark"] .btn-close { filter: invert(1); }

    /* متن‌های راهنما و خطا */
    .help-text { text-align: justify; text-justify: inter-word; color: var(--help); }
    .error-message { color: var(--error); margin-bottom: 8px; text-align: center; font-size: 1.05em; }
    .forgot-success { color: var(--success); margin-top: 10px; font-weight: 700; }
    .forgot-error   { color: var(--error);   margin-top: 10px; }
    .forgot-hint    { color: var(--hint);    margin-top: 6px; font-size: .9em; }

    /* فوتر */
    .footer-links { text-align: center; margin-top: 15px; font-size: 0.92em; }
    .footer-links a { color: var(--brand); margin: 0 10px; text-decoration: none; }
    .footer-links a:hover { text-decoration: underline; }
    .text-muted { color: var(--muted) !important; }