/* ==========================================================================
   Sihatuna sign-in — ported verbatim from the supplied design template
   (SihatunaSignInTemplate.html). Rules, values and breakpoints are the
   template's; only three mechanical changes were made so it can live in this
   project:
     1. the artwork URL points at /images/auth/,
     2. html[data-theme] became html[data-bs-theme], the attribute this site's
        theme switch already sets,
     3. the template's global html/body rule is scoped to the auth page, which
        shares its document with the site layout.
   The page loads this sheet instead of authentication.css. Join has since been
   ported too and loads authentication-join.css, so authentication.css is now
   unused and is queued for removal in the cleanup pass.
   ========================================================================== */

:root {
      --green-950:#043f31;
      --green-900:#075b45;
      --green-800:#087159;
      --green-700:#0a8c6c;
      --green-100:#dff3eb;
      --green-50:#f1faf6;
      --gold:#b88b32;
      --ink:#163a30;
      --muted:#6f817b;
      --card:rgba(255,255,255,.94);
      --art:url("/images/auth/sihatuna-signin-art.webp");
      --shadow:0 28px 80px rgba(2,64,47,.22);
    }

        body:has(.auth-page){margin:0;min-width:320px;min-height:100%;color:var(--ink);background:#edf7f3}
    .auth-page,.auth-page     .auth-page{font-family:"Segoe UI",Tahoma,Arial,sans-serif;color:var(--ink)}
    button,input{font:inherit}
    a{color:inherit}

    .auth-page{
      position:relative;
      min-height:100svh;
      overflow:hidden;
      background:#edf7f3;
    }

    /* Soft full-screen extension of the portrait artwork. */
    .auth-page::before{
      content:"";
      position:fixed;
      inset:-42px;
      z-index:0;
      pointer-events:none;
      background-image:var(--art);
      background-size:cover;
      background-position:center 34%;
      filter:blur(30px) saturate(.85);
      transform:scale(1.08);
      opacity:.28;
    }

    .auth-page::after{
      content:"";
      position:fixed;
      inset:0;
      z-index:0;
      pointer-events:none;
      background:
        radial-gradient(circle at 73% 18%,rgba(5,103,77,.10),transparent 33%),
        linear-gradient(90deg,rgba(239,249,245,.99) 0%,rgba(239,249,245,.95) 38%,rgba(239,249,245,.52) 62%,rgba(239,249,245,.16) 100%);
    }

    .topbar{
      position:absolute;
      top:0;
      inset-inline:0;
      z-index:20;
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:18px clamp(18px,3vw,42px);
    }

    .brand-mini{
      display:inline-flex;
      align-items:center;
      gap:10px;
      color:var(--green-900);
      text-decoration:none;
      /* The serif wordmark, matching the site chrome's brand lockup. */
      font-family:Georgia,"Times New Roman",serif;
      font-weight:700;
      letter-spacing:.3px;
    }

    .brand-icon{
      width:44px;
      height:44px;
      display:block;
      flex:0 0 auto;
      object-fit:cover;
      border-radius:14px;
      box-shadow:0 10px 24px rgba(4,79,59,.24),0 0 0 1px rgba(255,255,255,.52);
      transition:transform .16s ease,box-shadow .16s ease;
    }

    .brand-mini:hover .brand-icon{
      transform:translateY(-1px) scale(1.02);
      box-shadow:0 14px 30px rgba(4,79,59,.29),0 0 0 1px rgba(255,255,255,.62);
    }

    .topbar-actions{
      display:flex;
      align-items:center;
      gap:10px;
    }

    .language-switch,
    .theme-switch{
      display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:42px;
      border:1px solid rgba(7,91,69,.12);border-radius:999px;color:#173d32;
      background:rgba(255,255,255,.88);box-shadow:0 8px 28px rgba(5,76,58,.10);
      backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);cursor:pointer;
      transition:background-color .16s ease,color .16s ease,border-color .16s ease,transform .16s ease
    }

    .language-switch{padding:8px 14px}
    .theme-switch{width:42px;padding:0}
    .language-switch:hover,.theme-switch:hover{transform:translateY(-1px);background:#fff}
    .language-switch svg,.theme-switch svg{width:18px;height:18px;stroke:currentColor}
    .theme-sun{display:none}
    html[data-bs-theme="dark"] .theme-sun{display:block}
    html[data-bs-theme="dark"] .theme-moon{display:none}

    .layout{
      position:relative;
      z-index:1;
      min-height:100svh;
      display:grid;
      grid-template-columns:minmax(430px,42%) minmax(580px,58%);
      direction:ltr;
    }

    .form-side{
      position:relative;
      z-index:4;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:100px clamp(24px,4vw,70px) 52px;
      direction:rtl;
    }

    .form-wrap{width:min(530px,100%)}

    .eyebrow{
      display:inline-flex;align-items:center;gap:9px;margin-bottom:13px;
      color:var(--green-800);font-size:.86rem;font-weight:800
    }
    .eyebrow::before{content:"";width:28px;height:2px;border-radius:99px;background:var(--gold)}

    .intro{margin-bottom:22px}
    .intro h1{margin:0 0 8px;color:var(--green-950);font-size:clamp(2rem,4vw,3.45rem);line-height:1.04;letter-spacing:-.035em}
    .intro p{margin:0;color:var(--muted);line-height:1.75}

    .card{
      position:relative;
      overflow:hidden;
      padding:clamp(22px,3vw,34px);
      border:1px solid rgba(255,255,255,.78);
      border-radius:30px;
      background:var(--card);
      box-shadow:var(--shadow);
      backdrop-filter:blur(18px);
      -webkit-backdrop-filter:blur(18px)
    }
    .card::before{content:"";position:absolute;top:0;inset-inline:0;height:4px;background:linear-gradient(90deg,var(--green-800),var(--gold))}

    .field{margin-bottom:16px}
    .field label{display:block;margin-bottom:8px;color:#284a40;font-size:.9rem;font-weight:750}
    .input-shell{position:relative}
    .input-shell input{
      width:100%;height:58px;padding-inline:50px 16px;border:1px solid rgba(27,86,68,.16);
      border-radius:17px;outline:none;color:#18392f;background:rgba(249,253,251,.94);
      transition:border-color .16s ease,box-shadow .16s ease,background-color .16s ease
    }
    .input-shell input::placeholder{color:#9aa9a4}
    .input-shell input:focus{border-color:rgba(8,113,87,.62);background:white;box-shadow:0 0 0 4px rgba(8,113,87,.10)}
    .input-icon{position:absolute;top:50%;inset-inline-start:17px;width:20px;height:20px;transform:translateY(-50%);color:#6e8f84;pointer-events:none}
    .has-action input{padding-inline-end:58px}
    .password-toggle{position:absolute;top:50%;inset-inline-end:12px;width:40px;height:40px;display:grid;place-items:center;border:0;border-radius:12px;background:transparent;color:#6e8f84;transform:translateY(-50%);cursor:pointer}
    .password-toggle:hover{color:var(--green-800);background:rgba(7,91,69,.07)}

    .options{display:flex;justify-content:space-between;align-items:center;gap:14px;margin:2px 0 18px;font-size:.88rem}
    .remember{display:inline-flex;align-items:center;gap:8px;color:#5e746d}
    .remember input{width:17px;height:17px;accent-color:var(--green-800)}
    .text-link{color:var(--green-800);font-weight:750;text-decoration:none}
    .text-link:hover{text-decoration:underline}

    .primary,.secondary{width:100%;min-height:56px;border-radius:17px;font-weight:850;cursor:pointer}
    .primary{border:0;color:white;background:linear-gradient(135deg,var(--green-900),var(--green-700));box-shadow:0 14px 30px rgba(7,91,69,.25)}
    .secondary{display:flex;align-items:center;justify-content:center;gap:10px;border:1px solid rgba(7,91,69,.38);color:var(--green-900);background:rgba(247,252,250,.82)}
    .primary:hover{transform:translateY(-1px)}
    .secondary:hover{background:white}

    .divider{display:flex;align-items:center;gap:12px;margin:20px 0;color:#91a39d;font-size:.85rem}
    .divider::before,.divider::after{content:"";flex:1;height:1px;background:rgba(7,91,69,.12)}

    .roles{margin-top:22px}
    .roles-title{display:flex;align-items:center;gap:12px;margin:0 0 14px;color:#21493d;font-size:.92rem;font-weight:850}
    .roles-title::before,.roles-title::after{content:"";flex:1;height:1px;background:rgba(7,91,69,.13)}
    .role-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
    .role-card{padding:14px 8px 12px;border:1px solid rgba(7,91,69,.14);border-radius:17px;color:#31584c;background:rgba(255,255,255,.73);text-align:center;text-decoration:none;transition:.16s ease}
    .role-card:hover{transform:translateY(-3px);border-color:rgba(7,91,69,.34);background:white}
    .role-icon{width:38px;height:38px;display:grid;place-items:center;margin:0 auto 8px;border-radius:13px;color:var(--green-800);background:var(--green-50)}
    .role-icon svg{width:21px;height:21px;stroke:currentColor}
    .role-name{display:block;font-size:.83rem;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .privacy-block{
      margin:20px auto 0;
      display:flex;
      flex-direction:column;
      align-items:center;
      gap:7px;
      color:#667c75;
      text-align:center;
    }
    .privacy-message{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      margin:0;
      font-size:.82rem;
      line-height:1.55;
    }
    .privacy-icon{
      width:20px;
      height:20px;
      flex:0 0 20px;
      color:var(--green-800);
      stroke:currentColor;
    }
    .privacy-link{
      display:inline-flex;
      align-items:center;
      gap:5px;
      color:var(--green-800);
      font-size:.80rem;
      font-weight:800;
      text-decoration:none;
      text-underline-offset:3px;
    }
    .privacy-link:hover,
    .privacy-link:focus-visible{
      color:var(--green-950);
      text-decoration:underline;
    }
    .privacy-link svg{
      width:14px;
      height:14px;
      stroke:currentColor;
    }

    .art-side{
      position:relative;
      min-width:0;
      min-height:100svh;
      overflow:hidden;
      direction:rtl;
    }

    /* This is the important part: the artwork now fills the visual area. */
    .art-image{
      position:absolute;
      inset:0;
      background-image:var(--art);
      background-size:cover;
      background-position:center 32%;
      filter:saturate(.94) contrast(.98);
      transform:scale(1.012)
    }

    .art-side::before{
      content:"";
      position:absolute;
      inset:0;
      z-index:1;
      pointer-events:none;
      background:
        linear-gradient(90deg,rgba(237,247,243,.96) 0%,rgba(237,247,243,.50) 11%,transparent 29%),
        linear-gradient(180deg,rgba(0,41,30,.08),transparent 27%,rgba(0,44,33,.10))
    }

    .caption{
      position:absolute;
      z-index:3;
      inset-inline-end:clamp(28px,4vw,70px);
      bottom:clamp(28px,5vh,54px);
      max-width:390px;
      padding:18px 20px;
      border:1px solid rgba(255,255,255,.52);
      border-radius:20px;
      color:white;
      background:rgba(2,65,48,.66);
      box-shadow:0 22px 55px rgba(0,35,25,.22);
      backdrop-filter:blur(14px)
    }
    .caption strong{display:block;margin-bottom:5px;font-size:1.04rem}
    .caption span{color:rgba(255,255,255,.82);font-size:.9rem;line-height:1.6}


    /* Dark mode --------------------------------------------------------- */
    html[data-bs-theme="dark"]{
      color-scheme:dark;
      --ink:#eef8f4;
      --muted:#afc5bd;
      --card:rgba(8,31,26,.94);
      --shadow:0 28px 80px rgba(0,0,0,.44);
      --green-50:rgba(20,126,96,.16);
      --green-100:rgba(36,151,116,.22);
    }

    html[data-bs-theme="dark"],
    html[data-bs-theme="dark"] body,
    html[data-bs-theme="dark"] .auth-page{
      background:#061c17;
      color:var(--ink);
    }

    html[data-bs-theme="dark"] .auth-page::before{
      opacity:.22;
      filter:blur(30px) saturate(.72) brightness(.48);
    }

    html[data-bs-theme="dark"] .auth-page::after{
      background:
        radial-gradient(circle at 73% 18%,rgba(18,151,111,.12),transparent 33%),
        linear-gradient(90deg,rgba(5,25,20,.99) 0%,rgba(5,25,20,.96) 38%,rgba(5,25,20,.66) 63%,rgba(5,25,20,.28) 100%);
    }

    html[data-bs-theme="dark"] .brand-mini,
    html[data-bs-theme="dark"] .eyebrow,
    html[data-bs-theme="dark"] .intro h1,
    html[data-bs-theme="dark"] .text-link,
    html[data-bs-theme="dark"] .privacy-link{
      color:#74d5b3;
    }

    html[data-bs-theme="dark"] .language-switch,
    html[data-bs-theme="dark"] .theme-switch{
      color:#e9f7f2;
      border-color:rgba(146,223,195,.17);
      background:rgba(8,31,26,.82);
      box-shadow:0 10px 30px rgba(0,0,0,.25);
    }

    html[data-bs-theme="dark"] .language-switch:hover,
    html[data-bs-theme="dark"] .theme-switch:hover{
      background:rgba(14,48,39,.96);
    }

    html[data-bs-theme="dark"] .card{
      border-color:rgba(161,224,201,.13);
      background:var(--card);
    }

    html[data-bs-theme="dark"] .field label,
    html[data-bs-theme="dark"] .roles-title{
      color:#d9ebe4;
    }

    html[data-bs-theme="dark"] .input-shell input{
      color:#f0faf6;
      border-color:rgba(160,218,197,.16);
      background:rgba(3,19,15,.78);
    }

    html[data-bs-theme="dark"] .input-shell input::placeholder{color:#799088}
    html[data-bs-theme="dark"] .input-shell input:focus{
      border-color:rgba(66,197,151,.68);
      background:rgba(4,25,20,.98);
      box-shadow:0 0 0 4px rgba(42,180,132,.14);
    }

    html[data-bs-theme="dark"] .input-icon,
    html[data-bs-theme="dark"] .password-toggle,
    html[data-bs-theme="dark"] .privacy-icon{
      color:#75bca4;
    }

    html[data-bs-theme="dark"] .remember,
    html[data-bs-theme="dark"] .privacy-block,
    html[data-bs-theme="dark"] .intro p{
      color:#afc5bd;
    }

    html[data-bs-theme="dark"] .secondary{
      color:#98dfc5;
      border-color:rgba(118,211,176,.34);
      background:rgba(9,38,31,.78);
    }
    html[data-bs-theme="dark"] .secondary:hover{background:rgba(13,51,41,.98)}

    html[data-bs-theme="dark"] .divider{color:#789087}
    html[data-bs-theme="dark"] .divider::before,
    html[data-bs-theme="dark"] .divider::after,
    html[data-bs-theme="dark"] .roles-title::before,
    html[data-bs-theme="dark"] .roles-title::after{
      background:rgba(143,211,186,.14);
    }

    html[data-bs-theme="dark"] .role-card{
      color:#d7ebe3;
      border-color:rgba(142,213,187,.14);
      background:rgba(8,31,26,.74);
    }
    html[data-bs-theme="dark"] .role-card:hover{
      border-color:rgba(117,211,176,.38);
      background:rgba(13,48,39,.96);
    }
    html[data-bs-theme="dark"] .role-icon{
      color:#75d1b1;
      background:rgba(29,142,105,.16);
    }

    html[data-bs-theme="dark"] .art-image{
      filter:saturate(.78) contrast(1.02) brightness(.58);
    }

    html[data-bs-theme="dark"] .art-side::before{
      background:
        linear-gradient(90deg,rgba(6,28,23,.98) 0%,rgba(6,28,23,.56) 12%,transparent 31%),
        linear-gradient(180deg,rgba(0,15,11,.28),transparent 27%,rgba(0,18,13,.32));
    }

    html[data-bs-theme="dark"] .caption{
      border-color:rgba(167,228,205,.18);
      background:rgba(3,30,23,.78);
      box-shadow:0 22px 55px rgba(0,0,0,.34);
    }

    html[dir="ltr"] .form-side{direction:ltr}

    /* The template ships the LTR counterpart for .form-side only; the art
       panel keeps its Arabic direction, which left the English caption
       right-aligned. Same rule, applied to the panel. */
    html[dir="ltr"] .art-side{direction:ltr}

    html[data-bs-theme="dark"] .brand-icon{
      box-shadow:0 12px 28px rgba(0,0,0,.46),0 0 0 1px rgba(255,255,255,.12);
    }

    @media(max-width:1080px){
      .layout{grid-template-columns:minmax(390px,47%) minmax(470px,53%)}
      .role-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    }

    @media(max-width:820px){
      html[data-bs-theme="dark"] .auth-page::after{
        background:linear-gradient(180deg,rgba(3,20,16,.30) 0%,rgba(4,24,19,.62) 30%,rgba(5,27,22,.96) 59%,#061c17 80%);
      }
      html[data-bs-theme="dark"] .art-side::before{
        background:linear-gradient(180deg,rgba(0,18,13,.18),rgba(4,24,19,.28) 24%,rgba(5,27,22,.94) 59%,#061c17 79%);
      }
      .auth-page::before{opacity:.34;filter:blur(24px) saturate(.8)}
      .auth-page::after{background:linear-gradient(180deg,rgba(237,247,243,.10) 0%,rgba(237,247,243,.42) 28%,rgba(237,247,243,.94) 57%,#edf7f3 79%)}
      .layout{display:block}
      .art-side{position:absolute;inset:0;min-height:100%}
      .art-image{background-position:center 23%;opacity:.78}
      .art-side::before{background:linear-gradient(180deg,rgba(0,41,30,.06),rgba(237,247,243,.10) 24%,rgba(237,247,243,.93) 58%,#edf7f3 78%)}
      .caption{display:none}
      .form-side{min-height:100svh;align-items:flex-end;padding:150px 18px 30px}
      .intro{padding-inline:6px;text-shadow:0 1px 10px rgba(255,255,255,.82)}
    }

    @media(max-width:520px){
      .topbar{padding:14px}
      .brand-mini span:last-child{display:none}
      .card{padding:22px 18px;border-radius:24px}
      .role-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    }

/* ==========================================================================
   Phone-screen corrections to the template.

   The template sizes its two topbar pills at 42px and the password eye at
   40px. Measured on a 390px viewport those are the only controls that fall
   under the ~44px touch target this project holds itself to, so they are
   nudged up; nothing else about them changes. The two inline text links get
   vertical padding for the same reason, which costs no layout because both
   sit on their own line.
   ========================================================================== */

.auth-page .theme-switch,
.auth-page .language-switch {
    min-height: 44px;
}

.auth-page .theme-switch {
    width: 44px;
}

.auth-page .password-toggle {
    width: 44px;
    height: 44px;
}

@media (max-width: 820px) {
    .auth-page .options .text-link,
    .auth-page .privacy-link {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    /* The label is the tap target for the checkbox inside it. */
    .auth-page .remember {
        min-height: 44px;
        align-items: center;
    }
}

/* ==========================================================================
   Responsive corrections to the template.

   1. Column floor. The template's grid asks for minmax(430px,42%) +
      minmax(580px,58%) = 1010px, and its 1080px breakpoint lowers that only
      to 860px. Between 821px and 860px the columns therefore total more than
      the viewport and the page scrolls sideways. The columns now use 0 as
      their floor, so they shrink instead of overflowing.

   2. Page-tall artwork. Below 820px the art panel is absolutely positioned
      against .layout, which is as tall as the whole scrolling page — so the
      artwork was stretched over that full height and only a heavily zoomed
      sliver showed behind the form. Fixing it to the viewport keeps the
      composition the template intended while the content scrolls over it.
   ========================================================================== */

.auth-page .layout {
    grid-template-columns: minmax(0, 42%) minmax(0, 58%);
}

@media (max-width: 1080px) {
    .auth-page .layout {
        grid-template-columns: minmax(0, 47%) minmax(0, 53%);
    }
}

@media (max-width: 820px) {
    .auth-page .art-side {
        position: fixed;
        inset: 0;
        min-height: 0;
    }

    /* The template's 150px top padding assumes a tall phone; on short screens
       it pushed the heading under the fold before anything readable appeared. */
    .auth-page .form-side {
        min-height: 100svh;
        padding-block: clamp(84px, 18vh, 150px) 30px;
    }
}

/* The two shared switchers sit in a tight topbar next to the brand; on the
   narrowest screens they wrap rather than push the row wider. */
@media (max-width: 400px) {
    .auth-page .topbar {
        gap: 8px;
    }

    .auth-page .topbar-actions {
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 6px;
    }
}

/* ==========================================================================
   Two corrections after reviewing the page on a phone.

   1. The theme control is icon-only here. The shared partial ships an icon
      plus the word "Dark"/"Light"; on this page the word is redundant next to
      the language pill and crowds a narrow topbar. The text is hidden
      visually only — the button keeps its aria-label, so its accessible name
      is unchanged.

   2. Legibility of the heading over the artwork. Pinning the art panel to the
      viewport (needed to stop it stretching over the whole scroll height)
      also re-cropped it, and the Arabic calligraphy — the busiest, highest
      contrast part of the poster — landed directly behind "Welcome back".
      On phones the artwork now sits on its calm lower half, is carried at a
      lower opacity, and the wash above the card is stronger, so the heading
      reads as text rather than competing with the lettering behind it.
   ========================================================================== */

.auth-page .theme-toggle-inline {
    width: 44px;
    padding-inline: 0;
    justify-content: center;
}

.auth-page .theme-toggle-inline > span > span:last-child {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 820px) {
    /* The landmarks and water, not the calligraphy. */
    .auth-page .art-image {
        background-position: center 76%;
        opacity: .38;
    }

    /* A firm wash from just under the topbar down to the card, so the heading
       and its lead sit on near-solid ground. */
    .auth-page::after {
        background: linear-gradient(180deg,
            rgba(237, 247, 243, .58) 0%,
            rgba(237, 247, 243, .88) 18%,
            rgba(237, 247, 243, .97) 40%,
            #edf7f3 62%);
    }

    html[data-bs-theme="dark"] .auth-page::after {
        background: linear-gradient(180deg,
            rgba(6, 28, 23, .58) 0%,
            rgba(6, 28, 23, .88) 18%,
            rgba(6, 28, 23, .97) 40%,
            #061c17 62%);
    }

    html[data-bs-theme="dark"] .auth-page .art-image {
        opacity: .3;
    }
}

/* The shared flag button and the brand link sit at 38-42px from site.css;
   inside these auth topbars they are primary controls, so they take the same
   44px floor as everything else here. The inline links follow on phones. */
.auth-page .care-flag-btn {
    min-height: 44px;
}

.auth-page .brand,
.auth-page .brand-mini {
    min-height: 44px;
}

@media (max-width: 860px) {
    .auth-page .back-link,
    .auth-page .privacy-link,
    .auth-page .options .text-link {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
}

/* Validation feedback. The template shipped without it, so the summary the
   sign-in form renders on a failed attempt fell through to the page's default
   ink colour — an error a patient could read as ordinary text. Same palette
   family as authentication.css, in this sheet's own idiom. */
.auth-alert {
    margin-bottom: 16px;
    padding: 13px 16px;
    border-radius: 14px;
    font-size: .92rem;
    font-weight: 600;
}

/* The tag helper renders the summary div even when there is nothing to say —
   empty, or holding one empty <ul>. Both shapes disappear. */
.auth-alert:empty,
.auth-alert.validation-summary-valid {
    display: none;
}

.auth-alert ul {
    margin: 0;
    padding-inline-start: 1.1em;
}

.auth-alert ul:only-child {
    list-style: none;
    padding-inline-start: 0;
}

.auth-alert--error {
    border: 1px solid #f0b3b7;
    color: #ad2530;
    background: #fdf1f2;
}

.auth-alert--success {
    border: 1px solid #9adcc2;
    color: #0f5f45;
    background: #effaf5;
}

.auth-field-error {
    display: block;
    margin-top: 7px;
    color: #ad2530;
    font-size: .85rem;
    font-weight: 650;
}

.auth-field-error:empty {
    display: none;
}

html[data-bs-theme="dark"] .auth-alert--error {
    border-color: #7c3b40;
    color: #ffb9be;
    background: rgba(173, 37, 48, .16);
}

html[data-bs-theme="dark"] .auth-alert--success {
    border-color: #2f6b55;
    color: #9fe8cc;
    background: rgba(15, 95, 69, .18);
}

html[data-bs-theme="dark"] .auth-field-error {
    color: #ffb9be;
}