/* --- Responsive login CSS (replace a3f9c1b7.min.css) --- */

:root{
  --bg: #0d1b2a;
  --card-bg: #1b263b;
  --muted: #aaa;
  --btn: #198754;
  --btn-hover: #157347;
}

/* Page */
html,body {
  height: 100%;
  margin: 0;
}
body {
    min-height: 100vh;
    background: var(--bg);
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    padding: 20px; /* adds breathing room on tiny screens */
    box-sizing: border-box;
}

/* Responsive wrapper (added in JS as xWrap) */
.xWrap {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px;
    box-sizing: border-box;
}

/* Login Card (same look as original) */
.x1 {
    width: 360px;              /* preferred desktop width */
    max-width: 92vw;          /* allow shrinking on small screens */
    padding: 25px;
    background: var(--card-bg);
    border-radius: 12px;
    box-shadow: 0 0 15px #000b;
    color: white;
    box-sizing: border-box;
}

/* Logo */
.x2 {
    width: 120px;
    height: auto;
    display: block;
    margin: 0 auto 20px;
}

/* Alerts */
.xAlert {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    padding: 12px 18px;
    border-radius: 6px;
    opacity: .95;
    color: white;
    font-weight: 600;
    box-shadow: 0 6px 18px rgba(0,0,0,.35);
}
.xAlert-d { background: #dc3545; } /* danger */
.xAlert-w { background: #f39c12; } /* warning */
.xAlert-s { background: #28a745; } /* success */

/* Button */
.xBtn {
    width: 100%;
    padding: 10px 12px;
    background: var(--btn);
    border: none;
    color: white;
    border-radius: 6px;
    margin-top: 10px;
    font-size: 16px;
    cursor: pointer;
    transition: transform .05s ease, background .12s ease;
}
.xBtn:hover { background: var(--btn-hover); transform: translateY(-1px); }
.xBtn:disabled { opacity: .7; cursor: not-allowed; transform: none; }

/* Note text */
.xNote {
    color: var(--muted);
    text-align: center;
    font-size: 12px;
    margin-top: 15px;
}

/* Form controls — keep Bootstrap-like look */
.form-control {
    width: 100%;
    padding: .5rem .625rem;
    border-radius: .375rem;
    border: 1px solid rgba(0,0,0,.08);
    box-sizing: border-box;
    background: #fff;
    color: #111;
    font-size: 14px;
}
.form-control:focus {
    outline: none;
    border-color: #86b7fe;
    box-shadow: 0 0 0 .2rem rgba(13,110,253,.12);
}

/* Invalid feedback */
.invalid-feedback {
    color: #f87171;
    font-size: 13px;
    margin-top: .375rem;
}

/* Minor text helpers (keeps the design consistent) */
.text-center { text-align: center; }
.mb-4 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: .75rem; }

/* --------------------- Responsive breakpoints --------------------- */

/* Very small phones: ensure card occupies most of width and readable spacing */
@media (max-width: 420px) {
    .x1 {
        width: 94vw;      /* almost full width */
        padding: 18px;
        border-radius: 10px;
    }
    .x2 { width: 100px; margin-bottom: 14px; }
    .xBtn { font-size: 15px; padding: 10px; }
}

/* Small tablets / landscape phones */
@media (min-width: 421px) and (max-width: 767px) {
    .x1 { width: 420px; max-width: 92vw; padding: 20px; }
}

/* Larger screens keep the original width */
@media (min-width: 768px) {
    .x1 { width: 360px; }
}

/* Accessibility & reduce motion */
@media (prefers-reduced-motion: reduce) {
  .xBtn, .x1 { transition: none; }
}