@import url("assets/css/auth-entry-standard.css?v=952d3ecdafe9");
/* =========================
MATERIEL AUTH UI STANDARD
FILE: style.css
USED BY:
index.php
login.php
register.php
resetpassword.php
newpassword.php
========================= */

:root {
  --auth-bg-1: #0f141a;
  --auth-bg-2: #1c1c1c;
  --auth-bg-3: #242b33;

  --card-bg: rgba(18, 24, 31, 0.94);
  --card-border: rgba(255, 255, 255, 0.1);

  --text-main: #f8fafc;
  --text-soft: #cbd5e1;
  --text-muted: #94a3b8;
  --text-dark: #101820;

  --primary: #2f80ed;
  --primary-dark: #1f5fbf;
  --success: #22c55e;
  --warning: #f59e0b;
  --danger: #ef4444;

  --input-bg: #f8fafc;
  --input-border: #d7dde4;

  --radius-card: 22px;
  --radius-input: 11px;
  --shadow-card: 0 26px 70px rgba(0, 0, 0, 0.48);

  --materiel-auth-entry-font: var(--materiel-font-base, Aptos, "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif);
  --materiel-auth-entry-title-size: 16px;
  --materiel-auth-entry-title-weight: 800;
  --materiel-auth-entry-field-title-size: 13px;
  --materiel-auth-entry-field-title-weight: 600;
  --materiel-auth-entry-button-name-size: 14px;
  --materiel-auth-entry-button-name-weight: 800;
  --materiel-auth-entry-secondary-link-size: 13px;
  --materiel-auth-entry-secondary-link-text: #8ec5ff;
  --materiel-auth-entry-secondary-link-weight: 700;
}


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

html,
body {
  min-height: 100%;
  font-family: var(--materiel-font-body, var(--materiel-auth-entry-font, Arial, sans-serif));
}

body {
  color: var(--text-main);
  background:
    radial-gradient(circle at top left, rgba(47, 128, 237, 0.22), transparent 34%),
    radial-gradient(circle at bottom right, rgba(34, 197, 94, 0.12), transparent 30%),
    linear-gradient(135deg, var(--auth-bg-1), var(--auth-bg-2) 55%, var(--auth-bg-3));
}

.auth-page {
  min-height: 100vh;
  padding: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.auth-card,
.register-card,
.new-password-card {
  background: var(--card-bg);
  color: var(--text-main);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(14px);
}

.auth-card {
  width: min(380px, 94vw);
  padding: 30px;
  text-align: center;
}

.register-card {
  width: min(880px, 96vw);
  padding: 28px;
}

.new-password-card {
  width: min(500px, 94vw);
  padding: 30px;
  text-align: center;
}

h1,
h2 {
  color: #ffffff;
  margin-bottom: 12px;
  letter-spacing: 0.3px;
}

.auth-card h2 {
  font-size: var(--materiel-auth-entry-title-size);
}


.register-header {
  text-align: center;
  margin-bottom: 20px;
}

.register-header h1 {
  font-size: var(--materiel-auth-entry-title-size);
}


.register-header p,
.auth-subtitle,
.auth-card p,
.new-password-card p {
  color: var(--text-soft);
  font-size: 13px;
  line-height: 1.5;
}

label {
  display: block;
  margin-top: 14px;
  margin-bottom: 6px;
  text-align: left;
  color: #ffffff;
  font-size: var(--materiel-auth-entry-field-title-size);
  font-weight: 900;
}

input,
select {
  width: 100%;
  height: 43px;
  padding: 0 13px;
  border: 1px solid var(--input-border);
  border-radius: var(--radius-input);
  background: var(--input-bg);
  color: var(--text-dark);
  font-size: 13px;
  outline: none;
  transition: 0.2s ease;
}

input::placeholder {
  color: #7b8794;
}

input:focus,
select:focus {
  border-color: #5aa7ff;
  box-shadow: 0 0 0 4px rgba(47, 128, 237, 0.22);
}

input[readonly] {
  background: #e9eef5;
  cursor: not-allowed;
}

.input-error {
  border-color: var(--danger) !important;
  background: #fff5f5 !important;
}

button {
  width: 100%;
  height: 44px;
  margin-top: 20px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #ffffff;
  font-size: var(--materiel-auth-entry-button-name-size);
  line-height: 1.1;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 14px 26px rgba(47, 128, 237, 0.28);
  transition: 0.2s ease;
}

button:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 32px rgba(47, 128, 237, 0.36);
}

button:disabled {
  opacity: 0.62;
  cursor: not-allowed;
  transform: none;
}

a {
  color: #8ec5ff;
  font-weight: 800;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

p {
  margin-top: 13px;
  font-size: 13px;
}

.secondary-button {
  display: block;
  width: 100%;
  height: 42px;
  margin-top: 10px;
  padding: 12px;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.09);
  color: #ffffff;
  font-size: var(--materiel-auth-entry-button-name-size);
  line-height: 1.1;
  font-weight: 900;
  text-align: center;
}

.secondary-button:hover {
  background: rgba(255, 255, 255, 0.14);
  text-decoration: none;
}

.notification {
  margin: 12px 0;
  padding: 11px 12px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 800;
  text-align: left;
}

.notification.hidden {
  display: none;
}

.notification.error {
  background: rgba(239, 68, 68, 0.14);
  color: #ffb4ab;
}

.notification.success {
  background: rgba(34, 197, 94, 0.14);
  color: #86efac;
}

.register-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.register-column {
  padding: 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.register-footer {
  margin-top: 18px;
  text-align: center;
}

.password-wrapper {
  position: relative;
}

.password-wrapper input {
  padding-right: 42px;
}

.toggle-password {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-dark);
  cursor: pointer;
  user-select: none;
}

.password-panel {
  margin-top: 10px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
  text-align: left;
}

.password-meter {
  width: 100%;
  height: 8px;
  margin-bottom: 10px;
  border-radius: 999px;
  background: #1b222b;
  overflow: hidden;
}

.password-meter-bar {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: 999px;
  background: var(--danger);
  transition: width 0.25s ease, background 0.25s ease;
}

.password-panel.info .password-meter-bar {
  width: 0%;
}

.password-panel.weak .password-meter-bar {
  width: 33%;
  background: var(--danger);
}

.password-panel.medium .password-meter-bar {
  width: 66%;
  background: var(--warning);
}

.password-panel.strong .password-meter-bar {
  width: 100%;
  background: var(--success);
}

.password-title {
  margin-bottom: 8px;
  color: #ffffff;
  font-size: var(--materiel-auth-entry-field-title-size);
  font-weight: 900;
}

.password-rules {
  margin-top: 8px;
  list-style: none;
  color: var(--text-soft);
  font-size: 12px;
  line-height: 1.55;
}

.password-rules li {
  color: var(--text-soft);
}

.password-rules li.valid {
  color: #86efac;
}

.password-match-message,
.register-live-message {
  margin-top: 10px;
  font-size: 12px;
  font-weight: 900;
  text-align: left;
}

.password-match-message.error,
.register-live-message.error {
  color: #ffb4ab;
}

.password-match-message.success,
.register-live-message.success {
  color: #86efac;
}

.register-live-message.hidden {
  display: none;
}

.rank-select {
  position: relative;
}

.rank-list {
  position: absolute;
  top: calc(100% + 7px);
  left: 0;
  right: 0;
  max-height: 210px;
  overflow-y: auto;
  z-index: 999;
  background: #ffffff;
  border: 1px solid #d1dde8;
  border-radius: 12px;
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.16);
}

.rank-list.hidden {
  display: none;
}

.rank-option,
.rank-empty {
  padding: 10px 12px;
  color: #0f172a;
  font-size: 13px;
}

.rank-option {
  cursor: pointer;
}

.rank-option:hover {
  background: #eef6ff;
  color: #1d4ed8;
}

.rank-empty {
  color: #64748b;
}

body[data-page="index"] .auth-card,
body[data-page="login"] .auth-card,
body[data-page="resetpassword"] .auth-card {
  width: min(390px, 94vw);
}

body[data-page="register"] {
  align-items: center;
}

body[data-page="newpassword"] {
  align-items: center;
}

@media (max-width: 850px) {
  .auth-page {
    padding: 18px;
    align-items: flex-start;
  }

  .register-grid {
    grid-template-columns: 1fr;
  }

  .auth-card,
  .register-card,
  .new-password-card {
    padding: 22px;
  }

  .register-column {
    padding: 12px;
  }
}
/* =========================================================
   AUTH COMPACT COMMAND VIEW V2
   Login/register visual alignment only.
   ========================================================= */
@media screen and (min-width: 901px) {
    .login-container,
    .auth-container,
    .register-container,
    .reset-container {
        max-width: 420px !important;
        padding: 22px !important;
        border-radius: 16px !important;
    }

    .login-container h1,
    .auth-container h1,
    .register-container h1,
    .reset-container h1 {
        font-size: 26px !important;
        line-height: 1.05 !important;
        margin-bottom: 12px !important;
    }

    .login-container input,
    .auth-container input,
    .register-container input,
    .reset-container input,
    .login-container select,
    .auth-container select,
    .register-container select,
    .reset-container select {
        height: 36px !important;
        min-height: 36px !important;
        padding: 0 10px !important;
        font-size: 12.5px !important;
        border-radius: 9px !important;
    }

    .login-container button,
    .auth-container button,
    .register-container button,
    .reset-container button {
        min-height: 34px !important;
        padding: 7px 12px !important;
        font-size: 12px !important;
        border-radius: 9px !important;
    }
}


/* =========================================================
   AUTH COMPACT COMMAND VIEW V5
   Native 100% compact density for login/register/reset pages.
   ========================================================= */
@media screen and (min-width: 901px) {
    body.auth-page {
        font-size: 11px !important;
    }

    body.auth-page .auth-shell,
    body.auth-page .auth-page-shell,
    body.auth-page .auth-container {
        padding: 14px !important;
        gap: 10px !important;
    }

    body.auth-page .auth-card {
        max-width: 360px !important;
        padding: 16px !important;
        border-radius: 14px !important;
    }

    body.auth-page .auth-card h1,
    body.auth-page .auth-card h2 {
        font-size: 20px !important;
        line-height: 1.05 !important;
    }

    body.auth-page .auth-card p,
    body.auth-page .auth-card small,
    body.auth-page .auth-card label {
        font-size: 10px !important;
        line-height: 1.15 !important;
    }

    body.auth-page input:not([type="checkbox"]):not([type="radio"]),
    body.auth-page select {
        min-height: 32px !important;
        height: 32px !important;
        padding: 0 9px !important;
        border-radius: 8px !important;
        font-size: 11px !important;
    }

    body.auth-page button,
    body.auth-page .primary-action,
    body.auth-page .secondary-action {
        min-height: 32px !important;
        padding: 6px 10px !important;
        border-radius: 8px !important;
        font-size: 11px !important;
    }
}

/* =========================================================
   AUTH ENTRY FIVE-MODULE FONT IDENTITY STANDARD
   Scope: index.php, login.php, register.php, resetpassword.php and newpassword.php only.
   Fallback owner before assets/css/auth-entry-standard.css becomes the final cascade owner.
   ========================================================= */
body.auth-page[data-page="index"],
body.auth-page[data-page="login"],
body.auth-page[data-page="resetpassword"],
body.auth-page[data-page="register"],
body.auth-page[data-page="newpassword"] {
  font-family: var(--materiel-font-base, Aptos, "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif) !important;
}

body.auth-page[data-page="index"] .auth-card,
body.auth-page[data-page="login"] .auth-card,
body.auth-page[data-page="resetpassword"] .auth-card,
body.auth-page[data-page="register"] .register-card,
body.auth-page[data-page="newpassword"] .new-password-card,
body.auth-page[data-page="index"] input,
body.auth-page[data-page="login"] input,
body.auth-page[data-page="resetpassword"] input,
body.auth-page[data-page="register"] input,
body.auth-page[data-page="register"] select,
body.auth-page[data-page="newpassword"] input {
  font-family: var(--materiel-font-base, Aptos, "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif) !important;
}

/* =========================================================
   AUTH ENTRY FIVE-MODULE TYPOGRAPHY STANDARD
   Scope: index.php, login.php, register.php, resetpassword.php and newpassword.php only.
   Fallback owner before assets/css/auth-entry-standard.css becomes the final cascade owner.
   ========================================================= */
body.auth-page[data-page="index"] .auth-card h2,
body.auth-page[data-page="login"] .auth-card h2,
body.auth-page[data-page="resetpassword"] .auth-card h2,
body.auth-page[data-page="register"] .register-header h1,
body.auth-page[data-page="newpassword"] .new-password-card h2 {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-family: var(--materiel-font-base, Aptos, "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif) !important;
  font-size: 16px !important;
  font-size: var(--materiel-auth-entry-title-size) !important;
  line-height: 1.12 !important;
  font-weight: 800 !important;
  font-weight: var(--materiel-auth-entry-title-weight) !important;
  letter-spacing: 0 !important;
}

body.auth-page[data-page="index"] .auth-card label,
body.auth-page[data-page="login"] .auth-card label,
body.auth-page[data-page="resetpassword"] .auth-card label,
body.auth-page[data-page="register"] .register-card label,
body.auth-page[data-page="newpassword"] .new-password-card label,
body.auth-page[data-page="register"] .password-title,
body.auth-page[data-page="newpassword"] .password-title {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-family: var(--materiel-font-base, Aptos, "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif) !important;
  font-size: 13px !important;
  font-size: var(--materiel-auth-entry-field-title-size) !important;
  line-height: 1.22 !important;
  font-weight: 600 !important;
  font-weight: var(--materiel-auth-entry-field-title-weight) !important;
  letter-spacing: 0 !important;
}

body.auth-page[data-page="index"] .auth-card button,
body.auth-page[data-page="login"] .auth-card button,
body.auth-page[data-page="resetpassword"] .auth-card button,
body.auth-page[data-page="register"] .register-card button,
body.auth-page[data-page="newpassword"] .new-password-card button {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-family: var(--materiel-font-base, Aptos, "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif) !important;
  font-size: 14px !important;
  font-size: var(--materiel-auth-entry-button-name-size) !important;
  line-height: 1.1 !important;
  font-weight: 800 !important;
  font-weight: var(--materiel-auth-entry-button-name-weight) !important;
  letter-spacing: 0 !important;
}

body.auth-page[data-page="login"] .auth-card .secondary-button,
body.auth-page[data-page="login"] .auth-card #forgotPasswordLink,
body.auth-page[data-page="resetpassword"] .auth-card p > a,
body.auth-page[data-page="register"] .register-footer p > a,
body.auth-page[data-page="newpassword"] .new-password-card p > a {
  color: #8ec5ff !important;
  color: var(--materiel-auth-entry-secondary-link-text) !important;
  -webkit-text-fill-color: #8ec5ff !important;
  -webkit-text-fill-color: var(--materiel-auth-entry-secondary-link-text) !important;
  font-family: var(--materiel-font-base, Aptos, "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif) !important;
  font-size: 13px !important;
  font-size: var(--materiel-auth-entry-secondary-link-size) !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  font-weight: var(--materiel-auth-entry-secondary-link-weight) !important;
  letter-spacing: 0 !important;
}

/* =========================================================
   AUTH ENTRY FIVE-MODULE FIELD AND SECONDARY LINK ROOT FALLBACK
   Scope: index.php, login.php, register.php, resetpassword.php and newpassword.php only.
   This fallback prevents legacy global migration from diluting the protected auth-entry standard.
   ========================================================= */
body.auth-page[data-page="index"] input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
body.auth-page[data-page="index"] select,
body.auth-page[data-page="index"] textarea,
body.auth-page[data-page="login"] input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
body.auth-page[data-page="login"] select,
body.auth-page[data-page="login"] textarea,
body.auth-page[data-page="resetpassword"] input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
body.auth-page[data-page="resetpassword"] select,
body.auth-page[data-page="resetpassword"] textarea,
body.auth-page[data-page="register"] input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
body.auth-page[data-page="register"] select,
body.auth-page[data-page="register"] textarea,
body.auth-page[data-page="newpassword"] input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
body.auth-page[data-page="newpassword"] select,
body.auth-page[data-page="newpassword"] textarea {
  background: #ffffff !important;
  color: #101820 !important;
  -webkit-text-fill-color: #101820 !important;
  caret-color: #101820 !important;
  border-color: #d7dde4 !important;
}

body.auth-page[data-page="login"] .auth-card .secondary-button,
body.auth-page[data-page="login"] .auth-card #forgotPasswordLink,
body.auth-page[data-page="resetpassword"] .auth-card p > a,
body.auth-page[data-page="register"] .register-footer p > a,
body.auth-page[data-page="newpassword"] .new-password-card p > a {
  font-size: 13px !important;
  font-size: var(--materiel-auth-entry-secondary-link-size) !important;
}