/* =====================================================
   STYLE.html — ORGANIZED STEP 1
   ระบบห้องเรียนอัจฉริยะ ปีการศึกษา 2569

   หลักการรอบนี้:
   - คง CSS เดิมไว้ให้มากที่สุดเพื่อไม่ให้หน้าเว็บพัง
   - เพิ่มสารบัญและหัวข้อกำกับ เพื่อแก้/เพิ่มฟังก์ชันได้ง่ายขึ้น
   - เพิ่ม CSS เฉพาะแท็บ "คะแนนของฉัน" ให้เรียง 2 คอลัมน์ชัดเจน

   สารบัญโดยรวม:
   01 ROOT / RESET / COMMON
   02 PAGE LOADER
   03 PUBLIC PAGE / DASHBOARD
   04 BUTTONS / STAT CARDS / PANELS
   05 LOGIN / MODAL
   06 TEACHER PAGE -> moved to TeacherStyle.html
   07 STUDENT PAGE -> moved to StudentStyle.html
   08 STUDENT E-PORTFOLIO -> moved to StudentStyle.html
   09 STUDENT SCORE TAB -> moved to StudentStyle.html
   10 RANK / REWARD / REPORT
   11 RESPONSIVE
===================================================== */

:root {
  --bg: #f7f9fc;
  --card: #ffffff;
  --text: #1e293b;
  --muted: #64748b;
  --line: #e2e8f0;

  --blue: #2563eb;
  --sky: #0ea5e9;
  --green: #16a34a;
  --yellow: #f59e0b;
  --red: #dc2626;
  --pink: #db2777;

  --soft-blue: #eff6ff;
  --soft-green: #ecfdf5;
  --soft-yellow: #fffbeb;
  --soft-red: #fef2f2;
  --soft-pink: #fff0f6;

  --radius: 18px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'Sarabun', sans-serif;
  background: var(--bg);
  color: var(--text);
}

button,
input,
select,
textarea {
  font-family: 'Sarabun', sans-serif;
}

.hidden {
  display: none !important;
}

/* =========================
   PAGE LOADER
========================= */

.page-loader {
  position: fixed;
  inset: 0;
  background: rgba(248, 250, 252, .92);
  display: grid;
  place-items: center;
  z-index: 9999;
}

.loader-card {
  width: min(360px, calc(100% - 32px));
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 24px;
  padding: 28px;
  text-align: center;
}

.loader-card h3 {
  margin: 14px 0 4px;
  font-size:22px;
}

.loader-card p {
  margin: 0;
  color: #64748b;
}

.loader-spinner {
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 5px solid #dbeafe;
  border-top-color: #2563eb;
  margin: 0 auto;
  animation: spinLoader .8s linear infinite;
}

@keyframes spinLoader {
  to {
    transform: rotate(360deg);
  }
}

/* =========================
   PUBLIC PAGE
========================= */

.public-page {
  min-height: 100vh;
}

.hero {
  background: #ffffff;
  border-bottom: 1px solid var(--line);
  padding: 22px 32px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
}

.hero-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.school-logo {
  width: 72px;
  height: 72px;
  object-fit: contain;
}

.hero h1 {
  margin: 0;
  font-size:28px;
  font-weight: 700;
}

.hero p {
  margin: 4px 0 0;
  color: var(--muted);
}

.hero-login {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.public-container {
  width: min(1180px, calc(100% - 32px));
  margin: 24px auto;
}

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 16px;
  margin-bottom: 16px;
}

.section-head h2 {
  margin: 0;
  font-size:24px;
}

.section-head p {
  margin: 4px 0 0;
  color: var(--muted);
}

/* =========================
   BUTTONS
========================= */

.btn {
  border: 0;
  border-radius: 999px;
  padding: 11px 18px;
  cursor: pointer;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  transition: .15s;
  white-space: nowrap;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn-primary {
  background: var(--blue);
  color: #fff;
}

.btn-outline {
  background: #fff;
  color: var(--blue);
  border: 1px solid #bfdbfe;
}

.btn-soft {
  background: var(--soft-blue);
  color: var(--blue);
  border: 1px solid #dbeafe;
}

.btn-danger {
  background: var(--red);
  color: #fff;
}

.full {
  width: 100%;
}

/* =========================
   STAT CARDS
========================= */

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.stat-card {
  position: relative;
  overflow: hidden;
  min-height: 142px;
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
}

.stat-card::after {
  content: "";
  position: absolute;
  right: -36px;
  bottom: -36px;
  width: 120px;
  height: 120px;
  border-radius: 999px;
  opacity: .18;
}

.stat-card .stat-icon {
  width: 58px;
  height: 58px;
  border-radius: 20px;
  display: grid;
  place-items: center;
  margin-bottom: 0;
  font-size:25px;
  background: rgba(255, 255, 255, .65);
  flex: 0 0 auto;
}

.stat-card h3 {
  margin: 0;
  font-size:34px;
  line-height: 1;
}

.stat-card p {
  margin: 5px 0 0;
  color: var(--muted);
}

.stat-blue {
  background: #eaf3ff;
  border-color: #bfdbfe;
}

.stat-blue .stat-icon,
.stat-blue h3 {
  color: #2563eb;
}

.stat-blue::after {
  background: #2563eb;
}

.stat-green {
  background: #eafff3;
  border-color: #bbf7d0;
}

.stat-green .stat-icon,
.stat-green h3 {
  color: #16a34a;
}

.stat-green::after {
  background: #16a34a;
}

.stat-yellow {
  background: #fff8df;
  border-color: #fde68a;
}

.stat-yellow .stat-icon,
.stat-yellow h3 {
  color: #f59e0b;
}

.stat-yellow::after {
  background: #f59e0b;
}

.stat-pink {
  background: #fff0f6;
  border-color: #fbcfe8;
}

.stat-pink .stat-icon,
.stat-pink h3 {
  color: #db2777;
}

.stat-pink::after {
  background: #db2777;
}

.stat-red {
  background: #fff1f2;
  border-color: #fecdd3;
}

.stat-red .stat-icon,
.stat-red h3 {
  color: #e11d48;
}

.stat-red::after {
  background: #e11d48;
}

/* เผื่อโค้ดเก่ายังเรียก bg-* */
.bg-blue {
  background: var(--soft-blue);
  color: var(--blue);
}

.bg-green {
  background: var(--soft-green);
  color: var(--green);
}

.bg-yellow {
  background: var(--soft-yellow);
  color: var(--yellow);
}

.bg-red {
  background: var(--soft-red);
  color: var(--red);
}

/* =========================
   PANELS / LISTS
========================= */

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 18px;
}

.panel {
  background: var(--card);
  border: 1px solid #dbeafe;
  border-radius: var(--radius);
  padding: 18px;
}

.panel-title {
  font-weight: 700;
  font-size:18px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.panel-title i {
  color: #2563eb;
}

.class-item,
.rank-item,
.event-item {
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 10px;
  background: #fff;
}

.class-item {
  border: 0;
  background: #ffffff;
  position: relative;
  padding-left: 18px;
}

.class-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 5px;
  border-radius: 999px;
  background: #2563eb;
}

.class-item:nth-child(2)::before {
  background: #16a34a;
}

.class-item:nth-child(3)::before {
  background: #f59e0b;
}

.class-item:nth-child(4)::before {
  background: #db2777;
}

.class-item:hover,
.rank-item:hover,
.event-item:hover {
  background: #f8fbff;
}

.rank-item {
  border: 0;
  background: #fffaf0;
  position: relative;
}

.rank-item:nth-child(1) {
  background: #fff8df;
}

.rank-item:nth-child(2) {
  background: #eff6ff;
}

.rank-item:nth-child(3) {
  background: #ecfdf5;
}

.rank-item:nth-child(4),
.rank-item:nth-child(5) {
  background: #fff0f6;
}

.event-item {
  border: 1px solid var(--line);
}

.class-top,
.rank-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.class-name,
.rank-name {
  font-weight: 700;
}

.rank-name::before {
  color: #f59e0b;
}

.class-meta,
.rank-meta,
.event-meta {
  color: var(--muted);
  font-size:14px;
}

.score-plus {
  color: var(--green);
  font-weight: 700;
}

.score-minus {
  color: var(--red);
  font-weight: 700;
}

/* =========================
   FOOTER
========================= */

.footer {
  border-top: 1px solid var(--line);
  color: var(--muted);
  text-align: center;
  padding: 14px;
  font-size:13px;
  background: #fff;
}

/* =========================
   MODAL
========================= */

.modal {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .42);
  display: grid;
  place-items: center;
  z-index: 50;
  padding: 16px;
}

.modal-card {
  width: min(420px, 100%);
  background: #fff;
  border-radius: 24px;
  padding: 24px;
  position: relative;
}

.modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: #f1f5f9;
  cursor: pointer;
}

.login-icon {
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  border-radius: 22px;
  background: var(--soft-blue);
  color: var(--blue);
  font-size:30px;
  margin-bottom: 12px;
}

.login-card h3 {
  margin: 0;
  font-size:24px;
}

.login-card p {
  margin: 4px 0 18px;
  color: var(--muted);
}

label {
  display: block;
  margin: 12px 0 6px;
  font-weight: 600;
}

.input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 11px 13px;
  outline: none;
  background: #fff;
}

.input:focus {
  border-color: #93c5fd;
}

.textarea {
  min-height: 90px;
  resize: vertical;
}


.form-panel {
  margin-bottom: 18px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
}

.toolbar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin: 14px 0;
}















/* =========================
   RESPONSIVE
========================= */

@media (max-width: 860px) {
  .hero,
  .section-head {
    flex-direction: column;
    align-items: stretch;
  }

  .grid-2 {
    grid-template-columns: 1fr;
  }
}
.panel-title.title-star {
  color: #f59e0b;
}

.panel-title.title-star i {
  color: #f59e0b;
}
/* =====================================================
   INDEX DASHBOARD DECORATION - สดใส ไม่ใช้เงา
   ใช้กับหน้า Index เท่านั้น
===================================================== */

/* ---------- การ์ดสถิติ 4 ใบบน ---------- */
.public-page .stat-card {
  position: relative;
  overflow: hidden;
  border-width: 1.5px;
  transition:
    transform .18s ease,
    border-color .18s ease,
    background-color .18s ease,
    filter .18s ease;
}

.public-page .stat-card:hover {
  transform: translateY(-5px) scale(1.01);
  filter: saturate(1.12);
}

/* วงกลมตกแต่งมุมขวา ขยับเบา ๆ */
.public-page .stat-card::after {
  content: "";
  position: absolute;
  right: -22px;
  bottom: -28px;
  width: 112px;
  height: 112px;
  border-radius: 999px;
  opacity: .34;
  transition: transform .2s ease, opacity .2s ease;
}

.public-page .stat-card:hover::after {
  transform: scale(1.16) translate(-5px, -5px);
  opacity: .46;
}

.public-page .stat-blue {
  background: #eff6ff;
  border-color: #93c5fd;
}

.public-page .stat-blue::after {
  background: #bfdbfe;
}

.public-page .stat-green {
  background: #ecfdf5;
  border-color: #86efac;
}

.public-page .stat-green::after {
  background: #bbf7d0;
}

.public-page .stat-yellow {
  background: #fffbeb;
  border-color: #fcd34d;
}

.public-page .stat-yellow::after {
  background: #fde68a;
}

.public-page .stat-pink,
.public-page .stat-red {
  background: #fdf2f8;
  border-color: #f9a8d4;
}

.public-page .stat-pink::after,
.public-page .stat-red::after {
  background: #fbcfe8;
}

/* ไอคอนในการ์ดให้ดูเด่นขึ้น */
.public-page .stat-icon {
  transition: transform .18s ease, background-color .18s ease;
}

.public-page .stat-card:hover .stat-icon {
  transform: rotate(-4deg) scale(1.08);
}

/* ---------- กล่องใหญ่ 3 ส่วน ---------- */
.public-page .grid-2 .panel,
.public-page main.public-container > .panel {
  position: relative;
  overflow: hidden;
  transition:
    transform .18s ease,
    border-color .18s ease,
    background-color .18s ease;
}

/* คะแนนพลังบวกรายห้อง */
.public-page .grid-2 .panel:nth-child(1) {
  border-left: 6px solid #2563eb;
  background: #ffffff;
}

.public-page .grid-2 .panel:nth-child(1):hover {
  transform: translateY(-3px);
  border-color: #60a5fa;
  background: #f8fbff;
}

/* นักเรียนดาวเด่น */
.public-page .grid-2 .panel:nth-child(2) {
  border-left: 6px solid #f59e0b;
  background: #ffffff;
}

.public-page .grid-2 .panel:nth-child(2):hover {
  transform: translateY(-3px);
  border-color: #fbbf24;
  background: #fffaf0;
}

/* ความสำเร็จล่าสุด */
.public-page main.public-container > .panel {
  border-left: 6px solid #10b981;
  background: #ffffff;
}

.public-page main.public-container > .panel:hover {
  transform: translateY(-3px);
  border-color: #34d399;
  background: #f7fffb;
}

/* ---------- หัวข้อ panel ให้มีชีวิตขึ้น ---------- */
.public-page .panel-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.public-page .panel-title i {
  width: 30px;
  height: 30px;
  border-radius: 12px;
  display: inline-grid;
  place-items: center;
  background: #eff6ff;
  color: #2563eb;
  transition: transform .18s ease, background-color .18s ease;
}

.public-page .panel:hover .panel-title i {
  transform: rotate(-5deg) scale(1.08);
}

.public-page .panel-title.title-star i {
  background: #fffbeb;
  color: #f59e0b;
}

/* ความสำเร็จล่าสุดใช้สีเขียว */
.public-page main.public-container > .panel .panel-title i {
  background: #ecfdf5;
  color: #059669;
}

/* ---------- รายการห้องเรียนพลังบวก ---------- */
.public-page .class-item {
  border-radius: 16px;
  padding: 22px 16px 14px;
  margin-bottom: 10px;
  border: 1px solid transparent;
  transition:
    transform .16s ease,
    background-color .16s ease,
    border-color .16s ease,
    padding-left .16s ease;
}

.public-page .class-item:hover {
  transform: translateX(6px);
  padding-left: 22px;
  background: #f0f7ff;
  border-color: #bfdbfe;
}

/* ให้แถบสีซ้ายเด่นขึ้นเวลา hover */
.public-page .class-item::before {
  transition: height .16s ease, width .16s ease;
}

.public-page .class-item:hover::before {
  width: 7px;
  height: 75%;
}

/* ---------- รายการนักเรียนดาวเด่น ---------- */
.public-page .rank-item {
  border: 1px solid transparent;
  transition:
    transform .16s ease,
    background-color .16s ease,
    border-color .16s ease;
}

.public-page .rank-item:hover {
  transform: translateX(6px) scale(1.01);
  border-color: #fcd34d;
  background: #fff7db;
}

/* อันดับ 1 ให้เด่นกว่าเพื่อน */
.public-page .rank-item:first-child {
  border: 1.5px solid #fcd34d;
  background: #fff7db;
}

.public-page .rank-item:first-child::before {
  content: "TOP";
  position: absolute;
  right: 14px;
  top: 8px;
  font-size:13px;
  font-weight: 800;
  color: #b45309;
  background: #fde68a;
  padding: 2px 8px;
  border-radius: 999px;
}

/* ต้องมี position ให้ TOP วางได้ */
.public-page .rank-item {
  position: relative;
}

/* ---------- ความสำเร็จล่าสุด ---------- */
.public-page .event-item {
  border: 1px solid #dbeafe;
  transition:
    transform .16s ease,
    background-color .16s ease,
    border-color .16s ease;
}

.public-page .event-item:hover {
  transform: translateX(6px);
  background: #ecfdf5;
  border-color: #86efac;
}

/* คะแนน + ให้เด่นขึ้น */
.public-page .score-plus {
  font-weight: 800;
  color: #059669;
}

/* ---------- ปุ่มรีเฟรชให้ดูมีลูกเล่น ---------- */
.public-page .btn-soft {
  transition:
    transform .16s ease,
    background-color .16s ease,
    border-color .16s ease;
}

.public-page .btn-soft:hover {
  transform: translateY(-2px);
  background: #eff6ff;
  border-color: #93c5fd;
}

.public-page .btn-soft:hover i {
  animation: softRotate .7s ease;
}

@keyframes softRotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(180deg);
  }
}

/* ---------- ปุ่มเข้าสู่ระบบ ---------- */
.public-page .hero-login .btn {
  transition:
    transform .16s ease,
    background-color .16s ease,
    border-color .16s ease;
}

.public-page .hero-login .btn:hover {
  transform: translateY(-3px);
}

/* ---------- กัน motion สำหรับคนไม่ชอบ animation ---------- */
@media (prefers-reduced-motion: reduce) {
  .public-page .stat-card,
  .public-page .panel,
  .public-page .class-item,
  .public-page .rank-item,
  .public-page .event-item,
  .public-page .btn {
    transition: none;
  }

  .public-page .stat-card:hover,
  .public-page .panel:hover,
  .public-page .class-item:hover,
  .public-page .rank-item:hover,
  .public-page .event-item:hover,
  .public-page .btn:hover {
    transform: none;
  }
}

/* Teacher behavior/student check styles moved to TeacherStyle.html */
.rank-item-badge {
  display: flex;
  align-items: center;
  gap: 12px;
}

.rank-badge-img {
  width: 68px;
  height: 68px;
  object-fit: contain;
  flex: 0 0 auto;
  filter: drop-shadow(0 6px 10px rgba(15, 23, 42, .18));
}

.rank-content {
  flex: 1;
  min-width: 0;
}

.rank-badge-name {
  margin-top: 4px;
  font-weight: 900;
  letter-spacing: .8px;
  font-size:14px;
  text-transform: uppercase;
}

.rank-item-badge:hover .rank-badge-img {
  transform: scale(1.08) rotate(-2deg);
}

.rank-badge-img {
  transition: .18s ease;
}
.rank-title-row {
  justify-content: space-between;
}

.rank-title-row span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.rank-rule-btn {
  border: 1px solid #fde68a;
  background: #fff8df;
  color: #b45309;
  border-radius: 999px;
  padding: 6px 12px;
  font-size:13px;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: .15s ease;
}

.rank-rule-btn:hover {
  transform: translateY(-1px);
  background: #fef3c7;
}

.rank-rule-box {
  text-align: left;
  color: #1e293b;
  line-height: 1.75;
}

.rank-rule-intro {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1d4ed8;
  padding: 12px 14px;
  border-radius: 16px;
  margin-bottom: 14px;
  font-weight: 600;
}

.rank-rule-box h4 {
  margin: 14px 0 8px;
  font-size:16px;
  color: #0f172a;
}

.rank-rule-formula {
  background: #fff8df;
  border: 1px solid #fde68a;
  color: #92400e;
  padding: 10px 14px;
  border-radius: 14px;
  font-weight: 800;
  text-align: center;
}

.rank-rule-box ol {
  margin: 0;
  padding-left: 22px;
}

.rank-rule-levels {
  display: grid;
  gap: 8px;
}

.rank-rule-levels div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  border-radius: 12px;
  padding: 8px 12px;
}

.rank-rule-levels b {
  color: #7c3aed;
}

.rank-rule-levels span {
  color: #64748b;
}

.rank-rule-note {
  margin-top: 14px;
  background: #f8fafc;
  border-left: 5px solid #f59e0b;
  padding: 10px 14px;
  border-radius: 12px;
  color: #475569;
}


/* =========================
   TR107 RANK BOARD
========================= */

/* ปิดป้าย TOP เดิมที่ทับคะแนน */
.public-page .rank-item:first-child::before,
.teacher-view .rank-item:first-child::before {
  content: none !important;
  display: none !important;
}

.rank-title-row {
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.rank-title-row span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.tr107-rank-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 92px;
  padding: 22px 16px 14px;
  border: 1px solid #e2e8f0;
  overflow: hidden;
  transition: transform .18s ease, border-color .18s ease, background-color .18s ease;
}

.tr107-rank-card:hover {
  transform: translateX(5px) scale(1.01);
}

.tr107-rank-card.rank-top-1 {
  border-color: #f59e0b;
  background: #fff7db;
  box-shadow: inset 5px 0 0 #f59e0b;
}

.tr107-rank-card.rank-top-2 {
  border-color: #bfdbfe;
  background: #eff6ff;
  box-shadow: inset 5px 0 0 #3b82f6;
}

.tr107-rank-card.rank-top-3 {
  border-color: #bbf7d0;
  background: #ecfdf5;
  box-shadow: inset 5px 0 0 #22c55e;
}

.rank-order {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .8);
  border: 1px solid rgba(245, 158, 11, .35);
  display: grid;
  place-items: center;
  font-weight: 900;
  color: #92400e;
  flex: 0 0 auto;
}

.top-server-ribbon {
  position: absolute;
  top: 8px;
  right: 16px;
  z-index: 4;

  display: inline-flex;
  align-items: center;
  gap: 6px;

  padding: 5px 13px;
  border-radius: 999px;

  background: #fff7d6;
  border: 1px solid #facc15;
  color: #a16207;

  font-size:13px;
  font-weight: 900;
  letter-spacing: .7px;
  text-transform: uppercase;

  box-shadow: 0 8px 18px rgba(245, 158, 11, .20);
}

.top-server-ribbon::before {
  content: "\f091";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: #f59e0b;
}

.rank-score-pill {
  margin-top: 20px;
  margin-left: auto;
  min-width: 76px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(226, 232, 240, .95);
  padding: 8px 10px;
  text-align: center;
  flex: 0 0 auto;
}

.rank-score-pill span {
  display: block;
  color: #059669;
  font-size:20px;
  line-height: 1;
  font-weight: 900;
}

.rank-score-pill small {
  display: block;
  margin-top: 3px;
  color: #64748b;
  font-size:13px;
  line-height: 1.1;
}

.rank-badge-img {
  width: 62px;
  height: 62px;
  object-fit: contain;
  flex: 0 0 auto;
  filter: drop-shadow(0 7px 12px rgba(15, 23, 42, .18));
  transition: .18s ease;
}

.tr107-rank-card:hover .rank-badge-img {
  transform: scale(1.08) rotate(-2deg);
}

.rank-badge-name {
  margin-top: 4px;
  font-weight: 900;
  letter-spacing: .9px;
  font-size:13px;
  text-transform: uppercase;
}

.rank-rule-btn {
  border: 1px solid #fde68a;
  background: #fff8df;
  color: #b45309;
  border-radius: 999px;
  padding: 6px 12px;
  font-size:13px;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: .15s ease;
}

.rank-rule-btn:hover {
  transform: translateY(-1px);
  background: #fef3c7;
}

.rank-rule-box {
  text-align: left;
  color: #1e293b;
  line-height: 1.75;
}

.rank-rule-intro {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1d4ed8;
  padding: 12px 14px;
  border-radius: 16px;
  margin-bottom: 14px;
  font-weight: 600;
}

.rank-rule-box h4 {
  margin: 14px 0 8px;
  font-size:16px;
  color: #0f172a;
}

.rank-rule-formula {
  background: #fff8df;
  border: 1px solid #fde68a;
  color: #92400e;
  padding: 10px 14px;
  border-radius: 14px;
  font-weight: 800;
  text-align: center;
}

.rank-rule-box ol {
  margin: 0;
  padding-left: 22px;
}

.rank-rule-levels {
  display: grid;
  gap: 8px;
}

.rank-rule-levels div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  border-radius: 12px;
  padding: 8px 12px;
}

.rank-rule-levels b {
  color: #7c3aed;
}

.rank-rule-levels span {
  color: #64748b;
}

.rank-rule-note {
  margin-top: 14px;
  background: #f8fafc;
  border-left: 5px solid #f59e0b;
  padding: 10px 14px;
  border-radius: 12px;
  color: #475569;
}

@media (max-width: 640px) {
  .tr107-rank-card {
  padding-top: 22px;
    align-items: flex-start;
    padding-top: 34px;
  }
  .rank-score-pill {
  margin-top: 20px;
    min-width: 62px;
  }
  .rank-badge-img {
    width: 52px;
    height: 52px;
  }
}

/* =========================
   CLASSROOM PLUS+
========================= */

.classroom-plus-grid {
  display: grid;
  gap: 12px;
}

.classroom-plus-card {
  position: relative;
  overflow: hidden;
  border: 1px solid #dbeafe;
  background: #ffffff;
  border-radius: 18px;
  padding: 14px;
  transition: .18s ease;
}

.classroom-plus-card::after {
  content: "";
  position: absolute;
  width: 120px;
  height: 120px;
  right: -48px;
  bottom: -56px;
  border-radius: 999px;
  background: #2563eb;
  opacity: .08;
}

.classroom-plus-card:hover {
  transform: translateY(-2px);
  border-color: #93c5fd;
  background: #f8fbff;
}

.classroom-plus-card:nth-child(2)::after {
  background: #16a34a;
}

.classroom-plus-card:nth-child(3)::after {
  background: #f59e0b;
}

.classroom-plus-card.class-leader-card {
  border-color: #facc15;
  background: #fffdf2;
}

.class-leader-badge {
  position: absolute;
  top: 12px;
  right: 16px;
  left: auto;
  z-index: 3;

  display: inline-flex;
  align-items: center;
  gap: 6px;

  padding: 5px 14px;
  border-radius: 999px;

  background: #fff3c4;
  border: 1px solid #facc15;
  color: #92400e;

  font-size:13px;
  font-weight: 900;
  letter-spacing: .8px;
  text-transform: uppercase;

  box-shadow: 0 8px 18px rgba(245, 158, 11, .22);
}

.class-leader-badge::before {
  content: "\f521";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: #f59e0b;
}
.class-leader-card .classroom-plus-head {
  padding-top: 30px;
}

.classroom-plus-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  position: relative;
  z-index: 1;
}

.classroom-plus-class {
  font-size:20px;
  font-weight: 900;
  color: #0f172a;
}

.classroom-plus-power {
  color: #2563eb;
  font-weight: 900;
  letter-spacing: .3px;
}

.classroom-plus-good {
  margin-top: 8px;
  color: #475569;
  font-weight: 700;
  position: relative;
  z-index: 1;
}

.classroom-plus-good i {
  color: #db2777;
  margin-right: 5px;
}

.classroom-plus-featured {
  margin-top: 10px;
  border: 1px solid #e2e8f0;
  background: rgba(255, 255, 255, .72);
  border-radius: 16px;
  padding: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  z-index: 1;
}

.classroom-plus-featured img {
  width: 46px;
  height: 46px;
  object-fit: contain;
  flex: 0 0 auto;
  filter: drop-shadow(0 5px 8px rgba(15, 23, 42, .15));
}

.featured-label {
  font-weight: 800;
  color: #1e293b;
}

.featured-rank {
  font-size:13px;
  font-weight: 900;
  letter-spacing: .3px;
  text-transform: uppercase;
  margin-top: 2px;
}

@media (max-width: 860px) {
  .classroom-plus-head {
    flex-direction: column;
    gap: 2px;
  }
}


/* =========================
   RANK SEASON COUNTDOWN
========================= */

.rank-season-box-wrap {
  margin: 0 0 18px;
}

.rank-season-card {
  border: 1px solid #fde68a;
  background: #fff8df;
  border-radius: 22px;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  position: relative;
  overflow: hidden;
}

.rank-season-card::after {
  content: "";
  position: absolute;
  right: -42px;
  bottom: -54px;
  width: 160px;
  height: 160px;
  border-radius: 999px;
  background: #f59e0b;
  opacity: .12;
}

.season-main,
.season-countdown-block {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  z-index: 1;
}

/* =========================
   RANK SEASON BADGE - ROYAL GAME STYLE
========================= */

.season-badge {
  position: relative;
  min-width: 118px;
  height: 58px;
  padding: 0 22px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 20px;
  border: 1px solid #facc15;

  background:
    radial-gradient(circle at 28% 18%, rgba(255, 255, 255, .95), transparent 26%),
    linear-gradient(135deg, #fff7cc 0%, #facc15 34%, #f59e0b 68%, #b45309 100%);

  color: #5f3200;
  font-size:22px;
  font-weight: 1000;
  letter-spacing: .8px;

  box-shadow:
    0 12px 24px rgba(245, 158, 11, .25),
    inset 0 1px 0 rgba(255, 255, 255, .72),
    inset 0 -8px 14px rgba(146, 64, 14, .16);

  text-shadow: 0 1px 0 rgba(255, 255, 255, .55);
  overflow: hidden;
}

.season-badge::before {
  content: "\f521";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;

  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);

  width: 28px;
  height: 28px;

  display: grid;
  place-items: center;

  border-radius: 999px;
  background: #ffffff;
  color: #f59e0b;
  border: 1px solid #fde68a;

  font-size:13px;
  box-shadow: 0 6px 14px rgba(245, 158, 11, .22);
}

.season-badge::after {
  content: "";
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      120deg,
      transparent 0%,
      transparent 32%,
      rgba(255, 255, 255, .55) 45%,
      transparent 58%,
      transparent 100%
    );

  transform: translateX(-120%);
  animation: seasonBadgeShine 2.8s ease-in-out infinite;
}

@keyframes seasonBadgeShine {
  0%, 58% {
    transform: translateX(-120%);
  }
  78%, 100% {
    transform: translateX(120%);
  }
}
.rank-season-card {
  border: 1px solid #fde68a;
  background:
    radial-gradient(circle at right bottom, rgba(245, 158, 11, .16), transparent 26%),
    linear-gradient(135deg, #fffdf2 0%, #fff8df 52%, #ffffff 100%);
  box-shadow: 0 12px 28px rgba(245, 158, 11, .12);
}

.season-code {
  color: #92400e;
  font-weight: 900;
}

.season-name,
.season-reset-text {
  color: #64748b;
}

.season-countdown {
  color: #0f172a;
  font-weight: 1000;
}

.season-code {
  font-size:18px;
  font-weight: 900;
  color: #92400e;
}

.season-name,
.season-reset-text {
  color: #64748b;
  font-size:13px;
}

.season-clock,
.season-icon {
  width: 50px;
  height: 50px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .72);
  color: #f59e0b;
  font-size:24px;
}

.season-countdown {
  font-size:26px;
  line-height: 1;
  font-weight: 900;
  color: #0f172a;
  font-variant-numeric: tabular-nums;
  letter-spacing: .4px;
}

.rank-season-empty {
  background: #f8fafc;
  border-color: #e2e8f0;
}

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

.season-ended {
  background: #fff1f2;
  border-color: #fecdd3;
}

.season-ended .season-countdown {
  color: #e11d48;
}

.rank-season-student .rank-season-card {
  margin-top: 14px;
}

@media (max-width: 860px) {
  .rank-season-card {
    align-items: stretch;
    flex-direction: column;
  }

  .season-countdown {
    font-size:22px;
  }

  .season-badge {
    min-width: 96px;
    font-size:20px;
  }
}
/* =========================
   LATEST ACHIEVEMENT FEED
========================= */

.achievement-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid #dbeafe;
  background: #ffffff;
  overflow: hidden;
  transition: .18s ease;
}

.achievement-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 5px;
  border-radius: 999px;
  background: #10b981;
}

.achievement-1 {
  background: #fffdf2;
  border-color: #fde68a;
}

.achievement-1::before {
  background: #f59e0b;
}

.achievement-2 {
  background: #f8fbff;
}

.achievement-2::before {
  background: #2563eb;
}

.achievement-3 {
  background: #f0fdf4;
}

.achievement-3::before {
  background: #22c55e;
}

.achievement-4,
.achievement-5 {
  background: #fff7fb;
}

.achievement-4::before,
.achievement-5::before {
  background: #db2777;
}

.achievement-icon {
  width: 42px;
  height: 42px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .8);
  color: #10b981;
  font-size:18px;
  flex: 0 0 auto;
}

.achievement-1 .achievement-icon {
  color: #f59e0b;
}

.achievement-2 .achievement-icon {
  color: #2563eb;
}

.achievement-3 .achievement-icon {
  color: #16a34a;
}

.achievement-4 .achievement-icon,
.achievement-5 .achievement-icon {
  color: #db2777;
}

.achievement-content {
  flex: 1;
  min-width: 0;
}

.achievement-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.achievement-meta {
  color: #64748b;
  font-size:14px;
  margin-top: 2px;
}

.achievement-score {
  flex: 0 0 auto;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid #dbeafe;
  padding: 7px 12px;
  font-weight: 800;
}

.achievement-new {
  font-size:13px;
  font-weight: 900;
  letter-spacing: .8px;
  color: #92400e;
  background: #fef3c7;
  border: 1px solid #fde68a;
  border-radius: 999px;
  padding: 2px 8px;
}

.achievement-item:hover {
  transform: translateY(-2px);
  border-color: #93c5fd;
}

.achievement-item:hover .achievement-icon {
  transform: rotate(-6deg) scale(1.08);
}

.achievement-icon {
  transition: .18s ease;
}
/* =========================
   LATEST SUCCESS - SAFE CSS ONLY
========================= */

#positiveEventList .event-item {
  position: relative;
  display: block;
  padding: 14px 18px 14px 58px;
  border: 1px solid #dbeafe;
  background: #ffffff;
  border-radius: 16px;
  overflow: hidden;
  transition: .18s ease;
}

#positiveEventList .event-item::before {
  content: "\f0d0";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: #ecfdf5;
  color: #10b981;
  font-size:15px;
}

#positiveEventList .event-item::after {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 5px;
  border-radius: 999px;
  background: #10b981;
}

#positiveEventList .event-item:nth-child(1) {
  background: #fffdf2;
  border-color: #fde68a;
}

#positiveEventList .event-item:nth-child(1)::before {
  content: "\f005";
  background: #fff8df;
  color: #f59e0b;
}

#positiveEventList .event-item:nth-child(1)::after {
  background: #f59e0b;
}

#positiveEventList .event-item:nth-child(2) {
  background: #f8fbff;
}

#positiveEventList .event-item:nth-child(2)::before {
  background: #eff6ff;
  color: #2563eb;
}

#positiveEventList .event-item:nth-child(2)::after {
  background: #2563eb;
}

#positiveEventList .event-item:nth-child(3) {
  background: #f0fdf4;
}

#positiveEventList .event-item:nth-child(3)::before {
  background: #dcfce7;
  color: #16a34a;
}

#positiveEventList .event-item:nth-child(3)::after {
  background: #22c55e;
}

#positiveEventList .event-item:nth-child(4),
#positiveEventList .event-item:nth-child(5) {
  background: #fff7fb;
}

#positiveEventList .event-item:nth-child(4)::before,
#positiveEventList .event-item:nth-child(5)::before {
  background: #fdf2f8;
  color: #db2777;
}

#positiveEventList .event-item:nth-child(4)::after,
#positiveEventList .event-item:nth-child(5)::after {
  background: #db2777;
}

#positiveEventList .event-item strong {
  display: block;
  font-size:16px;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 2px;
}

#positiveEventList .event-meta {
  font-size:14px;
  color: #64748b;
}

#positiveEventList .score-plus,
#positiveEventList .score-minus {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid #dbeafe;
  font-weight: 900;
}

#positiveEventList .event-item:hover {
  transform: translateY(-2px);
  border-color: #93c5fd;
}

#positiveEventList .event-item:hover::before {
  transform: translateY(-50%) rotate(-6deg) scale(1.08);
}
/* =========================
   GAME STYLE PAGE LOADER
========================= */

.page-loader {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at top, rgba(37, 99, 235, .10), transparent 34%),
    rgba(248, 250, 252, .94);
  display: grid;
  place-items: center;
  z-index: 9999;
}

.loader-card {
  width: min(420px, calc(100% - 32px));
  background: #ffffff;
  border: 1px solid #dbeafe;
  border-radius: 26px;
  padding: 28px;
  text-align: center;
  box-shadow: 0 18px 45px rgba(15, 23, 42, .10);
}

.loader-spinner {
  display: none;
}

.loader-card::before {
  content: "TR107";
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 74px;
  height: 74px;
  margin: 0 auto 14px;

  border-radius: 24px;
  background: #fff8df;
  border: 1px solid #fde68a;
  color: #f59e0b;

  font-weight: 900;
  letter-spacing: 1px;
  box-shadow: 0 10px 22px rgba(245, 158, 11, .18);
  animation: loaderFloat 1.4s ease-in-out infinite;
}

.loader-card h3 {
  margin: 8px 0 4px;
  font-size:22px;
  font-weight: 900;
}

.loader-card h3::after {
  content: " ...";
  animation: loadingDots 1.2s steps(4, end) infinite;
}

.loader-card p {
  margin: 0 0 18px;
  color: #64748b;
}

.loader-card::after {
  content: "";
  display: block;
  width: 100%;
  height: 12px;
  margin-top: 18px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, #bbf7d0, #86efac, #22c55e, #86efac, #bbf7d0);
  background-size: 220% 100%;
  animation: gameLoadingBar 1.15s linear infinite;
  /* box-shadow: 0 8px 20px rgba(37, 99, 235, .18); */
  box-shadow: 0 8px 20px rgba(34, 197, 94, .18); 
}

@keyframes gameLoadingBar {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 220% 50%;
  }
}

@keyframes loaderFloat {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-5px) scale(1.03);
  }
}

@keyframes loadingDots {
  0% {
    content: "";
  }
  25% {
    content: " .";
  }
  50% {
    content: " ..";
  }
  75%, 100% {
    content: " ...";
  }
}
/* =========================
   RANK RULE POPUP BADGES
========================= */

.rank-rule-box {
  text-align: left;
  color: #1e293b;
  line-height: 1.75;
}

.rank-rule-hero {
  display: flex;
  gap: 14px;
  align-items: center;
  background: #fff8df;
  border: 1px solid #fde68a;
  border-radius: 18px;
  padding: 14px;
  margin-bottom: 16px;
}

.rank-rule-hero-icon {
  width: 52px;
  height: 52px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: #ffffff;
  color: #f59e0b;
  font-size:24px;
  flex: 0 0 auto;
}

.rank-rule-hero strong {
  display: block;
  font-size:18px;
  font-weight: 900;
  color: #92400e;
}

.rank-rule-hero span {
  display: block;
  color: #64748b;
  font-size:14px;
}

.rank-rule-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
}

.rank-rule-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-left: 6px solid var(--rank-color, #f59e0b);
  border-radius: 16px;
  padding: 10px 12px;
  min-height: 74px;
}

.rank-rule-card img {
  width: 54px;
  height: 54px;
  object-fit: contain;
  flex: 0 0 auto;
  filter: drop-shadow(0 6px 10px rgba(15, 23, 42, .16));
}

.rank-rule-card strong {
  display: block;
  font-size:15px;
  font-weight: 900;
  color: var(--rank-color, #f59e0b);
  text-transform: uppercase;
  letter-spacing: .4px;
}

.rank-rule-card span {
  display: block;
  font-size:13px;
  color: #64748b;
}

.rank-rule-box h4 {
  margin: 16px 0 8px;
  font-size:16px;
  color: #0f172a;
}

.rank-rule-formula {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1d4ed8;
  padding: 10px 14px;
  border-radius: 14px;
  font-weight: 800;
  text-align: center;
}

.rank-rule-box ol {
  margin: 0;
  padding-left: 22px;
}

.rank-rule-note {
  margin-top: 14px;
  background: #f8fafc;
  border-left: 5px solid #f59e0b;
  padding: 10px 14px;
  border-radius: 12px;
  color: #475569;
}

.rank-rule-empty {
  border: 1px dashed #cbd5e1;
  background: #f8fafc;
  border-radius: 14px;
  padding: 14px;
  color: #64748b;
  text-align: center;
}
/* =====================================================
   STAT CARD PREFIX / UNIT - อีก / Pt. ขนาดเล็กลง
===================================================== */

#studentStats .stat-card h3 .stat-prefix,
#studentStats .stat-card h3 .stat-unit {
  font-size:13px;
  font-weight: 800;
  vertical-align: baseline;
  opacity: 0.85;
}

#studentStats .stat-card h3 .stat-prefix {
  margin-right: 2px;
}

#studentStats .stat-card h3 .stat-unit {
  margin-left: 2px;
}

/* Teacher-specific styles moved to TeacherStyle.html */
/* Student-specific styles moved to StudentStyle.html */
/* =====================================================
   FIX STUDENT HEADER LOGO SIZE
   แก้โลโก้บน Header นักเรียนใหญ่ผิดปกติ
===================================================== */

.student-header-clean {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 82px;
  padding: 14px 32px;
  background: #ffffff;
  border-bottom: 1px solid #e2e8f0;
}

.student-header-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.student-header-clean .student-header-logo {
  width: 58px !important;
  height: 58px !important;
  max-width: 58px !important;
  max-height: 58px !important;
  object-fit: contain !important;
  flex: 0 0 58px !important;
  display: block !important;
}

.student-header-brand-text {
  min-width: 0;
}

.student-header-brand-text strong {
  display: block;
  color: #0f172a;
  font-size:22px;
  font-weight: 900;
  line-height: 1.2;
}

.student-header-brand-text span {
  display: block;
  margin-top: 4px;
  color: #64748b;
  font-size:14px;
  font-weight: 700;
}

.student-header-clean .student-header-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}


/* =====================================================
   AppStyle.html
   รวม CSS เฉพาะหน้าหลัง Login
   - Teacher section: หน้าครู / เมนูครู / ฟอร์มครู / รายงานครู
   - Student section: หน้านักเรียน / My E-Portfolio / คะแนนของฉัน

   หมายเหตุ:
   ไฟล์นี้รวมจาก StudentStyle.html + TeacherStyle.html
   เพื่อลดจำนวนไฟล์ include ใน Index.html
===================================================== */

/* =====================================================
   01 STUDENT PAGE / STUDENT E-PORTFOLIO
===================================================== */

/* =====================================================
   StudentStyle.html
   CSS เฉพาะหน้านักเรียน / My E-Portfolio / คะแนนของฉัน
   แยกออกจาก Style.html เพื่อลดความยาวไฟล์หลัก
===================================================== */

/* =========================
   STUDENT PAGE
========================= */

.student-shell {
  min-height: 100vh;
}

.student-header {
  background: #fff;
  border-bottom: 1px solid var(--line);
  padding: 20px 32px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
}

.student-profile {
  display: flex;
  align-items: center;
  gap: 14px;
}

.student-profile img {
  width: 74px;
  height: 74px;
  border-radius: 24px;
  object-fit: cover;
  border: 1px solid var(--line);
}

.student-profile h2 {
  margin: 0;
}

.student-profile p {
  margin: 4px 0 0;
  color: var(--muted);
}

/* =========================
   STUDENT MY E-PORT
========================= */

.student-eport-panel {
  margin-bottom: 18px;
  border-left: 6px solid #f59e0b;
  background:
    radial-gradient(circle at right top, rgba(245, 158, 11, .08), transparent 28%),
    #ffffff;
}

.eport-title i {
  color: #f59e0b;
}

.eport-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

.eport-tab {
  border: 1px solid #dbeafe;
  background: #ffffff;
  color: #334155;
  border-radius: 999px;
  padding: 9px 14px;
  cursor: pointer;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: .16s ease;
}

.eport-tab:hover {
  transform: translateY(-1px);
  background: #eff6ff;
  border-color: #93c5fd;
  color: #2563eb;
}

.eport-tab.active {
  background: #fff8df;
  border-color: #facc15;
  color: #92400e;
}

.eport-tab-content {
  animation: eportFade .18s ease;
}

@keyframes eportFade {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.eport-loading {
  border: 1px dashed #cbd5e1;
  background: #f8fafc;
  color: #64748b;
  border-radius: 18px;
  padding: 20px;
  text-align: center;
}

.eport-overview-grid,
.eport-edit-grid {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 16px;
  align-items: start;
}

.eport-profile-display,
.eport-profile-card,
.eport-form-card,
.eport-info-display {
  border: 1px solid #e2e8f0;
  background: #ffffff;
  border-radius: 22px;
  padding: 16px;
}

.eport-profile-display {
  text-align: center;
}

.eport-profile-img {
  width: 168px;
  height: 168px;
  border-radius: 34px;
  object-fit: cover;
  border: 1px solid #fde68a;
  background: #f8fafc;
  box-shadow: 0 12px 24px rgba(245, 158, 11, .14);
}

.eport-student-name {
  margin-top: 12px;
  font-size:20px;
  font-weight: 900;
  color: #0f172a;
}

.eport-rank-card {
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  border: 1px solid #fde68a;
  border-left: 6px solid var(--rank-color, #f59e0b);
  background: #fff8df;
  border-radius: 18px;
  padding: 12px;
}

.eport-rank-card img {
  width: 62px;
  height: 62px;
  object-fit: contain;
  filter: drop-shadow(0 6px 10px rgba(15, 23, 42, .16));
}

.eport-rank-card span {
  display: block;
  font-size:13px;
  color: #64748b;
}

.eport-rank-card strong {
  display: block;
  font-size:18px;
  font-weight: 1000;
  color: var(--rank-color, #f59e0b);
  text-transform: uppercase;
  letter-spacing: .6px;
}

.eport-mini-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.eport-mini-stat {
  border: 1px solid #fde68a;
  background: #fff8df;
  border-radius: 18px;
  padding: 14px;
}

.eport-mini-stat strong {
  display: block;
  font-size:28px;
  line-height: 1;
  color: #f59e0b;
  font-weight: 1000;
}

.eport-mini-stat span {
  display: block;
  margin-top: 5px;
  color: #64748b;
  font-size:13px;
}

.eport-mini-stat.green {
  background: #ecfdf5;
  border-color: #bbf7d0;
}

.eport-mini-stat.green strong {
  color: #16a34a;
}

.eport-mini-stat.blue {
  background: #eff6ff;
  border-color: #bfdbfe;
}

.eport-mini-stat.blue strong {
  color: #2563eb;
}

.eport-mini-stat.red {
  background: #fff1f2;
  border-color: #fecdd3;
}

.eport-mini-stat.red strong {
  color: #e11d48;
}

.eport-text-box {
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  border-radius: 16px;
  padding: 12px 14px;
  margin-top: 10px;
}

.eport-text-box h4 {
  margin: 0 0 4px;
  font-size:15px;
  color: #0f172a;
}

.eport-text-box p {
  margin: 0;
  color: #475569;
  line-height: 1.65;
}

.eport-upload-btn {
  margin-top: 12px;
  width: 100%;
}

.eport-achievement-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  margin-bottom: 14px;
}

.eport-achievement-head h3 {
  margin: 0;
}

.eport-achievement-head p {
  margin: 3px 0 0;
  color: #64748b;
}

.eport-achievement-item {
  display: flex;
  gap: 12px;
  align-items: center;
}

.eport-achievement-item img {
  width: 72px;
  height: 72px;
  border-radius: 16px;
  object-fit: cover;
  border: 1px solid #e2e8f0;
}

@media (max-width: 860px) {
  .eport-overview-grid,
  .eport-edit-grid {
    grid-template-columns: 1fr;
  }

  .eport-profile-img {
    width: 140px;
    height: 140px;
  }

  .eport-achievement-head {
    align-items: stretch;
    flex-direction: column;
  }

  .eport-tabs {
    display: grid;
    grid-template-columns: 1fr;
  }

  .eport-tab {
    justify-content: center;
  }
}
/* =========================
   E-PORT ACHIEVEMENT EDITOR
========================= */

.eport-achievement-editor {
  border: 1px solid #e2e8f0;
  background: #ffffff;
  border-radius: 20px;
  padding: 16px;
  margin-bottom: 16px;
}

.eport-achievement-form {
  display: grid;
  gap: 10px;
}

.eport-achievement-preview-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px dashed #cbd5e1;
  background: #f8fafc;
  border-radius: 16px;
  padding: 12px;
}

.eport-achievement-preview {
  width: 96px;
  height: 96px;
  border-radius: 18px;
  object-fit: cover;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  flex: 0 0 auto;
}

.eport-achievement-list-title {
  margin-top: 16px;
}

.eport-achievement-content {
  flex: 1;
  min-width: 0;
}

.eport-achievement-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.eport-visible-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 5px 10px;
  font-size:13px;
  font-weight: 900;
  border: 1px solid #bbf7d0;
  background: #ecfdf5;
  color: #15803d;
}

.eport-visible-pill.is-hidden {
  border-color: #fecdd3;
  background: #fff1f2;
  color: #be123c;
}

.eport-achievement-noimg {
  width: 72px;
  height: 72px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  color: #94a3b8;
  flex: 0 0 auto;
}

@media (max-width: 640px) {
  .eport-achievement-preview-wrap,
  .eport-achievement-item {
    align-items: flex-start;
  }

  .eport-achievement-actions .btn {
    width: 100%;
  }
}
.student-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

@media (max-width: 860px) {
  .student-header-actions {
    width: 100%;
  }

  .student-header-actions .btn {
    flex: 1;
  }
}
/* =========================
   E-Portfolio Cover Preview Fix
========================= */

.eport-cover-preview-wrap {
  width: 100%;
  min-height: 160px;
  max-height: 190px;
  border-radius: 18px;
  border: 1px solid #dbeafe;
  background: #f8fafc;
  overflow: hidden;
  display: grid;
  place-items: center;
  margin-bottom: 12px;
}

.eport-cover-preview {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
  border-radius: 18px;
}

#eportCoverEmpty {
  padding: 18px;
  text-align: center;
  color: #64748b;
}

.eport-profile-card .eport-cover-preview-wrap {
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.08);
}

.eport-profile-card .eport-cover-preview {
  border: 4px solid #ffffff;
}
/* =========================
   E-Portfolio Edit Preview Center
   จัดรูปโปรไฟล์และ Cover ให้อยู่กึ่งกลาง
========================= */

.eport-profile-card {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.eport-profile-card .event-meta {
  width: 100%;
}

.eport-profile-img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.eport-cover-preview-wrap {
  width: 100%;
  display: grid;
  place-items: center;
}

.eport-cover-preview {
  display: block;
  margin-left: auto;
  margin-right: auto;
}


/* =====================================================
   09 STUDENT SCORE TAB — คะแนนของฉัน
   ใช้กับ Student_SCORE_STEP4.html
   จัดให้อ่านง่ายแบบ 2 คอลัมน์ ไม่ยืดหน้ายาวเกินไป
===================================================== */

.student-score-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  margin-top: 16px;
}

.student-score-column {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}

.score-inner-panel {
  background: #ffffff;
  border: 1px solid #dbeafe;
  border-radius: var(--radius);
  padding: 16px;
}

.score-section-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-weight: 800;
  color: #1e293b;
}

.score-section-head i {
  color: var(--blue);
}

.rank-history-mini-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rank-history-mini-list .event-item {
  margin-bottom: 0;
}

.rank-history-mini-list img,
.rank-history-mini-list .rank-badge-img {
  width: 34px;
  height: 34px;
  object-fit: contain;
  flex: 0 0 auto;
}

.student-score-layout .event-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.student-score-layout .event-list .event-item {
  margin-bottom: 0;
}

@media (max-width: 900px) {
  .student-score-layout {
    grid-template-columns: 1fr;
  }
}
/* =========================
   STUDENT ACHIEVEMENT LAYOUT
   แท็บความภาคภูมิใจ
========================= */

.eport-achievement-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.eport-achievement-head h3 {
  margin: 0;
  font-size:18px;
  font-weight: 800;
  color: #0f172a;
}

.eport-achievement-head p {
  margin: 4px 0 0;
  color: #64748b;
  font-size:14px;
}

.eport-achievement-editor {
  background: #ffffff;
  border: 1px solid #dbeafe;
  border-radius: 18px;
  padding: 16px;
  margin-bottom: 18px;
}

.eport-achievement-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
  gap: 16px;
  align-items: start;
}

.eport-achievement-form label {
  display: block;
  margin-bottom: 6px;
  font-weight: 700;
  color: #334155;
  font-size:14px;
}

.eport-achievement-form .input {
  width: 100%;
}

.eport-achievement-form .textarea {
  min-height: 118px;
  resize: vertical;
}

.eport-achievement-side {
  display: grid;
  gap: 10px;
}

.eport-achievement-preview-wrap {
  min-height: 92px;
  border: 1px dashed #bfdbfe;
  border-radius: 16px;
  padding: 10px;
  background: #f8fbff;
  display: grid;
  gap: 8px;
  align-content: start;
}

.eport-achievement-preview {
  width: 100%;
  max-height: 170px;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid #dbeafe;
  background: #ffffff;
}

.eport-achievement-list-title {
  margin-top: 16px;
  margin-bottom: 12px;
}

.eport-achievement-list {
  display: grid;
  gap: 10px;
}

.eport-achievement-item {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  border: 1px solid #dbeafe;
  border-radius: 16px;
  padding: 12px;
  background: #ffffff;
}

.eport-achievement-item > img {
  width: 74px;
  height: 74px;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
}

.eport-achievement-noimg {
  width: 74px;
  height: 74px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: #eff6ff;
  color: #2563eb;
  border: 1px solid #dbeafe;
}

.eport-achievement-content {
  min-width: 0;
}

.eport-achievement-content strong {
  display: block;
  color: #0f172a;
  font-size:15px;
  line-height: 1.35;
  margin-bottom: 2px;
}

.eport-achievement-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.eport-achievement-actions .btn {
  padding: 8px 12px;
  font-size:13px;
}

/* จอเล็ก ให้ฟอร์มความภาคภูมิใจยุบเป็น 1 คอลัมน์ */
@media (max-width: 860px) {
  .eport-achievement-head {
    flex-direction: column;
    align-items: stretch;
  }

  .eport-achievement-head .btn {
    width: 100%;
  }

  .eport-achievement-form {
    grid-template-columns: 1fr;
  }

  .eport-achievement-item {
    grid-template-columns: 60px minmax(0, 1fr);
  }

  .eport-achievement-item > img,
  .eport-achievement-noimg {
    width: 60px;
    height: 60px;
    border-radius: 12px;
  }
}
/* =========================
   E-PORT OVERVIEW RANK BADGE
========================= */

.eport-rank-card-badge {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 16px;
  border-left: 6px solid var(--rank-color, #f59e0b);
  background:
    radial-gradient(circle at 95% 0%, rgba(245, 158, 11, .18), transparent 34%),
    #fffaf0;
}

.eport-rank-badge-head {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.eport-rank-badge-head img {
  width: 54px;
  height: 54px;
  object-fit: contain;
  flex: 0 0 auto;
}

.eport-rank-badge-fallback {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: rgba(245, 158, 11, .14);
  color: var(--rank-color, #f59e0b);
  font-size:24px;
}

.eport-rank-badge-head span {
  display: block;
  font-size:13px;
  color: #64748b;
  font-weight: 700;
}

.eport-rank-badge-head strong {
  display: block;
  font-size:21px;
  line-height: 1.1;
  color: var(--rank-color, #f59e0b);
  text-transform: uppercase;
}

.eport-rank-badge-pill {
  position: absolute;
  top: 10px;
  right: 10px;
  max-width: 120px;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--rank-color, #f59e0b);
  color: #ffffff;
  font-size:13px;
  font-weight: 900;
  text-transform: uppercase;
  box-shadow: 0 8px 20px rgba(15, 23, 42, .12);
}

.eport-rank-badge-score {
  margin-top: 24px;
  min-width: 70px;
  padding: 8px 10px;
  text-align: center;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid #fde68a;
}

.eport-rank-badge-score strong {
  display: block;
  font-size:22px;
  line-height: 1;
  color: var(--rank-color, #f59e0b);
}

.eport-rank-badge-score span {
  display: block;
  margin-top: 3px;
  font-size:13px;
  color: #64748b;
  font-weight: 700;
}

@media (max-width: 640px) {
  .eport-rank-card-badge {
    grid-template-columns: 1fr;
    padding-top: 42px;
  }

  .eport-rank-badge-score {
    margin-top: 0;
    width: 100%;
  }
}
/* =========================
   RANK VIEW ALL BUTTON
========================= */

.rank-view-all-btn {
  margin-top: 8px;
  padding: 8px 12px;
  font-size:13px;
  width: fit-content;
}

.eport-rank-card .rank-view-all-btn,
.eport-rank-card-badge .rank-view-all-btn {
  grid-column: 1 / -1;
  justify-self: start;
}

@media (max-width: 640px) {
  .rank-view-all-btn {
    width: 100%;
  }

  .eport-rank-card .rank-view-all-btn,
  .eport-rank-card-badge .rank-view-all-btn {
    justify-self: stretch;
  }
}
/* ปุ่มดูระดับแรงค์ในหน้าภาพรวม E-Portfolio */
.eport-overview-rank-btn {
  margin-top: 10px;
  width: 100%;
  justify-content: center;
}

/* =====================================================
   02 TEACHER PAGE
===================================================== */

/* =====================================================
   TeacherStyle.html
   CSS เฉพาะหน้าครู / เมนูครู / ฟอร์มครู / รายงานครู

   แยกออกจาก Style.html เพื่อลดความยาวไฟล์หลัก
   ต้อง include หลัง Style.html และ StudentStyle.html
===================================================== */

/* =========================
   TEACHER SHELL / SIDEBAR
========================= */

.teacher-shell {
  min-height: 100vh;
  display: flex;
  background: var(--bg);
}

.layout {
  min-height: 100vh;
  display: flex;
}

.sidebar {
  width: 270px;
  background: #fff;
  border-right: 1px solid var(--line);
  padding: 14px;
  transition: .18s;
  display: flex;
  flex-direction: column;
}

.sidebar.collapsed {
  width: 82px;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  margin-bottom: 8px;
}

.sidebar-brand img {
  width: 44px;
  height: 44px;
  object-fit: contain;
}

.sidebar-brand span {
  display: block;
  font-size:13px;
  color: var(--muted);
}

.sidebar.collapsed .sidebar-brand div,
.sidebar.collapsed .side-menu span,
.sidebar.collapsed .logout-btn span {
  display: none;
}

.side-collapse {
  border: 1px solid var(--line);
  background: #f8fafc;
  color: var(--text);
  border-radius: 14px;
  height: 42px;
  cursor: pointer;
  margin-bottom: 12px;
}

.side-menu {
  display: grid;
  gap: 6px;
}

.side-menu button,
.logout-btn {
  border: 0;
  background: transparent;
  color: var(--text);
  border-radius: 14px;
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  text-align: left;
}

.side-menu button i,
.logout-btn i {
  width: 22px;
  text-align: center;
}

.side-menu button:hover,
.side-menu button.active {
  background: var(--soft-blue);
  color: var(--blue);
}

.logout-btn {
  margin-top: auto;
  color: var(--red);
}

/* =========================
   TEACHER MAIN / TOPBAR
========================= */

.main {
  flex: 1;
  padding: 20px;
  overflow: auto;
}

.topbar {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  margin-bottom: 18px;
}

.topbar h2 {
  margin: 0;
}

.topbar p {
  margin: 4px 0 0;
  color: var(--muted);
}

/* =========================
   TEACHER FORMS / FILTERS
========================= */

.form-panel {
  margin-bottom: 18px;
}

.filter-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin: 14px 0;
}

.filter-row .input {
  width: auto;
  min-width: 180px;
}

/* =========================
   TEACHER STUDENT LISTS
========================= */

.student-check-grid,
.student-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  margin: 14px 0;
}

.student-check,
.student-card {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  padding: 12px;
  display: flex;
  gap: 10px;
  align-items: center;
}

.student-card img,
.student-check img {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  object-fit: cover;
  background: #f1f5f9;
}

.student-info strong {
  display: block;
}

.student-info span {
  color: var(--muted);
  font-size:13px;
}

.student-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--blue);
  flex: 0 0 auto;
}

.student-check:has(input:checked) {
  border-color: #93c5fd;
  background: #eff6ff;
}

/* =========================
   TEACHER TABLES
========================= */

.table-wrap {
  overflow-x: auto;
  margin-top: 12px;
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 760px;
}

th,
td {
  border-bottom: 1px solid var(--line);
  padding: 10px;
  text-align: left;
  vertical-align: top;
}

th {
  background: #f8fafc;
}

/* =========================
   TEACHER PLACEHOLDER / PRESETS
========================= */

.coming-soon {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 60px 20px;
  text-align: center;
  color: var(--muted);
}

.coming-soon i {
  font-size:52px;
  color: var(--blue);
  margin-bottom: 12px;
}

.preset-list {
  margin-top: 16px;
  display: grid;
  gap: 8px;
}

.preset-item {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* =========================
   TEACHER BEHAVIOR
========================= */

#behaviorMultiBox {
  margin-top: 12px;
}

/* =========================
   TEACHER RESPONSIVE
========================= */

@media (max-width: 860px) {
  .topbar {
    flex-direction: column;
    align-items: stretch;
  }

  .teacher-shell,
  .layout {
    flex-direction: column;
  }

  .sidebar,
  .sidebar.collapsed {
    width: 100%;
  }

  .side-menu {
    grid-template-columns: repeat(2, 1fr);
  }

  .sidebar.collapsed .sidebar-brand div,
  .sidebar.collapsed .side-menu span,
  .sidebar.collapsed .logout-btn span {
    display: inline;
  }
}

/* =========================
   E-PORT PROFILE STEP 3
   Skills / Education
========================= */

.eport-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.eport-skill-chip {
  border: 1px solid #bfdbfe;
  background: #eff6ff;
  color: #1d4ed8;
  border-radius: 999px;
  padding: 7px 11px;
  font-weight: 800;
  font-size:13px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
}

.eport-skill-chip:hover {
  background: #dbeafe;
  transform: translateY(-1px);
}

.eport-skill-chip.is-view {
  cursor: default;
}

.eport-skill-chip.is-view:hover {
  transform: none;
}

.eport-education-list {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.eport-education-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.eport-education-mini {
  margin-bottom: 8px;
  border-left: 4px solid #2563eb;
}

.eport-education-timeline {
  display: grid;
  gap: 8px;
}

@media (max-width: 640px) {
  .eport-education-item {
    align-items: stretch;
    flex-direction: column;
  }
}
/* =====================================================
   STUDENT DASHBOARD / E-PORT CLEAN LAYOUT
   ปรับการ์ดบน 5 ใบ + แท็บ My E-Portfolio ใหม่
===================================================== */

/* การ์ดสรุปด้านบนของนักเรียน 5 ใบ */
#studentStats {
  display: grid;
  grid-template-columns: repeat(5, minmax(160px, 1fr));
  gap: 14px;
  align-items: stretch;
}

/* ให้การ์ดสูงเท่ากัน ดูเป็นระเบียบ */
#studentStats .stat-card {
  min-height: 118px;
  border-radius: 18px;
  padding: 18px 18px;
  overflow: hidden;
  position: relative;
}

/* ปรับตัวเลขในการ์ดให้เด่น */
#studentStats .stat-card h3 {
  font-size:28px;
  line-height: 1.1;
  margin: 0 0 4px;
  font-weight: 800;
}

/* ข้อความใต้ตัวเลข */
#studentStats .stat-card p {
  font-size:13px;
  line-height: 1.35;
  margin: 0;
  color: #475569;
  font-weight: 600;
}

/* ไอคอนในการ์ด */
#studentStats .stat-icon {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  flex: 0 0 auto;
}

/* กันข้อความยาวของการ์ดแรงค์ถัดไปล้น */
#studentStats .stat-card div:last-child {
  min-width: 0;
}

#studentStats .stat-card p,
#studentStats .stat-card h3 {
  word-break: break-word;
}

/* Tablet */
@media (max-width: 1100px) {
  #studentStats {
    grid-template-columns: repeat(3, minmax(160px, 1fr));
  }
}

/* Mobile */
@media (max-width: 720px) {
  #studentStats {
    grid-template-columns: repeat(2, minmax(140px, 1fr));
    gap: 10px;
  }

  #studentStats .stat-card {
    min-height: 104px;
    padding: 14px;
  }

  #studentStats .stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 15px;
  }

  #studentStats .stat-card h3 {
    font-size:24px;
  }

  #studentStats .stat-card p {
    font-size:13px;
  }
}

/* จอเล็กมาก */
@media (max-width: 430px) {
  #studentStats {
    grid-template-columns: 1fr;
  }
}

/* =====================================================
   MY E-PORTFOLIO TABS: ข้อมูลทั่วไป / ความภาคภูมิใจ / คะแนนของฉัน
===================================================== */

.eport-tab-wrap,
.eport-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 12px 0 16px;
}

.eport-tab {
  border: 1px solid #dbeafe;
  background: #ffffff;
  color: #1e293b;
  border-radius: 999px;
  padding: 9px 16px;
  font-weight: 700;
  font-size:14px;
  cursor: pointer;
  transition: 0.18s ease;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.eport-tab:hover {
  transform: translateY(-1px);
  border-color: #f59e0b;
  background: #fffbeb;
}

.eport-tab.active {
  background: #fff7ed;
  color: #92400e;
  border-color: #f59e0b;
  box-shadow: 0 6px 16px rgba(245, 158, 11, 0.14);
}

.eport-tab i {
  font-size:14px;
}

/* กล่องใหญ่ My E-Port */
.eport-card,
.eport-main-card {
  border-radius: 22px;
  border: 1px solid #dbeafe;
  background: linear-gradient(135deg, #ffffff 0%, #ffffff 70%, #fff7ed 100%);
}

/* ลดพื้นที่ว่างหลังเอาแท็บภาพรวมออก */
#eportTabEdit,
#eportTabAchievements,
#eportTabScore {
  animation: eportFadeIn 0.18s ease;
}

@keyframes eportFadeIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* =====================================================
   SCORE TAB / RANK PROGRESS
===================================================== */

/* กล่องแรงค์ปัจจุบัน */
#studentRankCurrentBox .tr107-rank-card {
  border-radius: 20px;
  padding: 18px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
}

/* ชื่อแรงค์ */
#studentRankCurrentBox .rank-name {
  font-size:22px;
  font-weight: 900;
  letter-spacing: 0.2px;
}

/* คำอธิบายแรงค์ */
#studentRankCurrentBox .rank-meta {
  font-size:13px;
  color: #64748b;
  margin-top: 4px;
}

/* ปุ่มดูระดับแรงค์ทั้งหมด */
.rank-view-all-btn {
  border-radius: 999px;
}

/* กล่องคะแนนด้านขวา */
#studentRankCurrentBox .rank-score-pill {
  min-width: 90px;
  border-radius: 18px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}

/* รายการงานค้าง / พฤติกรรม / ประวัติคะแนน */
#eportTabScore .event-item {
  border-radius: 16px;
}

/* จัดหัวข้อในแท็บคะแนนให้ไม่แน่น */
#eportTabScore h3,
#eportTabScore h4 {
  margin-top: 18px;
  margin-bottom: 10px;
}

/* มือถือ: แรงค์ปัจจุบันเรียงลง */
@media (max-width: 720px) {
  #studentRankCurrentBox .tr107-rank-card {
    flex-direction: column;
    align-items: flex-start !important;
  }

  #studentRankCurrentBox .rank-score-pill {
    width: 100%;
    margin-top: 10px;
  }
}

/* =====================================================
   PUBLIC DASHBOARD PHASE 1.1
   5 Cards + 3 Compact Columns + Colorful Dashboard
===================================================== */

/* การ์ดบน 5 ใบ */
#publicStats {
  display: grid;
  grid-template-columns: repeat(5, minmax(150px, 1fr));
  gap: 14px;
  align-items: stretch;
}

#publicStats .stat-card,
#publicStats .public-season-card {
  min-height: 118px;
}

/* การ์ด Season ใบที่ 5 ให้แตกต่างจาก stat card ทั่วไป */
#publicStats .public-season-card {
  border-radius: 18px;
  padding: 14px 16px;
  border: 1px solid #f59e0b;
  background:
    radial-gradient(circle at 88% 82%, rgba(245, 158, 11, .20) 0 34%, transparent 35%),
    linear-gradient(135deg, #fff7ed 0%, #fffbeb 55%, #fef3c7 100%);
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(245, 158, 11, .10);
}

#publicStats .public-season-card::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 14px;
  border: 1px solid rgba(251, 191, 36, .35);
  pointer-events: none;
}

.season-card-badge {
  width: 74px;
  height: 74px;
  border-radius: 20px;
  background: linear-gradient(135deg, #facc15 0%, #f59e0b 60%, #b45309 100%);
  color: #78350f;
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size:16px;
  line-height: 1;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.45), 0 8px 18px rgba(245, 158, 11, .28);
  position: relative;
  z-index: 1;
}

.season-card-badge strong {
  display: block;
  font-weight: 900;
  letter-spacing: .2px;
}

.season-crown {
  position: absolute;
  top: -9px;
  width: 28px;
  height: 20px;
  border-radius: 999px;
  background: #ffffff;
  color: #f59e0b;
  display: grid;
  place-items: center;
  font-size:13px;
  box-shadow: 0 5px 12px rgba(245, 158, 11, .18);
}

.season-card-content {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.season-card-content h3 {
  margin: 0;
  font-size:24px;
  line-height: 1.05;
  font-weight: 900;
  color: #92400e;
}

.season-card-content p {
  margin: 4px 0 0;
  font-size:13px;
  line-height: 1.25;
  font-weight: 700;
  color: #475569;
}

.season-card-content small {
  display: block;
  margin-top: 2px;
  font-size:13px;
  color: #94a3b8;
}

/* ซ่อนการ์ดยาว Season เฉพาะหน้า Index ถ้ายังถูกสร้างค้าง */
#rankSeasonPublicBox.hidden {
  display: none !important;
}

/* 3 คอลัมน์ Insight */
.public-insight-grid,
.dashboard-insight-grid,
.public-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

#classPositiveList,
#topStudentList,
#positiveEventList {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* รายการแบบ compact */
.compact-dashboard-item {
  position: relative;
  border: 1px solid #dbeafe;
  background: #ffffff;
  border-radius: 16px;
  padding: 12px 14px;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
  overflow: hidden;
  transition: transform .16s ease, box-shadow .16s ease;
}

.compact-dashboard-item:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(15, 23, 42, .08);
}

.compact-dashboard-item::after {
  content: "";
  position: absolute;
  width: 74px;
  height: 74px;
  right: -22px;
  bottom: -24px;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.06);
}

.compact-main-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  position: relative;
  z-index: 1;
}

.compact-dashboard-item strong {
  font-size:14px;
  color: #0f172a;
}

.compact-meta,
.compact-sub {
  font-size:13px;
  color: #64748b;
  line-height: 1.35;
  position: relative;
  z-index: 1;
}

.compact-sub {
  margin-top: 8px;
}

.compact-pill {
  border: 1px solid #bfdbfe;
  background: #eff6ff;
  color: #2563eb;
  border-radius: 999px;
  padding: 4px 8px;
  font-size:13px;
  font-weight: 800;
  white-space: nowrap;
}

/* Classroom Plus+ */
.compact-class-item {
  border-left: 5px solid #2563eb;
}

.compact-class-tone-1 {
  border-color: #60a5fa;
  background: linear-gradient(135deg, #ffffff 0%, #eff6ff 100%);
}

.compact-class-tone-2 {
  border-color: #22c55e;
  background: linear-gradient(135deg, #ffffff 0%, #ecfdf5 100%);
}

.compact-class-tone-3 {
  border-color: #a78bfa;
  background: linear-gradient(135deg, #ffffff 0%, #f5f3ff 100%);
}

.compact-class-tone-4 {
  border-color: #fb7185;
  background: linear-gradient(135deg, #ffffff 0%, #fff1f2 100%);
}

.compact-class-leader {
  border-color: #f59e0b !important;
  background:
    radial-gradient(circle at 88% 88%, rgba(245, 158, 11, .13) 0 30%, transparent 31%),
    linear-gradient(135deg, #fff7ed 0%, #fffbeb 100%) !important;
}

.compact-top-ribbon {
  position: absolute;
  top: 8px;
  right: 12px;
  border: 1px solid #fbbf24;
  background: #fffbeb;
  color: #b45309;
  border-radius: 999px;
  padding: 3px 8px;
  font-size:13px;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  z-index: 3;
  max-width: calc(100% - 24px);
  white-space: nowrap;
}

/* TR107 Rank */
.compact-rank-item,
.compact-positive-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.compact-rank-top-1 {
  border-color: #f59e0b;
  border-left: 5px solid #f59e0b;
  background:
    radial-gradient(circle at 88% 88%, rgba(245, 158, 11, .13) 0 30%, transparent 31%),
    linear-gradient(135deg, #fff7ed 0%, #fffbeb 100%);
}

.compact-rank-top-2 {
  border-color: #60a5fa;
  border-left: 5px solid #3b82f6;
  background:
    radial-gradient(circle at 88% 88%, rgba(59, 130, 246, .12) 0 30%, transparent 31%),
    linear-gradient(135deg, #eff6ff 0%, #ffffff 100%);
}

.compact-rank-top-3 {
  border-color: #22c55e;
  border-left: 5px solid #22c55e;
  background:
    radial-gradient(circle at 88% 88%, rgba(34, 197, 94, .12) 0 30%, transparent 31%),
    linear-gradient(135deg, #ecfdf5 0%, #ffffff 100%);
}

.compact-rank-normal {
  border-left: 5px solid #cbd5e1;
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
}

.compact-rank-no {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  border: 1px solid #fed7aa;
  background: #fff7ed;
  color: #ea580c;
  font-size:13px;
  font-weight: 900;
  flex: 0 0 auto;
  position: relative;
  z-index: 1;
}

.compact-rank-top-1 .compact-rank-no {
  border-color: #fbbf24;
  color: #b45309;
  background: #fffbeb;
}

.compact-rank-top-2 .compact-rank-no {
  border-color: #93c5fd;
  color: #2563eb;
  background: #eff6ff;
}

.compact-rank-top-3 .compact-rank-no {
  border-color: #86efac;
  color: #16a34a;
  background: #ecfdf5;
}

.compact-rank-icon {
  width: 34px;
  height: 34px;
  object-fit: contain;
  flex: 0 0 auto;
  position: relative;
  z-index: 1;
}

.compact-rank-content {
  flex: 1;
  min-width: 0;
  position: relative;
  z-index: 1;
}

.compact-rank-content strong,
.compact-meta {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

.compact-rank-name {
  font-size:13px;
  font-weight: 900;
  margin-top: 2px;
}

.compact-score {
  border: 1px solid #dbeafe;
  background: #f8fafc;
  color: #16a34a;
  border-radius: 12px;
  padding: 6px 8px;
  font-size:13px;
  font-weight: 900;
  white-space: nowrap;
  position: relative;
  z-index: 1;
}

/* พลังบวกล่าสุด */
.compact-positive-icon {
  width: 36px;
  height: 36px;
  border-radius: 13px;
  background: #ecfdf5;
  color: #10b981;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  position: relative;
  z-index: 1;
}

.compact-positive-tone-1 {
  border-left: 5px solid #10b981;
  background: linear-gradient(135deg, #ffffff 0%, #ecfdf5 100%);
}

.compact-positive-tone-2 {
  border-left: 5px solid #3b82f6;
  background: linear-gradient(135deg, #ffffff 0%, #eff6ff 100%);
}

.compact-positive-tone-3 {
  border-left: 5px solid #f59e0b;
  background: linear-gradient(135deg, #ffffff 0%, #fffbeb 100%);
}

.compact-positive-tone-4 {
  border-left: 5px solid #ec4899;
  background: linear-gradient(135deg, #ffffff 0%, #fdf2f8 100%);
}

.compact-positive-tone-5 {
  border-left: 5px solid #8b5cf6;
  background: linear-gradient(135deg, #ffffff 0%, #f5f3ff 100%);
}

.compact-positive-tone-1 .compact-positive-icon {
  background: #d1fae5;
  color: #059669;
}

.compact-positive-tone-2 .compact-positive-icon {
  background: #dbeafe;
  color: #2563eb;
}

.compact-positive-tone-3 .compact-positive-icon {
  background: #fef3c7;
  color: #d97706;
}

.compact-positive-tone-4 .compact-positive-icon {
  background: #fce7f3;
  color: #db2777;
}

.compact-positive-tone-5 .compact-positive-icon {
  background: #ede9fe;
  color: #7c3aed;
}

/* Responsive */
@media (max-width: 1100px) {
  #publicStats {
    grid-template-columns: repeat(3, minmax(150px, 1fr));
  }
}

@media (max-width: 900px) {
  .public-insight-grid,
  .dashboard-insight-grid,
  .public-dashboard-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  #publicStats {
    grid-template-columns: repeat(2, minmax(140px, 1fr));
    gap: 10px;
  }

  #publicStats .stat-card,
  #publicStats .public-season-card {
    min-height: 106px;
  }

  .season-card-badge {
    width: 58px;
    height: 58px;
    border-radius: 17px;
    font-size:13px;
  }

  .season-card-content h3 {
    font-size:20px;
  }

  .season-card-content p {
    font-size:13px;
  }
}

@media (max-width: 430px) {
  #publicStats {
    grid-template-columns: 1fr;
  }
}
/* =====================================================
   PUBLIC DASHBOARD PHASE 1.2
   ย้าย CLASS LEADER ไปหัวข้อ และเลิกใช้ ribbon ลอย
===================================================== */

.panel-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.panel-header-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid #fbbf24;
  background: #fffbeb;
  color: #b45309;
  border-radius: 999px;
  padding: 5px 10px;
  font-size:13px;
  font-weight: 900;
  white-space: nowrap;
}

.compact-top-ribbon {
  display: none !important;
}

.compact-rank-item {
  align-items: center;
}

@media (max-width: 720px) {
  .panel-header-badge {
    font-size:13px;
    padding: 4px 8px;
  }
}
/* =====================================================
   PUBLIC DASHBOARD PHASE 1.3
   เกลา TOP badge + หัวใจ + สีข้อความ
===================================================== */

/* ป้าย TOP 1 / 2 / 3 เป็น 2 บรรทัด */
.compact-rank-badge {
  width: 42px;
  min-width: 42px;
  max-width: 42px;
  height: 40px;
  padding: 3px 4px;
  border-radius: 12px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  font-size:13px;
  font-weight: 900;
  line-height: 1.05;
  flex: 0 0 42px;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}

.compact-rank-badge i {
  font-size:13px;
  line-height: 1;
}

.compact-rank-badge-text {
  display: block;
  font-size:13px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .2px;
}

/* สีของ badge */
.compact-rank-badge-1 {
  border: 1px solid #fbbf24;
  background: #fffbeb;
  color: #b45309;
}

.compact-rank-badge-2 {
  border: 1px solid #93c5fd;
  background: #eff6ff;
  color: #2563eb;
}

.compact-rank-badge-3 {
  border: 1px solid #86efac;
  background: #ecfdf5;
  color: #16a34a;
}

/* Classroom Plus+ */
.compact-class-name {
  color: #0f172a;
  font-size:15px;
  font-weight: 900;
}

.compact-good-meta {
  color: #64748b;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}

.compact-good-meta i {
  color: #e11d48;
  font-size:13px;
}

.compact-featured-text {
  color: #475569;
  font-weight: 600;
}

.compact-featured-text .featured-name {
  color: #0f172a;
  font-weight: 800;
}

.compact-featured-text .featured-score {
  color: #f59e0b;
  font-weight: 900;
}

/* TR107 Rank */
.compact-rank-student-name {
  color: #0f172a;
  font-size:14px;
  font-weight: 900;
}

.compact-rank-class {
  color: #64748b;
  font-weight: 700;
}

.compact-rank-name {
  font-size:13px;
  font-weight: 900;
  margin-top: 2px;
}

/* Score ขวาให้เด่นขึ้น */
.compact-score {
  border: 1px solid #dbeafe;
  background: #f8fafc;
  color: #16a34a;
  border-radius: 12px;
  padding: 6px 10px;
  font-size:13px;
  font-weight: 900;
  white-space: nowrap;
  position: relative;
  z-index: 1;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85);
}

/* พลังบวกล่าสุด */
.compact-positive-item .compact-rank-content strong {
  color: #0f172a;
  font-size:14px;
  font-weight: 900;
}

.compact-positive-item .compact-meta {
  color: #64748b;
  font-weight: 700;
}

/* mobile */
@media (max-width: 720px) {
  .compact-rank-badge {
    width: 38px;
    min-width: 38px;
    max-width: 38px;
    height: 38px;
    padding: 3px 3px;
    flex: 0 0 38px;
  }

  .compact-rank-badge i {
    font-size:13px;
  }

  .compact-rank-badge-text {
    font-size:13px;
  }
}
/* =====================================================
   STUDENT NEXT RANK CARD
   การ์ดใบที่ 5: อีกกี่ Pt. ถึงแรงค์ถัดไป
===================================================== */

#studentStats .stat-card.stat-purple {
  background:
    radial-gradient(circle at 88% 80%, rgba(124, 58, 237, 0.16) 0 32%, transparent 33%),
    linear-gradient(135deg, #faf5ff 0%, #f5f3ff 55%, #ede9fe 100%);
  border: 1px solid #c4b5fd;
  box-shadow: 0 10px 24px rgba(124, 58, 237, 0.08);
}

#studentStats .stat-card.stat-purple .stat-icon {
  background: #ffffff;
  color: #7c3aed;
  box-shadow: 0 8px 18px rgba(124, 58, 237, 0.12);
}

#studentStats .stat-card.stat-purple h3 {
  color: #6d28d9;
  font-weight: 900;
  letter-spacing: 0.2px;
}

#studentStats .stat-card.stat-purple p {
  color: #4c1d95;
  font-weight: 800;
}

/* ถ้าใช้ span แยกคำว่า อีก / Pt. ให้เล็กลง */
#studentStats .stat-card h3 .stat-prefix,
#studentStats .stat-card h3 .stat-unit {
  font-size:13px;
  font-weight: 900;
  vertical-align: baseline;
  opacity: 0.88;
}

#studentStats .stat-card h3 .stat-prefix {
  margin-right: 2px;
}

#studentStats .stat-card h3 .stat-unit {
  margin-left: 2px;
}

/* =====================================================
   PUBLIC E-PORTFOLIO SHOWCASE
   กล่องค้นหา + Grid การ์ด + การ์ด E-Port นักเรียน
===================================================== */

.eport-showcase-panel {
  margin-top: 18px;
  border-color: #86efac;
  background: linear-gradient(180deg, #f7fdf9 0%, #f8fffb 100%);
}

.eport-showcase-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 14px;
}

.eport-showcase-head p {
  margin: 4px 0 0;
  color: #64748b;
  font-size:14px;
}

.eport-showcase-tools {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  min-width: min(520px, 100%);
}

.eport-showcase-tools .input {
  min-width: 220px;
}

#publicEPortSearch {
  flex: 1;
}

#publicEPortClassFilter {
  width: 160px;
}

.eport-showcase-count {
  color: #64748b;
  font-size:13px;
  font-weight: 700;
  margin-bottom: 12px;
}

/* ตัวจัดเรียงการ์ด */
.eport-showcase-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
  gap: 14px !important;
  align-items: start !important;
}

/* Loading */
.mini-loading {
  grid-column: 1 / -1;
  border: 1px dashed #bfdbfe;
  background: #f8fbff;
  color: #64748b;
  border-radius: 18px;
  padding: 22px;
  text-align: center;
  font-weight: 800;
}

.mini-loading i {
  color: #2563eb;
  margin-right: 6px;
}

/* Responsive */
@media (max-width: 860px) {
  .eport-showcase-head {
    flex-direction: column;
  }

  .eport-showcase-tools {
    width: 100%;
    min-width: 0;
  }

  .eport-showcase-tools .input,
  #publicEPortClassFilter {
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 720px) {
  .eport-showcase-grid {
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)) !important;
  }
}

@media (max-width: 520px) {
  .eport-showcase-grid {
    grid-template-columns: 1fr !important;
  }

  .eport-student-avatar {
    width: 68px;
    height: 68px;
    border-radius: 20px;
    flex-basis: 68px;
  }

  .eport-view-btn {
    min-width: 116px;
    max-width: 136px;
    font-size:13px;
    padding: 7px 10px;
  }
}

/* =====================================================
   STUDENT HERO INLINE
   โปรไฟล์นักเรียน + ป้าย Season อยู่แถวเดียวกัน
===================================================== */

/* Header หลังลบข้อมูลมุมซ้าย */
.student-header-clean {
  justify-content: flex-end;
  min-height: 74px;
}

.student-header-clean .student-header-actions {
  margin-left: auto;
}

/* แถวใหม่: ซ้ายโปรไฟล์ / ขวา Season */
.student-hero-inline-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.95fr);
  gap: 16px;
  align-items: stretch;
  margin-bottom: 16px;
}

/* กล่องโปรไฟล์ */
.student-hero-inline-profile {
  min-width: 0;
}

.student-hero-mini-card {
  height: 100%;
  min-height: 106px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid #dbeafe;
  border-radius: 22px;
  background:
    radial-gradient(circle at 92% 80%, rgba(37, 99, 235, .08) 0 32%, transparent 33%),
    linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
  overflow: hidden;
}

.student-hero-mini-avatar {
  width: 74px;
  height: 74px;
  border-radius: 22px;
  object-fit: cover;
  background: #f8fafc;
  border: 4px solid #ffffff;
  box-shadow: 0 10px 20px rgba(15, 23, 42, .10);
  flex: 0 0 74px;
}

.student-hero-mini-meta {
  min-width: 0;
  flex: 1;
}

.student-hero-mini-name {
  color: #0f172a;
  font-size:22px;
  font-weight: 900;
  line-height: 1.25;
  word-break: break-word;
}

.student-hero-mini-nickname {
  color: #64748b;
  font-size:16px;
  font-weight: 800;
  margin-left: 6px;
}

.student-hero-mini-sub {
  margin-top: 6px;
  color: #64748b;
  font-size:15px;
  font-weight: 700;
}

/* กล่อง Season ด้านขวา */
.student-hero-inline-season {
  min-width: 0;
  display: flex;
}

/* ป้าย Season ที่ render จาก renderRankSeasonCountdown() */
.student-hero-inline-season .rank-season-card {
  width: 100%;
  min-height: 106px;
  margin: 0;
  padding: 14px 18px;
  border-radius: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

/* ลดความใหญ่ด้านในป้าย Season */
.student-hero-inline-season .season-badge {
  min-width: 104px;
  height: 58px;
  border-radius: 18px;
  font-size:20px;
}

.student-hero-inline-season .season-code {
  font-size:17px;
  line-height: 1.15;
}

.student-hero-inline-season .season-name {
  font-size:13px;
}

.student-hero-inline-season .season-countdown-block {
  gap: 10px;
}

.student-hero-inline-season .season-clock {
  width: 46px;
  height: 46px;
  border-radius: 16px;
}

.student-hero-inline-season .season-countdown {
  font-size:22px;
  line-height: 1.05;
  white-space: nowrap;
}

.student-hero-inline-season .season-reset-text {
  font-size:13px;
  white-space: nowrap;
}

/* จอแคบให้เรียงลง */
@media (max-width: 980px) {
  .student-hero-inline-row {
    grid-template-columns: 1fr;
  }

  .student-hero-inline-season .rank-season-card {
    min-height: 96px;
  }
}

@media (max-width: 560px) {
  .student-header-clean {
    min-height: auto;
  }

  .student-header-clean .student-header-actions {
    width: 100%;
  }

  .student-header-clean .student-header-actions .btn {
    flex: 1;
  }

  .student-hero-mini-card {
    min-height: 92px;
    padding: 12px 14px;
  }

  .student-hero-mini-avatar {
    width: 62px;
    height: 62px;
    border-radius: 19px;
    flex-basis: 62px;
  }

  .student-hero-mini-name {
    font-size:18px;
  }

  .student-hero-mini-nickname {
    display: block;
    margin-left: 0;
    margin-top: 2px;
    font-size:14px;
  }

  .student-hero-mini-sub {
    font-size:13px;
  }

  .student-hero-inline-season .rank-season-card {
    flex-direction: column;
    align-items: flex-start;
  }

  .student-hero-inline-season .season-countdown {
    font-size:20px;
  }
}
/* =====================================================
   PUBLIC DASHBOARD HEADER BADGE / RULE BUTTON FIX
   ปรับปุ่มกติกาแรงค์และป้าย CLASS LEADER ให้สูงเท่ากัน
===================================================== */

.public-insight-grid .panel-title-row,
.dashboard-insight-grid .panel-title-row,
.public-dashboard-grid .panel-title-row {
  min-height: 38px;
  align-items: center;
}

.panel-header-badge,
.rank-rule-btn,
button.rank-rule-btn,
.btn.rank-rule-btn {
  height: 30px;
  min-height: 30px;
  padding: 0 12px !important;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size:13px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

/* ถ้าปุ่มกติกาแรงค์ไม่ได้ใช้ class rank-rule-btn ให้จับปุ่มในหัว TR107 Rank */
#topStudentListWrapper .btn,
.tr107-rank-rule-btn {
  height: 30px;
  min-height: 30px;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  align-items: center;
}

/* ลดระยะหัวกล่องไม่ให้กินพื้นที่เกิน */
.public-insight-grid .panel,
.dashboard-insight-grid .panel,
.public-dashboard-grid .panel {
  padding-top: 16px;
}
/* =====================================================
   PUBLIC E-PORT RANK NAME
   แสดงชื่อแรงค์อังกฤษหลัก / ไทยรอง และซ่อนคะแนนรายคน
===================================================== */

.eport-student-rank span {
  display: block;
  color: var(--rank-color, #f59e0b);
  font-weight: 900;
  font-size:13px;
  line-height: 1.15;
  text-transform: none;
  letter-spacing: .2px;
}

.eport-student-rank small {
  display: block;
  margin-top: 2px;
  color: #64748b;
  font-size:13px;
  font-weight: 800;
  line-height: 1.15;
}
/* =====================================================
   RANK COLOR BORDER FROM RewardRanks.Color
   ให้ป้าย/การ์ด Rank ใช้สีตามแรงค์จากชีท
===================================================== */

.compact-rank-item {
  border-left: 5px solid var(--rank-color, #f59e0b) !important;
}

.compact-rank-name {
  color: var(--rank-color, #f59e0b) !important;
}

.eport-student-rank {
  border-left-color: var(--rank-color, #f59e0b) !important;
}

.eport-student-rank span {
  color: var(--rank-color, #f59e0b) !important;
}
/* =====================================================
   BEHAVIOR EDIT - STUDENT LIST TABLE
===================================================== */

.behavior-edit-student-table-wrap {
  width: 100% !important;
  overflow-x: auto !important;
}

.behavior-edit-student-table {
  width: 100% !important;
}

.behavior-edit-student-table th,
.behavior-edit-student-table td {
  vertical-align: middle !important;
}

.behavior-edit-student-row.selected {
  background: #eff6ff !important;
}

.behavior-edit-view-btn {
  width: auto !important;
  min-width: 94px !important;
  padding: 7px 12px !important;
  border-radius: 999px !important;
  white-space: nowrap !important;
}
/* =====================================================
   BEHAVIOR EDIT MODAL
   ปรับหน้าต่างแก้ไขคะแนนพฤติกรรม
===================================================== */

.behavior-edit-modal {
  border-radius: 26px !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.behavior-edit-modal-title {
  padding-top: 28px !important;
  font-size:26px !important;
  font-weight: 900 !important;
  color: #0f172a !important;
}

.behavior-edit-modal-body {
  text-align: left;
  padding: 4px 18px 0;
}

.behavior-edit-student-mini {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  background: linear-gradient(135deg, #eff6ff, #f8fafc);
  border: 1px solid #dbeafe;
  border-radius: 18px;
  padding: 12px;
  margin-bottom: 14px;
}

.behavior-edit-student-icon {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: #2563eb;
  color: #ffffff;
  font-size:20px;
}

.behavior-edit-student-mini strong {
  display: block;
  font-size:16px;
  font-weight: 900;
  color: #0f172a;
}

.behavior-edit-student-mini span {
  display: block;
  margin-top: 2px;
  color: #64748b;
  font-size:13px;
}

.behavior-edit-old-score {
  min-width: 62px;
  height: 40px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-weight: 1000;
  font-size:18px;
}

.behavior-score-plus {
  background: #dcfce7;
  color: #15803d;
}

.behavior-score-minus {
  background: #ffe4e6;
  color: #be123c;
}

.behavior-edit-old-box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}

.behavior-edit-old-box > div {
  border: 1px solid #e2e8f0;
  background: #ffffff;
  border-radius: 16px;
  padding: 10px 12px;
}

.behavior-edit-old-box span {
  display: block;
  color: #64748b;
  font-size:13px;
  font-weight: 800;
  margin-bottom: 4px;
}

.behavior-edit-old-box strong {
  display: block;
  color: #0f172a;
  font-weight: 900;
  line-height: 1.4;
}

.behavior-edit-form-grid {
  display: grid;
  grid-template-columns: 1fr 150px;
  gap: 12px;
}

.behavior-edit-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.behavior-edit-field.field-wide {
  grid-column: 1 / -1;
}

.behavior-edit-field label {
  font-weight: 900;
  color: #334155;
  font-size:14px;
}

.behavior-edit-field label b {
  color: #dc2626;
}

.behavior-edit-input,
.behavior-edit-textarea {
  width: 100%;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  border-radius: 14px;
  padding: 11px 13px;
  font-size:15px;
  outline: none;
  color: #0f172a;
  transition: .16s ease;
  box-sizing: border-box;
}

.behavior-edit-input:focus,
.behavior-edit-textarea:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, .12);
}

.behavior-edit-textarea {
  min-height: 92px;
  resize: vertical;
}

.behavior-edit-textarea.reason {
  min-height: 78px;
}

.behavior-edit-confirm-btn,
.behavior-edit-cancel-btn {
  border: 0;
  border-radius: 999px;
  padding: 12px 18px;
  font-weight: 900;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 10px 5px 0;
}

.behavior-edit-confirm-btn {
  background: #2563eb;
  color: #ffffff;
  box-shadow: 0 10px 24px rgba(37, 99, 235, .22);
}

.behavior-edit-confirm-btn:hover {
  background: #1d4ed8;
}

.behavior-edit-cancel-btn {
  background: #64748b;
  color: #ffffff;
}

.behavior-edit-cancel-btn:hover {
  background: #475569;
}

@media (max-width: 640px) {
  .behavior-edit-student-mini {
    grid-template-columns: 44px 1fr;
  }

  .behavior-edit-old-score {
    grid-column: 1 / -1;
    width: 100%;
  }

  .behavior-edit-old-box,
  .behavior-edit-form-grid {
    grid-template-columns: 1fr;
  }
}
/* =====================================================
   FIX SWEETALERT ACTION BUTTON SPACING
   เพิ่มระยะห่างปุ่มล่างของ popup แก้ไข/ยกเลิกคะแนน
===================================================== */

.behavior-edit-modal .swal2-actions,
.behavior-cancel-modal .swal2-actions {
  margin: 22px 0 26px !important;
  padding: 0 18px !important;
  gap: 12px !important;
}

.behavior-edit-confirm-btn,
.behavior-edit-cancel-btn,
.behavior-cancel-confirm-btn,
.behavior-cancel-cancel-btn {
  min-width: 138px !important;
  justify-content: center !important;
}
/* =====================================================
   BEHAVIOR CANCEL MODAL
   Popup ยกเลิกรายการคะแนนพฤติกรรม
===================================================== */

.behavior-cancel-modal {
  border-radius: 26px !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.behavior-cancel-warning {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  background: linear-gradient(135deg, #fff7ed, #fff1f2);
  border: 1px solid #fed7aa;
  border-radius: 18px;
  padding: 14px;
  margin-bottom: 14px;
}

.behavior-cancel-warning-icon {
  width: 56px;
  height: 56px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: #f97316;
  color: #ffffff;
  font-size:22px;
}

.behavior-cancel-warning strong {
  display: block;
  color: #9a3412;
  font-size:17px;
  font-weight: 1000;
  margin-bottom: 4px;
}

.behavior-cancel-warning span {
  display: block;
  color: #7c2d12;
  font-size:13px;
  line-height: 1.55;
}

.behavior-edit-student-icon.cancel {
  background: #ef4444;
}

.behavior-cancel-confirm-btn,
.behavior-cancel-cancel-btn {
  border: 0;
  border-radius: 999px;
  padding: 12px 18px;
  font-weight: 900;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 10px 5px 0;
}

.behavior-cancel-confirm-btn {
  background: #dc2626;
  color: #ffffff;
  box-shadow: 0 10px 24px rgba(220, 38, 38, .22);
}

.behavior-cancel-confirm-btn:hover {
  background: #b91c1c;
}

.behavior-cancel-cancel-btn {
  background: #64748b;
  color: #ffffff;
}

.behavior-cancel-cancel-btn:hover {
  background: #475569;
}

/* =====================================================
   DISABLED ACTIONS FOR CANCELLED BEHAVIOR RECORDS
===================================================== */

.behavior-edit-table tr.is-cancelled {
  background: #f8fafc !important;
  color: #64748b !important;
}

.behavior-edit-table tr.is-cancelled strong {
  color: #64748b !important;
}

.behavior-edit-table button:disabled {
  opacity: .38 !important;
  cursor: not-allowed !important;
  filter: grayscale(1) !important;
  box-shadow: none !important;
}

.behavior-edit-table tr.is-cancelled .btn-danger,
.behavior-edit-table tr.is-cancelled .btn-soft {
  background: #e2e8f0 !important;
  color: #94a3b8 !important;
  border-color: #e2e8f0 !important;
}
/* =====================================================
   BEHAVIOR EDIT COMPACT UI
===================================================== */

.behavior-edit-mini-stats {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin-top: 12px !important;
}

.behavior-mini-stat {
  min-height: 72px !important;
  border-radius: 18px !important;
  padding: 12px 14px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  overflow: hidden !important;
  position: relative !important;
}

.behavior-mini-stat i {
  width: 38px !important;
  height: 38px !important;
  border-radius: 14px !important;
  display: grid !important;
  place-items: center !important;
  font-size:17px !important;
  background: rgba(255,255,255,.75) !important;
}

.behavior-mini-stat strong {
  display: block !important;
  font-size:24px !important;
  line-height: 1 !important;
  font-weight: 1000 !important;
}

.behavior-mini-stat span {
  display: block !important;
  margin-top: 3px !important;
  font-size:13px !important;
  color: #64748b !important;
  font-weight: 700 !important;
}

.behavior-mini-stat.mini-green {
  background: #ecfdf5 !important;
  border: 1px solid #bbf7d0 !important;
  color: #16a34a !important;
}

.behavior-mini-stat.mini-red {
  background: #fff1f2 !important;
  border: 1px solid #fecdd3 !important;
  color: #e11d48 !important;
}

.behavior-mini-stat.mini-blue {
  background: #eff6ff !important;
  border: 1px solid #bfdbfe !important;
  color: #2563eb !important;
}

.behavior-mini-stat.mini-yellow {
  background: #fffbeb !important;
  border: 1px solid #fde68a !important;
  color: #d97706 !important;
}

/* popup compact */
.behavior-edit-modal-compact,
.behavior-cancel-modal-compact {
  border-radius: 24px !important;
}

.behavior-edit-modal-body.compact {
  padding: 0 12px !important;
}

.behavior-edit-modal-compact .behavior-edit-modal-title,
.behavior-cancel-modal-compact .behavior-edit-modal-title {
  font-size:23px !important;
  padding-top: 22px !important;
}

.behavior-edit-old-box.compact {
  margin-bottom: 12px !important;
}

.behavior-edit-form-grid.compact {
  grid-template-columns: 1fr 130px !important;
  gap: 10px !important;
}

.behavior-edit-textarea.compact {
  min-height: 74px !important;
}

.behavior-edit-modal .swal2-actions,
.behavior-cancel-modal .swal2-actions {
  margin: 18px 0 24px !important;
  padding: 0 18px !important;
  gap: 12px !important;
}

.behavior-cancel-warning.compact {
  margin-bottom: 12px !important;
  padding: 12px !important;
}

/* teacher header title icon */
#teacherPageTitle {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
}

#teacherPageTitle i {
  color: #2563eb !important;
  font-size:.92em !important;
}

.teacher-view-desc {
  margin-bottom: 14px !important;
  color: #64748b !important;
  line-height: 1.6 !important;
}

@media (max-width: 900px) {
  .behavior-edit-mini-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 640px) {
  .behavior-edit-mini-stats {
    grid-template-columns: 1fr !important;
  }

  .behavior-edit-form-grid.compact {
    grid-template-columns: 1fr !important;
  }
}
/* =====================================================
   BEHAVIOR EDIT - NEW TWO COLUMN LAYOUT
===================================================== */

.behavior-edit-layout {
  display: grid !important;
  grid-template-columns: minmax(420px, 1fr) minmax(520px, 1fr) !important;
  gap: 16px !important;
  align-items: start !important;
}

.behavior-edit-left,
.behavior-edit-right {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

.behavior-edit-filter-panel {
  min-height: auto !important;
}

.behavior-edit-filter-grid {
  display: grid !important;
  grid-template-columns: 180px minmax(0, 1fr) !important;
  gap: 12px !important;
  align-items: end !important;
}

.behavior-edit-filter-actions {
  margin-top: 12px !important;
}

.behavior-edit-record-panel {
  min-height: 620px !important;
}

.behavior-selected-student-box {
  border: 1px solid #dbeafe !important;
  background: #ffffff !important;
  border-radius: 16px !important;
  padding: 12px !important;
}

.behavior-selected-student {
  display: grid !important;
  grid-template-columns: 46px minmax(0, 1fr) auto !important;
  gap: 12px !important;
  align-items: center !important;
}

.behavior-selected-icon {
  width: 46px !important;
  height: 46px !important;
  border-radius: 15px !important;
  background: #2563eb !important;
  color: #ffffff !important;
  display: grid !important;
  place-items: center !important;
  font-size:18px !important;
}

.behavior-selected-info strong {
  display: block !important;
  color: #0f172a !important;
  font-weight: 1000 !important;
  font-size:16px !important;
}

.behavior-selected-info span,
.behavior-selected-info small {
  display: block !important;
  color: #64748b !important;
  margin-top: 2px !important;
}

.behavior-selected-score {
  min-width: 58px !important;
  height: 38px !important;
  border-radius: 999px !important;
  display: grid !important;
  place-items: center !important;
  font-weight: 1000 !important;
}

.behavior-action-stack {
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 8px !important;
}

.btn-admin {
  background: #334155 !important;
  color: #ffffff !important;
  border: 1px solid #334155 !important;
}

.btn-admin:hover {
  background: #0f172a !important;
  border-color: #0f172a !important;
}

.behavior-admin-delete-modal {
  border-radius: 24px !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.behavior-admin-confirm-btn {
  border: 0 !important;
  border-radius: 999px !important;
  padding: 12px 18px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: #0f172a !important;
  color: #ffffff !important;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .22) !important;
}

.behavior-admin-confirm-btn:hover {
  background: #020617 !important;
}

@media (max-width: 1180px) {
  .behavior-edit-layout {
    grid-template-columns: 1fr !important;
  }

  .behavior-edit-record-panel {
    min-height: auto !important;
  }
}

@media (max-width: 720px) {
  .behavior-edit-filter-grid {
    grid-template-columns: 1fr !important;
  }

  .behavior-selected-student {
    grid-template-columns: 42px minmax(0, 1fr) !important;
  }

  .behavior-selected-score {
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }
}

/* =====================================================
   BEHAVIOR EDIT - COMPACT FONT SIZE
   ลดขนาดตัวอักษรใน รายชื่อนักเรียน / รายการคะแนนพฤติกรรม
===================================================== */

/* หัวกล่อง รายชื่อนักเรียน / รายการคะแนน */
#teacherBehaviorEdit .panel-title {
  font-size:15px !important;
  line-height: 1.35 !important;
}

/* คำอธิบาย / ข้อความรอง */
#teacherBehaviorEdit .event-meta {
  font-size:13px !important;
  line-height: 1.45 !important;
}

/* ตารางฝั่งรายชื่อนักเรียน + รายการคะแนน */
#teacherBehaviorEdit .data-table {
  font-size:13px !important;
}

#teacherBehaviorEdit .data-table th {
  font-size:13px !important;
  padding: 9px 10px !important;
  line-height: 1.35 !important;
}

#teacherBehaviorEdit .data-table td {
  font-size:13px !important;
  padding: 9px 10px !important;
  line-height: 1.35 !important;
  vertical-align: top !important;
}

/* ชื่อนักเรียน / รายการพฤติกรรม ที่เป็นตัวหนา */
#teacherBehaviorEdit .data-table td strong {
  font-size:13px !important;
  line-height: 1.35 !important;
}

/* ปุ่มในตารางให้เล็กลง */
#teacherBehaviorEdit .data-table .btn-sm {
  font-size:13px !important;
  padding: 6px 10px !important;
  min-height: 30px !important;
}

/* การ์ดนักเรียนที่เลือกฝั่งขวา */
#teacherBehaviorEdit .behavior-selected-info strong {
  font-size:14px !important;
}

#teacherBehaviorEdit .behavior-selected-info span,
#teacherBehaviorEdit .behavior-selected-info small {
  font-size:13px !important;
}

/* การ์ดคะแนนบวก/ลบ/สุทธิ/รายการ */
#teacherBehaviorEdit .behavior-mini-stat strong {
  font-size:20px !important;
}

#teacherBehaviorEdit .behavior-mini-stat span {
  font-size:13px !important;
}

/* badge สถานะ */
#teacherBehaviorEdit .status-pill {
  font-size:13px !important;
  padding: 5px 9px !important;
}

/* =====================================================
   TEACHER OVERVIEW DASHBOARD - PHASE 1
   หน้า "ภาพรวม" สำหรับครู แบบอ่านง่าย ใช้งานจริง
===================================================== */

.teacher-overview-head {
  display: flex !important;
  justify-content: space-between !important;
  gap: 16px !important;
  align-items: flex-start !important;
  margin-bottom: 16px !important;
  background: #ffffff !important;
  border: 1px solid #dbeafe !important;
  border-radius: 22px !important;
  padding: 16px 18px !important;
}

.teacher-overview-head h3 {
  margin: 0 !important;
  color: #0f172a !important;
  font-size:20px !important;
  font-weight: 1000 !important;
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
}

.teacher-overview-head h3 i {
  color: #2563eb !important;
}

.teacher-overview-head p {
  margin: 5px 0 0 !important;
  color: #64748b !important;
  font-size:13px !important;
  line-height: 1.5 !important;
}

.teacher-overview-updated {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  color: #475569 !important;
  border-radius: 999px !important;
  padding: 8px 12px !important;
  font-size:13px !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}

.teacher-overview-stat-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin-bottom: 16px !important;
}

.teacher-overview-stat-grid .stat-card {
  min-height: 98px !important;
  padding: 14px !important;
}

.teacher-overview-stat-grid .stat-card h3 {
  font-size:28px !important;
}

.teacher-overview-stat-grid .stat-card p {
  font-size:13px !important;
}

.teacher-overview-grid-main {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 16px !important;
  margin-bottom: 16px !important;
  align-items: start !important;
}

.teacher-overview-panel {
  min-height: 260px !important;
}

.teacher-overview-panel .panel-title {
  font-size:15px !important;
  line-height: 1.35 !important;
  margin-bottom: 6px !important;
}

.overview-title-red i {
  color: #dc2626 !important;
}

.overview-title-orange i {
  color: #d97706 !important;
}

.overview-title-green i {
  color: #16a34a !important;
}

.overview-title-blue i {
  color: #2563eb !important;
}

.overview-title-slate i {
  color: #475569 !important;
}

.overview-desc {
  color: #64748b !important;
  font-size:13px !important;
  line-height: 1.55 !important;
  margin-bottom: 12px !important;
}

.teacher-overview-list {
  width: 100% !important;
}

.overview-table {
  font-size:13px !important;
}

.overview-table th {
  font-size:13px !important;
  padding: 9px 10px !important;
  background: #f8fafc !important;
  color: #475569 !important;
  white-space: nowrap !important;
}

.overview-table td {
  font-size:13px !important;
  padding: 9px 10px !important;
  vertical-align: top !important;
  line-height: 1.4 !important;
}

.overview-table td strong {
  font-size:13px !important;
  color: #0f172a !important;
}

.overview-table .event-meta {
  font-size:13px !important;
  line-height: 1.35 !important;
  margin-top: 2px !important;
}

.overview-count-pill {
  display: inline-flex !important;
  min-width: 30px !important;
  height: 26px !important;
  border-radius: 999px !important;
  align-items: center !important;
  justify-content: center !important;
  font-size:13px !important;
  font-weight: 1000 !important;
  padding: 0 9px !important;
}

.overview-count-pill.danger {
  background: #fff1f2 !important;
  border: 1px solid #fecdd3 !important;
  color: #e11d48 !important;
}

.overview-count-pill.warning {
  background: #fffbeb !important;
  border: 1px solid #fde68a !important;
  color: #d97706 !important;
}

.overview-type-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  padding: 5px 9px !important;
  font-size:13px !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}

.overview-type-pill.type-behavior {
  background: #eff6ff !important;
  border: 1px solid #bfdbfe !important;
  color: #2563eb !important;
}

.overview-type-pill.type-pending {
  background: #fff7ed !important;
  border: 1px solid #fed7aa !important;
  color: #ea580c !important;
}

.overview-type-pill.type-submit {
  background: #ecfdf5 !important;
  border: 1px solid #bbf7d0 !important;
  color: #16a34a !important;
}

.overview-type-pill.type-default {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  color: #475569 !important;
}

@media (max-width: 1180px) {
  .teacher-overview-stat-grid,
  .teacher-overview-grid-main {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (max-width: 780px) {
  .teacher-overview-head {
    flex-direction: column !important;
  }

  .teacher-overview-updated {
    white-space: normal !important;
  }

  .teacher-overview-stat-grid,
  .teacher-overview-grid-main {
    grid-template-columns: 1fr !important;
  }

  .overview-table {
    min-width: 640px !important;
  }
}
/* =====================================================
   TEACHER OVERVIEW - RANK NAME UNDER STUDENT
===================================================== */

.overview-student-meta {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 3px !important;
}

.overview-rank-name {
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  font-weight: 900 !important;
  font-size:13px !important;
  white-space: nowrap !important;
}

.overview-rank-name i {
  font-size:13px !important;
}
/* =====================================================
   TEACHER OVERVIEW - QUICK JUMP MENU
===================================================== */

.teacher-overview-head-actions {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 8px !important;
  min-width: 420px !important;
}

.teacher-overview-jump-menu {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  gap: 6px !important;
}

.teacher-overview-jump-menu button {
  border: 1px solid #dbeafe !important;
  background: #eff6ff !important;
  color: #1d4ed8 !important;
  border-radius: 999px !important;
  padding: 6px 10px !important;
  font-size:13px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
  transition: transform .15s ease, background .15s ease, border-color .15s ease !important;
}

.teacher-overview-jump-menu button:hover {
  background: #dbeafe !important;
  border-color: #bfdbfe !important;
  transform: translateY(-1px) !important;
}

.overview-panel-focus {
  outline: 3px solid rgba(37, 99, 235, .18) !important;
  box-shadow: 0 0 0 6px rgba(37, 99, 235, .08) !important;
  transition: box-shadow .2s ease, outline .2s ease !important;
}

@media (max-width: 980px) {
  .teacher-overview-head-actions {
    align-items: flex-start !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  .teacher-overview-jump-menu {
    justify-content: flex-start !important;
  }
}
/* =====================================================
   TEACHER OVERVIEW - STICKY QUICK MENU + TOP BUTTON
===================================================== */

.teacher-overview-top-btn {
  position: fixed !important;
  right: 22px !important;
  bottom: 22px !important;
  z-index: 120 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  border: 1px solid #bfdbfe !important;
  background: #2563eb !important;
  color: #ffffff !important;
  border-radius: 999px !important;
  padding: 10px 14px !important;
  font-size:13px !important;
  font-weight: 1000 !important;
  cursor: pointer !important;
  box-shadow: 0 12px 30px rgba(37, 99, 235, .28) !important;
  transition: transform .15s ease, box-shadow .15s ease !important;
}

.teacher-overview-top-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 16px 34px rgba(37, 99, 235, .34) !important;
}

.teacher-overview-top-btn i {
  font-size:13px !important;
}

@media (max-width: 780px) {
  #teacherDashboard .teacher-overview-head {
    top: 6px !important;
  }

  #teacherDashboard .teacher-overview-panel {
    scroll-margin-top: 170px !important;
  }

  .teacher-overview-top-btn {
    right: 14px !important;
    bottom: 14px !important;
    padding: 10px 12px !important;
  }
}
/* =====================================================
   TEACHER OVERVIEW - STICKY HEADER MENU
   ตรึงแถบภาพรวมสำหรับครู + เมนูลัด เวลาเลื่อนหน้า
===================================================== */

#teacherDashboard {
  overflow: visible !important;
}

#teacherDashboard .teacher-overview-head {
  position: sticky !important;
  top: 8px !important;
  z-index: 300 !important;

  background: rgba(255, 255, 255, 0.96) !important;
  backdrop-filter: blur(12px) !important;

  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.10) !important;
  border: 1px solid #dbeafe !important;
}

/* ตอนกดเมนูลัดเลื่อนลงไป ไม่ให้หัวข้อถูกแถบ sticky บัง */
#teacherDashboard .teacher-overview-panel {
  scroll-margin-top: 140px !important;
}

/* กันกรณี main หรือ teacher-view มี overflow ทำให้ sticky ไม่ทำงาน */
.main,
.teacher-view {
  overflow: visible !important;
}

@media (max-width: 780px) {
  #teacherDashboard .teacher-overview-head {
    top: 6px !important;
  }

  #teacherDashboard .teacher-overview-panel {
    scroll-margin-top: 180px !important;
  }
}
.student-check.student-check-compact {
  min-height: 64px !important;
  padding: 12px 14px !important;
  gap: 10px !important;
}

.student-check.student-check-compact .student-info {
  min-width: 0 !important;
}

.student-check.student-check-compact .student-info strong {
  line-height: 1.25 !important;
}

.student-check.student-check-compact .student-info span {
  line-height: 1.25 !important;
}

/* =====================================================
   RESPONSIVE REPORT FILTERS
   ใช้เฉพาะหน้า รายงานคะแนนพฤติกรรม / รายงานงานค้าง
   ไม่กระทบ form-grid หน้าอื่น
===================================================== */

.report-filter-panel {
  overflow: visible !important;
}

.report-filter-grid {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 12px !important;
  align-items: end !important;
}

.report-filter-row-gap {
  margin-top: 12px !important;
}

.report-filter-item {
  min-width: 0 !important;
}

.report-filter-item label,
.report-action-cell label,
.report-other-role-box label {
  display: block !important;
  margin-bottom: 6px !important;
  font-size:13px !important;
  font-weight: 900 !important;
  color: #0f172a !important;
  line-height: 1.25 !important;
  white-space: normal !important;
  word-break: keep-all !important;
}

.report-filter-item .input,
.report-action-cell .input,
.report-other-role-box .input {
  width: 100% !important;
  min-width: 0 !important;
}

.report-action-cell {
  min-width: 0 !important;
}

.report-action-label {
  display: block !important;
}

.report-action-buttons {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
  min-width: 0 !important;
}

.report-action-buttons .btn {
  min-height: 42px !important;
  padding: 0 14px !important;
  white-space: nowrap !important;
  flex: 0 0 auto !important;
}

.report-action-buttons-bottom {
  margin-top: 14px !important;
}

.report-other-role-box {
  margin-top: 12px !important;
}

/* จอขนาดกลาง เช่น Notebook เล็ก / Tablet แนวนอน */
@media (max-width: 1280px) {
  .report-filter-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  .report-action-cell {
    grid-column: span 2 !important;
  }
}

/* Tablet แนวตั้ง / จอกว้างน้อย */
@media (max-width: 980px) {
  .report-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  .report-action-cell {
    grid-column: 1 / -1 !important;
  }

  .report-action-buttons {
    flex-wrap: wrap !important;
  }

  .report-action-buttons .btn {
    flex: 1 1 180px !important;
    justify-content: center !important;
  }

  .report-action-label {
    display: none !important;
  }
}

/* มือถือ */
@media (max-width: 640px) {
  .report-filter-panel {
    padding: 16px !important;
    border-radius: 22px !important;
  }

  .report-filter-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .report-filter-row-gap {
    margin-top: 12px !important;
  }

  .report-filter-item label,
  .report-action-cell label,
  .report-other-role-box label {
    font-size:14px !important;
    line-height: 1.25 !important;
  }

  .report-filter-item .input,
  .report-other-role-box .input {
    min-height: 46px !important;
    font-size:14px !important;
    border-radius: 14px !important;
  }

  .report-action-cell {
    grid-column: 1 / -1 !important;
  }

  .report-action-buttons,
  .report-action-buttons-bottom {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin-top: 12px !important;
  }

  .report-action-buttons .btn,
  .report-action-buttons-bottom .btn {
    width: 100% !important;
    min-height: 48px !important;
    justify-content: center !important;
    font-size:14px !important;
    border-radius: 16px !important;
  }
}

/* มือถือจอแคบมาก เช่น iPhone SE */
@media (max-width: 390px) {
  .report-filter-panel {
    padding: 14px !important;
  }

  .report-filter-item label,
  .report-other-role-box label {
    font-size:13px !important;
  }

  .report-filter-item .input,
  .report-other-role-box .input {
    font-size:13px !important;
  }

  .report-action-buttons .btn,
  .report-action-buttons-bottom .btn {
    font-size:13px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}

/* แถวตัวกรองแบบ 6 ช่อง สำหรับรายงานงานค้าง */
.report-filter-grid-6 {
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
}

/* ปุ่มในแถวเดียวกับตัวกรอง */
.report-filter-grid-6 .report-action-cell {
  min-width: 0 !important;
}

.report-filter-grid-6 .report-action-buttons {
  height: 100% !important;
  align-items: end !important;
}

/* จอ Notebook / Tablet แนวนอน */
@media (max-width: 1280px) {
  .report-filter-grid-6 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .report-filter-grid-6 .report-action-cell {
    grid-column: span 2 !important;
  }
}

/* Tablet แนวตั้ง */
@media (max-width: 980px) {
  .report-filter-grid-6 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .report-filter-grid-6 .report-action-cell {
    grid-column: 1 / -1 !important;
  }

  .report-filter-grid-6 .report-action-buttons {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .report-filter-grid-6 .report-action-buttons .btn {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* มือถือ */
@media (max-width: 640px) {
  .report-filter-grid-6 {
    grid-template-columns: 1fr !important;
  }

  .report-filter-grid-6 .report-action-cell {
    grid-column: 1 / -1 !important;
  }

  .report-filter-grid-6 .report-action-buttons {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    gap: 10px !important;
  }

  .report-filter-grid-6 .report-action-buttons .btn {
    width: 100% !important;
    min-height: 48px !important;
    justify-content: center !important;
  }
}
/* =====================================================
   TEACHER TOP ACTION BUTTONS
   ปุ่มด้านขวาบน: รีเฟรช / กติกาแรงค์ / ออกจากระบบ
===================================================== */

.teacher-top-actions {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
}

.teacher-top-btn {
  min-height: 42px !important;
  border-radius: 999px !important;
  padding: 0 16px !important;
  font-weight: 900 !important;
  gap: 8px !important;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06) !important;
}

.teacher-top-btn i {
  font-size:14px !important;
}

.teacher-refresh-btn i {
  color: #2563eb !important;
}

.teacher-rank-btn i {
  color: #f59e0b !important;
}

.btn-danger-soft {
  border: 1px solid #fecaca !important;
  background: #fff1f2 !important;
  color: #be123c !important;
}

.btn-danger-soft:hover {
  background: #ffe4e6 !important;
  border-color: #fb7185 !important;
  color: #9f1239 !important;
}

.teacher-logout-btn i {
  color: #e11d48 !important;
}

/* จอเล็ก: ให้ปุ่มไม่ล้น */
@media (max-width: 780px) {
  .topbar {
    align-items: flex-start !important;
    gap: 14px !important;
  }

  .teacher-top-actions {
    width: 100% !important;
    justify-content: flex-start !important;
    gap: 8px !important;
  }

  .teacher-top-btn {
    min-height: 40px !important;
    padding: 0 12px !important;
    font-size:13px !important;
  }
}

/* มือถือแคบมาก: ให้ปุ่มเรียงเต็มความกว้างอ่านง่าย */
@media (max-width: 420px) {
  .teacher-top-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    width: 100% !important;
  }

  .teacher-top-actions .teacher-logout-btn {
    grid-column: 1 / -1 !important;
  }

  .teacher-top-btn {
    width: 100% !important;
    justify-content: center !important;
  }
}
.student-check.student-check-mini {
  min-height: 58px !important;
  padding: 12px 14px !important;
  gap: 12px !important;
  display: flex !important;
  align-items: center !important;
}

.student-check.student-check-mini input[type="checkbox"] {
  flex: 0 0 auto !important;
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
}

.student-mini-info {
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
}

.student-mini-info strong {
  font-size:14px !important;
  line-height: 1.25 !important;
  font-weight: 900 !important;
  color: #0f172a !important;
}

.student-mini-info span {
  font-size:13px !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
  color: #475569 !important;
}

.student-check.student-check-mini img,
.student-check.student-check-mini .avatar,
.student-check.student-check-mini .student-avatar {
  display: none !important;
}
/* =====================================================
   PENDING ASSIGNMENT STUDENT LIST - COMPACT SAFE FIX
   หน้า: บันทึกงานค้าง
   ซ่อนรูป/โลโก้โรงเรียน ไม่แตะ Script
===================================================== */

#pendingStudentList .student-check img {
  display: none !important;
}

#pendingStudentList .student-check {
  min-height: 56px !important;
  padding: 12px 14px !important;
  gap: 12px !important;
  align-items: center !important;
}

#pendingStudentList .student-check input[type="checkbox"] {
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
}

#pendingStudentList .student-info {
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
}

#pendingStudentList .student-info strong {
  font-size:14px !important;
  line-height: 1.25 !important;
  font-weight: 900 !important;
  color: #0f172a !important;
}

#pendingStudentList .student-info span {
  font-size:13px !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
  color: #475569 !important;
}

@media (max-width: 640px) {
  #pendingStudentList .student-check {
    min-height: 54px !important;
    padding: 11px 12px !important;
  }

  #pendingStudentList .student-info strong {
    font-size:13.5px !important;
  }

  #pendingStudentList .student-info span {
    font-size:13px !important;
  }
}

/* =====================================================
   ASSIGNMENT MODE TABS
   หน้า: บันทึกงานค้าง
===================================================== */

.assignment-mode-tabs {
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 0 0 14px 0;
  padding: 8px;
  border: 1px solid #dbeafe;
  border-radius: 18px;
  background: #f8fbff;
}

.assignment-mode-tab {
  border: 1px solid #dbeafe;
  background: #ffffff;
  color: #1e40af;
  border-radius: 14px;
  padding: 10px 16px;
  font-family: inherit;
  font-size:14px;
  font-weight: 900;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
}

.assignment-mode-tab:hover {
  background: #eff6ff;
}

.assignment-mode-tab.active {
  background: #2563eb;
  border-color: #2563eb;
  color: #ffffff;
}

.assignment-mode-panel.hidden {
  display: none !important;
}

.add-existing-assignment-panel {
  margin-top: 0 !important;
}

#existingAssignStudentList {
  margin-top: 12px;
}

.existing-student-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px;
}

.existing-student-row {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 54px;
  padding: 11px 13px;
  border: 1px solid #dbeafe;
  border-radius: 15px;
  background: #ffffff;
  cursor: pointer;
}

.existing-student-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
}

.existing-student-name {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.existing-student-name strong {
  font-size:14px;
  line-height: 1.25;
  font-weight: 900;
  color: #0f172a;
}

.existing-student-name span {
  font-size:13px;
  line-height: 1.25;
  font-weight: 700;
  color: #64748b;
}

.existing-student-row.is-disabled {
  background: #f8fafc;
  border-color: #e2e8f0;
  cursor: not-allowed;
  opacity: 0.72;
}

.existing-student-row.is-disabled strong {
  color: #64748b;
}

@media (max-width: 640px) {
  .assignment-mode-tabs {
    flex-direction: column;
    align-items: stretch;
  }

  .assignment-mode-tab {
    justify-content: center;
    width: 100%;
  }

  .existing-student-list {
    grid-template-columns: 1fr;
  }
}

/* =====================================================
   COMPACT CREATE PENDING ASSIGNMENT FORM
   หน้า: บันทึกงานค้าง > สร้างงานค้างใหม่
===================================================== */

#assignmentCreatePanel .assignment-create-grid {
  grid-template-columns:
    minmax(130px, 0.9fr)
    minmax(180px, 1.1fr)
    minmax(160px, 1fr)
    minmax(150px, 0.9fr)
    minmax(120px, 0.7fr)
    minmax(140px, 0.8fr);
  gap: 10px 12px;
  align-items: end;
}

#assignmentCreatePanel .assignment-create-grid label,
.assignment-title-detail-grid label {
  margin-bottom: 5px;
}

#assignmentCreatePanel .assignment-create-grid .input {
  min-height: 42px;
  height: 42px;
  padding-top: 8px;
  padding-bottom: 8px;
}

.assignment-title-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  margin-top: 10px;
  align-items: start;
}

.assignment-title-detail-grid .input {
  width: 100%;
}

.assignment-detail-compact {
  min-height: 58px !important;
  height: 58px;
  resize: vertical;
  line-height: 1.35;
}

#assignmentCreatePanel .toolbar {
  margin-top: 12px;
}

#assignmentCreatePanel #pendingStudentList {
  margin-top: 12px;
}

@media (max-width: 1100px) {
  #assignmentCreatePanel .assignment-create-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  #assignmentCreatePanel .assignment-create-grid,
  .assignment-title-detail-grid {
    grid-template-columns: 1fr;
  }

  .assignment-detail-compact {
    min-height: 70px !important;
    height: 70px;
  }
}

/* =====================================================
   SUBMIT PENDING WORK BY STUDENT
   หน้า: ส่งงานค้างแบบรายบุคคล
===================================================== */

.submit-by-student-panel {
  overflow: visible;
}

.submit-by-student-filter-grid {
  grid-template-columns: minmax(140px, 0.8fr) minmax(220px, 1.4fr) minmax(130px, 0.7fr);
  gap: 12px;
  align-items: end;
}

.submit-by-student-filter-grid .input {
  min-height: 42px;
  height: 42px;
}

.submit-by-student-note-row {
  margin-top: 10px;
}

.submit-by-student-note {
  min-height: 58px !important;
  height: 58px;
  resize: vertical;
  line-height: 1.35;
}

.submit-by-student-layout {
  display: grid;
  grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
  gap: 14px;
  margin-top: 14px;
  align-items: start;
}

.submit-by-student-left,
.submit-by-student-right {
  border: 1px solid #dbeafe;
  border-radius: 18px;
  background: #ffffff;
  padding: 12px;
}

.submit-by-student-box-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 900;
  color: #1e3a8a;
  margin-bottom: 10px;
}

.submit-by-student-list {
  display: grid;
  gap: 8px;
  max-height: 520px;
  overflow: auto;
  padding-right: 3px;
}

.submit-by-student-card {
  width: 100%;
  border: 1px solid #dbeafe;
  background: #f8fbff;
  border-radius: 15px;
  padding: 10px 11px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  gap: 8px;
  align-items: center;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}

.submit-by-student-card:hover {
  background: #eff6ff;
}

.submit-by-student-card.active {
  border-color: #2563eb;
  background: #eff6ff;
}

.submit-by-student-card-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.submit-by-student-card-main strong {
  font-size:14px;
  line-height: 1.25;
  font-weight: 900;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.submit-by-student-card-main span {
  font-size:13px;
  font-weight: 700;
  color: #64748b;
}

.submit-by-student-count {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: #2563eb;
  color: #ffffff;
  display: grid;
  place-items: center;
  font-size:14px;
  font-weight: 900;
}

.submit-by-student-selected {
  margin-bottom: 10px;
}

.submit-by-student-selected-card {
  border: 1px solid #bfdbfe;
  border-radius: 16px;
  background: #f8fbff;
  padding: 12px 14px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.submit-by-student-selected-card strong {
  display: block;
  font-size:16px;
  font-weight: 900;
  color: #0f172a;
  line-height: 1.25;
}

.submit-by-student-selected-card span {
  display: block;
  margin-top: 3px;
  font-size:13px;
  font-weight: 700;
  color: #64748b;
}

.submit-by-student-selected-count {
  white-space: nowrap;
  border-radius: 999px;
  padding: 7px 11px;
  background: #dbeafe;
  color: #1e40af;
  font-size:13px;
  font-weight: 900;
}

.submit-by-student-toolbar {
  margin: 10px 0 12px 0;
}

.submit-by-student-job-list {
  display: grid;
  gap: 10px;
}

.submit-by-student-job-card {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 11px;
  align-items: start;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  background: #ffffff;
  padding: 12px 13px;
  cursor: pointer;
}

.submit-by-student-job-card:hover {
  border-color: #bfdbfe;
  background: #f8fbff;
}

.submit-by-student-job-card input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 3px;
}

.submit-by-student-job-content {
  min-width: 0;
}

.submit-by-student-job-title {
  font-size:15px;
  line-height: 1.3;
  font-weight: 900;
  color: #0f172a;
}

.submit-by-student-job-meta {
  margin-top: 4px;
  font-size:13px;
  line-height: 1.35;
  font-weight: 700;
  color: #64748b;
}

.submit-by-student-job-note {
  margin-top: 6px;
  padding: 7px 9px;
  border-radius: 12px;
  background: #f8fafc;
  color: #475569;
  font-size:13px;
  line-height: 1.35;
  font-weight: 700;
}

.submit-by-student-job-score {
  margin-top: 7px;
  display: inline-flex;
  border-radius: 999px;
  padding: 5px 9px;
  background: #fff7ed;
  color: #9a3412;
  font-size:13px;
  font-weight: 900;
}

@media (max-width: 980px) {
  .submit-by-student-layout {
    grid-template-columns: 1fr;
  }

  .submit-by-student-list {
    max-height: 300px;
  }
}

@media (max-width: 720px) {
  .submit-by-student-filter-grid {
    grid-template-columns: 1fr;
  }

  .submit-by-student-selected-card {
    align-items: flex-start;
    flex-direction: column;
  }

  .submit-by-student-toolbar {
    display: grid;
    grid-template-columns: 1fr;
  }

  .submit-by-student-toolbar .btn {
    width: 100%;
    justify-content: center;
  }
}
/* กัน panel เพิ่มนักเรียนในงานค้างเดิม หลุดไปแสดงใต้หน้าอื่น */
.add-existing-assignment-panel:not(#assignmentAddExistingPanel) {
  display: none !important;
}

#assignmentAddExistingPanel.hidden {
  display: none !important;
}

/* =====================================================
   SUBMIT JOB CARD - COMPACT 2 COLUMNS + SCORE INPUT
   หน้า: ส่งงานค้างแบบรายบุคคล
===================================================== */

@media (min-width: 1100px) {
  .submit-by-student-job-list {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
}

.submit-by-student-job-card {
  min-height: 126px !important;
  padding: 13px 14px !important;
  border-radius: 18px !important;
  border: 1px solid #dbeafe !important;
  background: #ffffff !important;
  display: grid !important;
  grid-template-columns: 20px minmax(0, 1fr) !important;
  gap: 11px !important;
  align-items: start !important;
}

.submit-by-student-job-card:hover {
  background: #f8fbff !important;
  border-color: #93c5fd !important;
}

.submit-by-student-job-title {
  font-size:15px !important;
  font-weight: 900 !important;
  color: #0f172a !important;
  line-height: 1.25 !important;
}

.submit-by-student-job-meta {
  margin-top: 4px !important;
  font-size:13px !important;
  line-height: 1.35 !important;
  color: #64748b !important;
  font-weight: 700 !important;
}

.submit-by-student-job-note {
  margin-top: 6px !important;
  padding: 6px 8px !important;
  border-radius: 10px !important;
  background: #f8fafc !important;
  font-size:13px !important;
  line-height: 1.35 !important;
  color: #475569 !important;
}

.submit-by-student-job-bottom {
  margin-top: 9px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

.submit-by-student-job-score {
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  border-radius: 999px !important;
  padding: 6px 10px !important;
  background: #fff7ed !important;
  color: #9a3412 !important;
  font-size:13px !important;
  font-weight: 900 !important;
}

.submit-by-student-job-score-editor {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 8px 6px 10px !important;
  border: 1px solid #bfdbfe !important;
  border-radius: 999px !important;
  background: #eff6ff !important;
  color: #1e40af !important;
  font-size:13px !important;
  font-weight: 900 !important;
}

.submit-by-student-job-score-editor span {
  white-space: nowrap !important;
}

.submit-by-student-job-score-input {
  width: 64px !important;
  height: 30px !important;
  border: 1px solid #93c5fd !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  padding: 4px 8px !important;
  font-family: inherit !important;
  font-size:13px !important;
  font-weight: 900 !important;
  color: #0f172a !important;
  text-align: center !important;
  outline: none !important;
}

.submit-by-student-job-score-input:focus {
  border-color: #2563eb !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14) !important;
}

@media (max-width: 1099px) {
  .submit-by-student-job-list {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 640px) {
  .submit-by-student-job-bottom {
    align-items: flex-start !important;
    flex-direction: column !important;
  }

  .submit-by-student-job-score-editor {
    width: fit-content !important;
  }
}

/* =====================================================
   PAGE LOADER - E-PORTFOLIO STYLE
   Loader วงกลมน้ำเงิน เรียบ ๆ ไม่มีโลโก้ ไม่มีแท่งบาร์
===================================================== */

.page-loader {
  background: rgba(248, 250, 252, 0.72) !important;
  backdrop-filter: blur(3px) !important;
}

.loader-card {
  width: min(380px, calc(100% - 32px)) !important;
  background: rgba(255, 255, 255, 0.96) !important;
  border: 1px solid rgba(226, 232, 240, 0.95) !important;
  border-radius: 26px !important;
  padding: 30px 28px 28px !important;
  text-align: center !important;
  box-shadow:
    0 24px 60px rgba(15, 23, 42, 0.10),
    0 8px 24px rgba(37, 99, 235, 0.08) !important;
}

.loader-card::before,
.loader-card::after,
.loader-card > p::after,
.loader-coin::before,
.loader-coin::after {
  content: none !important;
  display: none !important;
}

.loader-coin,
.loader-spinner {
  display: block !important;
  width: 48px !important;
  height: 48px !important;
  margin: 0 auto 16px !important;
  border-radius: 999px !important;
  background: transparent !important;
  border: 5px solid #dbeafe !important;
  border-top-color: #2563eb !important;
  border-right-color: #60a5fa !important;
  box-shadow: none !important;
  animation: eportLoaderSpin 0.9s linear infinite !important;
}

.loader-card h3 {
  margin: 0 0 6px !important;
  font-size:20px !important;
  line-height: 1.25 !important;
  font-weight: 1000 !important;
  color: #0f172a !important;
}

.loader-card p {
  margin: 0 !important;
  font-size:14px !important;
  line-height: 1.45 !important;
  font-weight: 700 !important;
  color: #64748b !important;
}

@keyframes eportLoaderSpin {
  to {
    transform: rotate(360deg);
  }
}
/* =====================================================
   PUBLIC E-PORT CARD V6
   โลโก้แรงค์ด้านข้าง / ชื่อแรงค์ใต้โลโก้ / ดาว 6 ดวง / การ์ดไม่ยืดเกินจำเป็น
===================================================== */

#publicEPortStudentList{
  width:100% !important;
  display:block !important;
}

#publicEPortStudentList .public-eport-grid-v6{
  width:100% !important;
  display:grid !important;
  grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
  gap:18px !important;
  align-items:start !important;
}

#publicEPortStudentList .public-eport-card-v6{
  --bg1:#f4fbf7;
  --bg2:#e8f6ef;
  --accent:#1f9d67;
  --gold:#d7b04c;
  --gold-soft:#f2e6b2;

  position:relative !important;
  width:100% !important;
  min-width:0 !important;
  box-sizing:border-box !important;
  overflow:hidden !important;

  padding:14px 14px 14px !important;
  border-radius:30px !important;
  border:2px solid var(--gold) !important;
  background:
    radial-gradient(circle at 20% 16%, rgba(255,255,255,.22), transparent 22%),
    radial-gradient(circle at 82% 78%, rgba(255,255,255,.16), transparent 26%),
    linear-gradient(180deg, var(--bg1), var(--bg2)) !important;
  box-shadow:0 14px 32px rgba(15,23,42,.07) !important;

  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  gap:6px !important;
  height:auto !important;
  min-height:0 !important;
}

/* ธีมสีตามแรงค์ */
#publicEPortStudentList .public-eport-card-v6.rank-chronos{
  --bg1:#f7f2ff;
  --bg2:#eee4ff;
  --accent:#7c3aed;
}

#publicEPortStudentList .public-eport-card-v6.rank-hermes{
  --bg1:#f3fbf6;
  --bg2:#e5f6ec;
  --accent:#16a34a;
}

#publicEPortStudentList .public-eport-card-v6.rank-apollo{
  --bg1:#fff6ee;
  --bg2:#ffe9d8;
  --accent:#ea580c;
}

#publicEPortStudentList .public-eport-card-v6.rank-athena{
  --bg1:#f7f8fb;
  --bg2:#eceff5;
  --accent:#64748b;
}

#publicEPortStudentList .public-eport-card-v6.rank-poseidon{
  --bg1:#eefbff;
  --bg2:#dff6ff;
  --accent:#0891b2;
}

#publicEPortStudentList .public-eport-card-v6.rank-zeus{
  --bg1:#fffaf0;
  --bg2:#fff2cf;
  --accent:#b8860b;
}

/* กลุ่มแรงค์ด้านซ้ายบน */
#publicEPortStudentList .public-eport-rank-side-v6{
  position:absolute !important;
  top:12px !important;
  left:12px !important;
  z-index:2 !important;
  width:64px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:4px !important;
  text-align:center !important;
}

#publicEPortStudentList .public-eport-rank-logo-v6{
  width:54px !important;
  height:54px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

#publicEPortStudentList .public-eport-rank-logo-v6 img{
  max-width:54px !important;
  max-height:54px !important;
  object-fit:contain !important;
  display:block !important;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.12)) !important;
}

#publicEPortStudentList .public-eport-rank-logo-v6 i{
  font-size:28px !important;
  color:var(--accent) !important;
}

#publicEPortStudentList .public-eport-rank-label-v6{
  width:100% !important;
  min-height:24px !important;
  padding:2px 6px !important;
  border-radius:10px !important;
  background:rgba(255,255,255,.8) !important;
  color:var(--accent) !important;
  font-size:13px !important;
  font-weight:1000 !important;
  line-height:1.1 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  box-shadow:0 4px 10px rgba(15,23,42,.05) !important;
}

/* รูปโปรไฟล์ */
#publicEPortStudentList .public-eport-photo-wrap-v6{
  position:relative !important;
  z-index:1 !important;
  margin-top:22px !important;
  width:150px !important;
  height:150px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

#publicEPortStudentList .public-eport-photo-v6{
  width:132px !important;
  height:132px !important;
  object-fit:cover !important;
  border-radius:32px !important;
  display:block !important;
  background:#fff !important;
  border:5px solid rgba(255,255,255,.96) !important;
  box-shadow:0 14px 28px rgba(15,23,42,.12) !important;
}


/* ===== ดาว 6 ดวง : แบบดาวทองคม ๆ ไม่เป็นกล่อง ===== */
#publicEPortStudentList .public-eport-stars-v6{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:5px !important;
  min-height:30px !important;
  margin-top:2px !important;
  margin-bottom:0 !important;
}

#publicEPortStudentList .public-eport-stars-v6 .star{
  width:25px !important;
  height:25px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  line-height:1 !important;
  flex:0 0 25px !important;
  position:relative !important;
}

#publicEPortStudentList .public-eport-stars-v6 .star i{
  display:block !important;
  font-size:23px !important;
  line-height:1 !important;
  transform:translateY(-1px) !important;
}

/* ดาวที่ยังไม่ถึง = จาง ๆ */
#publicEPortStudentList .public-eport-stars-v6 .star.empty i{
  color:#eadfbd !important;
  opacity:.55 !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,.85),
    0 1px 2px rgba(120,90,20,.10) !important;
  filter:none !important;
}

/* ดาวที่ถึงแล้ว = ทอง */
#publicEPortStudentList .public-eport-stars-v6 .star.filled i{
  color:#f7b91e !important;
  text-shadow:
    0 1px 0 #fff7c2,
    0 2px 0 #d89400,
    0 3px 5px rgba(126, 77, 0, .22) !important;
  filter:
    drop-shadow(0 1px 0 rgba(255,255,255,.85))
    drop-shadow(0 2px 3px rgba(160,100,0,.18)) !important;
}

/* ไล่ทองเข้มตามระดับ */
#publicEPortStudentList .public-eport-stars-v6 .star.filled[data-star="1"] i{
  color:#ffd95a !important;
}

#publicEPortStudentList .public-eport-stars-v6 .star.filled[data-star="2"] i{
  color:#f7c943 !important;
}

#publicEPortStudentList .public-eport-stars-v6 .star.filled[data-star="3"] i{
  color:#edb82e !important;
}

#publicEPortStudentList .public-eport-stars-v6 .star.filled[data-star="4"] i{
  color:#dfa51e !important;
}

#publicEPortStudentList .public-eport-stars-v6 .star.filled[data-star="5"] i{
  color:#cb8f0f !important;
}

#publicEPortStudentList .public-eport-stars-v6 .star.filled[data-star="6"] i{
  color:#a96f08 !important;
}

/* แสงเล็ก ๆ บนดาวที่ได้แล้ว ไม่ให้เป็นแท่งสี่เหลี่ยม */
#publicEPortStudentList .public-eport-stars-v6 .star.filled::after{
  content:"" !important;
  position:absolute !important;
  top:5px !important;
  left:7px !important;
  width:5px !important;
  height:5px !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.70) !important;
  box-shadow:0 0 4px rgba(255,255,255,.55) !important;
  pointer-events:none !important;
}


/* ชื่อ */
#publicEPortStudentList .public-eport-name-v6{
  width:100% !important;
  text-align:center !important;
  color:#0f172a !important;
  font-size:18px !important;
  line-height:1.28 !important;
  font-weight:1000 !important;
  margin-top:0 !important;
  display:-webkit-box !important;
  -webkit-line-clamp:2 !important;
  -webkit-box-orient:vertical !important;
  overflow:hidden !important;
}

/* ชื่อเล่น + ชั้น */
#publicEPortStudentList .public-eport-meta-v6{
  width:100% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex-wrap:wrap !important;
  gap:6px !important;
  margin-top:-1px !important;
}

#publicEPortStudentList .public-eport-nick-v6,
#publicEPortStudentList .public-eport-class-v6{
  min-height:30px !important;
  padding:4px 12px !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.78) !important;
  color:#475569 !important;
  font-size:13px !important;
  font-weight:900 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
}

/* ปุ่ม */
#publicEPortStudentList .public-eport-btn-v6{
  width:min(100%, 195px) !important;
  min-height:44px !important;
  margin-top:6px !important;
  padding:0 18px !important;
  border-radius:999px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  text-decoration:none !important;

  color:#fff !important;
  font-size:15px !important;
  font-weight:1000 !important;
  background:linear-gradient(180deg, #3f86ff 0%, #2868ee 56%, #1f4fcb 100%) !important;
  border:1px solid rgba(255,255,255,.18) !important;
  box-shadow:
    0 10px 20px rgba(37,99,235,.20),
    inset 0 1px 0 rgba(255,255,255,.28) !important;
}

#publicEPortStudentList .public-eport-btn-v6:hover{
  transform:translateY(-1px) !important;
  filter:brightness(1.04) !important;
}

/* Responsive */
@media (max-width:1180px){
  #publicEPortStudentList .public-eport-grid-v6{
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width:900px){
  #publicEPortStudentList .public-eport-grid-v6{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width:640px){
  #publicEPortStudentList .public-eport-grid-v6{
    grid-template-columns:1fr !important;
  }

  #publicEPortStudentList .public-eport-card-v6{
    padding:12px 12px 12px !important;
  }

  #publicEPortStudentList .public-eport-photo-wrap-v6{
    width:138px !important;
    height:138px !important;
  }

  #publicEPortStudentList .public-eport-photo-v6{
    width:122px !important;
    height:122px !important;
  }
}

/* =====================================================
   PUBLIC E-PORT TOP SERVER BADGE
   ป้าย Top Server มุมขวาบนของการ์ด E-Port
===================================================== */

#publicEPortStudentList .public-eport-top-server-v6{
  position:absolute !important;
  top:12px !important;
  right:12px !important;
  z-index:5 !important;

  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:5px !important;

  min-height:30px !important;
  padding:5px 10px !important;
  border-radius:999px !important;

  font-size:13px !important;
  line-height:1 !important;
  font-weight:1000 !important;
  letter-spacing:.2px !important;

  color:#ffffff !important;
  border:1px solid rgba(255,255,255,.55) !important;
  box-shadow:
    0 8px 18px rgba(15,23,42,.14),
    inset 0 1px 0 rgba(255,255,255,.32) !important;
}

#publicEPortStudentList .public-eport-top-server-v6 i{
  font-size:13px !important;
}

#publicEPortStudentList .public-eport-top-server-v6 span{
  white-space:nowrap !important;
}

/* TOP 1 ทอง */
#publicEPortStudentList .public-eport-top-1{
  background:linear-gradient(180deg, #facc15 0%, #f59e0b 52%, #b45309 100%) !important;
}

/* TOP 2 เงินน้ำเงิน */
#publicEPortStudentList .public-eport-top-2{
  background:linear-gradient(180deg, #93c5fd 0%, #3b82f6 55%, #1d4ed8 100%) !important;
}

/* TOP 3 เขียว */
#publicEPortStudentList .public-eport-top-3{
  background:linear-gradient(180deg, #86efac 0%, #22c55e 55%, #15803d 100%) !important;
}

/* TOP 4 ม่วง */
#publicEPortStudentList .public-eport-top-4{
  background:linear-gradient(180deg, #c4b5fd 0%, #8b5cf6 55%, #6d28d9 100%) !important;
}

/* TOP 5 ชมพูแดง */
#publicEPortStudentList .public-eport-top-5{
  background:linear-gradient(180deg, #fda4af 0%, #f43f5e 55%, #be123c 100%) !important;
}

/* มือถือให้ป้ายเล็กลงนิด */
@media (max-width:640px){
  #publicEPortStudentList .public-eport-top-server-v6{
    top:10px !important;
    right:10px !important;
    min-height:28px !important;
    padding:4px 9px !important;
    font-size:13px !important;
  }
}
/* =====================================================
   STUDENT TOP AREA COMPACT OVERRIDE
   ย้าย Season ไป Header / เอารูปในการ์ดชื่อออก / ย่อการ์ด 5 ใบ
===================================================== */

/* Header นักเรียน */
.student-header.student-header-clean {
  min-height: 70px !important;
  padding: 12px 22px !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 14px !important;
}

.student-header-clean .student-header-brand {
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

.student-header-clean .student-header-actions {
  margin-left: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  flex-wrap: nowrap !important;
}

/* Season ที่ย้ายมาอยู่บน Header */
.student-header-season {
  flex: 0 1 520px !important;
  min-width: 360px !important;
  max-width: 540px !important;
}

/* ย่อการ์ด Season ให้พอดีกับเมนูบาร์ */
.student-header-season .rank-season-card {
  min-height: 54px !important;
  padding: 8px 12px !important;
  border-radius: 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  box-shadow: 0 8px 18px rgba(245, 158, 11, .10) !important;
}

.student-header-season .season-main {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
}

.student-header-season .season-badge {
  min-width: 74px !important;
  height: 38px !important;
  padding: 0 12px !important;
  border-radius: 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size:16px !important;
  font-weight: 1000 !important;
  white-space: nowrap !important;
}

.student-header-season .season-code {
  font-size:13px !important;
  font-weight: 1000 !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
}

.student-header-season .season-name {
  font-size:13px !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
}

.student-header-season .season-countdown-block {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
}

.student-header-season .season-clock {
  width: 34px !important;
  height: 34px !important;
  border-radius: 12px !important;
  flex: 0 0 34px !important;
}

.student-header-season .season-countdown {
  font-size:15px !important;
  font-weight: 1000 !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
}

.student-header-season .season-reset-text {
  font-size:13px !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
}

/* แถวโปรไฟล์ด้านบน เหลือแค่การ์ดชื่อ */
.student-hero-inline-row.student-hero-single-row,
.student-hero-inline-row {
  display: block !important;
  margin-bottom: 12px !important;
}

.student-hero-inline-profile {
  width: 100% !important;
}

/* การ์ดชื่อ/ชั้น/เลขประจำตัว แบบไม่มีรูป */
.student-hero-mini-card.student-hero-mini-card-no-avatar {
  min-height: 76px !important;
  height: auto !important;
  padding: 14px 18px !important;
  display: flex !important;
  align-items: center !important;
  border-radius: 20px !important;
}

.student-hero-mini-card-no-avatar .student-hero-mini-avatar {
  display: none !important;
}

.student-hero-mini-card-no-avatar .student-hero-mini-meta {
  width: 100% !important;
}

.student-hero-mini-card-no-avatar .student-hero-mini-name {
  font-size:21px !important;
  line-height: 1.2 !important;
  font-weight: 1000 !important;
}

.student-hero-mini-card-no-avatar .student-hero-mini-sub {
  margin-top: 4px !important;
  font-size:13px !important;
  font-weight: 800 !important;
}

/* ย่อการ์ดสรุป 5 ใบด้านบน */
#studentStats {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(130px, 1fr)) !important;
  gap: 12px !important;
  align-items: stretch !important;
  margin-bottom: 14px !important;
}

#studentStats .stat-card {
  min-height: 92px !important;
  padding: 13px 14px !important;
  border-radius: 18px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

#studentStats .stat-icon {
  width: 46px !important;
  height: 46px !important;
  border-radius: 16px !important;
  flex: 0 0 46px !important;
}

#studentStats .stat-card h3 {
  font-size:24px !important;
  line-height: 1.05 !important;
  margin: 0 0 3px !important;
  font-weight: 1000 !important;
}

#studentStats .stat-card p {
  font-size:13px !important;
  line-height: 1.25 !important;
  margin: 0 !important;
  font-weight: 800 !important;
}

#studentStats .stat-prefix,
#studentStats .stat-unit {
  font-size:13px !important;
}

/* Responsive */
@media (max-width: 1180px) {
  .student-header.student-header-clean {
    align-items: stretch !important;
    flex-direction: column !important;
  }

  .student-header-clean .student-header-actions {
    width: 100% !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
  }

  .student-header-season {
    order: 0 !important;
    flex: 1 1 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  #studentStats {
    grid-template-columns: repeat(3, minmax(150px, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  .student-header-clean .student-header-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .student-header-clean .student-header-actions .btn {
    width: 100% !important;
    justify-content: center !important;
  }

  .student-header-season .rank-season-card {
    align-items: flex-start !important;
    flex-direction: column !important;
  }

  .student-header-season .season-countdown-block {
    width: 100% !important;
  }

  #studentStats {
    grid-template-columns: repeat(2, minmax(140px, 1fr)) !important;
    gap: 10px !important;
  }

  #studentStats .stat-card {
    min-height: 86px !important;
    padding: 12px !important;
  }
}

@media (max-width: 430px) {
  #studentStats {
    grid-template-columns: 1fr !important;
  }
}

/* =====================================================
   STUDENT TOP SUMMARY + THAI SHORT EVENT LINE
   ชื่อ/ชั้น/เลข + การ์ด 5 ใบ อยู่แถวเดียวกัน
===================================================== */

/* แถวบน: การ์ดชื่อนักเรียน + การ์ด 5 ใบ */
.student-top-summary-row {
  display: grid !important;
  grid-template-columns: minmax(260px, 1.15fr) minmax(0, 2.85fr) !important;
  gap: 12px !important;
  align-items: stretch !important;
  margin-bottom: 14px !important;
}

.student-top-summary-row .student-hero-inline-profile {
  min-width: 0 !important;
}

/* การ์ดชื่อให้เตี้ยลง */
.student-top-summary-row .student-hero-mini-card,
.student-hero-mini-card.student-hero-mini-card-no-avatar {
  min-height: 86px !important;
  height: 100% !important;
  padding: 14px 18px !important;
  border-radius: 20px !important;
  display: flex !important;
  align-items: center !important;
}

.student-hero-mini-card-no-avatar .student-hero-mini-avatar {
  display: none !important;
}

/* การ์ด 5 ใบอยู่ด้านขวา */
.student-top-stat-grid,
#studentStats.student-top-stat-grid {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(108px, 1fr)) !important;
  gap: 10px !important;
  align-items: stretch !important;
  margin: 0 !important;
}

#studentStats.student-top-stat-grid .stat-card {
  min-height: 86px !important;
  padding: 12px 12px !important;
  border-radius: 18px !important;
  gap: 10px !important;
}

#studentStats.student-top-stat-grid .stat-icon {
  width: 42px !important;
  height: 42px !important;
  border-radius: 15px !important;
  flex: 0 0 42px !important;
}

#studentStats.student-top-stat-grid .stat-card h3 {
  font-size:22px !important;
  line-height: 1.05 !important;
  margin: 0 0 3px !important;
}

#studentStats.student-top-stat-grid .stat-card p {
  font-size:13px !important;
  line-height: 1.22 !important;
  margin: 0 !important;
  font-weight: 800 !important;
}

#studentStats.student-top-stat-grid .stat-prefix,
#studentStats.student-top-stat-grid .stat-unit {
  font-size:13px !important;
}

/* =====================================================
   STUDENT HEADER SEASON BADGE FIX
   มงกุฎอยู่ระหว่าง S1 และ 2026
===================================================== */

.student-header-season .season-badge,
.student-header-season .season-badge-split {
  min-width: 86px !important;
  height: 38px !important;
  padding: 0 10px !important;
  border-radius: 14px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;

  font-size:15px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  position: relative !important;
}

.student-header-season .season-badge::before,
.student-header-season .season-badge::after {
  display: none !important;
  content: none !important;
}

.student-header-season .season-badge-crown {
  width: 22px !important;
  height: 22px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .88) !important;
  color: #f59e0b !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  font-size:13px !important;
  box-shadow: 0 4px 10px rgba(180, 83, 9, .12) !important;
  transform: translateY(-1px) !important;
}

/* =====================================================
   STUDENT EVENT LIST COMPACT LINE
   1 รายการ 1 บรรทัด + วันที่ไทยย่อ พ.ศ.
===================================================== */

.student-event-line {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;

  min-height: 42px !important;
  padding: 9px 12px !important;
  border-radius: 14px !important;
}

.student-event-main {
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex: 1 1 auto !important;
}

.student-event-main strong {
  min-width: 0 !important;
  max-width: 100% !important;

  font-size:13.5px !important;
  line-height: 1.25 !important;
  font-weight: 900 !important;
  color: #0f172a !important;

  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.student-event-date {
  flex: 0 0 auto !important;
  font-size:13px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  color: #64748b !important;
  white-space: nowrap !important;
}

.student-event-score {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  font-size:13px !important;
  font-weight: 900 !important;
}

/* Responsive */
@media (max-width: 1180px) {
  .student-top-summary-row {
    grid-template-columns: 1fr !important;
  }

  #studentStats.student-top-stat-grid {
    grid-template-columns: repeat(3, minmax(130px, 1fr)) !important;
  }
}

@media (max-width: 720px) {
  #studentStats.student-top-stat-grid {
    grid-template-columns: repeat(2, minmax(130px, 1fr)) !important;
  }

  .student-event-line,
  .student-event-main {
    align-items: flex-start !important;
  }

  .student-event-line {
    flex-direction: column !important;
  }

  .student-event-main {
    width: 100% !important;
    flex-direction: column !important;
    gap: 3px !important;
  }

  .student-event-main strong,
  .student-event-date {
    white-space: normal !important;
  }

  .student-event-score {
    align-self: flex-end !important;
  }
}

@media (max-width: 430px) {
  #studentStats.student-top-stat-grid {
    grid-template-columns: 1fr !important;
  }
}

/* =====================================================
   STUDENT E-PORT EDIT FORM FIX
   ปุ่มโทนเดียวกัน + ประวัติการศึกษาแถวเดียว
===================================================== */

/* ปุ่มหลักในหน้าแก้ไขโปรไฟล์ให้เป็นโทนน้ำเงินเดียวกัน */
.eport-profile-card .eport-upload-btn.btn-primary,
.eport-skill-picker .btn.btn-primary,
.eport-edu-save-btn {
  background: #2563eb !important;
  border-color: #2563eb !important;
  color: #ffffff !important;
  box-shadow: 0 8px 18px rgba(37, 99, 235, .14) !important;
}

.eport-profile-card .eport-upload-btn.btn-primary:hover,
.eport-skill-picker .btn.btn-primary:hover,
.eport-edu-save-btn:hover {
  background: #1d4ed8 !important;
  border-color: #1d4ed8 !important;
  transform: translateY(-1px);
}

/* ฟอร์มประวัติการศึกษา: ให้อยู่แถวเดียวกัน */
.eport-education-inline-form {
  display: grid !important;
  grid-template-columns:
    minmax(145px, 170px)
    minmax(360px, 1fr)
    minmax(105px, 130px)
    minmax(135px, 155px)
    minmax(160px, 190px) !important;
  gap: 10px !important;
  align-items: end !important;
  margin-top: 10px !important;
  margin-bottom: 14px !important;
}

.eport-education-inline-form label {
  display: block !important;
  margin-bottom: 6px !important;
  font-weight: 800 !important;
  color: #334155 !important;
  font-size:13.5px !important;
}

/* ช่องสถานศึกษา + ปุ่ม ใช้โรงเรียนนี้ / อื่น ๆ อยู่ในแถวเดียวกัน */
.eport-edu-school-row {
  display: grid !important;
  grid-template-columns: minmax(220px, 1fr) auto auto !important;
  gap: 8px !important;
  align-items: center !important;
}

.eport-edu-school-row .input {
  min-width: 0 !important;
}

.eport-edu-mini-btn {
  min-height: 42px !important;
  padding: 0 12px !important;
  border-radius: 14px !important;
  white-space: nowrap !important;
  font-size:13px !important;
  font-weight: 900 !important;
}

.eport-edu-action-row {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
}

.eport-edu-save-btn {
  width: 100% !important;
}

.eport-edu-action-row .btn {
  min-height: 42px !important;
  padding: 0 12px !important;
  border-radius: 14px !important;
  justify-content: center !important;
  white-space: nowrap !important;
  font-size:13px !important;
  font-weight: 900 !important;
}

/* ย่อช่องที่ควรสั้น */
.eport-edu-level .input,
.eport-edu-year .input,
.eport-edu-status .input {
  min-width: 0 !important;
}

/* ลดคำอธิบายเก่าที่ทำให้ฟอร์มสูง ถ้ายังมีค้างจาก CSS/HTML เดิม */
.eport-education-inline-form .event-meta {
  display: none !important;
}

/* Responsive */
@media (max-width: 1180px) {
  .eport-education-inline-form {
    grid-template-columns: minmax(140px, 180px) minmax(0, 1fr) !important;
  }

  .eport-edu-school,
  .eport-edu-actions {
    grid-column: span 2 !important;
  }

  .eport-edu-year,
  .eport-edu-status {
    grid-column: span 1 !important;
  }
}

@media (max-width: 760px) {
  .eport-education-inline-form {
    grid-template-columns: 1fr !important;
  }

  .eport-edu-school,
  .eport-edu-actions,
  .eport-edu-year,
  .eport-edu-status {
    grid-column: auto !important;
  }

  .eport-edu-school-row {
    grid-template-columns: 1fr !important;
  }

  .eport-edu-action-row {
    grid-template-columns: 1fr !important;
  }

  .eport-edu-mini-btn,
  .eport-edu-action-row .btn {
    width: 100% !important;
  }
}
/* =====================================================
   STUDENT E-PORT EDIT: PROFILE 2 COLUMNS + EDUCATION ROW FIX
===================================================== */

/* ---------- ประวัติการศึกษา: ลดปุ่ม / ไม่ให้ซ้อนปี พ.ศ. ---------- */

.eport-education-inline-form {
  grid-template-columns:
    minmax(135px, 155px)
    minmax(360px, 1fr)
    minmax(90px, 105px)
    minmax(130px, 145px)
    minmax(96px, 112px) !important;
  gap: 8px !important;
  align-items: end !important;
}

.eport-edu-school-row {
  display: grid !important;
  grid-template-columns: minmax(250px, 1fr) 86px !important;
  gap: 8px !important;
  align-items: center !important;
}

.eport-edu-school-row .input {
  min-width: 0 !important;
}

.eport-edu-mini-btn.eport-edu-other-btn {
  min-width: 86px !important;
  width: 86px !important;
  padding: 0 10px !important;
  justify-content: center !important;
  white-space: nowrap !important;
  border-radius: 14px !important;
}

.eport-edu-actions {
  max-width: 112px !important;
}

.eport-edu-action-row {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 0 !important;
}

.eport-edu-save-btn {
  width: 100% !important;
  min-width: 96px !important;
  padding: 0 14px !important;
  border-radius: 16px !important;
  white-space: nowrap !important;
}

/* ---------- แก้ไขโปรไฟล์: แบ่ง 2 ฝั่ง ---------- */

.eport-profile-two-col {
  display: grid !important;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr) !important;
  gap: 16px !important;
  align-items: start !important;
  margin-top: 12px !important;
}

.eport-profile-left-col,
.eport-profile-right-col {
  min-width: 0 !important;
}

.eport-profile-left-col label,
.eport-profile-right-col label {
  display: block !important;
  margin-bottom: 6px !important;
  font-weight: 900 !important;
  color: #0f172a !important;
}

.eport-profile-right-col label:not(:first-child) {
  margin-top: 14px !important;
}

/* แถวเลือกทักษะ + ปุ่มเพิ่ม */
.eport-skill-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 132px !important;
  gap: 10px !important;
  align-items: center !important;
}

.eport-add-skill-btn {
  width: 100% !important;
  min-height: 42px !important;
  border-radius: 14px !important;
  white-space: nowrap !important;
}

/* ช่องอื่น ๆ ของทักษะ */
.eport-talent-other {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 150px !important;
  gap: 10px !important;
  align-items: center !important;
  margin-top: 10px !important;
}

.eport-talent-other.hidden {
  display: none !important;
}

/* กล่องแสดง #ทักษะ ให้มีพื้นที่ชัดเจน */
.eport-profile-tag-box {
  min-height: 84px !important;
  padding: 10px !important;
  margin-top: 10px !important;
  border: 1px dashed #bfdbfe !important;
  background: #f8fbff !important;
  border-radius: 16px !important;
  align-content: start !important;
}

/* ปุ่มบันทึกโปรไฟล์ให้อยู่ล่างฝั่งขวา */
.eport-profile-save-row {
  margin-top: 18px !important;
  display: flex !important;
  justify-content: flex-end !important;
}

.eport-profile-save-row .btn {
  min-width: 170px !important;
  min-height: 44px !important;
  border-radius: 999px !important;
  justify-content: center !important;
}

/* Responsive */
@media (max-width: 1180px) {
  .eport-education-inline-form {
    grid-template-columns: minmax(135px, 155px) minmax(0, 1fr) !important;
  }

  .eport-edu-school {
    grid-column: span 2 !important;
  }

  .eport-edu-year,
  .eport-edu-status,
  .eport-edu-actions {
    grid-column: span 1 !important;
  }

  .eport-profile-two-col {
    grid-template-columns: 1fr !important;
  }

  .eport-profile-save-row {
    justify-content: flex-start !important;
  }
}

@media (max-width: 760px) {
  .eport-education-inline-form {
    grid-template-columns: 1fr !important;
  }

  .eport-edu-school,
  .eport-edu-year,
  .eport-edu-status,
  .eport-edu-actions {
    grid-column: auto !important;
    max-width: none !important;
  }

  .eport-edu-school-row,
  .eport-skill-row,
  .eport-talent-other {
    grid-template-columns: 1fr !important;
  }

  .eport-edu-mini-btn.eport-edu-other-btn,
  .eport-edu-save-btn,
  .eport-add-skill-btn,
  .eport-profile-save-row .btn {
    width: 100% !important;
    min-width: 0 !important;
  }
}
/* =====================================================
   STUDENT SCORE TAB - WORK LIST COMPACT
   งานค้าง / งานที่ปลดแล้ว แสดงชื่องาน + วันที่ + คะแนน บรรทัดเดียว
===================================================== */

.student-work-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  min-height: 44px !important;
  padding: 10px 12px !important;
}

.student-work-main {
  min-width: 0 !important;
  flex: 1 1 auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.student-work-title {
  min-width: 0 !important;
  font-size:14px !important;
  font-weight: 900 !important;
  color: #0f172a !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.student-work-date {
  flex: 0 0 auto !important;
  font-size:13px !important;
  font-weight: 700 !important;
  color: #64748b !important;
  white-space: nowrap !important;
}

.student-work-score {
  flex: 0 0 auto !important;
  font-size:13px !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}

@media (max-width: 640px) {
  .student-work-item {
    align-items: flex-start !important;
    flex-direction: column !important;
    gap: 4px !important;
  }

  .student-work-main {
    width: 100% !important;
    align-items: flex-start !important;
    flex-direction: column !important;
    gap: 2px !important;
  }

  .student-work-title,
  .student-work-date {
    white-space: normal !important;
  }

  .student-work-score {
    align-self: flex-end !important;
  }
}
/* =====================================================
   STUDENT SCORE TAB COMPACT LAYOUT
   คะแนนของฉัน: ซ้ายงาน / ขวาแรงค์-พฤติกรรม-ประวัติคะแนน
===================================================== */

.student-score-head-compact {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 14px !important;
  margin-bottom: 12px !important;
}

.student-score-head-compact h3 {
  margin: 0 !important;
  font-size:18px !important;
  font-weight: 900 !important;
  color: #0f172a !important;
}

.student-score-head-compact p {
  margin: 4px 0 0 !important;
  color: #64748b !important;
  font-size:13.5px !important;
}

.student-score-compact-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr) !important;
  gap: 16px !important;
  align-items: start !important;
}

.student-score-left,
.student-score-right {
  min-width: 0 !important;
}

.student-score-right {
  display: grid !important;
  gap: 12px !important;
}

.score-inner-panel {
  margin: 0 !important;
  border-radius: 20px !important;
  border: 1px solid #dbeafe !important;
  background: #ffffff !important;
  padding: 14px !important;
}

.score-panel-title {
  margin-bottom: 10px !important;
  font-size:16px !important;
  font-weight: 900 !important;
  color: #0f172a !important;
}

.score-panel-title i {
  color: #2563eb !important;
}

.student-score-work-panel {
  min-height: 100% !important;
}

.student-score-subhead {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  margin: 12px 0 8px !important;
  font-size:14px !important;
  font-weight: 900 !important;
  color: #1e293b !important;
}

.student-score-subhead:first-of-type {
  margin-top: 0 !important;
}

.student-score-subhead i {
  color: #2563eb !important;
}

.student-score-subhead.unlock i {
  color: #16a34a !important;
}

.student-score-list {
  display: grid !important;
  gap: 8px !important;
}

.student-score-list .event-item,
.student-score-right .event-item {
  margin-bottom: 0 !important;
}

/* ย่อกล่องแรงค์ให้ไม่กินพื้นที่สูงเกิน */
.student-rank-mini-panel #studentRankCurrentBox .tr107-rank-card {
  padding: 12px !important;
  border-radius: 16px !important;
  min-height: 0 !important;
}

.student-rank-mini-panel #studentRankCurrentBox .rank-badge-img {
  width: 44px !important;
  height: 44px !important;
}

.student-rank-mini-panel #studentRankCurrentBox .rank-name {
  font-size:17px !important;
  line-height: 1.15 !important;
}

.student-rank-mini-panel #studentRankCurrentBox .rank-meta {
  font-size:13px !important;
  margin-top: 2px !important;
}

.student-rank-mini-panel #studentRankCurrentBox .rank-score-pill {
  min-width: 66px !important;
  padding: 8px !important;
}

.student-rank-mini-panel #studentRankCurrentBox .rank-score-pill span {
  font-size:18px !important;
}

.student-rank-mini-panel .rank-view-all-btn {
  min-height: 32px !important;
  padding: 6px 10px !important;
  font-size:13px !important;
}

/* ประวัติแรงค์ ถ้าไม่มีข้อมูลให้เป็นกล่องเตี้ย */
.student-rank-history-mini-panel .event-item {
  min-height: 42px !important;
  padding: 10px 12px !important;
}

/* ใช้กับรายการ 1 บรรทัดที่แก้ไว้ก่อนหน้า */
.student-work-item {
  min-height: 42px !important;
  padding: 9px 12px !important;
  border-radius: 14px !important;
}

.student-work-main {
  min-width: 0 !important;
}

.student-work-title {
  font-size:13.5px !important;
}

.student-work-date {
  font-size:13px !important;
}

.student-work-score {
  font-size:13px !important;
}

/* Responsive */
@media (max-width: 980px) {
  .student-score-compact-layout {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 640px) {
  .student-score-head-compact {
    flex-direction: column !important;
  }

  .score-inner-panel {
    padding: 12px !important;
    border-radius: 18px !important;
  }

  .student-score-right {
    gap: 10px !important;
  }
}
/* =====================================================
   STUDENT SCORE TAB V3 - MATCH REQUESTED LAYOUT
   ซ้าย = งาน / ขวา = แรงค์บน + พฤติกรรม + ประวัติคะแนน
===================================================== */

.student-score-page-v3 {
  width: 100% !important;
}

.student-score-title-v3 {
  margin: 8px 0 16px !important;
}

.student-score-title-v3 h3 {
  margin: 0 !important;
  font-size:18px !important;
  font-weight: 900 !important;
  color: #0f172a !important;
}

.student-score-title-v3 p {
  margin: 4px 0 0 !important;
  color: #64748b !important;
  font-size:13.5px !important;
}

.student-score-layout-v3 {
  display: grid !important;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr) !important;
  gap: 18px !important;
  align-items: start !important;
}

.student-score-left-v3,
.student-score-right-v3 {
  min-width: 0 !important;
}

.student-score-left-v3 {
  display: grid !important;
  gap: 14px !important;
}

.student-score-right-v3 {
  display: grid !important;
  gap: 12px !important;
}

.score-rank-row-v3 {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(145px, 190px) !important;
  gap: 12px !important;
  align-items: stretch !important;
}

.score-section-label-v3 {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 0 6px !important;
  font-size:15px !important;
  font-weight: 900 !important;
  color: #1e293b !important;
}

.score-section-label-v3 i {
  color: #2563eb !important;
}

.score-box-v3 {
  margin: 0 !important;
  padding: 14px !important;
  border: 1px solid #dbeafe !important;
  border-radius: 20px !important;
  background: rgba(255,255,255,.92) !important;
  box-shadow: 0 10px 28px rgba(15, 23, 42, .035) !important;
  min-width: 0 !important;
}

.score-box-title-v3 {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 0 10px !important;
  font-size:16px !important;
  font-weight: 900 !important;
  color: #0f172a !important;
}

.score-box-title-v3 i {
  color: #2563eb !important;
}

.student-score-list {
  display: grid !important;
  gap: 8px !important;
}

.student-score-list .event-item,
.score-box-v3 .event-item {
  margin-bottom: 0 !important;
}

/* ย่อการ์ดแรงค์ให้เหมือนภาพแนบ */
.score-rank-current-v3 #studentRankCurrentBox .tr107-rank-card {
  padding: 12px !important;
  border-radius: 16px !important;
  min-height: 0 !important;
}

.score-rank-current-v3 #studentRankCurrentBox .rank-badge-img {
  width: 42px !important;
  height: 42px !important;
}

.score-rank-current-v3 #studentRankCurrentBox .rank-name {
  font-size:17px !important;
  line-height: 1.15 !important;
}

.score-rank-current-v3 #studentRankCurrentBox .rank-meta {
  font-size:13px !important;
  margin-top: 2px !important;
}

.score-rank-current-v3 #studentRankCurrentBox .rank-score-pill {
  min-width: 62px !important;
  padding: 7px !important;
}

.score-rank-current-v3 #studentRankCurrentBox .rank-score-pill span {
  font-size:17px !important;
}

.score-rank-current-v3 .rank-view-all-btn {
  min-height: 30px !important;
  padding: 5px 10px !important;
  font-size:13px !important;
}

/* ประวัติแรงค์เป็นกล่องเล็กข้าง ๆ */
.score-rank-history-v3 {
  padding: 12px !important;
}

.score-rank-history-v3 .score-box-title-v3 {
  font-size:14px !important;
  margin-bottom: 8px !important;
}

.score-rank-history-v3 .event-item {
  min-height: 40px !important;
  padding: 9px 10px !important;
  border-radius: 14px !important;
}

.score-rank-history-v3 .event-meta {
  font-size:13px !important;
}

/* งาน/คะแนนที่เป็น 1 บรรทัด */
.student-work-item {
  min-height: 42px !important;
  padding: 9px 12px !important;
  border-radius: 14px !important;
}

.student-work-main {
  min-width: 0 !important;
}

.student-work-title {
  font-size:13.5px !important;
}

.student-work-date {
  font-size:13px !important;
}

.student-work-score {
  font-size:13px !important;
}

/* จอเล็ก */
@media (max-width: 1060px) {
  .student-score-layout-v3 {
    grid-template-columns: 1fr !important;
  }

  .score-rank-row-v3 {
    grid-template-columns: 1fr 220px !important;
  }
}

@media (max-width: 720px) {
  .score-rank-row-v3 {
    grid-template-columns: 1fr !important;
  }

  .score-box-v3 {
    padding: 12px !important;
    border-radius: 18px !important;
  }
}

/* =====================================================
   STUDENT HEADER + TOP STATS CLEAN
   โลโก้ + ชื่อนักเรียนบน header / การ์ดสถิติ 3 ใบ
===================================================== */

.student-header-clean {
  min-height: 78px !important;
  padding: 14px 28px !important;
  align-items: center !important;
}

.student-header-brand {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  min-width: 0 !important;
}

.student-header-logo {
  width: 54px !important;
  height: 54px !important;
  object-fit: contain !important;
  flex: 0 0 auto !important;
}

.student-hero-inline-header {
  min-width: 0 !important;
}

.student-hero-inline-header .student-hero-mini-card {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  min-height: 0 !important;
}

.student-hero-inline-header .student-hero-mini-name {
  font-size:20px !important;
  font-weight: 1000 !important;
  color: #0f172a !important;
  line-height: 1.15 !important;
}

.student-hero-inline-header .student-hero-mini-nickname {
  font-size:15px !important;
  font-weight: 800 !important;
  color: #64748b !important;
  margin-left: 4px !important;
}

.student-hero-inline-header .student-hero-mini-sub {
  margin-top: 4px !important;
  font-size:13.5px !important;
  font-weight: 800 !important;
  color: #64748b !important;
}

.student-top-summary-row-stats-only {
  display: block !important;
  margin-top: 14px !important;
}

.student-top-summary-row-stats-only .student-top-stat-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(160px, 1fr)) !important;
  gap: 12px !important;
  max-width: 720px !important;
}

.student-top-summary-row-stats-only .stat-card {
  min-height: 78px !important;
  border-radius: 18px !important;
  padding: 14px 16px !important;
}

/* แรงค์ปัจจุบันกว้าง 2 ส่วน / ประวัติแรงค์กว้าง 1 ส่วน */
.score-rank-row-v3 {
  grid-template-columns: minmax(0, 2fr) minmax(180px, 1fr) !important;
}

/* Responsive */
@media (max-width: 900px) {
  .student-header-clean {
    align-items: flex-start !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  .student-header-actions {
    width: 100% !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
  }

  .student-top-summary-row-stats-only .student-top-stat-grid {
    grid-template-columns: 1fr !important;
    max-width: none !important;
  }

  .score-rank-row-v3 {
    grid-template-columns: 1fr !important;
  }
}
/* =====================================================
   STUDENT TOP 6 CARDS FINAL
   3 การ์ดเดิม + แรงค์ปัจจุบันกว้าง 2 + ประวัติแรงค์กว้าง 1
===================================================== */

/* พื้นที่รวมด้านบน */
.student-top-zone-v4 {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 14px !important;
  align-items: stretch !important;
  margin: 14px 0 18px !important;
}

/* ทำให้ wrapper ของ stat card ไม่สร้างแถวแยก */
.student-top-zone-v4 .student-top-summary-row,
.student-top-zone-v4 .student-top-summary-row-stats-only,
.student-top-zone-v4 .student-top-stat-grid,
.student-top-zone-v4 #studentStats,
.student-top-zone-v4 .student-top-rank-row-v4 {
  display: contents !important;
}

/* การ์ด 3 ใบแรก */
.student-top-zone-v4 #studentStats .stat-card {
  grid-column: span 1 !important;
  min-height: 118px !important;
  padding: 18px 20px !important;
  border-radius: 22px !important;
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  overflow: hidden !important;
  margin: 0 !important;
}

.student-top-zone-v4 #studentStats .stat-icon {
  width: 56px !important;
  height: 56px !important;
  min-width: 56px !important;
  border-radius: 18px !important;
  font-size:24px !important;
}

.student-top-zone-v4 #studentStats .stat-card h3 {
  font-size:30px !important;
  line-height: 1 !important;
  margin: 0 0 4px !important;
  font-weight: 1000 !important;
}

.student-top-zone-v4 #studentStats .stat-card p {
  font-size:13px !important;
  line-height: 1.25 !important;
  margin: 0 !important;
  font-weight: 900 !important;
}

/* การ์ดแรงค์ 2 ใบ */
.student-top-rank-card-v4 {
  border: 1px solid #dbeafe !important;
  background: rgba(255,255,255,.94) !important;
  border-radius: 22px !important;
  padding: 14px !important;
  box-shadow: 0 12px 28px rgba(15, 23, 42, .04) !important;
  min-width: 0 !important;
  margin: 0 !important;
}

/* แรงค์ปัจจุบันกิน 2 ช่อง */
.student-top-rank-current-v4 {
  grid-column: span 2 !important;
}

/* ประวัติแรงค์กิน 1 ช่อง */
.student-top-rank-history-v4 {
  grid-column: span 1 !important;
}

.student-top-rank-title-v4 {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 10px !important;
  color: #0f172a !important;
  font-size:15px !important;
  font-weight: 900 !important;
}

.student-top-rank-title-v4 i {
  color: #2563eb !important;
}

/* ย่อการ์ดแรงค์ให้พอดีในแถวบน */
.student-top-rank-current-v4 #studentRankCurrentBox .tr107-rank-card {
  min-height: 0 !important;
  height: auto !important;
  padding: 12px !important;
  border-radius: 18px !important;
  margin: 0 !important;
}

.student-top-rank-current-v4 #studentRankCurrentBox .rank-badge-img {
  width: 44px !important;
  height: 44px !important;
}

.student-top-rank-current-v4 #studentRankCurrentBox .rank-name {
  font-size:18px !important;
  line-height: 1.15 !important;
}

.student-top-rank-current-v4 #studentRankCurrentBox .rank-meta {
  font-size:13px !important;
  margin-top: 2px !important;
}

.student-top-rank-current-v4 #studentRankCurrentBox .rank-score-pill {
  min-width: 64px !important;
  padding: 8px !important;
}

.student-top-rank-current-v4 #studentRankCurrentBox .rank-score-pill span {
  font-size:18px !important;
}

.student-top-rank-current-v4 .rank-view-all-btn {
  min-height: 32px !important;
  padding: 6px 10px !important;
  font-size:13px !important;
}

/* ประวัติแรงค์ */
.student-top-rank-history-v4 .event-item {
  min-height: 46px !important;
  padding: 10px 12px !important;
  border-radius: 16px !important;
  margin-bottom: 0 !important;
}

.student-top-rank-history-v4 .event-meta {
  font-size:13px !important;
}

/* กันแถวแรงค์เก่าในแท็บคะแนนโผล่ */
.score-rank-row-v3 {
  display: none !important;
}

/* จอขนาดกลาง */
@media (max-width: 1180px) {
  .student-top-zone-v4 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .student-top-rank-current-v4 {
    grid-column: span 2 !important;
  }

  .student-top-rank-history-v4 {
    grid-column: span 1 !important;
  }
}

/* มือถือ */
@media (max-width: 720px) {
  .student-top-zone-v4 {
    grid-template-columns: 1fr !important;
  }

  .student-top-zone-v4 #studentStats .stat-card,
  .student-top-rank-current-v4,
  .student-top-rank-history-v4 {
    grid-column: span 1 !important;
  }

  .student-top-zone-v4 #studentStats .stat-card {
    min-height: 86px !important;
    padding: 14px !important;
  }

  .student-top-zone-v4 #studentStats .stat-icon {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
  }
}

/* =====================================================
   STUDENT RANK COMPACT CARD
   การ์ดแรงค์ปัจจุบันแบบย่อด้านบน
===================================================== */

.student-rank-compact-card {
  width: 100% !important;
  min-height: 78px !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 14px 16px !important;
  border-radius: 18px !important;
  border: 1px solid color-mix(in srgb, var(--rank-color, #64748b) 28%, #dbeafe) !important;
  background:
    radial-gradient(circle at 94% 82%, color-mix(in srgb, var(--rank-color, #64748b) 12%, transparent) 0 34%, transparent 35%),
    #ffffff !important;
  border-left: 6px solid var(--rank-color, #64748b) !important;
  box-shadow: 0 10px 22px rgba(15, 23, 42, .04) !important;
}

.student-rank-compact-icon {
  width: 56px !important;
  height: 56px !important;
  flex: 0 0 56px !important;
  display: grid !important;
  place-items: center !important;
}

.student-rank-compact-icon img {
  width: 54px !important;
  height: 54px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 6px 10px rgba(15, 23, 42, .16)) !important;
}

.student-rank-compact-icon i {
  color: var(--rank-color, #64748b) !important;
  font-size:30px !important;
}

.student-rank-compact-info {
  min-width: 0 !important;
}

.student-rank-compact-info strong {
  display: block !important;
  color: var(--rank-color, #64748b) !important;
  font-size:22px !important;
  font-weight: 1000 !important;
  line-height: 1.05 !important;
  text-transform: uppercase !important;
  letter-spacing: .2px !important;
}

.student-rank-compact-info span {
  display: block !important;
  margin-top: 4px !important;
  color: #64748b !important;
  font-size:13px !important;
  font-weight: 800 !important;
}

/* ปุ่มดูระดับแรงค์ทั้งหมดที่ย้ายไปอยู่แถบแท็บ */
.eport-rules-tab {
  border-color: #c4b5fd !important;
  background: #faf5ff !important;
  color: #6d28d9 !important;
}

.eport-rules-tab:hover {
  background: #f5f3ff !important;
  border-color: #a78bfa !important;
  color: #5b21b6 !important;
}
/* =====================================================
   STUDENT TOP 7 CARDS FINAL
   3 การ์ดเดิม + แรงค์ปัจจุบันกว้าง 3 + ประวัติแรงค์กว้าง 1
===================================================== */

.student-top-zone-v4 {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  gap: 14px !important;
  align-items: stretch !important;
  margin: 14px 0 18px !important;
}

.student-top-zone-v4 .student-top-summary-row,
.student-top-zone-v4 .student-top-summary-row-stats-only,
.student-top-zone-v4 .student-top-stat-grid,
.student-top-zone-v4 #studentStats,
.student-top-zone-v4 .student-top-rank-row-v4 {
  display: contents !important;
}

.student-top-zone-v4 #studentStats .stat-card {
  grid-column: span 1 !important;
  min-height: 96px !important;
  padding: 16px 18px !important;
  border-radius: 22px !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  overflow: hidden !important;
  margin: 0 !important;
}

.student-top-zone-v4 #studentStats .stat-icon {
  width: 50px !important;
  height: 50px !important;
  min-width: 50px !important;
  border-radius: 17px !important;
  font-size:22px !important;
}

.student-top-zone-v4 #studentStats .stat-card h3 {
  font-size:28px !important;
  line-height: 1 !important;
  margin: 0 0 4px !important;
  font-weight: 1000 !important;
}

.student-top-zone-v4 #studentStats .stat-card p {
  font-size:13px !important;
  line-height: 1.25 !important;
  margin: 0 !important;
  font-weight: 900 !important;
}

/* การ์ดแรงค์ */
.student-top-rank-card-v4 {
  border: 1px solid #dbeafe !important;
  background: rgba(255,255,255,.94) !important;
  border-radius: 22px !important;
  padding: 14px !important;
  box-shadow: 0 12px 28px rgba(15, 23, 42, .04) !important;
  min-width: 0 !important;
  margin: 0 !important;
}

.student-top-rank-current-v4 {
  grid-column: span 3 !important;
}

.student-top-rank-history-v4 {
  grid-column: span 1 !important;
}

.student-top-rank-title-v4 {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 10px !important;
  color: #0f172a !important;
  font-size:15px !important;
  font-weight: 900 !important;
}

.student-top-rank-title-v4 i {
  color: #2563eb !important;
}

/* การ์ดแรงค์ปัจจุบันแบบมีเกจ */
.student-rank-compact-card.student-rank-with-progress {
  width: 100% !important;
  min-height: 96px !important;
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 14px 16px !important;
  border-radius: 18px !important;
  border: 1px solid color-mix(in srgb, var(--rank-color, #64748b) 25%, #dbeafe) !important;
  border-left: 6px solid var(--rank-color, #64748b) !important;
  background:
    radial-gradient(circle at 96% 80%, color-mix(in srgb, var(--rank-color, #64748b) 10%, transparent) 0 34%, transparent 35%),
    #ffffff !important;
  box-shadow: 0 10px 22px rgba(15, 23, 42, .04) !important;
}

.rank-logo-zoom-btn {
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  cursor: zoom-in !important;
  width: 62px !important;
  height: 62px !important;
  flex: 0 0 62px !important;
  display: grid !important;
  place-items: center !important;
}

.rank-logo-zoom-btn img,
.student-rank-compact-icon img {
  width: 60px !important;
  height: 60px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 7px 12px rgba(15, 23, 42, .16)) !important;
}

.student-rank-progress-info {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.student-rank-progress-info strong {
  display: block !important;
  color: var(--rank-color, #64748b) !important;
  font-size:22px !important;
  font-weight: 1000 !important;
  line-height: 1.05 !important;
  text-transform: uppercase !important;
}

.student-rank-next-text {
  margin-top: 4px !important;
  color: #2563eb !important;
  font-size:13px !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.student-rank-progress-head {
  margin-top: 8px !important;
  display: flex !important;
  justify-content: space-between !important;
  gap: 10px !important;
  color: #64748b !important;
  font-size:13px !important;
  font-weight: 800 !important;
}

.student-rank-progress-bar {
  height: 9px !important;
  margin-top: 5px !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  background: #e5e7eb !important;
}

.student-rank-progress-bar i {
  display: block !important;
  height: 100% !important;
  border-radius: inherit !important;
  background: linear-gradient(90deg, #f59e0b, #22c55e) !important;
}

/* ประวัติแรงค์ */
.student-top-rank-history-v4 .event-item {
  min-height: 48px !important;
  padding: 10px 12px !important;
  border-radius: 16px !important;
  margin-bottom: 0 !important;
}

.student-top-rank-history-v4 .event-meta {
  font-size:13px !important;
}

.student-rank-history-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.student-rank-history-item img {
  width: 34px !important;
  height: 34px !important;
  object-fit: contain !important;
  cursor: zoom-in !important;
}

/* คลิกขยายโลโก้แรงค์ทุกจุด */
.rank-zoom-img,
.rank-badge-img,
.public-eport-rank-logo-v6 img,
.eport-rank-badge-head img,
.rank-rule-card img {
  cursor: zoom-in !important;
}

/* popup ขยายโลโก้ */
.rank-logo-preview-popup img.swal2-image {
  max-height: 260px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 14px 24px rgba(15, 23, 42, .18)) !important;
}

/* กันแถวแรงค์เก่าในแท็บคะแนนโผล่ */
.score-rank-row-v3 {
  display: none !important;
}

/* จอกลาง */
@media (max-width: 1240px) {
  .student-top-zone-v4 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .student-top-rank-current-v4 {
    grid-column: span 2 !important;
  }

  .student-top-rank-history-v4 {
    grid-column: span 1 !important;
  }
}

/* มือถือ */
@media (max-width: 720px) {
  .student-top-zone-v4 {
    grid-template-columns: 1fr !important;
  }

  .student-top-zone-v4 #studentStats .stat-card,
  .student-top-rank-current-v4,
  .student-top-rank-history-v4 {
    grid-column: span 1 !important;
  }

  .student-top-zone-v4 #studentStats .stat-card {
    min-height: 82px !important;
    padding: 14px !important;
  }

  .student-rank-compact-card.student-rank-with-progress {
    min-height: 90px !important;
  }
}
/* =====================================================
   STUDENT RANK SLIM CARD FINAL
   การ์ดแรงค์ปัจจุบันแบบเตี้ย ตามภาพตัวอย่าง
===================================================== */

/* ซ่อนหัวข้อแรงค์ด้านนอก เพราะย้ายไปเป็น badge ในการ์ดแล้ว */
.student-top-rank-current-v4 > .student-top-rank-title-v4 {
  display: none !important;
}

/* ลดพื้นที่กล่องครอบแรงค์ */
.student-top-rank-current-v4 {
  padding: 8px 10px !important;
  display: flex !important;
  align-items: center !important;
}

.student-top-rank-current-v4 #studentRankCurrentBox {
  width: 100% !important;
}

/* การ์ดแรงค์แบบเตี้ย */
.student-rank-slim-card {
  width: 100% !important;
  min-height: 82px !important;
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  padding: 10px 14px !important;
  border-radius: 18px !important;
  border: 1px solid #ddd6fe !important;
  border-left: 6px solid var(--rank-color, #7c3aed) !important;
  background:
    radial-gradient(circle at 92% 20%, rgba(124, 58, 237, .10) 0 34%, transparent 35%),
    #ffffff !important;
  box-shadow: 0 10px 22px rgba(15, 23, 42, .035) !important;
  overflow: hidden !important;
}

/* โลโก้แรงค์ */
.student-rank-slim-logo {
  width: 68px !important;
  height: 68px !important;
  flex: 0 0 68px !important;
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  cursor: zoom-in !important;
}

.student-rank-slim-logo img {
  width: 66px !important;
  height: 66px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 7px 12px rgba(15, 23, 42, .18)) !important;
}

.student-rank-slim-logo i {
  color: var(--rank-color, #7c3aed) !important;
  font-size:34px !important;
}

/* ข้อมูลแรงค์ */
.student-rank-slim-info {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.student-rank-slim-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-bottom: 6px !important;
}

.student-rank-slim-top strong {
  color: var(--rank-color, #7c3aed) !important;
  font-size:24px !important;
  line-height: 1 !important;
  font-weight: 1000 !important;
  text-transform: uppercase !important;
  letter-spacing: .4px !important;
  white-space: nowrap !important;
}

.student-rank-slim-badge {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-height: 30px !important;
  padding: 6px 12px !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  color: #0f172a !important;
  font-size:13px !important;
  font-weight: 900 !important;
  box-shadow: 0 6px 16px rgba(15, 23, 42, .06) !important;
}

.student-rank-slim-badge i {
  color: #2563eb !important;
}

/* บรรทัด อีกกี่ Pt. + เปอร์เซ็นต์ */
.student-rank-slim-mid {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-bottom: 6px !important;
}

.student-rank-slim-mid span {
  min-width: 0 !important;
  color: #2563eb !important;
  font-size:14px !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.student-rank-slim-mid b {
  flex: 0 0 auto !important;
  color: #475569 !important;
  font-size:15px !important;
  font-weight: 1000 !important;
}

/* เกจ */
.student-rank-slim-bar {
  height: 10px !important;
  width: 100% !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  background: #e5e7eb !important;
}

.student-rank-slim-bar i {
  display: block !important;
  height: 100% !important;
  border-radius: inherit !important;
  background: linear-gradient(90deg, #f59e0b, #22c55e) !important;
}

/* ให้การ์ดประวัติแรงค์ไม่สูงเกิน */
.student-top-rank-history-v4 {
  padding: 10px 12px !important;
}

.student-top-rank-history-v4 .student-top-rank-title-v4 {
  margin-bottom: 8px !important;
}

.student-top-rank-history-v4 .event-item {
  min-height: 42px !important;
  padding: 9px 10px !important;
}

/* Responsive */
@media (max-width: 720px) {
  .student-rank-slim-card {
    min-height: 92px !important;
    gap: 12px !important;
  }

  .student-rank-slim-logo {
    width: 58px !important;
    height: 58px !important;
    flex-basis: 58px !important;
  }

  .student-rank-slim-logo img {
    width: 56px !important;
    height: 56px !important;
  }

  .student-rank-slim-top {
    align-items: flex-start !important;
    flex-direction: column !important;
    gap: 4px !important;
  }

  .student-rank-slim-top strong {
    font-size:20px !important;
  }

  .student-rank-slim-badge {
    min-height: 26px !important;
    padding: 4px 10px !important;
    font-size:13px !important;
  }
}
/* =====================================================
   FIX STUDENT HEADER NAME ALIGNMENT
   แก้ชื่อบนหัวเว็บให้เป็นข้อความปกติ ไม่โค้ง/ไม่ย้วย/ไม่ติด style การ์ดเก่า
===================================================== */

.student-header-brand #studentHeroInlineProfile,
.student-hero-inline-header {
  width: auto !important;
  min-width: 0 !important;
  display: block !important;
}

.student-header-brand #studentHeroInlineProfile .student-hero-mini-card,
.student-hero-inline-header .student-hero-mini-card,
.student-header-brand #studentHeroInlineProfile .student-hero-mini-card-no-avatar,
.student-hero-inline-header .student-hero-mini-card-no-avatar {
  width: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;

  display: block !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;

  transform: none !important;
}

.student-header-brand #studentHeroInlineProfile .student-hero-mini-avatar,
.student-hero-inline-header .student-hero-mini-avatar {
  display: none !important;
}

.student-header-brand #studentHeroInlineProfile .student-hero-mini-meta,
.student-hero-inline-header .student-hero-mini-meta {
  display: block !important;
  width: auto !important;
  min-width: 0 !important;
  transform: none !important;
}

.student-header-brand #studentHeroInlineProfile .student-hero-mini-name,
.student-hero-inline-header .student-hero-mini-name {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;

  font-size:20px !important;
  line-height: 1.15 !important;
  font-weight: 1000 !important;
  color: #0f172a !important;

  white-space: nowrap !important;
  letter-spacing: 0 !important;
  text-align: left !important;
  transform: none !important;
}

.student-header-brand #studentHeroInlineProfile .student-hero-mini-nickname,
.student-hero-inline-header .student-hero-mini-nickname {
  display: inline !important;
  margin-left: 4px !important;
  font-size:15px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  color: #475569 !important;
  transform: none !important;
}

.student-header-brand #studentHeroInlineProfile .student-hero-mini-sub,
.student-hero-inline-header .student-hero-mini-sub {
  display: block !important;
  margin: 3px 0 0 !important;
  padding: 0 !important;

  font-size:13px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
  color: #64748b !important;

  white-space: nowrap !important;
  text-align: left !important;
  transform: none !important;
}

@media (max-width: 640px) {
  .student-header-brand #studentHeroInlineProfile .student-hero-mini-name,
  .student-hero-inline-header .student-hero-mini-name {
    white-space: normal !important;
    font-size:18px !important;
  }

  .student-header-brand #studentHeroInlineProfile .student-hero-mini-sub,
  .student-hero-inline-header .student-hero-mini-sub {
    white-space: normal !important;
    font-size:13px !important;
  }
}
/* =====================================================
   MOVE STUDENT SEASON TO E-PORT MENU ROW
   ย้ายป้าย Season ลงมาไว้แถวเมนู E-Portfolio
===================================================== */

.eport-menu-season-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  margin: 10px 0 16px !important;
}

.eport-menu-season-row .eport-tabs {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin: 0 !important;
}

.student-eport-season-slot {
  flex: 0 1 470px !important;
  min-width: 360px !important;
  display: flex !important;
  justify-content: flex-end !important;
}

.student-eport-season-slot:empty {
  display: none !important;
}

.student-eport-season-slot #rankSeasonStudentBox {
  width: 100% !important;
  display: block !important;
  margin: 0 !important;
}

.student-eport-season-slot #rankSeasonStudentBox .rank-season-card {
  width: 100% !important;
  min-height: 52px !important;
  margin: 0 !important;
  padding: 7px 12px !important;
  border-radius: 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  box-shadow: 0 8px 18px rgba(245, 158, 11, .10) !important;
}

.student-eport-season-slot .season-main {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  min-width: 0 !important;
}

.student-eport-season-slot .season-badge {
  min-width: 72px !important;
  height: 36px !important;
  padding: 0 10px !important;
  border-radius: 14px !important;
  font-size:15px !important;
  font-weight: 1000 !important;
  white-space: nowrap !important;
}

.student-eport-season-slot .season-code {
  font-size:13px !important;
  line-height: 1.1 !important;
  font-weight: 1000 !important;
  white-space: nowrap !important;
}

.student-eport-season-slot .season-name {
  font-size:13px !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
}

.student-eport-season-slot .season-countdown-block {
  gap: 8px !important;
}

.student-eport-season-slot .season-clock {
  width: 34px !important;
  height: 34px !important;
  border-radius: 12px !important;
  font-size:16px !important;
}

.student-eport-season-slot .season-countdown {
  font-size:16px !important;
  line-height: 1 !important;
  font-weight: 1000 !important;
  white-space: nowrap !important;
}

.student-eport-season-slot .season-reset-text {
  font-size:13px !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
}

/* จอเล็กให้ป้าย Season ลงมาอีกบรรทัด */
@media (max-width: 980px) {
  .eport-menu-season-row {
    align-items: stretch !important;
    flex-direction: column !important;
  }

  .student-eport-season-slot {
    width: 100% !important;
    min-width: 0 !important;
    flex-basis: auto !important;
    justify-content: flex-start !important;
  }
}
/* =====================================================
   STUDENT APP HEADER INSIDE APP BORDER
   โลโก้ + ชื่อนักเรียนชิดซ้าย / เมนูชิดขวา / ออกจากระบบสีแดง
===================================================== */

#studentPage .student-header-clean {
  width: min(100% - 36px, 1180px) !important;
  margin: 16px auto 14px !important;
  padding: 14px 18px !important;
  box-sizing: border-box !important;

  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;

  background: rgba(255, 255, 255, .96) !important;
  border: 1px solid #dbeafe !important;
  border-radius: 24px !important;
  box-shadow: 0 12px 30px rgba(15, 23, 42, .045) !important;
}

/* ฝั่งซ้าย: โลโก้ + ชื่อนักเรียน */
#studentPage .student-header-brand {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

#studentPage .student-header-logo {
  width: 54px !important;
  height: 54px !important;
  flex: 0 0 54px !important;
  object-fit: contain !important;
}

/* ชื่อนักเรียน */
#studentPage .student-header-brand #studentHeroInlineProfile,
#studentPage .student-hero-inline-header {
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

#studentPage .student-header-brand .student-hero-mini-card,
#studentPage .student-hero-inline-header .student-hero-mini-card,
#studentPage .student-header-brand .student-hero-mini-card-no-avatar,
#studentPage .student-hero-inline-header .student-hero-mini-card-no-avatar {
  display: block !important;
  width: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

#studentPage .student-header-brand .student-hero-mini-name,
#studentPage .student-hero-inline-header .student-hero-mini-name {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;

  font-size:20px !important;
  line-height: 1.15 !important;
  font-weight: 1000 !important;
  color: #0f172a !important;

  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#studentPage .student-header-brand .student-hero-mini-nickname,
#studentPage .student-hero-inline-header .student-hero-mini-nickname {
  font-size:15px !important;
  font-weight: 800 !important;
  color: #475569 !important;
}

#studentPage .student-header-brand .student-hero-mini-sub,
#studentPage .student-hero-inline-header .student-hero-mini-sub {
  display: block !important;
  margin-top: 4px !important;

  font-size:13px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
  color: #64748b !important;

  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* ฝั่งขวา: ปุ่มเมนู */
#studentPage .student-header-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  flex: 0 0 auto !important;
  margin-left: auto !important;
}

#studentPage .student-header-actions .btn,
#studentPage .student-header-actions button {
  min-height: 42px !important;
  padding: 0 18px !important;
  border-radius: 999px !important;
  font-size:13.5px !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}

/* ปุ่มดูหน้า E-Portfolio */
#studentPage .student-header-actions button[onclick*="openMyPublicEPortfolio"],
#studentPage .student-header-actions .btn[onclick*="openMyPublicEPortfolio"] {
  background: #eff6ff !important;
  border-color: #bfdbfe !important;
  color: #2563eb !important;
}

#studentPage .student-header-actions button[onclick*="openMyPublicEPortfolio"]:hover,
#studentPage .student-header-actions .btn[onclick*="openMyPublicEPortfolio"]:hover {
  background: #dbeafe !important;
  border-color: #93c5fd !important;
}

/* ปุ่มออกจากระบบ = แดง */
#studentPage .student-header-actions button[onclick*="logout"],
#studentPage .student-header-actions .btn[onclick*="logout"] {
  background: #fff1f2 !important;
  border-color: #fecdd3 !important;
  color: #dc2626 !important;
}

#studentPage .student-header-actions button[onclick*="logout"]:hover,
#studentPage .student-header-actions .btn[onclick*="logout"]:hover {
  background: #fee2e2 !important;
  border-color: #fca5a5 !important;
  color: #b91c1c !important;
}

/* มือถือ/จอแคบ */
@media (max-width: 760px) {
  #studentPage .student-header-clean {
    width: calc(100% - 24px) !important;
    align-items: flex-start !important;
    flex-direction: column !important;
    gap: 12px !important;
    padding: 14px !important;
  }

  #studentPage .student-header-actions {
    width: 100% !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
    margin-left: 0 !important;
  }

  #studentPage .student-header-actions .btn,
  #studentPage .student-header-actions button {
    flex: 1 1 160px !important;
    justify-content: center !important;
  }

  #studentPage .student-header-brand .student-hero-mini-name,
  #studentPage .student-hero-inline-header .student-hero-mini-name,
  #studentPage .student-header-brand .student-hero-mini-sub,
  #studentPage .student-hero-inline-header .student-hero-mini-sub {
    white-space: normal !important;
  }
}
/* =====================================================
   RANK LOGO PREVIEW OVERLAY
   ขยายโลโก้แรงค์โดยไม่ปิด Popup กติกาแรงค์เดิม
===================================================== */

.rank-logo-preview-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 999999 !important;
  display: grid !important;
  place-items: center !important;
  padding: 24px !important;
  background: rgba(15, 23, 42, .48) !important;
  backdrop-filter: blur(3px) !important;
}

.rank-logo-preview-card {
  position: relative !important;
  width: min(420px, calc(100vw - 40px)) !important;
  min-height: 420px !important;
  padding: 34px 28px 28px !important;
  border-radius: 22px !important;
  background: #ffffff !important;
  box-shadow: 0 24px 60px rgba(15, 23, 42, .28) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

.rank-logo-preview-close {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  width: 36px !important;
  height: 36px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #f1f5f9 !important;
  color: #334155 !important;
  cursor: pointer !important;
  display: grid !important;
  place-items: center !important;
}

.rank-logo-preview-close:hover {
  background: #e2e8f0 !important;
}

.rank-logo-preview-image {
  width: min(280px, 70vw) !important;
  height: min(280px, 70vw) !important;
  object-fit: contain !important;
  filter: drop-shadow(0 16px 26px rgba(15, 23, 42, .18)) !important;
}

.rank-logo-preview-title {
  margin-top: 24px !important;
  font-size:28px !important;
  line-height: 1.1 !important;
  font-weight: 1000 !important;
  color: #334155 !important;
  text-align: center !important;
}

.rank-logo-preview-button {
  margin-top: 22px !important;
  min-width: 72px !important;
  min-height: 42px !important;
  padding: 0 18px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: #2563eb !important;
  color: #ffffff !important;
  font-size:15px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
}

.rank-logo-preview-button:hover {
  background: #1d4ed8 !important;
}
/* =====================================================
   FIX RANK LOGO CLICK TARGET
   กันกรณีรูป/ปุ่มโลโก้แรงค์โดน CSS อื่นทับจนคลิกไม่ติด
===================================================== */

.rank-zoom-img,
.rank-badge-img,
.student-rank-slim-logo,
.student-rank-slim-logo img,
.public-eport-rank-logo-v6,
.public-eport-rank-logo-v6 img,
.public-eport-rank-logo-v5,
.public-eport-rank-logo-v5 img,
.eport-rank-badge-head img,
.rank-rule-card img {
  cursor: zoom-in !important;
  pointer-events: auto !important;
}

.student-rank-slim-logo {
  position: relative !important;
  z-index: 5 !important;
}

.rank-rule-card img {
  position: relative !important;
  z-index: 3 !important;
}

/* =====================================================
   STUDENT LINE SPLIT AFTER COLON - FINAL
   รายการคะแนน: ข้อความเล็กลง + คะแนนอยู่ขวาบรรทัดเดียวกัน
===================================================== */

/* กล่องรายการแต่ละบรรทัด */
#studentPendingList .event-item,
#studentUnlockedList .event-item,
#studentBehaviorList .event-item,
#studentScoreList .event-item {
  min-height: 42px !important;
  padding: 9px 12px !important;

  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;

  font-size:13px !important;
  line-height: 1.35 !important;
}

/* ฝั่งข้อความ */
#studentPendingList .student-line-split,
#studentUnlockedList .student-line-split,
#studentBehaviorList .student-line-split,
#studentScoreList .student-line-split {
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 4px !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;

  font-size:13px !important;
  line-height: 1.35 !important;
  font-weight: 300 !important;
}

/* คำหน้า : เช่น ค้างงาน: คะแนน: พฤติกรรม: */
#studentPendingList .student-line-prefix,
#studentUnlockedList .student-line-prefix,
#studentBehaviorList .student-line-prefix,
#studentScoreList .student-line-prefix {
  font-size:13px !important;
  line-height: 1.35 !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  white-space: nowrap !important;
}

/* ข้อความหลัง : */
#studentPendingList .student-line-detail,
#studentUnlockedList .student-line-detail,
#studentBehaviorList .student-line-detail,
#studentScoreList .student-line-detail {
  font-size:13px !important;
  line-height: 1.35 !important;
  font-weight: 400 !important;
  color: #334155 !important;

  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* คะแนน + / - ให้อยู่ขวา บรรทัดเดียวกัน */
#studentPendingList .score-plus,
#studentPendingList .score-minus,
#studentUnlockedList .score-plus,
#studentUnlockedList .score-minus,
#studentBehaviorList .score-plus,
#studentBehaviorList .score-minus,
#studentScoreList .score-plus,
#studentScoreList .score-minus {
  flex: 0 0 auto !important;
  margin-left: auto !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;

  font-size:13px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}

/* กันกรณีคะแนนเป็น span/div ตัวสุดท้ายแต่ไม่มี class */
#studentPendingList .event-item > :last-child,
#studentUnlockedList .event-item > :last-child,
#studentBehaviorList .event-item > :last-child,
#studentScoreList .event-item > :last-child {
  flex: 0 0 auto !important;
  margin-left: auto !important;
  white-space: nowrap !important;
}

/* =====================================================
   TEACHER SIDEBAR DROPDOWN MENU
   รวมเมนูพฤติกรรม / งานค้าง เป็นกลุ่มเมนูย่อย
===================================================== */

.teacher-side-menu {
  gap: 6px !important;
}

.teacher-menu-group {
  display: grid !important;
  gap: 4px !important;
}

.teacher-menu-main {
  position: relative !important;
}

.teacher-menu-caret {
  margin-left: auto !important;
  width: auto !important;
  font-size:13px !important;
  opacity: .58 !important;
  transition: transform .18s ease !important;
}

.teacher-menu-group.is-open .teacher-menu-caret {
  transform: rotate(180deg) !important;
}

.teacher-menu-group.active-parent > .teacher-menu-main {
  background: var(--soft-blue) !important;
  color: var(--blue) !important;
}

.teacher-sub-menu {
  display: none !important;
  gap: 4px !important;
  padding-left: 16px !important;
  margin-top: -2px !important;
  margin-bottom: 4px !important;
}

.teacher-menu-group.is-open .teacher-sub-menu {
  display: grid !important;
}

.teacher-sub-menu .teacher-sub-btn {
  min-height: 36px !important;
  padding: 9px 10px 9px 14px !important;
  border-radius: 12px !important;
  font-size:13px !important;
  color: #475569 !important;
  background: transparent !important;
  border-left: 2px solid #e2e8f0 !important;
}

.teacher-sub-menu .teacher-sub-btn i {
  width: 18px !important;
  font-size:13px !important;
  color: #64748b !important;
}

.teacher-sub-menu .teacher-sub-btn:hover,
.teacher-sub-menu .teacher-sub-btn.active {
  background: #eff6ff !important;
  color: #2563eb !important;
  border-left-color: #2563eb !important;
}

.teacher-sub-menu .teacher-sub-btn:hover i,
.teacher-sub-menu .teacher-sub-btn.active i {
  color: #2563eb !important;
}

/* ตอน Sidebar ย่อ ให้ซ่อนเมนูย่อย กันล้น */
.sidebar.collapsed .teacher-sub-menu {
  display: none !important;
}

.sidebar.collapsed .teacher-menu-caret {
  display: none !important;
}

/* มือถือ ให้เมนูย่อยไม่กินพื้นที่มาก */
@media (max-width: 860px) {
  .teacher-sub-menu {
    padding-left: 8px !important;
  }

  .teacher-sub-menu .teacher-sub-btn {
    padding: 9px 10px !important;
  }
}
/* =====================================================
   PUBLIC HEADER ALIGN WITH BODY
   ให้โลโก้ ชื่อโรงเรียน และปุ่มขวา อยู่ในระยะเดียวกับบอดี้
===================================================== */

.public-page .hero {
  padding-left: max(16px, calc((100vw - 1180px) / 2)) !important;
  padding-right: max(16px, calc((100vw - 1180px) / 2)) !important;
  padding-top: 22px !important;
  padding-bottom: 22px !important;
}

/* กันหัวเว็บยืด/ล้น */
.public-page .hero-left {
  min-width: 0 !important;
}

.public-page .hero-left > div {
  min-width: 0 !important;
}

.public-page .hero h1,
.public-page .hero p {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* จอเล็กให้ยังอ่านง่าย */
@media (max-width: 860px) {
  .public-page .hero {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .public-page .hero-login {
    width: 100% !important;
  }

  .public-page .hero-login .btn {
    flex: 1 1 180px !important;
  }
}
/* =====================================================
   PUBLIC TOP STATS 6 CARDS - COMPACT FINAL
   การ์ดหน้าแรก 6 ใบ + ลดขนาดคำอธิบายการ์ด
===================================================== */

#publicStats {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(132px, 1fr)) !important;
  gap: 12px !important;
  align-items: stretch !important;
}

/* ลดความสูงและความหนาของการ์ด */
#publicStats .stat-card,
#publicStats .public-season-card {
  min-height: 96px !important;
  border-radius: 16px !important;
  padding: 12px 14px !important;
}

/* การ์ดข้อมูลทั่วไป */
#publicStats .stat-card {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-width: 0 !important;
}

#publicStats .stat-card .stat-icon {
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  border-radius: 15px !important;
  font-size:18px !important;
}

#publicStats .stat-card h3 {
  font-size:30px !important;
  line-height: 1 !important;
  margin: 0 0 3px !important;
  font-weight: 1000 !important;
}

/* ตรงนี้คือคำอธิบายการ์ดที่จิ๊บให้เล็กลง */
#publicStats .stat-card p {
  font-size:13px !important;
  line-height: 1.15 !important;
  margin: 0 !important;
  font-weight: 800 !important;
  color: #64748b !important;
}

/* การ์ดสีม่วงสำหรับคะแนนเฉลี่ย */
#publicStats .stat-card.stat-purple {
  border-color: #c4b5fd !important;
  background:
    radial-gradient(circle at 88% 80%, rgba(124, 58, 237, .15) 0 32%, transparent 33%),
    linear-gradient(135deg, #faf5ff 0%, #f5f3ff 55%, #ede9fe 100%) !important;
}

#publicStats .stat-card.stat-purple .stat-icon {
  background: #ffffff !important;
  color: #7c3aed !important;
}

#publicStats .stat-card.stat-purple h3 {
  color: #7c3aed !important;
}

#publicStats .stat-card.stat-purple p {
  color: #5b21b6 !important;
}

/* การ์ด Season ให้เล็กลงและไม่กว้างเกิน */
#publicStats .public-season-card {
  gap: 10px !important;
}

#publicStats .public-season-card .season-card-badge {
  width: 58px !important;
  height: 58px !important;
  min-width: 58px !important;
  border-radius: 16px !important;
  font-size:13px !important;
}

#publicStats .public-season-card .season-crown {
  top: -8px !important;
  transform: scale(.85) !important;
}

#publicStats .public-season-card .season-card-content {
  min-width: 0 !important;
}

#publicStats .public-season-card .season-card-content h3 {
  font-size:20px !important;
  line-height: 1 !important;
  margin: 0 0 4px !important;
  font-weight: 1000 !important;
}

/* คำอธิบายรีแรงค์ให้เล็กลง */
#publicStats .public-season-card .season-card-content p {
  font-size:13px !important;
  line-height: 1.15 !important;
  margin: 0 0 2px !important;
  font-weight: 900 !important;
}

#publicStats .public-season-card .season-card-content small {
  font-size:13px !important;
  line-height: 1.1 !important;
}

/* จอกลาง */
@media (max-width: 1180px) {
  #publicStats {
    grid-template-columns: repeat(3, minmax(150px, 1fr)) !important;
  }
}

/* มือถือ */
@media (max-width: 760px) {
  #publicStats {
    grid-template-columns: repeat(2, minmax(140px, 1fr)) !important;
    gap: 10px !important;
  }

  #publicStats .stat-card,
  #publicStats .public-season-card {
    min-height: 86px !important;
    padding: 11px 12px !important;
  }
}

@media (max-width: 430px) {
  #publicStats {
    grid-template-columns: 1fr !important;
  }
}

/* =====================================================
   PUBLIC STAT CARD - FINAL TWEAK
   คะแนนบวกรวม + Season Compact
===================================================== */

/* เอาเส้นกรอบด้านในการ์ด Season ออก */
#publicStats .public-season-card::before {
  display: none !important;
  content: none !important;
}

/* ปรับป้าย S1/26 ให้สั้นและชัด */
#publicStats .public-season-card .season-card-badge strong {
  font-size:13px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  letter-spacing: 0 !important;
}

/* ลดข้อความอธิบายการ์ดให้เล็กลงอีกนิด */
#publicStats .stat-card p {
  font-size:13px !important;
  line-height: 1.12 !important;
}

#publicStats .public-season-card .season-card-content p {
  font-size:13px !important;
  line-height: 1.12 !important;
}

#publicStats .public-season-card .season-card-content small {
  font-size:13px !important;
  line-height: 1.08 !important;
}

/* =====================================================
   PUBLIC SEASON BADGE - EMPHASIZE SEASON CODE
   ขยาย S1/26 ให้เด่นขึ้น
===================================================== */

#publicStats .public-season-card .season-card-badge {
  width: 62px !important;
  height: 58px !important;
  min-width: 62px !important;
  padding: 0 6px !important;
}

#publicStats .public-season-card .season-card-badge strong {
  font-size:17px !important;
  line-height: 1 !important;
  font-weight: 1000 !important;
  letter-spacing: -0.2px !important;
  white-space: nowrap !important;
}
/* =====================================================
   PUBLIC INDEX - SMART STUDENT+ BLUE MINIMAL THEME
   ปรับหน้า Index ให้เรียบหรู โทนฟ้า/น้ำเงิน ไม่ลูกกวาด
   วางท้ายไฟล์ AppStyle.html
===================================================== */

:root {
  --ss-blue: #2563eb;
  --ss-blue-dark: #1e40af;
  --ss-blue-soft: #eff6ff;
  --ss-blue-line: #bfdbfe;
  --ss-sky-soft: #f5f9ff;
  --ss-bg: #f3f6fb;
  --ss-card: #ffffff;
  --ss-text: #0f172a;
  --ss-muted: #64748b;
  --ss-line: #dbe7f5;
}

/* =========================
   PAGE BACKGROUND / CONTAINER
========================= */

#publicPage.public-page {
  background:
    radial-gradient(circle at 18% 0%, rgba(37, 99, 235, .06), transparent 28%),
    linear-gradient(180deg, #f8fbff 0%, #f3f6fb 42%, #eef4fb 100%) !important;
  color: var(--ss-text) !important;
}

#publicPage .public-container {
  max-width: 1180px !important;
  padding-top: 28px !important;
}

/* =========================
   HEADER / HERO
========================= */

#publicPage .hero {
  padding-left: max(18px, calc((100vw - 1180px) / 2)) !important;
  padding-right: max(18px, calc((100vw - 1180px) / 2)) !important;
  padding-top: 22px !important;
  padding-bottom: 22px !important;
  background: rgba(255, 255, 255, .94) !important;
  border-bottom: 1px solid var(--ss-line) !important;
  box-shadow: none !important;
}

#publicPage .hero-left {
  gap: 14px !important;
  min-width: 0 !important;
}

#publicPage .school-logo {
  width: 58px !important;
  height: 58px !important;
  border-radius: 18px !important;
  border: 1px solid var(--ss-line) !important;
  background: #ffffff !important;
  padding: 4px !important;
  box-shadow: 0 8px 20px rgba(15, 23, 42, .06) !important;
}

#publicPage .hero-brand-text h1,
#publicPage .hero h1 {
  margin: 0 !important;
  font-size:28px !important;
  line-height: 1.12 !important;
  font-weight: 1000 !important;
  letter-spacing: -.2px !important;
  color: #0f172a !important;
}

#publicPage .hero-brand-text p,
#publicPage .hero p {
  margin: 4px 0 0 !important;
  font-size:14px !important;
  line-height: 1.35 !important;
  color: #475569 !important;
  font-weight: 700 !important;
}

#publicPage .hero-brand-text small {
  display: block !important;
  margin-top: 2px !important;
  font-size:13px !important;
  line-height: 1.25 !important;
  color: #64748b !important;
  font-weight: 600 !important;
}

#publicPage .hero-login {
  gap: 10px !important;
}

#publicPage .hero-login .btn {
  min-height: 40px !important;
  border-radius: 999px !important;
  padding: 9px 15px !important;
  font-size:13px !important;
  font-weight: 900 !important;
  box-shadow: none !important;
}

#publicPage .hero-login .btn-primary {
  background: var(--ss-blue) !important;
  border-color: var(--ss-blue) !important;
  color: #ffffff !important;
}

#publicPage .hero-login .btn-outline {
  background: #ffffff !important;
  color: var(--ss-blue) !important;
  border-color: var(--ss-blue-line) !important;
}

/* =========================
   SECTION HEAD
========================= */

#publicPage .section-head {
  align-items: center !important;
  margin-bottom: 16px !important;
}

#publicPage .section-head h2 {
  margin: 0 !important;
  font-size:24px !important;
  line-height: 1.2 !important;
  font-weight: 1000 !important;
  color: #0f172a !important;
}

#publicPage .section-head p {
  margin: 5px 0 0 !important;
  font-size:13.5px !important;
  line-height: 1.45 !important;
  color: var(--ss-muted) !important;
  font-weight: 600 !important;
}

#publicPage .section-head .btn-soft {
  background: #ffffff !important;
  color: var(--ss-blue) !important;
  border: 1px solid var(--ss-blue-line) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
}

/* =========================
   TOP STAT CARDS - BLUE MINIMAL
========================= */

#publicStats {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(132px, 1fr)) !important;
  gap: 12px !important;
  align-items: stretch !important;
  margin-bottom: 18px !important;
}

#publicStats .stat-card,
#publicStats .public-season-card {
  min-height: 92px !important;
  padding: 13px 14px !important;
  border-radius: 18px !important;
  border: 1px solid var(--ss-line) !important;
  background:
    radial-gradient(circle at 92% 85%, rgba(37, 99, 235, .08) 0 34%, transparent 35%),
    #ffffff !important;
  box-shadow: 0 10px 26px rgba(15, 23, 42, .05) !important;
  overflow: hidden !important;
}

#publicStats .stat-card {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

#publicStats .stat-card:hover,
#publicStats .public-season-card:hover {
  transform: translateY(-2px) !important;
  border-color: #93c5fd !important;
  box-shadow: 0 14px 30px rgba(37, 99, 235, .10) !important;
}

/* ล้างสีลูกกวาดของการ์ดเดิมทุกประเภท */
#publicStats .stat-card.stat-blue,
#publicStats .stat-card.stat-green,
#publicStats .stat-card.stat-yellow,
#publicStats .stat-card.stat-pink,
#publicStats .stat-card.stat-purple,
#publicStats .stat-card.stat-red {
  border-color: var(--ss-line) !important;
  background:
    radial-gradient(circle at 92% 85%, rgba(37, 99, 235, .08) 0 34%, transparent 35%),
    #ffffff !important;
}

#publicStats .stat-card .stat-icon {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  border-radius: 15px !important;
  background: var(--ss-blue-soft) !important;
  color: var(--ss-blue) !important;
  box-shadow: none !important;
  font-size:18px !important;
}

#publicStats .stat-card h3 {
  margin: 0 0 3px !important;
  font-size:29px !important;
  line-height: 1 !important;
  font-weight: 1000 !important;
  color: var(--ss-blue) !important;
  letter-spacing: -.3px !important;
}

#publicStats .stat-card p {
  margin: 0 !important;
  font-size:13px !important;
  line-height: 1.15 !important;
  font-weight: 800 !important;
  color: var(--ss-muted) !important;
}

/* =========================
   SEASON CARD - BLUE COMPACT
========================= */

#publicStats .public-season-card {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

#publicStats .public-season-card::before,
#publicStats .public-season-card::after {
  display: none !important;
  content: none !important;
}

#publicStats .public-season-card .season-card-badge {
  width: 60px !important;
  height: 56px !important;
  min-width: 60px !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

#publicStats .public-season-card .season-card-badge strong {
  font-size:16px !important;
  line-height: 1 !important;
  font-weight: 1000 !important;
  letter-spacing: -.2px !important;
  white-space: nowrap !important;
}

#publicStats .public-season-card .season-crown {
  transform: scale(.78) !important;
  top: -9px !important;
}

#publicStats .public-season-card .season-card-content h3 {
  margin: 0 0 3px !important;
  font-size:19px !important;
  line-height: 1 !important;
  font-weight: 1000 !important;
  color: #0f172a !important;
}

#publicStats .public-season-card .season-card-content p {
  margin: 0 0 1px !important;
  font-size:13px !important;
  line-height: 1.1 !important;
  font-weight: 900 !important;
  color: #334155 !important;
}

#publicStats .public-season-card .season-card-content small {
  font-size:13px !important;
  line-height: 1.05 !important;
  color: #64748b !important;
}

/* =========================
   INSIGHT PANELS
========================= */

#publicPage .public-insight-grid {
  gap: 16px !important;
}

#publicPage .panel,
#publicPage .public-insight-panel,
#publicPage .eport-showcase-panel {
  border: 1px solid var(--ss-line) !important;
  background: rgba(255, 255, 255, .96) !important;
  box-shadow: 0 10px 28px rgba(15, 23, 42, .05) !important;
  border-radius: 20px !important;
}

#publicPage .panel-title,
#publicPage .panel-title-row,
#publicPage .rank-title-row,
#publicPage .latest-success-title {
  color: #0f172a !important;
}

#publicPage .panel-title i,
#publicPage .latest-success-title i,
#publicPage .rank-title-row i {
  color: var(--ss-blue) !important;
}

#publicPage .rank-rule-btn,
#publicPage .panel-header-badge {
  background: var(--ss-blue-soft) !important;
  color: var(--ss-blue) !important;
  border: 1px solid var(--ss-blue-line) !important;
  box-shadow: none !important;
}

/* ล้างสีจัดของ list compact ให้เป็นขาว-ฟ้า */
#publicPage .compact-dashboard-item,
#publicPage .compact-rank-item,
#publicPage .compact-positive-item,
#publicPage .compact-class-item {
  background: #ffffff !important;
  border: 1px solid var(--ss-line) !important;
  border-left: 4px solid var(--ss-blue) !important;
  box-shadow: none !important;
}

#publicPage .compact-dashboard-item::before,
#publicPage .compact-dashboard-item::after {
  opacity: .10 !important;
}

#publicPage .compact-positive-icon,
#publicPage .compact-rank-badge,
#publicPage .compact-rank-no {
  background: var(--ss-blue-soft) !important;
  color: var(--ss-blue) !important;
  border-color: var(--ss-blue-line) !important;
}

#publicPage .compact-score,
#publicPage .compact-pill {
  background: var(--ss-blue-soft) !important;
  color: var(--ss-blue) !important;
  border: 1px solid var(--ss-blue-line) !important;
}

/* =========================
   E-PORTFOLIO SHOWCASE PANEL
========================= */

#publicPage .eport-showcase-panel {
  margin-top: 18px !important;
  border-color: var(--ss-line) !important;
  background:
    radial-gradient(circle at 8% 0%, rgba(37, 99, 235, .05), transparent 28%),
    #ffffff !important;
}

#publicPage .eport-showcase-head {
  align-items: center !important;
}

#publicPage .eport-showcase-head .panel-title {
  font-size:18px !important;
  font-weight: 1000 !important;
}

#publicPage .eport-showcase-head p,
#publicPage .eport-showcase-count {
  color: var(--ss-muted) !important;
  font-size:13px !important;
}

#publicPage .eport-showcase-tools .input {
  border: 1px solid var(--ss-line) !important;
  border-radius: 16px !important;
  background: #ffffff !important;
  color: #0f172a !important;
  box-shadow: none !important;
}

/* =========================
   PUBLIC E-PORT CARD - CLEAN BLUE
========================= */

#publicEPortStudentList .public-eport-grid-v6 {
  gap: 14px !important;
}

#publicEPortStudentList .public-eport-card-v6,
#publicEPortStudentList .public-eport-card-v6.rank-chronos,
#publicEPortStudentList .public-eport-card-v6.rank-hermes,
#publicEPortStudentList .public-eport-card-v6.rank-apollo,
#publicEPortStudentList .public-eport-card-v6.rank-athena,
#publicEPortStudentList .public-eport-card-v6.rank-poseidon,
#publicEPortStudentList .public-eport-card-v6.rank-zeus,
#publicEPortStudentList .public-eport-card-v6.rank-unranked {
  background:
    radial-gradient(circle at 88% 12%, rgba(37, 99, 235, .06), transparent 24%),
    #ffffff !important;
  border: 1px solid var(--ss-line) !important;
  border-radius: 22px !important;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .05) !important;
  padding: 14px !important;
}

#publicEPortStudentList .public-eport-card-v6:hover {
  transform: translateY(-3px) !important;
  border-color: #93c5fd !important;
  box-shadow: 0 16px 34px rgba(37, 99, 235, .10) !important;
}

/* ป้ายแรงค์ให้เป็นจุดเล็ก ไม่ทำทั้งการ์ดเป็นสีแรงค์ */
#publicEPortStudentList .public-eport-rank-label-v6 {
  background: var(--ss-blue-soft) !important;
  color: var(--ss-blue) !important;
  border: 1px solid var(--ss-blue-line) !important;
  box-shadow: none !important;
}

#publicEPortStudentList .public-eport-rank-logo-v6 img {
  filter: drop-shadow(0 6px 10px rgba(15, 23, 42, .10)) !important;
}

/* รูปนักเรียนลดความการ์ตูนลง */
#publicEPortStudentList .public-eport-photo-wrap-v6 {
  border-radius: 22px !important;
  border: 4px solid #ffffff !important;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .08) !important;
}

#publicEPortStudentList .public-eport-name-v6 {
  color: #0f172a !important;
  font-size:16px !important;
  line-height: 1.25 !important;
  font-weight: 1000 !important;
}

#publicEPortStudentList .public-eport-meta-v6 span {
  background: #f8fafc !important;
  color: #475569 !important;
  border: 1px solid #e2e8f0 !important;
}

#publicEPortStudentList .public-eport-btn-v6 {
  background: var(--ss-blue) !important;
  color: #ffffff !important;
  border-radius: 999px !important;
  box-shadow: 0 10px 20px rgba(37, 99, 235, .18) !important;
}

/* TOP SERVER เป็นน้ำเงินเดียว ไม่หลากสี */
#publicEPortStudentList .public-eport-top-server-v6,
#publicEPortStudentList .public-eport-top-1,
#publicEPortStudentList .public-eport-top-2,
#publicEPortStudentList .public-eport-top-3,
#publicEPortStudentList .public-eport-top-4,
#publicEPortStudentList .public-eport-top-5 {
  background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, .55) !important;
  box-shadow: 0 8px 18px rgba(37, 99, 235, .18) !important;
}

/* ดาวยังเป็นทองได้ แต่ลดความแสบ */
#publicEPortStudentList .public-eport-stars-v6 .star.filled i {
  color: #fbbf24 !important;
  filter: drop-shadow(0 2px 3px rgba(245, 158, 11, .20)) !important;
}

#publicEPortStudentList .public-eport-stars-v6 .star.empty i {
  color: #e5e7eb !important;
  filter: none !important;
}

/* =========================
   FOOTER
========================= */

#publicPage .footer {
  background: #ffffff !important;
  border-top: 1px solid var(--ss-line) !important;
  color: var(--ss-muted) !important;
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 1180px) {
  #publicStats {
    grid-template-columns: repeat(3, minmax(150px, 1fr)) !important;
  }
}

@media (max-width: 860px) {
  #publicPage .hero {
    padding-left: 16px !important;
    padding-right: 16px !important;
    align-items: flex-start !important;
  }

  #publicPage .hero-left {
    align-items: center !important;
  }

  #publicPage .hero-login {
    width: 100% !important;
    justify-content: stretch !important;
  }

  #publicPage .hero-login .btn {
    flex: 1 1 180px !important;
  }

  #publicPage .section-head {
    align-items: stretch !important;
    flex-direction: column !important;
  }

  #publicPage .eport-showcase-head {
    align-items: stretch !important;
    flex-direction: column !important;
  }

  #publicPage .eport-showcase-tools {
    min-width: 0 !important;
    width: 100% !important;
  }
}

@media (max-width: 760px) {
  #publicStats {
    grid-template-columns: repeat(2, minmax(140px, 1fr)) !important;
    gap: 10px !important;
  }

  #publicStats .stat-card,
  #publicStats .public-season-card {
    min-height: 84px !important;
  }
}

@media (max-width: 430px) {
  #publicStats {
    grid-template-columns: 1fr !important;
  }

  #publicPage .hero-brand-text h1,
  #publicPage .hero h1 {
    font-size:22px !important;
  }
}

/* =====================================================
   PUBLIC INDEX - BADGES / BUTTON / 5 SHARP STARS
   คืนสีป้ายสำคัญ + ปรับปุ่ม E-Portfolio + ดาว 5 ดวงคมขึ้น
===================================================== */

/* =========================
   1) CLASS LEADER ยังคงมีสีทอง
========================= */

#publicPage .panel-header-badge,
#publicPage .class-leader-badge,
#publicPage .classLeaderHeaderBadge,
#classLeaderHeaderBadge .panel-header-badge {
  background: #fff7ed !important;
  color: #c2410c !important;
  border: 1px solid #fed7aa !important;
  box-shadow: 0 6px 14px rgba(245, 158, 11, .12) !important;
}

#publicPage .panel-header-badge i,
#publicPage .class-leader-badge i,
#classLeaderHeaderBadge .panel-header-badge i {
  color: #f59e0b !important;
}

/* Classroom leader card ให้ยังเด่นนิด ๆ แต่ไม่ลูกกวาด */
#publicPage .compact-class-leader {
  border-left-color: #f59e0b !important;
  background:
    linear-gradient(90deg, rgba(255, 247, 237, .88), #ffffff) !important;
}

/* =========================
   2) TOP SERVER / TOP badges มีสีตามอันดับ
========================= */

#publicEPortStudentList .public-eport-top-server-v6 {
  border: 1px solid rgba(255, 255, 255, .62) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, .14) !important;
}

#publicEPortStudentList .public-eport-top-1 {
  background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 100%) !important;
}

#publicEPortStudentList .public-eport-top-2 {
  background: linear-gradient(180deg, #60a5fa 0%, #2563eb 100%) !important;
}

#publicEPortStudentList .public-eport-top-3 {
  background: linear-gradient(180deg, #34d399 0%, #059669 100%) !important;
}

#publicEPortStudentList .public-eport-top-4 {
  background: linear-gradient(180deg, #a78bfa 0%, #7c3aed 100%) !important;
}

#publicEPortStudentList .public-eport-top-5 {
  background: linear-gradient(180deg, #fb7185 0%, #e11d48 100%) !important;
}

/* TOP ใน TR107 Rank list ให้มีสีแยกเหมือนเดิม */
#publicPage .compact-rank-badge-1 {
  background: #fff7ed !important;
  color: #c2410c !important;
  border-color: #fed7aa !important;
}

#publicPage .compact-rank-badge-2 {
  background: #eff6ff !important;
  color: #2563eb !important;
  border-color: #bfdbfe !important;
}

#publicPage .compact-rank-badge-3 {
  background: #ecfdf5 !important;
  color: #059669 !important;
  border-color: #bbf7d0 !important;
}

/* =========================
   3) ปุ่ม ดู E-Portfolio เล็กลง เรียบขึ้น เข้าธีมน้ำเงิน
========================= */

#publicEPortStudentList .public-eport-btn-v6 {
  width: auto !important;
  min-width: 148px !important;
  max-width: 178px !important;
  min-height: 34px !important;
  margin: 10px auto 0 !important;
  padding: 8px 15px !important;
  border-radius: 999px !important;
  font-size:13px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  background: #2563eb !important;
  color: #ffffff !important;
  border: 1px solid #1d4ed8 !important;
  box-shadow: 0 8px 16px rgba(37, 99, 235, .16) !important;
}

#publicEPortStudentList .public-eport-btn-v6 i {
  font-size:13px !important;
}

#publicEPortStudentList .public-eport-btn-v6:hover {
  background: #1d4ed8 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 10px 20px rgba(37, 99, 235, .22) !important;
}

/* =========================
   4) ดาว 5 ดวง มุมคมขึ้น
   ใช้ clip-path วาดดาวแทน Font Awesome เดิม
========================= */

#publicEPortStudentList .public-eport-stars-v6 {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  margin: 12px 0 8px !important;
}

/* ซ่อน icon ดาวเดิม แล้วใช้ ::before วาดดาวคมกว่า */
#publicEPortStudentList .public-eport-stars-v6 .star {
  width: 18px !important;
  height: 18px !important;
  display: inline-block !important;
  position: relative !important;
  line-height: 1 !important;
}

#publicEPortStudentList .public-eport-stars-v6 .star i {
  display: none !important;
}

#publicEPortStudentList .public-eport-stars-v6 .star::before {
  content: "" !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;

  /* ดาวมุมแหลมกว่าของ Font Awesome */
  clip-path: polygon(
    50% 0%,
    61% 35%,
    100% 35%,
    68% 56%,
    80% 96%,
    50% 72%,
    20% 96%,
    32% 56%,
    0% 35%,
    39% 35%
  ) !important;
}

#publicEPortStudentList .public-eport-stars-v6 .star.filled::before {
  background: #fbbf24 !important;
  filter: drop-shadow(0 2px 3px rgba(245, 158, 11, .22)) !important;
}

#publicEPortStudentList .public-eport-stars-v6 .star.empty::before {
  background: #e5e7eb !important;
  opacity: .78 !important;
  filter: none !important;
}

/* Chronos จะได้เป็นดาวจางทั้ง 5 ดวง */
#publicEPortStudentList .public-eport-card-v6.rank-chronos .public-eport-stars-v6 .star::before {
  background: #e5e7eb !important;
  opacity: .78 !important;
  filter: none !important;
}
/* =====================================================
   SMART STUDENT+ LOGIN MODAL
   แต่งหน้าต่างเข้าสู่ระบบให้เรียบหรู เข้าธีมฟ้า-น้ำเงิน
   ใช้ได้ทั้งหน้า Index และหน้า Login แยก
===================================================== */

/* ฉากหลัง popup */
#loginModal.modal {
  background: rgba(15, 23, 42, .48) !important;
  backdrop-filter: blur(8px) !important;
}

/* กล่อง Login หลัก */
#loginModal .login-card {
  position: relative !important;
  width: min(430px, calc(100% - 28px)) !important;
  padding: 30px 28px 26px !important;
  border-radius: 30px !important;
  background: #ffffff !important;
  border: 1px solid #dbe7f5 !important;
  box-shadow: 0 26px 70px rgba(15, 23, 42, .22) !important;
  overflow: hidden !important;
}

/* แถบแบรนด์เล็กด้านบน */
#loginModal .login-card::before {
  content: "Smart Student+" !important;
  display: inline-flex !important;
  align-items: center !important;
  position: absolute !important;
  top: 18px !important;
  left: 28px !important;
  height: 26px !important;
  padding: 0 11px !important;
  border-radius: 999px !important;
  background: #eff6ff !important;
  color: #2563eb !important;
  font-size:13px !important;
  font-weight: 1000 !important;
  letter-spacing: .2px !important;
  border: 1px solid #bfdbfe !important;
}

/* ลายวงกลมอ่อน ๆ ด้านหลัง */
#loginModal .login-card::after {
  content: "" !important;
  position: absolute !important;
  right: -62px !important;
  top: -62px !important;
  width: 160px !important;
  height: 160px !important;
  border-radius: 999px !important;
  background: #eff6ff !important;
  opacity: .85 !important;
  pointer-events: none !important;
}

/* ปุ่มปิด */
#loginModal .modal-close {
  position: absolute !important;
  top: 16px !important;
  right: 16px !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 999px !important;
  background: #f8fafc !important;
  color: #0f172a !important;
  border: 1px solid #e2e8f0 !important;
  display: grid !important;
  place-items: center !important;
  z-index: 3 !important;
  transition: .16s ease !important;
}

#loginModal .modal-close:hover {
  background: #eff6ff !important;
  color: #2563eb !important;
  border-color: #bfdbfe !important;
  transform: rotate(90deg) !important;
}

/* ไอคอน Login */
#loginModal .login-icon {
  position: relative !important;
  z-index: 2 !important;
  width: 68px !important;
  height: 68px !important;
  margin: 24px 0 14px !important;
  border-radius: 22px !important;
  background: #eff6ff !important;
  color: #2563eb !important;
  border: 1px solid #dbeafe !important;
  box-shadow: none !important;
  font-size:28px !important;
}

/* หัวข้อ */
#loginModal #loginTitle {
  position: relative !important;
  z-index: 2 !important;
  margin: 0 !important;
  font-size:25px !important;
  line-height: 1.18 !important;
  font-weight: 1000 !important;
  letter-spacing: -.2px !important;
  color: #0f172a !important;
}

#loginModal #loginDesc {
  position: relative !important;
  z-index: 2 !important;
  margin: 6px 0 20px !important;
  font-size:13.5px !important;
  line-height: 1.45 !important;
  color: #64748b !important;
  font-weight: 600 !important;
}

/* label */
#loginModal .login-card label {
  position: relative !important;
  z-index: 2 !important;
  display: block !important;
  margin: 12px 0 6px !important;
  color: #0f172a !important;
  font-size:13.5px !important;
  line-height: 1.2 !important;
  font-weight: 900 !important;
}

/* ช่องกรอก */
#loginModal .login-card .input {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  min-height: 44px !important;
  border-radius: 15px !important;
  border: 1px solid #dbe7f5 !important;
  background: #ffffff !important;
  color: #0f172a !important;
  padding: 11px 14px !important;
  font-size:14px !important;
  font-weight: 600 !important;
  outline: none !important;
  box-shadow: none !important;
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease !important;
}

#loginModal .login-card .input::placeholder {
  color: #94a3b8 !important;
  font-weight: 500 !important;
}

#loginModal .login-card .input:focus {
  border-color: #2563eb !important;
  background: #f8fbff !important;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, .10) !important;
}

/* ปุ่มเข้าสู่ระบบ */
#loginModal .login-card .btn.full,
#loginModal .login-card .btn-primary.full {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  min-height: 44px !important;
  margin-top: 16px !important;
  border-radius: 999px !important;
  background: #2563eb !important;
  border: 1px solid #2563eb !important;
  color: #ffffff !important;
  font-size:14px !important;
  font-weight: 1000 !important;
  box-shadow: 0 12px 24px rgba(37, 99, 235, .22) !important;
  transition: .16s ease !important;
}

#loginModal .login-card .btn.full:hover,
#loginModal .login-card .btn-primary.full:hover {
  background: #1d4ed8 !important;
  border-color: #1d4ed8 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 14px 28px rgba(37, 99, 235, .28) !important;
}

/* =========================
   LOGIN GATEWAY PAGE
   สำหรับหน้า Login แยกที่จิ๊บส่งมา
========================= */

.login-page-only {
  background:
    radial-gradient(circle at 12% 0%, rgba(37, 99, 235, .08), transparent 30%),
    #f3f6fb !important;
}

.login-gateway-card {
  width: min(540px, 100%) !important;
  padding: 32px 30px !important;
  border-radius: 30px !important;
  background: #ffffff !important;
  border: 1px solid #dbe7f5 !important;
  box-shadow: 0 24px 68px rgba(15, 23, 42, .12) !important;
}

.login-gateway-logo {
  width: 76px !important;
  height: 76px !important;
  padding: 6px !important;
  border-radius: 24px !important;
  border: 1px solid #dbe7f5 !important;
  background: #ffffff !important;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .08) !important;
}

.login-gateway-card h1 {
  margin-top: 12px !important;
  font-size:28px !important;
  font-weight: 1000 !important;
  letter-spacing: -.2px !important;
  color: #0f172a !important;
}

.login-gateway-card p {
  margin: 8px 0 22px !important;
  color: #64748b !important;
  font-size:14px !important;
  line-height: 1.55 !important;
  font-weight: 600 !important;
}

.login-gateway-actions {
  gap: 12px !important;
}

.login-gateway-actions .btn {
  min-height: 42px !important;
  border-radius: 999px !important;
  padding: 10px 16px !important;
  font-size:13.5px !important;
  font-weight: 1000 !important;
  box-shadow: none !important;
}

.login-gateway-actions .btn-primary {
  background: #2563eb !important;
  border-color: #2563eb !important;
  color: #ffffff !important;
  box-shadow: 0 10px 22px rgba(37, 99, 235, .20) !important;
}

.login-gateway-actions .btn-outline {
  background: #ffffff !important;
  border-color: #bfdbfe !important;
  color: #2563eb !important;
}

.login-gateway-actions .btn:hover {
  transform: translateY(-1px) !important;
}

/* มือถือ */
@media (max-width: 640px) {
  #loginModal .login-card {
    padding: 28px 22px 24px !important;
    border-radius: 26px !important;
  }

  #loginModal .login-card::before {
    left: 22px !important;
  }

  #loginModal #loginTitle {
    font-size:23px !important;
  }

  .login-gateway-card {
    padding: 26px 22px !important;
  }

  .login-gateway-actions .btn {
    width: 100% !important;
  }
}
/* =====================================================
   LOGIN MODAL FINAL TWEAK
   1) ปุ่ม X สีแดง
   2) ซ่อนคำอธิบายใต้หัวข้อ
   3) จัดไอคอนและหัวข้อเข้าสู่ระบบให้อยู่กึ่งกลาง
===================================================== */

/* กล่อง Login ให้จัดส่วนหัวกึ่งกลาง */
#loginModal .login-card {
  text-align: center !important;
}

/* ปุ่ม X สีแดง */
#loginModal .modal-close {
  background: #fff1f2 !important;
  color: #dc2626 !important;
  border: 1px solid #fecdd3 !important;
}

#loginModal .modal-close i {
  color: #dc2626 !important;
}

#loginModal .modal-close:hover {
  background: #dc2626 !important;
  color: #ffffff !important;
  border-color: #dc2626 !important;
  transform: rotate(90deg) !important;
}

#loginModal .modal-close:hover i {
  color: #ffffff !important;
}

/* จัดไอคอน Login ให้อยู่กลาง */
#loginModal .login-icon {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* จัดหัวข้อ เข้าสู่ระบบนักเรียน / เข้าสู่ระบบครู ให้อยู่กลาง */
#loginModal #loginTitle {
  text-align: center !important;
  width: 100% !important;
}

/* ซ่อนคำอธิบายใต้หัวข้อ */
#loginModal #loginDesc {
  display: none !important;
}

/* label ยังให้อยู่ซ้ายเหมือนฟอร์มปกติ */
#loginModal .login-card label {
  text-align: left !important;
}

/* ช่องกรอกให้ข้อความที่พิมพ์ยังอยู่ซ้าย */
#loginModal .login-card .input {
  text-align: left !important;
}

/* เว้นระยะหลังหัวข้อ เมื่อซ่อนคำอธิบายแล้ว */
#loginModal #loginTitle {
  margin-bottom: 18px !important;
}


/* =====================================================
   RANK SEASON HISTORY + SCORE HISTORY BY SEASON
===================================================== */
.student-rank-history-item {
  display: grid !important;
  grid-template-columns: 46px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 62px !important;
  padding: 8px 10px !important;
}

.student-rank-history-logo {
  width: 44px !important;
  height: 44px !important;
  padding: 3px !important;
  border: 0 !important;
  border-radius: 14px !important;
  background: color-mix(in srgb, var(--rank-color, #64748b) 10%, #ffffff) !important;
  display: grid !important;
  place-items: center !important;
  cursor: zoom-in !important;
}

.student-rank-history-logo img {
  width: 38px !important;
  height: 38px !important;
  object-fit: contain !important;
}

.student-rank-history-logo i {
  color: var(--rank-color, #64748b) !important;
  font-size:24px !important;
}

.student-rank-history-info {
  min-width: 0 !important;
}

.student-rank-history-info strong {
  display: block !important;
  color: var(--rank-color, #334155) !important;
  font-size:14px !important;
  font-weight: 1000 !important;
  text-transform: uppercase !important;
}

.student-score-season-group {
  border: 1px solid #dbeafe !important;
  border-radius: 16px !important;
  background: #ffffff !important;
  overflow: hidden !important;
  margin-bottom: 10px !important;
}

.student-score-season-group > summary {
  list-style: none !important;
  cursor: pointer !important;
  min-height: 48px !important;
  padding: 10px 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  background: #f8fbff !important;
  color: #1e293b !important;
  font-weight: 900 !important;
}

.student-score-season-group > summary::-webkit-details-marker {
  display: none !important;
}

.student-score-season-group > summary span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  min-width: 0 !important;
}

.student-score-season-group > summary i {
  color: #2563eb !important;
}

.student-score-season-group > summary small {
  padding: 3px 7px !important;
  border-radius: 999px !important;
  background: #e0e7ff !important;
  color: #4338ca !important;
  font-size:13px !important;
  white-space: nowrap !important;
}

.student-score-season-group[open] > summary {
  border-bottom: 1px solid #dbeafe !important;
  background: #eff6ff !important;
}

.student-score-season-list {
  padding: 10px !important;
  display: grid !important;
  gap: 8px !important;
}

.student-score-season-list .event-item {
  margin-bottom: 0 !important;
}


/* =====================================================
   FIXED PAGE BACKGROUND V9
   ภาพอยู่หลังสุดของหน้า Index และล็อกกับ viewport
   เลื่อนเนื้อหาแล้วภาพไม่เลื่อนตาม
===================================================== */

#publicPage.index-game-lobby.has-fixed-page-background {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  background: transparent !important;
}

/* ภาพพื้นหลังล็อกอยู่กับหน้าจอ */
#publicPage.index-game-lobby.has-fixed-page-background::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  background-color: #dff3ff;
  background-image:
    linear-gradient(
      rgba(24, 32, 78, .42),
      rgba(35, 29, 92, .50)
    ),
    var(--page-background);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;

  transform: translateZ(0);
  will-change: transform;
}

/* เนื้อหาทั้งหมดอยู่เหนือภาพ */
#publicPage.index-game-lobby.has-fixed-page-background > * {
  position: relative;
  z-index: 1;
}

/* Header โปร่งเล็กน้อย ให้เห็นบรรยากาศพื้นหลัง */
#publicPage.index-game-lobby.has-fixed-page-background
.game-lobby-header {
  background: rgba(255, 255, 255, .90) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* Hero กลับเป็นสีเกมเดิม ไม่ใช้ภาพพื้นหลัง */
#publicPage.index-game-lobby.has-fixed-page-background
.game-lobby-hero {
  background-color: var(--cute-purple, #6c63ff) !important;
  background-image: none !important;
}

/* การ์ดช่วงล่างยังอ่านง่าย แต่เห็นภาพอยู่รอบนอก */
#publicPage.index-game-lobby.has-fixed-page-background
:is(
  .game-insight-panel,
  .game-player-gallery,
  #publicStats .stat-card
) {
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}

/* Tablet */
@media (max-width: 980px) {
  #publicPage.index-game-lobby.has-fixed-page-background::before {
    background-position: 62% center;
    background-image:
      linear-gradient(
        rgba(24, 32, 78, .48),
        rgba(35, 29, 92, .56)
      ),
      var(--page-background);
  }
}

/* Mobile */
@media (max-width: 720px) {
  #publicPage.index-game-lobby.has-fixed-page-background::before {
    background-position: 68% center;
    background-image:
      linear-gradient(
        rgba(20, 27, 70, .54),
        rgba(31, 25, 86, .62)
      ),
      var(--page-background);
  }

  #publicPage.index-game-lobby.has-fixed-page-background
  .game-lobby-header {
    background: rgba(255, 255, 255, .94) !important;
  }
}

/* มือถือแนวนอน */
@media (max-height: 520px) and (orientation: landscape) {
  #publicPage.index-game-lobby.has-fixed-page-background::before {
    background-position: 58% center;
  }
}

/* ถ้าไม่มี URL ให้ใช้พื้นเดิม */
#publicPage.index-game-lobby.has-fixed-page-background[style*="url('')"]::before {
  background-image: none !important;
  background-color: #eef5ff !important;
}



/* ============================================================
   VOXEL BLOCK AVATAR V8.1 — FACE DETAIL + FULL BODY + ITEM SHAPES
============================================================ */

/* ปลดความสูงคงที่ และปล่อยให้หน้าเลื่อนได้ตามธรรมชาติ */
#studentPage #avatarContentBox:not(.hidden) {
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  align-items: start !important;
}

#studentPage #avatarContentBox > .avatar-hero-grid {
  position: relative !important;
  top: auto !important;
  height: auto !important;
  overflow: visible !important;
  align-self: start !important;
}

#studentPage .avatar-left-sticky-scroll,
#studentPage .avatar-workspace-panel {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  padding-right: 0 !important;
}

#studentPage .avatar-left-sticky-scroll::-webkit-scrollbar,
#studentPage .avatar-workspace-panel::-webkit-scrollbar {
  width: 0 !important;
  display: none !important;
}

/* เวทีอวาตาร์สูงขึ้น เห็นรองเท้าเต็ม */
#studentPage .voxel-avatar-stage-v8 {
  height: 420px !important;
  min-height: 420px !important;
  padding: 42px 10px 38px !important;
}

#studentPage .voxel-avatar-stage-v8::after {
  bottom: 26px;
}

#studentPage .voxel-avatar-scene-v8 {
  width: 282px;
  height: 352px;
}

#studentPage .voxel-avatar-rig-v8 {
  --voxel-scale-v8: .84;
  top: -4px;
}

#studentPage .voxel-avatar-character-v8 {
  height: 342px !important;
}

#studentPage .voxel-avatar-rotation-hint-v8 {
  bottom: 7px;
}

/* หน้า: เพิ่มรายละเอียดให้ชัดขึ้น */
#studentPage .voxel-head-block-v8 .avatar-eye {
  width: 14px;
  height: 9px;
  border-right-width: 8px;
  box-shadow: 0 0 0 2px rgba(48, 32, 43, .10);
}

/* ตายิ้มโค้ง */
#studentPage .voxel-avatar-character-v8.eye-2 .voxel-head-block-v8 .avatar-eye {
  top: 41px;
  width: 18px;
  height: 10px;
  border: 0;
  background: transparent !important;
  box-shadow: none;
  border-bottom: 4px solid #334982;
  border-radius: 0 0 14px 14px;
}
#studentPage .voxel-avatar-character-v8.eye-2 .voxel-head-block-v8 .avatar-eye-left { left: 17px; }
#studentPage .voxel-avatar-character-v8.eye-2 .voxel-head-block-v8 .avatar-eye-right { right: 17px; }

/* ตามั่นใจ */
#studentPage .voxel-avatar-character-v8.eye-3 .voxel-head-block-v8 .avatar-eye {
  top: 40px;
  width: 16px;
  height: 8px;
  border: 0;
  background-color: #2f447e !important;
  transform: skewX(-18deg);
  box-shadow: 0 0 0 2px rgba(255,255,255,.18) inset;
}
#studentPage .voxel-avatar-character-v8.eye-3 .voxel-head-block-v8 .avatar-eye-right {
  transform: skewX(18deg);
}

/* ตาวิ้ง */
#studentPage .voxel-avatar-character-v8.eye-4 .voxel-head-block-v8 .avatar-eye-left {
  width: 18px;
  height: 8px;
  border: 0;
  background: #304a91 !important;
}
#studentPage .voxel-avatar-character-v8.eye-4 .voxel-head-block-v8 .avatar-eye-right {
  width: 16px;
  height: 16px;
  border: 0;
  background: transparent !important;
  box-shadow: none;
}
#studentPage .voxel-avatar-character-v8.eye-4 .voxel-head-block-v8 .avatar-eye-right::before,
#studentPage .voxel-avatar-character-v8.eye-4 .voxel-head-block-v8 .avatar-eye-right::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 0;
  width: 3px;
  height: 16px;
  background: #304a91 !important;
}
#studentPage .voxel-avatar-character-v8.eye-4 .voxel-head-block-v8 .avatar-eye-right::before { transform: rotate(45deg); }
#studentPage .voxel-avatar-character-v8.eye-4 .voxel-head-block-v8 .avatar-eye-right::after { transform: rotate(-45deg); }

/* หลับตา */
#studentPage .voxel-avatar-character-v8.eye-5 .voxel-head-block-v8 .avatar-eye {
  top: 42px;
  width: 18px;
  height: 3px;
  border: 0;
  background-color: #6b4a45 !important;
  box-shadow: none;
}
#studentPage .voxel-avatar-character-v8.eye-5 .voxel-head-block-v8 .avatar-eye-left { left: 17px; transform: rotate(7deg); }
#studentPage .voxel-avatar-character-v8.eye-5 .voxel-head-block-v8 .avatar-eye-right { right: 17px; transform: rotate(-7deg); }

/* ปากยิ้มเด่นขึ้น */
#studentPage .voxel-head-block-v8 .avatar-mouth {
  bottom: 18px;
}
#studentPage .voxel-avatar-character-v8.mouth-1 .voxel-head-block-v8 .avatar-mouth {
  width: 24px;
  height: 4px;
  background: #75443b !important;
}
#studentPage .voxel-avatar-character-v8.mouth-1 .voxel-head-block-v8 .avatar-mouth::before,
#studentPage .voxel-avatar-character-v8.mouth-1 .voxel-head-block-v8 .avatar-mouth::after {
  top: -2px;
  width: 4px;
  height: 4px;
  background: #75443b !important;
}
#studentPage .voxel-avatar-character-v8.mouth-2 .voxel-head-block-v8 .avatar-mouth {
  width: 28px;
  height: 12px;
  border: 4px solid #7a463d;
  border-top: 0;
  background: #fff7f0 !important;
  border-radius: 0 0 10px 10px;
}
#studentPage .voxel-avatar-character-v8.mouth-2 .voxel-head-block-v8 .avatar-mouth::before {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  top: 4px;
  height: 3px;
  background: #d47a8a !important;
}
#studentPage .voxel-avatar-character-v8.mouth-3 .voxel-head-block-v8 .avatar-mouth {
  width: 18px;
  height: 4px;
  background: #6c4438 !important;
}
#studentPage .voxel-avatar-character-v8.mouth-4 .voxel-head-block-v8 .avatar-mouth {
  width: 12px;
  height: 10px;
  border: 3px solid #76473c;
  background: #4e2e2b !important;
}

/* ไพ่เทมตัวอย่างในร้านค้า เป็นรูปร่างจริงมากขึ้น */
#studentPage .avatar-item-icon {
  min-height: 94px;
  display: grid;
  place-items: center;
}

#studentPage .avatar-item-pixel-preview {
  position: relative;
  width: 76px;
  height: 76px;
  display: block;
  filter: drop-shadow(0 5px 0 rgba(90, 79, 124, .22));
}

#studentPage .avatar-item-pixel-preview span {
  position: absolute;
  display: block;
  box-sizing: border-box;
}

#studentPage .avatar-item-pixel-preview-outfit .shirt-body {
  left: 18px;
  top: 18px;
  width: 40px;
  height: 34px;
  border-radius: 6px;
  background: var(--item-primary);
  border-bottom: 8px solid var(--item-secondary);
}
#studentPage .avatar-item-pixel-preview-outfit .shirt-sleeve {
  top: 22px;
  width: 14px;
  height: 24px;
  background: var(--item-primary);
}
#studentPage .avatar-item-pixel-preview-outfit .shirt-sleeve.left { left: 6px; transform: skewY(12deg); }
#studentPage .avatar-item-pixel-preview-outfit .shirt-sleeve.right { right: 6px; transform: skewY(-12deg); }
#studentPage .avatar-item-pixel-preview-outfit .shirt-collar {
  left: 29px;
  top: 10px;
  width: 18px;
  height: 12px;
  background: #ffffff;
  clip-path: polygon(0 0,100% 0,70% 100%,30% 100%);
}

#studentPage .avatar-item-pixel-preview-weapon[data-kind="sword"] .blade,
#studentPage .avatar-item-pixel-preview-weapon[data-kind="sword"] .guard,
#studentPage .avatar-item-pixel-preview-weapon[data-kind="sword"] .grip,
#studentPage .avatar-item-pixel-preview-weapon[data-kind="sword"] .pommel {
  background: var(--item-primary);
}
#studentPage .avatar-item-pixel-preview-weapon[data-kind="sword"] .b1 { left: 42px; top: 6px; width: 10px; height: 10px; }
#studentPage .avatar-item-pixel-preview-weapon[data-kind="sword"] .b2 { left: 34px; top: 15px; width: 10px; height: 10px; }
#studentPage .avatar-item-pixel-preview-weapon[data-kind="sword"] .b3 { left: 26px; top: 24px; width: 10px; height: 20px; }
#studentPage .avatar-item-pixel-preview-weapon[data-kind="sword"] .guard { left: 18px; top: 42px; width: 26px; height: 8px; background: var(--item-secondary); }
#studentPage .avatar-item-pixel-preview-weapon[data-kind="sword"] .grip { left: 26px; top: 49px; width: 10px; height: 18px; background: #6d4b2c; }
#studentPage .avatar-item-pixel-preview-weapon[data-kind="sword"] .pommel { left: 22px; top: 64px; width: 18px; height: 8px; background: var(--item-secondary); }

#studentPage .avatar-item-pixel-preview-weapon[data-kind="staff"] .staff-pole { left: 34px; top: 20px; width: 8px; height: 48px; background: #6e4a2b; }
#studentPage .avatar-item-pixel-preview-weapon[data-kind="staff"] .staff-gem { left: 26px; top: 6px; width: 24px; height: 24px; background: var(--item-secondary); transform: rotate(45deg); }
#studentPage .avatar-item-pixel-preview-weapon[data-kind="staff"] .staff-wing { top: 10px; width: 10px; height: 10px; background: var(--item-primary); }
#studentPage .avatar-item-pixel-preview-weapon[data-kind="staff"] .staff-wing.left { left: 14px; }
#studentPage .avatar-item-pixel-preview-weapon[data-kind="staff"] .staff-wing.right { right: 14px; }

#studentPage .avatar-item-pixel-preview-weapon[data-kind="blades"] .dagger { width: 10px; height: 28px; background: var(--item-primary); }
#studentPage .avatar-item-pixel-preview-weapon[data-kind="blades"] .dagger.left { left: 24px; top: 14px; transform: rotate(25deg); }
#studentPage .avatar-item-pixel-preview-weapon[data-kind="blades"] .dagger.right { right: 24px; top: 14px; transform: rotate(-25deg); }
#studentPage .avatar-item-pixel-preview-weapon[data-kind="blades"] .dagger-grip { width: 8px; height: 16px; background: var(--item-secondary); }
#studentPage .avatar-item-pixel-preview-weapon[data-kind="blades"] .dagger-grip.left { left: 22px; top: 37px; transform: rotate(25deg); }
#studentPage .avatar-item-pixel-preview-weapon[data-kind="blades"] .dagger-grip.right { right: 22px; top: 37px; transform: rotate(-25deg); }

#studentPage .avatar-item-pixel-preview-weapon[data-kind="bow"] .bow-arc { width: 10px; height: 16px; background: var(--item-primary); }
#studentPage .avatar-item-pixel-preview-weapon[data-kind="bow"] .bow-arc.top { left: 22px; top: 12px; transform: rotate(22deg); }
#studentPage .avatar-item-pixel-preview-weapon[data-kind="bow"] .bow-arc.mid { left: 16px; top: 28px; width: 8px; height: 18px; }
#studentPage .avatar-item-pixel-preview-weapon[data-kind="bow"] .bow-arc.bot { left: 22px; top: 46px; transform: rotate(-22deg); }
#studentPage .avatar-item-pixel-preview-weapon[data-kind="bow"] .bow-string { left: 34px; top: 14px; width: 3px; height: 44px; background: #f3f1eb; }
#studentPage .avatar-item-pixel-preview-weapon[data-kind="bow"] .bow-arrow { left: 20px; top: 34px; width: 40px; height: 4px; background: #6e4a2b; }
#studentPage .avatar-item-pixel-preview-weapon[data-kind="bow"] .bow-tip { left: 58px; top: 29px; width: 12px; height: 12px; background: var(--item-secondary); clip-path: polygon(0 0,100% 50%,0 100%); }

#studentPage .avatar-item-pixel-preview-accessory[data-kind="glasses"] .lens {
  top: 26px; width: 18px; height: 12px; border: 3px solid #35404b; background: rgba(190,230,240,.45);
}
#studentPage .avatar-item-pixel-preview-accessory[data-kind="glasses"] .lens.left { left: 14px; }
#studentPage .avatar-item-pixel-preview-accessory[data-kind="glasses"] .lens.right { right: 14px; }
#studentPage .avatar-item-pixel-preview-accessory[data-kind="glasses"] .bridge { left: 32px; top: 30px; width: 12px; height: 4px; background: #35404b; }

#studentPage .avatar-item-pixel-preview-accessory[data-kind="cape"] .cape-main { left: 24px; top: 14px; width: 28px; height: 40px; background: var(--item-primary); border-bottom: 8px solid var(--item-secondary); }
#studentPage .avatar-item-pixel-preview-accessory[data-kind="cape"] .cape-tail { top: 52px; width: 14px; height: 12px; background: color-mix(in srgb, var(--item-primary) 82%, #3c2230); }
#studentPage .avatar-item-pixel-preview-accessory[data-kind="cape"] .cape-tail.left { left: 24px; }
#studentPage .avatar-item-pixel-preview-accessory[data-kind="cape"] .cape-tail.right { right: 24px; }

#studentPage .avatar-item-pixel-preview-accessory[data-kind="crown"] .crown-base { left: 18px; top: 28px; width: 40px; height: 12px; background: var(--item-primary); }
#studentPage .avatar-item-pixel-preview-accessory[data-kind="crown"] .crown-tip { top: 14px; width: 10px; height: 16px; background: var(--item-primary); }
#studentPage .avatar-item-pixel-preview-accessory[data-kind="crown"] .t1 { left: 18px; }
#studentPage .avatar-item-pixel-preview-accessory[data-kind="crown"] .t2 { left: 33px; height: 22px; top: 8px; }
#studentPage .avatar-item-pixel-preview-accessory[data-kind="crown"] .t3 { right: 18px; }
#studentPage .avatar-item-pixel-preview-accessory[data-kind="crown"] .crown-gem { left: 34px; top: 32px; width: 8px; height: 8px; background: var(--item-secondary); }

#studentPage .avatar-item-pixel-preview-accessory[data-kind="wings"] .wing { top: 20px; width: 22px; height: 30px; background: var(--item-primary); clip-path: polygon(0 0,100% 10%,80% 100%,20% 70%); }
#studentPage .avatar-item-pixel-preview-accessory[data-kind="wings"] .wing.left { left: 10px; transform: rotate(-16deg); }
#studentPage .avatar-item-pixel-preview-accessory[data-kind="wings"] .wing.right { right: 10px; transform: scaleX(-1) rotate(-16deg); }

#studentPage .avatar-item-pixel-preview-accessory[data-kind="aura"] .aura-ring { left: 18px; top: 18px; width: 40px; height: 40px; border: 6px solid var(--item-primary); transform: rotate(45deg); }
#studentPage .avatar-item-pixel-preview-accessory[data-kind="aura"] .aura-core { left: 28px; top: 28px; width: 20px; height: 20px; background: var(--item-secondary); transform: rotate(45deg); }

#studentPage .avatar-item-pixel-preview-accessory[data-kind="badge"] .badge-star {
  left: 24px; top: 24px; width: 28px; height: 28px; background: var(--item-primary); clip-path: polygon(50% 0,61% 35%,100% 35%,69% 58%,82% 100%,50% 74%,18% 100%,31% 58%,0 35%,39% 35%);
}

@media (max-width: 980px) {
  #studentPage #avatarContentBox:not(.hidden) {
    display: block !important;
  }
  #studentPage .voxel-avatar-stage-v8 {
    height: 396px !important;
    min-height: 396px !important;
  }
}

@media (max-width: 640px) {
  #studentPage .voxel-avatar-stage-v8 {
    height: 372px !important;
    min-height: 372px !important;
  }
  #studentPage .voxel-avatar-scene-v8 {
    width: 258px;
    height: 328px;
  }
  #studentPage .voxel-avatar-rig-v8 {
    --voxel-scale-v8: .77;
    top: -8px;
  }
}



/* ============================================================
   VOXEL BLOCK AVATAR V8.2 — FACE/Hair/Items/Try-On
============================================================ */
/* eye mapping: 2 = closed, 5 = smiling curved */
#studentPage .voxel-avatar-character-v8.eye-2 .voxel-head-block-v8 .avatar-eye {
  top: 42px;
  width: 18px;
  height: 3px;
  border: 0;
  background-color: #6b4a45 !important;
  box-shadow: none;
}
#studentPage .voxel-avatar-character-v8.eye-2 .voxel-head-block-v8 .avatar-eye-left { left: 17px; transform: rotate(7deg); }
#studentPage .voxel-avatar-character-v8.eye-2 .voxel-head-block-v8 .avatar-eye-right { right: 17px; transform: rotate(-7deg); }
#studentPage .voxel-avatar-character-v8.eye-5 .voxel-head-block-v8 .avatar-eye {
  top: 41px;
  width: 18px;
  height: 10px;
  border: 0;
  background: transparent !important;
  box-shadow: none;
  border-bottom: 4px solid #334982;
  border-radius: 0 0 14px 14px;
}
#studentPage .voxel-avatar-character-v8.eye-5 .voxel-head-block-v8 .avatar-eye-left { left: 17px; }
#studentPage .voxel-avatar-character-v8.eye-5 .voxel-head-block-v8 .avatar-eye-right { right: 17px; }

/* hair more distinct + female options */
#studentPage .voxel-hair-block-v8::before,
#studentPage .voxel-hair-block-v8::after,
#studentPage .voxel-hair-fringe-v8::before,
#studentPage .voxel-hair-fringe-v8::after {
  content: "";
  position: absolute;
  display: block;
  background: var(--avatar-hair);
  box-shadow: 4px 4px 0 rgba(46, 27, 71, .14);
}
#studentPage .voxel-avatar-character-v8.hair-1 .voxel-hair-block-v8 { --h: 26px; top: 8px; }
#studentPage .voxel-avatar-character-v8.hair-1 .voxel-hair-fringe-v8 span { height: 9px; }
#studentPage .voxel-avatar-character-v8.hair-2 .voxel-hair-block-v8 { --h: 34px; top: 3px; }
#studentPage .voxel-avatar-character-v8.hair-2 .voxel-hair-fringe-v8 span:nth-child(odd) { height: 16px; }
#studentPage .voxel-avatar-character-v8.hair-3 .voxel-hair-block-v8 { --h: 32px; top: 4px; transform: rotateZ(-4deg); }
#studentPage .voxel-avatar-character-v8.hair-3 .voxel-hair-fringe-v8 { left: 1px; right: 7px; }
#studentPage .voxel-avatar-character-v8.hair-3 .voxel-hair-fringe-v8 span:first-child,
#studentPage .voxel-avatar-character-v8.hair-3 .voxel-hair-fringe-v8 span:nth-child(2),
#studentPage .voxel-avatar-character-v8.hair-3 .voxel-hair-fringe-v8 span:nth-child(3) { height: 22px; }
#studentPage .voxel-avatar-character-v8.hair-4 .voxel-hair-block-v8 { --h: 42px; top: 2px; }
#studentPage .voxel-avatar-character-v8.hair-4 .voxel-hair-block-v8::before,
#studentPage .voxel-avatar-character-v8.hair-4 .voxel-hair-block-v8::after { top: 20px; width: 14px; height: 44px; }
#studentPage .voxel-avatar-character-v8.hair-4 .voxel-hair-block-v8::before { left: -8px; }
#studentPage .voxel-avatar-character-v8.hair-4 .voxel-hair-block-v8::after { right: -8px; }
#studentPage .voxel-avatar-character-v8.hair-5 .voxel-hair-block-v8 { --h: 30px; top: 3px; }
#studentPage .voxel-avatar-character-v8.hair-5 .voxel-hair-block-v8::before,
#studentPage .voxel-avatar-character-v8.hair-5 .voxel-hair-block-v8::after { top: -10px; width: 18px; height: 16px; }
#studentPage .voxel-avatar-character-v8.hair-5 .voxel-hair-block-v8::before { left: 16px; }
#studentPage .voxel-avatar-character-v8.hair-5 .voxel-hair-block-v8::after { right: 16px; }
#studentPage .voxel-avatar-character-v8.hair-6 .voxel-hair-block-v8 { --h: 28px; top: 6px; }
#studentPage .voxel-avatar-character-v8.hair-6 .voxel-hair-block-v8::before,
#studentPage .voxel-avatar-character-v8.hair-6 .voxel-hair-block-v8::after { top: 4px; width: 18px; height: 18px; border-radius: 2px; }
#studentPage .voxel-avatar-character-v8.hair-6 .voxel-hair-block-v8::before { left: -12px; }
#studentPage .voxel-avatar-character-v8.hair-6 .voxel-hair-block-v8::after { right: -12px; }
#studentPage .voxel-avatar-character-v8.hair-6 .voxel-hair-fringe-v8 span:nth-child(2),
#studentPage .voxel-avatar-character-v8.hair-6 .voxel-hair-fringe-v8 span:nth-child(5) { height: 16px; }
#studentPage .voxel-avatar-character-v8.hair-7 .voxel-hair-block-v8 { --h: 28px; top: 5px; }
#studentPage .voxel-avatar-character-v8.hair-7 .voxel-hair-block-v8::after { right: -18px; top: 12px; width: 18px; height: 68px; background: var(--avatar-hair-side); }
#studentPage .voxel-avatar-character-v8.hair-7 .voxel-hair-block-v8::before { right: -6px; top: 10px; width: 10px; height: 12px; background: var(--avatar-hair); }

/* stronger wings and new accessories on avatar */
#studentPage .voxel-avatar-accessory-back-v8[data-accessory-style="cloud-wings"] { width: 258px; left: 46%; }
#studentPage .voxel-avatar-accessory-back-v8[data-accessory-style="cloud-wings"] .voxel-wing-v8 { width: 92px; height: 110px; }
#studentPage .voxel-avatar-accessory-front-v8[data-accessory-style="wizard-hat"] .voxel-wizard-hat-v8 {
  position: absolute; left: 19px; top: -48px; width: 58px; height: 48px; background: #6c55e8;
  clip-path: polygon(50% 0, 90% 55%, 72% 55%, 100% 100%, 0 100%, 27% 55%, 10% 55%);
  box-shadow: 4px 4px 0 rgba(40,30,78,.18);
}
#studentPage .voxel-avatar-accessory-front-v8[data-accessory-style="wizard-hat"] .hat-band { position: absolute; left: 6px; right: 6px; bottom: 9px; height: 8px; background: #67dfff; }
#studentPage .voxel-avatar-accessory-front-v8[data-accessory-style="wizard-hat"] .hat-star { position: absolute; right: 10px; top: 10px; width: 8px; height: 8px; background: #ffe77a; transform: rotate(45deg); }
#studentPage .voxel-avatar-accessory-front-v8[data-accessory-style="baseball-cap"] .voxel-cap-top-v8 { position: absolute; left: 10px; top: -12px; width: 72px; height: 24px; background: #4669b3; }
#studentPage .voxel-avatar-accessory-front-v8[data-accessory-style="baseball-cap"] .voxel-cap-brim-v8 { position: absolute; left: 52px; top: 4px; width: 34px; height: 10px; background: #f2f7ff; }
#studentPage .voxel-avatar-accessory-back-v8[data-accessory-style="school-bag"] .voxel-backpack-v8 { position: absolute; left: 82px; top: 12px; width: 64px; height: 76px; background: #9d6737; border: 3px solid #6b4420; }
#studentPage .voxel-avatar-accessory-back-v8[data-accessory-style="school-bag"] .strap { position: absolute; top: -1px; width: 10px; height: 68px; background: #6b4420; }
#studentPage .voxel-avatar-accessory-back-v8[data-accessory-style="school-bag"] .strap.left { left: 6px; }
#studentPage .voxel-avatar-accessory-back-v8[data-accessory-style="school-bag"] .strap.right { right: 6px; }
#studentPage .voxel-avatar-accessory-back-v8[data-accessory-style="school-bag"] .pocket { position: absolute; left: 16px; bottom: 10px; width: 28px; height: 16px; background: #e9b36d; }
#studentPage .voxel-avatar-accessory-back-v8[data-accessory-style="devil-wings"] { width: 270px; left: 45%; top: 102px; }
#studentPage .voxel-devil-wing-v8 { position: absolute; top: 0; width: 94px; height: 116px; }
#studentPage .voxel-devil-wing-v8.wing-left { left: 2px; transform: rotateZ(-16deg); }
#studentPage .voxel-devil-wing-v8.wing-right { right: 2px; transform: rotateZ(16deg) scaleX(-1); }
#studentPage .voxel-devil-wing-v8 i { position: absolute; display: block; background: #8a2c49; border: 3px solid #5a1830; box-shadow: 4px 4px 0 rgba(53,16,30,.18); }
#studentPage .voxel-devil-wing-v8 i:nth-child(1) { left: 24px; top: 0; width: 24px; height: 48px; }
#studentPage .voxel-devil-wing-v8 i:nth-child(2) { left: 0; top: 38px; width: 48px; height: 30px; }
#studentPage .voxel-devil-wing-v8 i:nth-child(3) { left: 10px; top: 68px; width: 58px; height: 28px; clip-path: polygon(0 0,100% 0,80% 100%,14% 85%); }
#studentPage .voxel-avatar-accessory-front-v8[data-accessory-style="duck-float"] .voxel-duck-float-v8 { position: absolute; left: -4px; top: 136px; width: 100px; height: 36px; background: #ffe363; border: 4px solid #f2c640; }
#studentPage .voxel-avatar-accessory-front-v8[data-accessory-style="duck-float"] .head { position: absolute; left: -6px; top: -10px; width: 24px; height: 18px; background: #ffe363; border: 4px solid #f2c640; }
#studentPage .voxel-avatar-accessory-front-v8[data-accessory-style="duck-float"] .beak { position: absolute; left: -10px; top: -2px; width: 10px; height: 8px; background: #ff9850; }
#studentPage .voxel-avatar-accessory-front-v8[data-accessory-style="duck-float"] .wing { position: absolute; right: 12px; top: 8px; width: 20px; height: 12px; background: #fff4a9; }
#studentPage .voxel-avatar-accessory-front-v8[data-accessory-style="hobby-horse"] .voxel-hobby-horse-v8 { position: absolute; left: 60px; top: 116px; width: 40px; height: 80px; }
#studentPage .voxel-avatar-accessory-front-v8[data-accessory-style="hobby-horse"] .head { position: absolute; left: -6px; top: -6px; width: 34px; height: 26px; background: #b8814d; border: 3px solid #8a5c34; }
#studentPage .voxel-avatar-accessory-front-v8[data-accessory-style="hobby-horse"] .ear { position: absolute; left: 0; top: -14px; width: 12px; height: 12px; background: #8a5c34; }
#studentPage .voxel-avatar-accessory-front-v8[data-accessory-style="hobby-horse"] .stick { position: absolute; left: 14px; top: 18px; width: 8px; height: 64px; background: #8a5c34; }

/* extra weapon shapes on avatar */
#studentPage .voxel-pan-shape-v8, #studentPage .voxel-spatula-shape-v8 { position: relative; width: 70px; height: 86px; }
#studentPage .voxel-pan-shape-v8 .pan-head { position: absolute; left: 12px; top: 4px; width: 38px; height: 32px; background: var(--weapon-primary); border: 3px solid #404956; border-radius: 3px; }
#studentPage .voxel-pan-shape-v8 .pan-core { position: absolute; left: 21px; top: 13px; width: 20px; height: 14px; background: #66717f; }
#studentPage .voxel-pan-shape-v8 .pan-handle { position: absolute; left: 38px; top: 36px; width: 8px; height: 40px; background: #7f572e; transform: rotate(-25deg); }
#studentPage .voxel-spatula-shape-v8 .spatula-head { position: absolute; left: 18px; top: 6px; width: 28px; height: 28px; background: var(--weapon-primary); border: 3px solid #7c8a97; }
#studentPage .voxel-spatula-shape-v8 .spatula-hole { position: absolute; top: 14px; width: 4px; height: 10px; background: #bcc9d7; }
#studentPage .voxel-spatula-shape-v8 .h1 { left: 24px; } #studentPage .voxel-spatula-shape-v8 .h2 { left: 31px; } #studentPage .voxel-spatula-shape-v8 .h3 { left: 38px; }
#studentPage .voxel-spatula-shape-v8 .spatula-handle { position: absolute; left: 29px; top: 34px; width: 8px; height: 42px; background: #7f572e; }

/* item card previews new kinds */
#studentPage .avatar-item-pixel-preview-weapon[data-kind="pan"] .pan-head { left: 18px; top: 12px; width: 28px; height: 24px; background: #495162; }
#studentPage .avatar-item-pixel-preview-weapon[data-kind="pan"] .pan-core { left: 25px; top: 18px; width: 14px; height: 10px; background: #798493; }
#studentPage .avatar-item-pixel-preview-weapon[data-kind="pan"] .pan-handle { left: 38px; top: 34px; width: 6px; height: 28px; background: #8b633d; transform: rotate(-25deg); }
#studentPage .avatar-item-pixel-preview-weapon[data-kind="spatula"] .spatula-head { left: 24px; top: 10px; width: 20px; height: 20px; background: #dfe7f0; }
#studentPage .avatar-item-pixel-preview-weapon[data-kind="spatula"] .spatula-hole { top: 15px; width: 3px; height: 8px; background: #a9b7c6; }
#studentPage .avatar-item-pixel-preview-weapon[data-kind="spatula"] .h1 { left: 29px; } #studentPage .avatar-item-pixel-preview-weapon[data-kind="spatula"] .h2 { left: 34px; } #studentPage .avatar-item-pixel-preview-weapon[data-kind="spatula"] .h3 { left: 39px; }
#studentPage .avatar-item-pixel-preview-weapon[data-kind="spatula"] .spatula-handle { left: 31px; top: 30px; width: 6px; height: 28px; background: #8b633d; }
#studentPage .avatar-item-pixel-preview-accessory[data-kind="devil"] .devil-wing { top: 14px; width: 22px; height: 28px; background: #8a2c49; clip-path: polygon(20% 0,100% 18%,86% 100%,0 74%); }
#studentPage .avatar-item-pixel-preview-accessory[data-kind="devil"] .devil-wing.left { left: 10px; transform: rotate(-16deg); }
#studentPage .avatar-item-pixel-preview-accessory[data-kind="devil"] .devil-wing.right { right: 10px; transform: scaleX(-1) rotate(-16deg); }
#studentPage .avatar-item-pixel-preview-accessory[data-kind="wizardhat"] .hat-cone { left: 24px; top: 8px; width: 26px; height: 28px; background: #6c55e8; clip-path: polygon(50% 0,85% 100%,15% 100%); }
#studentPage .avatar-item-pixel-preview-accessory[data-kind="wizardhat"] .hat-brim { left: 16px; top: 32px; width: 42px; height: 8px; background: #6c55e8; }
#studentPage .avatar-item-pixel-preview-accessory[data-kind="wizardhat"] .hat-star { left: 41px; top: 14px; width: 8px; height: 8px; background: #ffe46b; transform: rotate(45deg); }
#studentPage .avatar-item-pixel-preview-accessory[data-kind="cap"] .cap-top { left: 16px; top: 18px; width: 36px; height: 16px; background: #4568b2; }
#studentPage .avatar-item-pixel-preview-accessory[data-kind="cap"] .cap-brim { left: 44px; top: 28px; width: 18px; height: 6px; background: #edf2ff; }
#studentPage .avatar-item-pixel-preview-accessory[data-kind="bag"] .bag-body { left: 20px; top: 16px; width: 34px; height: 34px; background: #9d6737; }
#studentPage .avatar-item-pixel-preview-accessory[data-kind="bag"] .bag-flap { left: 26px; top: 24px; width: 22px; height: 8px; background: #e2b070; }
#studentPage .avatar-item-pixel-preview-accessory[data-kind="bag"] .bag-strap { left: 28px; top: 10px; width: 18px; height: 8px; border: 4px solid #6b4420; border-bottom: 0; background: transparent; }
#studentPage .avatar-item-pixel-preview-accessory[data-kind="duck"] .duck-body { left: 18px; top: 28px; width: 36px; height: 18px; background: #ffe363; }
#studentPage .avatar-item-pixel-preview-accessory[data-kind="duck"] .duck-head { left: 12px; top: 18px; width: 14px; height: 12px; background: #ffe363; }
#studentPage .avatar-item-pixel-preview-accessory[data-kind="duck"] .duck-beak { left: 6px; top: 22px; width: 8px; height: 6px; background: #ff9850; }
#studentPage .avatar-item-pixel-preview-accessory[data-kind="horse"] .horse-head { left: 22px; top: 16px; width: 20px; height: 16px; background: #b8814d; }
#studentPage .avatar-item-pixel-preview-accessory[data-kind="horse"] .horse-ear { left: 24px; top: 8px; width: 8px; height: 8px; background: #8a5c34; }
#studentPage .avatar-item-pixel-preview-accessory[data-kind="horse"] .horse-stick { left: 30px; top: 30px; width: 6px; height: 26px; background: #8a5c34; }

/* item card/try-on styles */
#studentPage .avatar-item-card.is-preview { border-color: #4f7fff; box-shadow: 0 0 0 3px rgba(79,127,255,.10), 0 10px 20px rgba(82,102,170,.08); }
#studentPage .avatar-item-action.preview { background: #eef3ff; color: #4256a5; }



/* ============================================================
   PHASE C4.7 — HEADER LOGO SPARKLE / FLOATING SYSTEM BADGE
============================================================ */
#publicPage.index-game-lobby .game-lobby-brand{
  position:relative;
  overflow:visible;
  isolation:isolate;
}

#publicPage.index-game-lobby .game-lobby-brand::before{
  content:"";
  position:absolute;
  left:-8px;
  top:50%;
  width:92px;
  height:92px;
  transform:translateY(-50%);
  border-radius:26px;
  background:radial-gradient(circle, rgba(255,255,255,.98) 0 28%, rgba(214,236,255,.88) 29% 54%, rgba(155,206,255,.34) 55% 74%, rgba(155,206,255,0) 75% 100%);
  filter:blur(1px);
  z-index:-1;
  animation:tr107LogoAura 3.8s ease-in-out infinite;
}

#publicPage.index-game-lobby .game-lobby-brand::after{
  content:"";
  position:absolute;
  left:52px;
  top:-2px;
  width:28px;
  height:28px;
  border-radius:10px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.86) 0%, rgba(235,244,255,.82) 100%),
    url('/imgs-class/loko-Smart-Student-600x600.png') center/contain no-repeat;
  background-blend-mode:screen,normal;
  border:2px solid rgba(255,255,255,.95);
  box-shadow:0 6px 14px rgba(70,120,220,.22), inset 0 -2px 0 rgba(150,187,255,.45);
  z-index:3;
  animation:tr107BadgeFloat 4.6s ease-in-out infinite;
}

#publicPage.index-game-lobby .game-lobby-brand .school-logo{
  position:relative;
  z-index:2;
  animation:tr107LogoFloat 3.6s ease-in-out infinite, tr107LogoGlow 5.2s linear infinite;
  transform-origin:center center;
  filter:drop-shadow(0 8px 10px rgba(67,116,228,.22));
  transition:transform .22s ease, filter .22s ease;
}

#publicPage.index-game-lobby .game-lobby-brand:hover .school-logo{
  transform:translateY(-2px) scale(1.03);
  filter:drop-shadow(0 12px 16px rgba(67,116,228,.30));
}

#publicPage.index-game-lobby .game-lobby-brand .school-logo,
#publicPage.index-game-lobby .game-lobby-brand .school-logo img{
  overflow:visible;
}

#publicPage.index-game-lobby .game-lobby-brand-copy{
  position:relative;
}

#publicPage.index-game-lobby .game-lobby-brand-copy::before,
#publicPage.index-game-lobby .game-lobby-brand-copy::after{
  content:"✦";
  position:absolute;
  color:#ffd86b;
  text-shadow:0 0 8px rgba(255,237,179,.9), 0 0 18px rgba(130,191,255,.55);
  opacity:.92;
  pointer-events:none;
}

#publicPage.index-game-lobby .game-lobby-brand-copy::before{
  left:-14px;
  top:-8px;
  font-size:14px;
  animation:tr107Sparkle 2.7s ease-in-out infinite;
}

#publicPage.index-game-lobby .game-lobby-brand-copy::after{
  right:-18px;
  top:8px;
  font-size:13px;
  animation:tr107Sparkle 2.7s ease-in-out 1.1s infinite;
}

#publicPage.index-game-lobby .game-lobby-brand-copy strong{
  position:relative;
}

#publicPage.index-game-lobby .game-lobby-brand-copy strong::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-3px;
  height:2px;
  background:linear-gradient(90deg, rgba(96,146,255,0) 0%, rgba(96,146,255,.65) 18%, rgba(255,255,255,.95) 50%, rgba(96,146,255,.65) 82%, rgba(96,146,255,0) 100%);
  opacity:.76;
}

#publicPage.index-game-lobby .game-lobby-login .btn{
  transition:transform .22s ease, box-shadow .22s ease, filter .22s ease;
}

#publicPage.index-game-lobby .game-lobby-login .btn:hover{
  filter:brightness(1.02);
  box-shadow:0 8px 0 rgba(43, 66, 120, .18), 0 12px 20px rgba(65, 98, 181, .14);
}

@keyframes tr107LogoFloat{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-4px); }
}

@keyframes tr107LogoAura{
  0%,100%{ transform:translateY(-50%) scale(1); opacity:.82; }
  50%{ transform:translateY(-50%) scale(1.08); opacity:1; }
}

@keyframes tr107LogoGlow{
  0%,100%{ box-shadow:0 6px 0 #95cfff, 0 0 0 rgba(255,255,255,0); }
  35%{ box-shadow:0 6px 0 #95cfff, 0 0 18px rgba(255,255,255,.65); }
  70%{ box-shadow:0 6px 0 #95cfff, 0 0 10px rgba(152,209,255,.55); }
}

@keyframes tr107BadgeFloat{
  0%,100%{ transform:translateY(0) rotate(-8deg) scale(1); }
  50%{ transform:translateY(-4px) rotate(5deg) scale(1.06); }
}

@keyframes tr107Sparkle{
  0%,100%{ transform:scale(.7) rotate(0deg); opacity:.32; }
  45%{ transform:scale(1.1) rotate(18deg); opacity:1; }
  70%{ transform:scale(.85) rotate(-12deg); opacity:.72; }
}

@media (max-width: 860px){
  #publicPage.index-game-lobby .game-lobby-brand::before{
    width:78px;
    height:78px;
    left:-4px;
  }
  #publicPage.index-game-lobby .game-lobby-brand::after{
    width:24px;
    height:24px;
    left:44px;
    top:0;
  }
  #publicPage.index-game-lobby .game-lobby-brand-copy::after{
    right:-10px;
  }
}



/* =====================================================
   SMART STUDENT+ — STUDENT GAME UI V1
   ขอบเขต: เฉพาะหน้า Student ภายใต้ .student-game-shell
   แนวทาง: สดใส แบบเกม อ่านง่าย ไม่ใช้ Gradient
===================================================== */

.student-game-shell {
  --game-blue: #3f6df6;
  --game-blue-dark: #264cc7;
  --game-purple: #8657f5;
  --game-purple-dark: #6036c8;
  --game-cyan: #20bfe8;
  --game-green: #22c996;
  --game-green-dark: #11966d;
  --game-yellow: #ffc93d;
  --game-orange: #ff8a3d;
  --game-pink: #ff6faf;
  --game-red: #ff5d6c;
  --game-ink: #18233f;
  --game-muted: #64708c;
  --game-bg: #eef4ff;
  --game-card: #ffffff;
  --game-line: #d9e4ff;
  position: relative;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--game-ink);
  background: var(--game-bg);
}

.student-game-shell .student-game-decoration {
  position: fixed;
  z-index: 0;
  pointer-events: none;
  border: 10px solid rgba(63, 109, 246, .08);
  border-radius: 24px;
  transform: rotate(18deg);
}

.student-game-shell .student-game-decoration-one {
  width: 180px;
  height: 180px;
  top: 150px;
  left: -92px;
}

.student-game-shell .student-game-decoration-two {
  width: 120px;
  height: 120px;
  top: 430px;
  right: -58px;
  border-color: rgba(134, 87, 245, .09);
  transform: rotate(-16deg);
}

.student-game-shell .student-game-decoration-three {
  width: 84px;
  height: 84px;
  bottom: 80px;
  left: 7%;
  border-color: rgba(34, 201, 150, .08);
  transform: rotate(32deg);
}

.student-game-shell .student-game-header,
.student-game-shell .student-game-container {
  position: relative;
  z-index: 2;
}

/* ---------- Header / Player Bar ---------- */
.student-game-shell .student-game-header {
  position: sticky;
  top: 0;
  z-index: 100;
  min-height: 86px;
  padding: 14px clamp(16px, 3vw, 34px);
  background: rgba(255, 255, 255, .96);
  border-bottom: 3px solid #d9e4ff;
  box-shadow: 0 9px 24px rgba(43, 73, 143, .10);
  backdrop-filter: blur(16px);
}

.student-game-shell .student-game-header-brand {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 14px;
}

.student-game-shell .student-game-logo-wrap {
  width: 62px;
  height: 62px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  padding: 6px;
  border-radius: 20px;
  background: #ffffff;
  border: 3px solid var(--game-blue);
  box-shadow: 0 5px 0 #c8d7ff;
}

.student-game-shell .student-header-logo {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.student-game-shell .student-game-brand-stack {
  min-width: 0;
}

.student-game-shell .student-game-brand-label,
.student-game-shell .student-game-kicker,
.student-game-shell .student-game-section-code {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--game-blue);
  font-size:13px;
  font-weight: 900;
  letter-spacing: .85px;
  text-transform: uppercase;
}

.student-game-shell .student-hero-inline-header .student-hero-mini-card,
.student-game-shell .student-hero-inline-header .student-hero-mini-card-no-avatar {
  min-height: 0;
  padding: 2px 0 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.student-game-shell .student-hero-inline-header .student-hero-mini-name {
  color: var(--game-ink) !important;
  font-size:clamp(18px, 2vw, 24px) !important;
  font-weight: 900 !important;
  line-height: 1.2;
}

.student-game-shell .student-hero-inline-header .student-hero-mini-nickname {
  color: var(--game-purple) !important;
  font-size:.78em !important;
}

.student-game-shell .student-hero-inline-header .student-hero-mini-sub {
  margin-top: 2px;
  color: var(--game-muted) !important;
  font-size:13px !important;
  font-weight: 700;
}

.student-game-shell .student-game-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.student-game-shell .btn {
  min-height: 42px;
  border-radius: 14px;
  border: 2px solid transparent;
  padding: 9px 15px;
  font-weight: 900;
  box-shadow: 0 4px 0 rgba(35, 55, 105, .15);
  transition: transform .14s ease, box-shadow .14s ease, filter .14s ease;
}

.student-game-shell .btn:hover {
  transform: translateY(-2px);
  filter: saturate(1.05);
  box-shadow: 0 6px 0 rgba(35, 55, 105, .14);
}

.student-game-shell .btn:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 rgba(35, 55, 105, .14);
}

.student-game-shell .btn-primary {
  background: var(--game-blue);
  color: #ffffff;
  border-color: var(--game-blue-dark);
}

.student-game-shell .btn-soft,
.student-game-shell .student-game-eport-btn {
  background: #edf3ff;
  color: var(--game-blue);
  border-color: #bcd0ff;
}

.student-game-shell .btn-outline,
.student-game-shell .student-game-logout-btn {
  background: #fff3f5;
  color: #e14357;
  border-color: #ffc4cc;
}

/* ---------- Main Container ---------- */
.student-game-shell .student-game-container {
  width: min(1220px, calc(100% - 32px));
  margin: 22px auto 36px;
}

.student-game-shell .student-game-welcome {
  position: relative;
  overflow: hidden;
  min-height: 148px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px clamp(20px, 4vw, 38px);
  margin-bottom: 22px;
  border-radius: 28px;
  background: var(--game-blue);
  color: #ffffff;
  border: 4px solid #ffffff;
  outline: 3px solid #bfd0ff;
  box-shadow: 0 12px 26px rgba(46, 82, 181, .18);
}

.student-game-shell .student-game-welcome::before,
.student-game-shell .student-game-welcome::after {
  content: '';
  position: absolute;
  pointer-events: none;
  border: 10px solid rgba(255,255,255,.14);
  border-radius: 20px;
  transform: rotate(18deg);
}

.student-game-shell .student-game-welcome::before {
  width: 90px;
  height: 90px;
  right: 210px;
  top: -38px;
}

.student-game-shell .student-game-welcome::after {
  width: 58px;
  height: 58px;
  left: 48%;
  bottom: -34px;
  transform: rotate(-24deg);
}

.student-game-shell .student-game-welcome-copy {
  position: relative;
  z-index: 2;
  max-width: 760px;
}

.student-game-shell .student-game-welcome .student-game-kicker {
  color: #ffffff;
  opacity: .88;
}

.student-game-shell .student-game-welcome h1 {
  margin: 5px 0 5px;
  font-size:clamp(27px, 4vw, 42px);
  line-height: 1.08;
  font-weight: 900;
  letter-spacing: -.4px;
}

.student-game-shell .student-game-welcome p {
  margin: 0;
  max-width: 680px;
  color: rgba(255, 255, 255, .90);
  font-size:15px;
  line-height: 1.6;
  font-weight: 600;
}

.student-game-shell .student-game-welcome-icons {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
}

.student-game-shell .student-game-welcome-icons span {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: #ffffff;
  color: var(--game-blue);
  border: 3px solid #dce6ff;
  box-shadow: 0 5px 0 rgba(21, 48, 121, .28);
  font-size:22px;
}

.student-game-shell .student-game-welcome-icons span:nth-child(2) {
  width: 68px;
  height: 68px;
  color: #d99400;
  transform: translateY(-7px);
}

.student-game-shell .student-game-welcome-icons span:nth-child(3) {
  color: var(--game-purple);
}

/* ---------- Section Headers ---------- */
.student-game-shell .student-game-status-section {
  margin-bottom: 22px;
}

.student-game-shell .student-game-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin: 0 2px 12px;
}

.student-game-shell .student-game-section-head h2 {
  margin: 1px 0 0;
  color: var(--game-ink);
  font-size:clamp(21px, 2.5vw, 29px);
  line-height: 1.2;
  font-weight: 900;
}

.student-game-shell .student-game-section-head p {
  margin: 0;
  color: var(--game-muted);
  font-size:13px;
  font-weight: 700;
}

/* ---------- Player Status HUD ---------- */
.student-game-shell .student-game-hud {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.student-game-shell .student-top-zone-v4 #studentStats {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
  margin: 0 !important;
}

.student-game-shell .student-top-zone-v4 #studentStats .stat-card {
  min-height: 132px !important;
  padding: 18px !important;
  border: 3px solid var(--game-line) !important;
  border-bottom-width: 7px !important;
  border-radius: 24px !important;
  background: var(--game-card) !important;
  box-shadow: 0 9px 20px rgba(43, 73, 143, .08) !important;
  isolation: isolate;
}

.student-game-shell .student-top-zone-v4 #studentStats .stat-card::after {
  right: -24px !important;
  bottom: -24px !important;
  width: 92px !important;
  height: 92px !important;
  border-radius: 24px !important;
  opacity: .13 !important;
  transform: rotate(22deg);
}

.student-game-shell .student-top-zone-v4 #studentStats .stat-green {
  border-color: #a9efd7 !important;
  border-bottom-color: var(--game-green) !important;
  background: #effdf8 !important;
}

.student-game-shell .student-top-zone-v4 #studentStats .stat-yellow {
  border-color: #ffe49b !important;
  border-bottom-color: var(--game-yellow) !important;
  background: #fffaf0 !important;
}

.student-game-shell .student-top-zone-v4 #studentStats .stat-blue {
  border-color: #bfd3ff !important;
  border-bottom-color: var(--game-blue) !important;
  background: #f2f6ff !important;
}

.student-game-shell .student-top-zone-v4 #studentStats .stat-red {
  border-color: #ffc5cc !important;
  border-bottom-color: var(--game-red) !important;
  background: #fff3f5 !important;
}

.student-game-shell .student-top-zone-v4 #studentStats .stat-icon {
  width: 58px !important;
  height: 58px !important;
  border-radius: 18px !important;
  border: 2px solid rgba(255,255,255,.92);
  box-shadow: 0 4px 0 rgba(35, 55, 105, .08);
}

.student-game-shell .student-top-zone-v4 #studentStats .stat-card h3 {
  color: var(--game-ink) !important;
  font-size:36px !important;
  font-weight: 900 !important;
}

.student-game-shell .student-top-zone-v4 #studentStats .stat-card p {
  color: var(--game-muted) !important;
  font-size:13px !important;
  font-weight: 800 !important;
}

.student-game-shell .student-top-rank-row-v4 {
  display: grid !important;
  grid-template-columns: minmax(0, 1.75fr) minmax(270px, .75fr) !important;
  gap: 14px !important;
  margin-top: 14px !important;
}

.student-game-shell .student-top-rank-card-v4 {
  min-height: 150px !important;
  padding: 16px !important;
  border: 3px solid var(--game-line) !important;
  border-bottom-width: 7px !important;
  border-radius: 24px !important;
  background: #ffffff !important;
  box-shadow: 0 9px 20px rgba(43, 73, 143, .08) !important;
}

.student-game-shell .student-top-rank-current-v4 {
  border-bottom-color: var(--game-purple) !important;
  background: #faf7ff !important;
}

.student-game-shell .student-top-rank-history-v4 {
  border-bottom-color: var(--game-cyan) !important;
  background: #f2fbfe !important;
}

.student-game-shell .student-top-rank-title-v4 {
  color: var(--game-ink) !important;
  font-size:14px !important;
  font-weight: 900 !important;
}

.student-game-shell .student-top-rank-title-v4 i {
  color: var(--game-purple) !important;
}

.student-game-shell .student-rank-slim-card {
  min-height: 88px;
  border: 3px solid color-mix(in srgb, var(--rank-color, #8657f5) 32%, #ffffff) !important;
  border-left: 8px solid var(--rank-color, #8657f5) !important;
  border-radius: 21px !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

.student-game-shell .student-rank-slim-logo {
  width: 72px !important;
  height: 72px !important;
  border-radius: 20px !important;
  background: #f7f4ff !important;
  border: 2px solid #e4d9ff !important;
}

.student-game-shell .student-rank-slim-logo img {
  width: 62px !important;
  height: 62px !important;
}

.student-game-shell .student-rank-slim-top strong {
  font-size:clamp(22px, 3vw, 31px) !important;
  font-weight: 900 !important;
  letter-spacing: .4px;
}

.student-game-shell .student-rank-slim-badge {
  border: 2px solid #d9e4ff !important;
  background: #f2f6ff !important;
  color: var(--game-blue) !important;
  font-weight: 900 !important;
}

.student-game-shell .student-rank-slim-bar {
  height: 13px !important;
  border: 2px solid #e3e9f7;
  background: #eef1f7 !important;
}

.student-game-shell .student-rank-history-item {
  min-height: 66px;
  margin-bottom: 8px !important;
  border: 2px solid #d7e9f3 !important;
  border-left-width: 6px !important;
  border-radius: 17px !important;
  background: #ffffff !important;
}

.student-game-shell .student-rank-history-logo {
  width: 50px !important;
  height: 50px !important;
  border: 0 !important;
  background: #f4f8ff !important;
  border-radius: 15px !important;
}

.student-game-shell .student-rank-history-logo img {
  width: 45px !important;
  height: 45px !important;
}

/* ---------- Player Center / Tabs ---------- */
.student-game-shell .student-game-command-center {
  position: relative;
  overflow: hidden;
  padding: 22px !important;
  border: 3px solid #d9e4ff !important;
  border-left: 3px solid #d9e4ff !important;
  border-bottom: 8px solid var(--game-orange) !important;
  border-radius: 30px !important;
  background: #ffffff !important;
  box-shadow: 0 13px 30px rgba(43, 73, 143, .11) !important;
}

.student-game-shell .student-game-command-center::before {
  content: '';
  position: absolute;
  top: -46px;
  right: -32px;
  width: 120px;
  height: 120px;
  border: 15px solid rgba(255, 138, 61, .09);
  border-radius: 28px;
  transform: rotate(24deg);
  pointer-events: none;
}

.student-game-shell .student-game-panel-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}

.student-game-shell .student-game-panel-icon {
  width: 62px;
  height: 62px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 20px;
  background: var(--game-orange);
  color: #ffffff;
  border: 3px solid #e96c20;
  box-shadow: 0 5px 0 #ffd3b5;
  font-size:25px;
}

.student-game-shell .student-game-panel-head .panel-title {
  margin: 2px 0 1px !important;
  color: var(--game-ink);
  font-size:clamp(19px, 2.3vw, 25px);
  font-weight: 900;
}

.student-game-shell .student-game-panel-head p {
  margin: 0;
  color: var(--game-muted);
  font-size:13px;
  font-weight: 650;
}

.student-game-shell .student-game-tabbar {
  position: sticky;
  top: 92px;
  z-index: 20;
  padding: 10px;
  margin: 0 -4px 18px;
  border: 2px solid #e1e8f7;
  border-radius: 21px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 7px 16px rgba(43, 73, 143, .07);
}

.student-game-shell .eport-tabs {
  gap: 8px !important;
  margin-bottom: 0 !important;
}

.student-game-shell .eport-tab {
  min-height: 42px;
  padding: 9px 14px !important;
  border: 2px solid #dbe5fa !important;
  border-radius: 14px !important;
  background: #f7f9fe !important;
  color: #41506f !important;
  font-weight: 900 !important;
  box-shadow: 0 3px 0 #e0e8f8;
}

.student-game-shell .eport-tab:hover {
  transform: translateY(-2px) !important;
  border-color: #bcd0ff !important;
  color: var(--game-blue) !important;
}

.student-game-shell .eport-tab.active {
  background: var(--game-purple) !important;
  color: #ffffff !important;
  border-color: var(--game-purple-dark) !important;
  box-shadow: 0 4px 0 #d9c9ff !important;
}

.student-game-shell .eport-rules-tab {
  background: #f5efff !important;
  color: var(--game-purple) !important;
  border-color: #d7c6ff !important;
}

.student-game-shell .student-eport-season-slot {
  min-width: min(470px, 100%);
}

.student-game-shell .student-eport-season-slot .rank-season-card {
  border: 2px solid #ffd978 !important;
  border-bottom: 5px solid var(--game-yellow) !important;
  border-radius: 17px !important;
  background: #fffaf0 !important;
  box-shadow: none !important;
}

/* ---------- Score / Quest Board ---------- */
.student-game-shell .student-score-page-v3 {
  padding-top: 2px;
}

.student-game-shell .student-score-title-v3 {
  margin-bottom: 14px !important;
  padding: 16px 18px;
  border: 3px solid #dce7ff;
  border-left: 8px solid var(--game-blue);
  border-radius: 20px;
  background: #f4f7ff;
}

.student-game-shell .student-score-title-v3 h3 {
  margin: 0 !important;
  color: var(--game-ink) !important;
  font-size:22px !important;
  font-weight: 900 !important;
}

.student-game-shell .student-score-title-v3 p {
  margin: 3px 0 0 !important;
  color: var(--game-muted) !important;
  font-weight: 650;
}

.student-game-shell .student-score-layout-v3 {
  gap: 16px !important;
}

.student-game-shell .score-section-label-v3 {
  min-height: 44px;
  padding: 9px 13px !important;
  border: 2px solid #dce7ff;
  border-radius: 15px !important;
  background: #eef4ff !important;
  color: var(--game-blue) !important;
  font-size:14px !important;
  font-weight: 900 !important;
}

.student-game-shell .student-score-right-v3 .score-section-label-v3 {
  border-color: #c8f0e2;
  background: #effcf7 !important;
  color: var(--game-green-dark) !important;
}

.student-game-shell .score-box-v3 {
  overflow: hidden;
  border: 3px solid #e0e7f5 !important;
  border-bottom-width: 6px !important;
  border-radius: 22px !important;
  background: #ffffff !important;
  box-shadow: 0 8px 18px rgba(43, 73, 143, .07) !important;
}

.student-game-shell .student-score-left-v3 .score-box-v3:nth-of-type(2) {
  border-bottom-color: var(--game-yellow) !important;
}

.student-game-shell .student-score-left-v3 .score-box-v3:nth-of-type(3) {
  border-bottom-color: var(--game-blue) !important;
}

.student-game-shell .student-score-right-v3 .score-box-v3:nth-of-type(2) {
  border-bottom-color: var(--game-green) !important;
}

.student-game-shell .student-score-right-v3 .score-box-v3:nth-of-type(3) {
  border-bottom-color: var(--game-purple) !important;
}

.student-game-shell .score-box-title-v3 {
  min-height: 48px;
  padding: 12px 15px !important;
  border-bottom: 2px solid #e8edf7 !important;
  background: #f9fbff !important;
  color: var(--game-ink) !important;
  font-weight: 900 !important;
}

.student-game-shell .score-box-title-v3 i {
  width: 31px;
  height: 31px;
  display: inline-grid;
  place-items: center;
  border-radius: 10px;
  background: #eaf1ff;
  color: var(--game-blue);
}

.student-game-shell .student-score-list {
  padding: 12px !important;
}

.student-game-shell .student-score-list .event-item {
  border: 2px solid #e4eaf5 !important;
  border-radius: 15px !important;
  background: #ffffff !important;
  transition: transform .15s ease, border-color .15s ease;
}

.student-game-shell .student-score-list .event-item:hover {
  transform: translateX(3px);
  border-color: #bfd1ff !important;
}

/* ---------- Edit Profile / Achievements ---------- */
.student-game-shell .eport-edit-grid,
.student-game-shell .eport-achievement-editor,
.student-game-shell .eport-profile-card,
.student-game-shell .eport-form-card {
  border-color: #dfe7f7 !important;
}

.student-game-shell .eport-profile-card,
.student-game-shell .eport-form-card,
.student-game-shell .eport-achievement-editor {
  border: 3px solid #dfe7f7 !important;
  border-bottom-width: 6px !important;
  border-radius: 23px !important;
  background: #ffffff !important;
  box-shadow: 0 8px 18px rgba(43, 73, 143, .06) !important;
}

.student-game-shell .eport-profile-card {
  border-bottom-color: var(--game-pink) !important;
}

.student-game-shell .eport-form-card,
.student-game-shell .eport-achievement-editor {
  border-bottom-color: var(--game-purple) !important;
}

.student-game-shell label {
  color: #34415f;
  font-weight: 900;
}

.student-game-shell .input,
.student-game-shell .textarea {
  min-height: 44px;
  border: 2px solid #dbe4f5 !important;
  border-radius: 14px !important;
  background: #fbfcff !important;
  color: var(--game-ink);
  box-shadow: none !important;
  transition: border-color .14s ease, background .14s ease;
}

.student-game-shell .textarea {
  min-height: 100px;
}

.student-game-shell .input:focus,
.student-game-shell .textarea:focus {
  outline: none;
  border-color: var(--game-blue) !important;
  background: #ffffff !important;
}

.student-game-shell .eport-profile-img {
  border: 4px solid #ffffff !important;
  outline: 4px solid #d8c9ff;
  border-radius: 30px !important;
  box-shadow: 0 8px 0 #eee8ff !important;
}

.student-game-shell .eport-cover-preview-wrap {
  border: 3px dashed #bfd0ff !important;
  border-radius: 20px !important;
  background: #f5f8ff !important;
}

.student-game-shell .eport-tag-list,
.student-game-shell .eport-profile-tag-box {
  border: 2px dashed #d9c9ff !important;
  border-radius: 17px !important;
  background: #faf7ff !important;
}

.student-game-shell .eport-achievement-item,
.student-game-shell .eport-education-list .event-item {
  border: 2px solid #dfe7f7 !important;
  border-left: 6px solid var(--game-purple) !important;
  border-radius: 17px !important;
  background: #ffffff !important;
}

.student-game-shell .eport-achievement-preview-wrap {
  border: 3px dashed #cfdcff !important;
  border-radius: 18px !important;
  background: #f7f9ff !important;
}

/* ---------- Common Empty / Loading States ---------- */
.student-game-shell .event-item .event-meta,
.student-game-shell .event-meta {
  color: var(--game-muted);
}

.student-game-shell .mini-loading,
.student-game-shell .eport-loading {
  border: 2px dashed #cbd8f5 !important;
  border-radius: 17px !important;
  background: #f7f9ff !important;
  color: var(--game-muted) !important;
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .student-game-shell .student-game-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .student-game-shell .student-game-header-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .student-game-shell .student-top-rank-row-v4 {
    grid-template-columns: 1fr !important;
  }

  .student-game-shell .student-game-tabbar {
    top: 8px;
  }

  .student-game-shell .eport-menu-season-row {
    align-items: stretch !important;
    flex-direction: column !important;
  }

  .student-game-shell .student-eport-season-slot {
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 760px) {
  .student-game-shell .student-game-container {
    width: min(100% - 20px, 680px);
    margin-top: 14px;
  }

  .student-game-shell .student-game-welcome {
    min-height: 0;
    align-items: flex-start;
    flex-direction: column;
    padding: 22px 20px;
    border-radius: 23px;
  }

  .student-game-shell .student-game-welcome-icons {
    width: 100%;
    justify-content: flex-end;
  }

  .student-game-shell .student-game-welcome-icons span {
    width: 45px;
    height: 45px;
    border-radius: 14px;
  }

  .student-game-shell .student-game-welcome-icons span:nth-child(2) {
    width: 52px;
    height: 52px;
    transform: none;
  }

  .student-game-shell .student-game-section-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }

  .student-game-shell .student-top-zone-v4 #studentStats {
    grid-template-columns: 1fr !important;
  }

  .student-game-shell .student-top-zone-v4 #studentStats .stat-card {
    min-height: 104px !important;
  }

  .student-game-shell .student-game-command-center {
    padding: 14px !important;
    border-radius: 24px !important;
  }

  .student-game-shell .student-game-panel-head {
    align-items: flex-start;
  }

  .student-game-shell .student-game-panel-icon {
    width: 50px;
    height: 50px;
    border-radius: 16px;
  }

  .student-game-shell .eport-tabs {
    grid-template-columns: 1fr 1fr !important;
  }

  .student-game-shell .eport-tab {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 520px) {
  .student-game-shell .student-game-header {
    padding: 11px 12px;
  }

  .student-game-shell .student-game-logo-wrap {
    width: 52px;
    height: 52px;
    border-radius: 16px;
  }

  .student-game-shell .student-header-logo {
    width: 40px;
    height: 40px;
  }

  .student-game-shell .student-game-brand-label {
    font-size:13px;
  }

  .student-game-shell .student-hero-inline-header .student-hero-mini-name {
    font-size:17px !important;
  }

  .student-game-shell .student-game-header-actions .btn {
    flex: 1 1 140px;
  }

  .student-game-shell .student-game-welcome h1 {
    font-size:27px;
  }

  .student-game-shell .student-game-welcome p {
    font-size:13px;
  }

  .student-game-shell .eport-tabs {
    grid-template-columns: 1fr !important;
  }

  .student-game-shell .student-rank-slim-card {
    align-items: flex-start !important;
  }

  .student-game-shell .student-rank-slim-logo {
    width: 58px !important;
    height: 58px !important;
  }

  .student-game-shell .student-rank-slim-logo img {
    width: 50px !important;
    height: 50px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .student-game-shell *,
  .student-game-shell *::before,
  .student-game-shell *::after {
    scroll-behavior: auto !important;
    animation: none !important;
    transition: none !important;
  }
}


/* =====================================================
   SMART STUDENT+ — INDEX GAME LOBBY V1
   ขอบเขตเฉพาะหน้า Index ภายใต้ #publicPage.index-game-lobby
   แนวทาง: สดใส แบบเกม อ่านง่าย โหลดภาพนักเรียนเป็นชุด
   ใช้สีพื้นแบบ Solid ไม่ใช้ Gradient
===================================================== */

#publicPage.index-game-lobby {
  --lobby-blue: #3f6df6;
  --lobby-blue-dark: #264cc7;
  --lobby-purple: #8b5cf6;
  --lobby-green: #22c98b;
  --lobby-yellow: #ffbf2f;
  --lobby-pink: #ff6b9e;
  --lobby-red: #ff5d6c;
  --lobby-cyan: #20b8e8;
  --lobby-ink: #18233f;
  --lobby-muted: #64708a;
  --lobby-bg: #edf4ff;
  --lobby-card: #ffffff;
  --lobby-line: #d8e4ff;

  min-height: 100vh;
  overflow-x: hidden;
  color: var(--lobby-ink);
  background: var(--lobby-bg);
}

#publicPage.index-game-lobby *,
#publicPage.index-game-lobby *::before,
#publicPage.index-game-lobby *::after {
  box-sizing: border-box;
}

#publicPage.index-game-lobby .game-lobby-header {
  position: sticky;
  top: 0;
  z-index: 80;
  min-height: 82px;
  padding: 12px clamp(16px, 3vw, 34px);
  background: rgba(255, 255, 255, .96);
  border-bottom: 3px solid #dce7ff;
  box-shadow: 0 8px 22px rgba(44, 77, 153, .09);
}

#publicPage.index-game-lobby .game-lobby-brand {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
}

#publicPage.index-game-lobby .game-lobby-brand .school-logo {
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  padding: 5px;
  object-fit: contain;
  border-radius: 19px;
  background: #ffffff;
  border: 3px solid #dce7ff;
  box-shadow: 0 5px 0 #bfd0ff;
}

#publicPage.index-game-lobby .game-lobby-brand-copy {
  min-width: 0;
  display: block;
}

#publicPage.index-game-lobby .game-lobby-eyebrow {
  display: block;
  color: var(--lobby-blue);
  font-size:13px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 1.2px;
}

#publicPage.index-game-lobby .game-lobby-brand-copy strong {
  display: block;
  margin-top: 3px;
  color: var(--lobby-ink);
  font-size:clamp(18px, 2vw, 23px);
  line-height: 1.08;
  font-weight: 800;
}

#publicPage.index-game-lobby .game-lobby-brand-copy small {
  display: block;
  max-width: min(50vw, 540px);
  margin-top: 3px;
  overflow: hidden;
  color: var(--lobby-muted);
  font-size:13px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#publicPage.index-game-lobby .game-lobby-login {
  align-items: center;
  gap: 10px;
}

#publicPage.index-game-lobby .game-lobby-login .btn {
  min-height: 44px;
  padding: 9px 17px;
  border-width: 2px;
  border-style: solid;
  border-radius: 15px;
  font-weight: 800;
  box-shadow: 0 5px 0 rgba(43, 66, 120, .15);
}

#publicPage.index-game-lobby .game-lobby-login .btn:active {
  transform: translateY(3px);
  box-shadow: 0 2px 0 rgba(43, 66, 120, .15);
}

#publicPage.index-game-lobby .game-login-student {
  background: var(--lobby-blue);
  border-color: var(--lobby-blue-dark);
  color: #ffffff;
}

#publicPage.index-game-lobby .game-login-teacher {
  background: #ffffff;
  border-color: #bfd0ff;
  color: var(--lobby-blue-dark);
}

#publicPage.index-game-lobby .game-lobby-container {
  width: min(1240px, calc(100% - 32px));
  margin: 22px auto 38px;
}

#publicPage.index-game-lobby .game-lobby-hero {
  position: relative;
  min-height: 310px;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(340px, .85fr);
  gap: clamp(22px, 4vw, 54px);
  align-items: center;
  overflow: hidden;
  padding: clamp(28px, 5vw, 58px);
  border: 4px solid #ffffff;
  border-radius: 34px;
  outline: 3px solid #244fca;
  background: var(--lobby-blue);
  box-shadow: 0 14px 0 #c9d8ff, 0 25px 45px rgba(38, 76, 199, .18);
}

#publicPage.index-game-lobby .game-lobby-hero::before,
#publicPage.index-game-lobby .game-lobby-hero::after {
  content: "";
  position: absolute;
  border: 12px solid rgba(255, 255, 255, .12);
  border-radius: 28px;
  pointer-events: none;
}

#publicPage.index-game-lobby .game-lobby-hero::before {
  width: 110px;
  height: 110px;
  top: -28px;
  right: 33%;
  transform: rotate(18deg);
}

#publicPage.index-game-lobby .game-lobby-hero::after {
  width: 72px;
  height: 72px;
  left: 44%;
  bottom: -24px;
  transform: rotate(-22deg);
}

#publicPage.index-game-lobby .game-lobby-hero-copy {
  position: relative;
  z-index: 2;
  min-width: 0;
  color: #ffffff;
}

#publicPage.index-game-lobby .game-lobby-live-badge {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 7px 12px;
  border-radius: 999px;
  background: #ffffff;
  color: var(--lobby-blue-dark);
  font-size:13px;
  font-weight: 800;
  letter-spacing: .65px;
  box-shadow: 0 5px 0 rgba(24, 35, 63, .18);
}

#publicPage.index-game-lobby .game-live-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--lobby-green);
  box-shadow: 0 0 0 4px rgba(34, 201, 139, .18);
}

#publicPage.index-game-lobby .game-lobby-hero h1 {
  margin: 17px 0 10px;
  color: #ffffff;
  font-size:clamp(36px, 5.2vw, 66px);
  line-height: 1.02;
  font-weight: 800;
  letter-spacing: -.8px;
}

#publicPage.index-game-lobby .game-lobby-hero p {
  max-width: 670px;
  margin: 0;
  color: rgba(255, 255, 255, .88);
  font-size:clamp(15px, 1.6vw, 18px);
  line-height: 1.7;
  font-weight: 500;
}

#publicPage.index-game-lobby .game-lobby-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 11px;
  margin-top: 22px;
}

#publicPage.index-game-lobby .game-main-action,
#publicPage.index-game-lobby .game-secondary-action {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 10px 18px;
  border: 3px solid rgba(255, 255, 255, .84);
  border-radius: 16px;
  cursor: pointer;
  font-family: inherit;
  font-size:14px;
  font-weight: 800;
  transition: transform .14s ease, box-shadow .14s ease;
}

#publicPage.index-game-lobby .game-main-action {
  background: var(--lobby-yellow);
  color: #593800;
  box-shadow: 0 6px 0 #c98100;
}

#publicPage.index-game-lobby .game-secondary-action {
  background: #ffffff;
  color: var(--lobby-blue-dark);
  box-shadow: 0 6px 0 rgba(24, 35, 63, .20);
}

#publicPage.index-game-lobby .game-main-action:hover,
#publicPage.index-game-lobby .game-secondary-action:hover {
  transform: translateY(-2px);
}

#publicPage.index-game-lobby .game-main-action:active,
#publicPage.index-game-lobby .game-secondary-action:active {
  transform: translateY(3px);
  box-shadow: 0 2px 0 rgba(24, 35, 63, .20);
}

#publicPage.index-game-lobby .game-lobby-hero-board {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 13px;
}

#publicPage.index-game-lobby .game-hero-tile {
  min-height: 76px;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 13px;
  align-items: center;
  padding: 13px 16px;
  border: 3px solid #ffffff;
  border-radius: 22px;
  background: #ffffff;
  box-shadow: 0 7px 0 rgba(24, 35, 63, .20);
  transform: rotate(-1.2deg);
}

#publicPage.index-game-lobby .game-hero-tile:nth-child(2) {
  transform: rotate(1.5deg) translateX(18px);
}

#publicPage.index-game-lobby .game-hero-tile:nth-child(3) {
  transform: rotate(-.8deg) translateX(5px);
}

#publicPage.index-game-lobby .game-hero-tile i {
  grid-row: 1 / 3;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 17px;
  color: #ffffff;
  font-size:24px;
}

#publicPage.index-game-lobby .game-hero-tile strong {
  color: var(--lobby-ink);
  font-size:16px;
  line-height: 1.1;
  font-weight: 800;
}

#publicPage.index-game-lobby .game-hero-tile span {
  margin-top: 3px;
  color: var(--lobby-muted);
  font-size:13px;
  font-weight: 600;
}

#publicPage.index-game-lobby .tile-blue i { background: var(--lobby-blue); }
#publicPage.index-game-lobby .tile-yellow i { background: #f4a900; }
#publicPage.index-game-lobby .tile-green i { background: #15a86f; }

#publicPage.index-game-lobby .game-section-head {
  margin: 34px 0 15px;
  align-items: flex-end;
}

#publicPage.index-game-lobby .game-section-kicker {
  display: block;
  margin-bottom: 4px;
  color: var(--lobby-blue);
  font-size:13px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 1px;
}

#publicPage.index-game-lobby .game-section-head h2 {
  margin: 0;
  color: var(--lobby-ink);
  font-size:clamp(24px, 3vw, 34px);
  line-height: 1.15;
  font-weight: 800;
}

#publicPage.index-game-lobby .game-section-head p {
  margin: 5px 0 0;
  color: var(--lobby-muted);
  font-size:14px;
  font-weight: 500;
}

#publicPage.index-game-lobby .game-refresh-btn {
  min-height: 42px;
  border: 2px solid #bfd0ff;
  border-radius: 14px;
  background: #ffffff;
  color: var(--lobby-blue-dark);
  box-shadow: 0 4px 0 #d6e1ff;
  font-weight: 800;
}

#publicPage.index-game-lobby #publicStats {
  grid-template-columns: repeat(6, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

#publicPage.index-game-lobby #publicStats .stat-card {
  min-height: 126px;
  padding: 16px;
  border: 3px solid #dce7ff;
  border-radius: 23px;
  background: #ffffff;
  box-shadow: 0 7px 0 #dce7ff;
}

#publicPage.index-game-lobby #publicStats .stat-card::after {
  width: 74px;
  height: 74px;
  right: -20px;
  bottom: -22px;
  opacity: .08;
}

#publicPage.index-game-lobby #publicStats .stat-icon {
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 15px;
  background: #eff4ff;
  font-size:21px;
}

#publicPage.index-game-lobby #publicStats .stat-card h3 {
  font-size:clamp(27px, 2.3vw, 36px);
  font-weight: 800;
}

#publicPage.index-game-lobby #publicStats .stat-card p {
  color: var(--lobby-muted);
  font-size:13px;
  font-weight: 700;
}

#publicPage.index-game-lobby #publicStats .stat-blue { border-bottom-color: var(--lobby-blue); }
#publicPage.index-game-lobby #publicStats .stat-green { border-bottom-color: var(--lobby-green); }
#publicPage.index-game-lobby #publicStats .stat-yellow { border-bottom-color: var(--lobby-yellow); }
#publicPage.index-game-lobby #publicStats .stat-pink { border-bottom-color: var(--lobby-pink); }
#publicPage.index-game-lobby #publicStats .stat-purple { border-bottom-color: var(--lobby-purple); }

#publicPage.index-game-lobby .game-insight-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}

#publicPage.index-game-lobby .game-insight-panel {
  min-height: 100%;
  padding: 17px;
  border: 3px solid #dce7ff;
  border-radius: 24px;
  background: #ffffff;
  box-shadow: 0 7px 0 #dce7ff;
}

#publicPage.index-game-lobby .game-class-panel { border-top-color: var(--lobby-green); }
#publicPage.index-game-lobby .game-rank-panel { border-top-color: var(--lobby-yellow); }
#publicPage.index-game-lobby .game-feed-panel { border-top-color: var(--lobby-pink); }

#publicPage.index-game-lobby .game-insight-panel .panel-title {
  color: var(--lobby-ink);
  font-size:17px;
  font-weight: 800;
}

#publicPage.index-game-lobby .game-insight-panel .compact-class-item,
#publicPage.index-game-lobby .game-insight-panel .compact-rank-item,
#publicPage.index-game-lobby .game-insight-panel .compact-positive-item,
#publicPage.index-game-lobby .game-insight-panel .class-item,
#publicPage.index-game-lobby .game-insight-panel .rank-item,
#publicPage.index-game-lobby .game-insight-panel .event-item {
  border: 2px solid #e6edff;
  border-radius: 16px;
  background: #f9fbff;
  box-shadow: none;
}

#publicPage.index-game-lobby .game-player-gallery {
  margin-top: 28px;
  padding: clamp(18px, 3vw, 28px);
  border: 3px solid #cddaff;
  border-top: 8px solid var(--lobby-purple);
  border-radius: 30px;
  background: #ffffff;
  box-shadow: 0 10px 0 #d8e2ff, 0 24px 44px rgba(42, 71, 145, .10);
}

#publicPage.index-game-lobby .game-gallery-head {
  align-items: flex-start;
  margin-bottom: 18px;
}

#publicPage.index-game-lobby .game-gallery-title {
  margin: 3px 0 4px;
  color: var(--lobby-ink);
  font-size:clamp(24px, 3vw, 34px);
  line-height: 1.15;
  font-weight: 800;
}

#publicPage.index-game-lobby .game-gallery-title i {
  color: var(--lobby-purple);
}

#publicPage.index-game-lobby .game-gallery-head p {
  max-width: 720px;
  margin: 0;
  color: var(--lobby-muted);
  font-size:14px;
  line-height: 1.65;
  font-weight: 500;
}

#publicPage.index-game-lobby .game-gallery-head-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

#publicPage.index-game-lobby .game-show-all-btn,
#publicPage.index-game-lobby .game-load-more-btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 9px 17px;
  border: 2px solid #6d46ce;
  border-radius: 15px;
  background: var(--lobby-purple);
  color: #ffffff;
  cursor: pointer;
  font-family: inherit;
  font-size:14px;
  font-weight: 800;
  box-shadow: 0 5px 0 #5a35b9;
}

#publicPage.index-game-lobby .game-show-all-btn:active,
#publicPage.index-game-lobby .game-load-more-btn:active {
  transform: translateY(3px);
  box-shadow: 0 2px 0 #5a35b9;
}

#publicPage.index-game-lobby .game-spotlight-stage {
  min-height: 196px;
  margin-bottom: 19px;
}

#publicPage.index-game-lobby .game-spotlight-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 13px;
}

#publicPage.index-game-lobby .game-spotlight-card {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  overflow: hidden;
  padding: 16px;
  border: 3px solid #dce7ff;
  border-left: 8px solid var(--player-rank, var(--lobby-yellow));
  border-radius: 23px;
  background: #f8faff;
  box-shadow: 0 6px 0 #dce7ff;
}

#publicPage.index-game-lobby .game-spotlight-card.spotlight-1 {
  background: #fff9df;
  border-color: #f5d46a;
  box-shadow: 0 6px 0 #efd16e;
}

#publicPage.index-game-lobby .game-spotlight-position {
  position: absolute;
  top: 10px;
  right: 10px;
  min-width: 38px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--lobby-ink);
  color: #ffffff;
  font-size:13px;
  font-weight: 800;
}

#publicPage.index-game-lobby .game-spotlight-avatar {
  position: relative;
  width: 82px;
  height: 82px;
  padding: 5px;
  border-radius: 25px;
  background: #ffffff;
  border: 3px solid var(--player-rank, #cbd5e1);
}

#publicPage.index-game-lobby .game-spotlight-avatar > img:first-child {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 18px;
}

#publicPage.index-game-lobby .game-spotlight-rank-icon {
  position: absolute;
  right: -8px;
  bottom: -8px;
  width: 34px;
  height: 34px;
  padding: 3px;
  object-fit: contain;
  border-radius: 12px;
  background: #ffffff;
  border: 2px solid var(--player-rank, #cbd5e1);
}

#publicPage.index-game-lobby .game-spotlight-copy {
  min-width: 0;
  padding-right: 28px;
}

#publicPage.index-game-lobby .game-spotlight-copy strong {
  display: block;
  overflow: hidden;
  color: var(--lobby-ink);
  font-size:17px;
  line-height: 1.25;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#publicPage.index-game-lobby .game-spotlight-copy > span {
  display: block;
  margin-top: 3px;
  color: var(--lobby-muted);
  font-size:13px;
  font-weight: 600;
}

#publicPage.index-game-lobby .game-spotlight-rank {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 5px 9px;
  border-radius: 999px;
  background: #ffffff;
  border: 2px solid var(--player-rank, #cbd5e1);
  color: var(--player-rank, var(--lobby-blue));
  font-size:13px;
  font-weight: 800;
}

#publicPage.index-game-lobby .game-spotlight-score {
  margin-top: 7px;
  color: var(--lobby-ink);
  font-size:13px;
  font-weight: 800;
}

#publicPage.index-game-lobby .game-spotlight-card a {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
}

#publicPage.index-game-lobby .game-gallery-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px;
  gap: 10px;
  align-items: center;
}

#publicPage.index-game-lobby .game-search-wrap {
  position: relative;
  min-width: 0;
}

#publicPage.index-game-lobby .game-search-wrap > i {
  position: absolute;
  top: 50%;
  left: 15px;
  z-index: 2;
  color: var(--lobby-blue);
  transform: translateY(-50%);
  pointer-events: none;
}

#publicPage.index-game-lobby .game-search-wrap .input {
  width: 100%;
  min-height: 48px;
  padding-left: 43px;
  border: 3px solid #dce7ff;
  border-radius: 16px;
  background: #f9fbff;
  color: var(--lobby-ink);
  font-weight: 600;
}

#publicPage.index-game-lobby #publicEPortClassFilter {
  width: 100%;
  min-height: 48px;
  border: 3px solid #dce7ff;
  border-radius: 16px;
  background: #f9fbff;
  color: var(--lobby-ink);
  font-weight: 700;
}

#publicPage.index-game-lobby .game-class-chip-row {
  display: flex;
  gap: 8px;
  margin-top: 11px;
  padding: 2px 1px 5px;
  overflow-x: auto;
  scrollbar-width: thin;
}

#publicPage.index-game-lobby .game-class-chip {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  padding: 6px 12px;
  border: 2px solid #dce7ff;
  border-radius: 999px;
  background: #ffffff;
  color: var(--lobby-muted);
  cursor: pointer;
  font-family: inherit;
  font-size:13px;
  font-weight: 800;
}

#publicPage.index-game-lobby .game-class-chip.active {
  border-color: var(--lobby-blue-dark);
  background: var(--lobby-blue);
  color: #ffffff;
  box-shadow: 0 3px 0 #264cc7;
}

#publicPage.index-game-lobby .game-gallery-status-row {
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
}

#publicPage.index-game-lobby .game-gallery-status-row .eport-showcase-count {
  margin: 0;
  color: var(--lobby-muted);
  font-size:13px;
  font-weight: 700;
}

#publicPage.index-game-lobby .game-gallery-speed-note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #12845c;
  font-size:13px;
  font-weight: 800;
}

#publicPage.index-game-lobby .game-player-list {
  display: block !important;
  min-height: 160px;
  margin-top: 7px;
}

#publicPage.index-game-lobby .game-player-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
}

#publicPage.index-game-lobby .game-player-card {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  column-gap: 12px;
  align-items: center;
  overflow: hidden;
  padding: 13px;
  border: 3px solid #e0e8fb;
  border-bottom: 6px solid var(--player-rank, var(--lobby-blue));
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 5px 0 #e0e8fb;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

#publicPage.index-game-lobby .game-player-card:hover {
  transform: translateY(-3px);
  border-color: var(--player-rank, var(--lobby-blue));
  box-shadow: 0 8px 0 #dce7ff, 0 15px 24px rgba(42, 71, 145, .10);
}

#publicPage.index-game-lobby .game-player-avatar-frame {
  position: relative;
  grid-row: 1 / 4;
  width: 66px;
  height: 66px;
  padding: 4px;
  border-radius: 20px;
  background: #f4f7ff;
  border: 3px solid var(--player-rank, #cbd5e1);
}

#publicPage.index-game-lobby .game-player-avatar {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 14px;
  background: #ffffff;
}

#publicPage.index-game-lobby .game-player-rank-mini {
  position: absolute;
  right: -7px;
  bottom: -7px;
  width: 27px;
  height: 27px;
  padding: 2px;
  object-fit: contain;
  border-radius: 9px;
  background: #ffffff;
  border: 2px solid var(--player-rank, #cbd5e1);
}

#publicPage.index-game-lobby .game-player-top-tag {
  position: absolute;
  top: 8px;
  right: 8px;
  min-width: 31px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: var(--lobby-yellow);
  color: #5b3a00;
  font-size:13px;
  font-weight: 800;
}

#publicPage.index-game-lobby .game-player-name {
  min-width: 0;
  padding-right: 26px;
  overflow: hidden;
  color: var(--lobby-ink);
  font-size:15px;
  line-height: 1.25;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#publicPage.index-game-lobby .game-player-meta {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 3px;
  overflow: hidden;
  color: var(--lobby-muted);
  font-size:13px;
  font-weight: 600;
  white-space: nowrap;
}

#publicPage.index-game-lobby .game-player-rank-line {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  color: var(--player-rank, var(--lobby-blue));
  font-size:13px;
  font-weight: 800;
}

#publicPage.index-game-lobby .game-player-rank-line span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#publicPage.index-game-lobby .game-player-open {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
}

#publicPage.index-game-lobby .game-player-card::after {
  content: "\f35d";
  position: absolute;
  right: 11px;
  bottom: 9px;
  color: #9aa8c8;
  font-family: "Font Awesome 6 Free";
  font-size:13px;
  font-weight: 900;
  pointer-events: none;
}

#publicPage.index-game-lobby .game-load-more-wrap {
  display: flex;
  justify-content: center;
  margin-top: 18px;
}

#publicPage.index-game-lobby .game-gallery-skeleton {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 13px;
}

#publicPage.index-game-lobby .game-gallery-skeleton span {
  min-height: 164px;
  border: 3px solid #e2e9f8;
  border-radius: 22px;
  background: #f2f6ff;
  animation: gameLobbyPulse 1.05s ease-in-out infinite alternate;
}

#publicPage.index-game-lobby .game-gallery-skeleton.grid-skeleton {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

#publicPage.index-game-lobby .game-gallery-skeleton.grid-skeleton span {
  min-height: 96px;
}

@keyframes gameLobbyPulse {
  from { opacity: .55; }
  to { opacity: 1; }
}

#publicPage.index-game-lobby .game-lobby-footer {
  padding: 20px 16px 28px;
  color: #6e7890;
  background: transparent;
  font-size:13px;
  line-height: 1.7;
  text-align: center;
}

@media (max-width: 1120px) {
  #publicPage.index-game-lobby #publicStats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #publicPage.index-game-lobby .game-player-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 920px) {
  #publicPage.index-game-lobby .game-lobby-hero {
    grid-template-columns: 1fr;
  }

  #publicPage.index-game-lobby .game-lobby-hero-board {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #publicPage.index-game-lobby .game-hero-tile,
  #publicPage.index-game-lobby .game-hero-tile:nth-child(2),
  #publicPage.index-game-lobby .game-hero-tile:nth-child(3) {
    min-height: 128px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    text-align: center;
    transform: none;
  }

  #publicPage.index-game-lobby .game-hero-tile i {
    flex: 0 0 auto;
  }

  #publicPage.index-game-lobby .game-insight-grid {
    grid-template-columns: 1fr;
  }

  #publicPage.index-game-lobby .game-spotlight-grid {
    grid-template-columns: 1fr;
  }

  #publicPage.index-game-lobby .game-player-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #publicPage.index-game-lobby .game-gallery-skeleton,
  #publicPage.index-game-lobby .game-gallery-skeleton.grid-skeleton {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  #publicPage.index-game-lobby .game-lobby-header {
    position: relative;
    flex-direction: column;
    align-items: stretch;
  }

  #publicPage.index-game-lobby .game-lobby-brand-copy small {
    max-width: calc(100vw - 112px);
  }

  #publicPage.index-game-lobby .game-lobby-login {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  #publicPage.index-game-lobby .game-lobby-login .btn {
    width: 100%;
  }

  #publicPage.index-game-lobby .game-lobby-container {
    width: min(100% - 20px, 1240px);
    margin-top: 12px;
  }

  #publicPage.index-game-lobby .game-lobby-hero {
    min-height: 0;
    padding: 24px 20px;
    border-radius: 26px;
  }

  #publicPage.index-game-lobby .game-lobby-hero h1 {
    font-size:38px;
  }

  #publicPage.index-game-lobby .game-lobby-hero-board {
    grid-template-columns: 1fr;
  }

  #publicPage.index-game-lobby #publicStats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #publicPage.index-game-lobby .game-gallery-head {
    flex-direction: column;
  }

  #publicPage.index-game-lobby .game-gallery-head-actions,
  #publicPage.index-game-lobby .game-show-all-btn {
    width: 100%;
  }

  #publicPage.index-game-lobby .game-gallery-toolbar {
    grid-template-columns: 1fr;
  }

  #publicPage.index-game-lobby .game-player-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 430px) {
  #publicPage.index-game-lobby #publicStats {
    grid-template-columns: 1fr;
  }

  #publicPage.index-game-lobby .game-lobby-hero-actions {
    display: grid;
  }

  #publicPage.index-game-lobby .game-main-action,
  #publicPage.index-game-lobby .game-secondary-action {
    width: 100%;
  }

  #publicPage.index-game-lobby .game-gallery-status-row {
    align-items: flex-start;
    flex-direction: column;
  }
}


/* =====================================================
   CUTE GAME LOBBY V2 + UNIVERSAL MOBILE HARDENING
   ใช้ร่วมกับ Index_CUTE_GAME_LOBBY_V2_MOBILE.html
   - Candy block game / น่ารักขึ้น
   - รองรับมือถือ 320px ขึ้นไป, landscape, tablet
   - ป้องกัน horizontal overflow และ iOS input zoom
===================================================== */

#publicPage.index-game-lobby {
  --cute-purple: #6c63ff;
  --cute-purple-dark: #5148d8;
  --cute-pink: #ff70a6;
  --cute-yellow: #ffd166;
  --cute-green: #59d9a7;
  --cute-cyan: #55c7f3;
  --cute-cream: #fffaf1;
  --cute-lilac: #f1eeff;
  padding-bottom: env(safe-area-inset-bottom);
  background:
    radial-gradient(circle at 16px 16px, rgba(108, 99, 255, .055) 2px, transparent 2.5px),
    var(--lobby-bg);
  background-size: 30px 30px;
}

/* Header: softer and friendlier */
#publicPage.index-game-lobby .game-lobby-header {
  border-bottom-color: #dcd7ff;
}

#publicPage.index-game-lobby .game-lobby-brand .school-logo {
  border-color: #dcd7ff;
  box-shadow: 0 5px 0 #c9c3ff;
}

#publicPage.index-game-lobby .game-lobby-eyebrow {
  color: var(--cute-purple);
}

/* Hero: candy block style */
#publicPage.index-game-lobby .game-lobby-hero {
  outline-color: var(--cute-purple-dark);
  background: var(--cute-purple);
  box-shadow:
    0 14px 0 #d6d1ff,
    0 26px 50px rgba(81, 72, 216, .20);
}

#publicPage.index-game-lobby .game-lobby-hero::before {
  border-color: rgba(255, 209, 102, .26);
}

#publicPage.index-game-lobby .game-lobby-hero::after {
  border-color: rgba(255, 112, 166, .22);
}

#publicPage.index-game-lobby .game-lobby-live-badge {
  color: var(--cute-purple-dark);
}

#publicPage.index-game-lobby .game-live-dot {
  background: var(--cute-green);
}

/* Cute chips */
#publicPage.index-game-lobby .game-cute-chip-row {
  position: relative;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 2px;
}

#publicPage.index-game-lobby .cute-chip {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 11px;
  border: 2px solid rgba(255, 255, 255, .95);
  border-radius: 999px;
  color: #26304a;
  font-size:13px;
  font-weight: 900;
  box-shadow: 0 4px 0 rgba(31, 40, 78, .16);
}

#publicPage.index-game-lobby .cute-chip i {
  font-size:13px;
}

#publicPage.index-game-lobby .cute-chip-yellow { background: var(--cute-yellow); }
#publicPage.index-game-lobby .cute-chip-pink { background: #ffd9e7; }
#publicPage.index-game-lobby .cute-chip-green { background: #c9f7e6; }

/* Mascot */
#publicPage.index-game-lobby .game-cute-mascot {
  position: relative;
  min-height: 112px;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 15px 17px;
  border: 4px solid #ffffff;
  border-radius: 27px;
  background: #fff8df;
  box-shadow: 0 8px 0 rgba(52, 57, 117, .18);
  transform: rotate(-1.2deg);
}

#publicPage.index-game-lobby .game-mascot-face {
  position: relative;
  width: 78px;
  height: 72px;
  border: 4px solid #443da9;
  border-radius: 24px;
  background: var(--cute-yellow);
  box-shadow: inset 0 -8px 0 rgba(255, 176, 59, .28);
}

#publicPage.index-game-lobby .game-mascot-crown {
  position: absolute;
  z-index: 2;
  left: 33px;
  top: -18px;
  color: #ff9f1c;
  font-size:27px;
  transform: rotate(-10deg);
  filter: drop-shadow(0 3px 0 rgba(91, 64, 0, .16));
}

#publicPage.index-game-lobby .game-mascot-eye {
  position: absolute;
  top: 24px;
  width: 9px;
  height: 13px;
  border-radius: 999px;
  background: #332e78;
}

#publicPage.index-game-lobby .game-mascot-eye.eye-left { left: 20px; }
#publicPage.index-game-lobby .game-mascot-eye.eye-right { right: 20px; }

#publicPage.index-game-lobby .game-mascot-smile {
  position: absolute;
  left: 50%;
  bottom: 14px;
  width: 27px;
  height: 13px;
  border: 4px solid #332e78;
  border-top: 0;
  border-radius: 0 0 999px 999px;
  transform: translateX(-50%);
}

#publicPage.index-game-lobby .game-mascot-copy strong,
#publicPage.index-game-lobby .game-mascot-copy span {
  display: block;
}

#publicPage.index-game-lobby .game-mascot-copy strong {
  color: #3b348e;
  font-size:18px;
  font-weight: 1000;
  letter-spacing: .4px;
}

#publicPage.index-game-lobby .game-mascot-copy span {
  margin-top: 3px;
  color: #6b6487;
  font-size:13px;
  font-weight: 700;
}

/* Floating sparkles */
#publicPage.index-game-lobby .game-cute-sparkles {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

#publicPage.index-game-lobby .game-cute-sparkles i {
  position: absolute;
  color: #ffffff;
  filter: drop-shadow(0 3px 0 rgba(27, 31, 81, .16));
  animation: cuteLobbyFloat 3.2s ease-in-out infinite;
}

#publicPage.index-game-lobby .sparkle-one {
  left: 3%;
  top: 12%;
  color: var(--cute-yellow) !important;
  font-size:22px;
}

#publicPage.index-game-lobby .sparkle-two {
  left: 48%;
  top: 8%;
  color: #ffc0d6 !important;
  font-size:18px;
  animation-delay: .5s !important;
}

#publicPage.index-game-lobby .sparkle-three {
  right: 3%;
  bottom: 12%;
  color: #bff5e2 !important;
  font-size:23px;
  animation-delay: 1s !important;
}

#publicPage.index-game-lobby .sparkle-four {
  left: 42%;
  bottom: 8%;
  color: #ffffff !important;
  font-size:13px;
  animation-delay: 1.5s !important;
}

@keyframes cuteLobbyFloat {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50% { transform: translateY(-8px) rotate(5deg); }
}

/* Buttons: softer candy colors */
#publicPage.index-game-lobby .game-main-action {
  background: var(--cute-yellow);
  border-color: #db9b1e;
  color: #3c3278;
}

#publicPage.index-game-lobby .game-secondary-action {
  border-color: #ffffff;
}

#publicPage.index-game-lobby .game-show-all-btn,
#publicPage.index-game-lobby .game-load-more-btn {
  border-radius: 18px;
}

/* Panels/cards: playful but still readable */
#publicPage.index-game-lobby .game-insight-panel,
#publicPage.index-game-lobby .game-player-gallery {
  border-width: 3px;
  border-color: #dcd7ff;
  box-shadow: 0 9px 0 #e2defe, 0 18px 32px rgba(52, 63, 130, .08);
}

#publicPage.index-game-lobby .game-insight-panel:nth-child(1) {
  border-color: #bfeedd;
  box-shadow: 0 9px 0 #d8f8ec, 0 18px 32px rgba(52, 63, 130, .08);
}

#publicPage.index-game-lobby .game-insight-panel:nth-child(2) {
  border-color: #ffe09c;
  box-shadow: 0 9px 0 #fff0c9, 0 18px 32px rgba(52, 63, 130, .08);
}

#publicPage.index-game-lobby .game-insight-panel:nth-child(3) {
  border-color: #ffc9dc;
  box-shadow: 0 9px 0 #ffe3ed, 0 18px 32px rgba(52, 63, 130, .08);
}

#publicPage.index-game-lobby .game-player-card,
#publicPage.index-game-lobby .game-spotlight-card {
  transition: transform .18s ease, box-shadow .18s ease;
}

@media (hover: hover) and (pointer: fine) {
  #publicPage.index-game-lobby .game-player-card:hover,
  #publicPage.index-game-lobby .game-spotlight-card:hover {
    transform: translateY(-6px) rotate(-.4deg);
  }
}

/* Gallery toolbar */
#publicPage.index-game-lobby .game-gallery-toolbar .input,
#publicPage.index-game-lobby .game-search-wrap input {
  min-height: 48px;
  font-size:16px;
}

#publicPage.index-game-lobby .game-gallery-speed-note {
  color: #645b9d;
  background: #f3f0ff;
  border-color: #dcd7ff;
}

/* Mobile dock hidden on desktop */
#publicPage.index-game-lobby .game-mobile-dock {
  display: none;
}

/* General mobile and touch hardening */
#publicPage.index-game-lobby button,
#publicPage.index-game-lobby a,
.student-game-shell button,
.student-game-shell a,
.student-game-shell select,
.student-game-shell input {
  touch-action: manipulation;
}

#publicPage.index-game-lobby input,
#publicPage.index-game-lobby select,
#publicPage.index-game-lobby textarea,
.student-game-shell input,
.student-game-shell select,
.student-game-shell textarea {
  max-width: 100%;
  font-size:16px;
}

#publicPage.index-game-lobby img,
.student-game-shell img {
  max-width: 100%;
}

/* Tablet and small landscape */
@media (max-width: 980px) {
  #publicPage.index-game-lobby .game-lobby-hero {
    grid-template-columns: 1fr;
  }

  #publicPage.index-game-lobby .game-lobby-hero-board {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #publicPage.index-game-lobby .game-cute-mascot {
    grid-column: 1 / -1;
  }

  #publicPage.index-game-lobby .game-insight-grid {
    grid-template-columns: 1fr;
  }

  #publicPage.index-game-lobby .game-spotlight-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Main mobile layout */
@media (max-width: 720px) {
  #publicPage.index-game-lobby {
    padding-bottom: calc(82px + env(safe-area-inset-bottom));
  }

  #publicPage.index-game-lobby .game-lobby-header {
    min-height: 68px;
    padding:
      calc(8px + env(safe-area-inset-top))
      12px
      9px;
    gap: 8px;
  }

  #publicPage.index-game-lobby .game-lobby-brand {
    gap: 8px;
  }

  #publicPage.index-game-lobby .game-lobby-brand .school-logo {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
    border-radius: 15px;
    border-width: 2px;
    box-shadow: 0 3px 0 #c9c3ff;
  }

  #publicPage.index-game-lobby .game-lobby-eyebrow {
    font-size:13px;
  }

  #publicPage.index-game-lobby .game-lobby-brand-copy strong {
    max-width: 44vw;
    overflow: hidden;
    font-size:16px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #publicPage.index-game-lobby .game-lobby-brand-copy small {
    display: none;
  }

  #publicPage.index-game-lobby .game-lobby-login {
    gap: 6px;
    flex-wrap: nowrap;
  }

  #publicPage.index-game-lobby .game-lobby-login .btn {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    border-radius: 15px;
    font-size:0;
  }

  #publicPage.index-game-lobby .game-lobby-login .btn i {
    margin: 0;
    font-size:17px;
  }

  #publicPage.index-game-lobby .game-lobby-container {
    width: calc(100% - 20px);
    margin-top: 14px;
  }

  #publicPage.index-game-lobby .game-lobby-hero {
    gap: 18px;
    padding: 25px 18px 22px;
    border-width: 3px;
    border-radius: 28px;
    outline-width: 2px;
    box-shadow: 0 9px 0 #d6d1ff, 0 18px 32px rgba(81, 72, 216, .16);
  }

  #publicPage.index-game-lobby .game-lobby-hero h1 {
    margin-top: 13px;
    font-size:clamp(32px, 10.5vw, 44px);
    line-height: 1.03;
  }

  #publicPage.index-game-lobby .game-lobby-hero p {
    font-size:14px;
    line-height: 1.6;
  }

  #publicPage.index-game-lobby .game-cute-chip-row {
    flex-wrap: nowrap;
    margin-right: -18px;
    padding-right: 18px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  #publicPage.index-game-lobby .game-cute-chip-row::-webkit-scrollbar {
    display: none;
  }

  #publicPage.index-game-lobby .cute-chip {
    flex: 0 0 auto;
  }

  #publicPage.index-game-lobby .game-lobby-hero-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
  }

  #publicPage.index-game-lobby .game-main-action,
  #publicPage.index-game-lobby .game-secondary-action {
    width: 100%;
    min-height: 48px;
  }

  #publicPage.index-game-lobby .game-lobby-hero-board {
    display: flex;
    gap: 10px;
    margin-right: -18px;
    padding: 18px 18px 8px 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  #publicPage.index-game-lobby .game-lobby-hero-board::-webkit-scrollbar {
    display: none;
  }

  #publicPage.index-game-lobby .game-cute-mascot,
  #publicPage.index-game-lobby .game-hero-tile {
    flex: 0 0 min(82vw, 320px);
    scroll-snap-align: center;
  }

  #publicPage.index-game-lobby .game-cute-mascot {
    min-height: 108px;
    grid-template-columns: 76px minmax(0, 1fr);
  }

  #publicPage.index-game-lobby .game-mascot-face {
    width: 72px;
    height: 66px;
  }

  #publicPage.index-game-lobby .game-section-head {
    align-items: flex-start;
  }

  #publicPage.index-game-lobby .game-section-head h2 {
    font-size:22px;
  }

  #publicPage.index-game-lobby .game-refresh-btn {
    width: 44px;
    min-width: 44px;
    height: 44px;
    padding: 0;
    font-size:0;
  }

  #publicPage.index-game-lobby .game-refresh-btn i {
    margin: 0;
    font-size:16px;
  }

  #publicPage.index-game-lobby #publicStats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  #publicPage.index-game-lobby #publicStats .stat-card {
    min-width: 0;
    min-height: 116px;
    padding: 14px 11px;
    gap: 9px;
    border-radius: 20px;
  }

  #publicPage.index-game-lobby #publicStats .stat-card .stat-icon {
    width: 43px;
    height: 43px;
    border-radius: 15px;
    font-size:19px;
  }

  #publicPage.index-game-lobby #publicStats .stat-card h3 {
    font-size:clamp(25px, 8vw, 32px);
  }

  #publicPage.index-game-lobby #publicStats .stat-card p {
    font-size:13px;
    line-height: 1.3;
  }

  #publicPage.index-game-lobby .game-insight-panel,
  #publicPage.index-game-lobby .game-player-gallery {
    padding: 15px;
    border-radius: 24px;
    border-width: 2px;
    box-shadow: 0 7px 0 #e2defe, 0 14px 25px rgba(52, 63, 130, .07);
  }

  #publicPage.index-game-lobby .panel-title,
  #publicPage.index-game-lobby .game-gallery-title {
    font-size:17px;
  }

  #publicPage.index-game-lobby .game-spotlight-stage {
    margin-left: -2px;
    margin-right: -2px;
  }

  #publicPage.index-game-lobby .game-spotlight-grid {
    display: flex;
    gap: 11px;
    overflow-x: auto;
    padding: 8px 2px 13px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  #publicPage.index-game-lobby .game-spotlight-grid::-webkit-scrollbar {
    display: none;
  }

  #publicPage.index-game-lobby .game-spotlight-card {
    flex: 0 0 min(82vw, 310px);
    scroll-snap-align: center;
  }

  #publicPage.index-game-lobby .game-gallery-head {
    gap: 12px;
  }

  #publicPage.index-game-lobby .game-gallery-head p {
    font-size:13px;
    line-height: 1.55;
  }

  #publicPage.index-game-lobby .game-gallery-toolbar {
    gap: 9px;
  }

  #publicPage.index-game-lobby .game-class-chip-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 5px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  #publicPage.index-game-lobby .game-class-chip-row::-webkit-scrollbar {
    display: none;
  }

  #publicPage.index-game-lobby .game-class-chip-row button {
    flex: 0 0 auto;
    min-height: 40px;
  }

  #publicPage.index-game-lobby .game-player-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  #publicPage.index-game-lobby .game-player-card {
    min-width: 0;
  }

  #publicPage.index-game-lobby .game-gallery-status-row {
    gap: 7px;
    align-items: flex-start;
    flex-direction: column;
  }

  #publicPage.index-game-lobby .game-show-all-btn,
  #publicPage.index-game-lobby .game-load-more-btn {
    min-height: 48px;
  }

  #publicPage.index-game-lobby .game-lobby-footer {
    margin-bottom: 12px;
    padding-left: 14px;
    padding-right: 14px;
    font-size:13px;
    line-height: 1.55;
  }

  /* Fixed bottom dock */
  #publicPage.index-game-lobby .game-mobile-dock {
    position: fixed;
    z-index: 120;
    left: 10px;
    right: 10px;
    bottom: calc(8px + env(safe-area-inset-bottom));
    min-height: 66px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
    padding: 7px;
    border: 2px solid #d8d2ff;
    border-radius: 22px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 10px 30px rgba(43, 48, 107, .20);
    backdrop-filter: blur(16px);
  }

  #publicPage.index-game-lobby .game-mobile-dock button {
    min-width: 0;
    min-height: 50px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 3px;
    padding: 5px 2px;
    border: 0;
    border-radius: 16px;
    background: transparent;
    color: #70698e;
    font-family: 'Sarabun', sans-serif;
    font-size:13px;
    font-weight: 800;
  }

  #publicPage.index-game-lobby .game-mobile-dock button i {
    font-size:17px;
    color: var(--cute-purple);
  }

  #publicPage.index-game-lobby .game-mobile-dock .mobile-dock-login {
    background: var(--cute-purple);
    color: #ffffff;
    box-shadow: 0 4px 0 var(--cute-purple-dark);
  }

  #publicPage.index-game-lobby .game-mobile-dock .mobile-dock-login i {
    color: #ffffff;
  }

  /* Login modal on phones */
  #publicPage.index-game-lobby ~ .modal .login-card,
  #loginModal .login-card {
    width: min(94vw, 430px);
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
    padding: 24px 18px;
    border-radius: 26px;
  }
}

/* Very small phones: 320–359px */
@media (max-width: 359px) {
  #publicPage.index-game-lobby .game-lobby-brand-copy strong {
    max-width: 39vw;
    font-size:14px;
  }

  #publicPage.index-game-lobby .game-lobby-container {
    width: calc(100% - 14px);
  }

  #publicPage.index-game-lobby .game-lobby-hero {
    padding-left: 14px;
    padding-right: 14px;
    border-radius: 24px;
  }

  #publicPage.index-game-lobby .game-lobby-hero h1 {
    font-size:30px;
  }

  #publicPage.index-game-lobby #publicStats {
    grid-template-columns: 1fr;
  }

  #publicPage.index-game-lobby #publicStats .stat-card {
    min-height: 105px;
  }

  #publicPage.index-game-lobby .game-cute-mascot,
  #publicPage.index-game-lobby .game-hero-tile,
  #publicPage.index-game-lobby .game-spotlight-card {
    flex-basis: 88vw;
  }

  #publicPage.index-game-lobby .game-mobile-dock {
    left: 6px;
    right: 6px;
    gap: 2px;
    padding: 5px;
  }

  #publicPage.index-game-lobby .game-mobile-dock button {
    font-size:13px;
  }
}

/* Phone landscape: keep content compact */
@media (max-height: 520px) and (orientation: landscape) {
  #publicPage.index-game-lobby .game-lobby-header {
    position: relative;
    min-height: 60px;
  }

  #publicPage.index-game-lobby .game-lobby-hero {
    grid-template-columns: minmax(0, 1fr) minmax(260px, .8fr);
    min-height: 0;
    padding-top: 22px;
    padding-bottom: 22px;
  }

  #publicPage.index-game-lobby .game-lobby-hero h1 {
    font-size:34px;
  }

  #publicPage.index-game-lobby .game-cute-chip-row {
    display: none;
  }

  #publicPage.index-game-lobby .game-lobby-hero-board {
    max-height: 260px;
  }

  #publicPage.index-game-lobby .game-mobile-dock {
    min-height: 58px;
  }
}

/* -----------------------------------------------------
   Student page: universal phone improvements
----------------------------------------------------- */
@media (max-width: 720px) {
  .student-game-shell {
    width: 100%;
    overflow-x: clip;
    padding-bottom: env(safe-area-inset-bottom);
  }

  .student-game-shell .student-game-header {
    padding:
      calc(10px + env(safe-area-inset-top))
      12px
      10px;
  }

  .student-game-shell .student-game-container {
    width: calc(100% - 20px);
    margin-top: 14px;
  }

  .student-game-shell .student-header-brand,
  .student-game-shell .student-header-actions {
    min-width: 0;
  }

  .student-game-shell .student-header-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }

  .student-game-shell .student-header-actions .btn {
    width: 100%;
    min-height: 46px;
    padding-left: 10px;
    padding-right: 10px;
    font-size:13px;
  }

  .student-game-shell #studentStats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .student-game-shell #studentStats .stat-card {
    min-width: 0;
    min-height: 112px !important;
    padding: 13px 10px !important;
  }

  .student-game-shell .student-top-rank-row-v4,
  .student-game-shell .student-score-layout-v3,
  .student-game-shell .eport-edit-grid,
  .student-game-shell .eport-profile-two-col,
  .student-game-shell .eport-achievement-form {
    grid-template-columns: 1fr !important;
  }

  .student-game-shell .eport-menu-season-row {
    align-items: stretch;
    flex-direction: column;
  }

  .student-game-shell .eport-tabs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 4px 2px 9px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .student-game-shell .eport-tabs::-webkit-scrollbar {
    display: none;
  }

  .student-game-shell .eport-tab {
    flex: 0 0 auto;
    min-height: 44px;
    white-space: nowrap;
  }

  .student-game-shell .student-eport-panel,
  .student-game-shell .score-box-v3,
  .student-game-shell .eport-profile-card,
  .student-game-shell .eport-form-card {
    border-radius: 22px;
  }

  .student-game-shell .table-wrap {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 359px) {
  .student-game-shell .student-game-container {
    width: calc(100% - 14px);
  }

  .student-game-shell #studentStats {
    grid-template-columns: 1fr !important;
  }

  .student-game-shell .student-header-actions {
    grid-template-columns: 1fr;
  }
}

/* Reduced motion and accessibility */
@media (prefers-reduced-motion: reduce) {
  #publicPage.index-game-lobby *,
  .student-game-shell * {
    scroll-behavior: auto !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}


/* =====================================================
   CUTE GAME LOBBY V3 — FULL MOTION
   ขยับทุกส่วนแบบเบา ๆ ใช้ transform/opacity เป็นหลัก
   เพื่อรักษาความลื่นบนมือถือ
===================================================== */

#publicPage.game-motion-page {
  --motion-soft: 5.2s;
  --motion-medium: 4.2s;
  --motion-fast: 2.4s;
}

/* Header */
#publicPage.game-motion-page .game-lobby-brand {
  animation: gameBrandFloat 5s ease-in-out infinite;
}

#publicPage.game-motion-page .game-lobby-brand .school-logo {
  animation: gameLogoWiggle 4.6s ease-in-out infinite;
}

#publicPage.game-motion-page .game-lobby-login .btn {
  animation: gameButtonBreath 3.8s ease-in-out infinite;
}

#publicPage.game-motion-page .game-lobby-login .btn:nth-child(2) {
  animation-delay: .7s;
}

/* Hero left */
#publicPage.game-motion-page .game-lobby-hero-copy {
  animation: gameHeroCopyFloat 5.8s ease-in-out infinite;
}

#publicPage.game-motion-page .game-lobby-live-badge {
  animation: gameLiveBadgePulse 2.3s ease-in-out infinite;
}

#publicPage.game-motion-page .game-live-dot {
  animation: gameLiveDotPulse 1.35s ease-in-out infinite;
}

#publicPage.game-motion-page .game-lobby-hero h1 {
  animation: gameTitleFloat 4.8s ease-in-out infinite;
}

#publicPage.game-motion-page .game-lobby-hero-copy > p {
  animation: gameCopyBreath 4.3s ease-in-out infinite;
}

/* Cute chips */
#publicPage.game-motion-page .cute-chip {
  animation: gameChipBob 2.9s ease-in-out infinite;
}

#publicPage.game-motion-page .cute-chip:nth-child(2) {
  animation-delay: .38s;
}

#publicPage.game-motion-page .cute-chip:nth-child(3) {
  animation-delay: .76s;
}

#publicPage.game-motion-page .cute-chip i {
  animation: gameIconPop 2.2s ease-in-out infinite;
}

/* Hero buttons */
#publicPage.game-motion-page .game-lobby-hero-actions button {
  animation: gameActionFloat 3.6s ease-in-out infinite;
}

#publicPage.game-motion-page .game-lobby-hero-actions button:nth-child(2) {
  animation-delay: .6s;
}

/* Mascot */
#publicPage.game-motion-page .game-cute-mascot {
  animation: gameMascotCardFloat 4.4s ease-in-out infinite;
}

#publicPage.game-motion-page .game-mascot-face {
  animation: gameMascotFaceBounce 2.8s ease-in-out infinite;
}

#publicPage.game-motion-page .game-mascot-crown {
  animation: gameCrownDance 2.2s ease-in-out infinite;
  transform-origin: 50% 100%;
}

#publicPage.game-motion-page .game-mascot-eye {
  animation: gameMascotBlink 4.2s linear infinite;
}

#publicPage.game-motion-page .game-mascot-smile {
  animation: gameSmileBounce 2.6s ease-in-out infinite;
}

#publicPage.game-motion-page .game-mascot-copy {
  animation: gameMascotCopySlide 4s ease-in-out infinite;
}

/* Hero tiles */
#publicPage.game-motion-page .game-hero-tile {
  animation: gameTileFloat 3.8s ease-in-out infinite;
}

#publicPage.game-motion-page .game-hero-tile:nth-of-type(2) {
  animation-delay: .34s;
}

#publicPage.game-motion-page .game-hero-tile:nth-of-type(3) {
  animation-delay: .68s;
}

#publicPage.game-motion-page .game-hero-tile:nth-of-type(4) {
  animation-delay: 1.02s;
}

#publicPage.game-motion-page .game-hero-tile i {
  animation: gameTileIconBounce 2.3s ease-in-out infinite;
}

/* Section headings */
#publicPage.game-motion-page .game-section-kicker {
  animation: gameKickerFloat 3.4s ease-in-out infinite;
}

#publicPage.game-motion-page .game-section-head h2,
#publicPage.game-motion-page .game-gallery-title {
  animation: gameSectionTitleBreath 4.6s ease-in-out infinite;
}

#publicPage.game-motion-page .game-refresh-btn {
  animation: gameRefreshFloat 3.2s ease-in-out infinite;
}

#publicPage.game-motion-page .game-refresh-btn i {
  animation: gameRefreshSpin 8s linear infinite;
}

/* Dynamic stat cards */
#publicPage.game-motion-page #publicStats .stat-card {
  animation: gameStatFloat 4.1s ease-in-out infinite;
}

#publicPage.game-motion-page #publicStats .stat-card:nth-child(2) {
  animation-delay: .35s;
}

#publicPage.game-motion-page #publicStats .stat-card:nth-child(3) {
  animation-delay: .7s;
}

#publicPage.game-motion-page #publicStats .stat-card:nth-child(4) {
  animation-delay: 1.05s;
}

#publicPage.game-motion-page #publicStats .stat-icon {
  animation: gameStatIconBounce 2.6s ease-in-out infinite;
}

/* Main panels */
#publicPage.game-motion-page .game-insight-panel {
  animation: gamePanelFloat 5s ease-in-out infinite;
}

#publicPage.game-motion-page .game-insight-panel:nth-child(2) {
  animation-delay: .5s;
}

#publicPage.game-motion-page .game-insight-panel:nth-child(3) {
  animation-delay: 1s;
}

#publicPage.game-motion-page .game-insight-panel .panel-title i {
  animation: gamePanelIconSwing 2.8s ease-in-out infinite;
  transform-origin: center bottom;
}

/* Dynamic list items */
#publicPage.game-motion-page .game-insight-panel .class-item,
#publicPage.game-motion-page .game-insight-panel .rank-item,
#publicPage.game-motion-page .game-insight-panel .event-item,
#publicPage.game-motion-page .game-insight-panel .compact-class-item,
#publicPage.game-motion-page .game-insight-panel .compact-rank-item,
#publicPage.game-motion-page .game-insight-panel .compact-positive-item {
  animation: gameListItemFloat 4s ease-in-out infinite;
}

#publicPage.game-motion-page .game-insight-panel :is(
  .class-item,
  .rank-item,
  .event-item,
  .compact-class-item,
  .compact-rank-item,
  .compact-positive-item
):nth-child(even) {
  animation-delay: .45s;
}

/* Gallery */
#publicPage.game-motion-page .game-player-gallery {
  animation: gameGalleryFloat 5.6s ease-in-out infinite;
}

#publicPage.game-motion-page .game-show-all-btn,
#publicPage.game-motion-page .game-load-more-btn {
  animation: gameActionFloat 3.6s ease-in-out infinite;
}

#publicPage.game-motion-page .game-search-wrap i {
  animation: gameSearchWiggle 2.8s ease-in-out infinite;
}

#publicPage.game-motion-page .game-gallery-speed-note {
  animation: gameSpeedNoteFloat 3.7s ease-in-out infinite;
}

#publicPage.game-motion-page .game-class-chip-row button {
  animation: gameChipBob 3.1s ease-in-out infinite;
}

#publicPage.game-motion-page .game-class-chip-row button:nth-child(even) {
  animation-delay: .42s;
}

/* Spotlight and player cards generated by Script */
#publicPage.game-motion-page .game-spotlight-card {
  animation: gameSpotlightFloat 4.4s ease-in-out infinite;
}

#publicPage.game-motion-page .game-spotlight-card:nth-child(2) {
  animation-delay: .45s;
}

#publicPage.game-motion-page .game-spotlight-card:nth-child(3) {
  animation-delay: .9s;
}

#publicPage.game-motion-page .game-player-card {
  animation: gamePlayerCardFloat 4.7s ease-in-out infinite;
}

#publicPage.game-motion-page .game-player-card:nth-child(3n + 2) {
  animation-delay: .38s;
}

#publicPage.game-motion-page .game-player-card:nth-child(3n + 3) {
  animation-delay: .76s;
}

#publicPage.game-motion-page .game-player-card img,
#publicPage.game-motion-page .game-spotlight-card img {
  animation: gameAvatarBounce 3.5s ease-in-out infinite;
}

/* Skeletons */
#publicPage.game-motion-page .game-gallery-skeleton span {
  animation: gameSkeletonWave 1.4s ease-in-out infinite;
}

/* Mobile dock */
#publicPage.game-motion-page .game-mobile-dock {
  animation: gameDockFloat 4.6s ease-in-out infinite;
}

#publicPage.game-motion-page .game-mobile-dock button i {
  animation: gameDockIconBounce 2.5s ease-in-out infinite;
}

#publicPage.game-motion-page .game-mobile-dock button:nth-child(2) i {
  animation-delay: .3s;
}

#publicPage.game-motion-page .game-mobile-dock button:nth-child(3) i {
  animation-delay: .6s;
}

#publicPage.game-motion-page .game-mobile-dock button:nth-child(4) i {
  animation-delay: .9s;
}

/* Footer */
#publicPage.game-motion-page .game-lobby-footer {
  animation: gameFooterFloat 6s ease-in-out infinite;
}

/* Hover and touch reaction */
@media (hover: hover) and (pointer: fine) {
  #publicPage.game-motion-page :is(
    .game-cute-mascot,
    .game-hero-tile,
    .stat-card,
    .game-insight-panel,
    .game-player-card,
    .game-spotlight-card,
    .cute-chip
  ):hover {
    animation-play-state: paused;
    transform: translateY(-8px) rotate(-.6deg) scale(1.015);
  }
}

#publicPage.game-motion-page button:active,
#publicPage.game-motion-page .game-player-card:active,
#publicPage.game-motion-page .game-spotlight-card:active {
  transform: translateY(3px) scale(.98) !important;
}

/* Keyframes */
@keyframes gameBrandFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

@keyframes gameLogoWiggle {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  30% { transform: rotate(-3deg) translateY(-2px); }
  70% { transform: rotate(3deg) translateY(-2px); }
}

@keyframes gameButtonBreath {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-3px) scale(1.015); }
}

@keyframes gameHeroCopyFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

@keyframes gameLiveBadgePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.035); }
}

@keyframes gameLiveDotPulse {
  0%, 100% { transform: scale(.85); opacity: .65; }
  50% { transform: scale(1.25); opacity: 1; }
}

@keyframes gameTitleFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-4px) rotate(-.35deg); }
}

@keyframes gameCopyBreath {
  0%, 100% { transform: translateY(0); opacity: .9; }
  50% { transform: translateY(-2px); opacity: 1; }
}

@keyframes gameChipBob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-5px) rotate(-1deg); }
}

@keyframes gameIconPop {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.16) rotate(-7deg); }
}

@keyframes gameActionFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

@keyframes gameMascotCardFloat {
  0%, 100% { transform: translateY(0) rotate(-1.2deg); }
  50% { transform: translateY(-8px) rotate(1deg); }
}

@keyframes gameMascotFaceBounce {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-5px) rotate(-2deg); }
}

@keyframes gameCrownDance {
  0%, 100% { transform: rotate(-10deg) translateY(0); }
  50% { transform: rotate(8deg) translateY(-4px); }
}

@keyframes gameMascotBlink {
  0%, 44%, 48%, 100% { transform: scaleY(1); }
  46% { transform: scaleY(.12); }
}

@keyframes gameSmileBounce {
  0%, 100% { transform: translateX(-50%) scaleX(1); }
  50% { transform: translateX(-50%) scaleX(1.13); }
}

@keyframes gameMascotCopySlide {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(4px); }
}

@keyframes gameTileFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-7px) rotate(.8deg); }
}

@keyframes gameTileIconBounce {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-4px) scale(1.08); }
}

@keyframes gameKickerFloat {
  0%, 100% { transform: translateY(0); letter-spacing: .8px; }
  50% { transform: translateY(-2px); letter-spacing: 1.3px; }
}

@keyframes gameSectionTitleBreath {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}

@keyframes gameRefreshFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

@keyframes gameRefreshSpin {
  to { transform: rotate(360deg); }
}

@keyframes gameStatFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-6px) rotate(-.35deg); }
}

@keyframes gameStatIconBounce {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-4px) scale(1.08); }
}

@keyframes gamePanelFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

@keyframes gamePanelIconSwing {
  0%, 100% { transform: rotate(0deg); }
  40% { transform: rotate(-8deg); }
  70% { transform: rotate(7deg); }
}

@keyframes gameListItemFloat {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(3px); }
}

@keyframes gameGalleryFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

@keyframes gameSearchWiggle {
  0%, 100% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(-9deg) scale(1.08); }
}

@keyframes gameSpeedNoteFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

@keyframes gameSpotlightFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-7px) rotate(.45deg); }
}

@keyframes gamePlayerCardFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

@keyframes gameAvatarBounce {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-4px) scale(1.025); }
}

@keyframes gameSkeletonWave {
  0%, 100% { transform: translateY(0); opacity: .55; }
  50% { transform: translateY(-3px); opacity: .9; }
}

@keyframes gameDockFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

@keyframes gameDockIconBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

@keyframes gameFooterFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}

/* มือถือ: ลดระยะการขยับเพื่อประหยัดพลังงานและไม่เวียนตา */
@media (max-width: 720px) {
  #publicPage.game-motion-page .game-lobby-hero-copy,
  #publicPage.game-motion-page .game-cute-mascot,
  #publicPage.game-motion-page .game-hero-tile,
  #publicPage.game-motion-page #publicStats .stat-card,
  #publicPage.game-motion-page .game-insight-panel,
  #publicPage.game-motion-page .game-player-gallery,
  #publicPage.game-motion-page .game-player-card,
  #publicPage.game-motion-page .game-spotlight-card {
    animation-duration: 5.6s;
  }
}

/* ผู้ใช้ที่ตั้งค่าลดการเคลื่อนไหว: ปิด animation อัตโนมัติ */
@media (prefers-reduced-motion: reduce) {
  #publicPage.game-motion-page *,
  #publicPage.game-motion-page *::before,
  #publicPage.game-motion-page *::after {
    animation: none !important;
  }
}


/* =====================================================
   MOTION V6 — HOVER + BANNER ONLY
   - ยกเลิกการขยับตลอดเวลาของการ์ดและปุ่มทั่วไป
   - ให้ขยับเบา ๆ เฉพาะป้าย/มาสคอตใน Hero Banner
   - ส่วนอื่นตอบสนองเมื่อ Hover หรือกดเท่านั้น
===================================================== */

/* ปิด animation ต่อเนื่องขององค์ประกอบทั่วไป */
#publicPage.game-motion-page :is(
  .game-lobby-brand,
  .game-lobby-brand .school-logo,
  .game-lobby-login .btn,
  .game-lobby-hero-copy,
  .game-lobby-hero h1,
  .game-lobby-hero-copy > p,
  .game-lobby-hero-actions button,
  .game-section-kicker,
  .game-section-head h2,
  .game-gallery-title,
  .game-refresh-btn,
  .game-refresh-btn i,
  #publicStats .stat-card,
  #publicStats .stat-icon,
  .game-insight-panel,
  .game-insight-panel .panel-title i,
  .game-insight-panel .class-item,
  .game-insight-panel .rank-item,
  .game-insight-panel .event-item,
  .game-insight-panel .compact-class-item,
  .game-insight-panel .compact-rank-item,
  .game-insight-panel .compact-positive-item,
  .game-player-gallery,
  .game-show-all-btn,
  .game-load-more-btn,
  .game-search-wrap i,
  .game-gallery-speed-note,
  .game-class-chip-row button,
  .game-spotlight-card,
  .game-player-card,
  .game-player-card img,
  .game-spotlight-card img,
  .game-gallery-skeleton span,
  .game-mobile-dock,
  .game-mobile-dock button i,
  .game-lobby-footer
) {
  animation: none !important;
}

/* ป้ายคำเล็กใน Banner ขยับเบา ๆ */
#publicPage.game-motion-page .game-lobby-live-badge {
  animation: bannerBadgeBreathe 3.8s ease-in-out infinite !important;
}

#publicPage.game-motion-page .game-live-dot {
  animation: bannerLiveDot 1.8s ease-in-out infinite !important;
}

/* ป้ายเก็บดาว / เติมพลัง / อัปแรงค์ */
#publicPage.game-motion-page .cute-chip {
  animation: bannerChipFloat 4.2s ease-in-out infinite !important;
}

#publicPage.game-motion-page .cute-chip:nth-child(2) {
  animation-delay: .55s !important;
}

#publicPage.game-motion-page .cute-chip:nth-child(3) {
  animation-delay: 1.1s !important;
}

#publicPage.game-motion-page .cute-chip i {
  animation: bannerChipIcon 3s ease-in-out infinite !important;
}

/* มาสคอตและป้ายสามใบทางขวา */
#publicPage.game-motion-page .game-cute-mascot {
  animation: bannerMascotFloat 5s ease-in-out infinite !important;
}

#publicPage.game-motion-page .game-mascot-face {
  animation: bannerFaceFloat 4.2s ease-in-out infinite !important;
}

#publicPage.game-motion-page .game-mascot-crown {
  animation: bannerCrownWiggle 3.4s ease-in-out infinite !important;
}

#publicPage.game-motion-page .game-mascot-eye {
  animation: bannerBlink 5.2s linear infinite !important;
}

#publicPage.game-motion-page .game-mascot-smile {
  animation: bannerSmile 4s ease-in-out infinite !important;
}

#publicPage.game-motion-page .game-hero-tile {
  animation: bannerTileFloat 4.8s ease-in-out infinite !important;
}

#publicPage.game-motion-page .game-hero-tile:nth-of-type(2) {
  animation-delay: .4s !important;
}

#publicPage.game-motion-page .game-hero-tile:nth-of-type(3) {
  animation-delay: .8s !important;
}

#publicPage.game-motion-page .game-hero-tile:nth-of-type(4) {
  animation-delay: 1.2s !important;
}

#publicPage.game-motion-page .game-hero-tile i {
  animation: bannerTileIcon 3.2s ease-in-out infinite !important;
}

/* ดาว หัวใจ สายฟ้าใน Banner */
#publicPage.game-motion-page .game-cute-sparkles i {
  animation: bannerSparkleFloat 4s ease-in-out infinite !important;
}

/* ส่วนอื่นขยับเฉพาะตอน Hover */
#publicPage.game-motion-page :is(
  .game-lobby-login .btn,
  .game-lobby-hero-actions button,
  #publicStats .stat-card,
  .game-insight-panel,
  .game-insight-panel .class-item,
  .game-insight-panel .rank-item,
  .game-insight-panel .event-item,
  .game-insight-panel .compact-class-item,
  .game-insight-panel .compact-rank-item,
  .game-insight-panel .compact-positive-item,
  .game-player-gallery,
  .game-player-card,
  .game-spotlight-card,
  .game-show-all-btn,
  .game-load-more-btn,
  .game-class-chip-row button,
  .game-mobile-dock button
) {
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease,
    background-color .18s ease;
}

/* Hover เฉพาะอุปกรณ์ที่มีเมาส์จริง */
@media (hover: hover) and (pointer: fine) {
  #publicPage.game-motion-page :is(
    .game-lobby-login .btn,
    .game-lobby-hero-actions button,
    #publicStats .stat-card,
    .game-insight-panel,
    .game-player-gallery,
    .game-player-card,
    .game-spotlight-card,
    .game-show-all-btn,
    .game-load-more-btn,
    .game-class-chip-row button
  ):hover {
    transform: translateY(-6px) scale(1.012);
  }

  #publicPage.game-motion-page :is(
    .game-insight-panel .class-item,
    .game-insight-panel .rank-item,
    .game-insight-panel .event-item,
    .game-insight-panel .compact-class-item,
    .game-insight-panel .compact-rank-item,
    .game-insight-panel .compact-positive-item
  ):hover {
    transform: translateX(5px);
  }

  #publicPage.game-motion-page .game-refresh-btn:hover i {
    transform: rotate(180deg);
    transition: transform .35s ease;
  }

  /* หยุดการลอยชั่วคราวเมื่อชี้ Banner เพื่อให้กดง่าย */
  #publicPage.game-motion-page :is(
    .game-cute-mascot,
    .game-hero-tile,
    .cute-chip
  ):hover {
    animation-play-state: paused !important;
    transform: translateY(-5px) scale(1.015);
  }
}

/* กดบนมือถือ/แท็บเล็ต */
#publicPage.game-motion-page :is(
  button,
  .game-player-card,
  .game-spotlight-card
):active {
  transform: translateY(2px) scale(.98) !important;
}

/* Animation เฉพาะ Banner */
@keyframes bannerBadgeBreathe {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-2px) scale(1.025); }
}

@keyframes bannerLiveDot {
  0%, 100% { transform: scale(.85); opacity: .65; }
  50% { transform: scale(1.18); opacity: 1; }
}

@keyframes bannerChipFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

@keyframes bannerChipIcon {
  0%, 100% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(-6deg) scale(1.09); }
}

@keyframes bannerMascotFloat {
  0%, 100% { transform: translateY(0) rotate(-1.2deg); }
  50% { transform: translateY(-6px) rotate(.4deg); }
}

@keyframes bannerFaceFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

@keyframes bannerCrownWiggle {
  0%, 100% { transform: rotate(-10deg); }
  50% { transform: rotate(5deg) translateY(-2px); }
}

@keyframes bannerBlink {
  0%, 45%, 49%, 100% { transform: scaleY(1); }
  47% { transform: scaleY(.12); }
}

@keyframes bannerSmile {
  0%, 100% { transform: translateX(-50%) scaleX(1); }
  50% { transform: translateX(-50%) scaleX(1.08); }
}

@keyframes bannerTileFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

@keyframes bannerTileIcon {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-3px) scale(1.06); }
}

@keyframes bannerSparkleFloat {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-7px) rotate(4deg); }
}

/* มือถือ: ลดระยะและความเร็วการขยับของ Banner */
@media (max-width: 720px) {
  #publicPage.game-motion-page .game-cute-mascot,
  #publicPage.game-motion-page .game-hero-tile,
  #publicPage.game-motion-page .cute-chip {
    animation-duration: 5.8s !important;
  }
}

/* ผู้ใช้ที่ปิด Motion ในระบบปฏิบัติการ */
@media (prefers-reduced-motion: reduce) {
  #publicPage.game-motion-page *,
  #publicPage.game-motion-page *::before,
  #publicPage.game-motion-page *::after {
    animation: none !important;
    transition-duration: .001ms !important;
  }
}



/* =====================================================
   DARKER FIXED BACKGROUND V10
   พื้นหลังเข้มขึ้น แต่การ์ดและข้อความยังอ่านง่าย
===================================================== */

#publicPage.index-game-lobby.has-fixed-page-background
:is(
  .game-insight-panel,
  .game-player-gallery,
  #publicStats .stat-card
) {
  background-color: rgba(255, 255, 255, .93) !important;
}

#publicPage.index-game-lobby.has-fixed-page-background
.game-section-head,
#publicPage.index-game-lobby.has-fixed-page-background
.game-gallery-head {
  text-shadow: 0 2px 10px rgba(255, 255, 255, .58);
}

#publicPage.index-game-lobby.has-fixed-page-background
.game-lobby-footer {
  background: rgba(255, 255, 255, .88);
  border-radius: 18px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}


/* =====================================================
   STUDENT PLAYER HUB V11 — FAST / CUTE / MOBILE
   - ธีมเดียวกับหน้า Index
   - โหลด E-Portfolio และประวัติคะแนนเมื่อกด
   - ภาพพื้นหลังล็อกกับ viewport
===================================================== */

#studentPage.student-game-page {
  --player-purple:#6c63ff;
  --player-purple-dark:#5148d8;
  --player-pink:#ff70a6;
  --player-yellow:#ffd166;
  --player-green:#59d9a7;
  --player-blue:#55c7f3;
  --player-ink:#27304c;
  --player-muted:#6e7691;
  position:relative;
  isolation:isolate;
  min-height:100vh;
  overflow-x:clip;
  background:transparent!important;
}

#studentPage.student-game-page::before {
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-color:#28325d;
  background-image:
    linear-gradient(rgba(25,34,78,.52),rgba(38,31,94,.60)),
    var(--student-page-background);
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center center;
  transform:translateZ(0);
}

#studentPage.student-game-page > * {position:relative;z-index:1}
#studentPage .student-game-decoration{display:none!important}
#studentPage .student-player-hub{min-height:100vh;background:transparent!important;color:var(--player-ink)}

#studentPage .student-player-topbar {
  position:sticky;
  top:0;
  z-index:80;
  min-height:72px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:10px 22px;
  background:rgba(255,255,255,.92)!important;
  border-bottom:1px solid rgba(220,215,255,.92);
  box-shadow:0 10px 28px rgba(31,36,86,.12);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}

#studentPage .student-player-topbar-brand,
#studentPage .student-player-topbar-actions {display:flex;align-items:center;gap:10px;min-width:0}
#studentPage .student-player-school-logo{width:48px;height:48px;flex:0 0 48px;display:grid;place-items:center;padding:5px;border:2px solid #dcd7ff;border-radius:16px;background:#fff;box-shadow:0 4px 0 #cbc5ff}
#studentPage .student-player-school-logo img{width:100%;height:100%;object-fit:contain}
#studentPage .student-player-topbar-copy{min-width:0}
#studentPage .student-player-topbar-copy>span{display:block;color:var(--player-purple);font-size:13px;font-weight:1000;letter-spacing:.7px}
#studentPage .student-hero-inline-profile strong{display:block;max-width:44vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#27214d;font-size:16px;font-weight:1000}
#studentPage .student-hero-inline-profile strong small{color:#746ca0;font-size:13px}
#studentPage .student-hero-inline-profile>span{display:block;color:#7d849c;font-size:13px;font-weight:700}
#studentPage .student-player-topbar-actions .btn{min-height:44px;border-radius:15px}

#studentPage .student-player-container{width:min(1240px,calc(100% - 28px));margin:20px auto 34px;padding:0}

#studentPage .student-player-profile-card{
  position:relative;
  overflow:hidden;
  border:4px solid rgba(255,255,255,.96);
  border-radius:32px;
  padding:24px;
  background:#6c63ff;
  box-shadow:0 13px 0 rgba(207,201,255,.95),0 28px 58px rgba(23,29,75,.26);
}
#studentPage .student-player-profile-pattern{position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(circle at 18px 18px,rgba(255,255,255,.15) 2px,transparent 2.5px);background-size:30px 30px;opacity:.72}
#studentPage .student-player-profile-pattern::before,#studentPage .student-player-profile-pattern::after{content:"";position:absolute;border:3px solid rgba(255,255,255,.14);border-radius:28px;transform:rotate(12deg)}
#studentPage .student-player-profile-pattern::before{width:160px;height:160px;right:-52px;top:-52px}
#studentPage .student-player-profile-pattern::after{width:120px;height:120px;left:45%;bottom:-72px}

#studentPage .student-player-profile-main{position:relative;z-index:2;display:grid;grid-template-columns:150px minmax(0,1fr) minmax(310px,.9fr);gap:22px;align-items:center}
#studentPage .student-player-avatar-frame{position:relative;width:142px;height:142px;padding:7px;border:4px solid #fff;border-radius:34px;background:#fff8df;box-shadow:0 9px 0 rgba(55,48,142,.30)}
#studentPage .student-player-avatar-frame img{width:100%;height:100%;object-fit:cover;border-radius:24px;background:#fff}
#studentPage .student-player-online-dot{position:absolute;right:5px;bottom:7px;width:23px;height:23px;border:4px solid #fff;border-radius:50%;background:#41d990;box-shadow:0 3px 8px rgba(18,80,58,.25)}
#studentPage .student-player-label{display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border:2px solid rgba(255,255,255,.94);border-radius:999px;background:#ffd166;color:#3d357d;font-size:13px;font-weight:1000;box-shadow:0 4px 0 rgba(47,42,113,.20)}
#studentPage .student-player-identity h1{margin:13px 0 4px;color:#fff;font-size:clamp(28px,4vw,45px);line-height:1.05;text-shadow:0 4px 14px rgba(24,25,87,.30)}
#studentPage .student-player-identity h1 small{display:inline-flex;margin-left:9px;padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.17);font-size:14px;vertical-align:middle}
#studentPage .student-player-identity p{margin:0;color:#e9e7ff;font-size:14px;font-weight:700}
#studentPage .student-player-chip-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:15px}
#studentPage .student-player-chip{display:inline-flex;align-items:center;gap:7px;min-height:35px;padding:7px 11px;border:2px solid rgba(255,255,255,.88);border-radius:999px;background:rgba(255,255,255,.15);color:#fff;font-size:13px;font-weight:900}
#studentPage .student-player-chip-yellow{background:#ffd166;color:#3d357d}
#studentPage .student-player-chip-yellow.is-clear{background:#c9f7e6;color:#17684e}

#studentPage .student-player-rank-zone{min-width:0;padding:16px;border:3px solid rgba(255,255,255,.80);border-radius:25px;background:rgba(255,255,255,.14);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
#studentPage .student-player-rank-title span,#studentPage .student-player-rank-title strong{display:block}
#studentPage .student-player-rank-title span{color:#dcd8ff;font-size:13px;font-weight:1000;letter-spacing:.7px}
#studentPage .student-player-rank-title strong{color:#fff;font-size:18px}
#studentPage .student-player-rank-box{margin-top:10px}
#studentPage .student-player-rank-box .student-rank-slim-card{background:#fff!important;border:0!important;border-radius:20px!important;box-shadow:0 7px 0 rgba(52,46,136,.25)!important}

#studentPage .student-player-stat-grid{position:relative;z-index:3;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:22px}
#studentPage .student-player-stat-card{min-width:0;display:flex;align-items:center;gap:12px;padding:14px;border:3px solid #fff;border-radius:21px;background:#fff;box-shadow:0 7px 0 rgba(57,49,142,.23);transition:transform .18s ease,box-shadow .18s ease}
#studentPage .student-player-stat-icon{width:48px;height:48px;flex:0 0 48px;display:grid;place-items:center;border-radius:16px;color:#3b348e;font-size:20px;background:#efedff}
#studentPage .student-player-stat-card strong,#studentPage .student-player-stat-card small{display:block}
#studentPage .student-player-stat-card strong{color:#28214d;font-size:25px;line-height:1}
#studentPage .student-player-stat-card small{margin-top:5px;color:#777f99;font-size:13px;font-weight:800}
#studentPage .student-player-stat-card.tone-pink .student-player-stat-icon{background:#ffe0ec;color:#d93f7d}
#studentPage .student-player-stat-card.tone-yellow .student-player-stat-icon{background:#fff1c8;color:#b97500}
#studentPage .student-player-stat-card.tone-green .student-player-stat-icon{background:#d5f8eb;color:#16825f}

#studentPage .student-player-overview-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:16px;margin-top:24px}
#studentPage .student-player-mini-panel{min-width:0;padding:18px;border:3px solid #fff;border-radius:26px;background:rgba(255,255,255,.94);box-shadow:0 8px 0 rgba(222,218,255,.96),0 18px 35px rgba(36,42,94,.10);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
#studentPage .student-player-mini-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
#studentPage .student-player-mini-head span{display:block;color:var(--player-purple);font-size:13px;font-weight:1000;letter-spacing:.7px}
#studentPage .student-player-mini-head h2{margin:1px 0 0;color:#2d2852;font-size:20px}
#studentPage .student-player-mini-head>i{width:45px;height:45px;display:grid;place-items:center;border-radius:16px;background:#efedff;color:var(--player-purple);font-size:20px}
#studentPage .student-player-shortcuts{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
#studentPage .student-player-shortcuts button{min-width:0;min-height:94px;display:grid;place-items:center;align-content:center;gap:7px;border:2px solid #e2defe;border-radius:19px;background:#f8f7ff;color:#59517e;font-family:'Sarabun',sans-serif;font-size:13px;font-weight:900;transition:.18s}
#studentPage .student-player-shortcuts button i{font-size:22px;color:var(--player-purple)}

#studentPage .student-game-command-center{margin-top:24px!important;border:3px solid #fff!important;border-radius:29px!important;background:rgba(255,255,255,.95)!important;box-shadow:0 9px 0 rgba(218,213,255,.98),0 22px 42px rgba(35,42,95,.12)!important;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
#studentPage .student-game-panel-head p{margin:4px 0 0;color:#7a8198!important}
#studentPage .student-game-tabbar{border-radius:20px;background:#f3f1ff}
#studentPage .eport-tab{min-height:46px;border-radius:15px!important}
#studentPage .eport-tab.active{background:var(--player-purple)!important;color:#fff!important;box-shadow:0 5px 0 var(--player-purple-dark)!important}
#studentPage .score-box-v3,#studentPage .eport-profile-card,#studentPage .eport-form-card,#studentPage .eport-achievement-editor{border:2px solid #e7e3ff!important;border-radius:23px!important;background:#fff!important;box-shadow:0 8px 22px rgba(48,52,110,.07)!important}
#studentPage .student-load-more-history{width:100%;min-height:46px;margin-top:11px;border:2px solid #dcd7ff;border-radius:16px;background:#f2f0ff;color:#5a50b9;font-family:'Sarabun',sans-serif;font-weight:900;transition:.18s}
#studentPage .student-load-more-history:disabled{opacity:.65}

@media (hover:hover) and (pointer:fine){
  #studentPage .student-player-stat-card:hover,#studentPage .student-player-mini-panel:hover{transform:translateY(-5px)}
  #studentPage .student-player-shortcuts button:hover,#studentPage .student-load-more-history:hover{transform:translateY(-3px);border-color:#afa6ff;background:#fff}
}

@media (max-width:980px){
  #studentPage .student-player-profile-main{grid-template-columns:125px minmax(0,1fr)}
  #studentPage .student-player-avatar-frame{width:118px;height:118px;border-radius:28px}
  #studentPage .student-player-rank-zone{grid-column:1/-1}
  #studentPage .student-player-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:720px){
  #studentPage.student-game-page::before{background-position:68% center;background-image:linear-gradient(rgba(25,34,78,.62),rgba(38,31,94,.70)),var(--student-page-background)}
  #studentPage .student-player-topbar{padding:calc(8px + env(safe-area-inset-top)) 11px 9px;flex-wrap:wrap}
  #studentPage .student-player-topbar-brand{flex:1 1 auto}
  #studentPage .student-player-school-logo{width:43px;height:43px;flex-basis:43px;border-radius:14px}
  #studentPage .student-player-topbar-copy>span{font-size:13px}
  #studentPage .student-hero-inline-profile strong{max-width:56vw;font-size:14px}
  #studentPage .student-hero-inline-profile>span{font-size:13px}
  #studentPage .student-player-topbar-actions{width:100%;display:grid;grid-template-columns:1fr 1fr}
  #studentPage .student-player-topbar-actions #rankSeasonStudentBox{display:none}
  #studentPage .student-player-topbar-actions .btn{width:100%;min-height:43px;font-size:13px}
  #studentPage .student-player-container{width:calc(100% - 18px);margin-top:12px}
  #studentPage .student-player-profile-card{padding:18px 14px;border-width:3px;border-radius:27px;box-shadow:0 9px 0 rgba(207,201,255,.95),0 20px 42px rgba(23,29,75,.24)}
  #studentPage .student-player-profile-main{grid-template-columns:1fr;text-align:center;gap:14px}
  #studentPage .student-player-avatar-frame{width:120px;height:120px;margin:auto}
  #studentPage .student-player-label{margin:auto}
  #studentPage .student-player-identity h1{font-size:30px}
  #studentPage .student-player-identity h1 small{display:block;width:max-content;margin:7px auto 0}
  #studentPage .student-player-chip-row{justify-content:center;flex-wrap:nowrap;overflow-x:auto;padding:3px 2px 7px;scrollbar-width:none}
  #studentPage .student-player-chip-row::-webkit-scrollbar{display:none}
  #studentPage .student-player-chip{flex:0 0 auto}
  #studentPage .student-player-rank-zone{text-align:left;padding:13px}
  #studentPage .student-player-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:17px}
  #studentPage .student-player-stat-card{display:grid;justify-items:center;text-align:center;gap:7px;padding:12px 8px;border-radius:18px}
  #studentPage .student-player-stat-icon{width:42px;height:42px;flex-basis:42px;border-radius:14px}
  #studentPage .student-player-stat-card strong{font-size:22px}
  #studentPage .student-player-overview-grid{grid-template-columns:1fr;gap:13px;margin-top:19px}
  #studentPage .student-player-mini-panel{padding:15px;border-radius:23px}
  #studentPage .student-player-shortcuts button{min-height:82px}
  #studentPage .student-game-command-center{margin-top:19px!important;padding:15px!important;border-radius:25px!important}
  #studentPage .student-game-panel-head{align-items:flex-start!important}
  #studentPage .student-game-panel-head p{font-size:13px}
}

@media (max-width:359px){
  #studentPage .student-player-stat-grid{grid-template-columns:1fr}
  #studentPage .student-player-shortcuts{grid-template-columns:1fr}
  #studentPage .student-player-shortcuts button{min-height:58px;grid-template-columns:30px 1fr;justify-content:start;text-align:left;padding:9px 14px}
}

@media (prefers-reduced-motion:reduce){#studentPage *{transition:none!important;animation:none!important}}


/* =====================================================
   PLAYER PHOTO FAST LOAD V12
   โหลดรูปโปรไฟล์ตั้งแต่ Dashboard ชุดแรก
   ระหว่างรอใช้ Skeleton แทนโลโก้โรงเรียน
===================================================== */

#studentPage .student-player-avatar-frame {
  overflow: hidden;
  isolation: isolate;
}

#studentPage .student-player-avatar-placeholder {
  position: absolute;
  inset: 7px;
  z-index: 1;
  display: grid;
  place-items: center;
  border-radius: 24px;
  overflow: hidden;
  color: rgba(74, 66, 154, .52);
  background:
    linear-gradient(
      105deg,
      rgba(239, 237, 255, .94) 22%,
      rgba(255, 255, 255, .98) 42%,
      rgba(232, 228, 255, .94) 62%
    );
  background-size: 240% 100%;
  font-size:42px;
  transition: opacity .22s ease, visibility .22s ease;
}

#studentPage .student-player-avatar-frame.is-loading
.student-player-avatar-placeholder {
  animation: studentPhotoSkeleton 1.05s linear infinite;
}

#studentPage .student-player-avatar-frame.is-loaded
.student-player-avatar-placeholder,
#studentPage .student-player-avatar-frame.is-fallback
.student-player-avatar-placeholder {
  opacity: 0;
  visibility: hidden;
  animation: none;
}

#studentPage .student-player-avatar-frame img {
  position: relative;
  z-index: 2;
  opacity: 0;
  transform: scale(1.025);
  transition: opacity .24s ease, transform .32s ease;
}

#studentPage .student-player-avatar-frame img.is-visible {
  opacity: 1;
  transform: scale(1);
}

#studentPage .student-player-avatar-frame.is-fallback img {
  object-fit: contain;
  padding: 13px;
  background: rgba(255, 255, 255, .96);
}

#studentPage .student-player-avatar-frame
.student-player-online-dot {
  z-index: 4;
}

@keyframes studentPhotoSkeleton {
  from { background-position: 115% 0; }
  to   { background-position: -115% 0; }
}

@media (prefers-reduced-motion: reduce) {
  #studentPage .student-player-avatar-frame.is-loading
  .student-player-avatar-placeholder {
    animation: none;
  }

  #studentPage .student-player-avatar-frame img {
    transition: none;
  }
}



/* ============================================================
   MY AVATAR + GOOD COIN SHOP — PHASE 1
   Scope เฉพาะหน้า Student
============================================================ */

#studentPage .avatar-main-tab {
  color: #593dc4;
  border-color: #d8ccff;
  background: #f4f0ff;
}

#studentPage .avatar-main-tab.active {
  color: #ffffff;
  border-color: #6c55e8;
  background: #6c55e8;
}

#studentPage .avatar-page-v1 {
  display: grid;
  gap: 16px;
}

#studentPage .avatar-loading-card {
  min-height: 220px;
  padding: 28px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 9px;
  border: 2px dashed #cabef5;
  border-radius: 24px;
  color: #6a5c92;
  background: rgba(248, 246, 255, .94);
  text-align: center;
}

#studentPage .avatar-loading-card > i {
  color: #6c55e8;
  font-size:34px;
}

#studentPage .avatar-loading-card strong {
  color: #2d2350;
  font-size:20px;
  font-weight: 900;
}

#studentPage .avatar-loading-card span {
  font-size:13px;
}

#studentPage .avatar-loading-card .btn {
  margin-top: 10px;
}

#studentPage .avatar-hero-grid {
  display: grid;
  grid-template-columns: minmax(340px, .88fr) minmax(0, 1.12fr);
  gap: 16px;
  align-items: stretch;
}

#studentPage .avatar-preview-card,
#studentPage .avatar-player-card,
#studentPage .avatar-config-panel,
#studentPage .avatar-shop-panel,
#studentPage .avatar-transaction-panel {
  border: 1px solid rgba(215, 207, 245, .95);
  border-radius: 25px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 15px 38px rgba(41, 30, 84, .10);
}

#studentPage .avatar-preview-card,
#studentPage .avatar-player-card {
  padding: 18px;
}

#studentPage .avatar-preview-card {
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 5%, rgba(255, 215, 106, .22), transparent 24%),
    radial-gradient(circle at 96% 15%, rgba(126, 215, 255, .25), transparent 27%),
    rgba(255, 255, 255, .97);
}

#studentPage .avatar-preview-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

#studentPage .avatar-preview-head span,
#studentPage .avatar-player-head > div:last-child > span,
#studentPage .avatar-section-head > div > span {
  display: block;
  color: #76699a;
  font-size:13px;
  font-weight: 900;
  letter-spacing: 1px;
}

#studentPage .avatar-preview-head h3,
#studentPage .avatar-player-head h3,
#studentPage .avatar-section-head h3 {
  margin: 3px 0 0;
  color: #291f4d;
  font-size:22px;
  font-weight: 900;
}

#studentPage .avatar-rank-pill {
  max-width: 170px;
  padding: 7px 11px;
  overflow: hidden;
  border-radius: 999px;
  color: #ffffff;
  background: #64748b;
  box-shadow: 0 5px 13px rgba(35, 27, 75, .16);
  font-size:13px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#studentPage .avatar-character-stage {
  --avatar-glow: #ffd45c;
  position: relative;
  min-height: 330px;
  margin-top: 13px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 3px solid #ffffff;
  border-radius: 25px;
  background:
    linear-gradient(rgba(255,255,255,.10), rgba(255,255,255,.10)),
    repeating-linear-gradient(
      0deg,
      rgba(108, 85, 232, .05) 0,
      rgba(108, 85, 232, .05) 1px,
      transparent 1px,
      transparent 34px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(108, 85, 232, .05) 0,
      rgba(108, 85, 232, .05) 1px,
      transparent 1px,
      transparent 34px
    ),
    #f2efff;
  box-shadow:
    inset 0 0 0 1px #ded7f7,
    0 8px 0 #d5ccef;
}

#studentPage .avatar-character-stage::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 22px;
  width: 180px;
  height: 35px;
  border-radius: 50%;
  background: rgba(48, 35, 94, .14);
  filter: blur(3px);
  transform: translateX(-50%);
}

#studentPage .avatar-aura-visual {
  position: absolute;
  z-index: 1;
  width: 230px;
  height: 230px;
  border: 12px solid transparent;
  border-radius: 50%;
  opacity: 0;
  transform: scale(.7);
  transition: .2s ease;
}

#studentPage .avatar-aura-visual.is-active {
  opacity: 1;
  border-color: color-mix(in srgb, var(--avatar-glow) 62%, white);
  box-shadow:
    0 0 22px var(--avatar-glow),
    inset 0 0 25px var(--avatar-glow);
  animation: avatarAuraPulse 1.9s ease-in-out infinite;
}

@keyframes avatarAuraPulse {
  0%, 100% { transform: scale(.88); opacity: .58; }
  50% { transform: scale(1); opacity: .92; }
}

#studentPage .avatar-character {
  --avatar-primary: #ff6b6b;
  --avatar-secondary: #ffca5c;
  --avatar-skin: #f1bd91;
  --avatar-hair: #2d2430;
  position: relative;
  z-index: 3;
  width: 186px;
  height: 265px;
  display: flex;
  flex-direction: column;
  align-items: center;
  filter: drop-shadow(0 15px 14px rgba(37, 28, 73, .20));
  transform: translateY(-3px);
}

#studentPage .avatar-character.skin-1 { --avatar-skin: #ffd0ad; }
#studentPage .avatar-character.skin-2 { --avatar-skin: #f1bd91; }
#studentPage .avatar-character.skin-3 { --avatar-skin: #d99c70; }
#studentPage .avatar-character.skin-4 { --avatar-skin: #b97951; }
#studentPage .avatar-character.skin-5 { --avatar-skin: #855032; }

#studentPage .avatar-character.hair-color-1 { --avatar-hair: #27222d; }
#studentPage .avatar-character.hair-color-2 { --avatar-hair: #6f432d; }
#studentPage .avatar-character.hair-color-3 { --avatar-hair: #e0af47; }
#studentPage .avatar-character.hair-color-4 { --avatar-hair: #7448a8; }
#studentPage .avatar-character.hair-color-5 { --avatar-hair: #348bc2; }
#studentPage .avatar-character.hair-color-6 { --avatar-hair: #df689c; }

#studentPage .avatar-character-head {
  position: relative;
  z-index: 5;
  width: 104px;
  height: 94px;
  flex: 0 0 94px;
}

#studentPage .avatar-character-face {
  position: absolute;
  inset: 11px 7px 0;
  display: block;
  border: 4px solid rgba(255,255,255,.85);
  border-radius: 29px 29px 25px 25px;
  background: var(--avatar-skin);
  box-shadow: 0 6px 0 rgba(77, 48, 54, .18);
}

#studentPage .avatar-character-hair {
  position: absolute;
  z-index: 3;
  left: 7px;
  top: 0;
  width: 90px;
  height: 43px;
  border-radius: 28px 28px 15px 15px;
  background: var(--avatar-hair);
  box-shadow: inset 0 -5px 0 rgba(255,255,255,.08);
}

#studentPage .avatar-character.hair-2 .avatar-character-hair {
  clip-path: polygon(0 30%, 12% 0, 24% 25%, 40% 0, 55% 25%, 72% 0, 87% 25%, 100% 6%, 100% 100%, 0 100%);
}

#studentPage .avatar-character.hair-3 .avatar-character-hair {
  width: 96px;
  transform: rotate(-6deg);
  border-radius: 30px 18px 24px 16px;
}

#studentPage .avatar-character.hair-4 .avatar-character-hair {
  left: 2px;
  width: 100px;
  height: 76px;
  border-radius: 34px 34px 22px 22px;
}

#studentPage .avatar-character.hair-5 .avatar-character-hair {
  clip-path: polygon(0 42%, 13% 10%, 28% 38%, 43% 0, 57% 38%, 73% 10%, 87% 42%, 100% 13%, 100% 100%, 0 100%);
}

#studentPage .avatar-eye {
  position: absolute;
  top: 43px;
  width: 9px;
  height: 13px;
  border-radius: 6px;
  background: #332538;
  box-shadow: inset 2px 2px 0 rgba(255,255,255,.35);
}

#studentPage .avatar-eye-left { left: 25px; }
#studentPage .avatar-eye-right { right: 25px; }

#studentPage .avatar-mouth {
  position: absolute;
  left: 50%;
  bottom: 13px;
  width: 25px;
  height: 12px;
  border-bottom: 4px solid #a5525d;
  border-radius: 0 0 20px 20px;
  transform: translateX(-50%);
}

#studentPage .avatar-character-body {
  position: relative;
  z-index: 4;
  width: 166px;
  height: 116px;
  display: grid;
  grid-template-columns: 35px 96px 35px;
  align-items: start;
  margin-top: -1px;
}

#studentPage .avatar-torso {
  position: relative;
  z-index: 3;
  height: 116px;
  display: grid;
  place-items: center;
  border: 5px solid rgba(255,255,255,.84);
  border-radius: 25px 25px 18px 18px;
  background:
    linear-gradient(135deg, var(--avatar-primary), var(--avatar-secondary));
  box-shadow: 0 7px 0 rgba(49, 35, 83, .20);
}

#studentPage .avatar-torso::before {
  content: "";
  position: absolute;
  top: 13px;
  left: 50%;
  width: 48px;
  height: 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.28);
  transform: translateX(-50%);
}

#studentPage .avatar-torso i {
  color: rgba(255,255,255,.92);
  font-size:28px;
  filter: drop-shadow(0 3px 0 rgba(62, 45, 86, .18));
}

#studentPage .avatar-arm {
  height: 94px;
  margin-top: 10px;
  border: 4px solid rgba(255,255,255,.82);
  border-radius: 17px;
  background:
    linear-gradient(
      to bottom,
      var(--avatar-primary) 0,
      var(--avatar-primary) 58%,
      var(--avatar-skin) 58%,
      var(--avatar-skin) 100%
    );
  box-shadow: 0 6px 0 rgba(51, 36, 85, .16);
}

#studentPage .avatar-arm-left { transform: rotate(7deg); }
#studentPage .avatar-arm-right { transform: rotate(-7deg); }

#studentPage .avatar-character-legs {
  z-index: 3;
  width: 92px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: -2px;
}

#studentPage .avatar-character-legs span {
  height: 61px;
  border: 4px solid rgba(255,255,255,.84);
  border-radius: 9px 9px 14px 14px;
  background: #3e4164;
  box-shadow: 0 6px 0 rgba(47, 35, 76, .18);
}

#studentPage .avatar-weapon-visual {
  --weapon-primary: #ffffff;
  --weapon-secondary: #ffd45c;
  position: absolute;
  z-index: 8;
  right: -9px;
  top: 116px;
  width: 53px;
  height: 82px;
  display: grid;
  place-items: center;
  border: 4px solid rgba(255,255,255,.88);
  border-radius: 17px;
  color: #45356f;
  background:
    linear-gradient(145deg, var(--weapon-primary), var(--weapon-secondary));
  box-shadow: 0 7px 0 rgba(52, 37, 89, .18);
  transform: rotate(-12deg);
}

#studentPage .avatar-weapon-visual i {
  font-size:26px;
}

#studentPage .avatar-accessory-front {
  position: absolute;
  z-index: 9;
  left: 50%;
  top: -13px;
  min-width: 38px;
  min-height: 38px;
  display: grid;
  place-items: center;
  font-size:29px;
  filter: drop-shadow(0 4px 0 rgba(62, 46, 86, .19));
  transform: translateX(-50%);
}

#studentPage .avatar-accessory-back {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 96px;
  width: 230px;
  display: flex;
  justify-content: space-between;
  color: #dff6ff;
  font-size:77px;
  filter: drop-shadow(0 7px 0 rgba(52, 40, 94, .13));
  transform: translateX(-50%);
}

#studentPage .avatar-accessory-back i:first-child {
  transform: rotate(-30deg) scaleX(-1);
}

#studentPage .avatar-accessory-back i:last-child {
  transform: rotate(30deg);
}

#studentPage .avatar-equipped-summary {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

#studentPage .avatar-equipped-summary > div {
  min-width: 0;
  padding: 9px;
  border: 1px solid #e3ddf5;
  border-radius: 13px;
  background: #f8f6ff;
}

#studentPage .avatar-equipped-summary span {
  display: block;
  color: #81759d;
  font-size:13px;
  font-weight: 800;
}

#studentPage .avatar-equipped-summary strong {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color: #352a56;
  font-size:13px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#studentPage .avatar-cosmetic-note,
#studentPage .avatar-wallet-rule {
  margin-top: 10px;
  padding: 9px 11px;
  display: flex;
  align-items: flex-start;
  gap: 7px;
  border-radius: 13px;
  color: #655a7f;
  background: #f5f2ff;
  font-size:13px;
  font-weight: 700;
  line-height: 1.45;
}

#studentPage .avatar-player-card {
  display: flex;
  flex-direction: column;
}

#studentPage .avatar-player-head {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

#studentPage .avatar-player-icon {
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  border: 3px solid #ffffff;
  border-radius: 19px;
  color: #ffffff;
  background: linear-gradient(145deg, #765eea, #9f83ff);
  box-shadow: 0 6px 0 #4e3cb2;
  font-size:25px;
}

#studentPage .avatar-player-head p {
  margin: 5px 0 0;
  color: #71678c;
  font-size:13px;
  line-height: 1.5;
}

#studentPage .avatar-wallet-grid {
  margin-top: 17px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

#studentPage .avatar-wallet-card {
  min-height: 88px;
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 9px;
  border: 2px solid #ffffff;
  border-radius: 17px;
  box-shadow: 0 5px 0 rgba(55, 41, 94, .13);
}

#studentPage .avatar-wallet-card > i {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #33284d;
  background: rgba(255,255,255,.66);
  font-size:16px;
}

#studentPage .avatar-wallet-card strong {
  display: block;
  color: #2c2348;
  font-size:23px;
  line-height: 1;
  font-weight: 900;
}

#studentPage .avatar-wallet-card span {
  display: block;
  margin-top: 4px;
  color: #695f81;
  font-size:13px;
  font-weight: 800;
}

#studentPage .avatar-wallet-card.coin { background: #ffe48c; }
#studentPage .avatar-wallet-card.lifetime { background: #ffc5da; }
#studentPage .avatar-wallet-card.power { background: #bfe1ff; }

#studentPage .avatar-wallet-rule {
  color: #176b50;
  background: #e6fbf3;
}

#studentPage .avatar-job-skill {
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid #e0d9f4;
  border-radius: 16px;
  background: #faf8ff;
}

#studentPage .avatar-job-skill span {
  display: block;
  color: #83769e;
  font-size:13px;
  font-weight: 800;
}

#studentPage .avatar-job-skill strong {
  display: block;
  margin-top: 3px;
  color: #3a2e62;
  font-size:17px;
  font-weight: 900;
}

#studentPage .avatar-job-stats {
  margin-top: 14px;
  display: grid;
  gap: 8px;
}

#studentPage .avatar-stat-row {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr) 30px;
  align-items: center;
  gap: 8px;
}

#studentPage .avatar-stat-row > span {
  color: #685e80;
  font-size:13px;
  font-weight: 900;
}

#studentPage .avatar-stat-row > div {
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: #ece8f7;
}

#studentPage .avatar-stat-row > div i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #6c55e8, #53c7ff);
}

#studentPage .avatar-stat-row > strong {
  color: #382d59;
  font-size:13px;
  font-weight: 900;
  text-align: right;
}

#studentPage .avatar-config-panel,
#studentPage .avatar-shop-panel,
#studentPage .avatar-transaction-panel {
  padding: 18px;
}

#studentPage .avatar-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
}

#studentPage .avatar-section-head p {
  margin: 4px 0 0;
  color: #756b8f;
  font-size:13px;
}

#studentPage .avatar-section-head.compact {
  margin-bottom: 11px;
}

#studentPage .avatar-save-btn {
  min-height: 43px;
  border-radius: 14px;
}

#studentPage .avatar-job-selector {
  margin-top: 15px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 9px;
}

#studentPage .avatar-job-card {
  --job-primary: #6c55e8;
  --job-secondary: #ffd45c;
  min-height: 112px;
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border: 2px solid #e2dcf5;
  border-radius: 18px;
  color: #4f456c;
  background: #faf9ff;
  cursor: pointer;
  transition: .16s ease;
}

#studentPage .avatar-job-card:hover {
  transform: translateY(-2px);
  border-color: var(--job-primary);
}

#studentPage .avatar-job-card.active {
  color: #ffffff;
  border-color: var(--job-primary);
  background:
    linear-gradient(145deg, var(--job-primary), var(--job-secondary));
  box-shadow: 0 6px 0 color-mix(in srgb, var(--job-primary) 72%, #2b214f);
  transform: translateY(-2px);
}

#studentPage .avatar-job-card-icon {
  width: 41px;
  height: 41px;
  display: grid;
  place-items: center;
  margin-bottom: 4px;
  border-radius: 13px;
  color: var(--job-primary);
  background: #ffffff;
  box-shadow: 0 4px 0 rgba(48, 35, 83, .12);
  font-size:18px;
}

#studentPage .avatar-job-card strong {
  font-size:13px;
  font-weight: 900;
}

#studentPage .avatar-job-card small {
  font-size:13px;
  font-weight: 700;
}

#studentPage .avatar-appearance-grid {
  margin-top: 13px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

#studentPage .avatar-appearance-grid label > span {
  display: block;
  margin-bottom: 5px;
  color: #51466b;
  font-size:13px;
  font-weight: 800;
}

#studentPage .avatar-appearance-grid .input {
  min-height: 43px;
  border-radius: 13px;
}

#studentPage .avatar-shop-heading {
  align-items: center;
}

#studentPage .avatar-mode-switch {
  padding: 4px;
  display: flex;
  gap: 4px;
  border: 1px solid #e1dbf3;
  border-radius: 14px;
  background: #f5f2ff;
}

#studentPage .avatar-mode-switch button {
  min-height: 36px;
  padding: 7px 11px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  border-radius: 10px;
  color: #625779;
  background: transparent;
  font-size:13px;
  font-weight: 900;
  cursor: pointer;
}

#studentPage .avatar-mode-switch button.active {
  color: #ffffff;
  background: #6c55e8;
}

#studentPage .avatar-shop-toolbar {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

#studentPage .avatar-shop-toolbar button {
  min-height: 35px;
  padding: 7px 11px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #ddd6f2;
  border-radius: 11px;
  color: #625878;
  background: #faf9ff;
  font-size:13px;
  font-weight: 900;
  cursor: pointer;
}

#studentPage .avatar-shop-toolbar button.active {
  color: #ffffff;
  border-color: #6c55e8;
  background: #6c55e8;
}

#studentPage .avatar-item-grid {
  margin-top: 13px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

#studentPage .avatar-item-card {
  --item-primary: #6c55e8;
  --item-secondary: #ffd45c;
  min-width: 0;
  min-height: 238px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  border: 2px solid #e4def3;
  border-radius: 19px;
  background: #faf9ff;
  transition: .16s ease;
}

#studentPage .avatar-item-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--item-primary) 55%, #ddd6f2);
  box-shadow: 0 10px 25px rgba(47, 34, 87, .10);
}

#studentPage .avatar-item-card.owned {
  background:
    linear-gradient(rgba(255,255,255,.88), rgba(255,255,255,.88)),
    linear-gradient(145deg, var(--item-primary), var(--item-secondary));
}

#studentPage .avatar-item-card.is-equipped {
  border-color: #4fc79a;
  box-shadow: inset 0 0 0 2px #d8f8eb;
}

#studentPage .avatar-item-icon {
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  align-self: center;
  border: 4px solid #ffffff;
  border-radius: 21px;
  color: #ffffff;
  background:
    linear-gradient(145deg, var(--item-primary), var(--item-secondary));
  box-shadow: 0 6px 0 rgba(54, 39, 92, .17);
  font-size:27px;
}

#studentPage .avatar-item-copy {
  margin-top: 12px;
  min-width: 0;
  text-align: center;
}

#studentPage .avatar-item-copy span {
  display: block;
  color: #84799c;
  font-size:13px;
  font-weight: 900;
  letter-spacing: .7px;
}

#studentPage .avatar-item-copy strong {
  display: block;
  min-height: 38px;
  margin-top: 3px;
  color: #352a57;
  font-size:13px;
  line-height: 1.35;
  font-weight: 900;
}

#studentPage .avatar-item-copy small {
  display: block;
  min-height: 30px;
  margin-top: 4px;
  color: #776d8c;
  font-size:13px;
  line-height: 1.4;
}

#studentPage .avatar-item-price {
  margin: 9px 0;
  padding: 6px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-radius: 10px;
  color: #7b5800;
  background: #fff3bd;
  font-size:13px;
  font-weight: 900;
}

#studentPage .avatar-item-action {
  width: 100%;
  min-height: 36px;
  margin-top: auto;
  padding: 7px 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 0;
  border-radius: 11px;
  color: #ffffff;
  background: #6c55e8;
  font-size:13px;
  font-weight: 900;
  cursor: pointer;
}

#studentPage .avatar-item-action.buy {
  color: #403100;
  background: #ffd45c;
}

#studentPage .avatar-item-action.equipped {
  background: #37b987;
}

#studentPage .avatar-item-action:disabled {
  color: #8b829e;
  background: #ded9e9;
  cursor: not-allowed;
}

#studentPage .avatar-empty-state {
  grid-column: 1 / -1;
  min-height: 180px;
  padding: 24px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 7px;
  border: 2px dashed #d8d0ee;
  border-radius: 19px;
  color: #776d8d;
  background: #faf9ff;
  text-align: center;
}

#studentPage .avatar-empty-state.compact {
  min-height: 100px;
}

#studentPage .avatar-empty-state i {
  color: #826de7;
  font-size:30px;
}

#studentPage .avatar-empty-state strong {
  color: #3c3158;
  font-size:14px;
}

#studentPage .avatar-empty-state span {
  font-size:13px;
}

#studentPage .avatar-transaction-list {
  display: grid;
  gap: 7px;
}

#studentPage .avatar-transaction-item {
  min-height: 58px;
  padding: 9px 11px;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  border: 1px solid #e4def2;
  border-radius: 14px;
  background: #faf9ff;
}

#studentPage .avatar-transaction-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #6b4f00;
  background: #ffe48c;
}

#studentPage .avatar-transaction-item strong {
  display: block;
  color: #3a3053;
  font-size:13px;
  font-weight: 900;
}

#studentPage .avatar-transaction-item small {
  display: block;
  margin-top: 2px;
  color: #7b718e;
  font-size:13px;
}

#studentPage .avatar-transaction-amount {
  color: #c2415c;
  font-size:13px;
  font-weight: 900;
  text-align: right;
}

#studentPage .avatar-transaction-amount small {
  color: #4f8a70;
  font-size:13px;
  font-weight: 800;
}

@media (max-width: 1120px) {
  #studentPage .avatar-hero-grid {
    grid-template-columns: 1fr;
  }

  #studentPage .avatar-character-stage {
    min-height: 315px;
  }

  #studentPage .avatar-item-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  #studentPage .avatar-job-selector {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #studentPage .avatar-appearance-grid {
    grid-template-columns: 1fr;
  }

  #studentPage .avatar-item-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  #studentPage .student-player-shortcuts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #studentPage .avatar-preview-card,
  #studentPage .avatar-player-card,
  #studentPage .avatar-config-panel,
  #studentPage .avatar-shop-panel,
  #studentPage .avatar-transaction-panel {
    padding: 13px;
    border-radius: 20px;
  }

  #studentPage .avatar-character-stage {
    min-height: 300px;
  }

  #studentPage .avatar-character {
    transform: translateY(-3px) scale(.9);
  }

  #studentPage .avatar-equipped-summary {
    grid-template-columns: 1fr;
  }

  #studentPage .avatar-wallet-grid {
    grid-template-columns: 1fr;
  }

  #studentPage .avatar-wallet-card {
    min-height: 70px;
  }

  #studentPage .avatar-section-head {
    align-items: stretch;
    flex-direction: column;
  }

  #studentPage .avatar-save-btn {
    width: 100%;
  }

  #studentPage .avatar-job-selector {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #studentPage .avatar-mode-switch {
    width: 100%;
  }

  #studentPage .avatar-mode-switch button {
    flex: 1;
    justify-content: center;
  }

  #studentPage .avatar-item-card {
    min-height: 225px;
    padding: 10px;
  }

  #studentPage .avatar-item-icon {
    width: 58px;
    height: 58px;
    font-size:23px;
  }

  #studentPage .avatar-item-copy strong {
    font-size:13px;
  }

  #studentPage .avatar-transaction-item {
    grid-template-columns: 36px minmax(0, 1fr);
  }

  #studentPage .avatar-transaction-amount {
    grid-column: 2;
    text-align: left;
  }
}

@media (max-width: 390px) {
  #studentPage .avatar-job-selector {
    grid-template-columns: 1fr 1fr;
  }

  #studentPage .avatar-item-grid {
    grid-template-columns: 1fr 1fr;
    gap: 7px;
  }

  #studentPage .avatar-item-card {
    min-height: 215px;
    padding: 8px;
  }

  #studentPage .avatar-item-copy small {
    min-height: 38px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #studentPage .avatar-aura-visual.is-active {
    animation: none;
  }

  #studentPage .avatar-job-card,
  #studentPage .avatar-item-card {
    transition: none;
  }
}



/* ============================================================
   MY AVATAR SHOP V2 — FLAT BLOCK UI / SIDE SHOP / FACE OPTIONS
============================================================ */

/* ยกเลิกสีไล่เฉดในส่วน My Avatar ทั้งหมด */
#studentPage .avatar-page-v1 *,
#studentPage .avatar-page-v1 *::before,
#studentPage .avatar-page-v1 *::after {
  background-image: none !important;
}

/* ร้านค้าอยู่ด้านขวา อวาตาร์และเหรียญค้างด้านซ้าย */
#studentPage #avatarContentBox:not(.hidden) {
  display: grid;
  grid-template-columns: minmax(330px, 390px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

#studentPage #avatarContentBox > .avatar-hero-grid {
  grid-column: 1;
  grid-row: 1 / span 3;
  position: sticky;
  top: 92px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  align-self: start;
}

#studentPage #avatarContentBox > .avatar-config-panel,
#studentPage #avatarContentBox > .avatar-shop-panel,
#studentPage #avatarContentBox > .avatar-transaction-panel {
  grid-column: 2;
}

#studentPage .avatar-preview-card {
  background-color: #ffffff !important;
}

#studentPage .avatar-character-stage {
  min-height: 285px;
  background-color: #eeeaff !important;
}

#studentPage .avatar-character-stage::before {
  content: "";
  position: absolute;
  inset: 18px;
  border: 2px dashed #d3c9f1;
  border-radius: 18px;
  pointer-events: none;
}

#studentPage .avatar-character {
  transform: translateY(-3px) scale(.88);
}

#studentPage .avatar-torso {
  background-color: var(--avatar-primary) !important;
  box-shadow:
    inset 0 -17px 0 var(--avatar-secondary),
    0 7px 0 rgba(49, 35, 83, .20);
}

#studentPage .avatar-arm {
  position: relative;
  overflow: hidden;
  background-color: var(--avatar-primary) !important;
}

#studentPage .avatar-arm::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 37%;
  background-color: var(--avatar-skin) !important;
}

#studentPage .avatar-player-icon {
  background-color: #6c55e8 !important;
}

#studentPage .avatar-job-card.active {
  background-color: var(--job-primary) !important;
}

#studentPage .avatar-item-card.owned {
  background-color: #f5f2ff !important;
}

#studentPage .avatar-item-icon {
  background-color: var(--item-primary) !important;
  box-shadow:
    inset 0 -12px 0 var(--item-secondary),
    0 6px 0 rgba(54, 39, 92, .17);
}

#studentPage .avatar-weapon-visual {
  background-color: var(--weapon-primary) !important;
  box-shadow:
    inset 0 -16px 0 var(--weapon-secondary),
    0 7px 0 rgba(52, 37, 89, .18);
}

#studentPage .avatar-stat-row > div i {
  background-color: #6c55e8 !important;
}

#studentPage .avatar-wallet-card.coin {
  background-color: #ffe48c !important;
}

#studentPage .avatar-wallet-card.lifetime {
  background-color: #ffc5da !important;
}

#studentPage .avatar-wallet-card.power {
  background-color: #bfe1ff !important;
}

/* เพศและรูปทรงตัวละคร */
#studentPage .avatar-character.gender-female .avatar-torso {
  border-radius: 29px 29px 24px 24px;
}

#studentPage .avatar-character.gender-female .avatar-character-legs {
  width: 82px;
}

#studentPage .avatar-character.gender-neutral .avatar-torso {
  border-radius: 20px;
}

/* ลักษณะใบหน้า */
#studentPage .avatar-character.face-2 .avatar-character-face::before,
#studentPage .avatar-character.face-2 .avatar-character-face::after {
  content: "";
  position: absolute;
  top: 56px;
  width: 15px;
  height: 8px;
  border-radius: 999px;
  background-color: rgba(239, 105, 135, .35) !important;
}

#studentPage .avatar-character.face-2 .avatar-character-face::before {
  left: 8px;
}

#studentPage .avatar-character.face-2 .avatar-character-face::after {
  right: 8px;
}

#studentPage .avatar-character.face-3 .avatar-face-detail {
  position: absolute;
  left: 50%;
  top: 57px;
  width: 42px;
  height: 10px;
  transform: translateX(-50%);
}

#studentPage .avatar-character.face-3 .avatar-face-detail::before {
  content: "•  •  •";
  color: rgba(105, 67, 55, .62);
  font-size:13px;
  letter-spacing: 4px;
}

#studentPage .avatar-character.face-4 .avatar-character-face {
  border-radius: 24px 24px 20px 20px;
  box-shadow:
    inset 0 -6px 0 rgba(135, 75, 74, .10),
    0 6px 0 rgba(77, 48, 54, .18);
}

/* ดวงตา */
#studentPage .avatar-character.eye-2 .avatar-eye {
  height: 7px;
  border-radius: 0 0 10px 10px;
  background-color: transparent !important;
  border-bottom: 4px solid #332538;
  box-shadow: none;
}

#studentPage .avatar-character.eye-3 .avatar-eye {
  height: 6px;
  border-radius: 6px;
  transform: rotate(-8deg);
}

#studentPage .avatar-character.eye-3 .avatar-eye-right {
  transform: rotate(8deg);
}

#studentPage .avatar-character.eye-4 .avatar-eye {
  width: 12px;
  height: 15px;
}

#studentPage .avatar-character.eye-4 .avatar-eye::after {
  content: "";
  position: absolute;
  right: 1px;
  top: 1px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: #ffffff !important;
}

/* ปาก */
#studentPage .avatar-character.mouth-2 .avatar-mouth {
  width: 31px;
  height: 15px;
  border: 4px solid #a5525d;
  border-top: 0;
  background-color: #fff4f4 !important;
}

#studentPage .avatar-character.mouth-3 .avatar-mouth {
  width: 23px;
  height: 4px;
  bottom: 17px;
  border: 0;
  border-radius: 999px;
  background-color: #a5525d !important;
}

#studentPage .avatar-character.mouth-4 .avatar-mouth {
  width: 15px;
  height: 13px;
  bottom: 12px;
  border: 3px solid #a5525d;
  border-radius: 50%;
  background-color: #8e3e50 !important;
}

/* ตัวเลือกหน้าตา 7 ช่อง */
#studentPage .avatar-appearance-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* ร้านค้ากระชับขึ้นเมื่อวางด้านขวา */
#studentPage .avatar-item-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

#studentPage .avatar-item-card {
  min-height: 224px;
}

/* กล่องยืนยันการซื้อ */
.avatar-purchase-confirm {
  margin: 10px 0 12px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.avatar-purchase-confirm > div {
  padding: 10px 7px;
  border: 1px solid #ded8f3;
  border-radius: 12px;
  background-color: #f8f6ff;
}

.avatar-purchase-confirm span {
  display: block;
  color: #74698c;
  font-size:13px;
}

.avatar-purchase-confirm strong {
  display: block;
  margin-top: 3px;
  color: #352a57;
  font-size:19px;
}

/* ประวัติแรงค์ย้ายมาอยู่ในการ์ดหัวเว็บ */
#studentPage .student-rank-history-dock {
  margin-top: 11px;
  padding: 9px 11px;
  display: grid;
  grid-template-columns: minmax(170px, auto) minmax(0, 1fr);
  align-items: center;
  gap: 13px;
  border: 2px solid rgba(255,255,255,.72);
  border-radius: 17px;
  background-color: rgba(255,255,255,.16);
}

#studentPage .student-rank-history-dock-title {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #ffffff;
}

#studentPage .student-rank-history-dock-title > i {
  width: 35px;
  height: 35px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: #4b378f;
  background-color: #ffe078;
}

#studentPage .student-rank-history-dock-title strong {
  display: block;
  font-size:13px;
  font-weight: 900;
}

#studentPage .student-rank-history-dock-title small {
  display: block;
  margin-top: 1px;
  color: rgba(255,255,255,.77);
  font-size:13px;
}

#studentPage .student-rank-history-icon-list {
  min-height: 53px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  overflow: visible;
}

#studentPage .student-rank-history-empty {
  color: rgba(255,255,255,.76);
  font-size:13px;
}

#studentPage .student-rank-history-icon-btn {
  --rank-color: #6c55e8;
  position: relative;
  width: 49px;
  height: 49px;
  flex: 0 0 49px;
  padding: 4px;
  border: 3px solid #ffffff;
  border-radius: 15px;
  background-color: rgba(255,255,255,.92);
  box-shadow: 0 5px 0 rgba(44,31,96,.22);
  cursor: pointer;
}

#studentPage .student-rank-history-icon-shell {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background-color: color-mix(in srgb, var(--rank-color) 14%, white);
}

#studentPage .student-rank-history-icon-shell img {
  width: 36px;
  height: 36px;
  object-fit: contain;
}

#studentPage .student-rank-history-icon-shell > i {
  color: var(--rank-color);
  font-size:21px;
}

#studentPage .student-rank-history-popover {
  position: absolute;
  z-index: 40;
  right: 0;
  bottom: calc(100% + 10px);
  width: 190px;
  padding: 10px 11px;
  display: none;
  border: 2px solid #ffffff;
  border-radius: 13px;
  color: #352a57;
  background-color: #ffffff;
  box-shadow: 0 14px 35px rgba(28,20,65,.24);
  text-align: left;
}

#studentPage .student-rank-history-popover::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 100%;
  width: 12px;
  height: 12px;
  border-right: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
  background-color: #ffffff;
  transform: translateY(-7px) rotate(45deg);
}

#studentPage .student-rank-history-popover strong,
#studentPage .student-rank-history-popover small,
#studentPage .student-rank-history-popover b {
  display: block;
}

#studentPage .student-rank-history-popover strong {
  color: var(--rank-color);
  font-size:14px;
  font-weight: 900;
}

#studentPage .student-rank-history-popover small {
  margin-top: 2px;
  color: #756b8d;
  font-size:13px;
}

#studentPage .student-rank-history-popover b {
  margin-top: 5px;
  color: #3c3158;
  font-size:13px;
}

@media (hover:hover) {
  #studentPage .student-rank-history-icon-btn:hover
  .student-rank-history-popover {
    display: block;
  }
}

#studentPage .student-rank-history-icon-btn.is-open
.student-rank-history-popover,
#studentPage .student-rank-history-icon-btn:focus-visible
.student-rank-history-popover {
  display: block;
}

/* QUICK START ซ่อนปุ่มไว้ก่อน */
#studentPage .student-quick-start-grid {
  grid-template-columns: 1fr;
}

#studentPage .student-quick-start-panel {
  padding: 0;
  overflow: hidden;
}

#studentPage .student-quick-start-toggle {
  width: 100%;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 0;
  color: inherit;
  background-color: transparent;
  cursor: pointer;
  text-align: left;
}

#studentPage .student-quick-start-toggle .student-player-mini-head {
  flex: 1;
  margin: 0;
}

#studentPage .student-quick-start-toggle-copy {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #6e6388;
  font-size:13px;
  font-weight: 800;
}

#studentPage .student-quick-start-toggle.is-open {
  background-color: #f5f2ff;
}

#studentPage .student-quick-start-panel
.student-player-shortcuts {
  margin: 0 14px 14px;
}

/* Responsive */
@media (max-width: 1120px) {
  #studentPage #avatarContentBox:not(.hidden) {
    display: block;
  }

  #studentPage #avatarContentBox > .avatar-hero-grid {
    position: static;
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-bottom: 16px;
  }

  #studentPage .avatar-item-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  #studentPage #avatarContentBox > .avatar-hero-grid {
    grid-template-columns: 1fr;
  }

  #studentPage .avatar-appearance-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #studentPage .student-rank-history-dock {
    grid-template-columns: 1fr;
  }

  #studentPage .student-rank-history-icon-list {
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 7px;
  }
}

@media (max-width: 640px) {
  #studentPage .avatar-appearance-grid {
    grid-template-columns: 1fr;
  }

  #studentPage .avatar-item-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #studentPage .student-quick-start-toggle {
    align-items: flex-start;
    flex-direction: column;
  }

  #studentPage .student-quick-start-toggle-copy {
    width: 100%;
    justify-content: space-between;
  }

  .avatar-purchase-confirm {
    grid-template-columns: 1fr;
  }
}



/* ============================================================
   MY AVATAR SHOP V3 — COMPACT PLAYER HUB / SELL 70%
============================================================ */

/* 1) การ์ดสถิติ 5 ช่อง และประวัติแรงค์ต่อท้าย */
#studentPage .student-player-stat-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

#studentPage .student-rank-history-stat-card {
  padding-right: 10px;
}

#studentPage .student-rank-history-stat-content {
  min-width: 0;
  flex: 1;
}

#studentPage .student-rank-history-stat-content > small {
  margin-top: 0;
  margin-bottom: 5px;
}

#studentPage .student-rank-history-stat-card
.student-rank-history-icon-list {
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  overflow: visible;
}

#studentPage .student-rank-history-stat-card
.student-rank-history-icon-btn {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  padding: 2px;
  border-width: 2px;
  border-radius: 10px;
  box-shadow: 0 3px 0 rgba(44, 31, 96, .18);
}

#studentPage .student-rank-history-stat-card
.student-rank-history-icon-shell {
  border-radius: 7px;
}

#studentPage .student-rank-history-stat-card
.student-rank-history-icon-shell img {
  width: 25px;
  height: 25px;
}

#studentPage .student-rank-history-stat-card
.student-rank-history-icon-shell > i {
  font-size:16px;
}

#studentPage .student-rank-history-stat-card
.student-rank-history-popover {
  right: -10px;
  bottom: calc(100% + 8px);
}

#studentPage .student-rank-history-stat-card
.student-rank-history-empty {
  color: #8b82a4;
  font-size:16px;
  font-weight: 900;
}

/* 2) ตัดพื้นที่ Quick Start เดิม */
#studentPage .student-quick-start-grid,
#studentPage .student-quick-start-panel {
  display: none !important;
}

/* 3) ป้าย Season อยู่แถวเดียวกับหัว Player Center */
#studentPage .student-game-panel-head {
  display: grid !important;
  grid-template-columns: 62px minmax(0, 1fr) auto;
  align-items: center !important;
  gap: 14px !important;
}

#studentPage .student-game-panel-copy {
  min-width: 0;
}

#studentPage .student-game-panel-head
.student-eport-season-slot {
  width: auto !important;
  min-width: 0 !important;
  max-width: 350px !important;
  display: flex !important;
  justify-content: flex-end !important;
  cursor: pointer;
  outline: none;
}

#studentPage .student-game-panel-head
.student-eport-season-slot:empty {
  display: none !important;
}

#studentPage .student-game-panel-head
.student-eport-season-slot #rankSeasonStudentBox {
  width: auto !important;
  min-width: 0 !important;
}

#studentPage .student-game-panel-head
.student-eport-season-slot .rank-season-card {
  width: auto !important;
  min-width: 285px !important;
  min-height: 48px !important;
  padding: 6px 9px !important;
  gap: 8px !important;
  border-radius: 15px !important;
}

#studentPage .student-game-panel-head
.student-eport-season-slot .season-badge {
  min-width: 58px !important;
  height: 34px !important;
  padding: 0 8px !important;
  border-radius: 11px !important;
  font-size:14px !important;
}

#studentPage .student-game-panel-head
.student-eport-season-slot .season-code {
  font-size:13px !important;
}

#studentPage .student-game-panel-head
.student-eport-season-slot .season-name,
#studentPage .student-game-panel-head
.student-eport-season-slot .season-reset-text {
  display: none !important;
}

#studentPage .student-game-panel-head
.student-eport-season-slot .season-countdown-block {
  gap: 6px !important;
}

#studentPage .student-game-panel-head
.student-eport-season-slot .season-clock {
  width: 29px !important;
  height: 29px !important;
  border-radius: 9px !important;
  font-size:13px !important;
}

#studentPage .student-game-panel-head
.student-eport-season-slot .season-countdown {
  font-size:13px !important;
}

#studentPage .student-game-panel-head
.student-eport-season-slot:hover .rank-season-card,
#studentPage .student-game-panel-head
.student-eport-season-slot:focus-visible .rank-season-card {
  border-color: #f0b923 !important;
  box-shadow: 0 5px 0 rgba(217, 161, 17, .24) !important;
  transform: translateY(-1px);
}

/* แถวแท็บไม่ต้องเผื่อป้าย Season แล้ว */
#studentPage .eport-menu-season-row {
  display: block !important;
  margin-top: 8px !important;
}

#studentPage .eport-menu-season-row .eport-tabs {
  width: 100%;
}

/* 4) ฝั่งซ้ายค้างทั้งชุด และมี scroll ภายในเมื่อสูงเกินจอ */
#studentPage #avatarContentBox > .avatar-hero-grid {
  position: sticky !important;
  top: 86px !important;
  max-height: calc(100vh - 102px);
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 5px;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #bcb2e6 transparent;
}

#studentPage #avatarContentBox > .avatar-hero-grid::-webkit-scrollbar {
  width: 6px;
}

#studentPage #avatarContentBox > .avatar-hero-grid::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: #bcb2e6;
}

/* 5) ปุ่มสวม/ขาย */
#studentPage .avatar-item-actions {
  margin-top: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(82px, .72fr);
  gap: 6px;
}

#studentPage .avatar-item-actions .avatar-item-action {
  margin-top: 0;
}

#studentPage .avatar-item-action.sell {
  color: #6d3e16;
  background: #ffd0a3;
}

#studentPage .avatar-item-action.sell:hover {
  background: #ffbc7a;
}

#studentPage .avatar-transaction-item.is-sale
.avatar-transaction-icon {
  color: #17684e;
  background: #c9f7e6;
}

#studentPage .avatar-transaction-item.is-sale
.avatar-transaction-amount {
  color: #16825f;
}

.avatar-sale-confirm > div {
  background: #fff7ee;
}

/* Responsive */
@media (max-width: 1180px) {
  #studentPage .student-player-stat-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #studentPage .student-rank-history-stat-card {
    grid-column: span 2;
  }
}

@media (max-width: 980px) {
  #studentPage .student-game-panel-head {
    grid-template-columns: 54px minmax(0, 1fr);
  }

  #studentPage .student-game-panel-head
  .student-eport-season-slot {
    grid-column: 1 / -1;
    width: 100% !important;
    max-width: none !important;
    justify-content: stretch !important;
  }

  #studentPage .student-game-panel-head
  .student-eport-season-slot #rankSeasonStudentBox,
  #studentPage .student-game-panel-head
  .student-eport-season-slot .rank-season-card {
    width: 100% !important;
  }

  #studentPage #avatarContentBox > .avatar-hero-grid {
    position: static !important;
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }
}

@media (max-width: 720px) {
  #studentPage .student-player-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #studentPage .student-rank-history-stat-card {
    grid-column: 1 / -1;
  }

  #studentPage .student-rank-history-stat-card
  .student-rank-history-icon-list {
    overflow-x: auto;
    padding-bottom: 4px;
  }

  #studentPage .student-game-panel-head {
    grid-template-columns: 48px minmax(0, 1fr);
  }

  #studentPage .student-game-panel-head
  .student-eport-season-slot .rank-season-card {
    min-width: 0 !important;
  }

  #studentPage .avatar-item-actions {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 359px) {
  #studentPage .student-player-stat-grid {
    grid-template-columns: 1fr;
  }

  #studentPage .student-rank-history-stat-card {
    grid-column: auto;
  }
}



/* ============================================================
   MY AVATAR SHOP V4 — TRUE STICKY LEFT RAIL FIX
   แก้ ancestor overflow + แยก sticky wrapper กับ inner scroll
============================================================ */

/* Sticky จะไม่ทำงานเมื่อกล่องแม่ตั้ง overflow:hidden */
#studentPage .student-game-command-center,
#studentPage #eportTabAvatar,
#studentPage .avatar-page-v1,
#studentPage #avatarContentBox {
  overflow: visible !important;
}

/* กรอบซ้ายเป็นตัว Sticky จริง ไม่เป็น scroll container */
#studentPage #avatarContentBox > .avatar-hero-grid {
  position: sticky !important;
  top: 84px !important;
  align-self: start !important;
  display: block !important;
  max-height: none !important;
  height: fit-content !important;
  overflow: visible !important;
  padding: 0 !important;
  z-index: 12;
}

/* เนื้อหาภายในค่อยเป็นพื้นที่เลื่อน เมื่อสูงกว่าหน้าจอ */
#studentPage .avatar-left-sticky-scroll {
  max-height: calc(100vh - 100px);
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 6px 8px 0;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: #bcb2e6 transparent;
}

#studentPage .avatar-left-sticky-scroll::-webkit-scrollbar {
  width: 6px;
}

#studentPage .avatar-left-sticky-scroll::-webkit-scrollbar-track {
  background: transparent;
}

#studentPage .avatar-left-sticky-scroll::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: #bcb2e6;
}

/* ทำให้ภาพอวาตาร์อยู่บนสุดของกรอบซ้ายตลอด */
#studentPage .avatar-left-sticky-scroll > .avatar-preview-card {
  order: 1;
}

#studentPage .avatar-left-sticky-scroll > .avatar-player-card {
  order: 2;
}

/* ปิดกฎ scroll เดิมที่อยู่บนตัว Sticky */
#studentPage #avatarContentBox > .avatar-hero-grid::-webkit-scrollbar {
  display: none !important;
}

/* Tablet/Mobile ใช้การเรียงแนวตั้งตามธรรมชาติ */
@media (max-width: 980px) {
  #studentPage #avatarContentBox > .avatar-hero-grid {
    position: static !important;
    top: auto !important;
    height: auto !important;
    z-index: auto;
  }

  #studentPage .avatar-left-sticky-scroll {
    max-height: none;
    overflow: visible;
    padding: 0;
    scrollbar-gutter: auto;
  }
}



/* ============================================================
   MY AVATAR SHOP V5 — TABBED WORKSPACE
   แสดงอวาตาร์ซ้าย + เนื้อหาขวาทีละแท็บ
============================================================ */

/* พื้นที่หลักสูงพอดีจอ ไม่ลากหน้าเว็บยาว */
#studentPage #avatarContentBox:not(.hidden) {
  display: grid !important;
  grid-template-columns: minmax(330px, 390px) minmax(0, 1fr) !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  gap: 12px 16px !important;
  align-items: stretch !important;
  min-height: 610px;
  height: calc(100vh - 128px);
  max-height: 780px;
  overflow: visible !important;
}

/* ฝั่งซ้ายแสดงตลอด และไม่ต้องพึ่งการเลื่อนทั้งหน้า */
#studentPage #avatarContentBox > .avatar-hero-grid {
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;
  position: relative !important;
  top: auto !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
  align-self: stretch !important;
}

#studentPage .avatar-left-sticky-scroll {
  height: 100%;
  max-height: none !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-right: 6px;
}

/* แถบแท็บด้านขวา */
#studentPage .avatar-workspace-tabs {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  padding: 5px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  border: 1px solid #ddd6f2;
  border-radius: 16px;
  background: #f4f1ff;
}

#studentPage .avatar-workspace-tabs button {
  min-height: 45px;
  padding: 8px 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 0;
  border-radius: 12px;
  color: #63587c;
  background: transparent;
  font-size:13px;
  font-weight: 900;
  cursor: pointer;
}

#studentPage .avatar-workspace-tabs button:hover {
  color: #5140b6;
  background: #ebe6ff;
}

#studentPage .avatar-workspace-tabs button.active {
  color: #ffffff;
  background: #6c55e8;
  box-shadow: 0 4px 0 #4936ad;
}

/* ฝั่งขวาแสดงทีละ Panel และเลื่อนภายใน */
#studentPage .avatar-workspace-panel {
  grid-column: 2 !important;
  grid-row: 2 !important;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  overflow-x: hidden;
  margin: 0 !important;
  padding-right: 12px;
  scrollbar-width: thin;
  scrollbar-color: #bcb2e6 transparent;
}

#studentPage .avatar-workspace-panel::-webkit-scrollbar {
  width: 6px;
}

#studentPage .avatar-workspace-panel::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: #bcb2e6;
}

#studentPage .avatar-workspace-panel.hidden {
  display: none !important;
}

#studentPage .avatar-workspace-panel.active {
  display: block !important;
}

/* Config/Shop/History ใช้ความกว้างเต็มพื้นที่แท็บ */
#studentPage .avatar-config-panel,
#studentPage .avatar-shop-panel,
#studentPage .avatar-transaction-panel {
  width: 100%;
  box-sizing: border-box;
}

/* ร้านค้าไม่ทำให้ทั้งหน้าสูง */
#studentPage .avatar-item-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* ประวัติเหรียญมีพื้นที่อ่านง่าย */
#studentPage .avatar-transaction-panel {
  min-height: 100%;
}

/* Mobile / Tablet: ยังคงใช้แท็บ แต่เรียงแนวตั้ง */
@media (max-width: 980px) {
  #studentPage #avatarContentBox:not(.hidden) {
    display: block !important;
    height: auto;
    max-height: none;
    min-height: 0;
  }

  #studentPage #avatarContentBox > .avatar-hero-grid {
    height: auto !important;
    overflow: visible !important;
    margin-bottom: 12px;
  }

  #studentPage .avatar-left-sticky-scroll {
    height: auto;
    overflow: visible !important;
    padding-right: 0;
  }

  #studentPage .avatar-workspace-tabs {
    position: sticky;
    top: 76px;
    z-index: 25;
    margin-bottom: 12px;
    background: #f4f1ff;
    box-shadow: 0 7px 18px rgba(43, 31, 82, .12);
  }

  #studentPage .avatar-workspace-panel {
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }
}

@media (max-width: 640px) {
  #studentPage .avatar-workspace-tabs {
    grid-template-columns: 1fr;
    position: static;
  }

  #studentPage .avatar-workspace-tabs button {
    justify-content: flex-start;
    min-height: 42px;
  }

  #studentPage .avatar-item-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}



/* ============================================================
   ORIGINAL PIXEL BLOCK AVATAR V6 — 360° CSS 3D
   สีแบน ไม่มี Gradient / Drag / Touch / Auto Spin
============================================================ */

#studentPage .pixel-avatar-stage-v6 {
  --avatar-glow: #ffd45c;
  position: relative;
  min-height: 360px !important;
  padding: 44px 10px 34px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 3px solid #ffffff;
  border-radius: 24px;
  background-color: #e9e5ff !important;
  box-shadow:
    inset 0 0 0 1px #d2c9f2,
    0 8px 0 #cfc5eb;
  perspective: 850px;
}

#studentPage .pixel-avatar-stage-v6::before {
  content: "";
  position: absolute;
  inset: 16px;
  border: 2px dashed #c9bff0;
  border-radius: 17px;
  pointer-events: none;
}

#studentPage .pixel-avatar-stage-v6::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 26px;
  width: 186px;
  height: 31px;
  border-radius: 50%;
  background-color: rgba(43, 31, 79, .17) !important;
  filter: blur(2px);
  transform: translateX(-50%);
}

#studentPage .pixel-avatar-toolbar {
  position: absolute;
  z-index: 30;
  top: 10px;
  right: 10px;
  display: flex;
  gap: 5px;
  padding: 5px;
  border: 2px solid #d9d1f1;
  border-radius: 14px;
  background-color: rgba(255,255,255,.94) !important;
  box-shadow: 0 5px 0 rgba(54, 41, 95, .13);
}

#studentPage .pixel-avatar-toolbar button {
  width: 35px;
  height: 35px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 10px;
  color: #5c5079;
  background-color: #f2effc !important;
  cursor: pointer;
  font-size:13px;
  transition:
    transform .14s ease,
    color .14s ease,
    background-color .14s ease;
}

#studentPage .pixel-avatar-toolbar button:hover {
  color: #ffffff;
  background-color: #6c55e8 !important;
  transform: translateY(-1px);
}

#studentPage .pixel-avatar-toolbar button.active {
  color: #ffffff;
  background-color: #31b982 !important;
  box-shadow: inset 0 -4px 0 #20845d;
}

#studentPage .pixel-avatar-scene {
  position: relative;
  z-index: 10;
  width: 270px;
  height: 292px;
  display: grid;
  place-items: center;
  outline: none;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

#studentPage .pixel-avatar-scene.is-dragging {
  cursor: grabbing;
}

#studentPage .pixel-avatar-scene:focus-visible {
  border-radius: 20px;
  box-shadow: 0 0 0 4px rgba(108,85,232,.22);
}

#studentPage .pixel-avatar-character-v6 {
  --avatar-primary: #6c55e8;
  --avatar-secondary: #54d5e8;
  --avatar-skin: #f1bd91;
  --avatar-skin-dark: #ce8f65;
  --avatar-hair: #292330;
  position: relative !important;
  width: 230px !important;
  height: 286px !important;
  display: block !important;
  filter:
    drop-shadow(0 13px 12px rgba(40,29,78,.20)) !important;
  transform: none !important;
}

#studentPage .pixel-avatar-character-v6.skin-1 {
  --avatar-skin: #ffd0ad;
  --avatar-skin-dark: #dea27a;
}

#studentPage .pixel-avatar-character-v6.skin-2 {
  --avatar-skin: #f1bd91;
  --avatar-skin-dark: #cc8e65;
}

#studentPage .pixel-avatar-character-v6.skin-3 {
  --avatar-skin: #d99c70;
  --avatar-skin-dark: #ae6d49;
}

#studentPage .pixel-avatar-character-v6.skin-4 {
  --avatar-skin: #b97951;
  --avatar-skin-dark: #8f5537;
}

#studentPage .pixel-avatar-character-v6.skin-5 {
  --avatar-skin: #855032;
  --avatar-skin-dark: #60341f;
}

#studentPage .pixel-avatar-character-v6.hair-color-1 {
  --avatar-hair: #28232d;
}

#studentPage .pixel-avatar-character-v6.hair-color-2 {
  --avatar-hair: #70452e;
}

#studentPage .pixel-avatar-character-v6.hair-color-3 {
  --avatar-hair: #dfad45;
}

#studentPage .pixel-avatar-character-v6.hair-color-4 {
  --avatar-hair: #7047a5;
}

#studentPage .pixel-avatar-character-v6.hair-color-5 {
  --avatar-hair: #348cc5;
}

#studentPage .pixel-avatar-character-v6.hair-color-6 {
  --avatar-hair: #dc6598;
}

#studentPage .pixel-avatar-rig {
  --avatar-rotation-y: -22deg;
  position: absolute;
  left: 5px;
  top: 0;
  width: 220px;
  height: 286px;
  transform-style: preserve-3d;
  transform:
    rotateX(-5deg)
    rotateY(var(--avatar-rotation-y));
  transform-origin: 50% 58%;
  will-change: transform;
}

#studentPage .pixel-avatar-rig.is-smooth-rotate {
  transition: transform .36s cubic-bezier(.2,.8,.2,1);
}

#studentPage .pixel-cube {
  --w: 40px;
  --h: 40px;
  --d: 40px;
  position: absolute;
  width: var(--w);
  height: var(--h);
  transform-style: preserve-3d;
}

#studentPage .pixel-cube-face {
  position: absolute;
  display: block;
  overflow: hidden;
  border: 3px solid rgba(255,255,255,.84);
  background-color: #ffffff !important;
  backface-visibility: hidden;
  box-sizing: border-box;
}

#studentPage .pixel-cube .face-front,
#studentPage .pixel-cube .face-back {
  left: 0;
  top: 0;
  width: var(--w);
  height: var(--h);
}

#studentPage .pixel-cube .face-left,
#studentPage .pixel-cube .face-right {
  left: calc((var(--w) - var(--d)) / 2);
  top: 0;
  width: var(--d);
  height: var(--h);
}

#studentPage .pixel-cube .face-top,
#studentPage .pixel-cube .face-bottom {
  left: 0;
  top: calc((var(--h) - var(--d)) / 2);
  width: var(--w);
  height: var(--d);
}

#studentPage .pixel-cube .face-front {
  transform: translateZ(calc(var(--d) / 2));
}

#studentPage .pixel-cube .face-back {
  transform:
    rotateY(180deg)
    translateZ(calc(var(--d) / 2));
}

#studentPage .pixel-cube .face-left {
  transform:
    rotateY(-90deg)
    translateZ(calc(var(--w) / 2));
}

#studentPage .pixel-cube .face-right {
  transform:
    rotateY(90deg)
    translateZ(calc(var(--w) / 2));
}

#studentPage .pixel-cube .face-top {
  transform:
    rotateX(90deg)
    translateZ(calc(var(--h) / 2));
}

#studentPage .pixel-cube .face-bottom {
  transform:
    rotateX(-90deg)
    translateZ(calc(var(--h) / 2));
}

/* HEAD */
#studentPage .pixel-head-block {
  --w: 92px;
  --h: 78px;
  --d: 76px;
  left: 64px;
  top: 25px;
}

#studentPage .pixel-head-block .pixel-cube-face {
  background-color: var(--avatar-skin) !important;
}

#studentPage .pixel-head-block .face-left,
#studentPage .pixel-head-block .face-right,
#studentPage .pixel-head-block .face-back {
  background-color: var(--avatar-skin-dark) !important;
}

#studentPage .pixel-head-block .face-bottom {
  background-color: color-mix(
    in srgb,
    var(--avatar-skin-dark) 70%,
    #ffffff
  ) !important;
}

/* HAIR */
#studentPage .pixel-hair-block {
  --w: 98px;
  --h: 27px;
  --d: 82px;
  left: 61px;
  top: 12px;
  z-index: 6;
}

#studentPage .pixel-hair-block .pixel-cube-face {
  border-color: rgba(255,255,255,.62);
  background-color: var(--avatar-hair) !important;
}

#studentPage .pixel-hair-block .face-left,
#studentPage .pixel-hair-block .face-right,
#studentPage .pixel-hair-block .face-back {
  background-color: color-mix(
    in srgb,
    var(--avatar-hair) 80%,
    #000000
  ) !important;
}

#studentPage .pixel-hair-fringe {
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: -1px;
  height: 13px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

#studentPage .pixel-hair-fringe span {
  width: 16px;
  height: 8px;
  background-color: var(--avatar-hair) !important;
}

#studentPage .pixel-avatar-character-v6.hair-2
.pixel-hair-fringe span:nth-child(odd) {
  height: 15px;
}

#studentPage .pixel-avatar-character-v6.hair-3
.pixel-hair-block {
  transform: rotateZ(-4deg);
}

#studentPage .pixel-avatar-character-v6.hair-3
.pixel-hair-fringe span:first-child {
  height: 19px;
}

#studentPage .pixel-avatar-character-v6.hair-4
.pixel-hair-block {
  --h: 42px;
}

#studentPage .pixel-avatar-character-v6.hair-5
.pixel-hair-fringe span {
  height: 16px;
}

#studentPage .pixel-avatar-character-v6.hair-5
.pixel-hair-fringe span:nth-child(2),
#studentPage .pixel-avatar-character-v6.hair-5
.pixel-hair-fringe span:nth-child(4) {
  height: 5px;
}

/* FACE */
#studentPage .pixel-face-front {
  overflow: visible;
}

#studentPage .pixel-face-front .avatar-eye {
  position: absolute;
  top: 30px;
  width: 10px;
  height: 13px;
  border-radius: 2px;
  background-color: #302536 !important;
  box-shadow: inset 3px 2px 0 rgba(255,255,255,.38);
}

#studentPage .pixel-face-front .avatar-eye-left {
  left: 23px;
}

#studentPage .pixel-face-front .avatar-eye-right {
  right: 23px;
}

#studentPage .pixel-face-front .avatar-mouth {
  position: absolute;
  left: 50%;
  bottom: 13px;
  width: 29px;
  height: 12px;
  border-bottom: 5px solid #9b4d5b;
  border-radius: 0 0 12px 12px;
  transform: translateX(-50%);
}

#studentPage .pixel-avatar-character-v6.eye-2
.pixel-face-front .avatar-eye {
  height: 7px;
  top: 34px;
  border-bottom: 4px solid #302536;
  background-color: transparent !important;
  box-shadow: none;
}

#studentPage .pixel-avatar-character-v6.eye-3
.pixel-face-front .avatar-eye {
  height: 5px;
  top: 34px;
  transform: rotate(-8deg);
}

#studentPage .pixel-avatar-character-v6.eye-3
.pixel-face-front .avatar-eye-right {
  transform: rotate(8deg);
}

#studentPage .pixel-avatar-character-v6.eye-4
.pixel-face-front .avatar-eye::after {
  content: "";
  position: absolute;
  right: 1px;
  top: 1px;
  width: 4px;
  height: 4px;
  background-color: #ffffff !important;
}

#studentPage .pixel-avatar-character-v6.mouth-2
.pixel-face-front .avatar-mouth {
  width: 34px;
  height: 16px;
  border: 4px solid #9b4d5b;
  border-top: 0;
  background-color: #fff4f5 !important;
}

#studentPage .pixel-avatar-character-v6.mouth-3
.pixel-face-front .avatar-mouth {
  width: 24px;
  height: 4px;
  bottom: 18px;
  border: 0;
  background-color: #9b4d5b !important;
}

#studentPage .pixel-avatar-character-v6.mouth-4
.pixel-face-front .avatar-mouth {
  width: 14px;
  height: 14px;
  bottom: 12px;
  border: 3px solid #9b4d5b;
  border-radius: 50%;
  background-color: #7a3445 !important;
}

#studentPage .pixel-avatar-character-v6.face-2
.pixel-face-front::before,
#studentPage .pixel-avatar-character-v6.face-2
.pixel-face-front::after {
  content: "";
  position: absolute;
  top: 48px;
  width: 16px;
  height: 7px;
  border-radius: 999px;
  background-color: rgba(238,98,130,.35) !important;
}

#studentPage .pixel-avatar-character-v6.face-2
.pixel-face-front::before {
  left: 8px;
}

#studentPage .pixel-avatar-character-v6.face-2
.pixel-face-front::after {
  right: 8px;
}

#studentPage .pixel-avatar-character-v6.face-3
.pixel-face-front .avatar-face-detail::before {
  content: "• • •";
  position: absolute;
  left: 50%;
  top: 47px;
  color: rgba(99,60,48,.66);
  font-size:13px;
  letter-spacing: 3px;
  transform: translateX(-50%);
}

/* TORSO */
#studentPage .pixel-torso-block {
  --w: 86px;
  --h: 91px;
  --d: 44px;
  left: 67px;
  top: 108px;
}

#studentPage .pixel-torso-block .pixel-cube-face {
  background-color: var(--avatar-primary) !important;
}

#studentPage .pixel-torso-block .face-left,
#studentPage .pixel-torso-block .face-right,
#studentPage .pixel-torso-block .face-back {
  background-color: color-mix(
    in srgb,
    var(--avatar-primary) 75%,
    #1c1634
  ) !important;
}

#studentPage .pixel-torso-block .face-top,
#studentPage .pixel-torso-block .face-bottom {
  background-color: var(--avatar-secondary) !important;
}

#studentPage .pixel-torso-block .face-front {
  display: grid;
  place-items: center;
}

#studentPage .pixel-torso-block .face-front::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  height: 15px;
  background-color: var(--avatar-secondary) !important;
}

#studentPage .pixel-torso-block .face-front i {
  position: relative;
  z-index: 2;
  color: #ffffff;
  font-size:25px;
  filter: drop-shadow(0 3px 0 rgba(42,31,73,.20));
}

#studentPage .pixel-chest-band {
  position: absolute;
  left: 18px;
  right: 18px;
  top: 12px;
  height: 9px;
  background-color: rgba(255,255,255,.32) !important;
}

#studentPage .pixel-back-emblem {
  position: absolute;
  left: 50%;
  top: 31px;
  width: 25px;
  height: 25px;
  border: 5px solid rgba(255,255,255,.45);
  transform: translateX(-50%) rotate(45deg);
}

/* GENDER */
#studentPage .pixel-avatar-character-v6.gender-female
.pixel-torso-block {
  --w: 80px;
  left: 70px;
}

#studentPage .pixel-avatar-character-v6.gender-female
.pixel-leg-left-block {
  left: 78px;
}

#studentPage .pixel-avatar-character-v6.gender-female
.pixel-leg-right-block {
  left: 112px;
}

/* ARMS */
#studentPage .pixel-arm-block {
  --w: 27px;
  --h: 59px;
  --d: 27px;
  top: 113px;
}

#studentPage .pixel-arm-left-block {
  left: 34px;
  transform: rotateZ(5deg);
  transform-origin: top center;
}

#studentPage .pixel-arm-right-block {
  left: 159px;
  transform: rotateZ(-5deg);
  transform-origin: top center;
}

#studentPage .pixel-arm-block .pixel-cube-face {
  background-color: var(--avatar-primary) !important;
}

#studentPage .pixel-arm-block .face-left,
#studentPage .pixel-arm-block .face-right,
#studentPage .pixel-arm-block .face-back {
  background-color: color-mix(
    in srgb,
    var(--avatar-primary) 74%,
    #1c1634
  ) !important;
}

#studentPage .pixel-hand-block {
  --w: 25px;
  --h: 24px;
  --d: 25px;
  top: 171px;
}

#studentPage .pixel-hand-left-block {
  left: 36px;
  transform: rotateZ(5deg);
}

#studentPage .pixel-hand-right-block {
  left: 159px;
  transform: rotateZ(-5deg);
}

#studentPage .pixel-hand-block .pixel-cube-face {
  background-color: var(--avatar-skin) !important;
}

#studentPage .pixel-hand-block .face-left,
#studentPage .pixel-hand-block .face-right,
#studentPage .pixel-hand-block .face-back {
  background-color: var(--avatar-skin-dark) !important;
}

/* JOB POSES */
#studentPage .pixel-avatar-character-v6.job-fighter
.pixel-arm-left-block {
  transform: rotateZ(11deg);
}

#studentPage .pixel-avatar-character-v6.job-assassin
.pixel-arm-right-block {
  transform: rotateZ(-13deg);
}

#studentPage .pixel-avatar-character-v6.job-mage
.pixel-arm-right-block {
  transform: rotateZ(-16deg);
}

#studentPage .pixel-avatar-character-v6.job-support
.pixel-arm-left-block,
#studentPage .pixel-avatar-character-v6.job-support
.pixel-arm-right-block {
  transform: rotateZ(0);
}

/* LEGS */
#studentPage .pixel-leg-block {
  --w: 34px;
  --h: 76px;
  --d: 34px;
  top: 204px;
}

#studentPage .pixel-leg-left-block {
  left: 74px;
}

#studentPage .pixel-leg-right-block {
  left: 112px;
}

#studentPage .pixel-leg-block .pixel-cube-face {
  background-color: #3c405f !important;
}

#studentPage .pixel-leg-block .face-left,
#studentPage .pixel-leg-block .face-right,
#studentPage .pixel-leg-block .face-back {
  background-color: #272a42 !important;
}

#studentPage .pixel-leg-block .face-bottom {
  background-color: #171a2e !important;
}

/* WEAPON */
#studentPage .pixel-avatar-weapon {
  --weapon-primary: #ffffff;
  --weapon-secondary: #ffd45c;
  position: absolute !important;
  z-index: 14;
  right: 10px !important;
  top: 126px !important;
  width: 58px !important;
  height: 96px !important;
  display: block !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  box-shadow: none !important;
  transform:
    translateZ(31px)
    rotateZ(-18deg) !important;
  transform-style: preserve-3d;
}

#studentPage .pixel-weapon-grip {
  position: absolute;
  left: 25px;
  bottom: 1px;
  width: 10px;
  height: 48px;
  border: 3px solid rgba(255,255,255,.82);
  background-color: #684b35 !important;
  box-shadow: 4px 4px 0 rgba(39,29,68,.18);
}

#studentPage .pixel-weapon-core {
  position: absolute;
  left: 3px;
  top: 2px;
  width: 52px;
  height: 54px;
  display: grid;
  place-items: center;
  border: 4px solid rgba(255,255,255,.88);
  border-radius: 9px;
  color: #392e57;
  background-color: var(--weapon-primary) !important;
  box-shadow:
    inset 0 -13px 0 var(--weapon-secondary),
    5px 5px 0 rgba(42,31,73,.18);
}

#studentPage .pixel-weapon-core i {
  font-size:23px;
}

#studentPage .pixel-avatar-weapon[data-weapon-style="unarmed"] {
  top: 145px !important;
  right: 20px !important;
  height: 57px !important;
}

#studentPage .pixel-avatar-weapon[data-weapon-style="unarmed"]
.pixel-weapon-grip {
  display: none;
}

#studentPage .pixel-avatar-weapon[data-weapon-style="unarmed"]
.pixel-weapon-core {
  width: 43px;
  height: 43px;
  border-radius: 12px;
}

/* ACCESSORIES */
#studentPage .pixel-avatar-accessory-front {
  position: absolute !important;
  z-index: 18;
  left: 50% !important;
  top: -25px !important;
  min-width: 42px;
  min-height: 42px;
  display: grid;
  place-items: center;
  font-size:30px;
  filter: drop-shadow(0 4px 0 rgba(45,33,75,.20));
  transform: translateX(-50%);
}

#studentPage .pixel-avatar-accessory-front[
  data-accessory-style="round-glasses"
] {
  top: 20px !important;
  font-size:25px;
}

#studentPage .pixel-avatar-accessory-front[
  data-accessory-style="gold-crown"
] {
  top: -31px !important;
  font-size:34px;
}

#studentPage .pixel-avatar-accessory-back {
  position: absolute !important;
  z-index: 0;
  left: 50% !important;
  top: 103px !important;
  width: 235px !important;
  min-height: 110px;
  display: flex !important;
  align-items: center;
  justify-content: space-between !important;
  font-size:72px !important;
  filter: drop-shadow(0 7px 0 rgba(45,33,75,.16));
  transform:
    translateX(-50%)
    translateZ(-34px) !important;
}

#studentPage .pixel-avatar-accessory-back[
  data-accessory-style="cloud-wings"
] i:first-child {
  transform: rotate(-26deg) scaleX(-1);
}

#studentPage .pixel-avatar-accessory-back[
  data-accessory-style="cloud-wings"
] i:last-child {
  transform: rotate(26deg);
}

#studentPage .pixel-avatar-accessory-back[
  data-accessory-style="hero-cape"
] {
  justify-content: center !important;
  top: 111px !important;
  font-size:86px !important;
}

/* AURA */
#studentPage .pixel-avatar-stage-v6 .avatar-aura-visual {
  z-index: 4;
  width: 245px;
  height: 245px;
}

#studentPage .pixel-avatar-stage-v6
.avatar-aura-visual.is-active {
  border-color: var(--avatar-glow);
  box-shadow:
    0 0 22px var(--avatar-glow),
    inset 0 0 25px var(--avatar-glow);
}

/* HINT */
#studentPage .pixel-avatar-rotation-hint {
  position: absolute;
  z-index: 24;
  left: 50%;
  bottom: 7px;
  min-height: 25px;
  padding: 4px 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #d7cff0;
  border-radius: 999px;
  color: #665b80;
  background-color: rgba(255,255,255,.88) !important;
  font-size:13px;
  font-weight: 800;
  transform: translateX(-50%);
  white-space: nowrap;
}

/* Small screens */
@media (max-width: 640px) {
  #studentPage .pixel-avatar-stage-v6 {
    min-height: 330px !important;
  }

  #studentPage .pixel-avatar-scene {
    transform: scale(.90);
  }

  #studentPage .pixel-avatar-toolbar {
    top: 8px;
    right: 8px;
  }

  #studentPage .pixel-avatar-toolbar button {
    width: 32px;
    height: 32px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #studentPage .pixel-avatar-rig.is-smooth-rotate {
    transition: none;
  }
}



/* ============================================================
   PIXEL BLOCK AVATAR V7 — FULL BODY / PIXEL PLUS / JOB POLICY
============================================================ */

/* ห้าม Grid บีบการ์ดตัวอย่างจนภาพตัวละครถูกตัด */
#studentPage .avatar-left-sticky-scroll {
  grid-auto-rows: max-content !important;
  align-content: start !important;
}

#studentPage .avatar-left-sticky-scroll > .avatar-preview-card,
#studentPage .avatar-left-sticky-scroll > .avatar-player-card {
  min-height: max-content !important;
  height: auto !important;
  flex: 0 0 auto !important;
}

/* ย่อตัวละครให้เห็นครบทั้งหัวถึงเท้า โดยไม่ต้องเลื่อนในกรอบรูป */
#studentPage .pixel-avatar-stage-v6 {
  min-height: 310px !important;
  height: 310px !important;
  padding: 38px 6px 28px !important;
  border-radius: 18px !important;
}

#studentPage .pixel-avatar-stage-v6::before {
  inset: 12px !important;
  border-radius: 10px !important;
  border-style: solid !important;
  border-width: 2px !important;
}

#studentPage .pixel-avatar-stage-v6::after {
  bottom: 19px !important;
  width: 145px !important;
  height: 20px !important;
  border-radius: 0 !important;
  filter: none !important;
}

#studentPage .pixel-avatar-scene {
  width: 250px !important;
  height: 252px !important;
}

#studentPage .pixel-avatar-character-v6 {
  width: 230px !important;
  height: 286px !important;
}

#studentPage .pixel-avatar-rig {
  --avatar-scale-v7: .78;
  left: 5px !important;
  top: -15px !important;
  transform:
    scale(var(--avatar-scale-v7))
    rotateX(-5deg)
    rotateY(var(--avatar-rotation-y)) !important;
  transform-origin: 50% 52% !important;
}

#studentPage .pixel-avatar-rig.is-smooth-rotate {
  transition: transform .36s steps(8, end) !important;
}

#studentPage .pixel-avatar-rotation-hint {
  bottom: 4px !important;
  border-radius: 4px !important;
  box-shadow: 3px 3px 0 #c9c0e6;
}

/* ความเป็น Pixel เพิ่มขึ้น */
#studentPage .pixel-cube-face {
  border-radius: 0 !important;
  border-width: 4px !important;
  box-shadow:
    inset -5px -5px 0 rgba(36, 28, 61, .14),
    inset 4px 4px 0 rgba(255,255,255,.16);
  image-rendering: pixelated;
}

#studentPage .pixel-head-block .pixel-cube-face,
#studentPage .pixel-hair-block .pixel-cube-face,
#studentPage .pixel-torso-block .pixel-cube-face,
#studentPage .pixel-arm-block .pixel-cube-face,
#studentPage .pixel-hand-block .pixel-cube-face,
#studentPage .pixel-leg-block .pixel-cube-face {
  border-color: #ffffff !important;
}

/* ดวงตาและปากใช้บล็อกเหลี่ยม */
#studentPage .pixel-face-front .avatar-eye {
  width: 11px !important;
  height: 13px !important;
  border-radius: 0 !important;
  box-shadow:
    inset 3px 3px 0 rgba(255,255,255,.42),
    2px 2px 0 rgba(59,39,65,.18) !important;
}

#studentPage .pixel-face-front .avatar-mouth {
  width: 23px !important;
  height: 6px !important;
  bottom: 14px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: #9b4d5b !important;
  box-shadow:
    -7px -5px 0 #9b4d5b,
    7px -5px 0 #9b4d5b !important;
}

#studentPage .pixel-avatar-character-v6.mouth-2
.pixel-face-front .avatar-mouth {
  width: 27px !important;
  height: 9px !important;
  background-color: #ffffff !important;
  border: 4px solid #9b4d5b !important;
  box-shadow: none !important;
}

#studentPage .pixel-avatar-character-v6.mouth-3
.pixel-face-front .avatar-mouth {
  width: 24px !important;
  height: 4px !important;
  box-shadow: none !important;
}

#studentPage .pixel-avatar-character-v6.mouth-4
.pixel-face-front .avatar-mouth {
  width: 11px !important;
  height: 11px !important;
  border: 3px solid #9b4d5b !important;
  box-shadow: none !important;
}

/* ผมเป็นขั้นบล็อกชัดขึ้น */
#studentPage .pixel-hair-fringe {
  gap: 2px;
}

#studentPage .pixel-hair-fringe span {
  width: 16px !important;
  border-radius: 0 !important;
  box-shadow: 3px 3px 0 rgba(25,18,38,.16);
}

/* ลำตัวและอุปกรณ์เป็นทรงเกมบล็อก */
#studentPage .pixel-chest-band,
#studentPage .pixel-back-emblem,
#studentPage .pixel-weapon-grip,
#studentPage .pixel-weapon-core {
  border-radius: 0 !important;
}

#studentPage .pixel-weapon-core {
  box-shadow:
    inset 0 -14px 0 var(--weapon-secondary),
    6px 6px 0 rgba(42,31,73,.20) !important;
}

#studentPage .pixel-avatar-toolbar {
  border-radius: 6px !important;
  box-shadow: 5px 5px 0 rgba(54,41,95,.16) !important;
}

#studentPage .pixel-avatar-toolbar button {
  border-radius: 3px !important;
}

/* กรอบแจ้งสิทธิ์เปลี่ยนอาชีพ */
#studentPage .avatar-job-change-policy {
  margin-top: 12px;
  min-height: 58px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 2px solid #ddd6ef;
  border-radius: 13px;
  color: #5d5373;
  background-color: #f8f6ff;
}

#studentPage .avatar-job-change-policy > i {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: #ffffff;
  background-color: #6c55e8;
  box-shadow: 0 4px 0 #4936ad;
}

#studentPage .avatar-job-change-policy strong,
#studentPage .avatar-job-change-policy span {
  display: block;
}

#studentPage .avatar-job-change-policy strong {
  color: #352a56;
  font-size:13px;
  font-weight: 900;
}

#studentPage .avatar-job-change-policy span {
  margin-top: 3px;
  color: #756b8c;
  font-size:13px;
  line-height: 1.4;
}

#studentPage .avatar-job-change-policy.is-free {
  border-color: #9cdec6;
  background-color: #edfff8;
}

#studentPage .avatar-job-change-policy.is-free > i {
  background-color: #31b982;
  box-shadow: 0 4px 0 #20845d;
}

#studentPage .avatar-job-change-policy.is-paid {
  border-color: #f0cf72;
  background-color: #fff8d9;
}

#studentPage .avatar-job-change-policy.is-paid > i {
  color: #684a00;
  background-color: #ffd45c;
  box-shadow: 0 4px 0 #c69720;
}

/* รายการธุรกรรมเปลี่ยนอาชีพ */
#studentPage .avatar-transaction-item.is-job-change
.avatar-transaction-icon {
  color: #5039b3;
  background-color: #e4dcff;
}

#studentPage .avatar-transaction-item.is-job-change
.avatar-transaction-amount {
  color: #b06d00;
}

@media (max-width: 640px) {
  #studentPage .pixel-avatar-stage-v6 {
    min-height: 295px !important;
    height: 295px !important;
  }

  #studentPage .pixel-avatar-rig {
    --avatar-scale-v7: .72;
    top: -18px !important;
  }
}



/* ============================================================
   VOXEL BLOCK AVATAR V8
   Original block-game proportions / 360° / idle breathing
============================================================ */

#studentPage .voxel-avatar-stage-v8 {
  --avatar-glow: #ffd45c;
  position: relative;
  height: 334px !important;
  min-height: 334px !important;
  padding: 38px 8px 29px !important;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 3px solid #ffffff;
  border-radius: 18px;
  background-color: #e8e4f7 !important;
  box-shadow:
    inset 0 0 0 2px #cfc7e8,
    0 8px 0 #c8bfdf;
  perspective: 920px;
}

#studentPage .voxel-avatar-stage-v8::before {
  content: "";
  position: absolute;
  inset: 13px;
  border: 2px solid #c7bde6;
  border-radius: 7px;
  pointer-events: none;
}

#studentPage .voxel-avatar-stage-v8::after {
  content: "";
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 20px;
  width: 155px;
  height: 20px;
  background-color: rgba(42, 33, 61, .18) !important;
  transform: translateX(-50%) skewX(-18deg);
}

#studentPage .voxel-avatar-toolbar-v8 {
  position: absolute;
  z-index: 40;
  top: 10px;
  right: 10px;
  display: flex;
  gap: 4px;
  padding: 5px;
  border: 2px solid #d5cceb;
  border-radius: 5px;
  background-color: #ffffff !important;
  box-shadow: 5px 5px 0 rgba(50, 38, 76, .16);
}

#studentPage .voxel-avatar-toolbar-v8 button {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 2px;
  color: #5e5377;
  background-color: #efecf8 !important;
  cursor: pointer;
}

#studentPage .voxel-avatar-toolbar-v8 button:hover {
  color: #ffffff;
  background-color: #6c55e8 !important;
}

#studentPage .voxel-avatar-toolbar-v8 button.active {
  color: #ffffff;
  background-color: #31b982 !important;
  box-shadow: inset 0 -4px 0 #20845d;
}

#studentPage .voxel-avatar-scene-v8 {
  position: relative;
  z-index: 10;
  width: 270px;
  height: 280px;
  display: grid;
  place-items: center;
  outline: none;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

#studentPage .voxel-avatar-scene-v8.is-dragging {
  cursor: grabbing;
}

#studentPage .voxel-avatar-scene-v8:focus-visible {
  box-shadow: 0 0 0 4px rgba(108, 85, 232, .23);
}

#studentPage .voxel-avatar-character-v8 {
  --avatar-primary: #38bfc7;
  --avatar-secondary: #2397b2;
  --avatar-skin: #e7aa7e;
  --avatar-skin-side: #c67f58;
  --avatar-skin-top: #f3bf98;
  --avatar-hair: #553624;
  --avatar-hair-side: #382218;
  position: relative !important;
  width: 240px !important;
  height: 330px !important;
  display: block !important;
  transform: none !important;
  filter:
    drop-shadow(0 12px 9px rgba(38, 28, 57, .20)) !important;
}

#studentPage .voxel-avatar-character-v8.skin-1 {
  --avatar-skin: #f3c2a0;
  --avatar-skin-side: #d89a72;
  --avatar-skin-top: #ffd3b5;
}

#studentPage .voxel-avatar-character-v8.skin-2 {
  --avatar-skin: #e7aa7e;
  --avatar-skin-side: #c67f58;
  --avatar-skin-top: #f3bf98;
}

#studentPage .voxel-avatar-character-v8.skin-3 {
  --avatar-skin: #ce8e62;
  --avatar-skin-side: #aa6845;
  --avatar-skin-top: #dfa077;
}

#studentPage .voxel-avatar-character-v8.skin-4 {
  --avatar-skin: #a86643;
  --avatar-skin-side: #81492f;
  --avatar-skin-top: #bc7b56;
}

#studentPage .voxel-avatar-character-v8.skin-5 {
  --avatar-skin: #74452c;
  --avatar-skin-side: #53301e;
  --avatar-skin-top: #89593a;
}

#studentPage .voxel-avatar-character-v8.hair-color-1 {
  --avatar-hair: #33241d;
  --avatar-hair-side: #211611;
}

#studentPage .voxel-avatar-character-v8.hair-color-2 {
  --avatar-hair: #68432e;
  --avatar-hair-side: #452b1e;
}

#studentPage .voxel-avatar-character-v8.hair-color-3 {
  --avatar-hair: #c58b35;
  --avatar-hair-side: #8f6121;
}

#studentPage .voxel-avatar-character-v8.hair-color-4 {
  --avatar-hair: #65418f;
  --avatar-hair-side: #442a65;
}

#studentPage .voxel-avatar-character-v8.hair-color-5 {
  --avatar-hair: #2c77a8;
  --avatar-hair-side: #1b5279;
}

#studentPage .voxel-avatar-character-v8.hair-color-6 {
  --avatar-hair: #be5683;
  --avatar-hair-side: #883857;
}

#studentPage .voxel-avatar-rig-v8 {
  --avatar-rotation-y: -18deg;
  --voxel-scale-v8: .80;
  position: absolute;
  left: 0;
  top: -8px;
  width: 240px;
  height: 330px;
  transform-style: preserve-3d;
  transform:
    scale(var(--voxel-scale-v8))
    rotateX(-4deg)
    rotateY(var(--avatar-rotation-y));
  transform-origin: 50% 52%;
  will-change: transform;
}

#studentPage .voxel-avatar-rig-v8.is-smooth-rotate {
  transition: transform .34s steps(10, end);
}

#studentPage .voxel-lower-static-v8,
#studentPage .voxel-upper-idle-v8 {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

#studentPage .voxel-upper-idle-v8 {
  transform-origin: 50% 214px;
  animation: voxelUpperBreathV8 2.15s ease-in-out infinite;
  will-change: transform;
}

#studentPage .voxel-avatar-scene-v8.is-dragging
.voxel-upper-idle-v8 {
  animation-play-state: paused;
}

@keyframes voxelUpperBreathV8 {
  0%, 100% {
    transform: translateY(0) scaleY(1);
  }
  50% {
    transform: translateY(-2px) scaleY(1.012);
  }
}

#studentPage .voxel-cube-v8 {
  --w: 40px;
  --h: 40px;
  --d: 40px;
  position: absolute;
  width: var(--w);
  height: var(--h);
  transform-style: preserve-3d;
}

#studentPage .voxel-face-v8 {
  position: absolute;
  display: block;
  overflow: hidden;
  border: 1px solid rgba(37, 28, 49, .34);
  border-radius: 0;
  box-sizing: border-box;
  backface-visibility: hidden;
  image-rendering: pixelated;
  box-shadow:
    inset -4px -4px 0 rgba(27, 20, 37, .09),
    inset 3px 3px 0 rgba(255, 255, 255, .07);
}

#studentPage .voxel-cube-v8 .face-front,
#studentPage .voxel-cube-v8 .face-back {
  left: 0;
  top: 0;
  width: var(--w);
  height: var(--h);
}

#studentPage .voxel-cube-v8 .face-left,
#studentPage .voxel-cube-v8 .face-right {
  left: calc((var(--w) - var(--d)) / 2);
  top: 0;
  width: var(--d);
  height: var(--h);
}

#studentPage .voxel-cube-v8 .face-top,
#studentPage .voxel-cube-v8 .face-bottom {
  left: 0;
  top: calc((var(--h) - var(--d)) / 2);
  width: var(--w);
  height: var(--d);
}

#studentPage .voxel-cube-v8 .face-front {
  transform: translateZ(calc(var(--d) / 2));
}

#studentPage .voxel-cube-v8 .face-back {
  transform:
    rotateY(180deg)
    translateZ(calc(var(--d) / 2));
}

#studentPage .voxel-cube-v8 .face-left {
  transform:
    rotateY(-90deg)
    translateZ(calc(var(--w) / 2));
}

#studentPage .voxel-cube-v8 .face-right {
  transform:
    rotateY(90deg)
    translateZ(calc(var(--w) / 2));
}

#studentPage .voxel-cube-v8 .face-top {
  transform:
    rotateX(90deg)
    translateZ(calc(var(--h) / 2));
}

#studentPage .voxel-cube-v8 .face-bottom {
  transform:
    rotateX(-90deg)
    translateZ(calc(var(--h) / 2));
}

/* Head: cube-like proportions */
#studentPage .voxel-head-block-v8 {
  --w: 92px;
  --h: 92px;
  --d: 92px;
  left: 74px;
  top: 10px;
}

#studentPage .voxel-head-block-v8 .voxel-face-v8 {
  background-color: var(--avatar-skin) !important;
}

#studentPage .voxel-head-block-v8 .face-left,
#studentPage .voxel-head-block-v8 .face-right,
#studentPage .voxel-head-block-v8 .face-back {
  background-color: var(--avatar-skin-side) !important;
}

#studentPage .voxel-head-block-v8 .face-top {
  background-color: var(--avatar-skin-top) !important;
}

/* Hair shell */
#studentPage .voxel-hair-block-v8 {
  --w: 98px;
  --h: 34px;
  --d: 98px;
  left: 71px;
  top: 4px;
  z-index: 9;
}

#studentPage .voxel-hair-block-v8 .voxel-face-v8 {
  background-color: var(--avatar-hair) !important;
}

#studentPage .voxel-hair-block-v8 .face-left,
#studentPage .voxel-hair-block-v8 .face-right,
#studentPage .voxel-hair-block-v8 .face-back {
  background-color: var(--avatar-hair-side) !important;
}

#studentPage .voxel-hair-fringe-v8 {
  position: absolute;
  left: 3px;
  right: 3px;
  bottom: -18px;
  height: 22px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  align-items: start;
  gap: 0;
}

#studentPage .voxel-hair-fringe-v8 span {
  display: block;
  height: 10px;
  background-color: var(--avatar-hair) !important;
}

#studentPage .voxel-hair-fringe-v8 span:nth-child(2),
#studentPage .voxel-hair-fringe-v8 span:nth-child(5) {
  height: 18px;
}

#studentPage .voxel-avatar-character-v8.hair-2
.voxel-hair-fringe-v8 span:nth-child(odd) {
  height: 21px;
}

#studentPage .voxel-avatar-character-v8.hair-3
.voxel-hair-block-v8 {
  transform: rotateZ(-3deg);
}

#studentPage .voxel-avatar-character-v8.hair-3
.voxel-hair-fringe-v8 span:first-child,
#studentPage .voxel-avatar-character-v8.hair-3
.voxel-hair-fringe-v8 span:nth-child(2) {
  height: 22px;
}

#studentPage .voxel-avatar-character-v8.hair-4
.voxel-hair-block-v8 {
  --h: 48px;
}

#studentPage .voxel-avatar-character-v8.hair-5
.voxel-hair-fringe-v8 span:nth-child(even) {
  height: 22px;
}

/* Pixel face */
#studentPage .voxel-head-block-v8 .face-front {
  overflow: visible;
}

#studentPage .voxel-head-block-v8 .avatar-eye {
  position: absolute;
  top: 39px;
  width: 13px;
  height: 10px;
  border-radius: 0;
  background-color: #ffffff !important;
  border-right: 7px solid #304a91;
  box-shadow:
    0 0 0 2px rgba(48, 32, 43, .12);
  animation: voxelBlinkV8 5.2s steps(1, end) infinite;
  transform-origin: center;
}

#studentPage .voxel-head-block-v8 .avatar-eye-left {
  left: 22px;
}

#studentPage .voxel-head-block-v8 .avatar-eye-right {
  right: 22px;
}

@keyframes voxelBlinkV8 {
  0%, 46%, 50%, 100% {
    transform: scaleY(1);
  }
  47%, 49% {
    transform: scaleY(.16);
  }
}

#studentPage .voxel-head-block-v8 .avatar-mouth {
  position: absolute;
  left: 50%;
  bottom: 18px;
  width: 26px;
  height: 5px;
  border: 0;
  border-radius: 0;
  background-color: #704236 !important;
  transform: translateX(-50%);
}

#studentPage .voxel-avatar-character-v8.mouth-1
.voxel-head-block-v8 .avatar-mouth::before,
#studentPage .voxel-avatar-character-v8.mouth-1
.voxel-head-block-v8 .avatar-mouth::after {
  content: "";
  position: absolute;
  top: -4px;
  width: 6px;
  height: 4px;
  background-color: #704236 !important;
}

#studentPage .voxel-avatar-character-v8.mouth-1
.voxel-head-block-v8 .avatar-mouth::before {
  left: -5px;
}

#studentPage .voxel-avatar-character-v8.mouth-1
.voxel-head-block-v8 .avatar-mouth::after {
  right: -5px;
}

#studentPage .voxel-avatar-character-v8.mouth-2
.voxel-head-block-v8 .avatar-mouth {
  height: 10px;
  background-color: #ffffff !important;
  border: 4px solid #704236;
}

#studentPage .voxel-avatar-character-v8.mouth-3
.voxel-head-block-v8 .avatar-mouth {
  width: 20px;
  height: 4px;
}

#studentPage .voxel-avatar-character-v8.mouth-4
.voxel-head-block-v8 .avatar-mouth {
  width: 10px;
  height: 10px;
  border: 3px solid #704236;
  background-color: #3f2726 !important;
}

#studentPage .voxel-avatar-character-v8.face-2
.voxel-head-block-v8 .face-front::before,
#studentPage .voxel-avatar-character-v8.face-2
.voxel-head-block-v8 .face-front::after {
  content: "";
  position: absolute;
  top: 57px;
  width: 12px;
  height: 5px;
  background-color: rgba(204, 102, 109, .38) !important;
}

#studentPage .voxel-avatar-character-v8.face-2
.voxel-head-block-v8 .face-front::before {
  left: 7px;
}

#studentPage .voxel-avatar-character-v8.face-2
.voxel-head-block-v8 .face-front::after {
  right: 7px;
}

#studentPage .voxel-avatar-character-v8.face-3
.avatar-face-detail::before {
  content: "▪ ▪ ▪";
  position: absolute;
  left: 50%;
  top: 57px;
  color: rgba(91, 53, 41, .64);
  font-size:13px;
  letter-spacing: 3px;
  transform: translateX(-50%);
}

/* Torso */
#studentPage .voxel-torso-block-v8 {
  --w: 82px;
  --h: 104px;
  --d: 44px;
  left: 79px;
  top: 108px;
}

#studentPage .voxel-torso-block-v8 .voxel-face-v8 {
  background-color: var(--avatar-primary) !important;
}

#studentPage .voxel-torso-block-v8 .face-left,
#studentPage .voxel-torso-block-v8 .face-right,
#studentPage .voxel-torso-block-v8 .face-back {
  background-color:
    color-mix(in srgb, var(--avatar-primary) 76%, #1d2530) !important;
}

#studentPage .voxel-torso-block-v8 .face-top {
  background-color:
    color-mix(in srgb, var(--avatar-primary) 82%, #ffffff) !important;
}

#studentPage .voxel-torso-block-v8 .face-bottom {
  background-color: var(--avatar-secondary) !important;
}

#studentPage .voxel-shirt-light-v8 {
  position: absolute;
  left: 7px;
  top: 7px;
  width: 50px;
  height: 8px;
  background-color: rgba(255, 255, 255, .16) !important;
}

#studentPage .voxel-shirt-pixel-v8 {
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: var(--avatar-secondary) !important;
}

#studentPage .voxel-shirt-pixel-v8.pixel-one {
  left: 8px;
  bottom: 9px;
}

#studentPage .voxel-shirt-pixel-v8.pixel-two {
  left: 18px;
  bottom: 9px;
}

#studentPage .voxel-shirt-pixel-v8.pixel-three {
  right: 7px;
  top: 21px;
}

#studentPage .voxel-back-pixel-v8 {
  position: absolute;
  left: 14px;
  top: 19px;
  width: 28px;
  height: 28px;
  border: 7px solid rgba(255, 255, 255, .22);
}

#studentPage .voxel-back-pixel-v8.pixel-two {
  left: auto;
  right: 8px;
  top: auto;
  bottom: 8px;
  width: 12px;
  height: 12px;
  border: 0;
  background-color: var(--avatar-secondary) !important;
}

/* Original pixel job emblem — no Font Awesome on body */
#studentPage .voxel-job-emblem-v8 {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 38px;
  width: 24px;
  height: 24px;
  transform: translateX(-50%);
}

#studentPage .voxel-job-emblem-v8::before,
#studentPage .voxel-job-emblem-v8::after {
  content: "";
  position: absolute;
  background-color: #ffffff !important;
}

#studentPage .voxel-job-emblem-v8[data-job="fighter"]::before {
  left: 3px;
  top: 2px;
  width: 18px;
  height: 18px;
  clip-path: polygon(50% 0, 100% 20%, 88% 75%, 50% 100%, 12% 75%, 0 20%);
}

#studentPage .voxel-job-emblem-v8[data-job="fighter"]::after {
  left: 10px;
  top: 6px;
  width: 4px;
  height: 11px;
  background-color: var(--avatar-primary) !important;
}

#studentPage .voxel-job-emblem-v8[data-job="mage"]::before {
  left: 8px;
  top: 0;
  width: 8px;
  height: 24px;
}

#studentPage .voxel-job-emblem-v8[data-job="mage"]::after {
  left: 0;
  top: 8px;
  width: 24px;
  height: 8px;
}

#studentPage .voxel-job-emblem-v8[data-job="assassin"]::before {
  left: 9px;
  top: -2px;
  width: 6px;
  height: 28px;
  transform: rotate(45deg);
}

#studentPage .voxel-job-emblem-v8[data-job="assassin"]::after {
  left: 9px;
  top: -2px;
  width: 6px;
  height: 28px;
  transform: rotate(-45deg);
}

#studentPage .voxel-job-emblem-v8[data-job="support"]::before {
  left: 8px;
  top: 1px;
  width: 8px;
  height: 22px;
}

#studentPage .voxel-job-emblem-v8[data-job="support"]::after {
  left: 1px;
  top: 8px;
  width: 22px;
  height: 8px;
}

#studentPage .voxel-job-emblem-v8[data-job="carry"]::before {
  left: 1px;
  top: 9px;
  width: 22px;
  height: 6px;
  transform: rotate(-28deg);
}

#studentPage .voxel-job-emblem-v8[data-job="carry"]::after {
  right: 0;
  top: 2px;
  width: 10px;
  height: 10px;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* Arms and hands */
#studentPage .voxel-arm-block-v8 {
  --w: 36px;
  --h: 94px;
  --d: 36px;
  top: 111px;
  transform-origin: 50% 5px;
}

#studentPage .voxel-arm-left-v8 {
  left: 38px;
  transform: rotateZ(3deg);
}

#studentPage .voxel-arm-right-v8 {
  left: 166px;
  transform: rotateZ(-8deg);
}

#studentPage .voxel-arm-block-v8 .voxel-face-v8 {
  background-color: var(--avatar-primary) !important;
}

#studentPage .voxel-arm-block-v8 .face-left,
#studentPage .voxel-arm-block-v8 .face-right,
#studentPage .voxel-arm-block-v8 .face-back {
  background-color:
    color-mix(in srgb, var(--avatar-primary) 74%, #1b2530) !important;
}

#studentPage .voxel-hand-block-v8 {
  --w: 34px;
  --h: 31px;
  --d: 34px;
  top: 199px;
}

#studentPage .voxel-hand-left-v8 {
  left: 39px;
  transform: rotateZ(3deg);
}

#studentPage .voxel-hand-right-v8 {
  left: 167px;
  transform: rotateZ(-8deg);
}

#studentPage .voxel-hand-block-v8 .voxel-face-v8 {
  background-color: var(--avatar-skin) !important;
}

#studentPage .voxel-hand-block-v8 .face-left,
#studentPage .voxel-hand-block-v8 .face-right,
#studentPage .voxel-hand-block-v8 .face-back {
  background-color: var(--avatar-skin-side) !important;
}

/* Legs */
#studentPage .voxel-leg-block-v8 {
  --w: 39px;
  --h: 108px;
  --d: 39px;
  top: 216px;
}

#studentPage .voxel-leg-left-v8 {
  left: 80px;
}

#studentPage .voxel-leg-right-v8 {
  left: 121px;
}

#studentPage .voxel-leg-block-v8 .voxel-face-v8 {
  background-color: #3f4594 !important;
}

#studentPage .voxel-leg-block-v8 .face-left,
#studentPage .voxel-leg-block-v8 .face-right,
#studentPage .voxel-leg-block-v8 .face-back {
  background-color: #2b316f !important;
}

#studentPage .voxel-leg-block-v8 .face-front::after,
#studentPage .voxel-leg-block-v8 .face-left::after,
#studentPage .voxel-leg-block-v8 .face-right::after,
#studentPage .voxel-leg-block-v8 .face-back::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 17px;
  background-color: #51545a !important;
}

#studentPage .voxel-leg-block-v8 .face-bottom {
  background-color: #35383e !important;
}

/* Subtle job pose differences */
#studentPage .voxel-avatar-character-v8.job-fighter
.voxel-arm-right-v8,
#studentPage .voxel-avatar-character-v8.job-fighter
.voxel-hand-right-v8 {
  transform: rotateZ(-14deg);
}

#studentPage .voxel-avatar-character-v8.job-mage
.voxel-arm-right-v8,
#studentPage .voxel-avatar-character-v8.job-mage
.voxel-hand-right-v8 {
  transform: rotateZ(-18deg);
}

#studentPage .voxel-avatar-character-v8.job-assassin
.voxel-arm-left-v8,
#studentPage .voxel-avatar-character-v8.job-assassin
.voxel-hand-left-v8 {
  transform: rotateZ(10deg);
}

#studentPage .voxel-avatar-character-v8.gender-female
.voxel-torso-block-v8 {
  --w: 78px;
  left: 81px;
}

/* Weapon container */
#studentPage .voxel-avatar-weapon-v8 {
  --weapon-primary: #d8d8d8;
  --weapon-secondary: #68d6ef;
  position: absolute;
  z-index: 22;
  right: 2px;
  top: 126px;
  width: 82px;
  height: 118px;
  transform:
    translateZ(36px)
    rotateZ(-18deg);
  transform-style: preserve-3d;
  pointer-events: none;
}

#studentPage .voxel-avatar-weapon-v8 span {
  position: absolute;
  display: block;
  border: 1px solid rgba(32, 25, 42, .34);
  box-shadow:
    inset -3px -3px 0 rgba(25, 19, 32, .14),
    3px 3px 0 rgba(30, 22, 44, .16);
}

/* Sword */
#studentPage .voxel-sword-shape-v8 {
  position: absolute;
  inset: 0;
  transform: rotate(-1deg);
}

#studentPage .voxel-sword-shape-v8 .sword-pixel {
  width: 17px;
  height: 17px;
  background-color: var(--weapon-primary) !important;
}

#studentPage .voxel-sword-shape-v8 .p1 { left: 45px; top: 0; }
#studentPage .voxel-sword-shape-v8 .p2 { left: 36px; top: 14px; }
#studentPage .voxel-sword-shape-v8 .p3 { left: 27px; top: 28px; }
#studentPage .voxel-sword-shape-v8 .p4 { left: 18px; top: 42px; }
#studentPage .voxel-sword-shape-v8 .p5 { left: 9px; top: 56px; }

#studentPage .voxel-sword-shape-v8 .sword-guard {
  left: 0;
  top: 69px;
  width: 48px;
  height: 12px;
  background-color: var(--weapon-secondary) !important;
}

#studentPage .voxel-sword-shape-v8 .sword-grip {
  left: 15px;
  top: 79px;
  width: 12px;
  height: 28px;
  background-color: #714a2c !important;
}

#studentPage .voxel-sword-shape-v8 .sword-pommel {
  left: 11px;
  top: 104px;
  width: 20px;
  height: 12px;
  background-color: var(--weapon-secondary) !important;
}

/* Staff */
#studentPage .voxel-staff-shape-v8 .staff-pole {
  left: 34px;
  top: 28px;
  width: 12px;
  height: 88px;
  background-color: #704b2e !important;
}

#studentPage .voxel-staff-shape-v8 .staff-head {
  width: 20px;
  height: 20px;
  background-color: var(--weapon-primary) !important;
}

#studentPage .voxel-staff-shape-v8 .h1 { left: 14px; top: 4px; }
#studentPage .voxel-staff-shape-v8 .h2 { left: 34px; top: 4px; }
#studentPage .voxel-staff-shape-v8 .h3 { left: 54px; top: 4px; }

#studentPage .voxel-staff-shape-v8 .staff-gem {
  left: 31px;
  top: 0;
  width: 27px;
  height: 27px;
  background-color: var(--weapon-secondary) !important;
  transform: rotate(45deg);
  animation: voxelWeaponPulseV8 1.5s steps(4, end) infinite;
}

#studentPage .voxel-staff-shape-v8 .staff-spark {
  width: 8px;
  height: 8px;
  background-color: #ffffff !important;
  animation: voxelWeaponSparkV8 1.2s steps(2, end) infinite;
}

#studentPage .voxel-staff-shape-v8 .s1 {
  left: 8px;
  top: 17px;
}

#studentPage .voxel-staff-shape-v8 .s2 {
  right: 3px;
  top: 31px;
  animation-delay: .35s;
}

@keyframes voxelWeaponPulseV8 {
  0%, 100% { transform: rotate(45deg) scale(1); }
  50% { transform: rotate(45deg) scale(1.13); }
}

@keyframes voxelWeaponSparkV8 {
  0%, 100% { opacity: .25; }
  50% { opacity: 1; }
}

/* Twin blades */
#studentPage .voxel-blades-shape-v8 .blade {
  width: 16px;
  height: 58px;
  background-color: var(--weapon-primary) !important;
}

#studentPage .voxel-blades-shape-v8 .blade-one {
  left: 19px;
  top: 6px;
  transform: rotate(35deg);
}

#studentPage .voxel-blades-shape-v8 .blade-two {
  right: 16px;
  top: 11px;
  transform: rotate(-35deg);
}

#studentPage .voxel-blades-shape-v8 .blade-grip {
  width: 12px;
  height: 32px;
  background-color: #583b2b !important;
}

#studentPage .voxel-blades-shape-v8 .grip-one {
  left: 15px;
  top: 59px;
  transform: rotate(35deg);
}

#studentPage .voxel-blades-shape-v8 .grip-two {
  right: 12px;
  top: 64px;
  transform: rotate(-35deg);
}

/* Bow */
#studentPage .voxel-bow-shape-v8 .bow-block {
  width: 16px;
  height: 31px;
  background-color: var(--weapon-primary) !important;
}

#studentPage .voxel-bow-shape-v8 .b1 {
  left: 18px;
  top: 3px;
  transform: rotate(28deg);
}

#studentPage .voxel-bow-shape-v8 .b2 {
  left: 8px;
  top: 31px;
  transform: rotate(8deg);
}

#studentPage .voxel-bow-shape-v8 .b3 {
  left: 10px;
  top: 61px;
  transform: rotate(-10deg);
}

#studentPage .voxel-bow-shape-v8 .b4 {
  left: 21px;
  top: 88px;
  transform: rotate(-30deg);
}

#studentPage .voxel-bow-shape-v8 .bow-string {
  left: 40px;
  top: 13px;
  width: 3px;
  height: 88px;
  border: 0;
  background-color: #f4efe5 !important;
  box-shadow: none;
}

#studentPage .voxel-bow-shape-v8 .bow-arrow {
  left: 20px;
  top: 54px;
  width: 57px;
  height: 5px;
  border: 0;
  background-color: #6e4b2c !important;
  box-shadow: none;
}

#studentPage .voxel-bow-shape-v8 .bow-arrow-head {
  right: 0;
  top: 49px;
  width: 15px;
  height: 15px;
  background-color: var(--weapon-secondary) !important;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* Unarmed fist */
#studentPage .voxel-fist-shape-v8 {
  position: absolute;
  right: 14px;
  top: 41px;
  width: 43px;
  height: 43px;
}

#studentPage .voxel-fist-shape-v8 span {
  width: 18px;
  height: 18px;
  background-color: var(--avatar-skin) !important;
}

#studentPage .voxel-fist-shape-v8 span:nth-child(1) {
  left: 0;
  top: 0;
}

#studentPage .voxel-fist-shape-v8 span:nth-child(2) {
  left: 18px;
  top: 0;
}

#studentPage .voxel-fist-shape-v8 span:nth-child(3) {
  left: 9px;
  top: 18px;
}

/* Front accessories */
#studentPage .voxel-avatar-accessory-front-v8 {
  position: absolute;
  z-index: 30;
  inset: 0;
  pointer-events: none;
}

#studentPage .voxel-glasses-lens-v8 {
  position: absolute;
  top: 33px;
  width: 27px;
  height: 19px;
  border: 5px solid #34383d;
  background-color: rgba(183, 224, 240, .25) !important;
}

#studentPage .voxel-glasses-lens-v8.lens-left {
  left: 13px;
}

#studentPage .voxel-glasses-lens-v8.lens-right {
  right: 13px;
}

#studentPage .voxel-glasses-bridge-v8 {
  position: absolute;
  left: 38px;
  top: 41px;
  width: 16px;
  height: 5px;
  background-color: #34383d !important;
}

#studentPage .voxel-crown-base-v8 {
  position: absolute;
  left: 14px;
  top: -17px;
  width: 64px;
  height: 15px;
  background-color: #f3c531 !important;
  box-shadow: 4px 4px 0 rgba(67, 47, 10, .18);
}

#studentPage .voxel-crown-prong-v8 {
  position: absolute;
  top: -37px;
  width: 15px;
  height: 23px;
  background-color: #f3c531 !important;
}

#studentPage .voxel-crown-prong-v8.prong-one { left: 14px; }
#studentPage .voxel-crown-prong-v8.prong-two { left: 38px; height: 30px; top: -44px; }
#studentPage .voxel-crown-prong-v8.prong-three { right: 14px; }

#studentPage .voxel-crown-gem-v8 {
  position: absolute;
  left: 41px;
  top: -13px;
  width: 10px;
  height: 10px;
  background-color: #e24b5c !important;
}

/* Back accessories */
#studentPage .voxel-avatar-accessory-back-v8 {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 115px;
  width: 230px;
  height: 120px;
  transform:
    translateX(-50%)
    translateZ(-30px);
  transform-style: preserve-3d;
  pointer-events: none;
}

#studentPage .voxel-wing-v8 {
  position: absolute;
  top: 5px;
  width: 75px;
  height: 92px;
}

#studentPage .voxel-wing-v8.wing-left {
  left: 0;
  transform: rotateZ(-13deg);
}

#studentPage .voxel-wing-v8.wing-right {
  right: 0;
  transform: rotateZ(13deg) scaleX(-1);
}

#studentPage .voxel-wing-v8 i {
  position: absolute;
  display: block;
  background-color: #f5f7ff !important;
  border: 2px solid #aeb8d0;
  box-shadow: 4px 4px 0 rgba(52, 60, 83, .14);
}

#studentPage .voxel-wing-v8 i:nth-child(1) {
  left: 5px;
  top: 5px;
  width: 31px;
  height: 22px;
}

#studentPage .voxel-wing-v8 i:nth-child(2) {
  left: 19px;
  top: 24px;
  width: 43px;
  height: 24px;
}

#studentPage .voxel-wing-v8 i:nth-child(3) {
  left: 28px;
  top: 46px;
  width: 39px;
  height: 22px;
}

#studentPage .voxel-wing-v8 i:nth-child(4) {
  left: 38px;
  top: 66px;
  width: 28px;
  height: 20px;
}

#studentPage .voxel-cape-v8 {
  position: absolute;
  left: 71px;
  top: 3px;
  width: 88px;
  height: 112px;
  background-color: #b83a4c !important;
  border: 3px solid #7e2634;
  box-shadow: inset -10px -10px 0 rgba(62, 18, 29, .18);
}

#studentPage .voxel-cape-v8 i {
  position: absolute;
  display: block;
  bottom: -3px;
  width: 29px;
  height: 18px;
  background-color: #8e2a3c !important;
}

#studentPage .voxel-cape-v8 i:nth-child(1) { left: 0; }
#studentPage .voxel-cape-v8 i:nth-child(2) { left: 29px; height: 11px; }
#studentPage .voxel-cape-v8 i:nth-child(3) { right: 0; }

#studentPage .voxel-accessory-badge-v8 {
  position: absolute;
  left: 38px;
  top: -17px;
  width: 17px;
  height: 17px;
  background-color: #ffd45c !important;
  transform: rotate(45deg);
}

/* Aura */
#studentPage .voxel-avatar-stage-v8 .avatar-aura-visual {
  z-index: 5;
  width: 242px;
  height: 242px;
  border-radius: 0;
  transform: translate(-50%, -50%) rotate(45deg);
}

#studentPage .voxel-avatar-stage-v8
.avatar-aura-visual.is-active {
  border-color: var(--avatar-glow);
  box-shadow:
    0 0 20px var(--avatar-glow),
    inset 0 0 18px var(--avatar-glow);
  animation: voxelAuraPulseV8 1.8s steps(5, end) infinite;
}

@keyframes voxelAuraPulseV8 {
  0%, 100% { opacity: .48; }
  50% { opacity: 1; }
}

/* Hint */
#studentPage .voxel-avatar-rotation-hint-v8 {
  position: absolute;
  z-index: 32;
  left: 50%;
  bottom: 5px;
  min-height: 25px;
  padding: 4px 9px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #cfc6e7;
  border-radius: 3px;
  color: #625779;
  background-color: rgba(255, 255, 255, .92) !important;
  box-shadow: 3px 3px 0 #c7bddf;
  font-size:13px;
  font-weight: 800;
  white-space: nowrap;
  transform: translateX(-50%);
}

@media (max-width: 640px) {
  #studentPage .voxel-avatar-stage-v8 {
    height: 315px !important;
    min-height: 315px !important;
  }

  #studentPage .voxel-avatar-rig-v8 {
    --voxel-scale-v8: .72;
    top: -14px;
  }

  #studentPage .voxel-avatar-toolbar-v8 button {
    width: 31px;
    height: 31px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #studentPage .voxel-upper-idle-v8,
  #studentPage .voxel-head-block-v8 .avatar-eye,
  #studentPage .voxel-staff-shape-v8 .staff-gem,
  #studentPage .voxel-staff-shape-v8 .staff-spark,
  #studentPage .voxel-avatar-stage-v8 .avatar-aura-visual {
    animation: none !important;
  }

  #studentPage .voxel-avatar-rig-v8.is-smooth-rotate {
    transition: none !important;
  }
}



/* ============================================================
   VOXEL BLOCK AVATAR V8.1 — FACE DETAIL + FULL BODY + ITEM SHAPES
============================================================ */

/* ปลดความสูงคงที่ และปล่อยให้หน้าเลื่อนได้ตามธรรมชาติ */
#studentPage #avatarContentBox:not(.hidden) {
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  align-items: start !important;
}

#studentPage #avatarContentBox > .avatar-hero-grid {
  position: relative !important;
  top: auto !important;
  height: auto !important;
  overflow: visible !important;
  align-self: start !important;
}

#studentPage .avatar-left-sticky-scroll,
#studentPage .avatar-workspace-panel {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  padding-right: 0 !important;
}

#studentPage .avatar-left-sticky-scroll::-webkit-scrollbar,
#studentPage .avatar-workspace-panel::-webkit-scrollbar {
  width: 0 !important;
  display: none !important;
}

/* เวทีอวาตาร์สูงขึ้น เห็นรองเท้าเต็ม */
#studentPage .voxel-avatar-stage-v8 {
  height: 420px !important;
  min-height: 420px !important;
  padding: 42px 10px 38px !important;
}

#studentPage .voxel-avatar-stage-v8::after {
  bottom: 26px;
}

#studentPage .voxel-avatar-scene-v8 {
  width: 282px;
  height: 352px;
}

#studentPage .voxel-avatar-rig-v8 {
  --voxel-scale-v8: .84;
  top: -4px;
}

#studentPage .voxel-avatar-character-v8 {
  height: 342px !important;
}

#studentPage .voxel-avatar-rotation-hint-v8 {
  bottom: 7px;
}

/* หน้า: เพิ่มรายละเอียดให้ชัดขึ้น */
#studentPage .voxel-head-block-v8 .avatar-eye {
  width: 14px;
  height: 9px;
  border-right-width: 8px;
  box-shadow: 0 0 0 2px rgba(48, 32, 43, .10);
}

/* ตายิ้มโค้ง */
#studentPage .voxel-avatar-character-v8.eye-2 .voxel-head-block-v8 .avatar-eye {
  top: 41px;
  width: 18px;
  height: 10px;
  border: 0;
  background: transparent !important;
  box-shadow: none;
  border-bottom: 4px solid #334982;
  border-radius: 0 0 14px 14px;
}
#studentPage .voxel-avatar-character-v8.eye-2 .voxel-head-block-v8 .avatar-eye-left { left: 17px; }
#studentPage .voxel-avatar-character-v8.eye-2 .voxel-head-block-v8 .avatar-eye-right { right: 17px; }

/* ตามั่นใจ */
#studentPage .voxel-avatar-character-v8.eye-3 .voxel-head-block-v8 .avatar-eye {
  top: 40px;
  width: 16px;
  height: 8px;
  border: 0;
  background-color: #2f447e !important;
  transform: skewX(-18deg);
  box-shadow: 0 0 0 2px rgba(255,255,255,.18) inset;
}
#studentPage .voxel-avatar-character-v8.eye-3 .voxel-head-block-v8 .avatar-eye-right {
  transform: skewX(18deg);
}

/* ตาวิ้ง */
#studentPage .voxel-avatar-character-v8.eye-4 .voxel-head-block-v8 .avatar-eye-left {
  width: 18px;
  height: 8px;
  border: 0;
  background: #304a91 !important;
}
#studentPage .voxel-avatar-character-v8.eye-4 .voxel-head-block-v8 .avatar-eye-right {
  width: 16px;
  height: 16px;
  border: 0;
  background: transparent !important;
  box-shadow: none;
}
#studentPage .voxel-avatar-character-v8.eye-4 .voxel-head-block-v8 .avatar-eye-right::before,
#studentPage .voxel-avatar-character-v8.eye-4 .voxel-head-block-v8 .avatar-eye-right::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 0;
  width: 3px;
  height: 16px;
  background: #304a91 !important;
}
#studentPage .voxel-avatar-character-v8.eye-4 .voxel-head-block-v8 .avatar-eye-right::before { transform: rotate(45deg); }
#studentPage .voxel-avatar-character-v8.eye-4 .voxel-head-block-v8 .avatar-eye-right::after { transform: rotate(-45deg); }

/* หลับตา */
#studentPage .voxel-avatar-character-v8.eye-5 .voxel-head-block-v8 .avatar-eye {
  top: 42px;
  width: 18px;
  height: 3px;
  border: 0;
  background-color: #6b4a45 !important;
  box-shadow: none;
}
#studentPage .voxel-avatar-character-v8.eye-5 .voxel-head-block-v8 .avatar-eye-left { left: 17px; transform: rotate(7deg); }
#studentPage .voxel-avatar-character-v8.eye-5 .voxel-head-block-v8 .avatar-eye-right { right: 17px; transform: rotate(-7deg); }

/* ปากยิ้มเด่นขึ้น */
#studentPage .voxel-head-block-v8 .avatar-mouth {
  bottom: 18px;
}
#studentPage .voxel-avatar-character-v8.mouth-1 .voxel-head-block-v8 .avatar-mouth {
  width: 24px;
  height: 4px;
  background: #75443b !important;
}
#studentPage .voxel-avatar-character-v8.mouth-1 .voxel-head-block-v8 .avatar-mouth::before,
#studentPage .voxel-avatar-character-v8.mouth-1 .voxel-head-block-v8 .avatar-mouth::after {
  top: -2px;
  width: 4px;
  height: 4px;
  background: #75443b !important;
}
#studentPage .voxel-avatar-character-v8.mouth-2 .voxel-head-block-v8 .avatar-mouth {
  width: 28px;
  height: 12px;
  border: 4px solid #7a463d;
  border-top: 0;
  background: #fff7f0 !important;
  border-radius: 0 0 10px 10px;
}
#studentPage .voxel-avatar-character-v8.mouth-2 .voxel-head-block-v8 .avatar-mouth::before {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  top: 4px;
  height: 3px;
  background: #d47a8a !important;
}
#studentPage .voxel-avatar-character-v8.mouth-3 .voxel-head-block-v8 .avatar-mouth {
  width: 18px;
  height: 4px;
  background: #6c4438 !important;
}
#studentPage .voxel-avatar-character-v8.mouth-4 .voxel-head-block-v8 .avatar-mouth {
  width: 12px;
  height: 10px;
  border: 3px solid #76473c;
  background: #4e2e2b !important;
}

/* ไพ่เทมตัวอย่างในร้านค้า เป็นรูปร่างจริงมากขึ้น */
#studentPage .avatar-item-icon {
  min-height: 94px;
  display: grid;
  place-items: center;
}

#studentPage .avatar-item-pixel-preview {
  position: relative;
  width: 76px;
  height: 76px;
  display: block;
  filter: drop-shadow(0 5px 0 rgba(90, 79, 124, .22));
}

#studentPage .avatar-item-pixel-preview span {
  position: absolute;
  display: block;
  box-sizing: border-box;
}

#studentPage .avatar-item-pixel-preview-outfit .shirt-body {
  left: 18px;
  top: 18px;
  width: 40px;
  height: 34px;
  border-radius: 6px;
  background: var(--item-primary);
  border-bottom: 8px solid var(--item-secondary);
}
#studentPage .avatar-item-pixel-preview-outfit .shirt-sleeve {
  top: 22px;
  width: 14px;
  height: 24px;
  background: var(--item-primary);
}
#studentPage .avatar-item-pixel-preview-outfit .shirt-sleeve.left { left: 6px; transform: skewY(12deg); }
#studentPage .avatar-item-pixel-preview-outfit .shirt-sleeve.right { right: 6px; transform: skewY(-12deg); }
#studentPage .avatar-item-pixel-preview-outfit .shirt-collar {
  left: 29px;
  top: 10px;
  width: 18px;
  height: 12px;
  background: #ffffff;
  clip-path: polygon(0 0,100% 0,70% 100%,30% 100%);
}

#studentPage .avatar-item-pixel-preview-weapon[data-kind="sword"] .blade,
#studentPage .avatar-item-pixel-preview-weapon[data-kind="sword"] .guard,
#studentPage .avatar-item-pixel-preview-weapon[data-kind="sword"] .grip,
#studentPage .avatar-item-pixel-preview-weapon[data-kind="sword"] .pommel {
  background: var(--item-primary);
}
#studentPage .avatar-item-pixel-preview-weapon[data-kind="sword"] .b1 { left: 42px; top: 6px; width: 10px; height: 10px; }
#studentPage .avatar-item-pixel-preview-weapon[data-kind="sword"] .b2 { left: 34px; top: 15px; width: 10px; height: 10px; }
#studentPage .avatar-item-pixel-preview-weapon[data-kind="sword"] .b3 { left: 26px; top: 24px; width: 10px; height: 20px; }
#studentPage .avatar-item-pixel-preview-weapon[data-kind="sword"] .guard { left: 18px; top: 42px; width: 26px; height: 8px; background: var(--item-secondary); }
#studentPage .avatar-item-pixel-preview-weapon[data-kind="sword"] .grip { left: 26px; top: 49px; width: 10px; height: 18px; background: #6d4b2c; }
#studentPage .avatar-item-pixel-preview-weapon[data-kind="sword"] .pommel { left: 22px; top: 64px; width: 18px; height: 8px; background: var(--item-secondary); }

#studentPage .avatar-item-pixel-preview-weapon[data-kind="staff"] .staff-pole { left: 34px; top: 20px; width: 8px; height: 48px; background: #6e4a2b; }
#studentPage .avatar-item-pixel-preview-weapon[data-kind="staff"] .staff-gem { left: 26px; top: 6px; width: 24px; height: 24px; background: var(--item-secondary); transform: rotate(45deg); }
#studentPage .avatar-item-pixel-preview-weapon[data-kind="staff"] .staff-wing { top: 10px; width: 10px; height: 10px; background: var(--item-primary); }
#studentPage .avatar-item-pixel-preview-weapon[data-kind="staff"] .staff-wing.left { left: 14px; }
#studentPage .avatar-item-pixel-preview-weapon[data-kind="staff"] .staff-wing.right { right: 14px; }

#studentPage .avatar-item-pixel-preview-weapon[data-kind="blades"] .dagger { width: 10px; height: 28px; background: var(--item-primary); }
#studentPage .avatar-item-pixel-preview-weapon[data-kind="blades"] .dagger.left { left: 24px; top: 14px; transform: rotate(25deg); }
#studentPage .avatar-item-pixel-preview-weapon[data-kind="blades"] .dagger.right { right: 24px; top: 14px; transform: rotate(-25deg); }
#studentPage .avatar-item-pixel-preview-weapon[data-kind="blades"] .dagger-grip { width: 8px; height: 16px; background: var(--item-secondary); }
#studentPage .avatar-item-pixel-preview-weapon[data-kind="blades"] .dagger-grip.left { left: 22px; top: 37px; transform: rotate(25deg); }
#studentPage .avatar-item-pixel-preview-weapon[data-kind="blades"] .dagger-grip.right { right: 22px; top: 37px; transform: rotate(-25deg); }

#studentPage .avatar-item-pixel-preview-weapon[data-kind="bow"] .bow-arc { width: 10px; height: 16px; background: var(--item-primary); }
#studentPage .avatar-item-pixel-preview-weapon[data-kind="bow"] .bow-arc.top { left: 22px; top: 12px; transform: rotate(22deg); }
#studentPage .avatar-item-pixel-preview-weapon[data-kind="bow"] .bow-arc.mid { left: 16px; top: 28px; width: 8px; height: 18px; }
#studentPage .avatar-item-pixel-preview-weapon[data-kind="bow"] .bow-arc.bot { left: 22px; top: 46px; transform: rotate(-22deg); }
#studentPage .avatar-item-pixel-preview-weapon[data-kind="bow"] .bow-string { left: 34px; top: 14px; width: 3px; height: 44px; background: #f3f1eb; }
#studentPage .avatar-item-pixel-preview-weapon[data-kind="bow"] .bow-arrow { left: 20px; top: 34px; width: 40px; height: 4px; background: #6e4a2b; }
#studentPage .avatar-item-pixel-preview-weapon[data-kind="bow"] .bow-tip { left: 58px; top: 29px; width: 12px; height: 12px; background: var(--item-secondary); clip-path: polygon(0 0,100% 50%,0 100%); }

#studentPage .avatar-item-pixel-preview-accessory[data-kind="glasses"] .lens {
  top: 26px; width: 18px; height: 12px; border: 3px solid #35404b; background: rgba(190,230,240,.45);
}
#studentPage .avatar-item-pixel-preview-accessory[data-kind="glasses"] .lens.left { left: 14px; }
#studentPage .avatar-item-pixel-preview-accessory[data-kind="glasses"] .lens.right { right: 14px; }
#studentPage .avatar-item-pixel-preview-accessory[data-kind="glasses"] .bridge { left: 32px; top: 30px; width: 12px; height: 4px; background: #35404b; }

#studentPage .avatar-item-pixel-preview-accessory[data-kind="cape"] .cape-main { left: 24px; top: 14px; width: 28px; height: 40px; background: var(--item-primary); border-bottom: 8px solid var(--item-secondary); }
#studentPage .avatar-item-pixel-preview-accessory[data-kind="cape"] .cape-tail { top: 52px; width: 14px; height: 12px; background: color-mix(in srgb, var(--item-primary) 82%, #3c2230); }
#studentPage .avatar-item-pixel-preview-accessory[data-kind="cape"] .cape-tail.left { left: 24px; }
#studentPage .avatar-item-pixel-preview-accessory[data-kind="cape"] .cape-tail.right { right: 24px; }

#studentPage .avatar-item-pixel-preview-accessory[data-kind="crown"] .crown-base { left: 18px; top: 28px; width: 40px; height: 12px; background: var(--item-primary); }
#studentPage .avatar-item-pixel-preview-accessory[data-kind="crown"] .crown-tip { top: 14px; width: 10px; height: 16px; background: var(--item-primary); }
#studentPage .avatar-item-pixel-preview-accessory[data-kind="crown"] .t1 { left: 18px; }
#studentPage .avatar-item-pixel-preview-accessory[data-kind="crown"] .t2 { left: 33px; height: 22px; top: 8px; }
#studentPage .avatar-item-pixel-preview-accessory[data-kind="crown"] .t3 { right: 18px; }
#studentPage .avatar-item-pixel-preview-accessory[data-kind="crown"] .crown-gem { left: 34px; top: 32px; width: 8px; height: 8px; background: var(--item-secondary); }

#studentPage .avatar-item-pixel-preview-accessory[data-kind="wings"] .wing { top: 20px; width: 22px; height: 30px; background: var(--item-primary); clip-path: polygon(0 0,100% 10%,80% 100%,20% 70%); }
#studentPage .avatar-item-pixel-preview-accessory[data-kind="wings"] .wing.left { left: 10px; transform: rotate(-16deg); }
#studentPage .avatar-item-pixel-preview-accessory[data-kind="wings"] .wing.right { right: 10px; transform: scaleX(-1) rotate(-16deg); }

#studentPage .avatar-item-pixel-preview-accessory[data-kind="aura"] .aura-ring { left: 18px; top: 18px; width: 40px; height: 40px; border: 6px solid var(--item-primary); transform: rotate(45deg); }
#studentPage .avatar-item-pixel-preview-accessory[data-kind="aura"] .aura-core { left: 28px; top: 28px; width: 20px; height: 20px; background: var(--item-secondary); transform: rotate(45deg); }

#studentPage .avatar-item-pixel-preview-accessory[data-kind="badge"] .badge-star {
  left: 24px; top: 24px; width: 28px; height: 28px; background: var(--item-primary); clip-path: polygon(50% 0,61% 35%,100% 35%,69% 58%,82% 100%,50% 74%,18% 100%,31% 58%,0 35%,39% 35%);
}

@media (max-width: 980px) {
  #studentPage #avatarContentBox:not(.hidden) {
    display: block !important;
  }
  #studentPage .voxel-avatar-stage-v8 {
    height: 396px !important;
    min-height: 396px !important;
  }
}

@media (max-width: 640px) {
  #studentPage .voxel-avatar-stage-v8 {
    height: 372px !important;
    min-height: 372px !important;
  }
  #studentPage .voxel-avatar-scene-v8 {
    width: 258px;
    height: 328px;
  }
  #studentPage .voxel-avatar-rig-v8 {
    --voxel-scale-v8: .77;
    top: -8px;
  }
}



/* ============================================================
   VOXEL BLOCK AVATAR V8.2 — FACE/Hair/Items/Try-On
============================================================ */
/* eye mapping: 2 = closed, 5 = smiling curved */
#studentPage .voxel-avatar-character-v8.eye-2 .voxel-head-block-v8 .avatar-eye {
  top: 42px;
  width: 18px;
  height: 3px;
  border: 0;
  background-color: #6b4a45 !important;
  box-shadow: none;
}
#studentPage .voxel-avatar-character-v8.eye-2 .voxel-head-block-v8 .avatar-eye-left { left: 17px; transform: rotate(7deg); }
#studentPage .voxel-avatar-character-v8.eye-2 .voxel-head-block-v8 .avatar-eye-right { right: 17px; transform: rotate(-7deg); }
#studentPage .voxel-avatar-character-v8.eye-5 .voxel-head-block-v8 .avatar-eye {
  top: 41px;
  width: 18px;
  height: 10px;
  border: 0;
  background: transparent !important;
  box-shadow: none;
  border-bottom: 4px solid #334982;
  border-radius: 0 0 14px 14px;
}
#studentPage .voxel-avatar-character-v8.eye-5 .voxel-head-block-v8 .avatar-eye-left { left: 17px; }
#studentPage .voxel-avatar-character-v8.eye-5 .voxel-head-block-v8 .avatar-eye-right { right: 17px; }

/* hair more distinct + female options */
#studentPage .voxel-hair-block-v8::before,
#studentPage .voxel-hair-block-v8::after,
#studentPage .voxel-hair-fringe-v8::before,
#studentPage .voxel-hair-fringe-v8::after {
  content: "";
  position: absolute;
  display: block;
  background: var(--avatar-hair);
  box-shadow: 4px 4px 0 rgba(46, 27, 71, .14);
}
#studentPage .voxel-avatar-character-v8.hair-1 .voxel-hair-block-v8 { --h: 26px; top: 8px; }
#studentPage .voxel-avatar-character-v8.hair-1 .voxel-hair-fringe-v8 span { height: 9px; }
#studentPage .voxel-avatar-character-v8.hair-2 .voxel-hair-block-v8 { --h: 34px; top: 3px; }
#studentPage .voxel-avatar-character-v8.hair-2 .voxel-hair-fringe-v8 span:nth-child(odd) { height: 16px; }
#studentPage .voxel-avatar-character-v8.hair-3 .voxel-hair-block-v8 { --h: 32px; top: 4px; transform: rotateZ(-4deg); }
#studentPage .voxel-avatar-character-v8.hair-3 .voxel-hair-fringe-v8 { left: 1px; right: 7px; }
#studentPage .voxel-avatar-character-v8.hair-3 .voxel-hair-fringe-v8 span:first-child,
#studentPage .voxel-avatar-character-v8.hair-3 .voxel-hair-fringe-v8 span:nth-child(2),
#studentPage .voxel-avatar-character-v8.hair-3 .voxel-hair-fringe-v8 span:nth-child(3) { height: 22px; }
#studentPage .voxel-avatar-character-v8.hair-4 .voxel-hair-block-v8 { --h: 42px; top: 2px; }
#studentPage .voxel-avatar-character-v8.hair-4 .voxel-hair-block-v8::before,
#studentPage .voxel-avatar-character-v8.hair-4 .voxel-hair-block-v8::after { top: 20px; width: 14px; height: 44px; }
#studentPage .voxel-avatar-character-v8.hair-4 .voxel-hair-block-v8::before { left: -8px; }
#studentPage .voxel-avatar-character-v8.hair-4 .voxel-hair-block-v8::after { right: -8px; }
#studentPage .voxel-avatar-character-v8.hair-5 .voxel-hair-block-v8 { --h: 30px; top: 3px; }
#studentPage .voxel-avatar-character-v8.hair-5 .voxel-hair-block-v8::before,
#studentPage .voxel-avatar-character-v8.hair-5 .voxel-hair-block-v8::after { top: -10px; width: 18px; height: 16px; }
#studentPage .voxel-avatar-character-v8.hair-5 .voxel-hair-block-v8::before { left: 16px; }
#studentPage .voxel-avatar-character-v8.hair-5 .voxel-hair-block-v8::after { right: 16px; }
#studentPage .voxel-avatar-character-v8.hair-6 .voxel-hair-block-v8 { --h: 28px; top: 6px; }
#studentPage .voxel-avatar-character-v8.hair-6 .voxel-hair-block-v8::before,
#studentPage .voxel-avatar-character-v8.hair-6 .voxel-hair-block-v8::after { top: 4px; width: 18px; height: 18px; border-radius: 2px; }
#studentPage .voxel-avatar-character-v8.hair-6 .voxel-hair-block-v8::before { left: -12px; }
#studentPage .voxel-avatar-character-v8.hair-6 .voxel-hair-block-v8::after { right: -12px; }
#studentPage .voxel-avatar-character-v8.hair-6 .voxel-hair-fringe-v8 span:nth-child(2),
#studentPage .voxel-avatar-character-v8.hair-6 .voxel-hair-fringe-v8 span:nth-child(5) { height: 16px; }
#studentPage .voxel-avatar-character-v8.hair-7 .voxel-hair-block-v8 { --h: 28px; top: 5px; }
#studentPage .voxel-avatar-character-v8.hair-7 .voxel-hair-block-v8::after { right: -18px; top: 12px; width: 18px; height: 68px; background: var(--avatar-hair-side); }
#studentPage .voxel-avatar-character-v8.hair-7 .voxel-hair-block-v8::before { right: -6px; top: 10px; width: 10px; height: 12px; background: var(--avatar-hair); }

/* stronger wings and new accessories on avatar */
#studentPage .voxel-avatar-accessory-back-v8[data-accessory-style="cloud-wings"] { width: 258px; left: 46%; }
#studentPage .voxel-avatar-accessory-back-v8[data-accessory-style="cloud-wings"] .voxel-wing-v8 { width: 92px; height: 110px; }
#studentPage .voxel-avatar-accessory-front-v8[data-accessory-style="wizard-hat"] .voxel-wizard-hat-v8 {
  position: absolute; left: 19px; top: -48px; width: 58px; height: 48px; background: #6c55e8;
  clip-path: polygon(50% 0, 90% 55%, 72% 55%, 100% 100%, 0 100%, 27% 55%, 10% 55%);
  box-shadow: 4px 4px 0 rgba(40,30,78,.18);
}
#studentPage .voxel-avatar-accessory-front-v8[data-accessory-style="wizard-hat"] .hat-band { position: absolute; left: 6px; right: 6px; bottom: 9px; height: 8px; background: #67dfff; }
#studentPage .voxel-avatar-accessory-front-v8[data-accessory-style="wizard-hat"] .hat-star { position: absolute; right: 10px; top: 10px; width: 8px; height: 8px; background: #ffe77a; transform: rotate(45deg); }
#studentPage .voxel-avatar-accessory-front-v8[data-accessory-style="baseball-cap"] .voxel-cap-top-v8 { position: absolute; left: 10px; top: -12px; width: 72px; height: 24px; background: #4669b3; }
#studentPage .voxel-avatar-accessory-front-v8[data-accessory-style="baseball-cap"] .voxel-cap-brim-v8 { position: absolute; left: 52px; top: 4px; width: 34px; height: 10px; background: #f2f7ff; }
#studentPage .voxel-avatar-accessory-back-v8[data-accessory-style="school-bag"] .voxel-backpack-v8 { position: absolute; left: 82px; top: 12px; width: 64px; height: 76px; background: #9d6737; border: 3px solid #6b4420; }
#studentPage .voxel-avatar-accessory-back-v8[data-accessory-style="school-bag"] .strap { position: absolute; top: -1px; width: 10px; height: 68px; background: #6b4420; }
#studentPage .voxel-avatar-accessory-back-v8[data-accessory-style="school-bag"] .strap.left { left: 6px; }
#studentPage .voxel-avatar-accessory-back-v8[data-accessory-style="school-bag"] .strap.right { right: 6px; }
#studentPage .voxel-avatar-accessory-back-v8[data-accessory-style="school-bag"] .pocket { position: absolute; left: 16px; bottom: 10px; width: 28px; height: 16px; background: #e9b36d; }
#studentPage .voxel-avatar-accessory-back-v8[data-accessory-style="devil-wings"] { width: 270px; left: 45%; top: 102px; }
#studentPage .voxel-devil-wing-v8 { position: absolute; top: 0; width: 94px; height: 116px; }
#studentPage .voxel-devil-wing-v8.wing-left { left: 2px; transform: rotateZ(-16deg); }
#studentPage .voxel-devil-wing-v8.wing-right { right: 2px; transform: rotateZ(16deg) scaleX(-1); }
#studentPage .voxel-devil-wing-v8 i { position: absolute; display: block; background: #8a2c49; border: 3px solid #5a1830; box-shadow: 4px 4px 0 rgba(53,16,30,.18); }
#studentPage .voxel-devil-wing-v8 i:nth-child(1) { left: 24px; top: 0; width: 24px; height: 48px; }
#studentPage .voxel-devil-wing-v8 i:nth-child(2) { left: 0; top: 38px; width: 48px; height: 30px; }
#studentPage .voxel-devil-wing-v8 i:nth-child(3) { left: 10px; top: 68px; width: 58px; height: 28px; clip-path: polygon(0 0,100% 0,80% 100%,14% 85%); }
#studentPage .voxel-avatar-accessory-front-v8[data-accessory-style="duck-float"] .voxel-duck-float-v8 { position: absolute; left: -4px; top: 136px; width: 100px; height: 36px; background: #ffe363; border: 4px solid #f2c640; }
#studentPage .voxel-avatar-accessory-front-v8[data-accessory-style="duck-float"] .head { position: absolute; left: -6px; top: -10px; width: 24px; height: 18px; background: #ffe363; border: 4px solid #f2c640; }
#studentPage .voxel-avatar-accessory-front-v8[data-accessory-style="duck-float"] .beak { position: absolute; left: -10px; top: -2px; width: 10px; height: 8px; background: #ff9850; }
#studentPage .voxel-avatar-accessory-front-v8[data-accessory-style="duck-float"] .wing { position: absolute; right: 12px; top: 8px; width: 20px; height: 12px; background: #fff4a9; }
#studentPage .voxel-avatar-accessory-front-v8[data-accessory-style="hobby-horse"] .voxel-hobby-horse-v8 { position: absolute; left: 60px; top: 116px; width: 40px; height: 80px; }
#studentPage .voxel-avatar-accessory-front-v8[data-accessory-style="hobby-horse"] .head { position: absolute; left: -6px; top: -6px; width: 34px; height: 26px; background: #b8814d; border: 3px solid #8a5c34; }
#studentPage .voxel-avatar-accessory-front-v8[data-accessory-style="hobby-horse"] .ear { position: absolute; left: 0; top: -14px; width: 12px; height: 12px; background: #8a5c34; }
#studentPage .voxel-avatar-accessory-front-v8[data-accessory-style="hobby-horse"] .stick { position: absolute; left: 14px; top: 18px; width: 8px; height: 64px; background: #8a5c34; }

/* extra weapon shapes on avatar */
#studentPage .voxel-pan-shape-v8, #studentPage .voxel-spatula-shape-v8 { position: relative; width: 70px; height: 86px; }
#studentPage .voxel-pan-shape-v8 .pan-head { position: absolute; left: 12px; top: 4px; width: 38px; height: 32px; background: var(--weapon-primary); border: 3px solid #404956; border-radius: 3px; }
#studentPage .voxel-pan-shape-v8 .pan-core { position: absolute; left: 21px; top: 13px; width: 20px; height: 14px; background: #66717f; }
#studentPage .voxel-pan-shape-v8 .pan-handle { position: absolute; left: 38px; top: 36px; width: 8px; height: 40px; background: #7f572e; transform: rotate(-25deg); }
#studentPage .voxel-spatula-shape-v8 .spatula-head { position: absolute; left: 18px; top: 6px; width: 28px; height: 28px; background: var(--weapon-primary); border: 3px solid #7c8a97; }
#studentPage .voxel-spatula-shape-v8 .spatula-hole { position: absolute; top: 14px; width: 4px; height: 10px; background: #bcc9d7; }
#studentPage .voxel-spatula-shape-v8 .h1 { left: 24px; } #studentPage .voxel-spatula-shape-v8 .h2 { left: 31px; } #studentPage .voxel-spatula-shape-v8 .h3 { left: 38px; }
#studentPage .voxel-spatula-shape-v8 .spatula-handle { position: absolute; left: 29px; top: 34px; width: 8px; height: 42px; background: #7f572e; }

/* item card previews new kinds */
#studentPage .avatar-item-pixel-preview-weapon[data-kind="pan"] .pan-head { left: 18px; top: 12px; width: 28px; height: 24px; background: #495162; }
#studentPage .avatar-item-pixel-preview-weapon[data-kind="pan"] .pan-core { left: 25px; top: 18px; width: 14px; height: 10px; background: #798493; }
#studentPage .avatar-item-pixel-preview-weapon[data-kind="pan"] .pan-handle { left: 38px; top: 34px; width: 6px; height: 28px; background: #8b633d; transform: rotate(-25deg); }
#studentPage .avatar-item-pixel-preview-weapon[data-kind="spatula"] .spatula-head { left: 24px; top: 10px; width: 20px; height: 20px; background: #dfe7f0; }
#studentPage .avatar-item-pixel-preview-weapon[data-kind="spatula"] .spatula-hole { top: 15px; width: 3px; height: 8px; background: #a9b7c6; }
#studentPage .avatar-item-pixel-preview-weapon[data-kind="spatula"] .h1 { left: 29px; } #studentPage .avatar-item-pixel-preview-weapon[data-kind="spatula"] .h2 { left: 34px; } #studentPage .avatar-item-pixel-preview-weapon[data-kind="spatula"] .h3 { left: 39px; }
#studentPage .avatar-item-pixel-preview-weapon[data-kind="spatula"] .spatula-handle { left: 31px; top: 30px; width: 6px; height: 28px; background: #8b633d; }
#studentPage .avatar-item-pixel-preview-accessory[data-kind="devil"] .devil-wing { top: 14px; width: 22px; height: 28px; background: #8a2c49; clip-path: polygon(20% 0,100% 18%,86% 100%,0 74%); }
#studentPage .avatar-item-pixel-preview-accessory[data-kind="devil"] .devil-wing.left { left: 10px; transform: rotate(-16deg); }
#studentPage .avatar-item-pixel-preview-accessory[data-kind="devil"] .devil-wing.right { right: 10px; transform: scaleX(-1) rotate(-16deg); }
#studentPage .avatar-item-pixel-preview-accessory[data-kind="wizardhat"] .hat-cone { left: 24px; top: 8px; width: 26px; height: 28px; background: #6c55e8; clip-path: polygon(50% 0,85% 100%,15% 100%); }
#studentPage .avatar-item-pixel-preview-accessory[data-kind="wizardhat"] .hat-brim { left: 16px; top: 32px; width: 42px; height: 8px; background: #6c55e8; }
#studentPage .avatar-item-pixel-preview-accessory[data-kind="wizardhat"] .hat-star { left: 41px; top: 14px; width: 8px; height: 8px; background: #ffe46b; transform: rotate(45deg); }
#studentPage .avatar-item-pixel-preview-accessory[data-kind="cap"] .cap-top { left: 16px; top: 18px; width: 36px; height: 16px; background: #4568b2; }
#studentPage .avatar-item-pixel-preview-accessory[data-kind="cap"] .cap-brim { left: 44px; top: 28px; width: 18px; height: 6px; background: #edf2ff; }
#studentPage .avatar-item-pixel-preview-accessory[data-kind="bag"] .bag-body { left: 20px; top: 16px; width: 34px; height: 34px; background: #9d6737; }
#studentPage .avatar-item-pixel-preview-accessory[data-kind="bag"] .bag-flap { left: 26px; top: 24px; width: 22px; height: 8px; background: #e2b070; }
#studentPage .avatar-item-pixel-preview-accessory[data-kind="bag"] .bag-strap { left: 28px; top: 10px; width: 18px; height: 8px; border: 4px solid #6b4420; border-bottom: 0; background: transparent; }
#studentPage .avatar-item-pixel-preview-accessory[data-kind="duck"] .duck-body { left: 18px; top: 28px; width: 36px; height: 18px; background: #ffe363; }
#studentPage .avatar-item-pixel-preview-accessory[data-kind="duck"] .duck-head { left: 12px; top: 18px; width: 14px; height: 12px; background: #ffe363; }
#studentPage .avatar-item-pixel-preview-accessory[data-kind="duck"] .duck-beak { left: 6px; top: 22px; width: 8px; height: 6px; background: #ff9850; }
#studentPage .avatar-item-pixel-preview-accessory[data-kind="horse"] .horse-head { left: 22px; top: 16px; width: 20px; height: 16px; background: #b8814d; }
#studentPage .avatar-item-pixel-preview-accessory[data-kind="horse"] .horse-ear { left: 24px; top: 8px; width: 8px; height: 8px; background: #8a5c34; }
#studentPage .avatar-item-pixel-preview-accessory[data-kind="horse"] .horse-stick { left: 30px; top: 30px; width: 6px; height: 26px; background: #8a5c34; }

/* item card/try-on styles */
#studentPage .avatar-item-card.is-preview { border-color: #4f7fff; box-shadow: 0 0 0 3px rgba(79,127,255,.10), 0 10px 20px rgba(82,102,170,.08); }
#studentPage .avatar-item-action.preview { background: #eef3ff; color: #4256a5; }



/* ============================================================
   PATCH A — SMILING EYES + TRY-ON REMOVE
   Stable Recovery V8.4
============================================================ */

/* หลับตา: ตัวเลือก eye-2 เป็นเส้นปิดตาธรรมดา */
#studentPage .voxel-avatar-character-v8.eye-2
.voxel-head-block-v8 .avatar-eye {
  top: 42px !important;
  width: 18px !important;
  height: 3px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: #6b4a45 !important;
  box-shadow: none !important;
  animation: none !important;
}

#studentPage .voxel-avatar-character-v8.eye-2
.voxel-head-block-v8 .avatar-eye-left {
  left: 17px !important;
  transform: rotate(7deg) !important;
}

#studentPage .voxel-avatar-character-v8.eye-2
.voxel-head-block-v8 .avatar-eye-right {
  right: 17px !important;
  transform: rotate(-7deg) !important;
}

/* ตายิ้มโค้ง: ตัวเลือก eye-5 เป็น U คว่ำ หรือ ∩ */
#studentPage .voxel-avatar-character-v8.eye-5
.voxel-head-block-v8 .avatar-eye {
  top: 41px !important;
  width: 20px !important;
  height: 11px !important;
  border: 0 !important;
  border-top: 5px solid #334982 !important;
  border-radius: 50% 50% 0 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  animation: none !important;
}

#studentPage .voxel-avatar-character-v8.eye-5
.voxel-head-block-v8 .avatar-eye-left {
  left: 16px !important;
  transform: none !important;
}

#studentPage .voxel-avatar-character-v8.eye-5
.voxel-head-block-v8 .avatar-eye-right {
  right: 16px !important;
  transform: none !important;
}

/* ปุ่มลองสวมที่กำลังแสดงบนตัวละคร */
#studentPage .avatar-item-action.preview.is-removing,
#studentPage .avatar-item-card.is-preview
.avatar-item-action.preview {
  color: #8f3140 !important;
  background-color: #ffe8ec !important;
  border-color: #f3a9b5 !important;
}

#studentPage .avatar-item-action.preview.is-removing:hover,
#studentPage .avatar-item-card.is-preview
.avatar-item-action.preview:hover {
  color: #ffffff !important;
  background-color: #d94b62 !important;
  border-color: #d94b62 !important;
}

/* ทำให้การ์ดที่กำลังลองเห็นสถานะชัด */
#studentPage .avatar-item-card.is-preview {
  position: relative;
  border-color: #4f7fff !important;
  box-shadow:
    0 0 0 3px rgba(79,127,255,.12),
    0 10px 20px rgba(82,102,170,.10) !important;
}

#studentPage .avatar-item-card.is-preview::after {
  content: "กำลังลองสวม";
  position: absolute;
  z-index: 5;
  top: 8px;
  right: 8px;
  min-height: 22px;
  padding: 4px 7px;
  display: inline-flex;
  align-items: center;
  border-radius: 7px;
  color: #ffffff;
  background-color: #4f7fff;
  box-shadow: 0 3px 0 #3158c4;
  font-size:13px;
  font-weight: 1000;
}



/* ============================================================
   PATCH B2 — TRUE STICKY RAIL + READABLE ITIM SHOP
   Base: Recovery V8.4 + Patch A
============================================================ */

/*
  หลักการ:
  - ยกเลิกความสูงแบบล็อกตาม viewport ของ V5
  - ยกเลิก scrollbar ภายใน panel ร้านค้า
  - ให้หน้าเว็บเลื่อนตามธรรมชาติ
  - ให้คอลัมน์ซ้ายสูงเท่าคอนเทนต์ฝั่งขวา
  - ตรึง Wrapper ของ MY CHARACTER จริง
*/

/* ---------- Natural scrolling ---------- */
#studentPage .student-game-command-center,
#studentPage #eportTabAvatar,
#studentPage .avatar-page-v1,
#studentPage #avatarContentBox,
#studentPage #avatarContentBox > .avatar-hero-grid,
#studentPage .avatar-left-sticky-scroll,
#studentPage .avatar-workspace-panel {
  overflow: visible !important;
}

#studentPage #avatarContentBox:not(.hidden) {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  grid-template-rows: auto auto !important;
  align-items: stretch !important;
}

#studentPage #avatarContentBox > .avatar-hero-grid {
  position: relative !important;
  top: auto !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: none !important;
  align-self: stretch !important;
  padding: 0 !important;
  overflow: visible !important;
  z-index: 10 !important;
}

#studentPage .avatar-left-sticky-scroll {
  position: relative !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: none !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 12px !important;
  overflow: visible !important;
  scrollbar-width: none !important;
}

#studentPage .avatar-left-sticky-scroll::-webkit-scrollbar,
#studentPage .avatar-workspace-panel::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

#studentPage .avatar-workspace-panel {
  min-height: 0 !important;
  max-height: none !important;
  height: auto !important;
  padding-right: 0 !important;
  overflow: visible !important;
}

/* ---------- True sticky shell ---------- */
#studentPage .avatar-character-sticky-shell {
  position: relative !important;
  z-index: 40 !important;
  align-self: stretch !important;
}

#studentPage .avatar-character-sticky-shell >
.avatar-preview-card {
  position: relative !important;
  top: auto !important;
  z-index: 1 !important;
  margin: 0 !important;
  background-color: #ffffff !important;
}

@media (min-width: 981px) {
  #studentPage .avatar-character-sticky-shell {
    position: sticky !important;
    top: 76px !important;
    z-index: 40 !important;
  }

  #studentPage .avatar-character-sticky-shell >
  .avatar-preview-card {
    box-shadow:
      0 17px 34px rgba(46, 37, 85, .16),
      0 7px 0 rgba(85, 67, 160, .11) !important;
  }

  #studentPage .avatar-left-sticky-scroll >
  .avatar-player-card {
    position: relative !important;
    z-index: 1 !important;
    margin-top: 0 !important;
  }
}

/* ---------- Four cards on desktop ---------- */
#studentPage .avatar-item-grid {
  grid-template-columns:
    repeat(4, minmax(0, 1fr)) !important;
  gap: 11px !important;
  align-items: stretch !important;
}

#studentPage .avatar-item-card {
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 12px 10px !important;
  border-radius: 17px !important;
}

#studentPage .avatar-item-icon {
  min-height: 82px !important;
  margin-bottom: 5px !important;
}

#studentPage .avatar-item-pixel-preview {
  width: 74px !important;
  height: 74px !important;
  transform: scale(.94);
  transform-origin: center;
}

/* ---------- Itim only for playful prominent text ---------- */
#studentPage .avatar-shop-panel .avatar-section-head h3,
#studentPage .avatar-shop-panel .avatar-section-head > div > span,
#studentPage .avatar-category-filter button,
#studentPage .avatar-shop-tabs button,
#studentPage .avatar-item-copy strong,
#studentPage .avatar-item-action,
#studentPage .avatar-item-card.is-preview::after {
  font-family: 'Itim', 'Sarabun', sans-serif !important;
  font-weight: 400 !important;
}

/* Main shop title */
#studentPage .avatar-shop-panel .avatar-section-head h3 {
  font-size:25px !important;
  line-height: 1.12 !important;
}

/* Category and shop/inventory tabs */
#studentPage .avatar-category-filter button,
#studentPage .avatar-shop-tabs button {
  min-height: 36px !important;
  padding: 7px 11px !important;
  font-size:13px !important;
  line-height: 1 !important;
}

/* Item type / job / requirements stay Sarabun */
#studentPage .avatar-item-copy {
  margin-bottom: 9px !important;
}

#studentPage .avatar-item-copy > small:first-child {
  font-family: 'Sarabun', sans-serif !important;
  font-size:13px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
}

#studentPage .avatar-item-copy strong {
  min-height: 37px !important;
  padding: 1px 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #332b50 !important;
  font-size:14px !important;
  line-height: 1.15 !important;
  text-align: center !important;
}

#studentPage .avatar-item-copy small:last-child {
  min-height: 29px !important;
  font-family: 'Sarabun', sans-serif !important;
  color: #817895 !important;
  font-size:13px !important;
  line-height: 1.35 !important;
  font-weight: 600 !important;
}

/* Price */
#studentPage .avatar-item-price {
  min-height: 31px !important;
  padding: 6px 5px !important;
  font-family: 'Sarabun', sans-serif !important;
  font-size:13px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
}

/* Buttons */
#studentPage .avatar-item-actions {
  gap: 6px !important;
}

#studentPage .avatar-item-action {
  min-height: 37px !important;
  padding: 7px 5px !important;
  border-radius: 10px !important;
  font-size:13px !important;
  line-height: 1.05 !important;
}

#studentPage .avatar-item-action i {
  font-size:13px !important;
}

/* Try-on badge */
#studentPage .avatar-item-card.is-preview::after {
  top: 7px !important;
  right: 7px !important;
  min-height: 23px !important;
  padding: 4px 8px !important;
  font-size:13px !important;
}

/* Heading labels and explanatory text remain highly readable */
#studentPage .avatar-shop-panel .avatar-section-head p,
#studentPage .avatar-shop-panel .avatar-section-head small,
#studentPage .avatar-shop-panel .avatar-item-card {
  font-family: 'Sarabun', sans-serif;
}

/* ---------- Responsive ---------- */
@media (max-width: 1280px) {
  #studentPage .avatar-item-grid {
    grid-template-columns:
      repeat(3, minmax(0, 1fr)) !important;
  }

  #studentPage .avatar-item-copy strong {
    font-size:14px !important;
  }

  #studentPage .avatar-item-action {
    font-size:13px !important;
  }
}

@media (max-width: 980px) {
  #studentPage #avatarContentBox:not(.hidden) {
    display: block !important;
  }

  #studentPage #avatarContentBox > .avatar-hero-grid,
  #studentPage .avatar-left-sticky-scroll {
    height: auto !important;
    min-height: 0 !important;
  }

  #studentPage .avatar-character-sticky-shell {
    position: static !important;
    top: auto !important;
  }

  #studentPage .avatar-item-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
}

@media (max-width: 520px) {
  #studentPage .avatar-item-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  #studentPage .avatar-item-card {
    padding: 9px 7px !important;
  }

  #studentPage .avatar-item-icon {
    min-height: 70px !important;
  }

  #studentPage .avatar-item-pixel-preview {
    width: 66px !important;
    height: 66px !important;
    transform: scale(.86);
  }

  #studentPage .avatar-item-copy strong {
    min-height: 34px !important;
    font-size:13px !important;
  }

  #studentPage .avatar-item-copy > small:first-child,
  #studentPage .avatar-item-copy small:last-child {
    font-size:13px !important;
  }

  #studentPage .avatar-item-price {
    font-size:13px !important;
  }

  #studentPage .avatar-item-action {
    min-height: 35px !important;
    font-size:13px !important;
  }

  #studentPage .avatar-category-filter button,
  #studentPage .avatar-shop-tabs button {
    font-size:13px !important;
  }
}



/* ============================================================
   PATCH B3 — WORKING VIEWPORT DOCK
   Fixes transformed ancestor that breaks CSS sticky/fixed
============================================================ */

/*
  #studentPage เดิมมี transform: translateZ(0)
  ซึ่งสร้าง containing block ใหม่และทำให้ fixed/sticky
  ไม่อิง viewport จริง จึงต้องยกเลิกเฉพาะหน้านักเรียน
*/
#studentPage.student-game-page {
  transform: none !important;
}

/* ปิด native sticky จาก Patch B2 แล้วใช้ JS Dock แทน */
#studentPage .avatar-character-sticky-shell {
  position: relative !important;
  inset: auto !important;
  width: auto;
  max-width: none;
  z-index: 40;
}

#studentPage .avatar-character-dock-placeholder {
  display: none;
  width: 100%;
  min-width: 0;
  pointer-events: none;
}

#studentPage .avatar-character-dock-placeholder.is-active {
  display: block;
}

/*
  Shell จะถูกย้ายมาเป็นลูกโดยตรงของ #studentPage
  ขณะ Dock เพื่อหลุดจาก overflow/height เดิมทั้งหมด
*/
#studentPage >
.avatar-character-sticky-shell.is-avatar-fixed-dock {
  position: fixed !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  z-index: 76 !important;
  transform: translateZ(0);
  pointer-events: auto;
  will-change: top, left;
}

#studentPage >
.avatar-character-sticky-shell.is-avatar-fixed-dock >
.avatar-preview-card {
  margin: 0 !important;
  background-color: #ffffff !important;
  box-shadow:
    0 18px 38px rgba(32, 25, 72, .22),
    0 7px 0 rgba(85, 67, 160, .13) !important;
}

/* Topbar อยู่เหนือการ์ด Dock */
#studentPage .student-player-topbar {
  z-index: 80 !important;
}

/* Desktop เท่านั้น */
@media (max-width: 980px) {
  #studentPage >
  .avatar-character-sticky-shell.is-avatar-fixed-dock {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: auto !important;
    max-width: none !important;
    transform: none !important;
  }

  #studentPage
  .avatar-character-dock-placeholder.is-active {
    display: none !important;
  }
}



/* ============================================================
   PATCH B4 — STABLE TWO-PANE AVATAR WORKSPACE
   Fixed left character / independently scrolling right panel
============================================================ */

/*
  ยกเลิกผลของ Viewport Dock รุ่น B3 ทั้งหมด
*/
#studentPage.student-game-page {
  transform: translateZ(0) !important;
}

#studentPage .avatar-character-dock-placeholder {
  display: none !important;
}

#studentPage >
.avatar-character-sticky-shell.is-avatar-fixed-dock {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: auto !important;
  max-width: none !important;
  transform: none !important;
}

/*
  โครงหลักสูงตามพื้นที่หน้าจอ
  ฝั่งขวาเป็นพื้นที่ Scroll หลัก
*/
#studentPage #avatarContentBox:not(.hidden) {
  display: grid !important;
  grid-template-columns:
    minmax(330px, 390px)
    minmax(0, 1fr) !important;
  grid-template-rows:
    58px
    minmax(0, 1fr) !important;
  gap: 12px 16px !important;
  height: calc(100vh - 118px) !important;
  min-height: 640px !important;
  max-height: 820px !important;
  align-items: stretch !important;
  overflow: hidden !important;
}

/* ---------- Left rail ---------- */
#studentPage #avatarContentBox >
.avatar-hero-grid {
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;
  position: relative !important;
  top: auto !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  align-self: stretch !important;
  padding: 0 !important;
  overflow: hidden !important;
  z-index: 10 !important;
}

#studentPage .avatar-left-sticky-scroll {
  position: relative !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 0 5px 14px 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  scrollbar-width: none !important;
}

#studentPage .avatar-left-sticky-scroll::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/*
  MY CHARACTER ติดอยู่ด้านบนของ Scroll rail
  แม้เลื่อนดู Player Class ด้านล่าง ตัวละครยังไม่หาย
*/
#studentPage .avatar-character-sticky-shell {
  position: sticky !important;
  top: 0 !important;
  inset-inline: auto !important;
  z-index: 45 !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  max-width: none !important;
  align-self: stretch !important;
  background-color: transparent !important;
}

#studentPage .avatar-character-sticky-shell >
.avatar-preview-card {
  position: relative !important;
  top: auto !important;
  width: 100% !important;
  margin: 0 !important;
  background-color: #ffffff !important;
  box-shadow:
    0 16px 32px rgba(46, 37, 85, .15),
    0 7px 0 rgba(85, 67, 160, .11) !important;
}

/* ---------- Equal workspace tabs ---------- */
#studentPage .avatar-workspace-tabs {
  grid-column: 2 !important;
  grid-row: 1 !important;
  width: 100% !important;
  height: 58px !important;
  min-height: 58px !important;
  max-height: 58px !important;
  padding: 5px !important;
  display: grid !important;
  grid-template-columns:
    repeat(3, minmax(0, 1fr)) !important;
  grid-template-rows: 1fr !important;
  align-items: stretch !important;
  gap: 5px !important;
  align-self: start !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

#studentPage .avatar-workspace-tabs button {
  width: 100% !important;
  height: 46px !important;
  min-height: 46px !important;
  max-height: 46px !important;
  margin: 0 !important;
  padding: 7px 10px !important;
  align-self: center !important;
  justify-self: stretch !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  line-height: 1 !important;
}

#studentPage .avatar-workspace-tabs button.active {
  height: 46px !important;
  min-height: 46px !important;
  max-height: 46px !important;
}

/* ---------- Right scrolling panel ---------- */
#studentPage .avatar-workspace-panel {
  grid-column: 2 !important;
  grid-row: 2 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 8px 20px 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  scrollbar-gutter: stable !important;
  scrollbar-width: thin !important;
  scrollbar-color: #b9afe2 transparent !important;
}

#studentPage .avatar-workspace-panel::-webkit-scrollbar {
  display: block !important;
  width: 7px !important;
}

#studentPage .avatar-workspace-panel::-webkit-scrollbar-track {
  background: transparent !important;
}

#studentPage .avatar-workspace-panel::-webkit-scrollbar-thumb {
  border-radius: 999px !important;
  background-color: #b9afe2 !important;
}

/*
  คงร้านค้า 4 ใบ โดยไม่บีบข้อความลงจนเล็กเกินไป
*/
#studentPage .avatar-item-grid {
  grid-template-columns:
    repeat(4, minmax(0, 1fr)) !important;
  gap: 11px !important;
}

/* Desktop ขนาดไม่กว้างมาก */
@media (max-width: 1280px) {
  #studentPage .avatar-item-grid {
    grid-template-columns:
      repeat(3, minmax(0, 1fr)) !important;
  }
}

/* Tablet/Mobile กลับไปเป็นการเลื่อนทั้งหน้า */
@media (max-width: 980px) {
  #studentPage #avatarContentBox:not(.hidden) {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  #studentPage #avatarContentBox >
  .avatar-hero-grid {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    margin-bottom: 12px !important;
  }

  #studentPage .avatar-left-sticky-scroll {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    padding-right: 0 !important;
  }

  #studentPage .avatar-character-sticky-shell {
    position: static !important;
    top: auto !important;
  }

  #studentPage .avatar-workspace-tabs {
    position: sticky !important;
    top: 76px !important;
    z-index: 35 !important;
    height: 58px !important;
    min-height: 58px !important;
    max-height: 58px !important;
    margin-bottom: 12px !important;
  }

  #studentPage .avatar-workspace-panel {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    padding-right: 0 !important;
  }

  #studentPage .avatar-item-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 640px) {
  #studentPage .avatar-workspace-tabs {
    position: static !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    grid-template-columns: 1fr !important;
  }

  #studentPage .avatar-workspace-tabs button,
  #studentPage .avatar-workspace-tabs button.active {
    height: 43px !important;
    min-height: 43px !important;
    max-height: 43px !important;
    justify-content: flex-start !important;
  }
}



/* ============================================================
   PATCH B5 — NATURAL LEFT + MATCHED RIGHT SCROLL + UNEQUIP
============================================================ */

/*
  --avatar-left-natural-height ถูกวัดจาก:
  MY CHARACTER + PLAYER CLASS + ระยะห่างจริง
*/
#studentPage #avatarContentBox:not(.hidden) {
  display: grid !important;
  grid-template-columns:
    minmax(330px, 390px)
    minmax(0, 1fr) !important;
  grid-template-rows:
    58px
    minmax(0, 1fr) !important;
  gap: 12px 16px !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  align-items: start !important;
  overflow: visible !important;
}

#studentPage #avatarContentBox.is-avatar-pane-height-ready:not(.hidden) {
  height:
    var(--avatar-left-natural-height) !important;
}

/* ---------- ฝั่งซ้าย: ความสูงปกติ ไม่มี scrollbar ---------- */
#studentPage #avatarContentBox >
.avatar-hero-grid {
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;
  position: relative !important;
  top: auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  align-self: start !important;
  padding: 0 !important;
  overflow: visible !important;
  z-index: 10 !important;
}

#studentPage .avatar-left-sticky-scroll {
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  overflow: visible !important;
  scrollbar-width: none !important;
  overscroll-behavior: auto !important;
}

#studentPage .avatar-left-sticky-scroll::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

#studentPage .avatar-character-sticky-shell {
  position: relative !important;
  top: auto !important;
  inset: auto !important;
  width: 100% !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  z-index: 20 !important;
}

#studentPage .avatar-character-sticky-shell >
.avatar-preview-card,
#studentPage .avatar-left-sticky-scroll >
.avatar-player-card {
  width: 100% !important;
  margin: 0 !important;
}

/* ---------- แท็บสูงเท่ากัน ---------- */
#studentPage .avatar-workspace-tabs {
  grid-column: 2 !important;
  grid-row: 1 !important;
  width: 100% !important;
  height: 58px !important;
  min-height: 58px !important;
  max-height: 58px !important;
  margin: 0 !important;
  padding: 5px !important;
  display: grid !important;
  grid-template-columns:
    repeat(3, minmax(0, 1fr)) !important;
  grid-template-rows: 48px !important;
  align-items: center !important;
  gap: 5px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

#studentPage .avatar-workspace-tabs button,
#studentPage .avatar-workspace-tabs button.active {
  width: 100% !important;
  height: 46px !important;
  min-height: 46px !important;
  max-height: 46px !important;
  margin: 0 !important;
  padding: 7px 10px !important;
  align-self: center !important;
  justify-self: stretch !important;
  box-sizing: border-box !important;
  line-height: 1 !important;
}

/* ---------- ฝั่งขวา: สูงเท่าฝั่งซ้ายและเลื่อนภายใน ---------- */
#studentPage .avatar-workspace-panel {
  grid-column: 2 !important;
  grid-row: 2 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 9px 20px 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  scrollbar-gutter: stable !important;
  scrollbar-width: thin !important;
  scrollbar-color: #aa9dde transparent !important;
}

#studentPage .avatar-workspace-panel::-webkit-scrollbar {
  display: block !important;
  width: 8px !important;
}

#studentPage .avatar-workspace-panel::-webkit-scrollbar-track {
  border-radius: 999px !important;
  background-color: #f0edf9 !important;
}

#studentPage .avatar-workspace-panel::-webkit-scrollbar-thumb {
  border: 2px solid #f0edf9 !important;
  border-radius: 999px !important;
  background-color: #a99bdd !important;
}

/* ---------- ไอเทมที่สวมจริง ถอดและสวมใหม่ได้ ---------- */
#studentPage .avatar-item-action.unequip {
  color: #9b3445 !important;
  background-color: #ffe8ec !important;
  border-color: #f2a8b4 !important;
}

#studentPage .avatar-item-action.unequip:hover {
  color: #ffffff !important;
  background-color: #d94b62 !important;
  border-color: #d94b62 !important;
}

#studentPage .avatar-item-card.is-equipped {
  border-color: #35bf88 !important;
  box-shadow:
    0 0 0 3px rgba(53,191,136,.10),
    0 10px 20px rgba(38,125,94,.09) !important;
}

/* Tablet/Mobile ใช้การเลื่อนหน้าแบบปกติ */
@media (max-width: 980px) {
  #studentPage #avatarContentBox:not(.hidden),
  #studentPage #avatarContentBox.is-avatar-pane-height-ready:not(.hidden) {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  #studentPage #avatarContentBox >
  .avatar-hero-grid,
  #studentPage .avatar-left-sticky-scroll,
  #studentPage .avatar-workspace-panel {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  #studentPage .avatar-workspace-tabs {
    margin: 12px 0 !important;
  }
}



/* ============================================================
   PATCH B6 — READABLE TYPOGRAPHY + SAFE PANEL HEADINGS
   Base: Recovery V8.4 + Patch A + B2 + B5
============================================================ */

/* ---------- ป้องกันหัวข้อชนขอบด้านบน/ซ้าย ---------- */
#studentPage .avatar-workspace-panel {
  padding:
    16px
    16px
    26px
    16px !important;
  scroll-padding-top: 16px !important;
  box-sizing: border-box !important;
}

#studentPage .avatar-config-panel,
#studentPage .avatar-shop-panel,
#studentPage .avatar-transaction-panel {
  padding-top: 16px !important;
}

#studentPage .avatar-section-head {
  min-height: 58px !important;
  padding: 0 1px 2px !important;
  align-items: flex-start !important;
}

#studentPage .avatar-section-head.compact {
  min-height: 54px !important;
  margin-bottom: 13px !important;
}

/* Kicker เช่น AVATAR SHOP / WALLET HISTORY */
#studentPage .avatar-section-head > div > span {
  display: block !important;
  margin: 0 0 4px !important;
  color: #7465a3 !important;
  font-family: 'Sarabun', sans-serif !important;
  font-size:13px !important;
  line-height: 1.2 !important;
  font-weight: 900 !important;
  letter-spacing: 1px !important;
}

/* หัวข้อหลักแต่ละแผง */
#studentPage .avatar-section-head h3 {
  margin: 0 !important;
  color: #30264f !important;
  font-family: 'Itim', 'Sarabun', sans-serif !important;
  font-size:27px !important;
  line-height: 1.14 !important;
  font-weight: 400 !important;
}

#studentPage .avatar-section-head p {
  margin: 6px 0 0 !important;
  color: #706783 !important;
  font-family: 'Sarabun', sans-serif !important;
  font-size:13px !important;
  line-height: 1.5 !important;
  font-weight: 600 !important;
}

/* ---------- แท็บด้านบน ---------- */
#studentPage .avatar-workspace-tabs button,
#studentPage .avatar-workspace-tabs button.active {
  font-family: 'Itim', 'Sarabun', sans-serif !important;
  font-size:14px !important;
  font-weight: 400 !important;
}

#studentPage .avatar-workspace-tabs button i {
  font-size:13px !important;
}

/* ---------- ใต้รูปอวาตาร์ ---------- */
#studentPage .avatar-equipped-summary {
  gap: 8px !important;
}

#studentPage .avatar-equipped-summary > div {
  padding: 11px 9px !important;
  border-radius: 14px !important;
}

#studentPage .avatar-equipped-summary span {
  color: #776c91 !important;
  font-size:13px !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;
}

#studentPage .avatar-equipped-summary strong {
  margin-top: 4px !important;
  color: #342951 !important;
  font-size:13px !important;
  line-height: 1.3 !important;
  font-weight: 900 !important;
}

#studentPage .avatar-cosmetic-note,
#studentPage .avatar-wallet-rule {
  padding: 11px 12px !important;
  gap: 8px !important;
  font-size:13px !important;
  line-height: 1.5 !important;
  font-weight: 700 !important;
}

#studentPage .voxel-avatar-rotation-hint-v8 {
  min-height: 27px !important;
  padding: 6px 9px !important;
  font-size:13px !important;
  line-height: 1.2 !important;
}

/* ---------- PLAYER CLASS ---------- */
#studentPage .avatar-player-head > div:last-child > span {
  color: #7765a4 !important;
  font-size:13px !important;
  line-height: 1.2 !important;
  font-weight: 900 !important;
  letter-spacing: 1px !important;
}

#studentPage .avatar-player-head h3 {
  margin: 3px 0 0 !important;
  font-family: 'Itim', 'Sarabun', sans-serif !important;
  font-size:23px !important;
  line-height: 1.15 !important;
  font-weight: 400 !important;
}

#studentPage .avatar-player-head p {
  margin-top: 6px !important;
  font-size:13px !important;
  line-height: 1.5 !important;
  font-weight: 600 !important;
}

#studentPage .avatar-wallet-card strong {
  font-size:24px !important;
}

#studentPage .avatar-wallet-card span {
  font-size:13px !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;
}

#studentPage .avatar-job-skill span {
  font-size:13px !important;
}

#studentPage .avatar-job-skill strong {
  font-family: 'Itim', 'Sarabun', sans-serif !important;
  font-size:19px !important;
  font-weight: 400 !important;
}

#studentPage .avatar-stat-row {
  grid-template-columns:
    72px
    minmax(0, 1fr)
    34px !important;
}

#studentPage .avatar-stat-row > span {
  font-size:13px !important;
}

#studentPage .avatar-stat-row > strong {
  font-size:13px !important;
}

/* ---------- ร้านค้าและคลัง ---------- */
#studentPage .avatar-mode-switch button {
  min-height: 39px !important;
  padding: 8px 12px !important;
  font-family: 'Itim', 'Sarabun', sans-serif !important;
  font-size:13px !important;
  font-weight: 400 !important;
}

#studentPage .avatar-shop-toolbar {
  margin-top: 16px !important;
  gap: 8px !important;
}

#studentPage .avatar-shop-toolbar button {
  min-height: 38px !important;
  padding: 8px 12px !important;
  font-family: 'Itim', 'Sarabun', sans-serif !important;
  font-size:13px !important;
  line-height: 1 !important;
  font-weight: 400 !important;
}

/*
  คง 4 การ์ดบนจอกว้าง แต่เพิ่มความสูงเล็กน้อย
  เพื่อรองรับข้อความขนาดใหญ่โดยไม่ทับกัน
*/
#studentPage .avatar-item-grid {
  margin-top: 15px !important;
  gap: 11px !important;
}

#studentPage .avatar-item-card {
  min-height: 284px !important;
  padding: 13px 11px !important;
}

#studentPage .avatar-item-icon {
  min-height: 83px !important;
}

#studentPage .avatar-item-copy {
  margin-top: 8px !important;
  margin-bottom: 10px !important;
}

#studentPage .avatar-item-copy > span,
#studentPage .avatar-item-copy > small:first-child {
  color: #807592 !important;
  font-family: 'Sarabun', sans-serif !important;
  font-size:13px !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;
}

#studentPage .avatar-item-copy strong {
  min-height: 42px !important;
  color: #33284f !important;
  font-family: 'Itim', 'Sarabun', sans-serif !important;
  font-size:15px !important;
  line-height: 1.22 !important;
  font-weight: 400 !important;
}

#studentPage .avatar-item-copy small:last-child {
  min-height: 33px !important;
  color: #746b85 !important;
  font-family: 'Sarabun', sans-serif !important;
  font-size:13px !important;
  line-height: 1.4 !important;
  font-weight: 600 !important;
}

#studentPage .avatar-item-price {
  min-height: 32px !important;
  margin: 9px 0 !important;
  padding: 7px 6px !important;
  font-size:13px !important;
  line-height: 1 !important;
}

#studentPage .avatar-item-action {
  min-height: 38px !important;
  padding: 7px 6px !important;
  font-family: 'Itim', 'Sarabun', sans-serif !important;
  font-size:13px !important;
  line-height: 1.05 !important;
  font-weight: 400 !important;
}

#studentPage .avatar-item-action i {
  font-size:13px !important;
}

#studentPage .avatar-item-card.is-preview::after {
  font-size:13px !important;
}

/* ---------- ประวัติเหรียญ ---------- */
#studentPage .avatar-transaction-list {
  gap: 9px !important;
}

#studentPage .avatar-transaction-item {
  min-height: 66px !important;
  padding: 11px 12px !important;
  gap: 11px !important;
  border-radius: 14px !important;
}

#studentPage .avatar-transaction-icon {
  width: 42px !important;
  height: 42px !important;
  flex: 0 0 42px !important;
  font-size:16px !important;
}

#studentPage .avatar-transaction-item strong {
  color: #392e55 !important;
  font-size:13px !important;
  line-height: 1.3 !important;
  font-weight: 900 !important;
}

#studentPage .avatar-transaction-item small {
  margin-top: 3px !important;
  color: #7d748c !important;
  font-size:13px !important;
  line-height: 1.35 !important;
  font-weight: 600 !important;
}

#studentPage .avatar-transaction-amount {
  font-size:15px !important;
  line-height: 1.15 !important;
}

#studentPage .avatar-transaction-amount small {
  margin-top: 4px !important;
  font-size:13px !important;
}

/* ---------- หน้าเลือกอาชีพและรูปลักษณ์ ---------- */
#studentPage .avatar-job-card strong {
  font-family: 'Itim', 'Sarabun', sans-serif !important;
  font-size:15px !important;
  font-weight: 400 !important;
}

#studentPage .avatar-job-card small {
  font-size:13px !important;
}

#studentPage .avatar-appearance-grid label > span {
  font-size:13px !important;
}

#studentPage .avatar-appearance-grid .input {
  min-height: 46px !important;
  font-size:13px !important;
}

#studentPage .avatar-save-btn {
  min-height: 46px !important;
  font-size:13px !important;
}

/* ---------- จอที่แคบลง ใช้ 3/2 ใบ เพื่อไม่บีบตัวอักษร ---------- */
@media (max-width: 1380px) {
  #studentPage .avatar-item-grid {
    grid-template-columns:
      repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 980px) {
  #studentPage .avatar-workspace-panel {
    padding:
      15px
      12px
      24px
      12px !important;
  }

  #studentPage .avatar-item-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 520px) {
  #studentPage .avatar-section-head h3 {
    font-size:23px !important;
  }

  #studentPage .avatar-item-copy strong {
    font-size:13.5px !important;
  }

  #studentPage .avatar-item-action {
    font-size:13px !important;
  }

  #studentPage .avatar-transaction-item strong {
    font-size:13px !important;
  }
}



/* ============================================================
   PATCH B7 — SARABUN FONT + LARGER MENU LABELS
   Base: Recovery V8.4 + Patch A + B2 + B5 + B6
============================================================ */

/*
  เปลี่ยนข้อความในพื้นที่ My Avatar กลับเป็น Sarabun
  ไม่กำหนดกับ <i> เพื่อไม่ให้กระทบ Font Awesome
*/
#studentPage .avatar-page-v1,
#studentPage .avatar-page-v1 h1,
#studentPage .avatar-page-v1 h2,
#studentPage .avatar-page-v1 h3,
#studentPage .avatar-page-v1 h4,
#studentPage .avatar-page-v1 h5,
#studentPage .avatar-page-v1 h6,
#studentPage .avatar-page-v1 p,
#studentPage .avatar-page-v1 span,
#studentPage .avatar-page-v1 strong,
#studentPage .avatar-page-v1 small,
#studentPage .avatar-page-v1 label,
#studentPage .avatar-page-v1 button,
#studentPage .avatar-page-v1 input,
#studentPage .avatar-page-v1 select,
#studentPage .avatar-page-v1 textarea,
#studentPage .student-game-tabbar .eport-tab {
  font-family: 'Sarabun', sans-serif !important;
}

/* ---------- เมนูหลัก 4 ปุ่มด้านบน ---------- */
#studentPage .student-game-shell .eport-tabs {
  gap: 10px !important;
}

#studentPage .student-game-shell .eport-tab {
  min-height: 50px !important;
  padding: 10px 17px !important;
  font-family: 'Sarabun', sans-serif !important;
  font-size:16px !important;
  line-height: 1.15 !important;
  font-weight: 800 !important;
}

#studentPage .student-game-shell .eport-tab i {
  font-size:14px !important;
}

/* ---------- เมนู My Avatar 3 ปุ่ม ---------- */
#studentPage .avatar-workspace-tabs {
  height: 62px !important;
  min-height: 62px !important;
  max-height: 62px !important;
  padding: 6px !important;
  grid-template-rows: 50px !important;
}

#studentPage .avatar-workspace-tabs button,
#studentPage .avatar-workspace-tabs button.active {
  height: 50px !important;
  min-height: 50px !important;
  max-height: 50px !important;
  padding: 9px 13px !important;
  gap: 8px !important;
  font-family: 'Sarabun', sans-serif !important;
  font-size:16px !important;
  line-height: 1.15 !important;
  font-weight: 800 !important;
}

#studentPage .avatar-workspace-tabs button i {
  font-size:14px !important;
}

/* ---------- ปุ่มร้านค้า/คลัง และหมวดสินค้า ---------- */
#studentPage .avatar-mode-switch button,
#studentPage .avatar-shop-tabs button {
  min-height: 42px !important;
  padding: 9px 14px !important;
  font-family: 'Sarabun', sans-serif !important;
  font-size:14px !important;
  line-height: 1.1 !important;
  font-weight: 800 !important;
}

#studentPage .avatar-shop-toolbar button,
#studentPage .avatar-category-filter button {
  min-height: 40px !important;
  padding: 8px 13px !important;
  font-family: 'Sarabun', sans-serif !important;
  font-size:13.5px !important;
  line-height: 1.1 !important;
  font-weight: 800 !important;
}

/* ---------- ข้อความที่ B6 เคยกำหนดเป็น Itim ---------- */
#studentPage .avatar-section-head h3,
#studentPage .avatar-player-head h3,
#studentPage .avatar-job-skill strong,
#studentPage .avatar-item-copy strong,
#studentPage .avatar-item-action,
#studentPage .avatar-job-card strong,
#studentPage .avatar-item-card.is-preview::after {
  font-family: 'Sarabun', sans-serif !important;
}

/* Sarabun ใช้พื้นที่แนวนอนมากกว่า Itim เล็กน้อย */
#studentPage .avatar-item-copy strong {
  font-size:14.5px !important;
  line-height: 1.3 !important;
  font-weight: 800 !important;
}

#studentPage .avatar-item-action {
  font-size:13px !important;
  line-height: 1.15 !important;
  font-weight: 800 !important;
}

/* ---------- Tablet / Mobile ---------- */
@media (max-width: 980px) {
  #studentPage .student-game-shell .eport-tab {
    min-height: 47px !important;
    padding: 9px 13px !important;
    font-size:14.5px !important;
  }

  #studentPage .avatar-workspace-tabs button,
  #studentPage .avatar-workspace-tabs button.active {
    font-size:14.5px !important;
  }
}

@media (max-width: 640px) {
  #studentPage .student-game-shell .eport-tabs {
    gap: 7px !important;
  }

  #studentPage .student-game-shell .eport-tab {
    min-height: 44px !important;
    padding: 8px 10px !important;
    font-size:13px !important;
  }

  #studentPage .avatar-workspace-tabs,
  #studentPage .avatar-workspace-tabs button,
  #studentPage .avatar-workspace-tabs button.active {
    height: auto !important;
    max-height: none !important;
  }

  #studentPage .avatar-workspace-tabs button,
  #studentPage .avatar-workspace-tabs button.active {
    min-height: 46px !important;
    font-size:14px !important;
  }
}



/* ============================================================
   PHASE C — ARMOR + ATK/DEF + BATTLE POWER
   Base: Stable Recovery + Patch A + B2 + B5 + B6 + B7
============================================================ */

/* 4 equipment summary cells */
#studentPage .avatar-equipped-summary {
  grid-template-columns:
    repeat(4, minmax(0, 1fr)) !important;
  gap: 7px !important;
}

#studentPage .avatar-equipped-summary > div {
  min-width: 0 !important;
  padding: 10px 7px !important;
}

#studentPage .avatar-equipped-summary strong {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Armor layered over the current outfit */
#studentPage .voxel-avatar-armor-vc {
  --armor-primary: #aeb8c5;
  --armor-secondary: #596878;
  position: absolute;
  z-index: 18;
  left: 72px;
  top: 103px;
  width: 96px;
  height: 116px;
  display: none;
  transform: translateZ(27px);
  transform-style: preserve-3d;
  pointer-events: none;
}

#studentPage .voxel-avatar-armor-vc.is-active {
  display: block;
}

#studentPage .voxel-avatar-armor-vc .armor-chest {
  position: absolute;
  left: 8px;
  top: 13px;
  width: 80px;
  height: 79px;
  border: 3px solid rgba(35,29,50,.36);
  background-color: var(--armor-primary);
  clip-path: polygon(
    0 0, 26% 0, 34% 12%, 66% 12%, 74% 0,
    100% 0, 100% 83%, 78% 100%,
    22% 100%, 0 83%
  );
  box-shadow:
    inset -10px -8px 0
      color-mix(
        in srgb,
        var(--armor-primary) 70%,
        #1e2630
      ),
    inset 7px 6px 0 rgba(255,255,255,.18);
}

#studentPage .voxel-avatar-armor-vc .armor-core {
  position: absolute;
  z-index: 2;
  left: 38px;
  top: 37px;
  width: 20px;
  height: 20px;
  border: 3px solid rgba(255,255,255,.64);
  background-color: var(--armor-secondary);
  transform: rotate(45deg);
}

#studentPage .voxel-avatar-armor-vc .armor-shoulder {
  position: absolute;
  top: 7px;
  width: 34px;
  height: 29px;
  border: 3px solid rgba(35,29,50,.33);
  background-color: var(--armor-secondary);
  box-shadow: inset -6px -5px 0 rgba(30,24,47,.16);
}

#studentPage .voxel-avatar-armor-vc
.armor-shoulder.armor-left {
  left: -22px;
  transform: rotateZ(-8deg);
}

#studentPage .voxel-avatar-armor-vc
.armor-shoulder.armor-right {
  right: -22px;
  transform: rotateZ(8deg);
}

#studentPage .voxel-avatar-armor-vc .armor-belt {
  position: absolute;
  left: 13px;
  bottom: 8px;
  width: 70px;
  height: 13px;
  border: 2px solid rgba(35,29,50,.34);
  background-color: var(--armor-secondary);
}

/* Armor visual variants */
#studentPage .voxel-avatar-armor-vc[
  data-armor-style="armor-leather"
] .armor-chest {
  box-shadow:
    inset -10px -8px 0 #714623,
    inset 7px 6px 0 rgba(255,255,255,.13);
}

#studentPage .voxel-avatar-armor-vc[
  data-armor-style="armor-shadow"
] {
  filter:
    drop-shadow(0 0 7px rgba(167,107,232,.38));
}

#studentPage .voxel-avatar-armor-vc[
  data-armor-style="armor-mystic"
] .armor-core,
#studentPage .voxel-avatar-armor-vc[
  data-armor-style="armor-crystal"
] .armor-core {
  animation:
    avatarArmorCorePulseC
    1.45s
    steps(4, end)
    infinite;
}

@keyframes avatarArmorCorePulseC {
  0%, 100% {
    opacity: .62;
    transform: rotate(45deg) scale(1);
  }
  50% {
    opacity: 1;
    transform: rotate(45deg) scale(1.18);
  }
}

/* Armor cards */
#studentPage .avatar-item-pixel-preview-armor
.armor-body {
  left: 13px;
  top: 12px;
  width: 39px;
  height: 42px;
  border: 2px solid rgba(42,34,55,.30);
  background-color: var(--item-primary);
  clip-path: polygon(
    0 0, 25% 0, 33% 13%, 67% 13%, 75% 0,
    100% 0, 100% 80%, 78% 100%,
    22% 100%, 0 80%
  );
  box-shadow:
    inset -7px -6px 0
      color-mix(
        in srgb,
        var(--item-primary) 72%,
        #202633
      );
}

#studentPage .avatar-item-pixel-preview-armor
.armor-core {
  left: 27px;
  top: 27px;
  width: 12px;
  height: 12px;
  background-color: var(--item-secondary);
  transform: rotate(45deg);
}

#studentPage .avatar-item-pixel-preview-armor
.armor-shoulder {
  top: 12px;
  width: 17px;
  height: 15px;
  background-color: var(--item-secondary);
}

#studentPage .avatar-item-pixel-preview-armor
.armor-shoulder.left {
  left: 1px;
  transform: rotate(-8deg);
}

#studentPage .avatar-item-pixel-preview-armor
.armor-shoulder.right {
  right: 1px;
  transform: rotate(8deg);
}

#studentPage .avatar-item-pixel-preview-armor
.armor-belt {
  left: 17px;
  top: 49px;
  width: 31px;
  height: 7px;
  background-color: var(--item-secondary);
}

/* ATK / DEF badges */
#studentPage .avatar-item-stat-badges {
  min-height: 27px;
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 5px;
}

#studentPage .avatar-item-stat-badges span {
  min-height: 25px;
  padding: 5px 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border-radius: 8px;
  font-family: 'Sarabun', sans-serif !important;
  font-size:13px;
  line-height: 1;
  font-weight: 900;
}

#studentPage .avatar-item-stat-badges .is-atk {
  color: #a93945;
  background-color: #ffe7e9;
}

#studentPage .avatar-item-stat-badges .is-def {
  color: #315f9e;
  background-color: #e5f0ff;
}

#studentPage .avatar-item-card {
  min-height: 318px !important;
}

/* Equipment bonus shown beside job base stat */
#studentPage .avatar-stat-row strong small {
  margin-left: 3px;
  color: #20a876;
  font-size:13px !important;
  font-weight: 900;
}

/* Gear note */
#studentPage .avatar-cosmetic-note {
  color: #3d6a60 !important;
  background-color: #e9faf4 !important;
}

/* Mobile equipment summary */
@media (max-width: 640px) {
  #studentPage .avatar-equipped-summary {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
  }
}



/* ============================================================
   PHASE C COMPLETE — 4-COLUMN HAIR + ARMOR + STATS
   Final override after Phase C Armor/Stats
============================================================ */

/* แถวละ 4 ช่องเท่ากัน:
   เพศ | ใบหน้า | ดวงตา | ปาก
   สีผิว | ทรงผม | สีผมสำเร็จรูป | เลือกสีเอง
*/
#studentPage .avatar-appearance-grid {
  grid-template-columns:
    repeat(4, minmax(0, 1fr)) !important;
  gap: 11px !important;
  align-items: end !important;
}

#studentPage .avatar-appearance-grid > label {
  min-width: 0 !important;
  width: 100% !important;
}

#studentPage .avatar-appearance-grid .input,
#studentPage .avatar-hair-picker-wrap {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 46px !important;
  box-sizing: border-box !important;
}

/* ช่องเลือกสีเองมีขนาดเท่าช่อง Select */
#studentPage .avatar-hair-picker-wrap {
  padding: 5px 10px !important;
  display: grid !important;
  grid-template-columns:
    42px
    minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 10px !important;
  border: 2px solid #d8e1f4 !important;
  border-radius: 13px !important;
  background-color: #f8faff !important;
}

#studentPage #avatarHairCustomColor {
  width: 42px !important;
  height: 34px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  cursor: pointer !important;
}

#studentPage #avatarHairCustomColor::-webkit-color-swatch-wrapper {
  padding: 0 !important;
}

#studentPage #avatarHairCustomColor::-webkit-color-swatch {
  border: 2px solid #ffffff !important;
  border-radius: 8px !important;
  box-shadow:
    0 0 0 1px #bdb4d7,
    0 3px 0 rgba(87, 71, 145, .12) !important;
}

#studentPage #avatarHairCustomColor::-moz-color-swatch {
  border: 2px solid #ffffff !important;
  border-radius: 8px !important;
  box-shadow:
    0 0 0 1px #bdb4d7 !important;
}

#studentPage #avatarHairColorHex {
  overflow: hidden !important;
  color: #51466b !important;
  font-family: 'Sarabun', sans-serif !important;
  font-size:13px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
  text-align: left !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* ตราอาชีพบนหน้าอกชัดขึ้น */
#studentPage .voxel-job-emblem-v8 {
  top: 36px !important;
  transform:
    translateX(-50%)
    scale(1.34) !important;
  transform-origin: center center !important;
  filter:
    drop-shadow(
      0 2px 0 rgba(47, 36, 86, .15)
    ) !important;
}

#studentPage .voxel-torso-block-v8 {
  overflow: visible !important;
}

/* ค่า ATK / DEF ของอุปกรณ์อ่านง่าย */
#studentPage .avatar-item-stat-badges {
  min-height: 28px !important;
  display: grid !important;
  grid-template-columns:
    repeat(2, minmax(0, 1fr)) !important;
  gap: 5px !important;
}

#studentPage .avatar-item-stat-badges span {
  min-height: 26px !important;
  padding: 5px 4px !important;
  font-family: 'Sarabun', sans-serif !important;
  font-size:13px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
}

/* Responsive */
@media (max-width: 1100px) {
  #studentPage .avatar-appearance-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 560px) {
  #studentPage .avatar-appearance-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   PHASE C4 PATCH — WHITE BASE SHIRT + SHIELD + BIGGER ITEMS
============================================================ */
#studentPage .voxel-torso-block-v8 .voxel-face-v8 {
  background-color:
    var(--avatar-primary, #f8f7ff) !important;
}
#studentPage .voxel-torso-block-v8 .face-left,
#studentPage .voxel-torso-block-v8 .face-right,
#studentPage .voxel-torso-block-v8 .face-back {
  background-color:
    var(--avatar-primary-side, #e8e5f6) !important;
}
#studentPage .voxel-torso-block-v8 .face-top {
  background-color:
    var(--avatar-primary-top, #ffffff) !important;
}
#studentPage .voxel-torso-block-v8 .face-bottom {
  background-color:
    var(--avatar-primary-bottom, #ddd8f0) !important;
}
#studentPage .voxel-shirt-light-v8 {
  background-color:
    rgba(255,255,255,.32) !important;
}
#studentPage .voxel-shirt-pixel-v8 {
  background-color: var(--avatar-secondary) !important;
}
#studentPage .voxel-job-emblem-v8 {
  width: 30px !important;
  height: 30px !important;
  top: 34px !important;
}

/* Bigger armor with more parts */
#studentPage .voxel-avatar-armor-vc .armor-armguard,
#studentPage .voxel-avatar-armor-vc .armor-thigh {
  position: absolute;
  border: 3px solid rgba(35,29,50,.3);
  background: var(--armor-primary);
  box-shadow: inset -5px -5px 0 rgba(32,26,47,.12);
}
#studentPage .voxel-avatar-armor-vc .armor-armguard {
  top: 40px;
  width: 17px;
  height: 46px;
}
#studentPage .voxel-avatar-armor-vc .armor-armguard.armor-left { left: -13px; transform: rotate(-7deg); }
#studentPage .voxel-avatar-armor-vc .armor-armguard.armor-right { right: -13px; transform: rotate(7deg); }
#studentPage .voxel-avatar-armor-vc .armor-thigh {
  top: 82px;
  width: 24px;
  height: 18px;
  background: var(--armor-secondary);
}
#studentPage .voxel-avatar-armor-vc .armor-thigh.armor-left { left: 18px; }
#studentPage .voxel-avatar-armor-vc .armor-thigh.armor-right { right: 18px; }

/* Shield visual */
#studentPage .voxel-avatar-shield-v8 {
  --shield-primary: #f4f7ff;
  --shield-secondary: #5f7fff;
  position: absolute;
  z-index: 24;
  left: 44px;
  top: 122px;
  width: 52px;
  height: 66px;
  display: none;
  transform: translateZ(31px) rotate(-10deg);
  pointer-events: none;
}
#studentPage .voxel-avatar-shield-v8.is-active { display: block; }
#studentPage .voxel-avatar-shield-v8 .shield-shell {
  position: absolute;
  inset: 0;
  background: var(--shield-primary);
  border: 4px solid rgba(37,31,58,.34);
  clip-path: polygon(50% 0, 100% 16%, 100% 60%, 50% 100%, 0 60%, 0 16%);
  box-shadow: inset -8px -8px 0 rgba(42,35,69,.14), inset 6px 6px 0 rgba(255,255,255,.28);
}
#studentPage .voxel-avatar-shield-v8 .shield-core {
  position: absolute;
  left: 13px;
  top: 15px;
  width: 18px;
  height: 24px;
  background: var(--shield-secondary);
  clip-path: polygon(50% 0, 100% 18%, 100% 72%, 50% 100%, 0 72%, 0 18%);
}
#studentPage .voxel-avatar-shield-v8 .shield-gem {
  position: absolute;
  left: 20px;
  top: 24px;
  width: 8px;
  height: 8px;
  background: #fff7cf;
  transform: rotate(45deg);
}
#studentPage .voxel-avatar-shield-v8[data-shield-style="shield-shadow"] { filter: drop-shadow(0 0 7px rgba(167,107,232,.4)); }
#studentPage .voxel-avatar-shield-v8[data-shield-style="shield-arcane"] .shield-core,
#studentPage .voxel-avatar-shield-v8[data-shield-style="shield-celestial"] .shield-core { box-shadow: 0 0 10px rgba(123,225,255,.55); }

/* item card shield previews */
#studentPage .avatar-item-pixel-preview-shield {
  position: relative;
  width: 76px;
  height: 82px;
}
#studentPage .avatar-item-pixel-preview-shield .shield-shell,
#studentPage .avatar-item-pixel-preview-shield .shield-core,
#studentPage .avatar-item-pixel-preview-shield .shield-trim,
#studentPage .avatar-item-pixel-preview-shield .shield-gem {
  position: absolute;
}
#studentPage .avatar-item-pixel-preview-shield .shield-shell {
  left: 16px;
  top: 8px;
  width: 44px;
  height: 54px;
  background: var(--item-primary);
  border: 4px solid rgba(44,36,68,.28);
  clip-path: polygon(50% 0, 100% 16%, 100% 62%, 50% 100%, 0 62%, 0 16%);
}
#studentPage .avatar-item-pixel-preview-shield .shield-core {
  left: 27px;
  top: 20px;
  width: 22px;
  height: 26px;
  background: var(--item-secondary);
  clip-path: polygon(50% 0, 100% 18%, 100% 72%, 50% 100%, 0 72%, 0 18%);
}
#studentPage .avatar-item-pixel-preview-shield .shield-trim {
  left: 32px;
  top: 17px;
  width: 12px;
  height: 34px;
  background: rgba(255,255,255,.18);
}
#studentPage .avatar-item-pixel-preview-shield .shield-gem {
  left: 34px;
  top: 28px;
  width: 8px;
  height: 8px;
  background: #fff8cf;
  transform: rotate(45deg);
}

/* larger prop previews on avatar */
#studentPage .voxel-avatar-accessory-back-v8[data-accessory-style="hero-cape"] .voxel-cape-v8 {
  position: absolute;
  left: 16px;
  top: 18px;
  width: 88px;
  height: 162px;
}
#studentPage .voxel-avatar-accessory-back-v8[data-accessory-style="hero-cape"] .voxel-cape-v8 i:nth-child(1) {
  left: 10px; top: 0; width: 64px; height: 150px;
}
#studentPage .voxel-avatar-accessory-back-v8[data-accessory-style="hero-cape"] .voxel-cape-v8 i:nth-child(2) {
  left: 0; top: 18px; width: 28px; height: 130px;
}
#studentPage .voxel-avatar-accessory-back-v8[data-accessory-style="hero-cape"] .voxel-cape-v8 i:nth-child(3) {
  right: 0; top: 18px; width: 28px; height: 130px;
}
#studentPage .voxel-avatar-accessory-front-v8[data-accessory-style="duck-float"] .voxel-duck-float-v8 { left: -18px; top: 128px; width: 128px; height: 44px; }
#studentPage .voxel-avatar-accessory-front-v8[data-accessory-style="duck-float"] .head { left: -8px; top: -14px; width: 32px; height: 24px; }
#studentPage .voxel-avatar-accessory-front-v8[data-accessory-style="duck-float"] .beak { left: -14px; top: -2px; width: 12px; height: 10px; }
#studentPage .voxel-avatar-accessory-front-v8[data-accessory-style="duck-float"] .wing { right: 14px; top: 10px; width: 24px; height: 14px; }
#studentPage .voxel-avatar-accessory-front-v8[data-accessory-style="hobby-horse"] .voxel-hobby-horse-v8 { left: 54px; top: 100px; width: 58px; height: 110px; }
#studentPage .voxel-avatar-accessory-front-v8[data-accessory-style="hobby-horse"] .head { left: -10px; top: -12px; width: 44px; height: 34px; }
#studentPage .voxel-avatar-accessory-front-v8[data-accessory-style="hobby-horse"] .ear { left: 4px; top: -20px; width: 14px; height: 14px; }
#studentPage .voxel-avatar-accessory-front-v8[data-accessory-style="hobby-horse"] .stick { left: 20px; top: 18px; width: 9px; height: 88px; }

/* larger prop previews in cards */
#studentPage .avatar-item-pixel-preview-accessory[data-kind="duck"] .duck-body { left: 10px; top: 32px; width: 56px; height: 24px; }
#studentPage .avatar-item-pixel-preview-accessory[data-kind="duck"] .duck-head { left: 4px; top: 18px; width: 20px; height: 16px; }
#studentPage .avatar-item-pixel-preview-accessory[data-kind="duck"] .duck-beak { left: -2px; top: 24px; width: 10px; height: 8px; }
#studentPage .avatar-item-pixel-preview-accessory[data-kind="horse"] .horse-head { left: 22px; top: 10px; width: 28px; height: 22px; }
#studentPage .avatar-item-pixel-preview-accessory[data-kind="horse"] .horse-stick { left: 32px; top: 26px; width: 8px; height: 42px; }
#studentPage .avatar-item-pixel-preview-accessory[data-kind="horse"] .horse-ear { left: 28px; top: 2px; width: 10px; height: 10px; }

/* larger pan and staff-like props in avatar */
#studentPage .voxel-avatar-weapon-v8[data-weapon-kind="pan"] { left: 156px; top: 122px; width: 72px; height: 86px; }
#studentPage .voxel-avatar-weapon-v8[data-weapon-kind="pan"] .pan-head { width: 34px; height: 34px; left: 0; top: 12px; }
#studentPage .voxel-avatar-weapon-v8[data-weapon-kind="pan"] .pan-core { width: 18px; height: 18px; left: 8px; top: 20px; }
#studentPage .voxel-avatar-weapon-v8[data-weapon-kind="pan"] .pan-handle { width: 42px; height: 10px; left: 20px; top: 24px; }

/* better readable labels */
#studentPage .avatar-equipped-summary {
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)) !important;
}
#studentPage .avatar-equipped-summary span { font-size:13px !important; }
#studentPage .avatar-equipped-summary strong { font-size:14px !important; }
#studentPage .avatar-cosmetic-note { font-size:13px !important; }



/* ============================================================
   PHASE C4.2 — COMPACT ITEM CARDS
   Category/job icons + price inside action buttons
============================================================ */

#studentPage .avatar-item-grid {
  gap: 10px !important;
}

#studentPage .avatar-item-card.compact-card {
  position: relative !important;
  min-height: 226px !important;
  padding: 11px 10px 10px !important;
  display: flex !important;
  flex-direction: column !important;
  border-radius: 17px !important;
  overflow: visible !important;
}

#studentPage .avatar-item-corner-meta {
  position: absolute !important;
  z-index: 12 !important;
  top: 8px !important;
  left: 8px !important;
  right: 8px !important;
  height: 30px !important;
  display: grid !important;
  grid-template-columns:
    30px
    minmax(0, 1fr)
    30px !important;
  align-items: center !important;
  pointer-events: none !important;
}

#studentPage .avatar-item-corner-badge,
#studentPage .avatar-item-owned-mark {
  width: 29px !important;
  height: 29px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 2px solid #ffffff !important;
  border-radius: 10px !important;
  box-shadow:
    0 3px 0 rgba(64,49,112,.14),
    0 0 0 1px rgba(113,92,177,.10) !important;
  font-size:13px !important;
}

#studentPage .avatar-item-corner-badge.category {
  grid-column: 1 !important;
  color: #594b84 !important;
  background-color: #f1eefb !important;
}

#studentPage .avatar-item-owned-mark {
  grid-column: 2 !important;
  justify-self: center !important;
  width: 25px !important;
  height: 25px !important;
  color: #ffffff !important;
  background-color: #35bf88 !important;
  border-radius: 999px !important;
  font-size:13px !important;
}

#studentPage .avatar-item-corner-badge.job {
  grid-column: 3 !important;
  justify-self: end !important;
  color: #ffffff !important;
}

#studentPage .avatar-item-corner-badge.job-all {
  background-color: #7b6b9d !important;
}

#studentPage .avatar-item-corner-badge.job-fighter {
  background-color: #ff646d !important;
}

#studentPage .avatar-item-corner-badge.job-mage {
  background-color: #8063ff !important;
}

#studentPage .avatar-item-corner-badge.job-assassin {
  background-color: #343c4d !important;
}

#studentPage .avatar-item-corner-badge.job-support {
  background-color: #35c995 !important;
}

#studentPage .avatar-item-corner-badge.job-carry {
  background-color: #3d9df2 !important;
}

#studentPage .avatar-item-icon.compact {
  min-height: 82px !important;
  height: 82px !important;
  margin: 13px 0 1px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#studentPage .avatar-item-icon.compact
.avatar-item-pixel-preview {
  transform: scale(.88) !important;
  transform-origin: center !important;
}

#studentPage .avatar-item-copy.compact {
  min-height: 54px !important;
  margin: 3px 0 6px !important;
  display: grid !important;
  grid-template-rows:
    minmax(34px, auto)
    20px !important;
  align-content: center !important;
  justify-items: center !important;
  gap: 2px !important;
}

#studentPage .avatar-item-copy.compact strong {
  min-height: 34px !important;
  padding: 0 2px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #33284f !important;
  font-family: 'Sarabun', sans-serif !important;
  font-size:14px !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;
  text-align: center !important;
}

#studentPage .avatar-item-requirement {
  min-height: 20px !important;
  padding: 3px 7px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  border-radius: 999px !important;
  color: #7a6f8c !important;
  background-color: #f2eff8 !important;
  font-family: 'Sarabun', sans-serif !important;
  font-size:13px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
}

#studentPage .avatar-item-stat-badges.compact {
  min-height: 27px !important;
  margin: 0 0 7px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
}

#studentPage .avatar-item-stat-badges.compact span {
  min-width: 52px !important;
  min-height: 26px !important;
  padding: 5px 7px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  font-size:13px !important;
}

#studentPage .avatar-item-price {
  display: none !important;
}

#studentPage .avatar-item-actions.compact {
  width: 100% !important;
  min-height: 37px !important;
  margin-top: auto !important;
  display: grid !important;
  grid-template-columns:
    repeat(2, minmax(0, 1fr)) !important;
  gap: 6px !important;
}

#studentPage .avatar-item-actions.compact
.avatar-item-action {
  min-width: 0 !important;
  min-height: 37px !important;
  height: 37px !important;
  padding: 6px 5px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  border-radius: 10px !important;
  font-family: 'Sarabun', sans-serif !important;
  font-size:13px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}

#studentPage .avatar-item-actions.compact
.avatar-item-action i {
  font-size:13px !important;
}

#studentPage .avatar-item-actions.compact
.avatar-item-action.sell {
  color: #754420 !important;
  background-color: #ffd3a9 !important;
  border-color: #ffc08a !important;
}

#studentPage .avatar-item-actions.compact
.avatar-item-action.compact-money {
  font-size:13px !important;
  font-weight: 900 !important;
}

#studentPage .avatar-dollar-symbol {
  font-family: Arial, sans-serif !important;
  font-size:14px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
}

#studentPage .avatar-item-actions.compact
.avatar-item-action.buy {
  color: #513d00 !important;
  background-color: #ffd55c !important;
  border-color: #f4bd2c !important;
}

#studentPage .avatar-item-actions.compact
.avatar-item-action.equip {
  color: #ffffff !important;
  background-color: #7053e9 !important;
  border-color: #6042d8 !important;
}

#studentPage .avatar-item-actions.compact
.avatar-item-action.unequip {
  color: #98384a !important;
  background-color: #ffe6eb !important;
  border-color: #f3a4b2 !important;
}

#studentPage .avatar-item-card.compact-card.is-equipped {
  border-color: #35bf88 !important;
}

#studentPage .avatar-item-card.compact-card.is-preview {
  border-color: #4f7fff !important;
}

#studentPage .avatar-item-card.compact-card.is-preview::after {
  top: 42px !important;
  right: 8px !important;
  min-height: 21px !important;
  padding: 4px 7px !important;
  font-size:13px !important;
}

/* Three action buttons remain compact in one row. */
#studentPage .avatar-item-actions.compact
.avatar-item-action:nth-child(3) {
  grid-column: auto !important;
}

/* Wider screens keep four cards; medium screens retain readable text. */
@media (min-width: 1381px) {
  #studentPage .avatar-item-card.compact-card {
    min-height: 226px !important;
  }
}

@media (max-width: 1380px) {
  #studentPage .avatar-item-card.compact-card {
    min-height: 230px !important;
  }

  #studentPage .avatar-item-copy.compact strong {
    font-size:13.5px !important;
  }
}

@media (max-width: 980px) {
  #studentPage .avatar-item-card.compact-card {
    min-height: 222px !important;
  }
}

@media (max-width: 520px) {
  #studentPage .avatar-item-card.compact-card {
    min-height: 216px !important;
    padding: 9px 7px 8px !important;
  }

  #studentPage .avatar-item-corner-meta {
    top: 6px !important;
    left: 6px !important;
    right: 6px !important;
  }

  #studentPage .avatar-item-copy.compact strong {
    font-size:13px !important;
  }

  #studentPage .avatar-item-actions.compact
  .avatar-item-action {
    min-height: 35px !important;
    height: 35px !important;
    font-size:13px !important;
  }
}



/* ============================================================
   PHASE C4.3 — FULL STATS + 2 ACCESSORIES + COIN + JOB EMBLEM
============================================================ */

#studentPage .avatar-preview-status-group {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 7px !important;
  flex-wrap: wrap !important;
}

#studentPage .avatar-preview-coin-pill {
  min-height: 31px !important;
  padding: 6px 9px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  border: 2px solid #f2c94c !important;
  border-radius: 999px !important;
  color: #624900 !important;
  background-color: #fff2ad !important;
  box-shadow: 0 4px 0 rgba(192,146,0,.16) !important;
  font-family: 'Sarabun', sans-serif !important;
  font-size:13px !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}

#studentPage .avatar-preview-coin-pill i {
  color: #b98200 !important;
}

#studentPage .avatar-preview-coin-pill strong {
  color: #4f3b00 !important;
  font-size:13px !important;
}

#studentPage .voxel-avatar-accessory-back-v8.accessory-layer-1 { z-index: 2 !important; }
#studentPage .voxel-avatar-accessory-back-v8.accessory-layer-2 { z-index: 3 !important; }
#studentPage .voxel-avatar-accessory-front-v8.accessory-layer-1 { z-index: 7 !important; }
#studentPage .voxel-avatar-accessory-front-v8.accessory-layer-2 { z-index: 8 !important; }

#studentPage .avatar-item-stat-badges.compact.full-stats {
  min-height: 26px !important;
  margin: 0 0 7px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 4px !important;
}

#studentPage .avatar-item-stat-badges.compact.full-stats span {
  min-width: 0 !important;
  min-height: 23px !important;
  padding: 4px 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  border-radius: 7px !important;
  font-family: 'Sarabun', sans-serif !important;
  font-size:13px !important;
  font-weight: 900 !important;
}

#studentPage .avatar-item-stat-badges .is-atk {
  color: #963242 !important;
  background-color: #ffe0e5 !important;
}
#studentPage .avatar-item-stat-badges .is-def {
  color: #345691 !important;
  background-color: #e0edff !important;
}
#studentPage .avatar-item-stat-badges .is-hp {
  color: #a33b65 !important;
  background-color: #ffe1ef !important;
}
#studentPage .avatar-item-stat-badges .is-sup {
  color: #167c5b !important;
  background-color: #dff8ee !important;
}

#studentPage .avatar-equipped-summary {
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)) !important;
}

#studentPage .voxel-job-emblem-v8::before,
#studentPage .voxel-job-emblem-v8::after {
  background-color: var(--avatar-job-emblem, #6657D9) !important;
}

#studentPage .voxel-job-emblem-v8[data-job="mage"]::before {
  left: 1px !important;
  top: 1px !important;
  width: 26px !important;
  height: 26px !important;
  clip-path: polygon(50% 0,61% 36%,100% 50%,61% 64%,50% 100%,39% 64%,0 50%,39% 36%) !important;
  transform: none !important;
}
#studentPage .voxel-job-emblem-v8[data-job="mage"]::after {
  left: 21px !important;
  top: -2px !important;
  width: 8px !important;
  height: 8px !important;
  clip-path: polygon(50% 0,65% 35%,100% 50%,65% 65%,50% 100%,35% 65%,0 50%,35% 35%) !important;
  transform: none !important;
}

#studentPage .voxel-job-emblem-v8[data-job="support"]::before {
  left: 1px !important;
  top: 2px !important;
  width: 26px !important;
  height: 24px !important;
  clip-path: polygon(50% 100%,8% 58%,4% 28%,22% 7%,50% 28%,78% 7%,96% 28%,92% 58%) !important;
  transform: none !important;
}
#studentPage .voxel-job-emblem-v8[data-job="support"]::after {
  left: 9px !important;
  top: 8px !important;
  width: 10px !important;
  height: 10px !important;
  background-color: #ffffff !important;
  clip-path: polygon(38% 0,62% 0,62% 38%,100% 38%,100% 62%,62% 62%,62% 100%,38% 100%,38% 62%,0 62%,0 38%,38% 38%) !important;
  transform: none !important;
}

#studentPage .voxel-job-emblem-v8 {
  filter:
    drop-shadow(0 0 1px #ffffff)
    drop-shadow(0 2px 0 rgba(36,29,62,.25)) !important;
}

@media (max-width: 520px) {
  #studentPage .avatar-preview-status-group {
    justify-content: flex-start !important;
  }
  #studentPage .avatar-item-stat-badges.compact.full-stats span {
    font-size:13px !important;
    padding: 4px 5px !important;
  }
}



/* ============================================================
   PHASE C4.4 — AVATAR LAYOUT + STORY SCENE + ITEM TOOLTIP
============================================================ */

#studentPage #avatarContentBox:not(.hidden) {
  display: grid !important;
  grid-template-columns:
    minmax(330px, 390px)
    minmax(0, 1fr) !important;
  grid-template-rows:
    auto
    62px
    calc(
      var(
        --avatar-left-natural-height,
        720px
      ) - 74px
    ) !important;
  gap: 12px 16px !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

#studentPage #avatarContentBox.is-avatar-pane-height-ready:not(.hidden) {
  height: auto !important;
}

#studentPage .avatar-player-banner {
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
  width: 100% !important;
  min-height: 126px !important;
  margin: 0 !important;
  padding: 16px 18px !important;
  display: grid !important;
  grid-template-columns:
    minmax(270px, 1.15fr)
    minmax(390px, 1.3fr)
    minmax(210px, .8fr) !important;
  grid-template-areas:
    "playerhead wallet skill"
    "playerhead rule skill" !important;
  gap: 10px 16px !important;
  align-items: center !important;
  border-radius: 20px !important;
}

#studentPage .avatar-player-banner
.avatar-player-head {
  grid-area: playerhead !important;
  margin: 0 !important;
}

#studentPage .avatar-player-banner
.avatar-wallet-grid {
  grid-area: wallet !important;
  grid-template-columns:
    repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

#studentPage .avatar-player-banner
.avatar-wallet-card {
  min-height: 64px !important;
  padding: 9px 10px !important;
}

#studentPage .avatar-player-banner
.avatar-wallet-card strong {
  font-size:20px !important;
}

#studentPage .avatar-player-banner
.avatar-wallet-rule {
  grid-area: rule !important;
  margin: 0 !important;
  min-height: 37px !important;
}

#studentPage .avatar-player-banner
.avatar-job-skill {
  grid-area: skill !important;
  min-height: 82px !important;
  margin: 0 !important;
  align-self: stretch !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

#studentPage #avatarContentBox >
.avatar-hero-grid {
  grid-column: 1 !important;
  grid-row: 2 / span 2 !important;
  height: auto !important;
  align-self: start !important;
}

#studentPage .avatar-workspace-tabs {
  grid-column: 2 !important;
  grid-row: 2 !important;
}

#studentPage .avatar-workspace-panel {
  grid-column: 2 !important;
  grid-row: 3 !important;
  height: 100% !important;
}

#studentPage .avatar-preview-card {
  overflow: visible !important;
}

#studentPage .avatar-preview-stats-wrap {
  margin-top: 10px !important;
  padding: 12px !important;
  border: 2px solid #e5def7 !important;
  border-radius: 16px !important;
  background-color: #faf9ff !important;
}

#studentPage .avatar-preview-stats-head {
  margin-bottom: 9px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
}

#studentPage .avatar-preview-stats-head span {
  color: #796ca0 !important;
  font-family: 'Sarabun', sans-serif !important;
  font-size:13px !important;
  font-weight: 900 !important;
  letter-spacing: .8px !important;
}

#studentPage .avatar-preview-stats-head strong {
  color: #372c56 !important;
  font-family: 'Sarabun', sans-serif !important;
  font-size:13px !important;
  font-weight: 800 !important;
}

#studentPage .avatar-preview-stats {
  gap: 7px !important;
}

#studentPage .avatar-preview-stats
.avatar-stat-row {
  grid-template-columns:
    58px
    minmax(0, 1fr)
    65px !important;
  min-height: 24px !important;
}

#studentPage .avatar-preview-stats
.avatar-stat-row > span,
#studentPage .avatar-preview-stats
.avatar-stat-row > strong {
  font-size:13px !important;
}

#studentPage .avatar-shop-power-note {
  margin: 2px 0 12px !important;
  padding: 9px 12px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  border: 1px solid #b9ead9 !important;
  border-radius: 12px !important;
  color: #26755d !important;
  background-color: #e9faf4 !important;
  font-family: 'Sarabun', sans-serif !important;
  font-size:13px !important;
  line-height: 1.45 !important;
  font-weight: 700 !important;
}

#studentPage .avatar-shop-power-note i {
  color: #25a47a !important;
}

/* Pixel Story background */
#studentPage .voxel-avatar-stage-v8 {
  position: relative !important;
  isolation: isolate !important;
  background-color: #dcecff !important;
}

#studentPage .avatar-story-background {
  position: absolute !important;
  z-index: 0 !important;
  inset: 10px !important;
  overflow: hidden !important;
  border-radius: 18px !important;
  pointer-events: none !important;
}

#studentPage .avatar-story-sky {
  position: absolute !important;
  inset: 0 !important;
  background-color: #bde3ff !important;
}

#studentPage .avatar-story-sun {
  position: absolute !important;
  top: 26px !important;
  right: 40px !important;
  width: 42px !important;
  height: 42px !important;
  border: 5px solid #fff2ad !important;
  border-radius: 50% !important;
  background-color: #ffd85a !important;
}

#studentPage .avatar-story-mountain {
  position: absolute !important;
  bottom: 92px !important;
  clip-path: polygon(
    50% 0,
    100% 100%,
    0 100%
  ) !important;
}

#studentPage .avatar-story-mountain.mountain-far {
  left: -10px !important;
  width: 230px !important;
  height: 145px !important;
  background-color: #8db7cf !important;
}

#studentPage .avatar-story-mountain.mountain-near {
  right: -30px !important;
  width: 250px !important;
  height: 175px !important;
  background-color: #698fa8 !important;
}

#studentPage .avatar-story-cloud {
  position: absolute !important;
  width: 52px !important;
  height: 15px !important;
  background-color: #f7fbff !important;
  box-shadow:
    15px -8px 0 #f7fbff,
    31px 0 0 #f7fbff !important;
}

#studentPage .avatar-story-cloud.cloud-one {
  top: 58px !important;
  left: 33px !important;
}

#studentPage .avatar-story-cloud.cloud-two {
  top: 96px !important;
  right: 74px !important;
  transform: scale(.75) !important;
}

#studentPage .avatar-story-ground {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 105px !important;
  background-color: #73bd70 !important;
  box-shadow:
    inset 0 18px 0 #91d27f !important;
}

#studentPage .avatar-story-tree {
  position: absolute !important;
  bottom: 68px !important;
  width: 74px !important;
  height: 155px !important;
}

#studentPage .avatar-story-tree.tree-left {
  left: 10px !important;
}

#studentPage .avatar-story-tree.tree-right {
  right: 4px !important;
  transform: scale(.82) !important;
  transform-origin: bottom right !important;
}

#studentPage .avatar-story-tree .trunk {
  position: absolute !important;
  left: 29px !important;
  bottom: 0 !important;
  width: 17px !important;
  height: 76px !important;
  background-color: #7d4b31 !important;
}

#studentPage .avatar-story-tree .leaf {
  position: absolute !important;
  left: 7px !important;
  width: 60px !important;
  height: 58px !important;
  clip-path: polygon(
    50% 0,
    100% 100%,
    0 100%
  ) !important;
  background-color: #378c52 !important;
}

#studentPage .avatar-story-tree .leaf-one {
  top: 4px !important;
}

#studentPage .avatar-story-tree .leaf-two {
  top: 34px !important;
  background-color: #2f7c49 !important;
}

#studentPage .avatar-story-tree .leaf-three {
  top: 65px !important;
  background-color: #286e41 !important;
}

#studentPage .avatar-story-grass {
  position: absolute !important;
  bottom: 24px !important;
  width: 8px !important;
  height: 22px !important;
  background-color: #3d8c4b !important;
  box-shadow:
    9px 7px 0 #3d8c4b,
    18px -3px 0 #3d8c4b !important;
}

#studentPage .avatar-story-grass.grass-one {
  left: 46px !important;
}

#studentPage .avatar-story-grass.grass-two {
  right: 76px !important;
}

#studentPage .avatar-story-rock {
  position: absolute !important;
  bottom: 17px !important;
  width: 28px !important;
  height: 18px !important;
  background-color: #84969f !important;
  clip-path: polygon(
    20% 0,
    80% 0,
    100% 100%,
    0 100%
  ) !important;
}

#studentPage .avatar-story-rock.rock-one {
  left: 94px !important;
}

#studentPage .avatar-story-rock.rock-two {
  right: 34px !important;
  transform: scale(.72) !important;
}

#studentPage .voxel-avatar-toolbar-v8 {
  z-index: 60 !important;
}

#studentPage .voxel-avatar-stage-v8
.avatar-aura-visual {
  z-index: 4 !important;
}

#studentPage .voxel-avatar-scene-v8 {
  z-index: 10 !important;
}

/* Equipment tooltip */
#studentPage .has-avatar-equipment-tooltip {
  pointer-events: auto !important;
  cursor: help !important;
}

#studentPage .has-avatar-equipment-tooltip > * {
  pointer-events: none !important;
}

#studentPage .avatar-equipment-tooltip {
  position: fixed !important;
  z-index: 99999 !important;
  width: min(210px, calc(100vw - 20px)) !important;
  padding: 9px 11px !important;
  display: none !important;
  border: 2px solid #d9cff7 !important;
  border-radius: 12px !important;
  color: #342950 !important;
  background-color: #ffffff !important;
  box-shadow:
    0 12px 26px rgba(46,34,85,.22) !important;
  pointer-events: none !important;
}

#studentPage .avatar-equipment-tooltip.is-visible {
  display: grid !important;
  gap: 4px !important;
}

#studentPage .avatar-equipment-tooltip strong {
  font-family: 'Sarabun', sans-serif !important;
  font-size:13px !important;
  line-height: 1.25 !important;
  font-weight: 900 !important;
}

#studentPage .avatar-equipment-tooltip span {
  color: #6e647e !important;
  font-family: 'Sarabun', sans-serif !important;
  font-size:13px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
}

/* Max 3 badges */
#studentPage .avatar-item-stat-badges.compact.full-stats {
  flex-wrap: nowrap !important;
}

#studentPage .avatar-item-stat-badges.compact.full-stats span {
  max-width: calc(33.333% - 3px) !important;
  flex: 1 1 0 !important;
  white-space: nowrap !important;
}

/* Explicit job emblem markup */
#studentPage .voxel-job-emblem-v8::before,
#studentPage .voxel-job-emblem-v8::after {
  display: none !important;
}

#studentPage .voxel-job-emblem-v8 {
  width: 32px !important;
  height: 32px !important;
  overflow: visible !important;
}

#studentPage .voxel-job-emblem-v8
.job-emblem-shape,
#studentPage .voxel-job-emblem-v8
.job-emblem-detail {
  position: absolute !important;
  display: block !important;
}

#studentPage .fighter-shield {
  inset: 3px 5px 4px !important;
  background-color: #ff646d !important;
  clip-path: polygon(
    50% 0,
    100% 19%,
    88% 72%,
    50% 100%,
    12% 72%,
    0 19%
  ) !important;
}

#studentPage .fighter-line {
  left: 14px !important;
  top: 9px !important;
  width: 4px !important;
  height: 13px !important;
  background-color: #ffffff !important;
}

#studentPage .mage-star {
  inset: 2px !important;
  background-color: #ffd85a !important;
  clip-path: polygon(
    50% 0,
    61% 36%,
    100% 50%,
    61% 64%,
    50% 100%,
    39% 64%,
    0 50%,
    39% 36%
  ) !important;
}

#studentPage .mage-spark {
  right: -2px !important;
  top: -3px !important;
  width: 10px !important;
  height: 10px !important;
  background-color: #ffffff !important;
  clip-path: polygon(
    50% 0,
    65% 35%,
    100% 50%,
    65% 65%,
    50% 100%,
    35% 65%,
    0 50%,
    35% 35%
  ) !important;
}

#studentPage .assassin-blade {
  left: 13px !important;
  top: 1px !important;
  width: 6px !important;
  height: 30px !important;
  background-color: #31394a !important;
  box-shadow:
    inset 0 -8px 0 #b574ff !important;
}

#studentPage .assassin-blade.blade-one {
  transform: rotate(45deg) !important;
}

#studentPage .assassin-blade.blade-two {
  transform: rotate(-45deg) !important;
}

#studentPage .support-heart {
  left: 3px !important;
  top: 5px !important;
  width: 26px !important;
  height: 23px !important;
  background-color: #35c995 !important;
  clip-path: polygon(
    50% 100%,
    7% 58%,
    3% 29%,
    22% 7%,
    50% 28%,
    78% 7%,
    97% 29%,
    93% 58%
  ) !important;
}

#studentPage .support-cross {
  left: 11px !important;
  top: 11px !important;
  width: 10px !important;
  height: 10px !important;
  background-color: #ffffff !important;
  clip-path: polygon(
    37% 0,
    63% 0,
    63% 37%,
    100% 37%,
    100% 63%,
    63% 63%,
    63% 100%,
    37% 100%,
    37% 63%,
    0 63%,
    0 37%,
    37% 37%
  ) !important;
}

#studentPage .carry-ring {
  inset: 3px !important;
  border: 5px solid #3d9df2 !important;
  border-radius: 50% !important;
  box-sizing: border-box !important;
}

#studentPage .carry-dot {
  left: 12px !important;
  top: 12px !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background-color: #3d9df2 !important;
}

@media (max-width: 1180px) {
  #studentPage .avatar-player-banner {
    grid-template-columns:
      minmax(250px, 1fr)
      minmax(330px, 1.3fr) !important;
    grid-template-areas:
      "playerhead wallet"
      "skill rule" !important;
  }
}

@media (max-width: 980px) {
  #studentPage #avatarContentBox:not(.hidden),
  #studentPage #avatarContentBox.is-avatar-pane-height-ready:not(.hidden) {
    display: block !important;
    height: auto !important;
  }

  #studentPage .avatar-player-banner {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "playerhead"
      "wallet"
      "skill"
      "rule" !important;
    margin-bottom: 12px !important;
  }

  #studentPage .avatar-workspace-tabs {
    margin-top: 12px !important;
  }

  #studentPage .avatar-story-tree.tree-right {
    display: none !important;
  }
}

@media (max-width: 520px) {
  #studentPage .avatar-player-banner {
    padding: 13px !important;
  }

  #studentPage .avatar-player-banner
  .avatar-wallet-grid {
    grid-template-columns: 1fr !important;
  }

  #studentPage .avatar-preview-stats
  .avatar-stat-row {
    grid-template-columns:
      52px
      minmax(0, 1fr)
      58px !important;
  }
}



/* ============================================================
   PHASE C4.5 — BIG SHIELD + LOCAL TOOLTIP + NOVICE JOB RULE
============================================================ */

/* ---------- Shield: visibly full-sized ---------- */
#studentPage .voxel-avatar-shield-v8 {
  left: 2px !important;
  top: 96px !important;
  width: 88px !important;
  height: 108px !important;
  transform:
    translateZ(46px)
    rotate(-8deg) !important;
  filter:
    drop-shadow(
      0 8px 4px rgba(37,31,58,.26)
    ) !important;
}

#studentPage .voxel-avatar-shield-v8
.shield-shell {
  border-width: 6px !important;
  box-shadow:
    inset -12px -12px 0 rgba(42,35,69,.16),
    inset 9px 9px 0 rgba(255,255,255,.28),
    0 0 0 3px rgba(255,255,255,.42) !important;
}

#studentPage .voxel-avatar-shield-v8
.shield-core {
  left: 22px !important;
  top: 25px !important;
  width: 40px !important;
  height: 51px !important;
  box-shadow:
    inset -7px -7px 0 rgba(42,35,69,.13) !important;
}

#studentPage .voxel-avatar-shield-v8
.shield-gem {
  left: 37px !important;
  top: 43px !important;
  width: 16px !important;
  height: 16px !important;
  border: 3px solid rgba(255,255,255,.75) !important;
  box-shadow:
    0 0 0 3px rgba(42,35,69,.12),
    0 0 12px rgba(255,245,185,.65) !important;
}

#studentPage .voxel-avatar-shield-v8::before,
#studentPage .voxel-avatar-shield-v8::after {
  content: '' !important;
  position: absolute !important;
  z-index: 4 !important;
  pointer-events: none !important;
}

#studentPage .voxel-avatar-shield-v8::before {
  left: 10px !important;
  right: 10px !important;
  top: 15px !important;
  height: 9px !important;
  background-color:
    var(--shield-secondary) !important;
  box-shadow:
    0 65px 0
    var(--shield-secondary) !important;
}

#studentPage .voxel-avatar-shield-v8::after {
  left: 39px !important;
  top: 10px !important;
  width: 10px !important;
  height: 85px !important;
  background-color:
    rgba(255,255,255,.26) !important;
}

/* ---------- Tooltip stays inside MY CHARACTER ---------- */
#studentPage .avatar-preview-card {
  position: relative !important;
}

#studentPage .avatar-equipment-tooltip {
  position: absolute !important;
  z-index: 1000 !important;
  width: 190px !important;
  max-width: calc(100% - 30px) !important;
  transform: none !important;
}

#studentPage .avatar-equipment-tooltip.is-visible {
  animation:
    avatarTooltipInC45
    .12s ease-out both !important;
}

@keyframes avatarTooltipInC45 {
  from {
    opacity: 0;
    transform: translateY(4px) scale(.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ---------- Novice job policy ---------- */
#studentPage .avatar-job-change-policy.is-paid {
  border-color: #f1c16c !important;
  color: #815619 !important;
  background-color: #fff6df !important;
}

#studentPage .avatar-job-change-policy.is-paid > i {
  color: #b77916 !important;
  background-color: #ffe4a5 !important;
}

#studentPage .avatar-job-change-policy.is-free {
  border-color: #75d9b4 !important;
  color: #21694f !important;
  background-color: #eafaf4 !important;
}

/* Player stats are intentionally lower at Novice. */
#studentPage .avatar-preview-stats
.avatar-stat-row strong {
  min-width: 56px !important;
}

@media (max-width: 520px) {
  #studentPage .voxel-avatar-shield-v8 {
    left: 5px !important;
    top: 104px !important;
    width: 76px !important;
    height: 94px !important;
  }
}



/* ============================================================
   PHASE C4.6 — MINECRAFT LOGIN / HEADER / FOOTER
============================================================ */

/* ---------- Header: sky + pixel clouds ---------- */
#publicPage.index-game-lobby .game-lobby-header {
  position: sticky;
  top: 0;
  z-index: 80;
  overflow: hidden;
  min-height: 90px;
  padding: 14px clamp(16px, 3vw, 34px);
  background:
    linear-gradient(180deg, rgba(182, 222, 255, .98) 0%, rgba(133, 201, 255, .98) 58%, rgba(111, 184, 247, .98) 100%) !important;
  border-bottom: 4px solid #ffffff !important;
  box-shadow:
    0 10px 0 rgba(139, 194, 255, .92),
    0 18px 34px rgba(40, 92, 178, .16) !important;
}

#publicPage.index-game-lobby .game-lobby-header::before,
#publicPage.index-game-lobby .game-lobby-header::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

#publicPage.index-game-lobby .game-lobby-header::before {
  background:
    linear-gradient(#ffffff 0 0) 7% 22% / 64px 14px no-repeat,
    linear-gradient(#ffffff 0 0) 10% 17% / 22px 14px no-repeat,
    linear-gradient(#ffffff 0 0) 16% 17% / 22px 14px no-repeat,
    linear-gradient(#ffffff 0 0) 78% 24% / 84px 16px no-repeat,
    linear-gradient(#ffffff 0 0) 81% 18% / 24px 16px no-repeat,
    linear-gradient(#ffffff 0 0) 88% 18% / 24px 16px no-repeat,
    linear-gradient(#ffffff 0 0) 54% 34% / 56px 12px no-repeat,
    linear-gradient(#ffffff 0 0) 57% 29% / 18px 12px no-repeat,
    linear-gradient(#ffffff 0 0) 62% 29% / 18px 12px no-repeat;
  opacity: .88;
}

#publicPage.index-game-lobby .game-lobby-header::after {
  background:
    linear-gradient(90deg, rgba(255,255,255,.28) 0 50%, transparent 50% 100%) 0 0 / 18px 18px repeat;
  mix-blend-mode: soft-light;
  opacity: .23;
}

#publicPage.index-game-lobby .game-lobby-brand .school-logo {
  background: #ffffff !important;
  border: 3px solid #d6ebff !important;
  box-shadow: 0 6px 0 #95cfff !important;
}

#publicPage.index-game-lobby .game-lobby-brand-copy strong,
#publicPage.index-game-lobby .game-lobby-brand-copy small,
#publicPage.index-game-lobby .game-lobby-eyebrow {
  text-shadow: 0 1px 0 rgba(255,255,255,.55);
}

/* ---------- Top login buttons ---------- */
#publicPage.index-game-lobby .game-lobby-login {
  display: flex;
  align-items: stretch;
  gap: 12px;
  flex-wrap: wrap;
}

#publicPage.index-game-lobby .game-lobby-login .btn {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  min-height: 54px;
  padding: 8px 18px 8px 10px;
  border-radius: 18px;
  border-width: 2px;
  box-shadow: 0 6px 0 rgba(43, 66, 120, .16);
}

#publicPage.index-game-lobby .game-lobby-login .btn:hover {
  transform: translateY(-1px);
}

#publicPage.index-game-lobby .game-login-icon-chip {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(255,255,255,.22);
  border: 2px solid rgba(255,255,255,.28);
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.08);
  font-size:15px;
}

#publicPage.index-game-lobby .game-login-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.05;
}

#publicPage.index-game-lobby .game-login-copy strong {
  font-size:15px;
  font-weight: 800;
}

#publicPage.index-game-lobby .game-login-copy small {
  font-size:13px;
  font-weight: 700;
  opacity: .82;
  letter-spacing: .4px;
}

#publicPage.index-game-lobby .game-login-student {
  background: linear-gradient(180deg, #3d84ff 0%, #2d63e8 100%) !important;
  border-color: #2249a8 !important;
  color: #ffffff !important;
}

#publicPage.index-game-lobby .game-login-student .game-login-icon-chip {
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.28);
}

#publicPage.index-game-lobby .game-login-teacher {
  background: linear-gradient(180deg, #ffffff 0%, #f2f7ff 100%) !important;
  border-color: #9ec4ff !important;
  color: #2445a5 !important;
}

#publicPage.index-game-lobby .game-login-teacher .game-login-icon-chip {
  background: #eef5ff;
  border-color: #cddfff;
  color: #3364e8;
}

/* ---------- Login modal ---------- */
#loginModal::before {
  backdrop-filter: blur(5px);
}

#loginModal .login-card {
  position: relative;
  overflow: hidden;
  padding: 28px 28px 30px;
  border-radius: 28px !important;
  border: 4px solid #ffffff !important;
  outline: 3px solid #cfe2ff;
  background:
    linear-gradient(180deg, #ffffff 0%, #f7fbff 100%) !important;
  box-shadow:
    0 18px 0 rgba(164, 196, 255, .95),
    0 34px 60px rgba(31, 61, 132, .22) !important;
}

#loginModal .login-card::before {
  content: "Smart Student+";
  position: absolute;
  top: 20px;
  left: 26px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 2px solid #b9d6ff;
  background: #f7fbff;
  color: #2c68ee;
  font-size:13px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .2px;
  z-index: 2;
}

#loginModal .login-card::after {
  content: "";
  position: absolute;
  top: -18px;
  right: -24px;
  width: 126px;
  height: 126px;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, rgba(255,255,255,.78) 0 28%, rgba(228, 239, 255, .92) 29% 100%);
  opacity: .95;
}

#loginModal .modal-close {
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important;
  border: 2px solid #ffb7b7 !important;
  background: #fff7f7 !important;
  color: #f05050 !important;
  box-shadow: 0 4px 0 rgba(255, 183, 183, .55) !important;
}

#loginModal .login-icon {
  width: 92px !important;
  height: 92px !important;
  margin: 32px auto 16px !important;
  border-radius: 24px !important;
  border: 2px solid #d8e8ff !important;
  background: linear-gradient(180deg, #eef5ff 0%, #e3efff 100%) !important;
  color: #3364e8 !important;
  box-shadow: 0 8px 0 rgba(203, 222, 255, .9) !important;
  font-size:34px !important;
}

#loginModal[data-role="student"] .login-icon {
  background: linear-gradient(180deg, #eef6ff 0%, #deecff 100%) !important;
  color: #2e63eb !important;
}

#loginModal[data-role="teacher"] .login-icon {
  background: linear-gradient(180deg, #f4f0ff 0%, #ede5ff 100%) !important;
  color: #6a4ce3 !important;
  border-color: #e3d7ff !important;
  box-shadow: 0 8px 0 rgba(224, 211, 255, .96) !important;
}

#loginModal #loginTitle {
  margin-top: 0 !important;
  margin-bottom: 8px !important;
  font-size:24px !important;
  font-weight: 800 !important;
  color: #1d2440 !important;
  text-align: center;
}

#loginModal #loginDesc {
  margin-bottom: 20px !important;
  color: #617090 !important;
  font-size:14px !important;
  font-weight: 600 !important;
  text-align: center;
  line-height: 1.5;
}

#loginModal .login-card label {
  font-size:15px !important;
  font-weight: 800 !important;
  color: #233253 !important;
}

#loginModal .login-card .input {
  min-height: 54px !important;
  border-radius: 18px !important;
  border: 2px solid #cfe0f8 !important;
  background: #ffffff !important;
  font-size:16px !important;
  font-weight: 700 !important;
  color: #2a3552 !important;
  box-shadow: inset 0 -3px 0 rgba(222, 234, 250, .6) !important;
}

#loginModal .login-card .input::placeholder {
  color: #9fb0cb !important;
  font-weight: 600;
}

#loginModal .login-card .input:focus {
  border-color: #7cabff !important;
  box-shadow:
    0 0 0 4px rgba(106, 158, 255, .15),
    inset 0 -3px 0 rgba(222, 234, 250, .6) !important;
}

#loginModal #loginSubmitBtn {
  min-height: 58px !important;
  margin-top: 10px !important;
  border-radius: 20px !important;
  border: 2px solid #2449a8 !important;
  background: linear-gradient(180deg, #3d84ff 0%, #2d63e8 100%) !important;
  color: #ffffff !important;
  font-size:18px !important;
  font-weight: 800 !important;
  box-shadow: 0 7px 0 rgba(35, 73, 165, .3) !important;
}

#loginModal #loginSubmitBtn:hover {
  transform: translateY(-1px);
}

#loginModal[data-role="teacher"] #loginSubmitBtn {
  background: linear-gradient(180deg, #8f74ff 0%, #6d4ee8 100%) !important;
  border-color: #5238b6 !important;
  box-shadow: 0 7px 0 rgba(82, 56, 182, .3) !important;
}

/* ---------- Footer: stone + grass block ---------- */
#publicPage.index-game-lobby .game-lobby-footer {
  position: relative;
  overflow: hidden;
  padding: 22px 18px 18px !important;
  color: #f7fbff !important;
  border-top: 0 !important;
  border-radius: 28px 28px 0 0;
  background:
    linear-gradient(180deg, #6fbe5b 0 18px, #5daa49 18px 26px, transparent 26px),
    linear-gradient(180deg, #8e8e95 0%, #7b7d86 48%, #696b74 100%) !important;
  box-shadow:
    inset 0 5px 0 rgba(164, 255, 143, .72),
    inset 0 18px 0 rgba(72, 126, 57, .52) !important;
}

#publicPage.index-game-lobby .game-lobby-footer::before,
#publicPage.index-game-lobby .game-lobby-footer::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none;
}

#publicPage.index-game-lobby .game-lobby-footer::before {
  top: 0;
  height: 30px;
  background:
    linear-gradient(90deg, transparent 0 5%, rgba(82, 145, 60, .8) 5% 8%, transparent 8% 13%, rgba(82, 145, 60, .8) 13% 16%, transparent 16% 25%, rgba(82, 145, 60, .8) 25% 28%, transparent 28% 34%, rgba(82, 145, 60, .8) 34% 37%, transparent 37% 46%, rgba(82, 145, 60, .8) 46% 49%, transparent 49% 59%, rgba(82, 145, 60, .8) 59% 62%, transparent 62% 70%, rgba(82, 145, 60, .8) 70% 73%, transparent 73% 82%, rgba(82, 145, 60, .8) 82% 85%, transparent 85% 100%);
  opacity: .9;
}

#publicPage.index-game-lobby .game-lobby-footer::after {
  inset: 34px 0 0 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.06) 0 12%, transparent 12% 24%, rgba(255,255,255,.04) 24% 36%, transparent 36% 48%, rgba(255,255,255,.05) 48% 60%, transparent 60% 72%, rgba(255,255,255,.04) 72% 84%, transparent 84% 100%),
    linear-gradient(180deg, transparent 0 16px, rgba(49,52,60,.22) 16px 18px, transparent 18px 100%);
  opacity: .85;
}

#publicPage.index-game-lobby .game-lobby-footer > * {
  position: relative;
  z-index: 1;
  color: #ffffff !important;
  text-shadow: 0 1px 0 rgba(52, 59, 71, .55);
}

/* ---------- responsive ---------- */
@media (max-width: 860px) {
  #publicPage.index-game-lobby .game-lobby-login .btn {
    min-height: 48px;
    padding: 8px 14px 8px 10px;
  }

  #publicPage.index-game-lobby .game-login-copy strong {
    font-size:14px;
  }

  #publicPage.index-game-lobby .game-login-copy small {
    font-size:13px;
  }

  #loginModal .login-card {
    padding: 24px 22px 24px !important;
  }

  #loginModal .login-icon {
    width: 84px !important;
    height: 84px !important;
    margin-top: 34px !important;
  }

  #loginModal #loginTitle {
    font-size:22px !important;
  }
}

@media (max-width: 560px) {
  #publicPage.index-game-lobby .game-lobby-login {
    width: 100%;
    justify-content: flex-end;
  }

  #publicPage.index-game-lobby .game-lobby-login .btn {
    min-width: 140px;
  }

  #loginModal .login-card::before {
    left: 20px;
    top: 18px;
    font-size:13px;
  }

  #loginModal #loginTitle {
    font-size:20px !important;
  }

  #loginModal #loginDesc {
    font-size:13px !important;
  }

  #loginModal .login-card .input {
    min-height: 50px !important;
    font-size:15px !important;
  }

  #loginModal #loginSubmitBtn {
    min-height: 54px !important;
    font-size:16px !important;
  }
}



/* ============================================================
   PHASE C4.7.1 — REAL SYSTEM LOGO ASSET FIX
============================================================ */

#publicPage.index-game-lobby
.game-lobby-brand::after {
  display: none !important;
  content: none !important;
}

#publicPage.index-game-lobby
.game-lobby-logo-wrap {
  position: relative !important;
  width: 64px !important;
  height: 64px !important;
  flex: 0 0 64px !important;
  display: grid !important;
  place-items: center !important;
  overflow: visible !important;
  border-radius: 20px !important;
  isolation: isolate !important;
}

#publicPage.index-game-lobby
.game-lobby-logo-wrap::before {
  content: "" !important;
  position: absolute !important;
  z-index: -1 !important;
  inset: -9px !important;
  border-radius: 25px !important;
  background:
    radial-gradient(
      circle,
      rgba(255,255,255,.98) 0 34%,
      rgba(207,234,255,.88) 35% 61%,
      rgba(132,198,255,.20) 62% 100%
    ) !important;
  animation:
    tr107RealLogoAuraC471
    3.4s ease-in-out infinite !important;
}

#publicPage.index-game-lobby
.game-lobby-logo-wrap .school-logo {
  width: 60px !important;
  height: 60px !important;
  padding: 3px !important;
  object-fit: contain !important;
  border: 3px solid rgba(255,255,255,.96) !important;
  border-radius: 18px !important;
  background-color: #ffffff !important;
  box-shadow:
    0 6px 0 #8fc9ff,
    0 10px 20px rgba(62,113,211,.22) !important;
  animation:
    tr107RealLogoFloatC471
    3.2s ease-in-out infinite !important;
}

#publicPage.index-game-lobby
.game-lobby-logo-wrap:hover .school-logo {
  transform: translateY(-2px) scale(1.04) !important;
}

#publicPage.index-game-lobby
.game-logo-spark {
  position: absolute !important;
  z-index: 5 !important;
  width: 9px !important;
  height: 9px !important;
  display: block !important;
  background-color: #ffffff !important;
  clip-path: polygon(
    50% 0,
    63% 37%,
    100% 50%,
    63% 63%,
    50% 100%,
    37% 63%,
    0 50%,
    37% 37%
  ) !important;
  filter:
    drop-shadow(0 0 5px #ffffff)
    drop-shadow(0 0 9px #79bfff) !important;
  pointer-events: none !important;
}

#publicPage.index-game-lobby
.game-logo-spark.spark-one {
  top: -3px !important;
  right: 2px !important;
  animation:
    tr107RealLogoSparkC471
    2.2s ease-in-out infinite !important;
}

#publicPage.index-game-lobby
.game-logo-spark.spark-two {
  left: -5px !important;
  top: 20px !important;
  width: 7px !important;
  height: 7px !important;
  animation:
    tr107RealLogoSparkC471
    2.5s ease-in-out .65s infinite !important;
}

#publicPage.index-game-lobby
.game-logo-spark.spark-three {
  right: -4px !important;
  bottom: 6px !important;
  width: 6px !important;
  height: 6px !important;
  background-color: #ffe578 !important;
  animation:
    tr107RealLogoSparkC471
    2.8s ease-in-out 1.15s infinite !important;
}

/* Also use a gentle motion on the player-system logo. */
#studentPage
.student-player-school-logo img {
  animation:
    tr107StudentLogoFloatC471
    3.8s ease-in-out infinite !important;
  filter:
    drop-shadow(
      0 5px 7px rgba(84,95,201,.18)
    ) !important;
}

@keyframes tr107RealLogoFloatC471 {
  0%, 100% {
    transform: translateY(0) rotate(0);
  }
  50% {
    transform: translateY(-4px) rotate(1deg);
  }
}

@keyframes tr107RealLogoAuraC471 {
  0%, 100% {
    transform: scale(.96);
    opacity: .72;
  }
  50% {
    transform: scale(1.08);
    opacity: 1;
  }
}

@keyframes tr107RealLogoSparkC471 {
  0%, 100% {
    transform: scale(.45) rotate(0deg);
    opacity: .22;
  }
  45% {
    transform: scale(1.25) rotate(24deg);
    opacity: 1;
  }
  72% {
    transform: scale(.78) rotate(-12deg);
    opacity: .62;
  }
}

@keyframes tr107StudentLogoFloatC471 {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-2px);
  }
}

@media (max-width: 860px) {
  #publicPage.index-game-lobby
  .game-lobby-logo-wrap {
    width: 56px !important;
    height: 56px !important;
    flex-basis: 56px !important;
  }

  #publicPage.index-game-lobby
  .game-lobby-logo-wrap .school-logo {
    width: 53px !important;
    height: 53px !important;
  }
}



/* ============================================================
   PHASE C4.7.2 — BIG OVERLAP LOGO + CLEAR BLUE SKY HEADER
============================================================ */

/*
  ใช้ selector ที่มี specificity สูงกว่ากฎพื้นหลังโปร่งเดิม
  เพื่อให้ Header เป็นท้องฟ้าสีฟ้าจริง
*/
#publicPage.index-game-lobby.has-fixed-page-background
.game-lobby-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 90 !important;
  min-height: 100px !important;
  padding:
    9px
    clamp(18px, 3vw, 36px)
    13px !important;
  overflow: visible !important;

  background:
    linear-gradient(
      180deg,
      #c9edff 0%,
      #a5ddff 44%,
      #79c3f7 100%
    ) !important;

  border-bottom:
    5px solid #e9f8ff !important;

  box-shadow:
    0 8px 0 #78bdf2,
    0 16px 30px rgba(34,91,161,.18) !important;

  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* เนื้อหา Header ต้องอยู่เหนือก้อนเมฆ */
#publicPage.index-game-lobby
.game-lobby-header >
.game-lobby-brand,
#publicPage.index-game-lobby
.game-lobby-header >
.game-lobby-login {
  position: relative !important;
  z-index: 4 !important;
}

/* เมฆพิกเซล: ย้ายออกจากบริเวณชื่อระบบ */
#publicPage.index-game-lobby
.game-lobby-header::before {
  z-index: 1 !important;
  opacity: .96 !important;

  background:
    /* เมฆเล็กซ้ายสุด ไม่ชนโลโก้ */
    linear-gradient(#ffffff 0 0)
      2% 24% / 48px 13px no-repeat,
    linear-gradient(#ffffff 0 0)
      4.5% 17% / 18px 13px no-repeat,
    linear-gradient(#ffffff 0 0)
      7.2% 17% / 18px 13px no-repeat,

    /* เว้นช่วงบริเวณโลโก้และชื่อระบบ */

    /* เมฆกลางค่อนไปทางขวา */
    linear-gradient(#ffffff 0 0)
      52% 23% / 68px 15px no-repeat,
    linear-gradient(#ffffff 0 0)
      55% 15% / 22px 15px no-repeat,
    linear-gradient(#ffffff 0 0)
      59% 15% / 22px 15px no-repeat,

    /* เมฆด้านขวาเหนือปุ่ม แต่ไม่บังปุ่ม */
    linear-gradient(#ffffff 0 0)
      82% 21% / 72px 15px no-repeat,
    linear-gradient(#ffffff 0 0)
      85% 13% / 22px 15px no-repeat,
    linear-gradient(#ffffff 0 0)
      89% 13% / 22px 15px no-repeat,

    /* เมฆปลายขวา */
    linear-gradient(rgba(255,255,255,.88) 0 0)
      96% 42% / 42px 11px no-repeat !important;
}

/* ลายพิกเซลฟ้าอ่อน ไม่ทำให้พื้นขาวโพลน */
#publicPage.index-game-lobby
.game-lobby-header::after {
  z-index: 0 !important;
  opacity: .18 !important;
  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,.30) 0 50%,
      transparent 50% 100%
    )
    0 0 / 20px 20px repeat !important;
  mix-blend-mode: soft-light !important;
}

/* ---------- โลโก้ใหญ่และยื่นลงจาก Header ---------- */
#publicPage.index-game-lobby
.game-lobby-brand {
  min-height: 74px !important;
  align-items: center !important;
  overflow: visible !important;
  padding-left: 4px !important;
}

/* ปิด Aura เก่าที่อาจซ้อนหลายชั้น */
#publicPage.index-game-lobby
.game-lobby-brand::before {
  left: -15px !important;
  top: 58% !important;
  width: 126px !important;
  height: 126px !important;
  border-radius: 34px !important;
  opacity: .92 !important;
}

#publicPage.index-game-lobby
.game-lobby-logo-wrap {
  width: 96px !important;
  height: 96px !important;
  flex: 0 0 96px !important;
  margin-top: -6px !important;
  margin-bottom: -38px !important;
  transform: translateY(12px) !important;
  border-radius: 27px !important;
  overflow: visible !important;
  z-index: 8 !important;
}

#publicPage.index-game-lobby
.game-lobby-logo-wrap::before {
  inset: -12px !important;
  border-radius: 32px !important;
}

#publicPage.index-game-lobby
.game-lobby-logo-wrap .school-logo {
  width: 90px !important;
  height: 90px !important;
  padding: 4px !important;
  border-width: 4px !important;
  border-radius: 25px !important;

  box-shadow:
    0 8px 0 #72b7ee,
    0 15px 26px rgba(37,89,160,.28),
    0 0 0 7px rgba(225,246,255,.56) !important;
}

/* ชื่อระบบอยู่เหนือเมฆและห่างจากโลโก้ */
#publicPage.index-game-lobby
.game-lobby-brand-copy {
  position: relative !important;
  z-index: 9 !important;
  margin-left: 8px !important;
  padding-top: 2px !important;
  min-width: 300px !important;
}

#publicPage.index-game-lobby
.game-lobby-eyebrow {
  color: #6259ef !important;
}

#publicPage.index-game-lobby
.game-lobby-brand-copy strong {
  color: #172847 !important;
}

#publicPage.index-game-lobby
.game-lobby-brand-copy small {
  color: #506683 !important;
}

/* ประกายรอบโลโก้ขยายตามโลโก้ใหม่ */
#publicPage.index-game-lobby
.game-logo-spark.spark-one {
  top: -6px !important;
  right: -2px !important;
  width: 11px !important;
  height: 11px !important;
}

#publicPage.index-game-lobby
.game-logo-spark.spark-two {
  left: -8px !important;
  top: 31px !important;
  width: 9px !important;
  height: 9px !important;
}

#publicPage.index-game-lobby
.game-logo-spark.spark-three {
  right: -7px !important;
  bottom: 4px !important;
  width: 8px !important;
  height: 8px !important;
}

/* ปุ่มเข้าสู่ระบบอยู่กลางแนว Header */
#publicPage.index-game-lobby
.game-lobby-login {
  align-self: center !important;
  margin-top: 0 !important;
}

/* ---------- Tablet ---------- */
@media (max-width: 980px) {
  #publicPage.index-game-lobby.has-fixed-page-background
  .game-lobby-header {
    min-height: 94px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  #publicPage.index-game-lobby
  .game-lobby-logo-wrap {
    width: 82px !important;
    height: 82px !important;
    flex-basis: 82px !important;
    margin-bottom: -30px !important;
  }

  #publicPage.index-game-lobby
  .game-lobby-logo-wrap .school-logo {
    width: 78px !important;
    height: 78px !important;
  }

  #publicPage.index-game-lobby
  .game-lobby-brand-copy {
    min-width: 245px !important;
    margin-left: 4px !important;
  }

  #publicPage.index-game-lobby
  .game-lobby-header::before {
    background:
      linear-gradient(#ffffff 0 0)
        56% 20% / 60px 13px no-repeat,
      linear-gradient(#ffffff 0 0)
        60% 13% / 20px 13px no-repeat,
      linear-gradient(#ffffff 0 0)
        82% 23% / 58px 13px no-repeat,
      linear-gradient(#ffffff 0 0)
        86% 16% / 20px 13px no-repeat !important;
  }
}

/* ---------- Mobile ---------- */
@media (max-width: 720px) {
  #publicPage.index-game-lobby.has-fixed-page-background
  .game-lobby-header {
    min-height: 88px !important;
    background:
      linear-gradient(
        180deg,
        #d4f1ff 0%,
        #a9ddff 48%,
        #80c5f5 100%
      ) !important;
  }

  #publicPage.index-game-lobby
  .game-lobby-logo-wrap {
    width: 72px !important;
    height: 72px !important;
    flex-basis: 72px !important;
    margin-bottom: -24px !important;
    transform: translateY(9px) !important;
  }

  #publicPage.index-game-lobby
  .game-lobby-logo-wrap .school-logo {
    width: 68px !important;
    height: 68px !important;
    border-radius: 20px !important;
  }

  #publicPage.index-game-lobby
  .game-lobby-brand-copy {
    min-width: 0 !important;
    margin-left: 2px !important;
  }

  #publicPage.index-game-lobby
  .game-lobby-header::before {
    opacity: .75 !important;
    background:
      linear-gradient(#ffffff 0 0)
        68% 18% / 50px 11px no-repeat,
      linear-gradient(#ffffff 0 0)
        73% 11% / 17px 11px no-repeat,
      linear-gradient(#ffffff 0 0)
        91% 38% / 40px 10px no-repeat !important;
  }
}



/* ============================================================
   PHASE C4.8 — SCORE DISPLAY CENTER
   คะแนนรวม and เหรียญความดี are clearly separated
============================================================ */

#studentPage #studentTotalScoreCard {
  border-color: #cfc4ff !important;
  background-color: #f3f0ff !important;
}

#studentPage #studentTotalScoreCard
.student-player-stat-icon {
  color: #674fd7 !important;
  background-color: #e5deff !important;
}

#studentPage #studentGoodCoinCard {
  border-color: #f1cf68 !important;
  background-color: #fff7d8 !important;
}

#studentPage #studentGoodCoinCard
.student-player-stat-icon {
  color: #a77500 !important;
  background-color: #ffeaa1 !important;
}

#studentPage #studentTotalScoreValue,
#studentPage #studentGoodCoinValue {
  font-variant-numeric: tabular-nums !important;
}

#studentPage .avatar-wallet-card.lifetime {
  border-color: #cfc4ff !important;
  background-color: #f3f0ff !important;
}

#studentPage .avatar-wallet-card.lifetime > i {
  color: #674fd7 !important;
  background-color: #e5deff !important;
}

#studentPage .avatar-wallet-card.coin span,
#studentPage .avatar-wallet-card.lifetime span {
  font-size:13px !important;
  line-height: 1.25 !important;
}

#studentPage .avatar-wallet-rule {
  font-size:13px !important;
  line-height: 1.45 !important;
}



/* ============================================================
   PHASE C4.9 — AVATAR IDENTITY / CLASS SCENES / PET PREVIEW
============================================================ */

#studentPage .avatar-preview-identity {
  min-width: 0 !important;
}

#studentPage .avatar-preview-identity h3,
#studentPage .avatar-preview-identity small {
  max-width: 250px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#studentPage .avatar-preview-identity small {
  display: block !important;
  margin-top: 2px !important;
  color: #746b91 !important;
  font-size:13px !important;
  font-weight: 700 !important;
}

#studentPage .avatar-appearance-grid .avatar-wide-field {
  grid-column: 1 / -1 !important;
}

/* Pants color */
#studentPage .voxel-avatar-character-v8 {
  --avatar-pants: #3f4594;
  --avatar-pants-side: #2b316f;
  --avatar-pants-top: #595fac;
}

#studentPage .voxel-leg-block-v8 .voxel-face-v8 {
  background-color: var(--avatar-pants) !important;
}

#studentPage .voxel-leg-block-v8 .face-left,
#studentPage .voxel-leg-block-v8 .face-right,
#studentPage .voxel-leg-block-v8 .face-back {
  background-color: var(--avatar-pants-side) !important;
}

#studentPage .voxel-leg-block-v8 .face-top {
  background-color: var(--avatar-pants-top) !important;
}

/* Player Status colors */
#studentPage .avatar-stat-row {
  --stat-color: #6c55e8;
  --stat-track: #ece8f7;
}

#studentPage .avatar-stat-row > div {
  background-color: var(--stat-track) !important;
}

#studentPage .avatar-stat-row > div i {
  background: var(--stat-color) !important;
}

#studentPage .avatar-stat-row > span i,
#studentPage .avatar-stat-row > strong small {
  color: var(--stat-color) !important;
}

#studentPage .avatar-stat-row.stat-hp {
  --stat-color: #35b96b;
  --stat-track: #dff4e7;
}

#studentPage .avatar-stat-row.stat-atk {
  --stat-color: #ef5f5f;
  --stat-track: #fde4e4;
}

#studentPage .avatar-stat-row.stat-def {
  --stat-color: #4d7ee8;
  --stat-track: #e1e9fb;
}

#studentPage .avatar-stat-row.stat-spd {
  --stat-color: #e6a72d;
  --stat-track: #faefcf;
}

#studentPage .avatar-stat-row.stat-sup {
  --stat-color: #2eafa5;
  --stat-track: #dcf3f0;
}

/* Fighter scene */
#studentPage #avatarCharacterStage[data-job-scene="fighter"]
.avatar-story-sky {
  background-color: #ffd1a1 !important;
}
#studentPage #avatarCharacterStage[data-job-scene="fighter"]
.avatar-story-sun {
  border-color: #fff0b8 !important;
  background-color: #ff8b43 !important;
}
#studentPage #avatarCharacterStage[data-job-scene="fighter"]
.mountain-far {
  background-color: #9a6850 !important;
}
#studentPage #avatarCharacterStage[data-job-scene="fighter"]
.mountain-near {
  background-color: #6e473f !important;
}
#studentPage #avatarCharacterStage[data-job-scene="fighter"]
.avatar-story-ground {
  background-color: #a77848 !important;
  box-shadow: inset 0 18px 0 #c59455 !important;
}
#studentPage #avatarCharacterStage[data-job-scene="fighter"]
.avatar-story-tree .leaf {
  background-color: #6f7040 !important;
}

/* Mage scene */
#studentPage #avatarCharacterStage[data-job-scene="mage"]
.avatar-story-sky {
  background-color: #a9c6ff !important;
}
#studentPage #avatarCharacterStage[data-job-scene="mage"]
.avatar-story-sun {
  border-color: #f5eaff !important;
  background-color: #c39bff !important;
  box-shadow:
    0 0 0 7px rgba(216,193,255,.32),
    0 0 22px rgba(194,155,255,.72) !important;
}
#studentPage #avatarCharacterStage[data-job-scene="mage"]
.mountain-far {
  background-color: #8885c9 !important;
}
#studentPage #avatarCharacterStage[data-job-scene="mage"]
.mountain-near {
  background-color: #5d5aa0 !important;
}
#studentPage #avatarCharacterStage[data-job-scene="mage"]
.avatar-story-ground {
  background-color: #7666bd !important;
  box-shadow: inset 0 18px 0 #9787dc !important;
}
#studentPage #avatarCharacterStage[data-job-scene="mage"]
.avatar-story-tree .leaf {
  background-color: #5b55a1 !important;
}
#studentPage #avatarCharacterStage[data-job-scene="mage"]
.avatar-story-rock {
  background-color: #8ff0ff !important;
  box-shadow: 0 0 12px rgba(116,225,255,.72) !important;
}

/* Assassin scene */
#studentPage #avatarCharacterStage[data-job-scene="assassin"]
.avatar-story-sky {
  background-color: #263453 !important;
}
#studentPage #avatarCharacterStage[data-job-scene="assassin"]
.avatar-story-sun {
  border-color: #edf3ff !important;
  background-color: #cdd9ee !important;
  box-shadow: 0 0 18px rgba(221,232,255,.48) !important;
}
#studentPage #avatarCharacterStage[data-job-scene="assassin"]
.avatar-story-cloud {
  background-color: #64708e !important;
  box-shadow:
    15px -8px 0 #64708e,
    31px 0 0 #64708e !important;
}
#studentPage #avatarCharacterStage[data-job-scene="assassin"]
.mountain-far {
  background-color: #414d6b !important;
}
#studentPage #avatarCharacterStage[data-job-scene="assassin"]
.mountain-near {
  background-color: #222c48 !important;
}
#studentPage #avatarCharacterStage[data-job-scene="assassin"]
.avatar-story-ground {
  background-color: #2c3d43 !important;
  box-shadow: inset 0 18px 0 #3d5355 !important;
}
#studentPage #avatarCharacterStage[data-job-scene="assassin"]
.avatar-story-tree .leaf {
  background-color: #18363a !important;
}

/* Support scene */
#studentPage #avatarCharacterStage[data-job-scene="support"]
.avatar-story-sky {
  background-color: #c9f4e8 !important;
}
#studentPage #avatarCharacterStage[data-job-scene="support"]
.avatar-story-sun {
  border-color: #fff7c5 !important;
  background-color: #ffd96b !important;
}
#studentPage #avatarCharacterStage[data-job-scene="support"]
.mountain-far {
  background-color: #83c9a2 !important;
}
#studentPage #avatarCharacterStage[data-job-scene="support"]
.mountain-near {
  background-color: #59a783 !important;
}
#studentPage #avatarCharacterStage[data-job-scene="support"]
.avatar-story-ground {
  background-color: #67bd7d !important;
  box-shadow: inset 0 18px 0 #91d99b !important;
}
#studentPage #avatarCharacterStage[data-job-scene="support"]
.avatar-story-tree .leaf {
  background-color: #2e945f !important;
}

/* Carry scene */
#studentPage #avatarCharacterStage[data-job-scene="carry"]
.avatar-story-sky {
  background-color: #9edcff !important;
}
#studentPage #avatarCharacterStage[data-job-scene="carry"]
.avatar-story-sun {
  border-color: #fff1aa !important;
  background-color: #ffc94e !important;
}
#studentPage #avatarCharacterStage[data-job-scene="carry"]
.mountain-far {
  background-color: #739fc6 !important;
}
#studentPage #avatarCharacterStage[data-job-scene="carry"]
.mountain-near {
  background-color: #4f779d !important;
}
#studentPage #avatarCharacterStage[data-job-scene="carry"]
.avatar-story-ground {
  background-color: #89ae6b !important;
  box-shadow: inset 0 18px 0 #abc77c !important;
}
#studentPage #avatarCharacterStage[data-job-scene="carry"]
.avatar-story-tree .leaf {
  background-color: #397b60 !important;
}

/* Shield lowered and placed in front of the hand */
#studentPage .voxel-avatar-shield-v8 {
  z-index: 60 !important;
  left: 7px !important;
  top: 119px !important;
  transform: translateZ(58px) rotate(-6deg) !important;
}

#studentPage .voxel-avatar-character-v8 .voxel-hand-left-v8 {
  z-index: 20 !important;
}

#studentPage .voxel-avatar-character-v8 .voxel-arm-left-v8 {
  z-index: 18 !important;
}

/* Pet tab */
#studentPage .avatar-pet-tab-button small {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 17px !important;
  margin-left: 3px !important;
  padding: 1px 6px !important;
  border-radius: 999px !important;
  color: #7c5c18 !important;
  background-color: #fff0b8 !important;
  font-size:13px !important;
  font-weight: 800 !important;
}

#studentPage .avatar-pet-preview-slot {
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) 24px !important;
  gap: 10px !important;
  align-items: center !important;
  margin-top: 11px !important;
  padding: 10px 12px !important;
  border: 2px dashed #d5caef !important;
  border-radius: 15px !important;
  color: #655a7f !important;
  background-color: #faf7ff !important;
}

#studentPage .avatar-pet-preview-icon {
  width: 42px !important;
  height: 42px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 13px !important;
  color: #765bc7 !important;
  background-color: #eee7ff !important;
  font-size:18px !important;
}

#studentPage .avatar-pet-preview-slot small,
#studentPage .avatar-pet-preview-slot strong,
#studentPage .avatar-pet-preview-slot div > span {
  display: block !important;
}

#studentPage .avatar-pet-preview-slot small {
  color: #9a8db7 !important;
  font-size:13px !important;
  font-weight: 900 !important;
  letter-spacing: .8px !important;
}

#studentPage .avatar-pet-preview-slot strong {
  color: #4c4165 !important;
  font-size:13px !important;
}

#studentPage .avatar-pet-preview-slot div > span {
  color: #b17a18 !important;
  font-size:13px !important;
  font-weight: 800 !important;
}

#studentPage .avatar-pet-preview-lock {
  color: #aaa0bf !important;
}

/* Pet Coming Soon panel */
#studentPage .avatar-pet-coming-panel {
  grid-column: 1 / -1 !important;
  padding: 18px !important;
  border: 2px solid #ded4f4 !important;
  border-radius: 20px !important;
  background-color: #fbf9ff !important;
}

#studentPage .avatar-pet-coming-head {
  display: grid !important;
  grid-template-columns: 54px minmax(0, 1fr) auto !important;
  gap: 13px !important;
  align-items: center !important;
}

#studentPage .avatar-pet-coming-icon {
  width: 54px !important;
  height: 54px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 17px !important;
  color: #765bc7 !important;
  background-color: #eee7ff !important;
  font-size:23px !important;
}

#studentPage .avatar-pet-coming-head small {
  color: #8c7aa9 !important;
  font-size:13px !important;
  font-weight: 900 !important;
  letter-spacing: 1px !important;
}

#studentPage .avatar-pet-coming-head h4 {
  margin: 2px 0 1px !important;
  color: #423657 !important;
  font-size:18px !important;
}

#studentPage .avatar-pet-coming-head p {
  margin: 0 !important;
  color: #756987 !important;
  font-size:13px !important;
  line-height: 1.45 !important;
}

#studentPage .avatar-coming-badge {
  padding: 6px 10px !important;
  border-radius: 999px !important;
  color: #76510c !important;
  background-color: #ffe9a1 !important;
  font-size:13px !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}

#studentPage .avatar-pet-coming-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin-top: 15px !important;
}

#studentPage .avatar-pet-coming-grid article {
  min-height: 135px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 12px !important;
  border: 1px solid #e3dcf2 !important;
  border-radius: 16px !important;
  background-color: #ffffff !important;
  text-align: center !important;
}

#studentPage .pet-silhouette {
  width: 56px !important;
  height: 56px !important;
  display: grid !important;
  place-items: center !important;
  margin-bottom: 9px !important;
  border-radius: 18px !important;
  color: #afa4c8 !important;
  background-color: #f0ecf7 !important;
  font-size:26px !important;
  filter: grayscale(1) !important;
}

#studentPage .avatar-pet-coming-grid strong {
  color: #504562 !important;
  font-size:13px !important;
}

#studentPage .avatar-pet-coming-grid small {
  margin-top: 2px !important;
  color: #9b90aa !important;
  font-size:13px !important;
}

@media (max-width: 600px) {
  #studentPage .avatar-pet-coming-head {
    grid-template-columns: 48px minmax(0, 1fr) !important;
  }

  #studentPage .avatar-coming-badge {
    grid-column: 1 / -1 !important;
    justify-self: start !important;
  }

  #studentPage .avatar-pet-coming-grid {
    grid-template-columns: 1fr !important;
  }

  #studentPage .voxel-avatar-shield-v8 {
    left: 8px !important;
    top: 124px !important;
  }
}



/* ============================================================
   PHASE C4.10 — SCENE UPGRADE / SEPARATE SAVE / SHOE COLOR
============================================================ */
#studentPage .avatar-job-action-row {
  margin: 10px 0 6px !important;
}

#studentPage .avatar-job-confirm-btn {
  width: 100% !important;
  min-height: 46px !important;
  border-radius: 14px !important;
  font-weight: 800 !important;
}

#studentPage .avatar-job-confirm-btn.hidden {
  display: none !important;
}

#studentPage .avatar-shoe-color-field .avatar-hair-picker-wrap {
  min-height: 45px !important;
}

#studentPage .voxel-avatar-character-v8 {
  --avatar-shoe: #51545a;
  --avatar-shoe-sole: #3a3d44;
}

#studentPage .voxel-leg-block-v8 .face-front::after,
#studentPage .voxel-leg-block-v8 .face-left::after,
#studentPage .voxel-leg-block-v8 .face-right::after,
#studentPage .voxel-leg-block-v8 .face-back::after {
  background-color: var(--avatar-shoe) !important;
}

#studentPage .voxel-leg-block-v8 .face-bottom {
  background-color: var(--avatar-shoe-sole) !important;
}

#studentPage .avatar-story-background::before,
#studentPage .avatar-story-background::after {
  content: "" !important;
  position: absolute !important;
  pointer-events: none !important;
}

/* Fighter — สนามฝึก / ปราสาท / ธง */
#studentPage #avatarCharacterStage[data-job-scene="fighter"] .avatar-story-background::before {
  left: 26px !important;
  right: 24px !important;
  bottom: 112px !important;
  height: 94px !important;
  background:
    linear-gradient(#875741 0 0) left 0 bottom 0 / 100% 28px no-repeat,
    linear-gradient(#9b6a4c 0 0) left 20px bottom 28px / 46px 42px no-repeat,
    linear-gradient(#9b6a4c 0 0) right 20px bottom 28px / 46px 42px no-repeat,
    linear-gradient(#9b6a4c 0 0) center bottom 36px / 56px 50px no-repeat,
    linear-gradient(#b98962 0 0) left 28px top 0 / 30px 18px no-repeat,
    linear-gradient(#b98962 0 0) center top 12px / 34px 18px no-repeat,
    linear-gradient(#b98962 0 0) right 28px top 0 / 30px 18px no-repeat !important;
  opacity: .98 !important;
}

#studentPage #avatarCharacterStage[data-job-scene="fighter"] .avatar-story-background::after {
  left: 38px !important;
  right: 38px !important;
  bottom: 126px !important;
  height: 78px !important;
  background:
    linear-gradient(#6a4636 0 0) 18px 14px / 5px 42px no-repeat,
    linear-gradient(90deg,#d75656 0 60%, #f6d167 60% 100%) 23px 14px / 28px 14px no-repeat,
    linear-gradient(#6a4636 0 0) calc(100% - 23px) 7px / 5px 48px no-repeat,
    linear-gradient(90deg,#ffffff 0 55%, #e9a64f 55% 100%) calc(100% - 51px) 7px / 28px 14px no-repeat,
    linear-gradient(#6a4636 0 0) center 26px / 6px 32px no-repeat,
    linear-gradient(#d2a165 0 0) center 17px / 26px 11px no-repeat !important;
}

#studentPage #avatarCharacterStage[data-job-scene="fighter"] .avatar-story-mountain.mountain-far {
  left: -24px !important;
  width: 190px !important;
  height: 122px !important;
  background-color: #c08d62 !important;
}

#studentPage #avatarCharacterStage[data-job-scene="fighter"] .avatar-story-mountain.mountain-near {
  right: -10px !important;
  width: 168px !important;
  height: 152px !important;
  background-color: #8c5f4d !important;
}

/* Mage — ภูเขาเวท คริสตัล และหอเวท */
#studentPage #avatarCharacterStage[data-job-scene="mage"] .avatar-story-background::before {
  left: 98px !important;
  bottom: 118px !important;
  width: 132px !important;
  height: 128px !important;
  background:
    linear-gradient(#7d69d9 0 0) center bottom 18px / 78px 56px no-repeat,
    linear-gradient(#a790ff 0 0) center 18px / 28px 26px no-repeat,
    linear-gradient(#8ef1ff 0 0) 0 78px / 34px 54px no-repeat,
    linear-gradient(#a8fbff 0 0) 22px 58px / 22px 36px no-repeat,
    linear-gradient(#8ef1ff 0 0) calc(100% - 34px) 70px / 34px 56px no-repeat,
    linear-gradient(#a8fbff 0 0) calc(100% - 44px) 46px / 22px 32px no-repeat !important;
  clip-path: polygon(34% 0, 52% 18%, 61% 0, 84% 20%, 84% 45%, 100% 67%, 80% 100%, 0 100%, 0 56%, 16% 34%, 16% 20%) !important;
  opacity: .95 !important;
}

#studentPage #avatarCharacterStage[data-job-scene="mage"] .avatar-story-background::after {
  right: 18px !important;
  top: 26px !important;
  width: 76px !important;
  height: 76px !important;
  border: 3px solid rgba(226,239,255,.92) !important;
  border-radius: 50% !important;
  box-shadow:
    0 0 0 8px rgba(198,174,255,.28),
    inset 0 0 0 3px rgba(143,239,255,.55) !important;
  opacity: .92 !important;
}

#studentPage #avatarCharacterStage[data-job-scene="mage"] .avatar-story-rock {
  background-color: #8ef1ff !important;
  box-shadow: 0 0 14px rgba(122,241,255,.7) !important;
}

#studentPage #avatarCharacterStage[data-job-scene="mage"] .avatar-story-tree {
  transform: scale(.68) !important;
  opacity: .78 !important;
}

/* Assassin — ป่ากลางคืน ลึกและมีหมอก */
#studentPage #avatarCharacterStage[data-job-scene="assassin"] .avatar-story-background::before {
  left: 0 !important;
  right: 0 !important;
  bottom: 78px !important;
  height: 166px !important;
  background:
    linear-gradient(transparent 0 35%, rgba(22,35,57,.65) 35% 100%),
    radial-gradient(circle at 12% 76%, #0f2b31 0 18px, transparent 19px),
    radial-gradient(circle at 24% 66%, #112d33 0 18px, transparent 19px),
    radial-gradient(circle at 72% 72%, #0f2b31 0 20px, transparent 21px),
    radial-gradient(circle at 88% 62%, #112d33 0 16px, transparent 17px) !important;
  opacity: .95 !important;
}

#studentPage #avatarCharacterStage[data-job-scene="assassin"] .avatar-story-background::after {
  left: 0 !important;
  right: 0 !important;
  bottom: 74px !important;
  height: 52px !important;
  background: linear-gradient(to top, rgba(211,229,255,.20), rgba(211,229,255,0)) !important;
}

#studentPage #avatarCharacterStage[data-job-scene="assassin"] .avatar-story-tree.tree-left {
  left: -2px !important;
  transform: scale(1.08) !important;
}

#studentPage #avatarCharacterStage[data-job-scene="assassin"] .avatar-story-tree.tree-right {
  right: -8px !important;
  transform: scale(1.02) !important;
}

#studentPage #avatarCharacterStage[data-job-scene="assassin"] .avatar-story-rock,
#studentPage #avatarCharacterStage[data-job-scene="assassin"] .avatar-story-grass {
  opacity: .8 !important;
}

/* Support — ทุ่งพลังบวก / บ้าน / ลำธาร */
#studentPage #avatarCharacterStage[data-job-scene="support"] .avatar-story-background::before {
  left: 46px !important;
  bottom: 118px !important;
  width: 110px !important;
  height: 86px !important;
  background:
    linear-gradient(#f4f1dc 0 0) center bottom 0 / 70px 42px no-repeat,
    linear-gradient(#f0af66 0 0) center 26px / 82px 22px no-repeat,
    linear-gradient(#d26c6c 0 0) center 0 / 88px 34px no-repeat,
    linear-gradient(#7f614a 0 0) 24px 52px / 8px 24px no-repeat,
    linear-gradient(#7f614a 0 0) calc(100% - 32px) 52px / 8px 24px no-repeat !important;
  clip-path: polygon(50% 0, 100% 38%, 100% 100%, 0 100%, 0 38%) !important;
  opacity: .96 !important;
}

#studentPage #avatarCharacterStage[data-job-scene="support"] .avatar-story-background::after {
  left: 112px !important;
  bottom: 0 !important;
  width: 90px !important;
  height: 112px !important;
  background:
    linear-gradient(#6fd2ff 0 0) center / 34px 100% no-repeat,
    linear-gradient(#baf1ff 0 0) 28px 0 / 11px 100% no-repeat !important;
  clip-path: polygon(36% 0, 64% 0, 74% 100%, 26% 100%) !important;
  opacity: .85 !important;
}

#studentPage #avatarCharacterStage[data-job-scene="support"] .avatar-story-tree.tree-right {
  right: -4px !important;
  transform: scale(.92) !important;
}

/* Carry — พื้นที่สูง ทะเล และน้ำตก */
#studentPage #avatarCharacterStage[data-job-scene="carry"] .avatar-story-background::before {
  right: 18px !important;
  bottom: 112px !important;
  width: 136px !important;
  height: 164px !important;
  background:
    linear-gradient(#5f89ac 0 0) center bottom 0 / 94px 118px no-repeat,
    linear-gradient(#95dfff 0 0) center bottom 0 / 28px 116px no-repeat,
    linear-gradient(#dff8ff 0 0) center bottom 0 / 12px 116px no-repeat !important;
  clip-path: polygon(52% 0, 100% 86%, 88% 100%, 14% 100%, 0 80%) !important;
  opacity: .92 !important;
}

#studentPage #avatarCharacterStage[data-job-scene="carry"] .avatar-story-background::after {
  left: 16px !important;
  top: 58px !important;
  width: 92px !important;
  height: 56px !important;
  background:
    linear-gradient(#8ba8c4 0 0) center bottom / 100% 18px no-repeat,
    linear-gradient(#6fb572 0 0) center top / 100% 38px no-repeat !important;
  clip-path: polygon(8% 26%, 72% 26%, 84% 0, 92% 26%, 100% 26%, 100% 56%, 0 56%, 0 26%) !important;
}

#studentPage #avatarCharacterStage[data-job-scene="carry"] .avatar-story-ground {
  background-color: #5ea0c0 !important;
  box-shadow: inset 0 16px 0 #88d2ed !important;
}

#studentPage #avatarCharacterStage[data-job-scene="carry"] .avatar-story-tree.tree-left {
  left: 2px !important;
  transform: scale(.74) !important;
}

#studentPage #avatarCharacterStage[data-job-scene="carry"] .avatar-story-tree.tree-right {
  right: 0 !important;
  transform: scale(.72) !important;
}



/* ============================================================
   PHASE C4.11 — SEPARATE JOB / VISUAL SAVE + CLEAN SETUP MENU
============================================================ */

#studentPage
.avatar-character-setup-head {
  display: block !important;
  padding-bottom: 2px !important;
}

#studentPage
.avatar-character-setup-head > div {
  width: 100% !important;
}

#studentPage
.avatar-character-setup-head p {
  max-width: 760px !important;
}

/* การ์ดอาชีพ 5 ใบเต็มแถว */
#studentPage
.avatar-config-panel
.avatar-job-selector {
  display: grid !important;
  grid-template-columns:
    repeat(5, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin-top: 12px !important;
}

#studentPage
.avatar-config-panel
.avatar-job-card {
  min-width: 0 !important;
  min-height: 108px !important;
  padding: 12px 8px !important;
  border-radius: 18px !important;
}

/* สถานะอาชีพ + ปุ่มยืนยัน */
#studentPage
.avatar-job-control-row {
  display: grid !important;
  grid-template-columns:
    minmax(0, 1fr) !important;
  gap: 14px !important;
  align-items: stretch !important;
  margin-top: 12px !important;
}

#studentPage
.avatar-job-control-row.has-action {
  grid-template-columns:
    minmax(0, 1fr)
    minmax(190px, 240px) !important;
}

#studentPage
.avatar-job-control-row
.avatar-job-change-policy {
  min-width: 0 !important;
  min-height: 60px !important;
  margin: 0 !important;
  padding: 12px 14px !important;
  border-radius: 15px !important;
}

#studentPage
.avatar-job-control-row
.avatar-job-action-row {
  min-width: 0 !important;
  margin: 0 !important;
}

#studentPage
.avatar-job-control-row
.avatar-job-confirm-btn {
  width: 100% !important;
  height: 100% !important;
  min-height: 60px !important;
  margin: 0 !important;
  border-radius: 14px !important;
  font-size:15px !important;
  font-weight: 800 !important;
}

#studentPage
.avatar-job-control-row
.avatar-job-confirm-btn.hidden {
  display: none !important;
}

/* เส้นแบ่งส่วนอาชีพกับรูปลักษณ์ */
#studentPage
.avatar-identity-divider {
  height: 1px !important;
  margin: 18px 0 14px !important;
  background-color: #e8e4f2 !important;
}

/* ชื่ออวาตาร์ + ปุ่มบันทึกอยู่แถวเดียวกัน */
#studentPage
.avatar-identity-save-row {
  display: grid !important;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(190px, 240px) !important;
  gap: 14px !important;
  align-items: end !important;
  margin-bottom: 14px !important;
}

#studentPage
.avatar-name-field {
  display: flex !important;
  flex-direction: column !important;
  gap: 7px !important;
  min-width: 0 !important;
}

#studentPage
.avatar-name-field > span {
  color: #5e5575 !important;
  font-size:13px !important;
  font-weight: 800 !important;
}

#studentPage
.avatar-name-field .input {
  width: 100% !important;
  min-height: 50px !important;
  border-radius: 14px !important;
}

#studentPage
.avatar-identity-save-row
.avatar-save-btn {
  width: 100% !important;
  min-height: 50px !important;
  margin: 0 !important;
  border-radius: 14px !important;
  font-size:15px !important;
  font-weight: 800 !important;
}

/* รูปลักษณ์ 4 ช่องต่อแถว */
#studentPage
.avatar-config-panel
.avatar-appearance-grid {
  display: grid !important;
  grid-template-columns:
    repeat(4, minmax(0, 1fr)) !important;
  gap: 14px 12px !important;
  padding-top: 14px !important;
  border-top:
    1px solid #ece8f4 !important;
}

#studentPage
.avatar-config-panel
.avatar-appearance-grid > label {
  min-width: 0 !important;
}

#studentPage
.avatar-config-panel
.avatar-appearance-grid
.avatar-wide-field {
  grid-column: auto !important;
}

#studentPage
.avatar-config-panel
.avatar-appearance-grid .input,
#studentPage
.avatar-config-panel
.avatar-hair-picker-wrap {
  min-height: 48px !important;
  border-radius: 14px !important;
}

/* Tablet */
@media (max-width: 960px) {
  #studentPage
  .avatar-config-panel
  .avatar-job-selector {
    grid-template-columns:
      repeat(5, minmax(112px, 1fr)) !important;
    overflow-x: auto !important;
    padding-bottom: 5px !important;
  }

  #studentPage
  .avatar-config-panel
  .avatar-appearance-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Mobile */
@media (max-width: 640px) {
  #studentPage
  .avatar-job-control-row.has-action,
  #studentPage
  .avatar-identity-save-row {
    grid-template-columns:
      minmax(0, 1fr) !important;
  }

  #studentPage
  .avatar-config-panel
  .avatar-appearance-grid {
    grid-template-columns:
      minmax(0, 1fr) !important;
  }

  #studentPage
  .avatar-job-control-row
  .avatar-job-confirm-btn,
  #studentPage
  .avatar-identity-save-row
  .avatar-save-btn {
    min-height: 48px !important;
  }
}


/* PHASE C4.12 — BLOCK DIALOG / FAST SHOP / DRIVE SCENES */
.swal2-popup.student-block-dialog{width:min(410px,calc(100vw - 28px))!important;padding:24px 24px 22px!important;border:4px solid #fff!important;border-radius:22px!important;outline:4px solid #8870e8!important;background:#fbfaff!important;box-shadow:0 10px 0 #c8bdf0,0 20px 38px rgba(52,45,89,.24)!important}
.swal2-popup.student-block-dialog::before{content:""!important;position:absolute!important;left:14px!important;right:14px!important;top:10px!important;height:7px!important;border-radius:3px!important;background:linear-gradient(90deg,#6e54dc 0 24%,#8fe2ff 24% 42%,#ffd66b 42% 62%,#ff8fb1 62% 80%,#61d8a2 80% 100%)!important}
.swal2-title.student-block-dialog-title{color:#362f55!important;font-size:23px!important;font-weight:900!important}.swal2-html-container.student-block-dialog-content{color:#665f7c!important;font-size:13px!important;line-height:1.55!important}.swal2-actions.student-block-dialog-actions{gap:10px!important;margin-top:18px!important}.swal2-confirm.student-block-confirm-button,.swal2-cancel.student-block-cancel-button{min-height:46px!important;margin:0!important;padding:10px 18px!important;border:0!important;border-radius:13px!important;font-weight:900!important;box-shadow:0 5px 0 rgba(46,38,79,.22)!important}.swal2-cancel.student-block-cancel-button{color:#615878!important;background:#ece8f5!important}
.student-block-loader{min-height:175px!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;text-align:center!important}.student-block-loader strong{margin-top:14px!important;color:#3f365f!important;font-size:20px!important;font-weight:900!important}.student-block-loader small{margin-top:4px!important;color:#8a819e!important;font-size:13px!important;font-weight:700!important}.student-block-loader-icon{position:relative!important;width:70px!important;height:70px!important;transform:rotate(45deg)!important}.student-block-loader-icon span{position:absolute!important;width:28px!important;height:28px!important;border:3px solid #fff!important;border-radius:7px!important;box-shadow:0 4px 0 rgba(48,41,80,.18)!important;animation:studentBlockLoaderMove 1.05s ease-in-out infinite!important}.student-block-loader-icon span:nth-child(1){left:0!important;top:0!important;background:#7158e5!important}.student-block-loader-icon span:nth-child(2){right:0!important;top:0!important;background:#59c9ef!important;animation-delay:.13s!important}.student-block-loader-icon span:nth-child(3){left:0!important;bottom:0!important;background:#ffca61!important;animation-delay:.26s!important}.student-block-loader-icon span:nth-child(4){right:0!important;bottom:0!important;background:#55ce9a!important;animation-delay:.39s!important}@keyframes studentBlockLoaderMove{0%,100%{transform:translateY(0) scale(1)!important;opacity:.75!important}50%{transform:translateY(-7px) scale(1.08)!important;opacity:1!important}}
.student-block-job-warning{display:grid!important;grid-template-columns:38px minmax(0,1fr)!important;gap:10px!important;align-items:center!important;margin-bottom:13px!important;padding:11px 12px!important;border:2px solid #f2c86a!important;border-radius:14px!important;color:#765616!important;background:#fff7d9!important;text-align:left!important}.student-block-job-warning>i{width:38px!important;height:38px!important;display:grid!important;place-items:center!important;border-radius:11px!important;color:#a66f00!important;background:#ffe99c!important}.student-block-job-warning strong,.student-block-job-warning span{display:block!important}.student-block-job-warning span{margin-top:2px!important;font-size:13px!important;line-height:1.45!important}
#studentPage .avatar-story-background.has-custom-scene{background-image:var(--avatar-scene-image)!important;background-size:cover!important;background-position:center!important;background-repeat:no-repeat!important;background-color:#a9d8f6!important}#studentPage .avatar-story-background.has-custom-scene::before,#studentPage .avatar-story-background.has-custom-scene::after{display:none!important;content:none!important}#studentPage .avatar-story-background.has-custom-scene>*{display:none!important}
#studentPage .avatar-item-job-warning{display:flex!important;align-items:center!important;justify-content:center!important;gap:4px!important;min-height:24px!important;margin:2px 6px 5px!important;padding:3px 6px!important;border-radius:8px!important;color:#8a6418!important;background:#fff3c8!important;font-size:13px!important;font-weight:800!important;text-align:center!important}#studentPage .avatar-item-action.buy.is-foreign-job{color:#76520e!important;background:#ffe9a0!important;border-color:#e6bd4c!important}
#studentPage .voxel-bow-shape-v8{filter:drop-shadow(2px 3px 0 rgba(30,45,74,.28))!important}#studentPage .voxel-bow-shape-v8 .bow-block{background:#278bd6!important;border:2px solid #15558e!important;box-shadow:inset 3px 0 0 #73d6ff!important}#studentPage .voxel-bow-shape-v8 .bow-string{left:39px!important;top:11px!important;width:3px!important;height:92px!important;background:#fff4cc!important;box-shadow:0 0 0 1px rgba(69,53,38,.35)!important}#studentPage .voxel-bow-shape-v8 .bow-arrow{left:-17px!important;top:53px!important;width:61px!important;height:6px!important;border:1px solid #5b3218!important;background:#b66b2e!important;box-shadow:inset 0 2px 0 #e8a45d!important}#studentPage .voxel-bow-shape-v8 .bow-arrow-head{left:-31px!important;right:auto!important;top:47px!important;width:17px!important;height:17px!important;background:#236fba!important;border:2px solid #12487d!important;clip-path:polygon(100% 0,0 50%,100% 100%)!important}#studentPage .voxel-bow-shape-v8 .bow-arrow::after{content:""!important;position:absolute!important;right:-8px!important;top:-5px!important;width:10px!important;height:14px!important;background:linear-gradient(45deg,transparent 0 35%,#f4dfb1 36% 64%,transparent 65% 100%)!important}#studentPage .avatar-item-pixel-preview-weapon[data-kind="bow"] .bow-arc{background:#278bd6!important;border:1px solid #15558e!important}#studentPage .avatar-item-pixel-preview-weapon[data-kind="bow"] .bow-arrow{left:8px!important;width:47px!important;background:#b66b2e!important}#studentPage .avatar-item-pixel-preview-weapon[data-kind="bow"] .bow-tip{left:0!important;right:auto!important;clip-path:polygon(100% 0,0 50%,100% 100%)!important;background:#236fba!important}



/* ============================================================
   PHASE C4.13 — PAN / CAPE / AURA / HORSE / UNEQUIP ALL
============================================================ */

/* Slightly smaller avatar to leave future room for pets */
#studentPage #avatarPixelScene {
  transform: scale(0.90) !important;
  transform-origin: center bottom !important;
}

/* Quick action row under pet slot */
#studentPage .avatar-preview-quick-actions {
  display: flex !important;
  justify-content: center !important;
  margin-top: 10px !important;
}

#studentPage .avatar-unequip-all-btn {
  min-height: 42px !important;
  padding: 10px 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  border: 2px solid #efc7cf !important;
  border-radius: 14px !important;
  color: #824255 !important;
  background: linear-gradient(180deg, #fff6f8 0%, #ffe8ee 100%) !important;
  box-shadow: 0 4px 0 #e6c8d2 !important;
  font-family: 'Sarabun', sans-serif !important;
  font-size:13px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
}
#studentPage .avatar-unequip-all-btn:hover {
  transform: translateY(-1px) !important;
}
#studentPage .avatar-unequip-all-btn:active {
  transform: translateY(2px) !important;
  box-shadow: 0 2px 0 #e6c8d2 !important;
}

/* Make positive aura smaller so it does not hide the avatar */
#studentPage .voxel-avatar-stage-v8 .avatar-aura-visual {
  width: 178px !important;
  height: 178px !important;
  top: 50.5% !important;
}
#studentPage .voxel-avatar-stage-v8 .avatar-aura-visual.is-active {
  box-shadow:
    0 0 14px var(--avatar-glow),
    inset 0 0 12px var(--avatar-glow) !important;
  opacity: .88 !important;
}

/* Hero cape aligned to the avatar back */
#studentPage .voxel-avatar-accessory-back-v8[data-accessory-style="hero-cape"] {
  position: absolute !important;
  left: 50% !important;
  top: 118px !important;
  width: 86px !important;
  height: 132px !important;
  transform: translateX(-50%) translateZ(-6px) !important;
  z-index: 7 !important;
  pointer-events: none !important;
}
#studentPage .voxel-avatar-accessory-back-v8[data-accessory-style="hero-cape"] .voxel-cape-v8 {
  position: absolute !important;
  inset: 0 !important;
  left: 0 !important;
  top: 0 !important;
  width: 86px !important;
  height: 132px !important;
  filter: drop-shadow(0 4px 0 rgba(58, 30, 55, .18)) !important;
}
#studentPage .voxel-avatar-accessory-back-v8[data-accessory-style="hero-cape"] .voxel-cape-v8 i:nth-child(1) {
  left: 16px !important;
  top: 0 !important;
  width: 54px !important;
  height: 74px !important;
}
#studentPage .voxel-avatar-accessory-back-v8[data-accessory-style="hero-cape"] .voxel-cape-v8 i:nth-child(2) {
  left: 8px !important;
  top: 56px !important;
  width: 28px !important;
  height: 54px !important;
}
#studentPage .voxel-avatar-accessory-back-v8[data-accessory-style="hero-cape"] .voxel-cape-v8 i:nth-child(3) {
  right: 8px !important;
  top: 56px !important;
  width: 28px !important;
  height: 54px !important;
}

/* Round frying pan held from the hand */
#studentPage .voxel-avatar-weapon-v8[data-weapon-kind="pan"] {
  left: 144px !important;
  top: 124px !important;
  width: 92px !important;
  height: 88px !important;
  z-index: 58 !important;
}
#studentPage .voxel-pan-shape-v8 {
  position: relative !important;
  width: 92px !important;
  height: 88px !important;
  filter: drop-shadow(2px 4px 0 rgba(33, 39, 52, .22)) !important;
}
#studentPage .voxel-pan-shape-v8 .pan-head {
  left: 6px !important;
  top: 0 !important;
  width: 44px !important;
  height: 44px !important;
  border: 4px solid #2d3138 !important;
  border-radius: 50% !important;
  background:
    radial-gradient(circle at 36% 34%, #707a86 0 22%, #535b67 23% 57%, #3f454d 58% 100%) !important;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.08),
    inset 0 -5px 0 rgba(0,0,0,.14) !important;
}
#studentPage .voxel-pan-shape-v8 .pan-core {
  left: 16px !important;
  top: 10px !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle at 35% 32%, #818b97 0 16%, #616a76 17% 100%) !important;
  opacity: .95 !important;
}
#studentPage .voxel-pan-shape-v8 .pan-handle {
  left: 40px !important;
  top: 34px !important;
  width: 42px !important;
  height: 10px !important;
  border-radius: 5px !important;
  background: #41454c !important;
  transform: rotate(34deg) !important;
  transform-origin: left center !important;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.12) !important;
}
#studentPage .voxel-pan-shape-v8 .pan-handle::after {
  content: "" !important;
  position: absolute !important;
  right: 4px !important;
  top: 2px !important;
  width: 8px !important;
  height: 4px !important;
  border: 2px solid rgba(255,255,255,.36) !important;
  border-radius: 999px !important;
}
/* Item preview: round pan */
#studentPage .avatar-item-pixel-preview-weapon[data-kind="pan"] .pan-head {
  left: 12px !important;
  top: 10px !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  border: 3px solid #2d3138 !important;
  background: radial-gradient(circle at 36% 34%, #707a86 0 22%, #535b67 23% 57%, #3f454d 58% 100%) !important;
}
#studentPage .avatar-item-pixel-preview-weapon[data-kind="pan"] .pan-core {
  left: 20px !important;
  top: 18px !important;
  width: 14px !important;
  height: 14px !important;
  border-radius: 50% !important;
  background: #6b7480 !important;
}
#studentPage .avatar-item-pixel-preview-weapon[data-kind="pan"] .pan-handle {
  left: 36px !important;
  top: 30px !important;
  width: 24px !important;
  height: 7px !important;
  border-radius: 4px !important;
  background: #41454c !important;
  transform: rotate(32deg) !important;
}

/* Hobby horse clearer on avatar */
#studentPage .voxel-avatar-accessory-front-v8[data-accessory-style="hobby-horse"] .voxel-hobby-horse-v8 {
  left: 46px !important;
  top: 108px !important;
  width: 90px !important;
  height: 112px !important;
  z-index: 72 !important;
  filter: drop-shadow(2px 3px 0 rgba(58, 36, 18, .18)) !important;
}
#studentPage .voxel-avatar-accessory-front-v8[data-accessory-style="hobby-horse"] .head {
  left: 10px !important;
  top: 0 !important;
  width: 42px !important;
  height: 34px !important;
  border: 3px solid #7a4d2a !important;
  border-radius: 8px !important;
  background: linear-gradient(180deg, #d19a63 0%, #b97a44 100%) !important;
}
#studentPage .voxel-avatar-accessory-front-v8[data-accessory-style="hobby-horse"] .head::before {
  content: "" !important;
  position: absolute !important;
  right: -8px !important;
  top: 9px !important;
  width: 16px !important;
  height: 14px !important;
  border-radius: 0 10px 10px 0 !important;
  background: #e8c69f !important;
}
#studentPage .voxel-avatar-accessory-front-v8[data-accessory-style="hobby-horse"] .head::after {
  content: "" !important;
  position: absolute !important;
  left: 8px !important;
  top: 5px !important;
  width: 18px !important;
  height: 8px !important;
  background: linear-gradient(180deg, #7a4d2a 0%, #4c2f1b 100%) !important;
}
#studentPage .voxel-avatar-accessory-front-v8[data-accessory-style="hobby-horse"] .ear {
  left: 20px !important;
  top: -12px !important;
  width: 12px !important;
  height: 14px !important;
  background: #87542d !important;
  transform: skewX(-12deg) !important;
  box-shadow: 12px 2px 0 #87542d !important;
}
#studentPage .voxel-avatar-accessory-front-v8[data-accessory-style="hobby-horse"] .stick {
  left: 28px !important;
  top: 28px !important;
  width: 10px !important;
  height: 78px !important;
  border-radius: 4px !important;
  background: linear-gradient(180deg, #b48b56 0%, #8d643c 100%) !important;
}
#studentPage .voxel-avatar-accessory-front-v8[data-accessory-style="hobby-horse"] .stick::before {
  content: "" !important;
  position: absolute !important;
  left: -2px !important;
  top: 12px !important;
  width: 28px !important;
  height: 8px !important;
  background: #6f90c4 !important;
  opacity: .85 !important;
}

/* Hobby horse clearer in item preview */
#studentPage .avatar-item-pixel-preview-accessory[data-kind="horse"] .horse-head {
  left: 18px !important;
  top: 10px !important;
  width: 28px !important;
  height: 22px !important;
  border-radius: 7px !important;
  background: linear-gradient(180deg, #d19a63 0%, #b97a44 100%) !important;
  border: 2px solid #7a4d2a !important;
}
#studentPage .avatar-item-pixel-preview-accessory[data-kind="horse"] .horse-head::before {
  content: "" !important;
  position: absolute !important;
  right: -7px !important;
  top: 6px !important;
  width: 12px !important;
  height: 10px !important;
  border-radius: 0 8px 8px 0 !important;
  background: #e8c69f !important;
}
#studentPage .avatar-item-pixel-preview-accessory[data-kind="horse"] .horse-ear {
  left: 24px !important;
  top: 1px !important;
  width: 9px !important;
  height: 9px !important;
  background: #87542d !important;
  box-shadow: 10px 2px 0 #87542d !important;
}
#studentPage .avatar-item-pixel-preview-accessory[data-kind="horse"] .horse-stick {
  left: 28px !important;
  top: 28px !important;
  width: 8px !important;
  height: 34px !important;
  background: linear-gradient(180deg, #b48b56 0%, #8d643c 100%) !important;
  border-radius: 4px !important;
}

@media (max-width: 768px) {
  #studentPage #avatarPixelScene {
    transform: scale(0.86) !important;
  }
}



/* ============================================================
   PHASE C4.14 — UNIVERSAL ARMOR / MORE ITEMS / PET STANDBY
============================================================ */

/* Hero cape — tighter and behind the avatar */
#studentPage .voxel-avatar-accessory-back-v8[data-accessory-style="hero-cape"] {
  left: 50% !important;
  top: 126px !important;
  width: 64px !important;
  height: 104px !important;
  transform: translateX(-50%) translateZ(-20px) !important;
  z-index: 4 !important;
  opacity: .96 !important;
}
#studentPage .voxel-avatar-accessory-back-v8[data-accessory-style="hero-cape"] .voxel-cape-v8 i:nth-child(1) {
  left: 18px !important;
  width: 28px !important;
  height: 60px !important;
}
#studentPage .voxel-avatar-accessory-back-v8[data-accessory-style="hero-cape"] .voxel-cape-v8 i:nth-child(2),
#studentPage .voxel-avatar-accessory-back-v8[data-accessory-style="hero-cape"] .voxel-cape-v8 i:nth-child(3) {
  top: 50px !important;
  width: 18px !important;
  height: 42px !important;
}
#studentPage .voxel-avatar-accessory-back-v8[data-accessory-style="hero-cape"] .voxel-cape-v8 i:nth-child(2) { left: 10px !important; }
#studentPage .voxel-avatar-accessory-back-v8[data-accessory-style="hero-cape"] .voxel-cape-v8 i:nth-child(3) { right: 10px !important; }

/* Pet standby spot */
#studentPage .avatar-pet-standby {
  position: absolute !important;
  right: 10px !important;
  bottom: 22px !important;
  width: 74px !important;
  height: 84px !important;
  border: 2px dashed rgba(132, 119, 214, .35) !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.38), rgba(243,242,255,.72)) !important;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.58) !important;
  pointer-events: none !important;
  z-index: 2 !important;
}
#studentPage .avatar-pet-standby .pet-pixel {
  position: absolute !important;
  display: block !important;
  background: #b7c4ff !important;
  box-shadow: 0 2px 0 rgba(97,109,178,.18) !important;
}
#studentPage .avatar-pet-standby .pet-head { left: 25px; top: 18px; width: 24px; height: 18px; border-radius: 8px; }
#studentPage .avatar-pet-standby .pet-body { left: 21px; top: 34px; width: 32px; height: 20px; border-radius: 10px; }
#studentPage .avatar-pet-standby .pet-tail { left: 50px; top: 37px; width: 10px; height: 6px; border-radius: 999px; }
#studentPage .avatar-pet-standby .pet-ear { top: 12px; width: 8px; height: 8px; transform: rotate(45deg); }
#studentPage .avatar-pet-standby .ear-left { left: 26px; }
#studentPage .avatar-pet-standby .ear-right { left: 40px; }
#studentPage .avatar-pet-standby .pet-label {
  position: absolute !important;
  left: 6px !important;
  right: 6px !important;
  bottom: 7px !important;
  text-align: center !important;
  font-size:13px !important;
  font-weight: 900 !important;
  color: #6e68a8 !important;
  letter-spacing: .6px !important;
}

/* Weapon hold positions by job and type */
#studentPage .job-fighter .voxel-avatar-weapon-v8[data-weapon-kind="sword"] { left: 144px !important; top: 122px !important; transform: rotate(-8deg) !important; }
#studentPage .job-fighter .voxel-avatar-weapon-v8[data-weapon-kind="pan"] { left: 142px !important; top: 128px !important; transform: rotate(-6deg) !important; }
#studentPage .job-fighter .voxel-avatar-weapon-v8[data-weapon-kind="spatula"] { left: 145px !important; top: 126px !important; transform: rotate(-8deg) !important; }

#studentPage .job-mage .voxel-avatar-weapon-v8[data-weapon-kind="staff"] { left: 146px !important; top: 116px !important; transform: rotate(7deg) !important; }
#studentPage .job-mage .voxel-avatar-weapon-v8[data-weapon-kind="pan"] { left: 144px !important; top: 129px !important; transform: rotate(-8deg) !important; }
#studentPage .job-mage .voxel-avatar-weapon-v8[data-weapon-kind="spatula"] { left: 146px !important; top: 124px !important; transform: rotate(-6deg) !important; }

#studentPage .job-assassin .voxel-avatar-weapon-v8[data-weapon-kind="blades"] { left: 142px !important; top: 124px !important; transform: rotate(-2deg) !important; }
#studentPage .job-assassin .voxel-avatar-weapon-v8[data-weapon-kind="pan"] { left: 143px !important; top: 130px !important; transform: rotate(-9deg) !important; }

#studentPage .job-support .voxel-avatar-weapon-v8[data-weapon-kind="staff"] { left: 147px !important; top: 118px !important; transform: rotate(8deg) !important; }
#studentPage .job-support .voxel-avatar-weapon-v8[data-weapon-kind="spatula"] { left: 146px !important; top: 126px !important; transform: rotate(-5deg) !important; }

#studentPage .job-carry .voxel-avatar-weapon-v8[data-weapon-kind="bow"] { left: 142px !important; top: 120px !important; transform: rotate(-2deg) !important; }
#studentPage .job-carry .voxel-avatar-weapon-v8[data-weapon-kind="pan"] { left: 142px !important; top: 129px !important; transform: rotate(-8deg) !important; }

#studentPage #avatarCharacterStage { overflow: hidden !important; }



/* ============================================================
   PHASE C4.15 — DIALOG + CAPE + BOW + ACCESSORY FIX
============================================================ */

/* ---------- All SweetAlert windows use the block theme ---------- */
.swal2-container {
  font-family: 'Sarabun', sans-serif !important;
}

.swal2-popup.student-block-dialog {
  width: min(430px, calc(100vw - 28px)) !important;
  padding: 28px 24px 24px !important;
  border: 4px solid #ffffff !important;
  border-radius: 24px !important;
  outline: 4px solid #7560d9 !important;
  background:
    linear-gradient(180deg, #ffffff 0%, #f6f3ff 100%) !important;
  box-shadow:
    0 9px 0 #bdb1e9,
    0 20px 42px rgba(38, 31, 74, .30) !important;
}

.swal2-popup.student-block-dialog .swal2-icon {
  width: 72px !important;
  height: 72px !important;
  margin: 18px auto 13px !important;
  border-width: 4px !important;
  border-radius: 20px !important;
  transform: rotate(3deg) !important;
  box-shadow:
    0 6px 0 rgba(71, 57, 119, .14) !important;
}

.swal2-popup.student-block-dialog .swal2-icon-content {
  transform: rotate(-3deg) !important;
}

.swal2-popup.student-block-dialog .swal2-success-circular-line-left,
.swal2-popup.student-block-dialog .swal2-success-circular-line-right,
.swal2-popup.student-block-dialog .swal2-success-fix {
  display: none !important;
}

.swal2-title.student-block-dialog-title {
  margin: 8px 0 4px !important;
  color: #352d52 !important;
  font-size:24px !important;
  font-weight: 900 !important;
  line-height: 1.25 !important;
}

.swal2-html-container.student-block-dialog-content {
  margin: 8px 0 0 !important;
  color: #6b637e !important;
  font-size:14px !important;
  line-height: 1.6 !important;
}

.swal2-confirm.student-block-confirm-button,
.swal2-cancel.student-block-cancel-button {
  min-height: 46px !important;
  padding: 10px 20px !important;
  border: 0 !important;
  border-radius: 13px !important;
  font-family: 'Sarabun', sans-serif !important;
  font-size:14px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
}

.swal2-confirm.student-block-confirm-button {
  color: #ffffff !important;
  background: linear-gradient(180deg, #7762e8 0%, #5b45c8 100%) !important;
  box-shadow: 0 5px 0 #44339a !important;
}

.swal2-cancel.student-block-cancel-button {
  color: #625978 !important;
  background: #ece8f5 !important;
  box-shadow: 0 5px 0 #d1cadf !important;
}

/* Index/login loader: compact voxel card, no old circle spinner */
.student-block-loader {
  min-height: 188px !important;
}

.student-block-loader strong {
  max-width: 330px !important;
  color: #3b325c !important;
  font-size:21px !important;
  line-height: 1.3 !important;
}

.student-block-loader small {
  color: #8b829f !important;
}

/* ---------- Cape: keep completely behind the torso ---------- */
#studentPage .voxel-avatar-accessory-back-v8[data-accessory-style="hero-cape"] {
  left: 50% !important;
  top: 118px !important;
  width: 58px !important;
  height: 108px !important;
  transform:
    translateX(-50%)
    translateZ(-90px) !important;
  z-index: -3 !important;
  opacity: 1 !important;
}

#studentPage .voxel-avatar-accessory-back-v8[data-accessory-style="hero-cape"] .voxel-cape-v8 {
  left: 0 !important;
  top: 0 !important;
  width: 58px !important;
  height: 108px !important;
}

#studentPage .voxel-avatar-accessory-back-v8[data-accessory-style="hero-cape"] .voxel-cape-v8 i:nth-child(1) {
  left: 8px !important;
  top: 0 !important;
  width: 42px !important;
  height: 78px !important;
}

#studentPage .voxel-avatar-accessory-back-v8[data-accessory-style="hero-cape"] .voxel-cape-v8 i:nth-child(2) {
  left: 2px !important;
  top: 62px !important;
  width: 28px !important;
  height: 40px !important;
}

#studentPage .voxel-avatar-accessory-back-v8[data-accessory-style="hero-cape"] .voxel-cape-v8 i:nth-child(3) {
  right: 2px !important;
  top: 62px !important;
  width: 28px !important;
  height: 40px !important;
}

/* ---------- Bow: move outside body and align grip with right hand ---------- */
#studentPage .voxel-avatar-weapon-v8[data-weapon-kind="bow"] {
  left: auto !important;
  right: -48px !important;
  top: 116px !important;
  width: 92px !important;
  height: 122px !important;
  transform:
    translateZ(54px)
    rotateZ(4deg) !important;
  z-index: 28 !important;
}

#studentPage .job-carry .voxel-avatar-weapon-v8[data-weapon-kind="bow"] {
  left: auto !important;
  right: -52px !important;
  top: 113px !important;
  transform:
    translateZ(56px)
    rotateZ(6deg) !important;
}

#studentPage .voxel-bow-shape-v8 {
  transform: scale(.96) !important;
  transform-origin: center center !important;
}

/* ---------- Fighter headband: forehead, above hair ---------- */
#studentPage .voxel-avatar-accessory-front-v8[data-accessory-style="fighter-headband"] {
  z-index: 48 !important;
}

#studentPage .voxel-fighter-headband-v8 {
  position: absolute !important;
  left: 7px !important;
  top: 16px !important;
  width: 79px !important;
  height: 18px !important;
}

#studentPage .voxel-fighter-headband-v8 .band {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 79px !important;
  height: 11px !important;
  background: #d64f55 !important;
  border: 2px solid #913139 !important;
  box-shadow: inset 0 3px 0 rgba(255,255,255,.18) !important;
}

#studentPage .voxel-fighter-headband-v8 .knot {
  position: absolute !important;
  right: -5px !important;
  top: 1px !important;
  width: 14px !important;
  height: 14px !important;
  background: #bd3f47 !important;
  transform: rotate(45deg) !important;
}

#studentPage .voxel-fighter-headband-v8 .tail {
  position: absolute !important;
  right: -17px !important;
  width: 22px !important;
  height: 7px !important;
  background: #d64f55 !important;
  transform-origin: left center !important;
}

#studentPage .voxel-fighter-headband-v8 .tail-one {
  top: 3px !important;
  transform: rotate(15deg) !important;
}

#studentPage .voxel-fighter-headband-v8 .tail-two {
  top: 10px !important;
  transform: rotate(-15deg) !important;
}

/* ---------- Shadow mask: not glasses ---------- */
#studentPage .voxel-shadow-mask-v8 {
  position: absolute !important;
  left: 6px !important;
  top: 31px !important;
  width: 80px !important;
  height: 35px !important;
}

#studentPage .voxel-shadow-mask-v8 .mask-main {
  position: absolute !important;
  inset: 0 !important;
  border-radius: 7px 7px 12px 12px !important;
  background: #262b39 !important;
  border: 3px solid #111622 !important;
  clip-path: polygon(0 12%, 100% 12%, 91% 100%, 9% 100%) !important;
}

#studentPage .voxel-shadow-mask-v8 .eye-cut {
  position: absolute !important;
  top: 10px !important;
  z-index: 2 !important;
  width: 22px !important;
  height: 8px !important;
  background: #c8b6ff !important;
  transform: skewX(-18deg) !important;
}

#studentPage .voxel-shadow-mask-v8 .eye-left {
  left: 12px !important;
}

#studentPage .voxel-shadow-mask-v8 .eye-right {
  right: 12px !important;
  transform: skewX(18deg) !important;
}

#studentPage .voxel-shadow-mask-v8 .mask-tail {
  position: absolute !important;
  right: -17px !important;
  top: 14px !important;
  width: 25px !important;
  height: 8px !important;
  background: #40385f !important;
  transform: rotate(-12deg) !important;
}

/* ---------- Baseball cap: cover hair visibly ---------- */
#studentPage .voxel-avatar-accessory-front-v8[data-accessory-style="baseball-cap"] {
  z-index: 55 !important;
}

#studentPage .voxel-avatar-accessory-front-v8[data-accessory-style="baseball-cap"] .voxel-cap-top-v8 {
  left: 3px !important;
  top: -6px !important;
  width: 86px !important;
  height: 35px !important;
  border-radius: 8px 8px 2px 2px !important;
  background: #4568b2 !important;
  border: 3px solid #294b8f !important;
  box-shadow: inset 0 5px 0 rgba(255,255,255,.16) !important;
}

#studentPage .voxel-avatar-accessory-front-v8[data-accessory-style="baseball-cap"] .voxel-cap-brim-v8 {
  left: 55px !important;
  top: 22px !important;
  width: 39px !important;
  height: 11px !important;
  border-radius: 0 7px 7px 0 !important;
  background: #294b8f !important;
}

/* ---------- Support flower: held beside the weapon hand ---------- */
#studentPage .voxel-support-flower-v8 {
  position: absolute !important;
  right: -54px !important;
  top: 130px !important;
  width: 55px !important;
  height: 92px !important;
  transform: rotate(7deg) !important;
  filter: drop-shadow(2px 3px 0 rgba(48, 86, 53, .15)) !important;
}

#studentPage .voxel-support-flower-v8 .stem {
  position: absolute !important;
  left: 26px !important;
  top: 28px !important;
  width: 7px !important;
  height: 62px !important;
  background: #4baf72 !important;
  border: 1px solid #2c8050 !important;
}

#studentPage .voxel-support-flower-v8 .leaf {
  position: absolute !important;
  width: 18px !important;
  height: 10px !important;
  border-radius: 12px 0 12px 0 !important;
  background: #62cf88 !important;
}

#studentPage .voxel-support-flower-v8 .leaf-one {
  left: 9px !important;
  top: 50px !important;
  transform: rotate(-20deg) !important;
}

#studentPage .voxel-support-flower-v8 .leaf-two {
  right: 7px !important;
  top: 62px !important;
  transform: scaleX(-1) rotate(-20deg) !important;
}

#studentPage .voxel-support-flower-v8 .petal {
  position: absolute !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 8px !important;
  background: #ff8eb8 !important;
  border: 2px solid #e46394 !important;
}

#studentPage .voxel-support-flower-v8 .p1 { left: 18px !important; top: 0 !important; }
#studentPage .voxel-support-flower-v8 .p2 { left: 4px !important; top: 14px !important; }
#studentPage .voxel-support-flower-v8 .p3 { right: 4px !important; top: 14px !important; }
#studentPage .voxel-support-flower-v8 .p4 { left: 18px !important; top: 27px !important; }

#studentPage .voxel-support-flower-v8 .flower-core {
  position: absolute !important;
  left: 20px !important;
  top: 16px !important;
  width: 15px !important;
  height: 15px !important;
  border-radius: 50% !important;
  background: #ffd963 !important;
  border: 2px solid #d3a838 !important;
}

/* ---------- Carry mustache on face ---------- */
#studentPage .voxel-carry-mustache-v8 {
  position: absolute !important;
  left: 22px !important;
  top: 58px !important;
  width: 49px !important;
  height: 18px !important;
  z-index: 58 !important;
}

#studentPage .voxel-carry-mustache-v8 .mustache-left,
#studentPage .voxel-carry-mustache-v8 .mustache-right {
  position: absolute !important;
  top: 3px !important;
  width: 24px !important;
  height: 12px !important;
  border-radius: 4px 12px 12px 4px !important;
  background: #4b3328 !important;
}

#studentPage .voxel-carry-mustache-v8 .mustache-left {
  left: 0 !important;
  transform: rotate(10deg) !important;
}

#studentPage .voxel-carry-mustache-v8 .mustache-right {
  right: 0 !important;
  transform: scaleX(-1) rotate(10deg) !important;
}

#studentPage .voxel-carry-mustache-v8 .mustache-center {
  position: absolute !important;
  left: 21px !important;
  top: 1px !important;
  width: 8px !important;
  height: 10px !important;
  background: #3a271f !important;
  transform: rotate(45deg) !important;
}

@media (max-width: 600px) {
  .swal2-popup.student-block-dialog {
    padding: 25px 17px 20px !important;
  }
}



/* ============================================================
   PHASE C4.16 — CAPE / BOW / SHIELD / ACCESSORY POLISH
============================================================ */

/* Cape: keep fully behind body but closer to avatar like the wings */
#studentPage .voxel-avatar-accessory-back-v8[data-accessory-style="hero-cape"] {
  left: 50% !important;
  top: 108px !important;
  width: 96px !important;
  height: 138px !important;
  transform: translateX(-50%) translateZ(-32px) !important;
  z-index: 1 !important;
  opacity: 1 !important;
}
#studentPage .voxel-avatar-accessory-back-v8[data-accessory-style="hero-cape"] .voxel-cape-v8 {
  left: 8px !important;
  top: 0 !important;
  width: 80px !important;
  height: 136px !important;
}
#studentPage .voxel-avatar-accessory-back-v8[data-accessory-style="hero-cape"] .voxel-cape-v8 i:nth-child(1) {
  left: 18px !important;
  top: 2px !important;
  width: 44px !important;
  height: 86px !important;
}
#studentPage .voxel-avatar-accessory-back-v8[data-accessory-style="hero-cape"] .voxel-cape-v8 i:nth-child(2) {
  left: 8px !important;
  top: 72px !important;
  width: 28px !important;
  height: 52px !important;
}
#studentPage .voxel-avatar-accessory-back-v8[data-accessory-style="hero-cape"] .voxel-cape-v8 i:nth-child(3) {
  right: 8px !important;
  top: 72px !important;
  width: 28px !important;
  height: 52px !important;
}

/* Keep wings/other back accessories near the body, not too detached */
#studentPage .voxel-avatar-accessory-back-v8[data-accessory-style="cloud-wings"],
#studentPage .voxel-avatar-accessory-back-v8[data-accessory-style="devil-wings"] {
  transform: translateX(-50%) translateZ(-26px) !important;
}

/* Bow: outside the body + two visible variants */
#studentPage .voxel-avatar-weapon-v8[data-weapon-kind="bow"] {
  left: auto !important;
  right: -30px !important;
  top: 114px !important;
  width: 92px !important;
  height: 120px !important;
  transform: translateZ(58px) rotateZ(2deg) !important;
  z-index: 34 !important;
}
#studentPage .job-carry .voxel-avatar-weapon-v8[data-weapon-kind="bow"] {
  right: -34px !important;
  top: 112px !important;
}
#studentPage .voxel-avatar-weapon-v8[data-weapon-kind="bow"] .voxel-bow-shape-v8 {
  transform: scale(.98) !important;
  transform-origin: center center !important;
}
#studentPage .voxel-avatar-weapon-v8[data-weapon-kind="bow"][data-weapon-variant="skyshot"] .bow-block {
  background-color: #48b7ff !important;
  box-shadow: inset 3px 0 0 #dff7ff !important;
}
#studentPage .voxel-avatar-weapon-v8[data-weapon-kind="bow"][data-weapon-variant="skyshot"] .b1 {
  left: 18px !important; top: 4px !important; width: 16px !important; height: 29px !important; transform: rotate(28deg) !important;
}
#studentPage .voxel-avatar-weapon-v8[data-weapon-kind="bow"][data-weapon-variant="skyshot"] .b2 {
  left: 8px !important; top: 31px !important; width: 16px !important; height: 30px !important; transform: rotate(8deg) !important;
}
#studentPage .voxel-avatar-weapon-v8[data-weapon-kind="bow"][data-weapon-variant="skyshot"] .b3 {
  left: 10px !important; top: 60px !important; width: 16px !important; height: 30px !important; transform: rotate(-10deg) !important;
}
#studentPage .voxel-avatar-weapon-v8[data-weapon-kind="bow"][data-weapon-variant="skyshot"] .b4 {
  left: 21px !important; top: 87px !important; width: 16px !important; height: 29px !important; transform: rotate(-30deg) !important;
}
#studentPage .voxel-avatar-weapon-v8[data-weapon-kind="bow"][data-weapon-variant="skyshot"] .bow-string {
  left: 40px !important; top: 14px !important; height: 88px !important;
}
#studentPage .voxel-avatar-weapon-v8[data-weapon-kind="bow"][data-weapon-variant="skyshot"] .bow-arrow {
  left: 18px !important; top: 54px !important; width: 56px !important; background: #8a5c34 !important;
}
#studentPage .voxel-avatar-weapon-v8[data-weapon-kind="bow"][data-weapon-variant="skyshot"] .bow-arrow-head {
  right: 0 !important; top: 48px !important; width: 15px !important; height: 15px !important; background: #ffe08a !important;
}
#studentPage .voxel-avatar-weapon-v8[data-weapon-kind="bow"][data-weapon-variant="longshot"] .bow-block {
  background-color: #2d7de0 !important;
  box-shadow: inset 3px 0 0 #9edaff !important;
}
#studentPage .voxel-avatar-weapon-v8[data-weapon-kind="bow"][data-weapon-variant="longshot"] .b1 {
  left: 26px !important; top: 1px !important; width: 12px !important; height: 36px !important; transform: rotate(14deg) !important;
}
#studentPage .voxel-avatar-weapon-v8[data-weapon-kind="bow"][data-weapon-variant="longshot"] .b2 {
  left: 15px !important; top: 30px !important; width: 12px !important; height: 34px !important; transform: rotate(3deg) !important;
}
#studentPage .voxel-avatar-weapon-v8[data-weapon-kind="bow"][data-weapon-variant="longshot"] .b3 {
  left: 16px !important; top: 61px !important; width: 12px !important; height: 34px !important; transform: rotate(-6deg) !important;
}
#studentPage .voxel-avatar-weapon-v8[data-weapon-kind="bow"][data-weapon-variant="longshot"] .b4 {
  left: 28px !important; top: 89px !important; width: 12px !important; height: 34px !important; transform: rotate(-18deg) !important;
}
#studentPage .voxel-avatar-weapon-v8[data-weapon-kind="bow"][data-weapon-variant="longshot"] .bow-string {
  left: 42px !important; top: 10px !important; width: 3px !important; height: 97px !important; background: #eef6ff !important;
}
#studentPage .voxel-avatar-weapon-v8[data-weapon-kind="bow"][data-weapon-variant="longshot"] .bow-arrow {
  left: 8px !important; top: 56px !important; width: 73px !important; height: 5px !important; background: #6f4a2a !important;
}
#studentPage .voxel-avatar-weapon-v8[data-weapon-kind="bow"][data-weapon-variant="longshot"] .bow-arrow-head {
  right: -1px !important; top: 50px !important; width: 16px !important; height: 16px !important; background: #ffb46c !important;
}

/* Preview cards for the two bow variants */
#studentPage .avatar-item-pixel-preview-weapon[data-kind="bow"][data-item-id="WPN_CARRY_BOW"] .bow-arc,
#studentPage .avatar-item-pixel-preview-weapon[data-kind="bow"][data-item-id="WPN_CARRY_BOW"] .bow-string,
#studentPage .avatar-item-pixel-preview-weapon[data-kind="bow"][data-item-id="WPN_CARRY_BOW"] .bow-arrow,
#studentPage .avatar-item-pixel-preview-weapon[data-kind="bow"][data-item-id="WPN_CARRY_BOW"] .bow-tip {
  filter: none !important;
}
#studentPage .avatar-item-pixel-preview-weapon[data-kind="bow"][data-item-id="WPN_CARRY_BOW"] .bow-arc {
  background: #48b7ff !important;
}
#studentPage .avatar-item-pixel-preview-weapon[data-kind="bow"][data-item-id="WPN_CARRY_LONGSHOT"] .bow-arc {
  background: #2d7de0 !important;
  width: 9px !important;
}
#studentPage .avatar-item-pixel-preview-weapon[data-kind="bow"][data-item-id="WPN_CARRY_LONGSHOT"] .bow-arrow {
  left: 14px !important;
  width: 48px !important;
}
#studentPage .avatar-item-pixel-preview-weapon[data-kind="bow"][data-item-id="WPN_CARRY_LONGSHOT"] .bow-tip {
  background: #ffb46c !important;
}

/* Shield: give each style a distinct silhouette */
#studentPage .voxel-avatar-shield-v8[data-shield-style="shield-dawn"] .shield-shell {
  clip-path: polygon(50% 0, 94% 14%, 94% 58%, 50% 100%, 6% 58%, 6% 14%) !important;
  border-radius: 5px !important;
}
#studentPage .voxel-avatar-shield-v8[data-shield-style="shield-dawn"] .shield-core {
  clip-path: polygon(50% 0, 88% 15%, 88% 72%, 50% 100%, 12% 72%, 12% 15%) !important;
}
#studentPage .voxel-avatar-shield-v8[data-shield-style="shield-arcane"] .shield-shell {
  clip-path: polygon(50% 0, 92% 20%, 100% 50%, 92% 80%, 50% 100%, 8% 80%, 0 50%, 8% 20%) !important;
  border-radius: 0 !important;
}
#studentPage .voxel-avatar-shield-v8[data-shield-style="shield-arcane"] .shield-core {
  left: 11px !important;
  top: 13px !important;
  width: 22px !important;
  height: 22px !important;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%) !important;
  transform: rotate(45deg) !important;
}
#studentPage .voxel-avatar-shield-v8[data-shield-style="shield-shadow"] .shield-shell {
  clip-path: polygon(50% 0, 86% 10%, 100% 34%, 84% 58%, 90% 100%, 50% 86%, 10% 100%, 16% 58%, 0 34%, 14% 10%) !important;
}
#studentPage .voxel-avatar-shield-v8[data-shield-style="shield-shadow"] .shield-core {
  left: 12px !important;
  top: 18px !important;
  width: 20px !important;
  height: 16px !important;
  clip-path: polygon(50% 0, 100% 40%, 82% 100%, 18% 100%, 0 40%) !important;
}
#studentPage .voxel-avatar-shield-v8[data-shield-style="shield-celestial"] .shield-shell {
  clip-path: polygon(50% 0, 100% 20%, 100% 58%, 50% 100%, 0 58%, 0 20%) !important;
  border-radius: 18px 18px 22px 22px !important;
}
#studentPage .voxel-avatar-shield-v8[data-shield-style="shield-celestial"] .shield-core {
  left: 11px !important;
  top: 13px !important;
  width: 22px !important;
  height: 26px !important;
  border-radius: 12px 12px 18px 18px !important;
}
#studentPage .avatar-item-pixel-preview-shield[data-style="shield-dawn"] .shield-shell {
  clip-path: polygon(50% 0, 94% 14%, 94% 58%, 50% 100%, 6% 58%, 6% 14%) !important;
}
#studentPage .avatar-item-pixel-preview-shield[data-style="shield-arcane"] .shield-shell {
  clip-path: polygon(50% 0, 92% 20%, 100% 50%, 92% 80%, 50% 100%, 8% 80%, 0 50%, 8% 20%) !important;
}
#studentPage .avatar-item-pixel-preview-shield[data-style="shield-shadow"] .shield-shell {
  clip-path: polygon(50% 0, 86% 10%, 100% 34%, 84% 58%, 90% 100%, 50% 86%, 10% 100%, 16% 58%, 0 34%, 14% 10%) !important;
}
#studentPage .avatar-item-pixel-preview-shield[data-style="shield-celestial"] .shield-shell {
  clip-path: polygon(50% 0, 100% 20%, 100% 58%, 50% 100%, 0 58%, 0 20%) !important;
  border-radius: 14px 14px 18px 18px !important;
}

/* Fighter headband: clearly on forehead, in front of hair */
#studentPage .voxel-avatar-accessory-front-v8[data-accessory-style="fighter-headband"] {
  z-index: 58 !important;
  transform: translateZ(72px) !important;
}
#studentPage .voxel-fighter-headband-v8 {
  left: 8px !important;
  top: 9px !important;
  width: 80px !important;
  height: 18px !important;
}
#studentPage .voxel-fighter-headband-v8 .band {
  height: 10px !important;
}

/* Baseball cap: fully visible, covering hair */
#studentPage .voxel-avatar-accessory-front-v8[data-accessory-style="baseball-cap"] {
  z-index: 60 !important;
  transform: translateZ(74px) !important;
}
#studentPage .voxel-avatar-accessory-front-v8[data-accessory-style="baseball-cap"] .voxel-cap-top-v8 {
  left: 4px !important;
  top: -10px !important;
  width: 86px !important;
  height: 34px !important;
}
#studentPage .voxel-avatar-accessory-front-v8[data-accessory-style="baseball-cap"] .voxel-cap-brim-v8 {
  left: 54px !important;
  top: 15px !important;
  width: 38px !important;
  height: 11px !important;
}

/* Support flower: opposite side from weapon hand */
#studentPage .voxel-support-flower-v8 {
  left: -34px !important;
  right: auto !important;
  top: 132px !important;
  width: 54px !important;
  height: 90px !important;
  transform: rotate(-8deg) !important;
}
#studentPage .voxel-support-flower-v8 .stem {
  left: 24px !important;
}
#studentPage .voxel-support-flower-v8 .leaf-one {
  left: 4px !important;
}
#studentPage .voxel-support-flower-v8 .leaf-two {
  right: 3px !important;
}

/* Minor spacing help for wings */
#studentPage .voxel-avatar-accessory-back-v8[data-accessory-style="cloud-wings"] {
  top: 110px !important;
  width: 222px !important;
}

/* ===== PHASE C4.17 OVERRIDES ===== */
#studentPage .player-center-mini-logo{width:40px;height:40px;object-fit:contain;display:block;filter:drop-shadow(0 2px 0 rgba(255,255,255,.65)) drop-shadow(0 4px 6px rgba(43,73,143,.18));}
#studentPage .student-game-panel-icon{background:linear-gradient(180deg,#fff7ec 0%,#ffe2bf 100%)!important;color:#ff8e2b!important;border-color:#f38a2a!important;box-shadow:0 5px 0 #ffd7b8!important;}

/* ยกเลิกเมนูแบบ sticky ที่บังเนื้อหา */
.student-game-shell .student-game-header,
.student-game-shell .student-game-tabbar,
#studentPage .avatar-workspace-tabs{position:relative!important;top:auto!important;z-index:auto!important;}

/* หมวกแก๊ปและผ้าคาดไว้บนผม ทับผมด้านหน้าเล็กน้อย */
#studentPage .voxel-avatar-accessory-front-v8[data-accessory-style="fighter-headband"]{top:-42px!important;left:50%!important;transform:translateX(-50%)!important;z-index:18!important;}
#studentPage .voxel-fighter-headband-v8{width:84px!important;height:34px!important;}
#studentPage .voxel-fighter-headband-v8 .band{top:10px!important;height:10px!important;}
#studentPage .voxel-fighter-headband-v8 .knot{top:9px!important;right:10px!important;}
#studentPage .voxel-fighter-headband-v8 .tail{top:16px!important;}

#studentPage .voxel-avatar-accessory-front-v8[data-accessory-style="baseball-cap"]{top:-46px!important;left:50%!important;transform:translateX(-50%)!important;z-index:18!important;}
#studentPage .voxel-avatar-accessory-front-v8[data-accessory-style="baseball-cap"] .voxel-cap-top-v8{left:8px!important;top:-6px!important;width:76px!important;height:26px!important;border-radius:10px 10px 4px 4px!important;background:#3f6ec8!important;}
#studentPage .voxel-avatar-accessory-front-v8[data-accessory-style="baseball-cap"] .voxel-cap-brim-v8{left:48px!important;top:8px!important;width:36px!important;height:10px!important;border-radius:0 8px 8px 0!important;background:#edf4ff!important;}

/* ผ้าคลุมอยู่หลังลำตัว ระยะใกล้อวาตาร์เท่าปีก */
#studentPage .voxel-avatar-accessory-back-v8[data-accessory-style="hero-cape"]{left:50%!important;top:58px!important;transform:translateX(-50%)!important;z-index:1!important;pointer-events:none!important;}
#studentPage .voxel-avatar-accessory-back-v8[data-accessory-style="hero-cape"] .voxel-cape-v8{position:absolute!important;left:50%!important;top:0!important;transform:translateX(-50%)!important;width:82px!important;height:168px!important;}

/* ธนู 2 แบบให้สีและทรงต่างกันชัดขึ้น */
#studentPage .voxel-avatar-weapon-v8[data-weapon-kind="bow"][data-weapon-variant="skyshot"] .bow-block{background:#49b6ff!important;border-color:#dff7ff!important;}
#studentPage .voxel-avatar-weapon-v8[data-weapon-kind="bow"][data-weapon-variant="skyshot"] .b1{border-radius:12px 0 0 0!important;}
#studentPage .voxel-avatar-weapon-v8[data-weapon-kind="bow"][data-weapon-variant="skyshot"] .b4{border-radius:0 0 12px 0!important;}
#studentPage .voxel-avatar-weapon-v8[data-weapon-kind="bow"][data-weapon-variant="skyshot"] .bow-string{background:#eaf7ff!important;}
#studentPage .voxel-avatar-weapon-v8[data-weapon-kind="bow"][data-weapon-variant="skyshot"] .bow-arrow{background:#9fdcff!important;}
#studentPage .voxel-avatar-weapon-v8[data-weapon-kind="bow"][data-weapon-variant="skyshot"] .bow-arrow-head{background:#ffffff!important;}

#studentPage .voxel-avatar-weapon-v8[data-weapon-kind="bow"][data-weapon-variant="longshot"] .bow-block{background:#ff623d!important;border-color:#ffc17d!important;}
#studentPage .voxel-avatar-weapon-v8[data-weapon-kind="bow"][data-weapon-variant="longshot"] .b1{border-radius:0 14px 0 0!important;}
#studentPage .voxel-avatar-weapon-v8[data-weapon-kind="bow"][data-weapon-variant="longshot"] .b4{border-radius:0 0 14px 0!important;}
#studentPage .voxel-avatar-weapon-v8[data-weapon-kind="bow"][data-weapon-variant="longshot"] .bow-string{background:#fff1d7!important;}
#studentPage .voxel-avatar-weapon-v8[data-weapon-kind="bow"][data-weapon-variant="longshot"] .bow-arrow{background:#ffcf7b!important;}
#studentPage .voxel-avatar-weapon-v8[data-weapon-kind="bow"][data-weapon-variant="longshot"] .bow-arrow-head{background:#ff7d3b!important;}

/* ธนูในหน้าร้าน */
#studentPage .avatar-item-pixel-preview-weapon[data-kind="bow"][data-item-id="WPN_CARRY_BOW"] .bow-arc{background:#49b6ff!important;}
#studentPage .avatar-item-pixel-preview-weapon[data-kind="bow"][data-item-id="WPN_CARRY_BOW"] .bow-string{background:#eaf7ff!important;}
#studentPage .avatar-item-pixel-preview-weapon[data-kind="bow"][data-item-id="WPN_CARRY_BOW"] .bow-arrow{background:#9fdcff!important;}
#studentPage .avatar-item-pixel-preview-weapon[data-kind="bow"][data-item-id="WPN_CARRY_BOW"] .bow-tip{background:#fff!important;}
#studentPage .avatar-item-pixel-preview-weapon[data-kind="bow"][data-item-id="WPN_CARRY_LONGSHOT"] .bow-arc{background:#ff623d!important;}
#studentPage .avatar-item-pixel-preview-weapon[data-kind="bow"][data-item-id="WPN_CARRY_LONGSHOT"] .bow-string{background:#fff1d7!important;}
#studentPage .avatar-item-pixel-preview-weapon[data-kind="bow"][data-item-id="WPN_CARRY_LONGSHOT"] .bow-arrow{background:#ffcf7b!important;}
#studentPage .avatar-item-pixel-preview-weapon[data-kind="bow"][data-item-id="WPN_CARRY_LONGSHOT"] .bow-tip{background:#ff7d3b!important;}

/* รูปดอกไม้พลังใจในร้าน */
#studentPage .avatar-item-pixel-preview-accessory[data-kind="flower"]{position:relative;width:74px;height:82px;}
#studentPage .avatar-item-pixel-preview-accessory[data-kind="flower"] .flower-stem{position:absolute;left:34px;top:28px;width:6px;height:36px;background:#46b86e;border-radius:4px;}
#studentPage .avatar-item-pixel-preview-accessory[data-kind="flower"] .flower-leaf{position:absolute;top:42px;width:16px;height:10px;background:#71d68f;border-radius:10px 10px 0 10px;transform:rotate(-24deg);}
#studentPage .avatar-item-pixel-preview-accessory[data-kind="flower"] .flower-leaf.left{left:18px;}
#studentPage .avatar-item-pixel-preview-accessory[data-kind="flower"] .flower-leaf.right{left:36px;transform:scaleX(-1) rotate(-24deg);}
#studentPage .avatar-item-pixel-preview-accessory[data-kind="flower"] .flower-petal{position:absolute;width:14px;height:14px;background:#ff8db4;border-radius:4px;}
#studentPage .avatar-item-pixel-preview-accessory[data-kind="flower"] .p1{left:30px;top:6px;}
#studentPage .avatar-item-pixel-preview-accessory[data-kind="flower"] .p2{left:18px;top:18px;}
#studentPage .avatar-item-pixel-preview-accessory[data-kind="flower"] .p3{left:42px;top:18px;}
#studentPage .avatar-item-pixel-preview-accessory[data-kind="flower"] .p4{left:30px;top:30px;}
#studentPage .avatar-item-pixel-preview-accessory[data-kind="flower"] .flower-core{position:absolute;left:31px;top:19px;width:12px;height:12px;background:#ffd45f;border-radius:4px;}

/* ============================================================
   PHASE C4.18 — STYLE STRUCTURE / LOGIN / NON-STICKY TAB BAR
============================================================ */

#studentPage .student-game-header,
#studentPage .student-game-tabbar,
#studentPage .avatar-workspace-tabs,
.student-game-shell .student-game-header,
.student-game-shell .student-game-tabbar {
  position: static !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  transform: none !important;
  z-index: 2 !important;
}

#studentPage .student-game-tabbar {
  margin-top: 0 !important;
  scroll-margin-top: 0 !important;
}

#studentPage .student-game-main,
#studentPage .student-game-content,
#studentPage .student-game-body {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

#publicPage {
  position: relative;
}

.login-card {
  position: relative;
}

/*
  C4.19:
  หน้าต่าง Login ต้องลอยทับ viewport
  ห้ามวางตาม flow ของหน้า Index
*/
#loginModal.modal {
  position: fixed !important;
  inset: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;

  width: 100vw !important;
  height: 100dvh !important;
  min-height: 100vh !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  margin: 0 !important;
  padding: 20px !important;

  overflow-x: hidden !important;
  overflow-y: auto !important;

  background: rgba(15, 23, 42, .55) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;

  z-index: 5000 !important;
}

#loginModal.modal.hidden {
  display: none !important;
}

#loginModal.modal .login-card {
  flex: 0 0 auto !important;
  margin: auto !important;

  width: min(430px, calc(100vw - 36px)) !important;
  max-width: 430px !important;
  max-height: calc(100dvh - 40px) !important;

  overflow-x: hidden !important;
  overflow-y: auto !important;
}

@media (max-width: 640px) {
  #loginModal.modal {
    padding: 12px !important;
  }

  #loginModal.modal .login-card {
    width: min(430px, calc(100vw - 24px)) !important;
    max-height: calc(100dvh - 24px) !important;
  }
}

html,
body {
  max-width: 100% !important;
  overflow-x: hidden !important;
}

#studentPage .student-game-tabbar::before,
#studentPage .student-game-tabbar::after {
  position: static !important;
}



/* ============================================================
   PHASE C4.20 — HEADWEAR / ARROW / WINGS / CENTER WARNING
============================================================ */

/* ผ้าคาดนักสู้: แนบด้านหน้าผม ไม่ลอยและไม่จมในผม */
#studentPage
.voxel-avatar-accessory-front-v8[
  data-accessory-style="fighter-headband"
] {
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  transform:
    translateZ(62px) !important;
  z-index: 62 !important;
}

#studentPage
.voxel-fighter-headband-v8 {
  left: 4px !important;
  top: 1px !important;
  width: 86px !important;
  height: 30px !important;
}

#studentPage
.voxel-fighter-headband-v8
.band {
  left: 0 !important;
  top: 5px !important;
  width: 86px !important;
  height: 11px !important;
}

#studentPage
.voxel-fighter-headband-v8
.knot {
  right: -3px !important;
  top: 4px !important;
}

#studentPage
.voxel-fighter-headband-v8
.tail {
  top: 14px !important;
}

/* หมวกแก๊ป: ลดลงมาครอบและบังผมด้านหน้า */
#studentPage
.voxel-avatar-accessory-front-v8[
  data-accessory-style="baseball-cap"
] {
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  transform:
    translateZ(64px) !important;
  z-index: 64 !important;
}

#studentPage
.voxel-avatar-accessory-front-v8[
  data-accessory-style="baseball-cap"
]
.voxel-cap-top-v8 {
  left: 2px !important;
  top: -8px !important;
  width: 88px !important;
  height: 37px !important;
  border-radius:
    9px 9px 3px 3px !important;
}

#studentPage
.voxel-avatar-accessory-front-v8[
  data-accessory-style="baseball-cap"
]
.voxel-cap-brim-v8 {
  left: 53px !important;
  top: 17px !important;
  width: 40px !important;
  height: 11px !important;
}

/* ปีก: ชิดเข้าหากันและยกขึ้นระดับไหล่ */
#studentPage
.voxel-avatar-accessory-back-v8[
  data-accessory-style="cloud-wings"
],
#studentPage
.voxel-avatar-accessory-back-v8[
  data-accessory-style="devil-wings"
] {
  left: 50% !important;
  top: 76px !important;
  width: 184px !important;
  height: 108px !important;
  transform:
    translateX(-50%)
    translateZ(-27px) !important;
}

#studentPage
.voxel-avatar-accessory-back-v8[
  data-accessory-style="cloud-wings"
]
.voxel-wing-v8,
#studentPage
.voxel-avatar-accessory-back-v8[
  data-accessory-style="devil-wings"
]
.voxel-wing-v8 {
  top: 3px !important;
  width: 72px !important;
  height: 94px !important;
}

#studentPage
.voxel-avatar-accessory-back-v8[
  data-accessory-style="cloud-wings"
]
.voxel-wing-v8.wing-left,
#studentPage
.voxel-avatar-accessory-back-v8[
  data-accessory-style="devil-wings"
]
.voxel-wing-v8.wing-left {
  left: 15px !important;
}

#studentPage
.voxel-avatar-accessory-back-v8[
  data-accessory-style="cloud-wings"
]
.voxel-wing-v8.wing-right,
#studentPage
.voxel-avatar-accessory-back-v8[
  data-accessory-style="devil-wings"
]
.voxel-wing-v8.wing-right {
  right: 15px !important;
}

/* กลับด้านหัวลูกศร: ปลายแหลมหันเข้าหาคันโค้งธนู */
#studentPage
.voxel-bow-shape-v8
.bow-arrow-head {
  left: auto !important;
  right: -18px !important;
  top: 47px !important;
  clip-path:
    polygon(
      0 0,
      100% 50%,
      0 100%
    ) !important;
}

#studentPage
.voxel-bow-shape-v8
.bow-arrow::after {
  left: -8px !important;
  right: auto !important;
}

#studentPage
.avatar-item-pixel-preview-weapon[
  data-kind="bow"
]
.bow-tip {
  left: auto !important;
  right: -8px !important;
  clip-path:
    polygon(
      0 0,
      100% 50%,
      0 100%
    ) !important;
}

/* แจ้งเตือนไอเทมต่างอาชีพให้อยู่กลางจอ */
.swal2-container:has(
  .student-foreign-job-dialog
) {
  align-items:
    center !important;
  justify-content:
    center !important;
}

.student-foreign-job-dialog {
  display: flex !important;
  flex-direction:
    column !important;
  align-items:
    center !important;
  justify-content:
    center !important;
  gap: 5px !important;
  margin:
    0 auto !important;
  text-align:
    center !important;
}

.student-foreign-job-dialog strong {
  color:
    #43386a !important;
  font-size:17px !important;
  font-weight:
    900 !important;
}

.student-foreign-job-dialog p {
  margin:
    3px 0 !important;
  color:
    #665d80 !important;
  font-size:13px !important;
  font-weight:
    700 !important;
}

.student-foreign-job-dialog span {
  max-width:
    310px !important;
  color:
    #827895 !important;
  font-size:13px !important;
  line-height:
    1.5 !important;
}

/* Loader: เพิ่มแถบพลังเคลื่อนไหว */
.student-block-loader-progress {
  position:
    relative !important;
  width:
    min(270px, 82%) !important;
  height:
    12px !important;
  margin-top:
    17px !important;
  overflow:
    hidden !important;
  border:
    2px solid #d5ccf2 !important;
  border-radius:
    999px !important;
  background:
    #ece8f7 !important;
  box-shadow:
    inset 0 2px 0
    rgba(73, 61, 119, .08) !important;
}

.student-block-loader-progress span {
  position:
    absolute !important;
  top:
    1px !important;
  bottom:
    1px !important;
  left:
    -42% !important;
  width:
    42% !important;
  border-radius:
    999px !important;
  background:
    linear-gradient(
      90deg,
      #7359e8 0%,
      #5dcdf1 35%,
      #ffd268 68%,
      #59d29d 100%
    ) !important;
  box-shadow:
    0 0 10px
    rgba(104, 91, 226, .34) !important;
  animation:
    studentBlockProgressRun
    1.15s linear infinite !important;
}

@keyframes studentBlockProgressRun {
  from {
    left: -42% !important;
  }

  to {
    left: 100% !important;
  }
}



/* ============================================================
   PHASE C4.21 — EXACT CAP / HEADBAND / CAPE / ARROW FIX
============================================================ */

/* 1) หมวกแก๊ป: อยู่บนหัวและทับผมด้านหน้า */
#studentPage
.voxel-avatar-accessory-front-v8[
  data-accessory-style="baseball-cap"
] {
  position: absolute !important;
  inset: auto !important;
  left: 50% !important;
  top: -50px !important;
  width: 96px !important;
  height: 48px !important;
  transform:
    translateX(-50%)
    translateZ(150px) !important;
  transform-style:
    preserve-3d !important;
  z-index: 999 !important;
  pointer-events: none !important;
}

#studentPage
.voxel-avatar-accessory-front-v8[
  data-accessory-style="baseball-cap"
]
.voxel-cap-top-v8 {
  position: absolute !important;
  left: 3px !important;
  top: 8px !important;
  width: 90px !important;
  height: 34px !important;
  border:
    2px solid #284983 !important;
  border-radius:
    11px 11px 4px 4px !important;
  background:
    var(
      --accessory-primary,
      #3f6ec8
    ) !important;
  box-shadow:
    inset 0 -6px 0
    rgba(31, 55, 108, .20),
    0 3px 0
    rgba(37, 50, 85, .18) !important;
}

#studentPage
.voxel-avatar-accessory-front-v8[
  data-accessory-style="baseball-cap"
]
.voxel-cap-brim-v8 {
  position: absolute !important;
  left: 54px !important;
  top: 29px !important;
  width: 40px !important;
  height: 11px !important;
  border:
    2px solid #b7c7ea !important;
  border-radius:
    2px 9px 9px 2px !important;
  background:
    var(
      --accessory-secondary,
      #edf4ff
    ) !important;
}

/* 2) ผ้าคาดนักสู้: แนบด้านหน้าผม ไม่อยู่บนหน้าผาก */
#studentPage
.voxel-avatar-accessory-front-v8[
  data-accessory-style="fighter-headband"
] {
  position: absolute !important;
  inset: auto !important;
  left: 50% !important;
  top: -42px !important;
  width: 96px !important;
  height: 46px !important;
  transform:
    translateX(-50%)
    translateZ(146px) !important;
  transform-style:
    preserve-3d !important;
  z-index: 998 !important;
  pointer-events: none !important;
}

#studentPage
.voxel-fighter-headband-v8 {
  position: absolute !important;
  left: 3px !important;
  top: 13px !important;
  width: 90px !important;
  height: 28px !important;
}

#studentPage
.voxel-fighter-headband-v8
.band {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 90px !important;
  height: 11px !important;
  border:
    2px solid #9e3232 !important;
  background:
    var(
      --accessory-primary,
      #d24e4e
    ) !important;
  box-shadow:
    0 2px 0
    rgba(67, 35, 35, .18) !important;
}

#studentPage
.voxel-fighter-headband-v8
.knot {
  right: -4px !important;
  top: 0 !important;
}

#studentPage
.voxel-fighter-headband-v8
.tail {
  top: 10px !important;
}

/*
  3) ผ้าคลุม:
  ใช้ตำแหน่งและระยะหลังตัวเดียวกับกระเป๋านักผจญภัย
  ไม่กางออกเหมือนปีก และไม่ฝังอยู่ในลำตัว
*/
#studentPage
.voxel-avatar-accessory-back-v8[
  data-accessory-style="hero-cape"
] {
  position: absolute !important;
  left: 50% !important;
  top: 115px !important;
  width: 230px !important;
  height: 120px !important;
  transform:
    translateX(-50%)
    translateZ(-30px) !important;
  transform-style:
    preserve-3d !important;
  z-index: 0 !important;
  pointer-events: none !important;
  opacity: 1 !important;
}

#studentPage
.voxel-avatar-accessory-back-v8[
  data-accessory-style="hero-cape"
]
.voxel-cape-v8 {
  position: absolute !important;
  left: 82px !important;
  top: 12px !important;
  width: 64px !important;
  height: 82px !important;
  transform: none !important;
  filter:
    drop-shadow(
      3px 4px 0
      rgba(57, 24, 38, .18)
    ) !important;
}

#studentPage
.voxel-avatar-accessory-back-v8[
  data-accessory-style="hero-cape"
]
.voxel-cape-v8 i {
  position: absolute !important;
  display: block !important;
  border:
    2px solid #7d2f43 !important;
  background:
    var(
      --accessory-primary,
      #c54a67
    ) !important;
  box-shadow:
    inset -4px -4px 0
    rgba(69, 24, 37, .18) !important;
}

#studentPage
.voxel-avatar-accessory-back-v8[
  data-accessory-style="hero-cape"
]
.voxel-cape-v8 i:nth-child(1) {
  left: 0 !important;
  top: 0 !important;
  width: 64px !important;
  height: 66px !important;
}

#studentPage
.voxel-avatar-accessory-back-v8[
  data-accessory-style="hero-cape"
]
.voxel-cape-v8 i:nth-child(2) {
  left: 3px !important;
  top: 62px !important;
  width: 28px !important;
  height: 18px !important;
  clip-path:
    polygon(
      0 0,
      100% 0,
      78% 100%,
      0 78%
    ) !important;
}

#studentPage
.voxel-avatar-accessory-back-v8[
  data-accessory-style="hero-cape"
]
.voxel-cape-v8 i:nth-child(3) {
  right: 3px !important;
  top: 62px !important;
  width: 28px !important;
  height: 18px !important;
  clip-path:
    polygon(
      0 0,
      100% 0,
      100% 78%,
      22% 100%
    ) !important;
}

/*
  4) ลูกศร:
  ปลายแหลมอยู่ฝั่งคันโค้งของธนู (ด้านซ้าย)
  และยื่นเข้าไปทางคันธนู
*/
#studentPage
.voxel-avatar-weapon-v8[
  data-weapon-kind="bow"
]
.bow-arrow {
  left: 15px !important;
  right: auto !important;
  top: 54px !important;
  width: 62px !important;
  height: 5px !important;
}

#studentPage
.voxel-avatar-weapon-v8[
  data-weapon-kind="bow"
]
.bow-arrow-head {
  left: 3px !important;
  right: auto !important;
  top: 48px !important;
  width: 16px !important;
  height: 16px !important;
  clip-path:
    polygon(
      100% 0,
      0 50%,
      100% 100%
    ) !important;
}

#studentPage
.voxel-avatar-weapon-v8[
  data-weapon-kind="bow"
]
.bow-arrow::after {
  left: auto !important;
  right: -8px !important;
}

/* บังคับทั้งธนูฟ้าและธนูเพลิงให้หัวลูกศรอยู่ฝั่งคันโค้ง */
#studentPage
.voxel-avatar-weapon-v8[
  data-weapon-kind="bow"
][
  data-weapon-variant="skyshot"
]
.bow-arrow-head,
#studentPage
.voxel-avatar-weapon-v8[
  data-weapon-kind="bow"
][
  data-weapon-variant="longshot"
]
.bow-arrow-head {
  left: 3px !important;
  right: auto !important;
  clip-path:
    polygon(
      100% 0,
      0 50%,
      100% 100%
    ) !important;
}

/* ภาพธนูในการ์ดร้านค้า */
#studentPage
.avatar-item-pixel-preview-weapon[
  data-kind="bow"
]
.bow-arrow {
  left: 13px !important;
  right: auto !important;
  width: 45px !important;
}

#studentPage
.avatar-item-pixel-preview-weapon[
  data-kind="bow"
]
.bow-tip {
  left: 4px !important;
  right: auto !important;
  clip-path:
    polygon(
      100% 0,
      0 50%,
      100% 100%
    ) !important;
}



/* ============================================================
   PHASE C4.22 — HEADBAND / BOW FRONT / PLAYER CENTER ICON
============================================================ */

/* 1) ผ้าคาดนักสู้: เลื่อนลงและแนบด้านหน้าผม */
#studentPage
.voxel-avatar-accessory-front-v8[
  data-accessory-style="fighter-headband"
] {
  position: absolute !important;
  inset: auto !important;
  left: 50% !important;
  top: -31px !important;
  width: 96px !important;
  height: 46px !important;
  transform:
    translateX(-50%)
    translateZ(154px) !important;
  transform-style:
    preserve-3d !important;
  z-index: 1005 !important;
  pointer-events: none !important;
}

#studentPage
.voxel-fighter-headband-v8 {
  position: absolute !important;
  left: 3px !important;
  top: 13px !important;
  width: 90px !important;
  height: 29px !important;
}

#studentPage
.voxel-fighter-headband-v8
.band {
  left: 0 !important;
  top: 0 !important;
  width: 90px !important;
  height: 11px !important;
}

#studentPage
.voxel-fighter-headband-v8
.knot {
  right: -4px !important;
  top: 0 !important;
}

#studentPage
.voxel-fighter-headband-v8
.tail {
  top: 10px !important;
}

/* 2) ลูกศรของธนูทั้งสองแบบ: ดันมาอยู่ด้านหน้าคันธนู */
#studentPage
.voxel-avatar-weapon-v8[
  data-weapon-kind="bow"
]
.voxel-bow-shape-v8 {
  transform-style:
    preserve-3d !important;
}

#studentPage
.voxel-avatar-weapon-v8[
  data-weapon-kind="bow"
]
.bow-block {
  position: absolute !important;
  z-index: 3 !important;
  transform:
    translateZ(0) !important;
}

#studentPage
.voxel-avatar-weapon-v8[
  data-weapon-kind="bow"
]
.bow-string {
  position: absolute !important;
  z-index: 6 !important;
  transform:
    translateZ(12px) !important;
}

#studentPage
.voxel-avatar-weapon-v8[
  data-weapon-kind="bow"
]
.bow-arrow {
  position: absolute !important;
  z-index: 22 !important;
  transform:
    translateZ(42px) !important;
  box-shadow:
    inset 0 2px 0
    rgba(255,255,255,.24),
    0 2px 0
    rgba(54,35,20,.18) !important;
}

#studentPage
.voxel-avatar-weapon-v8[
  data-weapon-kind="bow"
]
.bow-arrow-head {
  position: absolute !important;
  z-index: 24 !important;
  transform:
    translateZ(46px) !important;
  filter:
    drop-shadow(
      2px 2px 0
      rgba(50,35,20,.20)
    ) !important;
}

#studentPage
.voxel-avatar-weapon-v8[
  data-weapon-kind="bow"
]
.bow-arrow::after {
  z-index: 23 !important;
  transform:
    translateZ(44px) !important;
}

/* 3) คืนไอคอนเดิมหน้า My E-Portfolio */
#studentPage
.student-game-panel-icon {
  display: grid !important;
  place-items: center !important;
  overflow: visible !important;
  color: #ff8e2b !important;
  border-color: #f38a2a !important;
  background:
    linear-gradient(
      180deg,
      #fff7ec 0%,
      #ffe2bf 100%
    ) !important;
  box-shadow:
    0 5px 0 #ffd7b8 !important;
}

#studentPage
.student-game-panel-icon > i {
  display: block !important;
  color: #ff8e2b !important;
  font-size:29px !important;
  line-height: 1 !important;
  filter:
    drop-shadow(
      0 2px 0
      rgba(255,255,255,.75)
    ) !important;
}

#studentPage
.student-game-panel-icon
.player-center-mini-logo {
  display: none !important;
}



/* ============================================================
   PHASE C4.23 — LOADER Z-INDEX / LONG CAPE / WEAPON DEPTH
============================================================ */

/* 1) Loading และ SweetAlert ต้องอยู่เหนือหน้าต่าง Login */
.swal2-container {
  z-index: 20000 !important;
}

.swal2-container
.student-block-dialog {
  position: relative !important;
  z-index: 20001 !important;
}

/*
  2) ผ้าคลุมฮีโร่:
  คงตำแหน่งกล่องเดิมไว้
  เพิ่มเฉพาะความกว้างและความยาว
*/
#studentPage
.voxel-avatar-accessory-back-v8[
  data-accessory-style="hero-cape"
] {
  /* ไม่เปลี่ยน left / top / transform */
  overflow: visible !important;
}

#studentPage
.voxel-avatar-accessory-back-v8[
  data-accessory-style="hero-cape"
]
.voxel-cape-v8 {
  left: 70px !important;
  top: 12px !important;
  width: 90px !important;
  height: 178px !important;
  overflow: visible !important;
}

#studentPage
.voxel-avatar-accessory-back-v8[
  data-accessory-style="hero-cape"
]
.voxel-cape-v8 i:nth-child(1) {
  left: 0 !important;
  top: 0 !important;
  width: 90px !important;
  height: 146px !important;
}

#studentPage
.voxel-avatar-accessory-back-v8[
  data-accessory-style="hero-cape"
]
.voxel-cape-v8 i:nth-child(2) {
  left: 0 !important;
  top: 140px !important;
  width: 44px !important;
  height: 34px !important;
}

#studentPage
.voxel-avatar-accessory-back-v8[
  data-accessory-style="hero-cape"
]
.voxel-cape-v8 i:nth-child(3) {
  right: 0 !important;
  top: 140px !important;
  width: 44px !important;
  height: 34px !important;
}

/* 3) ผ้าคาดนักสู้เลื่อนลงมาแนบด้านหน้าผม */
#studentPage
.voxel-avatar-accessory-front-v8[
  data-accessory-style="fighter-headband"
] {
  top: -18px !important;
  transform:
    translateX(-50%)
    translateZ(164px) !important;
  z-index: 1100 !important;
}

#studentPage
.voxel-fighter-headband-v8 {
  top: 13px !important;
}

#studentPage
.voxel-fighter-headband-v8
.band {
  top: 0 !important;
  height: 11px !important;
  box-shadow:
    0 2px 0
    rgba(67,35,35,.16),
    0 -2px 0
    rgba(255,255,255,.16) !important;
}

/*
  4) เพิ่มมิติให้ไอเทมตอนหมุนด้านข้าง
  ใช้ชั้นด้านหลังและเงาแบบบล็อก
*/
#studentPage
.voxel-avatar-weapon-v8,
#studentPage
.voxel-avatar-weapon-v8 > div,
#studentPage
.voxel-avatar-weapon-v8 span {
  transform-style:
    preserve-3d !important;
  backface-visibility:
    visible !important;
}

#studentPage
.voxel-avatar-weapon-v8 {
  --weapon-depth:
    7px;
  filter:
    drop-shadow(
      3px 4px 0
      rgba(27,34,50,.24)
    ) !important;
}

/* ดาบ */
#studentPage
.voxel-sword-shape-v8
.sword-pixel {
  box-shadow:
    var(--weapon-depth) 2px 0
    #7f8b98,
    inset 2px 2px 0
    rgba(255,255,255,.28) !important;
}

#studentPage
.voxel-sword-shape-v8
.sword-guard,
#studentPage
.voxel-sword-shape-v8
.sword-grip,
#studentPage
.voxel-sword-shape-v8
.sword-pommel {
  box-shadow:
    5px 2px 0
    rgba(66,48,35,.72) !important;
}

/* คทา */
#studentPage
.voxel-staff-shape-v8
.staff-pole {
  box-shadow:
    6px 2px 0
    #684525 !important;
}

#studentPage
.voxel-staff-shape-v8
.staff-head,
#studentPage
.voxel-staff-shape-v8
.staff-gem {
  box-shadow:
    6px 3px 0
    rgba(74,57,139,.62) !important;
}

/* มีดคู่ */
#studentPage
.voxel-blades-shape-v8
.blade {
  box-shadow:
    6px 3px 0
    #788493 !important;
}

#studentPage
.voxel-blades-shape-v8
.blade-grip {
  box-shadow:
    5px 2px 0
    #4f3527 !important;
}

/* กระทะ */
#studentPage
.voxel-pan-shape-v8
.pan-head {
  box-shadow:
    7px 3px 0
    #252a31,
    inset 0 0 0 2px
    rgba(255,255,255,.08) !important;
}

#studentPage
.voxel-pan-shape-v8
.pan-handle {
  box-shadow:
    5px 2px 0
    #2d3036 !important;
}

/* ตะหลิว */
#studentPage
.voxel-spatula-shape-v8
.spatula-head {
  box-shadow:
    7px 3px 0
    #66727f !important;
}

#studentPage
.voxel-spatula-shape-v8
.spatula-handle {
  box-shadow:
    5px 2px 0
    #59401f !important;
}

/* ธนูและลูกศร */
#studentPage
.voxel-bow-shape-v8
.bow-block {
  box-shadow:
    6px 3px 0
    #15558e,
    inset 2px 0 0
    rgba(255,255,255,.28) !important;
}

#studentPage
.voxel-bow-shape-v8
.bow-arrow {
  box-shadow:
    5px 2px 0
    #6e4323,
    inset 0 2px 0
    rgba(255,255,255,.20) !important;
}

#studentPage
.voxel-bow-shape-v8
.bow-arrow-head {
  filter:
    drop-shadow(
      5px 3px 0
      rgba(22,58,94,.62)
    ) !important;
}

/*
  มุมข้าง:
  เพิ่มระยะอาวุธออกจากลำตัวเล็กน้อย
  เพื่อให้เห็นขอบและความหนาชัดขึ้น
*/
#studentPage
.voxel-avatar-rig-v8 {
  perspective:
    900px !important;
}

#studentPage
.voxel-avatar-weapon-v8 {
  translate:
    5px 0 !important;
}



/* ============================================================
   PHASE C4.24 — PSEUDO 3D WEAPONS + HEADBAND FRONT LAYER
============================================================ */

/* Dedicated headwear plane, outside the face's overflow clipping */
#studentPage
.voxel-avatar-headwear-front-v8 {
  position: absolute !important;
  left: 71px !important;
  top: 4px !important;
  width: 98px !important;
  height: 64px !important;
  z-index: 130 !important;
  transform:
    translateZ(58px) !important;
  transform-style:
    preserve-3d !important;
  pointer-events:
    none !important;
  overflow:
    visible !important;
}

#studentPage
.voxel-avatar-headwear-front-v8
> * {
  transform-style:
    preserve-3d !important;
}

/* Fighter headband: across the front surface of the hair */
#studentPage
.voxel-avatar-headwear-front-v8[
  data-accessory-style="fighter-headband"
] {
  z-index: 155 !important;
  transform:
    translateZ(60px) !important;
}

#studentPage
.voxel-avatar-headwear-front-v8[
  data-accessory-style="fighter-headband"
]
.voxel-fighter-headband-v8 {
  position:
    absolute !important;
  left:
    0 !important;
  top:
    17px !important;
  width:
    98px !important;
  height:
    35px !important;
}

#studentPage
.voxel-avatar-headwear-front-v8[
  data-accessory-style="fighter-headband"
]
.voxel-fighter-headband-v8
.band {
  position:
    absolute !important;
  left:
    0 !important;
  top:
    0 !important;
  width:
    98px !important;
  height:
    11px !important;
  border:
    2px solid #962f37 !important;
  background:
    var(
      --accessory-primary,
      #d6535e
    ) !important;
  box-shadow:
    inset 0 3px 0
    rgba(255,255,255,.16),
    0 2px 0
    rgba(75,34,39,.18) !important;
  transform:
    translateZ(8px) !important;
}

#studentPage
.voxel-avatar-headwear-front-v8[
  data-accessory-style="fighter-headband"
]
.voxel-fighter-headband-v8
.band::after {
  content:
    "" !important;
  position:
    absolute !important;
  right:
    -7px !important;
  top:
    1px !important;
  width:
    7px !important;
  height:
    11px !important;
  border-radius:
    0 3px 3px 0 !important;
  background:
    #872b32 !important;
  transform-origin:
    left center !important;
  transform:
    rotateY(90deg) !important;
}

#studentPage
.voxel-avatar-headwear-front-v8[
  data-accessory-style="fighter-headband"
]
.voxel-fighter-headband-v8
.knot {
  right:
    -5px !important;
  top:
    -1px !important;
  transform:
    translateZ(9px) !important;
}

#studentPage
.voxel-avatar-headwear-front-v8[
  data-accessory-style="fighter-headband"
]
.voxel-fighter-headband-v8
.tail {
  top:
    9px !important;
  transform:
    translateZ(8px) !important;
}

/* Cap also uses the new front plane and sits on top of hair */
#studentPage
.voxel-avatar-headwear-front-v8[
  data-accessory-style="baseball-cap"
] {
  z-index:
    160 !important;
  transform:
    translateZ(61px) !important;
}

#studentPage
.voxel-avatar-headwear-front-v8[
  data-accessory-style="baseball-cap"
]
.voxel-cap-top-v8 {
  position:
    absolute !important;
  left:
    1px !important;
  top:
    -8px !important;
  width:
    96px !important;
  height:
    40px !important;
  border:
    2px solid #284983 !important;
  border-radius:
    10px 10px 3px 3px !important;
  background:
    var(
      --accessory-primary,
      #3f6ec8
    ) !important;
  box-shadow:
    inset 0 -6px 0
    rgba(31,55,108,.20) !important;
  transform:
    translateZ(8px) !important;
}

#studentPage
.voxel-avatar-headwear-front-v8[
  data-accessory-style="baseball-cap"
]
.voxel-cap-top-v8::after {
  content:
    "" !important;
  position:
    absolute !important;
  right:
    -8px !important;
  top:
    1px !important;
  width:
    8px !important;
  height:
    38px !important;
  background:
    #294f9a !important;
  transform-origin:
    left center !important;
  transform:
    rotateY(90deg) !important;
}

#studentPage
.voxel-avatar-headwear-front-v8[
  data-accessory-style="baseball-cap"
]
.voxel-cap-brim-v8 {
  position:
    absolute !important;
  left:
    53px !important;
  top:
    22px !important;
  width:
    42px !important;
  height:
    11px !important;
  border:
    2px solid #b7c7ea !important;
  border-radius:
    2px 9px 9px 2px !important;
  background:
    var(
      --accessory-secondary,
      #edf4ff
    ) !important;
  transform:
    translateZ(11px) !important;
}

/* Crown and wizard hat remain visible after moving to headwear plane */
#studentPage
.voxel-avatar-headwear-front-v8[
  data-accessory-style="gold-crown"
],
#studentPage
.voxel-avatar-headwear-front-v8[
  data-accessory-style="wizard-hat"
] {
  transform:
    translateZ(60px) !important;
  overflow:
    visible !important;
}

/* ---------- Pseudo-3D weapon solids ---------- */
#studentPage
.voxel-avatar-weapon-v8 {
  --weapon-depth:
    10px;
  --weapon-side:
    #626c78;
  --weapon-back:
    #8d98a5;
  transform-style:
    preserve-3d !important;
  backface-visibility:
    visible !important;
}

#studentPage
.voxel-avatar-weapon-v8
.weapon-solid {
  position:
    absolute !important;
  transform-style:
    preserve-3d !important;
  backface-visibility:
    visible !important;
}

/* Back surface */
#studentPage
.voxel-avatar-weapon-v8
.weapon-solid::before {
  content:
    "" !important;
  position:
    absolute !important;
  inset:
    0 !important;
  width:
    100% !important;
  height:
    100% !important;
  box-sizing:
    border-box !important;
  border:
    inherit !important;
  border-radius:
    inherit !important;
  clip-path:
    inherit !important;
  background:
    var(
      --weapon-back,
      #8d98a5
    ) !important;
  transform:
    translateZ(
      calc(
        var(--weapon-depth) * -1
      )
    ) !important;
  pointer-events:
    none !important;
}

/* Right side thickness */
#studentPage
.voxel-avatar-weapon-v8
.weapon-solid::after {
  content:
    "" !important;
  position:
    absolute !important;
  left:
    100% !important;
  top:
    0 !important;
  width:
    var(--weapon-depth) !important;
  height:
    100% !important;
  box-sizing:
    border-box !important;
  border:
    1px solid
    rgba(31,31,42,.25) !important;
  border-radius:
    0 2px 2px 0 !important;
  background:
    var(
      --weapon-side,
      #626c78
    ) !important;
  transform-origin:
    left center !important;
  transform:
    rotateY(90deg) !important;
  pointer-events:
    none !important;
}

/* Component-specific side colours */
#studentPage
.voxel-sword-shape-v8
.sword-pixel {
  --weapon-side:
    #6f7b89;
  --weapon-back:
    #9ba6b2;
}

#studentPage
.voxel-sword-shape-v8
.sword-guard,
#studentPage
.voxel-sword-shape-v8
.sword-pommel {
  --weapon-side:
    #367e96;
  --weapon-back:
    var(
      --weapon-secondary
    );
}

#studentPage
.voxel-sword-shape-v8
.sword-grip,
#studentPage
.voxel-staff-shape-v8
.staff-pole,
#studentPage
.voxel-blades-shape-v8
.blade-grip,
#studentPage
.voxel-pan-shape-v8
.pan-handle,
#studentPage
.voxel-spatula-shape-v8
.spatula-handle {
  --weapon-side:
    #4d321f;
  --weapon-back:
    #6b472b;
}

#studentPage
.voxel-staff-shape-v8
.staff-head,
#studentPage
.voxel-staff-shape-v8
.staff-gem {
  --weapon-side:
    #4e5394;
  --weapon-back:
    #8d91d6;
}

#studentPage
.voxel-blades-shape-v8
.blade {
  --weapon-side:
    #697483;
  --weapon-back:
    #9ca6b2;
}

#studentPage
.voxel-pan-shape-v8
.pan-head,
#studentPage
.voxel-pan-shape-v8
.pan-core {
  --weapon-depth:
    13px;
  --weapon-side:
    #292e35;
  --weapon-back:
    #414851;
}

#studentPage
.voxel-spatula-shape-v8
.spatula-head {
  --weapon-depth:
    9px;
  --weapon-side:
    #5b6672;
  --weapon-back:
    #8995a1;
}

#studentPage
.voxel-bow-shape-v8
.bow-block {
  --weapon-depth:
    8px;
  --weapon-side:
    #174d7c;
  --weapon-back:
    #3b8fd1;
}

#studentPage
.voxel-bow-shape-v8
.bow-arrow {
  --weapon-depth:
    5px;
  --weapon-side:
    #4b2f1b;
  --weapon-back:
    #835a35;
}

#studentPage
.voxel-bow-shape-v8
.bow-arrow-head {
  --weapon-depth:
    7px;
  --weapon-side:
    #194b7a;
  --weapon-back:
    var(
      --weapon-secondary
    );
}

/* Circular pan surfaces use a rounded side strip */
#studentPage
.voxel-avatar-weapon-v8
.weapon-round-solid::after {
  border-radius:
    50% !important;
}

/* View-state tuning */
#studentPage
#avatarPixelRig[
  data-avatar-view="right"
]
.voxel-avatar-weapon-v8,
#studentPage
#avatarPixelRig[
  data-avatar-view="left"
]
.voxel-avatar-weapon-v8 {
  --weapon-depth:
    14px;
  translate:
    12px 0 24px !important;
  filter:
    drop-shadow(
      5px 5px 0
      rgba(27,34,50,.25)
    ) !important;
}

#studentPage
#avatarPixelRig[
  data-avatar-view="front-right"
]
.voxel-avatar-weapon-v8,
#studentPage
#avatarPixelRig[
  data-avatar-view="front-left"
]
.voxel-avatar-weapon-v8,
#studentPage
#avatarPixelRig[
  data-avatar-view="back-right"
]
.voxel-avatar-weapon-v8,
#studentPage
#avatarPixelRig[
  data-avatar-view="back-left"
]
.voxel-avatar-weapon-v8 {
  --weapon-depth:
    12px;
  translate:
    8px 0 14px !important;
}

#studentPage
#avatarPixelRig[
  data-avatar-view="back"
]
.voxel-avatar-weapon-v8 {
  --weapon-depth:
    11px;
  translate:
    3px 0 -8px !important;
}

/* Keep transitions light; no extra server or image loading */
#studentPage
.voxel-avatar-weapon-v8,
#studentPage
.voxel-avatar-weapon-v8
.weapon-solid::before,
#studentPage
.voxel-avatar-weapon-v8
.weapon-solid::after {
  transition:
    transform .18s linear,
    opacity .18s linear !important;
}



/* ============================================================
   PHASE C4.25 — VIEW-SWITCHED PSEUDO-3D WEAPONS
============================================================ */

/*
  C4.24 ใช้เงาและ pseudo-element บนแผ่นเดิม
  เมื่อหมุน 90 องศาจึงยังยุบเป็นเส้น

  C4.25 ใช้โมเดลภาพด้านหน้า / ด้านข้าง / ด้านหลัง
  และสลับโมเดลตามมุมหมุนจริง
*/

/* ผ้าคาดนักสู้เลื่อนลงให้แนบกับผมด้านหน้า */
#studentPage
.voxel-avatar-headwear-front-v8[
  data-accessory-style="fighter-headband"
]
.voxel-fighter-headband-v8 {
  top: 24px !important;
}

#studentPage
.voxel-avatar-headwear-front-v8[
  data-accessory-style="fighter-headband"
]
.voxel-fighter-headband-v8
.band {
  transform:
    translateZ(12px) !important;
}

/* Weapon view system */
#studentPage
.voxel-avatar-weapon-v8
.voxel-weapon-model-v9 {
  position:
    absolute !important;
  inset:
    0 !important;
  width:
    100% !important;
  height:
    100% !important;
  transform-style:
    preserve-3d !important;
  pointer-events:
    none !important;
}

#studentPage
.voxel-avatar-weapon-v8
.voxel-weapon-view-v9 {
  position:
    absolute !important;
  inset:
    0 !important;
  width:
    100% !important;
  height:
    100% !important;
  opacity:
    0 !important;
  visibility:
    hidden !important;
  transform-origin:
    68% 58% !important;
  transform:
    rotateY(
      var(
        --weapon-counter-rotation-y,
        0deg
      )
    )
    translateZ(34px) !important;
  transform-style:
    preserve-3d !important;
  backface-visibility:
    visible !important;
  transition:
    opacity .16s linear,
    transform .16s linear !important;
}

/* Disable ineffective flat pseudo-depth from C4.24 inside the new model */
#studentPage
.voxel-weapon-model-v9
.weapon-solid::before,
#studentPage
.voxel-weapon-model-v9
.weapon-solid::after {
  display:
    none !important;
}

/* Front */
#studentPage
.voxel-avatar-weapon-v8[
  data-avatar-view="front"
]
.weapon-view-front,
#studentPage
.voxel-avatar-weapon-v8[
  data-avatar-view="front-left"
]
.weapon-view-front,
#studentPage
.voxel-avatar-weapon-v8[
  data-avatar-view="front-right"
]
.weapon-view-front {
  opacity:
    1 !important;
  visibility:
    visible !important;
}

/* Exact side: use a dedicated side silhouette */
#studentPage
.voxel-avatar-weapon-v8[
  data-avatar-view="left"
]
.weapon-view-side,
#studentPage
.voxel-avatar-weapon-v8[
  data-avatar-view="right"
]
.weapon-view-side {
  opacity:
    1 !important;
  visibility:
    visible !important;
  transform:
    rotateY(
      var(
        --weapon-counter-rotation-y,
        0deg
      )
    )
    translateZ(48px)
    scale(1.08) !important;
}

/* Back */
#studentPage
.voxel-avatar-weapon-v8[
  data-avatar-view="back"
]
.weapon-view-back,
#studentPage
.voxel-avatar-weapon-v8[
  data-avatar-view="back-left"
]
.weapon-view-back,
#studentPage
.voxel-avatar-weapon-v8[
  data-avatar-view="back-right"
]
.weapon-view-back {
  opacity:
    1 !important;
  visibility:
    visible !important;
}

#studentPage
.voxel-avatar-weapon-v8
.weapon-back-tone-v9 {
  width:
    100% !important;
  height:
    100% !important;
  filter:
    brightness(.68)
    saturate(.78) !important;
  transform:
    scaleX(-1) !important;
  transform-origin:
    center center !important;
}

/* Diagonal angles show a small side edge too */
#studentPage
.voxel-avatar-weapon-v8[
  data-avatar-view="front-left"
]
.weapon-view-side,
#studentPage
.voxel-avatar-weapon-v8[
  data-avatar-view="front-right"
]
.weapon-view-side,
#studentPage
.voxel-avatar-weapon-v8[
  data-avatar-view="back-left"
]
.weapon-view-side,
#studentPage
.voxel-avatar-weapon-v8[
  data-avatar-view="back-right"
]
.weapon-view-side {
  opacity:
    .42 !important;
  visibility:
    visible !important;
  transform:
    rotateY(
      var(
        --weapon-counter-rotation-y,
        0deg
      )
    )
    translateX(8px)
    translateZ(20px)
    scaleX(.68) !important;
}

/* Mirror the side model when turning right */
#studentPage
.voxel-avatar-weapon-v8[
  data-avatar-view="right"
]
.weapon-view-side,
#studentPage
.voxel-avatar-weapon-v8[
  data-avatar-view="front-right"
]
.weapon-view-side,
#studentPage
.voxel-avatar-weapon-v8[
  data-avatar-view="back-right"
]
.weapon-view-side {
  transform:
    rotateY(
      var(
        --weapon-counter-rotation-y,
        0deg
      )
    )
    translateZ(48px)
    scaleX(-1.08) !important;
}

#studentPage
.voxel-avatar-weapon-v8[
  data-avatar-view="front-right"
]
.weapon-view-side,
#studentPage
.voxel-avatar-weapon-v8[
  data-avatar-view="back-right"
]
.weapon-view-side {
  transform:
    rotateY(
      var(
        --weapon-counter-rotation-y,
        0deg
      )
    )
    translateX(-8px)
    translateZ(20px)
    scaleX(-.68) !important;
}

/* Common side model */
#studentPage
.weapon-side-model-v9 {
  position:
    absolute !important;
  left:
    8px !important;
  top:
    0 !important;
  width:
    86px !important;
  height:
    116px !important;
  filter:
    drop-shadow(
      4px 5px 0
      rgba(28,34,48,.28)
    ) !important;
}

#studentPage
.weapon-side-model-v9
span {
  position:
    absolute !important;
  display:
    block !important;
  box-sizing:
    border-box !important;
}

/* Sword side */
#studentPage
.side-sword-v9
.side-blade-v9 {
  left:
    38px !important;
  top:
    1px !important;
  width:
    13px !important;
  height:
    76px !important;
  border:
    2px solid #697685 !important;
  border-radius:
    2px 2px 0 0 !important;
  background:
    linear-gradient(
      90deg,
      #7f8b98 0 24%,
      var(
        --weapon-primary,
        #d8d8d8
      ) 25% 76%,
      #ffffff 77% 100%
    ) !important;
  clip-path:
    polygon(
      50% 0,
      100% 10%,
      100% 100%,
      0 100%,
      0 10%
    ) !important;
  transform:
    rotate(37deg) !important;
  transform-origin:
    center bottom !important;
}

#studentPage
.side-sword-v9
.side-guard-v9 {
  left:
    23px !important;
  top:
    73px !important;
  width:
    43px !important;
  height:
    10px !important;
  border:
    2px solid #28647d !important;
  background:
    var(
      --weapon-secondary,
      #62cfe7
    ) !important;
  transform:
    rotate(37deg) !important;
}

#studentPage
.side-sword-v9
.side-grip-v9 {
  left:
    39px !important;
  top:
    79px !important;
  width:
    11px !important;
  height:
    27px !important;
  border:
    2px solid #50331f !important;
  background:
    #765034 !important;
  transform:
    rotate(37deg) !important;
}

#studentPage
.side-sword-v9
.side-pommel-v9 {
  left:
    39px !important;
  top:
    102px !important;
  width:
    13px !important;
  height:
    12px !important;
  border:
    2px solid #28647d !important;
  background:
    var(
      --weapon-secondary,
      #62cfe7
    ) !important;
  transform:
    rotate(37deg) !important;
}

/* Staff side */
#studentPage
.side-staff-v9
.side-staff-pole-v9 {
  left:
    41px !important;
  top:
    28px !important;
  width:
    11px !important;
  height:
    87px !important;
  border:
    2px solid #50331f !important;
  border-radius:
    4px !important;
  background:
    linear-gradient(
      90deg,
      #4b301d,
      #93643b,
      #d09658
    ) !important;
  transform:
    rotate(8deg) !important;
}

#studentPage
.side-staff-v9
.side-staff-head-v9 {
  left:
    26px !important;
  top:
    2px !important;
  width:
    42px !important;
  height:
    34px !important;
  border:
    3px solid #4e5394 !important;
  border-radius:
    8px !important;
  background:
    var(
      --weapon-secondary,
      #8d91d6
    ) !important;
  clip-path:
    polygon(
      50% 0,
      100% 28%,
      84% 100%,
      16% 100%,
      0 28%
    ) !important;
}

#studentPage
.side-staff-v9
.side-staff-gem-v9 {
  left:
    37px !important;
  top:
    10px !important;
  width:
    20px !important;
  height:
    20px !important;
  border:
    2px solid #ffffff !important;
  transform:
    rotate(45deg) !important;
  background:
    var(
      --weapon-primary,
      #7bdff2
    ) !important;
}

/* Twin blades side */
#studentPage
.side-blades-v9
.side-dagger-v9 {
  width:
    12px !important;
  height:
    58px !important;
  border:
    2px solid #697483 !important;
  background:
    linear-gradient(
      90deg,
      #718090,
      var(
        --weapon-primary,
        #d8d8d8
      ),
      #ffffff
    ) !important;
  clip-path:
    polygon(
      50% 0,
      100% 12%,
      100% 100%,
      0 100%,
      0 12%
    ) !important;
}

#studentPage
.side-blades-v9
.dagger-one {
  left:
    27px !important;
  top:
    8px !important;
  transform:
    rotate(25deg) !important;
}

#studentPage
.side-blades-v9
.dagger-two {
  left:
    52px !important;
  top:
    12px !important;
  transform:
    rotate(-22deg) !important;
}

#studentPage
.side-blades-v9
.side-dagger-grip-v9 {
  width:
    11px !important;
  height:
    30px !important;
  border:
    2px solid #4f3527 !important;
  background:
    #6d4932 !important;
}

#studentPage
.side-blades-v9
.side-dagger-grip-v9.grip-one {
  left:
    44px !important;
  top:
    61px !important;
  transform:
    rotate(25deg) !important;
}

#studentPage
.side-blades-v9
.side-dagger-grip-v9.grip-two {
  left:
    38px !important;
  top:
    63px !important;
  transform:
    rotate(-22deg) !important;
}

/* Pan side */
#studentPage
.side-pan-v9
.side-pan-edge-v9 {
  left:
    10px !important;
  top:
    14px !important;
  width:
    54px !important;
  height:
    18px !important;
  border:
    4px solid #252a31 !important;
  border-radius:
    50% !important;
  background:
    linear-gradient(
      180deg,
      #69727d,
      #343a42
    ) !important;
}

#studentPage
.side-pan-v9
.side-pan-inner-v9 {
  left:
    18px !important;
  top:
    19px !important;
  width:
    38px !important;
  height:
    8px !important;
  border-radius:
    50% !important;
  background:
    #20252b !important;
}

#studentPage
.side-pan-v9
.side-pan-handle-v9 {
  left:
    58px !important;
  top:
    22px !important;
  width:
    12px !important;
  height:
    68px !important;
  border:
    3px solid #2d3036 !important;
  border-radius:
    5px !important;
  background:
    linear-gradient(
      90deg,
      #2d3036,
      #555b63,
      #2d3036
    ) !important;
  transform:
    rotate(-33deg) !important;
  transform-origin:
    top center !important;
}

/* Spatula side */
#studentPage
.side-spatula-v9
.side-spatula-edge-v9 {
  left:
    34px !important;
  top:
    5px !important;
  width:
    16px !important;
  height:
    37px !important;
  border:
    3px solid #5b6672 !important;
  border-radius:
    3px !important;
  background:
    linear-gradient(
      90deg,
      #66727f,
      var(
        --weapon-primary,
        #d8d8d8
      ),
      #ffffff
    ) !important;
}

#studentPage
.side-spatula-v9
.side-spatula-handle-v9 {
  left:
    38px !important;
  top:
    39px !important;
  width:
    10px !important;
  height:
    70px !important;
  border:
    2px solid #4d321f !important;
  border-radius:
    4px !important;
  background:
    linear-gradient(
      90deg,
      #4d321f,
      #8a5f34,
      #b07c45
    ) !important;
}

/* Bow side */
#studentPage
.side-bow-v9
.side-bow-upper-v9,
#studentPage
.side-bow-v9
.side-bow-middle-v9,
#studentPage
.side-bow-v9
.side-bow-lower-v9 {
  width:
    14px !important;
  border:
    3px solid #15558e !important;
  background:
    var(
      --weapon-primary,
      #278bd6
    ) !important;
}

#studentPage
.side-bow-v9
.side-bow-upper-v9 {
  left:
    45px !important;
  top:
    2px !important;
  height:
    40px !important;
  transform:
    rotate(19deg) !important;
}

#studentPage
.side-bow-v9
.side-bow-middle-v9 {
  left:
    35px !important;
  top:
    38px !important;
  height:
    40px !important;
  transform:
    rotate(1deg) !important;
}

#studentPage
.side-bow-v9
.side-bow-lower-v9 {
  left:
    43px !important;
  top:
    74px !important;
  height:
    40px !important;
  transform:
    rotate(-19deg) !important;
}

#studentPage
.side-bow-v9
.side-bow-string-v9 {
  left:
    62px !important;
  top:
    11px !important;
  width:
    3px !important;
  height:
    94px !important;
  background:
    #fff1d7 !important;
  box-shadow:
    0 0 0 1px
    rgba(69,53,38,.35) !important;
}

#studentPage
.side-bow-v9
.side-bow-arrow-v9 {
  left:
    18px !important;
  top:
    55px !important;
  width:
    60px !important;
  height:
    7px !important;
  border:
    2px solid #5b3218 !important;
  background:
    #b66b2e !important;
}

#studentPage
.side-bow-v9
.side-bow-tip-v9 {
  left:
    7px !important;
  top:
    49px !important;
  width:
    17px !important;
  height:
    17px !important;
  border:
    2px solid #12487d !important;
  background:
    var(
      --weapon-secondary,
      #236fba
    ) !important;
  clip-path:
    polygon(
      100% 0,
      0 50%,
      100% 100%
    ) !important;
}

/* Small fist side */
#studentPage
.side-fist-v9
span {
  left:
    32px !important;
  top:
    35px !important;
  width:
    28px !important;
  height:
    28px !important;
  border:
    2px solid rgba(87,52,39,.25) !important;
  background:
    var(
      --avatar-skin,
      #dfaa83
    ) !important;
}

/* Keep the view model light and smooth */
#studentPage
.voxel-weapon-model-v9,
#studentPage
.voxel-weapon-model-v9
* {
  will-change:
    transform,
    opacity !important;
}



/* ============================================================
   TEACHER CURRENT SCORE — SAFE HOTFIX T1.1
============================================================ */
#teacherCurrentScores {
  padding-bottom: 36px;
}

.teacher-current-score-panel {
  border-radius: 20px;
}

.teacher-current-score-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.teacher-current-score-filter-grid {
  display: grid;
  grid-template-columns: minmax(160px, .8fr) minmax(240px, 1.4fr) minmax(190px, 1fr);
  gap: 12px;
  margin-bottom: 12px;
}

.teacher-current-score-filter-grid label {
  display: block;
  margin-bottom: 6px;
  font-weight: 700;
}

.teacher-current-score-updated {
  margin: 8px 0 12px;
}

.teacher-current-score-table-wrap {
  overflow-x: auto;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
}

.teacher-current-score-table {
  width: 100%;
  min-width: 900px;
  border-collapse: collapse;
  background: #fff;
}

.teacher-current-score-table th,
.teacher-current-score-table td {
  padding: 11px 10px;
  border-bottom: 1px solid #edf1f5;
  text-align: center;
  vertical-align: middle;
}

.teacher-current-score-table th {
  background: #edf4fb;
  color: #28445f;
  font-weight: 800;
}

.teacher-current-score-table .text-left {
  text-align: left;
}

.teacher-current-score-name {
  padding: 0;
  border: 0;
  background: transparent;
  color: #1764a7;
  font-family: inherit;
  font-weight: 800;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.teacher-current-score-total {
  display: inline-flex;
  min-width: 58px;
  justify-content: center;
  padding: 6px 10px;
  border-radius: 10px;
  font-weight: 850;
}

.teacher-current-score-total.is-positive {
  background: #e6f8ee;
  color: #147548;
}

.teacher-current-score-total.is-negative {
  background: #feecef;
  color: #bd3342;
}

.teacher-current-score-total.is-zero {
  background: #eef2f6;
  color: #64748b;
}

.teacher-current-score-table .score-plus {
  color: #168052;
  font-weight: 800;
}

.teacher-current-score-table .score-minus {
  color: #c03c49;
  font-weight: 800;
}

.teacher-current-score-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 14px;
}

.teacher-current-score-pagination > span {
  min-width: 190px;
  color: #52677c;
  text-align: center;
  font-size:13px;
  font-weight: 700;
}

.teacher-score-history-meta {
  margin-bottom: 12px;
  color: #64748b;
  text-align: center;
}

.teacher-score-history-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.teacher-score-history-summary span {
  padding: 10px;
  border: 1px solid #e1e7ee;
  border-radius: 10px;
  background: #f8fafc;
  text-align: center;
}

.teacher-score-history-summary strong {
  display: block;
  margin-top: 4px;
  font-size:20px;
}

.teacher-score-history-wrap {
  max-height: 420px;
  overflow: auto;
  border: 1px solid #dfe7ef;
  border-radius: 12px;
}

.teacher-score-history-wrap table {
  width: 100%;
  min-width: 700px;
  border-collapse: collapse;
}

.teacher-score-history-wrap th,
.teacher-score-history-wrap td {
  padding: 10px;
  border-bottom: 1px solid #edf1f5;
  text-align: left;
}

.teacher-score-history-wrap th {
  position: sticky;
  top: 0;
  background: #edf4fb;
  z-index: 1;
}

@media (max-width: 760px) {
  .teacher-current-score-head {
    flex-direction: column;
  }

  .teacher-current-score-filter-grid,
  .teacher-score-history-summary {
    grid-template-columns: 1fr;
  }

  .teacher-current-score-pagination {
    flex-wrap: wrap;
  }
}



/* ============================================================
   TEACHER CURRENT SCORE — RESPONSIVE THEME T1.2
============================================================ */
#teacherCurrentScores .teacher-current-score-panel {
  position: relative;
  overflow: hidden;
  padding: 22px;
  border: 1px solid #dbe6f4;
  border-radius: 22px;
  background:
    radial-gradient(circle at 0 0, rgba(107, 92, 231, .10), transparent 30%),
    radial-gradient(circle at 100% 0, rgba(34, 197, 94, .09), transparent 28%),
    #f8fbff;
  box-shadow: 0 12px 30px rgba(48, 72, 108, .09);
}

#teacherCurrentScores .teacher-current-score-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 6px;
  background: linear-gradient(90deg, #5b55d9, #268bd2, #35bfa4, #f1b94b, #ef6f8e);
}

.teacher-current-score-action-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 4px 0 16px;
}

.teacher-current-score-updated {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  margin: 0;
  padding: 8px 12px;
  border: 1px solid #d8e4f2;
  border-radius: 12px;
  background: rgba(255, 255, 255, .86);
  color: #49627c;
  font-size:13px;
  font-weight: 700;
}

.teacher-current-score-updated i {
  color: #5b55d9;
}

.teacher-current-score-refresh {
  flex: 0 0 auto;
  border-color: #cfdaf0 !important;
  background: #eef4ff !important;
  color: #2457a6 !important;
}

.teacher-current-score-filter-grid {
  grid-template-columns: minmax(160px, .82fr) minmax(260px, 1.5fr) minmax(190px, 1fr);
  gap: 14px;
  margin-bottom: 16px;
}

.teacher-current-score-filter-grid > div {
  padding: 12px;
  border: 1px solid #dce7f3;
  border-radius: 14px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 5px 14px rgba(70, 91, 123, .06);
}

.teacher-current-score-filter-grid label {
  margin-bottom: 7px;
  color: #29445f;
  font-size:13px;
}

.teacher-current-score-filter-grid .input {
  min-height: 44px;
  border-color: #cfdaea;
  background: #fff;
}

.teacher-current-score-filter-grid .input:focus {
  border-color: #5d68dc;
  box-shadow: 0 0 0 3px rgba(93, 104, 220, .12);
}

.teacher-current-score-table-wrap {
  border: 1px solid #d7e3ef;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 7px 20px rgba(44, 66, 98, .07);
}

.teacher-current-score-table {
  min-width: 930px;
}

.teacher-current-score-table th {
  padding: 13px 10px;
  background: linear-gradient(135deg, #285fa9, #5a55c9);
  color: #fff;
  border-bottom: 0;
  white-space: nowrap;
}

.teacher-current-score-table tbody tr:nth-child(even) {
  background: #f8fbff;
}

.teacher-current-score-table tbody tr:hover {
  background: #eef5ff;
}

.teacher-current-score-table td {
  color: #2c4055;
}

.teacher-current-score-name {
  color: #165e9e;
  text-decoration-color: rgba(22, 94, 158, .35);
}

.teacher-current-score-name:hover {
  color: #4e46bd;
}

.teacher-current-score-history-btn {
  white-space: nowrap;
}

.teacher-current-score-total {
  min-width: 68px;
  padding: 7px 12px;
  border: 1px solid transparent;
  border-radius: 999px;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .04);
}

.teacher-current-score-total.is-positive {
  border-color: #bdebd2;
  background: #e7f9ef;
}

.teacher-current-score-total.is-negative {
  border-color: #f6c4cd;
  background: #fff0f3;
}

.teacher-current-score-total.is-zero {
  border-color: #d9e1ea;
  background: #f1f4f8;
}

.teacher-current-score-pagination {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px dashed #d3dfeb;
}

/* Wider themed score-history dialog */
.swal2-popup.teacher-score-history-dialog {
  width: min(1120px, calc(100vw - 40px)) !important;
  max-width: none !important;
  max-height: calc(100vh - 28px) !important;
  padding: 30px 30px 24px !important;
  border-radius: 24px !important;
  outline-color: #6b5be3 !important;
  background:
    radial-gradient(circle at 0 0, rgba(100, 90, 225, .09), transparent 28%),
    #fbfcff !important;
}

.swal2-title.teacher-score-history-title {
  padding: 12px 16px 0 !important;
  color: #31304f !important;
  font-size:clamp(22px, 2.4vw, 30px) !important;
  line-height: 1.25 !important;
}

.swal2-html-container.teacher-score-history-content {
  width: 100% !important;
  margin: 14px 0 0 !important;
  padding: 0 2px !important;
  overflow: visible !important;
  color: #45566d !important;
  font-size:14px !important;
}

.teacher-score-history-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
}

.teacher-score-history-meta span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 11px;
  border: 1px solid #dce4f1;
  border-radius: 999px;
  background: #fff;
  color: #5b6d84;
  font-weight: 700;
}

.teacher-score-history-meta i {
  color: #5c57cf;
}

.teacher-score-history-summary {
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.teacher-score-history-summary .history-stat {
  position: relative;
  overflow: hidden;
  min-height: 96px;
  padding: 14px 12px 12px;
  border-radius: 15px;
  font-weight: 800;
  box-shadow: 0 7px 16px rgba(49, 69, 99, .07);
}

.teacher-score-history-summary .history-stat::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: currentColor;
  opacity: .65;
}

.teacher-score-history-summary .history-stat > i {
  display: block;
  margin-bottom: 5px;
  font-size:19px;
}

.teacher-score-history-summary .history-stat.is-positive {
  border-color: #bfe9d1;
  background: #edfbf3;
  color: #158053;
}

.teacher-score-history-summary .history-stat.is-negative {
  border-color: #f5c9d0;
  background: #fff1f3;
  color: #c43f50;
}

.teacher-score-history-summary .history-stat.is-total {
  border-color: #cbd8fb;
  background: #eff4ff;
  color: #315db0;
}

.teacher-score-history-summary .history-stat.is-records {
  border-color: #ddd4fa;
  background: #f5f1ff;
  color: #6752bb;
}

.teacher-score-history-summary strong {
  margin-top: 6px;
  font-size:clamp(21px, 2.2vw, 28px);
}

.teacher-score-history-wrap {
  max-height: min(480px, 52vh);
  border-color: #d9e3ef;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(46, 66, 96, .06);
}

.teacher-score-history-wrap table {
  min-width: 790px;
}

.teacher-score-history-wrap th {
  padding: 12px;
  background: linear-gradient(135deg, #edf4ff, #f1efff);
  color: #344e6b;
  font-weight: 850;
}

.teacher-score-history-wrap td {
  padding: 11px 12px;
  color: #41546a;
  vertical-align: top;
}

.teacher-score-history-wrap tbody tr:nth-child(even) {
  background: #fafcff;
}

.teacher-score-history-detail {
  min-width: 280px;
  word-break: break-word;
}

.teacher-score-history-source {
  display: inline-flex;
  padding: 5px 9px;
  border-radius: 999px;
  background: #eef3fb;
  color: #45617d;
  font-size:13px;
  font-weight: 800;
  white-space: nowrap;
}

.teacher-score-history-value {
  text-align: center !important;
  font-weight: 900;
  white-space: nowrap;
}

.swal2-actions.teacher-score-history-actions {
  margin-top: 16px !important;
}

.swal2-confirm.teacher-score-history-close {
  min-width: 110px !important;
  background: linear-gradient(135deg, #315fae, #6552c8) !important;
  color: #fff !important;
}

/* Tablet / iPad */
@media (max-width: 1024px) {
  #teacherCurrentScores .teacher-current-score-panel {
    padding: 19px;
  }

  .teacher-current-score-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .teacher-current-score-filter-grid > div:last-child {
    grid-column: 1 / -1;
  }

  .swal2-popup.teacher-score-history-dialog {
    width: calc(100vw - 24px) !important;
    padding: 27px 20px 20px !important;
  }

  .teacher-score-history-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Mobile: convert both tables to readable cards */
@media (max-width: 680px) {
  #teacherCurrentScores {
    padding-bottom: 24px;
  }

  #teacherCurrentScores .teacher-current-score-panel {
    padding: 16px 12px 18px;
    border-radius: 17px;
  }

  .teacher-current-score-action-row {
    align-items: stretch;
    flex-direction: column;
    margin-top: 5px;
  }

  .teacher-current-score-updated,
  .teacher-current-score-refresh {
    width: 100%;
    justify-content: center;
  }

  .teacher-current-score-filter-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .teacher-current-score-filter-grid > div,
  .teacher-current-score-filter-grid > div:last-child {
    grid-column: auto;
    padding: 10px;
  }

  .teacher-current-score-table-wrap {
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .teacher-current-score-table,
  .teacher-current-score-table tbody,
  .teacher-current-score-table tr,
  .teacher-current-score-table td {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .teacher-current-score-table thead {
    display: none;
  }

  .teacher-current-score-table tbody tr {
    overflow: hidden;
    margin-bottom: 12px;
    border: 1px solid #d9e5f1;
    border-radius: 15px;
    background: #fff !important;
    box-shadow: 0 7px 18px rgba(52, 74, 104, .07);
  }

  .teacher-current-score-table td {
    display: grid;
    grid-template-columns: minmax(100px, 40%) minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px dashed #e3eaf2;
    text-align: right;
  }

  .teacher-current-score-table td::before {
    content: attr(data-label);
    color: #61758b;
    text-align: left;
    font-size:13px;
    font-weight: 800;
  }

  .teacher-current-score-table td:last-child {
    border-bottom: 0;
  }

  .teacher-current-score-table .text-left,
  .teacher-current-score-name {
    text-align: right !important;
  }

  .teacher-current-score-history-btn {
    justify-self: end;
  }

  .teacher-current-score-pagination {
    gap: 8px;
  }

  .teacher-current-score-pagination > span {
    order: -1;
    width: 100%;
    min-width: 0;
  }

  .swal2-popup.teacher-score-history-dialog {
    width: calc(100vw - 12px) !important;
    max-height: calc(100vh - 12px) !important;
    padding: 24px 10px 14px !important;
    border-width: 3px !important;
    border-radius: 18px !important;
    outline-width: 3px !important;
  }

  .swal2-title.teacher-score-history-title {
    padding: 10px 8px 0 !important;
    font-size:21px !important;
  }

  .swal2-html-container.teacher-score-history-content {
    margin-top: 10px !important;
    padding: 0 !important;
  }

  .teacher-score-history-meta {
    gap: 6px;
    margin-bottom: 10px;
  }

  .teacher-score-history-meta span {
    padding: 6px 9px;
    font-size:13px;
  }

  .teacher-score-history-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 11px;
  }

  .teacher-score-history-summary .history-stat {
    min-height: 86px;
    padding: 12px 7px 9px;
    font-size:13px;
  }

  .teacher-score-history-summary strong {
    font-size:21px;
  }

  .teacher-score-history-wrap {
    max-height: 48vh;
    overflow-y: auto;
    overflow-x: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .teacher-score-history-wrap table,
  .teacher-score-history-wrap tbody,
  .teacher-score-history-wrap tr,
  .teacher-score-history-wrap td {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .teacher-score-history-wrap thead {
    display: none;
  }

  .teacher-score-history-wrap tr {
    overflow: hidden;
    margin-bottom: 9px;
    border: 1px solid #dce5ef;
    border-radius: 13px;
    background: #fff !important;
    box-shadow: 0 5px 13px rgba(52, 72, 99, .06);
  }

  .teacher-score-history-wrap td {
    display: grid;
    grid-template-columns: minmax(76px, 31%) minmax(0, 1fr);
    align-items: start;
    gap: 8px;
    padding: 9px 10px;
    border-bottom: 1px dashed #e3eaf2;
    text-align: right !important;
    word-break: break-word;
  }

  .teacher-score-history-wrap td::before {
    content: attr(data-label);
    color: #65798f;
    text-align: left;
    font-size:13px;
    font-weight: 850;
  }

  .teacher-score-history-wrap td:last-child {
    border-bottom: 0;
  }

  .teacher-score-history-detail {
    min-width: 0;
  }

  .teacher-score-history-source {
    justify-self: end;
  }

  .swal2-actions.teacher-score-history-actions {
    margin-top: 10px !important;
  }
}

@media (max-width: 390px) {
  .teacher-score-history-summary {
    grid-template-columns: 1fr 1fr;
  }

  .teacher-current-score-table td {
    grid-template-columns: 92px minmax(0, 1fr);
  }
}



/* ============================================================
   PHASE T1.3 — PROFESSIONAL TEACHER THEME + WIDE DIALOGS
============================================================ */

/* ---------- Teacher design tokens ---------- */
body.teacher-active {
  --teacher-navy: #1f334d;
  --teacher-navy-2: #294966;
  --teacher-blue: #356f9f;
  --teacher-teal: #27877f;
  --teacher-violet: #665aa6;
  --teacher-amber: #b7791f;
  --teacher-red: #b74d58;
  --teacher-bg: #edf2f7;
  --teacher-surface: #ffffff;
  --teacher-border: #d8e1eb;
  --teacher-text: #27384b;
  --teacher-muted: #66798c;
  --teacher-shadow: 0 12px 28px rgba(34, 55, 78, .08);
}

/* ---------- Entire Teacher workspace ---------- */
body.teacher-active #teacherPage {
  color: var(--teacher-text);
  background: var(--teacher-bg);
}

body.teacher-active #teacherPage .teacher-shell {
  background:
    radial-gradient(
      circle at 100% 0,
      rgba(53, 111, 159, .08),
      transparent 28%
    ),
    linear-gradient(
      180deg,
      #f4f7fa 0,
      var(--teacher-bg) 100%
    ) !important;
}

/* Sidebar: mature navy, not cartoon-like */
body.teacher-active #teacherPage .sidebar {
  border-right: 1px solid rgba(255, 255, 255, .08);
  background:
    linear-gradient(
      180deg,
      #192a40 0,
      #223a54 58%,
      #1c3048 100%
    ) !important;
  box-shadow: 12px 0 34px rgba(20, 37, 57, .13);
}

body.teacher-active #teacherPage .sidebar-brand {
  border-bottom: 1px solid rgba(255, 255, 255, .11);
  background: rgba(255, 255, 255, .035);
}

body.teacher-active #teacherPage .sidebar-brand img {
  border: 2px solid rgba(255, 255, 255, .68);
  background: #fff;
  box-shadow: 0 8px 20px rgba(4, 15, 28, .24);
}

body.teacher-active #teacherPage .sidebar-brand strong {
  color: #fff;
  letter-spacing: .1px;
}

body.teacher-active #teacherPage .sidebar-brand span {
  color: #c4d1de;
}

body.teacher-active #teacherPage .side-collapse {
  border-color: rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .08);
  color: #edf6ff;
}

body.teacher-active #teacherPage .teacher-side-menu > button,
body.teacher-active #teacherPage .teacher-menu-main,
body.teacher-active #teacherPage .teacher-sub-btn {
  position: relative;
  border: 1px solid transparent;
  border-radius: 11px;
  color: #dbe6f0;
  transition:
    background .18s ease,
    border-color .18s ease,
    color .18s ease,
    transform .18s ease;
}

body.teacher-active #teacherPage .teacher-side-menu > button:hover,
body.teacher-active #teacherPage .teacher-menu-main:hover,
body.teacher-active #teacherPage .teacher-sub-btn:hover {
  border-color: rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .09);
  color: #fff;
  transform: translateX(2px);
}

body.teacher-active #teacherPage .teacher-side-menu button.active,
body.teacher-active #teacherPage .teacher-menu-group.active-parent
  > .teacher-menu-main {
  border-color: rgba(116, 205, 198, .35);
  background:
    linear-gradient(
      90deg,
      rgba(39, 135, 127, .88),
      rgba(53, 111, 159, .82)
    );
  color: #fff;
  box-shadow: 0 8px 18px rgba(9, 31, 48, .22);
}

body.teacher-active #teacherPage .teacher-side-menu button.active::before,
body.teacher-active #teacherPage .teacher-menu-group.active-parent
  > .teacher-menu-main::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 99px;
  background: #8de1d7;
}

body.teacher-active #teacherPage .teacher-sub-menu {
  margin-top: 5px;
  padding: 5px 0 5px 13px;
  border-left: 1px solid rgba(255, 255, 255, .12);
}

/* Topbar */
body.teacher-active #teacherPage .topbar {
  border-bottom: 1px solid rgba(205, 216, 227, .88);
  background: rgba(250, 252, 254, .93);
  box-shadow: 0 8px 22px rgba(36, 55, 76, .055);
  backdrop-filter: blur(12px);
}

body.teacher-active #teacherPage .topbar h2 {
  color: var(--teacher-navy);
  font-weight: 900;
  letter-spacing: -.2px;
}

body.teacher-active #teacherPage .topbar p {
  color: var(--teacher-muted);
}

body.teacher-active #teacherPage .teacher-top-btn {
  border-radius: 11px;
  font-weight: 800;
}

/* Main content */
body.teacher-active #teacherPage .main {
  background: transparent;
}

body.teacher-active #teacherPage .teacher-view {
  color: var(--teacher-text);
}

/* Panels throughout every Teacher menu */
body.teacher-active #teacherPage .panel,
body.teacher-active #teacherPage .form-panel,
body.teacher-active #teacherPage .coming-soon {
  position: relative;
  border: 1px solid var(--teacher-border);
  border-radius: 17px;
  background: var(--teacher-surface);
  box-shadow: var(--teacher-shadow);
}

body.teacher-active #teacherPage .panel::before,
body.teacher-active #teacherPage .form-panel::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 18px;
  right: 18px;
  height: 3px;
  border-radius: 0 0 4px 4px;
  background:
    linear-gradient(
      90deg,
      var(--teacher-blue),
      var(--teacher-teal),
      var(--teacher-violet)
    );
  opacity: .72;
  pointer-events: none;
}

body.teacher-active #teacherPage .panel-title {
  color: var(--teacher-navy);
  font-weight: 900;
}

body.teacher-active #teacherPage .panel-title i {
  color: var(--teacher-blue);
}

body.teacher-active #teacherPage label {
  color: #42566a;
  font-weight: 800;
}

/* Inputs and filters */
body.teacher-active #teacherPage .input,
body.teacher-active #teacherPage input,
body.teacher-active #teacherPage select,
body.teacher-active #teacherPage textarea {
  border-color: #cfd9e4;
  background: #fbfcfe;
  color: #26394d;
  box-shadow: inset 0 1px 2px rgba(42, 59, 78, .035);
}

body.teacher-active #teacherPage .input:hover,
body.teacher-active #teacherPage input:hover,
body.teacher-active #teacherPage select:hover,
body.teacher-active #teacherPage textarea:hover {
  border-color: #aebfce;
  background: #fff;
}

body.teacher-active #teacherPage .input:focus,
body.teacher-active #teacherPage input:focus,
body.teacher-active #teacherPage select:focus,
body.teacher-active #teacherPage textarea:focus {
  border-color: var(--teacher-blue);
  outline: 0;
  background: #fff;
  box-shadow:
    0 0 0 3px rgba(53, 111, 159, .13),
    inset 0 1px 2px rgba(42, 59, 78, .025);
}

/* Buttons throughout Teacher */
body.teacher-active #teacherPage .btn {
  border-radius: 10px;
  font-weight: 850;
  box-shadow: 0 4px 10px rgba(32, 52, 73, .055);
}

body.teacher-active #teacherPage .btn-primary {
  border-color: #285f8c;
  background:
    linear-gradient(
      135deg,
      #356f9f,
      #2c628f
    );
  color: #fff;
}

body.teacher-active #teacherPage .btn-primary:hover {
  background:
    linear-gradient(
      135deg,
      #2d648f,
      #244f76
    );
}

body.teacher-active #teacherPage .btn-soft {
  border-color: #c9d9e8;
  background: #edf5fb;
  color: #2d638e;
}

body.teacher-active #teacherPage .btn-soft:hover {
  border-color: #aac4da;
  background: #e2f0fa;
}

body.teacher-active #teacherPage .btn-outline {
  border-color: #bdcad7;
  background: #fff;
  color: #445b70;
}

body.teacher-active #teacherPage .btn-outline:hover {
  border-color: #8ea5b8;
  background: #f2f6f9;
  color: #263f55;
}

/* Tables throughout Teacher */
body.teacher-active #teacherPage .table-wrap {
  overflow: auto;
  border: 1px solid #d8e1ea;
  border-radius: 13px;
  background: #fff;
}

body.teacher-active #teacherPage table {
  border-collapse: separate;
  border-spacing: 0;
}

body.teacher-active #teacherPage table th {
  border-bottom: 1px solid #cad7e3;
  background:
    linear-gradient(
      180deg,
      #eaf1f7,
      #e2ebf3
    );
  color: #304b64;
  font-weight: 900;
}

body.teacher-active #teacherPage table td {
  border-bottom-color: #e5ebf1;
  color: #33495d;
}

body.teacher-active #teacherPage table tbody tr:nth-child(even) {
  background: #fafcfe;
}

body.teacher-active #teacherPage table tbody tr:hover {
  background: #edf5fa;
}

/* Dashboard and statistic cards */
body.teacher-active #teacherPage .teacher-overview-head {
  border: 1px solid #d7e2ec;
  border-radius: 17px;
  background:
    linear-gradient(
      135deg,
      rgba(53, 111, 159, .08),
      rgba(39, 135, 127, .055)
    ),
    #fff;
  box-shadow: var(--teacher-shadow);
}

body.teacher-active #teacherPage .teacher-overview-head h3 {
  color: var(--teacher-navy);
}

body.teacher-active #teacherPage .teacher-overview-head p,
body.teacher-active #teacherPage .overview-desc,
body.teacher-active #teacherPage .event-meta,
body.teacher-active #teacherPage .teacher-view-desc {
  color: var(--teacher-muted);
}

body.teacher-active #teacherPage .teacher-overview-jump-menu button {
  border-color: #c8d6e3;
  background: #f7fafc;
  color: #3a556d;
}

body.teacher-active #teacherPage .teacher-overview-jump-menu button:hover {
  border-color: var(--teacher-blue);
  background: #edf5fb;
  color: #275e89;
}

body.teacher-active #teacherPage .stat-card,
body.teacher-active #teacherPage .teacher-overview-stat-grid .stat-card {
  overflow: hidden;
  border: 1px solid #d7e2eb;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 9px 22px rgba(37, 58, 79, .075);
}

body.teacher-active #teacherPage .stat-card::after,
body.teacher-active #teacherPage
.teacher-overview-stat-grid .stat-card::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 4px;
  background:
    linear-gradient(
      90deg,
      var(--teacher-blue),
      var(--teacher-teal)
    );
  opacity: .72;
}

body.teacher-active #teacherPage .event-item,
body.teacher-active #teacherPage .preset-item,
body.teacher-active #teacherPage .student-card {
  border-color: #d9e2eb;
  background: #fbfcfe;
}

body.teacher-active #teacherPage .event-item:hover,
body.teacher-active #teacherPage .preset-item:hover,
body.teacher-active #teacherPage .student-card:hover {
  border-color: #b7c9d8;
  background: #f3f8fb;
}

/* Empty/coming-soon panels */
body.teacher-active #teacherPage .coming-soon {
  border-style: solid;
  background:
    radial-gradient(
      circle at 50% 0,
      rgba(53, 111, 159, .08),
      transparent 48%
    ),
    #fff;
}

body.teacher-active #teacherPage .coming-soon > i {
  color: var(--teacher-blue);
}

/* ---------- Wider Teacher SweetAlert dialogs ---------- */
body.teacher-active .swal2-container {
  padding: 14px !important;
}

body.teacher-active .swal2-popup {
  width: min(880px, calc(100vw - 32px)) !important;
  max-width: none !important;
  max-height: calc(100vh - 28px) !important;
  padding: 28px 28px 22px !important;
  border: 1px solid #d2dde8 !important;
  border-radius: 22px !important;
  outline: 4px solid rgba(53, 111, 159, .16) !important;
  background:
    radial-gradient(
      circle at 0 0,
      rgba(53, 111, 159, .075),
      transparent 30%
    ),
    #fbfcfe !important;
  box-shadow: 0 26px 70px rgba(24, 42, 61, .26) !important;
}

body.teacher-active .swal2-title {
  color: var(--teacher-navy) !important;
  font-size:clamp(22px, 2.3vw, 29px) !important;
  line-height: 1.3 !important;
}

body.teacher-active .swal2-html-container {
  width: 100% !important;
  max-height: calc(100vh - 190px) !important;
  margin: 14px 0 0 !important;
  padding: 0 4px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  color: #43576b !important;
}

body.teacher-active .swal2-actions {
  gap: 9px !important;
  margin-top: 18px !important;
}

body.teacher-active .swal2-confirm,
body.teacher-active .swal2-cancel,
body.teacher-active .swal2-deny {
  min-width: 116px !important;
  min-height: 42px !important;
  border-radius: 10px !important;
  font-weight: 850 !important;
}

/* Larger forms and detail dialogs */
body.teacher-active .swal2-popup.behavior-edit-modal,
body.teacher-active .swal2-popup.behavior-cancel-modal,
body.teacher-active .swal2-popup.behavior-admin-delete-modal {
  width: min(980px, calc(100vw - 32px)) !important;
}

/* Rank Rules */
body.teacher-active
.swal2-popup.teacher-rank-rules-dialog {
  width: min(1120px, calc(100vw - 40px)) !important;
  padding: 30px 32px 24px !important;
}

body.teacher-active
.swal2-title.teacher-rank-rules-title {
  color: #263e57 !important;
}

body.teacher-active
.swal2-html-container.teacher-rank-rules-content {
  max-height: min(680px, calc(100vh - 190px)) !important;
  padding: 0 4px 2px !important;
}

body.teacher-active
.teacher-rank-rules-dialog .rank-rule-hero {
  border: 1px solid #cbdbe8;
  border-radius: 15px;
  background:
    linear-gradient(
      135deg,
      #edf5fb,
      #f1f7f5
    );
}

body.teacher-active
.teacher-rank-rules-dialog .rank-rule-formula {
  border-color: #cbd9e5;
  background: #f1f6fa;
  color: #2e506c;
}

body.teacher-active
.teacher-rank-rules-dialog .rank-rule-card-grid {
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  gap: 12px;
}

body.teacher-active
.teacher-rank-rules-dialog .rank-rule-card {
  border-color: #d6e0e9;
  background: #fff;
  box-shadow: 0 7px 17px rgba(37, 58, 78, .065);
}

body.teacher-active
.teacher-rank-rules-dialog .rank-rule-note {
  border-color: #e2d2a8;
  background: #fff9e9;
  color: #6e5726;
}

body.teacher-active
.swal2-confirm.teacher-rank-rules-confirm {
  background:
    linear-gradient(
      135deg,
      var(--teacher-blue),
      var(--teacher-teal)
    ) !important;
}

/* Current-score history must remain the widest */
body.teacher-active
.swal2-popup.teacher-score-history-dialog {
  width: min(1180px, calc(100vw - 36px)) !important;
}

/* Score history type label */
body.teacher-active .teacher-score-history-source {
  border: 1px solid #cfdae6;
  background: #edf3f8;
  color: #37546e;
}

/* ---------- Tablet / iPad ---------- */
@media (max-width: 1024px) {
  body.teacher-active #teacherPage .panel,
  body.teacher-active #teacherPage .form-panel {
    border-radius: 15px;
  }

  body.teacher-active
  .teacher-rank-rules-dialog .rank-rule-card-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  body.teacher-active .swal2-popup,
  body.teacher-active
  .swal2-popup.teacher-rank-rules-dialog,
  body.teacher-active
  .swal2-popup.teacher-score-history-dialog {
    width: calc(100vw - 24px) !important;
    padding: 25px 20px 19px !important;
  }
}

/* ---------- Mobile ---------- */
@media (max-width: 680px) {
  body.teacher-active .swal2-container {
    padding: 6px !important;
  }

  body.teacher-active .swal2-popup,
  body.teacher-active
  .swal2-popup.teacher-rank-rules-dialog,
  body.teacher-active
  .swal2-popup.teacher-score-history-dialog,
  body.teacher-active
  .swal2-popup.behavior-edit-modal,
  body.teacher-active
  .swal2-popup.behavior-cancel-modal,
  body.teacher-active
  .swal2-popup.behavior-admin-delete-modal {
    width: calc(100vw - 12px) !important;
    max-height: calc(100vh - 12px) !important;
    padding: 22px 11px 14px !important;
    border-radius: 17px !important;
    outline-width: 3px !important;
  }

  body.teacher-active .swal2-title {
    padding: 8px 6px 0 !important;
    font-size:21px !important;
  }

  body.teacher-active .swal2-html-container {
    max-height: calc(100vh - 155px) !important;
    margin-top: 9px !important;
    padding: 0 !important;
  }

  body.teacher-active
  .teacher-rank-rules-dialog .rank-rule-card-grid {
    grid-template-columns: 1fr;
    gap: 9px;
  }

  body.teacher-active
  .teacher-rank-rules-dialog .rank-rule-hero {
    align-items: flex-start;
    padding: 13px;
  }

  body.teacher-active #teacherPage .panel::before,
  body.teacher-active #teacherPage .form-panel::before {
    left: 12px;
    right: 12px;
  }

  body.teacher-active #teacherPage .teacher-top-actions {
    gap: 6px;
  }

  body.teacher-active #teacherPage .teacher-top-btn {
    min-width: 42px;
    padding-inline: 10px;
  }
}




/* ============================================================
   PHASE T1.4 — SOFT PROFESSIONAL TEACHER COLOR REFINEMENT
   ปรับเฉพาะหน้าตาและสีสัน ไม่แตะโครงสร้างหรือฟังก์ชัน
============================================================ */

body.teacher-active {
  --teacher-navy: #23445f;
  --teacher-navy-2: #315b78;
  --teacher-blue: #3d82ad;
  --teacher-teal: #2f918c;
  --teacher-violet: #756aa9;
  --teacher-amber: #c08935;
  --teacher-red: #c65a63;
  --teacher-bg: #f2f6f9;
  --teacher-surface: #ffffff;
  --teacher-border: #d5e1e9;
  --teacher-text: #26394c;
  --teacher-muted: #627487;
  --teacher-shadow: 0 12px 28px rgba(45, 74, 97, .075);
}

/* ---------- พื้นหลังหน้าครู ---------- */
body.teacher-active #teacherPage .teacher-shell {
  background:
    radial-gradient(
      circle at 92% 5%,
      rgba(82, 161, 178, .10),
      transparent 31%
    ),
    radial-gradient(
      circle at 35% 100%,
      rgba(112, 126, 181, .065),
      transparent 32%
    ),
    linear-gradient(
      180deg,
      #f8fafc 0,
      #eef4f7 100%
    ) !important;
}

/* ---------- Sidebar: อ่อนลง อ่านง่ายขึ้น ---------- */
body.teacher-active #teacherPage .sidebar {
  border-right:
    1px solid rgba(255,255,255,.18) !important;
  background:
    linear-gradient(
      180deg,
      #244762 0%,
      #2c5570 55%,
      #244963 100%
    ) !important;
  box-shadow:
    10px 0 28px rgba(34, 67, 90, .14) !important;
}

body.teacher-active #teacherPage .sidebar-brand {
  border-bottom:
    1px solid rgba(255,255,255,.14) !important;
  background:
    rgba(255,255,255,.055) !important;
}

body.teacher-active #teacherPage .sidebar-brand strong {
  color:
    #ffffff !important;
  text-shadow:
    0 1px 1px rgba(0,0,0,.12);
}

body.teacher-active #teacherPage .sidebar-brand span {
  color:
    #d8e7f0 !important;
}

body.teacher-active #teacherPage .side-collapse {
  border-color:
    rgba(255,255,255,.25) !important;
  background:
    rgba(255,255,255,.10) !important;
  color:
    #ffffff !important;
}

body.teacher-active #teacherPage .side-collapse:hover {
  background:
    rgba(255,255,255,.18) !important;
}

/* เมนูหลัก */
body.teacher-active #teacherPage .teacher-side-menu > button,
body.teacher-active #teacherPage .teacher-menu-main {
  color:
    #edf6fb !important;
  opacity:
    1 !important;
}

body.teacher-active #teacherPage .teacher-side-menu > button i,
body.teacher-active #teacherPage .teacher-menu-main i {
  color:
    #c8e2ee !important;
  opacity:
    1 !important;
}

body.teacher-active #teacherPage .teacher-side-menu > button:hover,
body.teacher-active #teacherPage .teacher-menu-main:hover {
  border-color:
    rgba(255,255,255,.18) !important;
  background:
    rgba(255,255,255,.11) !important;
  color:
    #ffffff !important;
}

/* เมนูหลักที่กำลังใช้งาน */
body.teacher-active #teacherPage
.teacher-side-menu > button.active,
body.teacher-active #teacherPage
.teacher-menu-group.active-parent > .teacher-menu-main {
  border-color:
    rgba(181, 232, 232, .55) !important;
  background:
    linear-gradient(
      90deg,
      #3f8f98,
      #4e84ad
    ) !important;
  color:
    #ffffff !important;
  box-shadow:
    0 7px 18px rgba(20, 48, 66, .20) !important;
}

body.teacher-active #teacherPage
.teacher-side-menu > button.active i,
body.teacher-active #teacherPage
.teacher-menu-group.active-parent > .teacher-menu-main i {
  color:
    #ffffff !important;
}

/* เมนูย่อย: แก้ข้อความที่มืดและอ่านไม่ชัด */
body.teacher-active #teacherPage .teacher-sub-menu {
  margin:
    4px 0 5px 7px !important;
  padding:
    5px 4px 5px 10px !important;
  border-left:
    1px solid rgba(207,235,242,.36) !important;
}

body.teacher-active #teacherPage
.teacher-sub-menu .teacher-sub-btn {
  min-height:
    37px !important;
  border:
    1px solid transparent !important;
  border-left:
    2px solid rgba(210,235,243,.42) !important;
  background:
    rgba(14, 45, 65, .12) !important;
  color:
    #e6f1f7 !important;
  opacity:
    1 !important;
  font-weight:
    700 !important;
  text-shadow:
    none !important;
}

body.teacher-active #teacherPage
.teacher-sub-menu .teacher-sub-btn i {
  color:
    #bfe0eb !important;
  opacity:
    1 !important;
}

body.teacher-active #teacherPage
.teacher-sub-menu .teacher-sub-btn:hover {
  border-color:
    rgba(255,255,255,.18) !important;
  border-left-color:
    #a7e4df !important;
  background:
    rgba(255,255,255,.13) !important;
  color:
    #ffffff !important;
}

body.teacher-active #teacherPage
.teacher-sub-menu .teacher-sub-btn:hover i {
  color:
    #ffffff !important;
}

body.teacher-active #teacherPage
.teacher-sub-menu .teacher-sub-btn.active {
  border-color:
    #c9e5ee !important;
  border-left-color:
    #5eb9b1 !important;
  background:
    #f1f8fa !important;
  color:
    #285b74 !important;
  box-shadow:
    0 5px 14px rgba(22, 54, 74, .15) !important;
}

body.teacher-active #teacherPage
.teacher-sub-menu .teacher-sub-btn.active i {
  color:
    #2f918c !important;
}

/* ---------- Topbar ---------- */
body.teacher-active #teacherPage .topbar {
  border:
    1px solid #dce6ed !important;
  border-top:
    0 !important;
  background:
    rgba(255,255,255,.96) !important;
  box-shadow:
    0 7px 20px rgba(45, 72, 94, .065) !important;
}

body.teacher-active #teacherPage .topbar h2 {
  color:
    #23445f !important;
}

body.teacher-active #teacherPage .topbar h2 i {
  color:
    #3b8ca5 !important;
}

body.teacher-active #teacherPage .topbar p {
  color:
    #687b8d !important;
}

/* ---------- Panels: สว่าง สะอาด และมีจุดเด่น ---------- */
body.teacher-active #teacherPage .panel,
body.teacher-active #teacherPage .form-panel,
body.teacher-active #teacherPage .coming-soon {
  border:
    1px solid #d6e2ea !important;
  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #fcfdfe 100%
    ) !important;
  box-shadow:
    0 11px 26px rgba(49, 76, 98, .07) !important;
}

body.teacher-active #teacherPage .panel::before,
body.teacher-active #teacherPage .form-panel::before {
  height:
    3px !important;
  background:
    linear-gradient(
      90deg,
      #5ca2c3,
      #62b9ae,
      #8c82b8
    ) !important;
  opacity:
    .78 !important;
}

body.teacher-active #teacherPage .panel-title {
  color:
    #29485f !important;
  font-weight:
    850 !important;
}

body.teacher-active #teacherPage .panel-title i {
  color:
    #3e89aa !important;
}

body.teacher-active #teacherPage label {
  color:
    #42596d !important;
  font-weight:
    750 !important;
}

/* ---------- ฟอร์มและช่องกรอก ---------- */
body.teacher-active #teacherPage .input,
body.teacher-active #teacherPage input,
body.teacher-active #teacherPage select,
body.teacher-active #teacherPage textarea {
  border:
    1px solid #cbdbe5 !important;
  background:
    #ffffff !important;
  color:
    #283d50 !important;
  box-shadow:
    inset 0 1px 2px rgba(48, 73, 94, .025) !important;
}

body.teacher-active #teacherPage input::placeholder,
body.teacher-active #teacherPage textarea::placeholder {
  color:
    #8797a6 !important;
  opacity:
    1 !important;
}

body.teacher-active #teacherPage .input:hover,
body.teacher-active #teacherPage input:hover,
body.teacher-active #teacherPage select:hover,
body.teacher-active #teacherPage textarea:hover {
  border-color:
    #a9c4d3 !important;
  background:
    #ffffff !important;
}

body.teacher-active #teacherPage .input:focus,
body.teacher-active #teacherPage input:focus,
body.teacher-active #teacherPage select:focus,
body.teacher-active #teacherPage textarea:focus {
  border-color:
    #4d94b5 !important;
  box-shadow:
    0 0 0 3px rgba(77,148,181,.13) !important;
}

/* ---------- ปุ่ม ---------- */
body.teacher-active #teacherPage .btn {
  border-radius:
    10px !important;
  font-weight:
    800 !important;
}

body.teacher-active #teacherPage .btn-primary {
  border-color:
    #34769d !important;
  background:
    linear-gradient(
      135deg,
      #468daf,
      #36789f
    ) !important;
  color:
    #ffffff !important;
  box-shadow:
    0 6px 14px rgba(48,112,150,.18) !important;
}

body.teacher-active #teacherPage .btn-primary:hover {
  background:
    linear-gradient(
      135deg,
      #3d82a4,
      #2e6d94
    ) !important;
}

body.teacher-active #teacherPage .btn-soft {
  border-color:
    #c5dbe8 !important;
  background:
    #edf6fa !important;
  color:
    #326f91 !important;
}

body.teacher-active #teacherPage .btn-soft:hover {
  border-color:
    #9fc3d7 !important;
  background:
    #e4f1f6 !important;
}

body.teacher-active #teacherPage .btn-outline {
  border-color:
    #c6d3dd !important;
  background:
    #ffffff !important;
  color:
    #4b6275 !important;
}

/* ---------- ตารางและรายการ ---------- */
body.teacher-active #teacherPage .table-wrap {
  border-color:
    #d7e2e9 !important;
  background:
    #ffffff !important;
}

body.teacher-active #teacherPage table th {
  border-bottom-color:
    #c8dae5 !important;
  background:
    linear-gradient(
      180deg,
      #eef6f9,
      #e8f1f5
    ) !important;
  color:
    #355269 !important;
}

body.teacher-active #teacherPage table td {
  color:
    #354b5e !important;
}

body.teacher-active #teacherPage table tbody tr:nth-child(even) {
  background:
    #fbfdfe !important;
}

body.teacher-active #teacherPage table tbody tr:hover {
  background:
    #edf7f8 !important;
}

body.teacher-active #teacherPage .event-item,
body.teacher-active #teacherPage .preset-item,
body.teacher-active #teacherPage .student-card {
  border-color:
    #d7e3ea !important;
  background:
    #fbfdfe !important;
  color:
    #34495c !important;
}

body.teacher-active #teacherPage .event-item:hover,
body.teacher-active #teacherPage .preset-item:hover,
body.teacher-active #teacherPage .student-card:hover {
  border-color:
    #b5cedb !important;
  background:
    #f3f9fb !important;
}

/* คะแนนบวกและลบให้ชัดโดยไม่ฉูดฉาด */
body.teacher-active #teacherPage .score-positive,
body.teacher-active #teacherPage .text-positive,
body.teacher-active #teacherPage .positive {
  color:
    #188057 !important;
}

body.teacher-active #teacherPage .score-negative,
body.teacher-active #teacherPage .text-negative,
body.teacher-active #teacherPage .negative {
  color:
    #c23f4d !important;
}

/* ---------- Dashboard ---------- */
body.teacher-active #teacherPage .teacher-overview-head {
  border-color:
    #d5e3eb !important;
  background:
    linear-gradient(
      135deg,
      rgba(79,149,181,.095),
      rgba(72,155,144,.07)
    ),
    #ffffff !important;
}

body.teacher-active #teacherPage .teacher-overview-head h3 {
  color:
    #294a63 !important;
}

body.teacher-active #teacherPage .teacher-overview-head p,
body.teacher-active #teacherPage .overview-desc,
body.teacher-active #teacherPage .event-meta,
body.teacher-active #teacherPage .teacher-view-desc {
  color:
    #66798b !important;
}

/* ---------- Popup ใช้ธีมที่สว่างขึ้น ---------- */
body.teacher-active .swal2-popup {
  border-color:
    #d4e1e9 !important;
  outline-color:
    rgba(80,150,179,.13) !important;
  background:
    radial-gradient(
      circle at 0 0,
      rgba(80,150,179,.065),
      transparent 30%
    ),
    #ffffff !important;
}

body.teacher-active .swal2-title {
  color:
    #29485f !important;
}

body.teacher-active .swal2-html-container {
  color:
    #4a6073 !important;
}

/* ---------- หน้าจอเล็ก ---------- */
@media (max-width: 860px) {
  body.teacher-active #teacherPage .sidebar {
    box-shadow:
      7px 0 22px rgba(34, 67, 90, .15) !important;
  }

  body.teacher-active #teacherPage
  .teacher-sub-menu .teacher-sub-btn {
    background:
      rgba(12, 43, 61, .14) !important;
  }
}




/* ============================================================
   PHASE T1.5 — LOADING PROGRESS BAR UI
============================================================ */

.student-block-loader {
  min-height: 198px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

.student-block-loader strong {
  margin-top: 14px !important;
  color: #3d3760 !important;
  font-size:19px !important;
  font-weight: 900 !important;
  letter-spacing: -.01em !important;
}

.student-block-loader small {
  margin-top: 5px !important;
  max-width: 320px !important;
  color: #847d98 !important;
  font-size:13px !important;
  font-weight: 700 !important;
  line-height: 1.55 !important;
}

.student-block-loader-icon {
  position: relative !important;
  width: 78px !important;
  height: 78px !important;
  transform: rotate(45deg) !important;
}

.student-block-loader-icon span {
  position: absolute !important;
  width: 29px !important;
  height: 29px !important;
  border: 3px solid #fff !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 0 rgba(48,41,80,.18) !important;
  animation: studentBlockLoaderMove 1.05s ease-in-out infinite !important;
}

.student-block-loader-icon span:nth-child(1) {
  left: 0 !important;
  top: 0 !important;
  background: #7158e5 !important;
}

.student-block-loader-icon span:nth-child(2) {
  right: 0 !important;
  top: 0 !important;
  background: #59c9ef !important;
  animation-delay: .13s !important;
}

.student-block-loader-icon span:nth-child(3) {
  left: 0 !important;
  bottom: 0 !important;
  background: #ffca61 !important;
  animation-delay: .26s !important;
}

.student-block-loader-icon span:nth-child(4) {
  right: 0 !important;
  bottom: 0 !important;
  background: #55ce9a !important;
  animation-delay: .39s !important;
}

@keyframes studentBlockLoaderMove {
  0%,100% {
    transform: translateY(0) scale(1) !important;
    opacity: .82 !important;
  }

  50% {
    transform: translateY(-7px) scale(1.08) !important;
    opacity: 1 !important;
  }
}

.student-block-loader-track {
  position: relative !important;
  width: min(360px, 86%) !important;
  height: 16px !important;
  margin-top: 18px !important;
  overflow: hidden !important;
  border: 2px solid #d6cdf3 !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #f4f1fc 0%, #ebe6f8 100%) !important;
  box-shadow:
    inset 0 2px 4px rgba(75, 63, 120, .08) !important,
    0 2px 0 rgba(255,255,255,.95) !important;
}

.student-block-loader-fill {
  position: relative !important;
  width: 0% !important;
  height: 100% !important;
  border-radius: 999px !important;
  background:
    linear-gradient(90deg,
      #6c58de 0%,
      #7b6ce8 18%,
      #62ccef 40%,
      #ffd56a 67%,
      #ff92b5 82%,
      #59d29d 100%) !important;
  box-shadow:
    0 0 12px rgba(111, 95, 228, .28) !important,
    inset 0 -1px 0 rgba(255,255,255,.25) !important;
  transition: width .22s ease !important;
}

.student-block-loader-fill::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    linear-gradient(120deg,
      transparent 0%,
      rgba(255,255,255,.15) 25%,
      rgba(255,255,255,.48) 45%,
      rgba(255,255,255,.12) 65%,
      transparent 100%) !important;
  background-size: 120px 100% !important;
  animation: studentBlockShimmer 1s linear infinite !important;
}

@keyframes studentBlockShimmer {
  from { transform: translateX(-88px) !important; }
  to { transform: translateX(320px) !important; }
}

.student-block-loader-meta {
  width: min(360px, 86%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-top: 9px !important;
}

.student-block-loader-status {
  color: #736b8f !important;
  font-size:13px !important;
  font-weight: 800 !important;
}

.student-block-loader-percent {
  min-width: 54px !important;
  padding: 4px 10px !important;
  border: 1px solid #d7cef5 !important;
  border-radius: 999px !important;
  background: #f5f1ff !important;
  color: #5546a5 !important;
  font-size:13px !important;
  font-weight: 900 !important;
  text-align: center !important;
  box-shadow: 0 2px 0 rgba(255,255,255,.9) !important;
}




/* PHP hosting adapter — Index legacy only */
html{scroll-behavior:smooth}
body{overflow-x:hidden}
#publicPage.index-game-lobby{display:block!important}
#publicPage .game-player-open{position:absolute;inset:0;z-index:5}
#publicPage .game-player-card,#publicPage .game-spotlight-card{position:relative}
#publicPage .game-player-card.is-filter-hidden{display:none!important}
#publicPage .game-player-grid.is-collapsed .game-player-card:nth-child(n+9){display:none}
#publicPage .game-class-chip-row button{font-family:inherit}
#loginModal .login-card form{display:block}
#loginModal .login-card .btn.full{margin-top:16px}
#loginMessage{min-height:20px;margin-top:10px;color:#dc2626;font-size:13px;text-align:center}
.public-season-card{min-height:142px}
@media(max-width:760px){#publicPage .game-player-grid.is-collapsed .game-player-card:nth-child(n+7){display:none}}


/* ==========================================================
   S-CLASS V2.2 — INDEX / LOGIN MOBILE SAFETY OVERRIDES
========================================================== */
#loginModal .login-card{max-height:calc(100dvh - 24px);overflow:auto}
#loginModal .login-card input{font-size:16px}
@media(max-width:640px){
  #loginModal{padding:0!important;align-items:end!important}
  #loginModal .login-card{width:100%!important;max-width:none!important;max-height:94dvh!important;margin:0!important;border-radius:24px 24px 0 0!important;padding:24px 18px max(20px,env(safe-area-inset-bottom))!important;overflow:auto!important}
  #loginModal .login-icon{width:60px!important;height:60px!important;font-size:25px!important}
  #loginModal .login-card h3{font-size:22px!important}
  #loginModal .login-card .input{min-height:48px!important;font-size:16px!important}
  #loginModal .login-card .btn.full{min-height:48px!important;width:100%!important}
  #publicPage.index-game-lobby .game-lobby-header{padding-left:12px!important;padding-right:12px!important}
  #publicPage.index-game-lobby .game-lobby-brand-copy small{max-width:58vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}


/* ===== GAME WORLD HOTFIX 2.40.1 — lighter Roblox-style backgrounds (except student profile) ===== */
#publicPage.index-game-lobby.has-fixed-page-background::before{background-color:#dff3ff!important;background-image:linear-gradient(rgba(232,246,255,.12),rgba(183,221,255,.22)),var(--page-background)!important;}
@media (max-width:980px){#publicPage.index-game-lobby.has-fixed-page-background::before{background-position:62% center;background-image:linear-gradient(rgba(232,246,255,.15),rgba(183,221,255,.26)),var(--page-background)!important;}}
@media (max-width:720px){#publicPage.index-game-lobby.has-fixed-page-background::before{background-position:68% center;background-image:linear-gradient(rgba(232,246,255,.16),rgba(183,221,255,.28)),var(--page-background)!important;}}

/* === v2.50.4 · Restore compact Season card + repair public Rank Rules === */
#publicStats .public-season-card{min-height:96px!important;gap:10px!important;padding:12px 14px!important}
#publicStats .public-season-card .season-card-badge{width:58px!important;height:58px!important;min-width:58px!important;border-radius:16px!important;font-size:13px!important}
#publicStats .public-season-card .season-card-content h3{font-size:20px!important;line-height:1.05!important;margin:0 0 3px!important;white-space:nowrap!important}
#publicStats .public-season-card .season-card-content p{font-size:13px!important;line-height:1.2!important;margin:0 0 3px!important;white-space:nowrap!important}
#publicStats .public-season-card .season-card-content small{font-size:13px!important;line-height:1.2!important;display:block!important;color:#7c8796!important}

#rankRuleModal{padding:22px!important;align-items:center!important;justify-content:center!important}
#rankRuleModal .rank-rule-modal-card{width:min(720px,94vw)!important;max-width:720px!important;max-height:min(82vh,760px)!important;overflow:auto!important;padding:24px!important;border-radius:24px!important;background:#fff!important;box-shadow:0 28px 70px rgba(15,23,42,.24)!important}
#rankRuleModal .rank-rule-modal-head{display:flex;align-items:center;gap:13px;padding-right:42px;margin-bottom:14px}
#rankRuleModal .rank-rule-modal-icon{width:48px;height:48px;min-width:48px;border-radius:15px;display:grid;place-items:center;background:#eff6ff;color:#2563eb;font-size:20px}
#rankRuleModal .rank-rule-modal-head small{display:block;font-size:13px;font-weight:900;letter-spacing:.1em;color:#7c8aa0;margin-bottom:2px}
#rankRuleModal .rank-rule-modal-head h3{margin:0;font-size:21px;line-height:1.2;color:#172033}
#rankRuleModal .rank-rule-content{color:#263447;line-height:1.55}
#rankRuleModal .rank-rule-intro{margin:0 0 12px;padding:11px 13px;border-radius:14px;background:#f7faff;border:1px solid #dbeafe;color:#34465e;font-size:13px;font-weight:600}
#rankRuleModal .rank-rule-formula{display:flex;align-items:center;justify-content:center;gap:8px;margin:0 0 15px;padding:10px 12px;border-radius:13px;background:#fff8df;border:1px solid #fde68a;color:#8b5a05;font-size:13px;font-weight:900}
#rankRuleModal .rank-rule-content h4{margin:0 0 9px;font-size:14px;color:#1f2937}
#rankRuleModal .public-rank-rule-levels{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
#rankRuleModal .public-rank-rule-level{display:grid!important;grid-template-columns:54px minmax(0,1fr)!important;align-items:center!important;gap:10px!important;min-height:72px!important;padding:9px 11px!important;border-radius:14px!important;border:1px solid #e3e9ef!important;border-left:4px solid var(--rank-rule-color,#64748b)!important;background:#fbfcfd!important}
#rankRuleModal .public-rank-rule-icon{width:50px;height:50px;border-radius:12px;display:grid;place-items:center;background:#fff;border:1px solid #e7edf2;overflow:hidden;color:var(--rank-rule-color,#64748b)}
#rankRuleModal .public-rank-rule-icon img{width:45px;height:45px;object-fit:contain;filter:drop-shadow(0 4px 6px rgba(15,23,42,.12))}
#rankRuleModal .public-rank-rule-copy{display:block;min-width:0}
#rankRuleModal .public-rank-rule-copy small{display:block;font-size:13px;color:#8b98a8;margin-bottom:1px}
#rankRuleModal .public-rank-rule-copy strong{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;font-size:14px;line-height:1.15;color:#1f2d3d;margin-bottom:3px}
#rankRuleModal .public-rank-rule-copy strong em{font-style:normal;font-size:13px;font-weight:700;color:#7a8797}
#rankRuleModal .public-rank-rule-copy b{display:block;font-size:13px;line-height:1.25;color:var(--rank-rule-color,#64748b)}
#rankRuleModal .rank-rule-note{display:flex;align-items:flex-start;gap:8px;margin-top:13px;padding:10px 12px;border-radius:13px;background:#f8fafc;border-left:4px solid #2563eb;color:#5a6878;font-size:13px}
#rankRuleModal .rank-rule-note i{margin-top:2px;color:#2563eb}
#rankRuleModal .rank-rule-empty{grid-column:1/-1;padding:18px;text-align:center;color:#7b8794;background:#f8fafc;border-radius:13px}
@media(max-width:620px){
  #rankRuleModal{padding:10px!important}
  #rankRuleModal .rank-rule-modal-card{width:96vw!important;max-height:88vh!important;padding:18px 14px!important;border-radius:20px!important}
  #rankRuleModal .public-rank-rule-levels{grid-template-columns:1fr!important}
  #rankRuleModal .rank-rule-modal-head h3{font-size:18px}
  #rankRuleModal .rank-rule-formula{font-size:13px;text-align:center}
}

/* =========================================================
   v2.53.0 — Profile image hard-center fix
   ========================================================= */
#studentPage .student-player-avatar-frame{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:hidden!important;
}
#studentPage .student-player-avatar-frame > img,
#studentPage #studentPlayerPhoto{
  width:100%!important;
  height:100%!important;
  display:block!important;
  margin:auto!important;
  object-position:50% 50%!important;
  transform-origin:center center!important;
}
#studentPage .student-player-avatar-frame.is-fallback > img,
#studentPage .student-player-avatar-frame.is-fallback #studentPlayerPhoto{
  object-fit:contain!important;
  object-position:center center!important;
  padding:10px!important;
}