@tailwind base;
@tailwind components;
@tailwind utilities;

@font-face {
  font-family: utmalexander;
  src: url('https://kpahplus.top/homepage/fonts/UTM-Alexander.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: #f9d686;
}
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0,0,0,0.2);
}

/* ===== BASE ===== */
* {
  box-sizing: border-box;
}
:focus {
  outline: 0 !important;
  box-shadow: none !important;
}

/* ===== HOMEPAGE BODY ===== */
.homepage-body {
  width: 100%;
  overflow: hidden auto;
  margin: 0;
  padding: 0;
  font-family: utmalexander, Verdana, Geneva, Tahoma, sans-serif;
  position: relative;
  background: #10121a;
  scroll-behavior: smooth;
}
.homepage-body ul {
  list-style: none;
  margin: 0;
}
.homepage-body a {
  transition: 0.3s;
  color: inherit;
  text-decoration: none;
}
.homepage-body .post2 a {
  color: #d4c093 !important;
}
.homepage-body .post2 a:hover {
  color: gold !important;
}
.homepage-body h1, .homepage-body h2, .homepage-body h3,
.homepage-body h4, .homepage-body h5, .homepage-body h6 {
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
}
.homepage-body p {
  margin: 0;
}
.homepage-body img {
  max-width: none;
}
.homepage-body img.img-fluid {
  max-width: 100%;
  height: auto;
}
.homepage-body button {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
}

/* ===== WRAPPER ===== */
.wrapper {
  transform-origin: left top;
  position: absolute;
  margin: 0 auto;
  width: 2000px;
  max-width: 2000px;
}

/* ===== LAYOUT HELPERS ===== */
.desktop { display: block !important; }
.mobile { display: none !important; }
.d-flex { display: flex !important; }
.d-block { display: block !important; }
.d-none { display: none !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-between { justify-content: space-between !important; }
.align-items-center { align-items: center !important; }
.text-center { text-align: center !important; }
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.img-fluid {
  max-width: 100%;
  height: auto;
}
.px-1 { padding: 0 4px; }
.mb-2 { margin-bottom: 8px; }
.zoom-50 {
  transition: transform 0.3s;
  display: inline-block;
}
.zoom-50:hover { transform: scale(1.05); }
.brightness:hover { filter: brightness(1.2); }

/* ===== SECTION BASE ===== */
.section {
  position: relative;
  display: block;
  max-width: 100%;
  pointer-events: auto !important;
}
.section-background {
  position: absolute;
  display: block;
  width: 100%;
  margin: 0 auto;
  top: 0;
  left: 0;
}
.section-background img {
  width: 100%;
  display: block;
}
.section-content {
  position: relative;
  display: block;
  width: 100%;
  margin: 0 auto;
  height: 100%;
}

/* ===== SECTION 1 ===== */
.section1 {
  width: 100%;
  height: 1000px;
  position: relative;
}
.section1 .art {
  position: absolute;
  top: 245px;
  left: 0;
  right: 0;
  text-align: center;
  margin: 0 auto;
  z-index: 10;
  animation: moveYDiv1 3s ease-in-out infinite;
}
.section1 .art img {
  margin: 0 auto;
  width: 520px;
  max-width: 52%;
  height: auto;
}
.section1 .art2 {
  position: absolute;
  top: 454px;
  left: 0;
  right: 0;
  text-align: center;
  margin: 0 auto;
  z-index: 10;
  animation: moveYDiv1 3s ease-in-out infinite;
}
.section1 .art2 img {
  margin: 0 auto;
  width: 560px;
  max-width: 72%;
  height: auto;
}
.section1 .btn-group-download {
  position: absolute;
  top: 760px;
  left: 0;
  right: 0;
  text-align: center;
  margin: 0 auto;
  width: 963px;
  height: 233px;
  background: url('https://kpahplus.top/homepage/images/bg-download-page1.png') 0% 0% / 100% no-repeat;
  z-index: 11;
  animation: fadeup 1s ease-in-out;
  display: flex;
  justify-content: center;
  align-items: center;
}
.section1 .btn-group-download a {
  display: inline-block;
}
.section1 .btn-group-download img {
  max-width: 100%;
  height: auto;
}
.auth-tile {
  display: inline-flex !important;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 150px;
  height: 150px;
  padding: 12px;
  border: 8px solid transparent;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(137, 80, 24, 0.98), rgba(78, 39, 10, 0.98)) padding-box,
    linear-gradient(180deg, #ffe78c, #f1a620 55%, #8d4108) border-box;
  box-shadow:
    inset 0 0 0 3px rgba(255, 234, 174, 0.45),
    0 10px 24px rgba(0, 0, 0, 0.35);
  color: #fff0c4 !important;
  text-decoration: none;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 0.02em;
  font-weight: 800;
  line-height: 1.05;
  text-shadow:
    0 2px 0 rgba(101, 42, 0, 0.95),
    0 0 14px rgba(255, 210, 107, 0.25);
}
.auth-tile span {
  display: block;
}
.auth-tile-register {
  background:
    linear-gradient(180deg, rgba(127, 61, 18, 0.98), rgba(74, 30, 7, 0.98)) padding-box,
    linear-gradient(180deg, #ffefb2, #ffbf36 55%, #9f4d0b) border-box;
}
.header .auth-tile {
  width: 136px;
  height: 136px;
  font-size: 22px;
}
.section1 .btn-group-download .auth-tile {
  font-size: 24px;
}
.section1 .btn-group-download .btn-group1,
.section1 .btn-group-download .btn-group2 {
  width: 207px;
}

/* ===== LIGHT EFFECT ===== */
.light {
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  opacity: 0.8;
  z-index: 0;
}
.light img {
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 0;
  display: block;
  background-size: cover;
}
.light img:nth-child(1) {
  animation: light 20s linear infinite;
}
.light img:nth-child(2) {
  animation: light 20s linear 10s infinite;
  left: -20%;
  bottom: -50%;
}

/* ===== SECTION 2 ===== */
.section2 {
  width: 100%;
  height: 1432px;
  position: relative;
  overflow: hidden;
  z-index: 20;
}
.section2 .title-page2 {
  text-align: center;
  margin-top: 48px;
  margin-bottom: -14px;
}
.section2 .title-page2 img {
  margin: 0 auto;
}
.posts-content {
  margin: 20px auto;
  max-width: 1016px;
  background-image: url('https://kpahplus.top/homepage/images/bg-hoatdongsukien.png');
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  padding: 6.3% 6.2%;
  position: relative;
  min-height: 90%;
  aspect-ratio: 1016 / 1264;
}
.btn-h {
  display: flex;
  justify-content: center;
  gap: 120px;
  margin-bottom: 25px;
  flex-wrap: wrap;
}
.select-tin {
  background: transparent;
  color: #fff;
  padding: 1% 2%;
  border-radius: 15px;
  cursor: pointer;
  font-weight: 600;
  font-size: 18px;
  border: none;
  transition: 0.3s;
  white-space: nowrap;
  flex: 0 1 0%;
  text-align: center;
  min-width: auto;
  font-family: utmalexander, sans-serif;
}
.select-tin.active {
  background: linear-gradient(45deg, #ffffcd, #ffffcd) !important;
  color: #000 !important;
}
.select-tin:hover {
  background: rgba(255, 215, 0, 0.2);
}
.btn-h2 {
  min-height: auto;
  padding: 0;
  max-height: 60%;
  overflow-y: auto;
}
.post2 {
  margin-bottom: 0.5%;
}
.post2 a {
  font-family: utmalexander, Verdana, Geneva, Tahoma, sans-serif;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  line-height: 1.4;
  display: block;
  padding: 3.41% 2%;
  font-size: 24px;
  font-weight: 500;
  overflow-wrap: break-word;
  color: #d4c093 !important;
}
.post2 a:hover {
  color: gold !important;
}
.section2 .art-page2 {
  position: absolute;
  bottom: 50px;
  left: 416px;
  z-index: 26;
  animation: ani2 5s linear infinite;
}

/* ===== SECTION 3 / FOOTER ===== */
.section3 {
  height: 260px;
  margin-top: 0;
  position: relative;
  z-index: 50;
}
.footer-content {
  font-family: Roboto, sans-serif;
  text-align: center;
  font-size: 18px;
  color: #ffe5c4;
  line-height: 30px;
}
.footer-text {
  padding: 14px 0 0;
  color: #fff;
  line-height: 20px;
}
.footer-text a {
  color: #c6cad9;
}
.font-size-16 { font-size: 16px; }

/* ===== BG BOTTOM ===== */
.bg-bottom-img {
  position: absolute;
  top: 780px;
  left: 0;
  right: 0;
  z-index: 1;
}
.bg-bottom-img img {
  width: 100%;
  display: block;
}

/* ===== RIGHT DOWNLOAD PANEL ===== */
.download {
  align-items: center;
  background: url('https://kpahplus.top/homepage/images/bg-download.png') top / 100% auto no-repeat;
  display: flex;
  flex-direction: column;
  height: 340px;
  overflow: hidden;
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  transform-origin: right top;
  width: 168px;
  z-index: 10;
  animation: fadeleft 1.5s ease-in-out;
}
.download a { display: block; }
.download .btn-img {
  width: 153px;
  margin-bottom: -2px;
}
.download .btn-img img {
  width: 100%;
  height: auto;
}
@media (max-width: 991px) {
  .download { display: none; }
}
@media (max-width: 1680px) {
  .download { transform: scale(0.85) translateY(-50%); transform-origin: right top; }
}

/* ===== REGISTER PAGE ===== */
.register-page {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  padding: 32px 20px 48px;
  background:
    linear-gradient(180deg, rgba(16, 18, 26, 0.88), rgba(34, 18, 9, 0.94)),
    url('https://kpahplus.top/homepage/images/bg-page2.png') center top / cover no-repeat;
  font-family: utmalexander, Verdana, Geneva, Tahoma, sans-serif;
}
.register-page__backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at top, rgba(255, 210, 107, 0.16), transparent 34%),
    radial-gradient(circle at bottom, rgba(171, 63, 19, 0.16), transparent 30%);
  pointer-events: none;
}
.register-page__shell {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
}
.register-page__topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: 22px;
}
.register-page__brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: #ffe7ab;
  text-decoration: none;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}
.register-page__brand img {
  width: 92px;
  height: auto;
}
.register-page__brand span {
  font-size: 34px;
  letter-spacing: 0.04em;
}
.register-page__backlink,
.register-form__ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 22px;
  border: 1px solid rgba(255, 231, 171, 0.28);
  border-radius: 14px;
  background: rgba(31, 18, 10, 0.48);
  color: #f8e0a0;
  text-decoration: none;
  box-shadow: inset 0 0 0 1px rgba(255, 243, 212, 0.08);
}
.register-page__card {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(340px, 1.2fr);
  gap: 26px;
  padding: 28px;
  border: 1px solid rgba(255, 217, 134, 0.18);
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(56, 33, 17, 0.88), rgba(21, 13, 9, 0.94)) padding-box,
    linear-gradient(180deg, rgba(255, 226, 159, 0.28), rgba(145, 71, 19, 0.22)) border-box;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(10px);
}
.login-page__card {
  display: grid;
  grid-template-columns: minmax(300px, 1fr) minmax(360px, 0.95fr);
  gap: 26px;
  padding: 28px;
  border: 1px solid rgba(255, 217, 134, 0.18);
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(56, 33, 17, 0.88), rgba(21, 13, 9, 0.94)) padding-box,
    linear-gradient(180deg, rgba(255, 226, 159, 0.28), rgba(145, 71, 19, 0.22)) border-box;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(10px);
}
.register-page__intro {
  padding: 18px 12px 18px 8px;
  color: #f8e6c2;
}
.register-page__eyebrow {
  margin-bottom: 10px;
  font-size: 17px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #f6c561;
}
.register-page__intro h1 {
  font-size: 56px;
  line-height: 1.02;
  color: #fff4d0;
  text-shadow: 0 3px 18px rgba(0, 0, 0, 0.28);
}
.register-page__lead {
  margin-top: 18px;
  font-family: Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.7;
  color: #e3d7c1;
}
.register-page__notice {
  margin-top: 24px;
  padding: 18px 20px;
  border-radius: 18px;
  background: rgba(255, 234, 184, 0.06);
  border: 1px solid rgba(255, 225, 150, 0.1);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
  font-family: Roboto, sans-serif;
  line-height: 1.6;
  color: #efe4d0;
}
.register-form {
  padding: 24px;
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255, 238, 209, 0.08), rgba(255, 238, 209, 0.03)),
    rgba(20, 12, 8, 0.82);
  border: 1px solid rgba(255, 217, 134, 0.15);
}
.register-form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.register-form__field {
  display: grid;
  gap: 8px;
}
.register-form__field--full {
  grid-column: 1 / -1;
}
.register-form__field span {
  font-size: 20px;
  color: #fde8b0;
}
.register-form__field input {
  width: 100%;
  min-height: 58px;
  padding: 14px 16px;
  border: 1px solid rgba(255, 219, 138, 0.18);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.06);
  color: #fff3cf;
  font-family: Roboto, sans-serif;
  font-size: 16px;
}
.register-form__field input::placeholder {
  color: rgba(255, 237, 202, 0.52);
}
.register-form__field input:focus {
  border-color: rgba(255, 209, 101, 0.7);
  box-shadow: 0 0 0 3px rgba(255, 188, 66, 0.18) !important;
}
.register-form__trap {
  position: absolute;
  left: -9999px;
  opacity: 0;
  pointer-events: none;
}
.register-form__meta {
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(255, 226, 164, 0.06);
  color: #eddcc0;
  font-family: Roboto, sans-serif;
  line-height: 1.65;
}
.register-form__feedback {
  margin-top: 16px;
  padding: 15px 16px;
  border-radius: 16px;
  font-family: Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.6;
}
.register-form__feedback.is-success {
  background: rgba(82, 166, 91, 0.18);
  border: 1px solid rgba(121, 213, 131, 0.28);
  color: #daffde;
}
.register-form__feedback.is-error {
  background: rgba(185, 68, 51, 0.16);
  border: 1px solid rgba(231, 114, 96, 0.25);
  color: #ffd6cf;
}
.register-form__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
}
.register-form__submit {
  min-height: 58px;
  padding: 0 24px;
  border: 0;
  border-radius: 16px;
  background:
    linear-gradient(180deg, #ffe7a3 0%, #ffbf47 48%, #a64d11 100%);
  color: #5d2405;
  font-size: 22px;
  font-weight: 700;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 14px 30px rgba(0, 0, 0, 0.24);
}
.register-form__submit:disabled {
  opacity: 0.7;
  cursor: wait;
}
.login-form__stack {
  display: grid;
  gap: 18px;
}
.login-page__highlights {
  display: grid;
  gap: 14px;
  margin-top: 22px;
}
.login-page__highlight {
  display: grid;
  gap: 6px;
  padding: 16px 18px;
  border-radius: 18px;
  background: rgba(255, 231, 171, 0.05);
  border: 1px solid rgba(255, 231, 171, 0.1);
  font-family: Roboto, sans-serif;
}
.login-page__highlight strong {
  color: #fff0c8;
  font-size: 16px;
}
.login-page__highlight span {
  color: #dccfb7;
  line-height: 1.6;
  font-size: 14px;
}

/* ===== ACCOUNT PAGE ===== */
.account-page {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  padding: 32px 20px 48px;
  background:
    linear-gradient(180deg, rgba(16, 18, 26, 0.9), rgba(34, 18, 9, 0.96)),
    url('https://kpahplus.top/homepage/images/bg-page2.png') center top / cover no-repeat;
  font-family: utmalexander, Verdana, Geneva, Tahoma, sans-serif;
}
.account-page__logout {
  cursor: pointer;
}
.account-page__hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 24px;
  padding: 28px;
  border-radius: 28px;
  border: 1px solid rgba(255, 217, 134, 0.18);
  background:
    linear-gradient(180deg, rgba(56, 33, 17, 0.82), rgba(21, 13, 9, 0.92)) padding-box,
    linear-gradient(180deg, rgba(255, 226, 159, 0.28), rgba(145, 71, 19, 0.22)) border-box;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.3);
}
.account-page__hero h1 {
  margin: 0;
  color: #fff3cf;
  font-size: 54px;
  line-height: 1.05;
}
.account-page__hero-status {
  min-width: 260px;
  display: grid;
  gap: 8px;
  padding: 20px 22px;
  border-radius: 22px;
  background: rgba(255, 232, 183, 0.06);
  border: 1px solid rgba(255, 232, 183, 0.1);
  color: #f6dfb0;
}
.account-page__hero-status span,
.account-page__hero-status small {
  font-family: Roboto, sans-serif;
}
.account-page__hero-status strong {
  font-size: 28px;
  color: #fff0c7;
}
.account-page__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}
.account-card {
  padding: 24px;
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255, 238, 209, 0.08), rgba(255, 238, 209, 0.03)),
    rgba(20, 12, 8, 0.84);
  border: 1px solid rgba(255, 217, 134, 0.15);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.2);
}
.account-card--announcements {
  grid-column: 1 / -1;
}
.account-card__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 18px;
}
.account-card__header span {
  display: block;
  color: #eabf69;
  font-size: 16px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.account-card__header strong {
  color: #fff0cb;
  font-size: 30px;
  text-align: right;
}
.account-card__body {
  display: grid;
  gap: 16px;
}
.account-stat-list {
  display: grid;
  gap: 12px;
}
.account-stat-list__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(255, 235, 198, 0.05);
  border: 1px solid rgba(255, 225, 150, 0.08);
}
.account-stat-list__item span,
.account-stat-list__item strong,
.account-inline-note,
.account-empty,
.account-announcement p,
.account-announcement span {
  font-family: Roboto, sans-serif;
}
.account-stat-list__item span {
  color: #d7ccb8;
}
.account-stat-list__item strong {
  color: #fff0c7;
  text-align: right;
}
.account-inline-note {
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(255, 213, 128, 0.06);
  color: #eedfbe;
  line-height: 1.6;
}
.account-metric-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.account-metric {
  display: grid;
  gap: 8px;
  padding: 18px;
  border-radius: 18px;
  background: rgba(255, 228, 160, 0.06);
  border: 1px solid rgba(255, 228, 160, 0.1);
}
.account-metric span {
  font-family: Roboto, sans-serif;
  color: #e7d7b1;
}
.account-metric strong {
  color: #fff0c8;
  font-size: 28px;
}
.account-ranking {
  display: grid;
  gap: 16px;
}
.account-ranking__badge {
  display: grid;
  gap: 6px;
  padding: 22px;
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255, 229, 164, 0.18), rgba(165, 83, 22, 0.14)),
    rgba(37, 20, 10, 0.9);
  border: 1px solid rgba(255, 229, 164, 0.18);
  text-align: center;
}
.account-ranking__badge span,
.account-ranking__badge small {
  font-family: Roboto, sans-serif;
}
.account-ranking__badge span {
  color: #ffe4a2;
}
.account-ranking__badge strong {
  color: #fff5d4;
  font-size: 48px;
}
.account-ranking__badge small {
  color: #efddb5;
}
.account-announcements {
  display: grid;
  gap: 14px;
}
.account-announcement {
  padding: 18px;
  border-radius: 18px;
  background: rgba(255, 235, 198, 0.05);
  border: 1px solid rgba(255, 225, 150, 0.08);
}
.account-announcement__meta {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}
.account-announcement__meta strong {
  color: #fff0c7;
  font-size: 24px;
}
.account-announcement__meta span {
  color: #d9cdb5;
  white-space: nowrap;
}
.account-announcement p {
  margin: 0;
  line-height: 1.7;
  color: #efe4d0;
}
.account-empty {
  padding: 18px;
  border-radius: 18px;
  background: rgba(255, 235, 198, 0.05);
  border: 1px solid rgba(255, 225, 150, 0.08);
  color: #e8dbc2;
  line-height: 1.7;
}

/* ===== ADMIN PAGE ===== */
.admin-login-page,
.admin-page {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(9, 12, 18, 0.94), rgba(29, 16, 8, 0.97)),
    url('https://kpahplus.top/homepage/images/bg-page2.png') center top / cover no-repeat;
  font-family: utmalexander, Verdana, Geneva, Tahoma, sans-serif;
}
.admin-login-page {
  padding: 32px 20px 48px;
}
.admin-login-page__shell {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}
.admin-login-page__card {
  display: grid;
  grid-template-columns: minmax(300px, 1fr) minmax(360px, 0.9fr);
  gap: 26px;
  padding: 28px;
  border: 1px solid rgba(255, 217, 134, 0.18);
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(56, 33, 17, 0.88), rgba(21, 13, 9, 0.94)) padding-box,
    linear-gradient(180deg, rgba(255, 226, 159, 0.28), rgba(145, 71, 19, 0.22)) border-box;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(10px);
}
.admin-page__shell {
  position: relative;
  z-index: 1;
  max-width: 1560px;
  margin: 0 auto;
  padding: 24px;
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 22px;
}
.admin-sidebar {
  position: sticky;
  top: 24px;
  align-self: start;
  display: grid;
  gap: 18px;
  padding: 24px 20px;
  border-radius: 28px;
  border: 1px solid rgba(255, 217, 134, 0.18);
  background:
    linear-gradient(180deg, rgba(48, 29, 16, 0.92), rgba(16, 10, 7, 0.95)) padding-box,
    linear-gradient(180deg, rgba(255, 226, 159, 0.28), rgba(145, 71, 19, 0.22)) border-box;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
}
.admin-sidebar__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #ffe7ab;
}
.admin-sidebar__brand img {
  width: 74px;
  height: auto;
}
.admin-sidebar__brand strong {
  display: block;
  font-size: 28px;
}
.admin-sidebar__brand span {
  display: block;
  font-family: Roboto, sans-serif;
  color: #e3d7c1;
}
.admin-sidebar__user {
  display: grid;
  gap: 6px;
  padding: 16px;
  border-radius: 18px;
  background: rgba(255, 232, 183, 0.06);
  border: 1px solid rgba(255, 232, 183, 0.1);
}
.admin-sidebar__user span,
.admin-sidebar__user small {
  font-family: Roboto, sans-serif;
  color: #e3d7c1;
}
.admin-sidebar__user strong {
  color: #fff0c7;
  font-size: 24px;
}
.admin-sidebar__nav {
  display: grid;
  gap: 10px;
}
.admin-sidebar__link,
.admin-sidebar__button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 16px;
  border-radius: 16px;
  border: 1px solid rgba(255, 231, 171, 0.16);
  background: rgba(255, 255, 255, 0.04);
  color: #f5e1b3;
  font-family: Roboto, sans-serif;
  text-decoration: none;
  cursor: pointer;
}
.admin-sidebar__link.is-active {
  background:
    linear-gradient(180deg, #ffe7a3 0%, #ffbf47 48%, #a64d11 100%);
  color: #5d2405;
  font-weight: 700;
}
.admin-sidebar__actions {
  display: grid;
}
.admin-main {
  min-width: 0;
  display: grid;
  gap: 18px;
}
.admin-header {
  padding: 28px;
  border-radius: 28px;
  border: 1px solid rgba(255, 217, 134, 0.18);
  background:
    linear-gradient(180deg, rgba(56, 33, 17, 0.82), rgba(21, 13, 9, 0.92)) padding-box,
    linear-gradient(180deg, rgba(255, 226, 159, 0.28), rgba(145, 71, 19, 0.22)) border-box;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.3);
}
.admin-header h1 {
  margin: 0;
  color: #fff4d0;
  font-size: 52px;
  line-height: 1.05;
}
.admin-notice {
  padding: 16px 18px;
  border-radius: 18px;
  font-family: Roboto, sans-serif;
  line-height: 1.6;
}
.admin-notice.is-success {
  background: rgba(82, 166, 91, 0.18);
  border: 1px solid rgba(121, 213, 131, 0.28);
  color: #daffde;
}
.admin-notice.is-error {
  background: rgba(185, 68, 51, 0.16);
  border: 1px solid rgba(231, 114, 96, 0.25);
  color: #ffd6cf;
}
.admin-content {
  display: grid;
  gap: 18px;
}
.admin-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.admin-grid--summary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.admin-card,
.admin-panel {
  padding: 22px;
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255, 238, 209, 0.08), rgba(255, 238, 209, 0.03)),
    rgba(20, 12, 8, 0.84);
  border: 1px solid rgba(255, 217, 134, 0.15);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.2);
}
.admin-card__label {
  display: block;
  color: #eabf69;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 14px;
}
.admin-card__value {
  display: block;
  margin-top: 8px;
  color: #fff0cb;
  font-size: 36px;
}
.admin-card p,
.admin-panel__header span,
.admin-empty,
.admin-list__item span,
.admin-list__item small,
.admin-stat-list__item span,
.admin-stat-list__item strong,
.admin-announcement-card p,
.admin-announcement-card span,
.admin-online-card span,
.admin-online-card small,
.admin-queue__info span,
.admin-queue__info strong,
.admin-log-table__row span,
.admin-log-table__row strong,
.admin-log-table__detail {
  font-family: Roboto, sans-serif;
}
.admin-card p {
  margin: 10px 0 0;
  color: #e8dbc2;
  line-height: 1.6;
}
.admin-panel__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 18px;
}
.admin-panel__header strong {
  color: #fff0cb;
  font-size: 30px;
}
.admin-panel__header span {
  color: #d7ccb8;
  text-align: right;
  line-height: 1.6;
}
.admin-stat-list {
  display: grid;
  gap: 12px;
}
.admin-stat-list__item {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(255, 235, 198, 0.05);
  border: 1px solid rgba(255, 225, 150, 0.08);
}
.admin-stat-list__item span {
  color: #d7ccb8;
}
.admin-stat-list__item strong {
  color: #fff0c7;
  text-align: right;
}
.admin-form {
  display: grid;
  gap: 14px;
}
.admin-form--inline {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}
.admin-form--compact {
  margin-top: 12px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 225, 150, 0.08);
}
.admin-form__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.admin-input,
.admin-textarea,
.register-form__field select,
.register-form__field textarea {
  width: 100%;
  min-height: 54px;
  padding: 14px 16px;
  border: 1px solid rgba(255, 219, 138, 0.18);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.06);
  color: #fff3cf;
  font-family: Roboto, sans-serif;
  font-size: 15px;
}
.admin-textarea,
.register-form__field textarea {
  min-height: 120px;
  resize: vertical;
}
.admin-input::placeholder,
.admin-textarea::placeholder {
  color: rgba(255, 237, 202, 0.52);
}
.admin-button {
  min-height: 52px;
  padding: 0 20px;
  border: 0;
  border-radius: 16px;
  background:
    linear-gradient(180deg, #ffe7a3 0%, #ffbf47 48%, #a64d11 100%);
  color: #5d2405;
  font-family: Roboto, sans-serif;
  font-weight: 700;
  cursor: pointer;
}
.admin-button--ghost {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 231, 171, 0.18);
  color: #f5e1b3;
}
.admin-button--danger {
  background: linear-gradient(180deg, #ffb39c 0%, #e96d4f 48%, #8f2613 100%);
  color: #fff4eb;
}
.admin-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.admin-player-picker {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.admin-player-picker__item {
  display: grid;
  gap: 6px;
  padding: 16px;
  border-radius: 18px;
  background: rgba(255, 235, 198, 0.05);
  border: 1px solid rgba(255, 225, 150, 0.08);
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.admin-player-picker__item:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 214, 112, 0.28);
}
.admin-player-picker__item.is-active {
  background:
    linear-gradient(180deg, rgba(255, 227, 151, 0.18), rgba(255, 177, 77, 0.12)),
    rgba(255, 235, 198, 0.05);
  border-color: rgba(255, 214, 112, 0.4);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
}
.admin-player-picker__item strong {
  color: #fff0cb;
  font-size: 22px;
}
.admin-player-picker__item span,
.admin-player-picker__item small {
  color: #d7ccb8;
  font-family: Roboto, sans-serif;
}
.admin-material-reference {
  display: grid;
  gap: 12px;
  padding: 16px;
  border-radius: 18px;
  background: rgba(255, 235, 198, 0.04);
  border: 1px solid rgba(255, 225, 150, 0.08);
}
.admin-material-reference strong {
  color: #fff0cb;
  font-size: 22px;
}
.admin-material-reference__groups {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.admin-material-reference__group {
  padding: 14px;
  border-radius: 16px;
  background: rgba(255, 235, 198, 0.05);
  border: 1px solid rgba(255, 225, 150, 0.08);
}
.admin-material-reference__group span {
  display: block;
  margin-bottom: 8px;
  color: #ffe19a;
  font-family: Roboto, sans-serif;
  font-weight: 700;
}
.admin-material-reference__group ul {
  margin: 0;
  padding-left: 18px;
  color: #e8dbc2;
  font-family: Roboto, sans-serif;
  line-height: 1.7;
}
.admin-material-reference__group li + li {
  margin-top: 4px;
}
.admin-form--password {
  flex: 1 1 420px;
}
.admin-form--password .admin-input {
  min-width: 220px;
}
.admin-search {
  display: flex;
  gap: 12px;
}
.admin-online-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.admin-online-card {
  display: grid;
  gap: 6px;
  padding: 16px;
  border-radius: 18px;
  background: rgba(255, 231, 171, 0.05);
  border: 1px solid rgba(255, 231, 171, 0.1);
}
.admin-online-card strong {
  color: #fff0cb;
  font-size: 22px;
}
.admin-online-card span,
.admin-online-card small {
  color: #d7ccb8;
}
.admin-list,
.admin-announcements,
.admin-player-list,
.admin-queue,
.admin-log-table {
  display: grid;
  gap: 12px;
}
.admin-list__item,
.admin-announcement-card,
.admin-player-card,
.admin-queue__item,
.admin-log-table__row {
  padding: 16px;
  border-radius: 18px;
  background: rgba(255, 235, 198, 0.05);
  border: 1px solid rgba(255, 225, 150, 0.08);
}
.admin-list__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
}
.admin-list__item strong {
  display: block;
  color: #fff0c7;
}
.admin-list__item span,
.admin-list__item small {
  color: #d7ccb8;
}
.admin-announcement-card__head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.admin-announcement-card__head strong {
  display: block;
  color: #fff0cb;
  font-size: 24px;
}
.admin-announcement-card__head span {
  color: #d7ccb8;
}
.admin-announcement-card p {
  margin: 0;
  color: #e8dbc2;
  line-height: 1.7;
}
.post-detail-card {
  padding: 28px;
}
.post-detail-card__content {
  display: grid;
  gap: 14px;
}
.post-detail-card__content p {
  margin: 0;
  color: #e8dbc2;
  font-family: Roboto, sans-serif;
  line-height: 1.8;
  white-space: pre-wrap;
}
.admin-queue__item {
  display: grid;
  gap: 16px;
}
.admin-queue__info {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.admin-queue__info span {
  display: block;
  color: #d7ccb8;
  margin-bottom: 4px;
}
.admin-queue__info strong {
  color: #fff0cb;
}
.admin-player-card {
  display: grid;
  gap: 16px;
}
.admin-player-card__summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.admin-player-card__summary span {
  display: block;
  color: #d7ccb8;
  margin-bottom: 4px;
  font-family: Roboto, sans-serif;
}
.admin-player-card__summary strong {
  color: #fff0cb;
  font-family: Roboto, sans-serif;
}
.admin-player-card__actions {
  display: grid;
  gap: 12px;
}
.admin-log-table__row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.admin-log-table__row span {
  display: block;
  color: #d7ccb8;
  margin-bottom: 4px;
}
.admin-log-table__row strong {
  color: #fff0cb;
}
.admin-log-table__detail {
  grid-column: 1 / -1;
  color: #e8dbc2;
  line-height: 1.7;
}
.admin-empty {
  padding: 18px;
  border-radius: 18px;
  background: rgba(255, 235, 198, 0.05);
  border: 1px solid rgba(255, 225, 150, 0.08);
  color: #e8dbc2;
  line-height: 1.7;
}

/* ===== MOBILE HEADER BUTTONS ===== */
.header {
  display: flex;
  justify-content: center;
  position: absolute;
  top: 1404px;
  z-index: 99;
}
.header a { display: inline-block; }
.header img { max-width: 100%; height: auto; }
.header .btn-group1, .header .btn-group2 { width: 272px; }
@media (min-width: 961px) {
  .header { display: none !important; }
}

/* ===== MOBILE OVERRIDES ===== */
@media (max-width: 960px) {
  .desktop { display: none !important; }
  .mobile { display: block !important; }
  .wrapper { width: 960px; }
  .section1 { width: 100%; height: 1590px; position: relative; }
  .section1 .btn-group-download { display: none !important; }
  .section1 .art { top: 624px; }
  .section2 { width: 100%; height: 1410px; position: relative; }
  .section2 .art-page2 { position: absolute; bottom: 30px; left: -90px; z-index: 26; animation: ani2 5s linear infinite; }
  .posts-content { margin: 20px 10px; max-width: 95%; padding: 8% 15%; aspect-ratio: auto; height: 1200px; }
  .btn-h { flex-direction: row; justify-content: space-between; align-items: center; gap: 20px; margin-top: 75px; margin-bottom: 25px; }
  .select-tin { width: auto; text-align: center; font-size: 19px; padding: 8px 12px; flex: 0 1 0%; min-width: auto; border: none; }
  .post2 a { padding: 3.41% 2%; font-size: 24px; }
  .btn-h2 { max-height: 900px; overflow-y: auto; }
  .section3 { height: 380px; position: relative; z-index: 50; background-color: #992825; }
  .footer-content { font-size: 24px; }
  .footer-text { line-height: 30px; }
  .header { position: fixed; top: 1370px; left: 20px; padding: 10px; z-index: 999; }
  .bg-bottom-img { display: none; }
  .light { display: none; }
  .register-page {
    padding: 18px 12px 32px;
    background-position: 56% 0;
  }
  .register-page__topbar {
    flex-direction: column;
    align-items: stretch;
  }
  .register-page__brand {
    justify-content: center;
  }
  .register-page__brand span {
    font-size: 28px;
  }
  .register-page__card {
    grid-template-columns: 1fr;
    padding: 18px;
    border-radius: 22px;
  }
  .login-page__card {
    grid-template-columns: 1fr;
    padding: 18px;
    border-radius: 22px;
  }
  .register-page__intro {
    padding: 8px 4px 0;
  }
  .register-page__intro h1 {
    font-size: 38px;
  }
  .register-form {
    padding: 16px;
  }
  .register-form__grid {
    grid-template-columns: 1fr;
  }
  .register-form__actions {
    flex-direction: column;
    align-items: stretch;
  }
  .register-form__submit,
  .register-page__backlink,
  .register-form__ghost {
    width: 100%;
  }
  .account-page {
    padding: 18px 12px 32px;
    background-position: 56% 0;
  }
  .account-page__hero {
    flex-direction: column;
    align-items: stretch;
    padding: 18px;
    border-radius: 22px;
  }
  .account-page__hero h1 {
    font-size: 38px;
  }
  .account-page__hero-status {
    min-width: 0;
  }
  .account-page__grid {
    grid-template-columns: 1fr;
  }
  .account-card {
    padding: 18px;
  }
  .account-card__header {
    flex-direction: column;
  }
  .account-card__header strong {
    text-align: left;
    font-size: 26px;
  }
  .account-stat-list__item {
    flex-direction: column;
    align-items: flex-start;
  }
  .account-stat-list__item strong {
    text-align: left;
  }
  .account-metric-grid {
    grid-template-columns: 1fr;
  }
  .account-announcement__meta {
    flex-direction: column;
  }
  .account-announcement__meta span {
    white-space: normal;
  }
  .admin-login-page {
    padding: 18px 12px 32px;
    background-position: 56% 0;
  }
  .admin-login-page__card {
    grid-template-columns: 1fr;
    padding: 18px;
    border-radius: 22px;
  }
  .admin-page__shell {
    grid-template-columns: 1fr;
    padding: 18px 12px 32px;
  }
  .admin-sidebar {
    position: static;
    padding: 18px;
    border-radius: 22px;
  }
  .admin-header {
    padding: 18px;
    border-radius: 22px;
  }
  .admin-header h1 {
    font-size: 38px;
  }
  .admin-grid,
  .admin-grid--summary,
  .admin-material-reference__groups,
  .admin-player-picker,
  .admin-online-grid,
  .admin-queue__info,
  .admin-player-card__summary,
  .admin-log-table__row,
  .admin-form__grid {
    grid-template-columns: 1fr;
  }
  .admin-panel__header,
  .admin-announcement-card__head,
  .admin-search,
  .admin-list__item,
  .admin-stat-list__item {
    flex-direction: column;
    align-items: flex-start;
  }
  .admin-panel__header span {
    text-align: left;
  }
  .admin-form--inline,
  .admin-actions-row {
    flex-direction: column;
    align-items: stretch;
  }
  .admin-button,
  .admin-input {
    width: 100%;
  }
}

@media (min-width: 2000px) {
  .wrapper { transform-origin: center top; position: relative; }
}

/* ===== KEYFRAMES ===== */
@keyframes moveYDiv1 {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0px); }
}
@keyframes light {
  0% { left: 0; bottom: -50%; }
  100% { left: 0; bottom: 60%; opacity: 0.5; }
}
@keyframes fadeleft {
  0% { right: -200px; opacity: 0; }
  100% { right: 0; opacity: 1; }
}
@keyframes fadeup {
  0% { top: 860px; opacity: 0; }
  100% { top: 760px; opacity: 1; }
}
@keyframes ani2 {
  0% { left: 400px; }
  30% { left: 420px; }
  60% { left: 410px; }
  100% { left: 400px; }
}
@keyframes ani1 {
  0% { left: -70px; }
  50% { left: -110px; }
  100% { left: -70px; }
}
@keyframes toastSlideDown {
  from { transform: translateY(-100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}