:root {
  color-scheme: dark;
  font-family: "Segoe UI", Arial, sans-serif;
  color: #fff2e5;
  background: #1b100b;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  --orange: #ff963c;
  --orange-light: #ffc176;
  --muted: #b7a396;
}
* { box-sizing: border-box; }
body { min-width: 320px; min-height: 100vh; margin: 0; background: radial-gradient(ellipse at 15% 15%, #8c431e44, transparent 35%), radial-gradient(ellipse at 92% 85%, #da6a1b2b, transparent 30%), #1b100b; }
body::before, body::after { position: fixed; z-index: 0; width: 260px; height: 260px; border-radius: 50%; background: #ff8a3030; content: ""; filter: blur(95px); pointer-events: none; animation: ember 8s ease-in-out infinite alternate; }
body::before { top: -100px; right: 8%; }
body::after { bottom: -120px; left: 4%; animation-delay: -4s; }
.auth-layout { position: relative; z-index: 1; display: flex; min-height: 100vh; flex-direction: column; align-items: center; justify-content: center; padding: 34px 20px; }
.auth-brand { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; color: #fff2e5; font-size: 17px; font-weight: 850; letter-spacing: -.7px; text-decoration: none; }
.auth-brand > span:last-child > span { color: var(--orange-light); }
.brand-mark { display: grid; width: 37px; height: 37px; place-items: center; border-radius: 12px; background: linear-gradient(145deg, #ffd188, #f17b29); color: #291508; font-size: 13px; font-weight: 900; box-shadow: 0 0 23px #ff903e65; }
.auth-card { width: min(100%, 390px); padding: clamp(21px, 5vw, 29px); border: 1px solid #ffc17a35; border-radius: 16px; background: linear-gradient(150deg, #302018ed, #211711f5); box-shadow: 0 25px 80px #0008, 0 0 35px #ff8a3020, inset 0 1px #fff1; backdrop-filter: blur(18px); animation: rise .55s ease both; }
.auth-eyebrow { display: flex; align-items: center; gap: 8px; color: #ffbd79; font-size: 9px; font-weight: 800; letter-spacing: 1.25px; }
.auth-eyebrow span { width: 7px; height: 7px; border-radius: 50%; background: #ff9b47; box-shadow: 0 0 12px #ff7c31; }
.auth-card h1 { margin: 15px 0 7px; font-size: clamp(25px, 7vw, 32px); letter-spacing: -1.1px; }
.auth-lead { margin: 0 0 18px; color: var(--muted); font-size: 11px; line-height: 1.65; }
.auth-card form { display: grid; gap: 7px; }
.auth-card label { margin-top: 4px; color: #f0dfce; font-size: 11px; font-weight: 700; }
.email-hint { margin: -3px 0 1px; color: #a9927f; font-size: 9px; }
.email-hint strong { color: #ffc07a; }
.label-hint { float: right; color: #ad9b8c; font-size: 9px; font-weight: 400; }
.password-strength { height: 7px; overflow: hidden; border: 1px solid #5e4534; border-radius: 99px; background: #170f0b; }
.password-strength > span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #e64b4b, #f0a33a 52%, #43cb79); transition: width .25s ease; }
.password-strength-label { margin: -4px 0 2px; color: #b7a396; font-size: 9px; }
.password-input-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 7px; align-items: center; }
.suggest-password { min-height: 35px; padding: 0 9px; border: 1px solid #c960765c; border-radius: 7px; background: linear-gradient(115deg, #67303b, #442534); color: #ffc1cd; font-size: 9px; font-weight: 750; cursor: pointer; }
.password-visibility { min-height: 35px; padding: 0 10px; border: 1px solid #704958; border-radius: 7px; background: #2c1c22; color: #ffd4df; font-size: 9px; font-weight: 700; cursor: pointer; }
.password-visibility:hover { border-color: #ff9eae; }
.suggest-password:hover { border-color: #ff8fa5; box-shadow: 0 0 13px #f4527733; }
.terms-consent { display: flex; align-items: flex-start; gap: 8px; margin: 7px 0 0 !important; color: #c8b2a2 !important; font-size: 9px !important; font-weight: 500 !important; line-height: 1.6; }
.terms-consent input { flex: none; width: 15px; height: 15px; margin: 2px 0 0; accent-color: #ff806d; }
.terms-consent a { color: #ffb4bf; font-weight: 750; text-decoration: underline; text-underline-offset: 2px; }
.auth-card input:not([type="checkbox"]) { width: 100%; min-height: 39px; padding: 0 10px; border: 1px solid #5e4534; border-radius: 8px; outline: none; background: #170f0b; color: #fff2e5; font: inherit; font-size: 11px; transition: border-color .2s, box-shadow .2s; }
.auth-card input:focus { border-color: #ffa24f; box-shadow: 0 0 0 3px #ff963c20, 0 0 15px #ff963c21; }
.auth-submit { display: flex; min-height: 45px; align-items: center; justify-content: space-between; margin-top: 10px; padding: 0 15px; border: 1px solid #ffc078; border-radius: 8px; background: linear-gradient(105deg, #ffc578, #ff913a); color: #291609; font-size: 12px; font-weight: 850; box-shadow: 0 5px 22px #ff8d3835; cursor: pointer; transition: .2s ease; }
.auth-submit:hover { transform: translateY(-2px); box-shadow: 0 8px 25px #ff8d3860; }
.auth-submit:disabled { opacity: .65; cursor: wait; transform: none; }
.auth-message { min-height: 15px; margin: 0; color: #cbb8a7; font-size: 10px; line-height: 1.5; }
.auth-message.is-error { color: #ff9b87; }
.auth-switch { margin: 16px 0 0; color: var(--muted); text-align: center; font-size: 11px; }
.auth-switch a { color: #ffc078; font-weight: 800; text-decoration: none; }
.auth-switch a:hover { text-decoration: underline; }
.auth-footnote { margin: 18px 0 0; color: #ad9a89; text-align: center; font-size: 10px; }
.referral-note { margin: -9px 0 17px; padding: 10px 12px; border: 1px solid #bd733e70; border-radius: 8px; background: #773a1d33; color: #ffca91; font-size: 10px; line-height: 1.6; }
@keyframes ember { to { transform: translate(35px, 28px) scale(1.12); opacity: .65; } }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 480px) {
  .password-input-row { grid-template-columns: minmax(0, 1fr) auto; }
  .password-input-row .suggest-password { grid-column: 1 / -1; width: 100%; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } }

/* v7 — liên kết quên mật khẩu gọn dưới ô mật khẩu */
.auth-switch-inline { margin: -4px 0 10px; text-align: right; font-size: 11px; }
.auth-switch-inline a { color: #ffb273; text-decoration: none; }
.auth-switch-inline a:hover { text-decoration: underline; }

/* v8 — đăng nhập Discord */
.discord-login {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 46px;
  margin: 4px 0 6px;
  border: 1px solid #5865f2;
  border-radius: 11px;
  background: linear-gradient(135deg, #5865f2, #4752c4);
  color: #fff;
  font-size: 13px;
  font-weight: 850;
  text-decoration: none;
  box-shadow: 0 10px 24px #5865f23d;
  transition: transform .18s ease, filter .18s ease;
}
.discord-login:hover { filter: brightness(1.07); transform: translateY(-1px); }
.discord-login svg { width: 21px; height: 21px; fill: currentColor; }
.discord-login.is-disabled { opacity: .55; filter: grayscale(.4); }
.auth-note { margin: 0 0 4px; color: #a8927d; font-size: 10px; line-height: 1.6; text-align: center; }
.auth-divider { display: flex; align-items: center; gap: 9px; margin: 8px 0 2px; color: #8d7b6a; font-size: 9px; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: #4c3a2b; }

/* Thanh cuộn đẹp theo chủ đề */
* { scrollbar-width: thin; scrollbar-color: #c07a2a #1b110c; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #1b110c; border-radius: 8px; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #a95810, #e08c1b); border: 2px solid #1b110c; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #e08c1b, #f2ab35); }
.brand-mark img, .auth-brand-mark img { display: block; width: 100%; height: 100%; border-radius: inherit; object-fit: contain; }