/* ================================================================
   RPG Theme v2 — Kawaii Adventure Style
   Inspired by mobile RPG games (bright cartoon aesthetic)
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@400;600;700;800&family=Sarabun:wght@400;600;700&display=swap');

:root {
  /* Game palette */
  --sky-top:   #7EC8E3;
  --sky-mid:   #B3DFF5;
  --grass-top: #9ED66A;
  --grass-bot: #6BA83A;

  /* UI card */
  --cream:        #FFFBF0;
  --cream-dark:   #FFF3D0;
  --card-bg:      rgba(255, 251, 240, 0.97);
  --card-border:  #EDD080;
  --card-shadow:  0 6px 24px rgba(100,70,0,0.13);

  /* Accent */
  --red:        #FF5C5C;
  --red-dark:   #E04444;
  --green:      #52C97A;
  --green-dark: #3EA85E;
  --purple:     #8855CC;
  --blue:       #4488FF;
  --orange:     #FF8833;
  --yellow:     #FFB800;

  /* Text */
  --text:       #2D2D3A;
  --text-mid:   #555570;
  --text-light: #8888AA;

  /* Stat colors */
  --hp:  #FF5555;
  --mp:  #4488FF;

  /* Layout */
  --sidebar-w:  68px;
  --topbar-h:   62px;

  /* Modal / pop-up — unified backdrop + viewport fit */
  --modal-backdrop:   rgba(15, 12, 35, .35);
  --modal-blur:       4px;
  --modal-pad-y:      30px;
  --modal-pad-y-sm:   16px;
  --modal-max-h:      calc(100dvh - 48px);
  --modal-max-h-sm:   calc(100dvh - 20px);
}

@supports not (backdrop-filter: blur(1px)) {
  :root { --modal-backdrop: rgba(15, 12, 35, .55); }
}

/* ================================================================
   Reset
   ================================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
*, *::before, *::after { box-sizing: border-box; }
body.rpg-body { font-family: 'Sarabun', system-ui, sans-serif; color: var(--text); min-height: 100vh; }
h1,h2,h3,h4,h5,.rpg-heading { font-family: 'Kanit', 'Sarabun', sans-serif; }
a { text-decoration: none; }
img, svg, video, canvas { max-width: 100%; }
button, input, select, textarea { max-width: 100%; }
table { max-width: 100%; }

/* ================================================================
   STUDENT LAYOUT — Kawaii Game World
   ================================================================ */
body.student-layout {
  background: url('../../Picture/Slime.png') center top / cover no-repeat fixed,
              #A8DEFF;
  overflow-x: hidden;
}

/* White veil on top of PNG so cards/text read clearly */
body.student-layout::before {
  content: '';
  position: fixed; inset: 0;
  background:
    radial-gradient(ellipse 90% 55% at 50% 55%, rgba(255,255,255,.55) 0%, rgba(255,255,255,.72) 70%, rgba(255,255,255,.82) 100%);
  z-index: 0; pointer-events: none;
}

/* Emoji decorations kept empty — artwork already provides the scene */
.game-deco { display:none; }
@keyframes islandFloat {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

/* ===== TOP BAR ===== */
.game-topbar {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--topbar-h);
  z-index: 1000;
  background: rgba(255,251,240,.96);
  border-bottom: 2px solid var(--card-border);
  box-shadow: 0 2px 14px rgba(0,0,0,.1);
  display: flex; align-items: center;
  padding: 0 14px 0 calc(var(--sidebar-w) + 10px);
  gap: 12px;
}
.topbar-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(135deg, #FFE4A0, #FFD060);
  border: 2.5px solid var(--card-border);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.35rem; flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(200,150,0,.3);
}
.topbar-info { min-width: 0; }
.topbar-name  { font-family:'Kanit',sans-serif; font-weight:700; font-size:.88rem; color:var(--text); line-height:1.2; }
.topbar-class { font-size:.68rem; color:var(--text-light); }

.topbar-bars { display:flex; flex-direction:column; gap:4px; min-width:150px; }
.bar-row { display:flex; align-items:center; gap:5px; }
.bar-label { font-size:.7rem; font-weight:800; min-width:20px; color:var(--text-mid); }
.bar-track { flex:1; height:9px; background:rgba(0,0,0,.08); border-radius:5px; overflow:hidden; border:1px solid rgba(0,0,0,.05); }
.bar-fill  { height:100%; border-radius:5px; transition:width .4s; }
.bar-hp    { background:linear-gradient(90deg,#FF5555,#FF8888); }
.bar-mp    { background:linear-gradient(90deg,#4488FF,#88AAFF); }
.bar-xp    { background:linear-gradient(90deg,#52C97A,#B8E86A); }
.bar-val   { font-size:.7rem; color:var(--text-mid); min-width:56px; white-space:nowrap; }

.topbar-stats { display:flex; align-items:center; gap:8px; margin-left:auto; }
.stat-pill {
  display:flex; align-items:center; gap:4px;
  background:rgba(0,0,0,.05); border:1.5px solid rgba(0,0,0,.08);
  border-radius:20px; padding:4px 10px;
  font-size:.82rem; font-weight:700; color:var(--text);
  white-space:nowrap;
}
.stat-pill.gold-pill { background:rgba(255,184,0,.12); border-color:rgba(255,184,0,.3); color:#A06A00; }
.stat-pill.xp-pill   { background:rgba(92,201,122,.12); border-color:rgba(92,201,122,.3); color:#1A6A30; }
.sidebar-toggle {
  display:none;
  width:38px;
  height:38px;
  flex:0 0 38px;
  border:2px solid var(--card-border);
  border-radius:12px;
  background:var(--cream);
  box-shadow:0 2px 0 rgba(200,160,0,.28);
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:4px;
  padding:0;
  cursor:pointer;
}
.sidebar-toggle span {
  width:17px;
  height:2px;
  border-radius:2px;
  background:var(--purple);
  transition:transform .18s, opacity .18s;
}
body.sidebar-open .sidebar-toggle span:nth-child(1) { transform:translateY(6px) rotate(45deg); }
body.sidebar-open .sidebar-toggle span:nth-child(2) { opacity:0; }
body.sidebar-open .sidebar-toggle span:nth-child(3) { transform:translateY(-6px) rotate(-45deg); }
.sidebar-backdrop {
  display:none;
  position:fixed;
  inset:0;
  z-index:2190;
  background:rgba(45,45,58,.42);
}
body.sidebar-open .sidebar-backdrop { display:block; }
@media (min-width:901px) {
  body.sidebar-open .sidebar-backdrop { display:none; }
}

/* ===== APP NOTIFICATIONS ===== */
.app-toast-stack {
  position: fixed;
  top: calc(var(--topbar-h) + 14px);
  right: 18px;
  z-index: 2600;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  max-width: min(360px, calc(100vw - 36px));
  width: max-content;
}
.app-toast {
  width: min(360px, calc(100vw - 36px));
  background: rgba(255,251,240,.98);
  border: 2px solid var(--card-border);
  border-left: 6px solid var(--purple);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(60,40,0,.18);
  color: var(--text);
  padding: 12px 14px;
  font-weight: 700;
  line-height: 1.45;
  animation: appToastIn .18s ease-out;
}
.app-toast.success { border-left-color: var(--green); }
.app-toast.error { border-left-color: var(--red); }
.app-toast.warning { border-left-color: var(--orange); }
@keyframes appToastIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.app-dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2550;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: var(--modal-backdrop);
  backdrop-filter: blur(var(--modal-blur));
  -webkit-backdrop-filter: blur(var(--modal-blur));
}
.app-dialog-backdrop.show { display: flex; }
.app-dialog {
  width: min(420px, 100%);
  background: var(--card-bg);
  border: 3px solid var(--card-border);
  border-radius: 18px;
  box-shadow: 0 14px 36px rgba(60,40,0,.24);
  padding: 22px;
  max-height: var(--modal-max-h);
  overflow-y: auto;
  animation: appDialogIn .18s ease-out;
}
@keyframes appDialogIn {
  from { opacity: 0; transform: translateY(10px) scale(.98); }
  to { opacity: 1; transform: translateY(0); }
}
.app-dialog-title {
  font-family: 'Kanit', 'Sarabun', sans-serif;
  font-weight: 800;
  color: var(--purple);
  margin: 0 0 8px;
  font-size: 1.08rem;
}
.app-dialog-message { color: var(--text-mid); line-height: 1.65; white-space: pre-wrap; }
.app-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; flex-wrap: wrap; }
.app-dialog-btn {
  border: none;
  border-radius: 10px;
  padding: 8px 16px;
  font-family: 'Kanit', 'Sarabun', sans-serif;
  font-weight: 800;
  cursor: pointer;
}
.app-dialog-cancel { background: #eee; color: #333; }
.app-dialog-ok { background: var(--purple); color: #fff; }

/* ===== SYSTEM DROPDOWN (replaces native browser select UI) ===== */
.sq-native-select {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}
.sq-select {
  position: relative;
  display: inline-block;
  min-width: 160px;
  max-width: 100%;
  vertical-align: middle;
}
.sq-select.sq-select-block {
  display: block;
  width: 100%;
}
.sq-select-trigger {
  width: 100%;
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 2px solid rgba(136,85,204,.24);
  border-radius: 10px;
  background: rgba(255,251,240,.98);
  color: var(--text);
  font: 600 .92rem 'Sarabun', system-ui, sans-serif;
  line-height: 1.35;
  padding: 8px 12px;
  box-shadow: 0 2px 0 rgba(200,160,0,.12);
  cursor: pointer;
  text-align: left;
  transition: border-color .16s, box-shadow .16s, background .16s;
}
.sq-select-trigger:hover {
  border-color: rgba(136,85,204,.44);
  background: #fffdf7;
}
.sq-select.open .sq-select-trigger,
.sq-select-trigger:focus-visible {
  outline: none;
  border-color: var(--purple);
  box-shadow: 0 0 0 3px rgba(136,85,204,.14), 0 2px 0 rgba(200,160,0,.12);
}
.sq-select-value {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sq-select-caret {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--purple);
  font-size: .8rem;
  transition: transform .16s;
}
.sq-select.open .sq-select-caret {
  transform: rotate(180deg);
}
.sq-select-menu {
  position: fixed;
  z-index: 5000;
  display: none;
  max-height: 280px;
  overflow: auto;
  padding: 6px;
  background: rgba(255,251,240,.99);
  border: 2px solid var(--card-border);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(45,35,15,.22);
}
.sq-select-menu.open {
  display: block;
  animation: sqDropdownIn .12s ease-out;
}
@keyframes sqDropdownIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.sq-select-option,
.sq-select-group {
  width: 100%;
  display: block;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  padding: 8px 10px;
  text-align: left;
  font: 600 .9rem 'Sarabun', system-ui, sans-serif;
  line-height: 1.35;
}
.sq-select-option {
  cursor: pointer;
}
.sq-select-option:hover,
.sq-select-option.active {
  background: rgba(136,85,204,.11);
  color: var(--purple);
}
.sq-select-option.selected {
  background: rgba(255,184,0,.18);
  color: #7A4A00;
}
.sq-select-option.disabled {
  cursor: not-allowed;
  color: var(--text-light);
  opacity: .62;
}
.sq-select-group {
  cursor: default;
  color: var(--text-light);
  font-size: .78rem;
  font-weight: 800;
  padding-bottom: 4px;
}
.sq-select-sm .sq-select-trigger {
  min-height: 31px;
  padding: 5px 9px;
  font-size: .82rem;
  border-radius: 8px;
}
body.admin-layout .sq-select-trigger {
  background: #fff;
  border-color: #CBD5E1;
  box-shadow: none;
}
body.admin-layout .sq-select-trigger:hover,
body.admin-layout .sq-select.open .sq-select-trigger,
body.admin-layout .sq-select-trigger:focus-visible {
  border-color: #8855CC;
  box-shadow: 0 0 0 3px rgba(136,85,204,.12);
}

/* ===== LEFT SIDEBAR ===== */
.game-sidebar {
  position:fixed; left:0; top:0; bottom:0;
  width:var(--sidebar-w); z-index:1001;
  background:rgba(255,251,240,.96);
  border-right:2px solid var(--card-border);
  box-shadow:2px 0 12px rgba(0,0,0,.08);
  display:flex; flex-direction:column; align-items:center;
  padding: calc(var(--topbar-h) + 14px) 0 12px;
  gap:6px;
}
.sidebar-logo {
  width:48px; height:48px; border-radius:14px;
  background:linear-gradient(135deg,#FFB800,#FF8833);
  display:flex; align-items:center; justify-content:center;
  font-size:1.5rem; margin-bottom:8px;
  box-shadow:0 3px 10px rgba(255,140,0,.35), 0 3px 0 #C06000;
}
.sidebar-btn {
  width:50px; height:50px; border-radius:14px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px; text-decoration:none; font-size:1.25rem;
  color:var(--text-mid); background:transparent;
  border:2px solid transparent; transition:all .2s; cursor:pointer;
}
.sidebar-btn .btn-lbl {
  font-size:.58rem; font-weight:700; color:var(--text-light); line-height:1.05;
}
.sidebar-btn:hover, .sidebar-btn.active {
  background:rgba(255,184,0,.15); border-color:rgba(255,184,0,.45);
  transform:scale(1.06); color:var(--orange);
}
.sidebar-btn:hover .btn-lbl, .sidebar-btn.active .btn-lbl { color:var(--orange); }
.sidebar-spacer { flex:1; }
.sidebar-exit { background:rgba(255,80,80,.06); border-color:rgba(255,80,80,.18); }
.sidebar-exit:hover { background:rgba(255,80,80,.15); border-color:rgba(255,80,80,.4); color:var(--red); }
.sidebar-exit:hover .btn-lbl { color:var(--red); }

/* ===== RIGHT FLOAT BUTTONS ===== */
.game-rightbar {
  position:fixed; right:12px; top:50%; transform:translateY(-50%);
  z-index:900; display:flex; flex-direction:column; gap:8px;
}
.rightbar-btn {
  width:52px; height:52px; border-radius:14px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px; text-decoration:none; font-size:1.35rem;
  background:rgba(255,251,240,.96); border:2px solid var(--card-border);
  box-shadow:0 3px 10px rgba(0,0,0,.12), 0 3px 0 rgba(200,160,0,.3);
  color:var(--text-mid); transition:all .2s;
}
.rightbar-btn span { font-size:.56rem; font-weight:700; color:var(--text-light); }
.rightbar-btn:hover { transform:scale(1.08) translateY(-2px); color:var(--text); }

/* ===== MAIN CONTENT (Student) ===== */
body.student-layout .rpg-main {
  position:relative; z-index:1;
  margin-top:var(--topbar-h); margin-left:var(--sidebar-w);
  padding:20px 72px 60px 16px;
  min-height:calc(100vh - var(--topbar-h));
}

/* ================================================================
   ADMIN / TEACHER LAYOUT — Clean Panel
   ================================================================ */
body.admin-layout {
  background:#F0F2FD;
}
.admin-navbar {
  position:fixed; top:0; left:0; right:0; min-height:56px;
  z-index:1000;
  background:#FFFFFF; border-bottom:1px solid #E2E8F0;
  box-shadow:0 1px 8px rgba(0,0,0,.06);
  display:flex; align-items:center; padding:8px 20px; gap:14px; flex-wrap:wrap;
}
.admin-brand {
  display:flex; align-items:center; gap:8px;
  font-family:'Kanit',sans-serif; font-weight:800; font-size:1.05rem;
  color:#5B21B6; text-decoration:none; flex-shrink:0;
}
.admin-brand:hover { color:#7C3AED; }
.admin-menu-toggle {
  display:none;
  width:40px;
  height:40px;
  flex:0 0 40px;
  border:1px solid #CBD5E0;
  border-radius:10px;
  background:#FFFFFF;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:4px;
  padding:0;
  cursor:pointer;
}
.admin-menu-toggle span {
  width:18px;
  height:2px;
  border-radius:2px;
  background:#5B21B6;
  transition:transform .18s, opacity .18s;
}
.admin-navbar.open .admin-menu-toggle span:nth-child(1) { transform:translateY(6px) rotate(45deg); }
.admin-navbar.open .admin-menu-toggle span:nth-child(2) { opacity:0; }
.admin-navbar.open .admin-menu-toggle span:nth-child(3) { transform:translateY(-6px) rotate(-45deg); }
.admin-nav-backdrop {
  display:none;
  position:fixed;
  inset:0;
  z-index:980;
  background:rgba(15,23,42,.44);
}
.admin-nav-backdrop.show { display:block; }
@media (min-width:769px) {
  .admin-nav-backdrop.show { display:none; }
  body.admin-menu-open { overflow:auto; }
}
.admin-nav-links {
  display:flex; gap:2px; list-style:none; padding:0; margin:0;
  flex-wrap:wrap; flex:1; min-width:0;
}
.admin-nav-links li { flex-shrink:0; }
.admin-nav-links a {
  display:inline-flex; align-items:center; gap:4px;
  padding:6px 10px; border-radius:8px;
  color:#718096; font-size:.82rem; font-weight:600;
  text-decoration:none; transition:all .2s; white-space:nowrap;
}
.admin-nav-links a:hover { background:#EEF2FF; color:#5B21B6; }
.admin-user { margin-left:auto; display:flex; align-items:center; gap:10px; flex-shrink:0; }
@media (max-width:1100px) {
  .admin-nav-links a { padding:5px 8px; font-size:.78rem; }
}
.admin-logout {
  display:inline-flex; align-items:center; gap:5px;
  padding:6px 14px; border-radius:8px;
  background:linear-gradient(180deg,#FF7777,#FF4444); color:#fff;
  font-size:.82rem; font-weight:700; text-decoration:none;
  box-shadow:0 2px 0 #CC2222; transition:all .2s;
}
.admin-logout:hover { transform:translateY(-1px); color:#fff; }

body.admin-layout .rpg-main {
  margin-top:72px; padding:24px;
  min-height:calc(100vh - 72px);
}

/* ================================================================
   CARDS
   ================================================================ */
.rpg-card {
  background:var(--card-bg);
  border:2px solid var(--card-border);
  border-radius:20px; padding:20px;
  box-shadow:var(--card-shadow); position:relative;
}
.rpg-card-title {
  font-family:'Kanit',sans-serif; font-weight:700;
  font-size:1.05rem; color:var(--text); margin-bottom:12px;
}
body.admin-layout .rpg-card {
  background:#FFFFFF; border:1px solid #E2E8F0;
  border-radius:14px; box-shadow:0 2px 8px rgba(0,0,0,.06);
}
body.admin-layout .rpg-card-title { color:#1A202C; }

/* ================================================================
   BUTTONS
   ================================================================ */
.rpg-btn, .btn-rpg {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  font-family:'Sarabun',sans-serif; font-weight:700; font-size:.92rem;
  padding:10px 22px; border:none; border-radius:50px;
  cursor:pointer; transition:all .15s; text-decoration:none; white-space:nowrap;
}
/* Primary (red) */
.rpg-btn {
  background:linear-gradient(180deg,#FF7777,#FF4444);
  color:#fff;
  box-shadow:0 4px 0 #CC2222;
}
.rpg-btn:hover  { transform:translateY(-2px); box-shadow:0 6px 0 #CC2222; color:#fff; }
.rpg-btn:active { transform:translateY(2px); box-shadow:0 2px 0 #CC2222; }
.rpg-btn:disabled { opacity:.5; cursor:not-allowed; transform:none !important; }

/* Green */
.rpg-btn.rpg-btn-green, .rpg-btn-green {
  background:linear-gradient(180deg,#66DD88,#44BB66);
  color:#fff;
  box-shadow:0 4px 0 #228844;
}
.rpg-btn-green:hover { transform:translateY(-2px); box-shadow:0 6px 0 #228844; color:#fff; }

/* Purple */
.rpg-btn.rpg-btn-purple, .rpg-btn-purple {
  background:linear-gradient(180deg,#AA77EE,#8844CC);
  color:#fff;
  box-shadow:0 4px 0 #662299;
}
.rpg-btn-purple:hover { transform:translateY(-2px); box-shadow:0 6px 0 #662299; color:#fff; }

/* Ghost */
.rpg-btn-ghost {
  background:rgba(255,255,255,.8) !important;
  color:var(--text-mid) !important;
  border:2px solid var(--card-border) !important;
  box-shadow:0 3px 0 rgba(200,160,0,.25) !important;
}
.rpg-btn-ghost:hover { background:var(--cream-dark) !important; color:var(--text) !important; }

/* Danger */
.rpg-btn-danger {
  background:linear-gradient(180deg,#FF7777,#FF4444) !important;
  color:#fff !important;
  box-shadow:0 4px 0 #CC2222 !important;
}

/* Admin button overrides */
body.admin-layout .rpg-btn {
  border-radius:8px; box-shadow:none;
}
body.admin-layout .rpg-btn:hover { transform:none; box-shadow:none; }

/* ================================================================
   FORMS
   ================================================================ */
.rpg-input, .form-control {
  background:rgba(255,255,255,.92) !important;
  border:2px solid var(--card-border) !important;
  border-radius:12px !important; color:var(--text) !important;
  padding:10px 14px !important; font-family:'Sarabun',sans-serif !important;
  transition:border-color .2s !important; font-size:.95rem !important;
}
.rpg-input:focus, .form-control:focus {
  border-color:var(--orange) !important;
  box-shadow:0 0 0 3px rgba(255,150,0,.15) !important; outline:none !important;
}
select.rpg-input, select.form-control { cursor:pointer; }
body.admin-layout .rpg-input,
body.admin-layout .form-control {
  background:#FFFFFF !important; border:1px solid #CBD5E0 !important;
  border-radius:8px !important;
}
body.admin-layout .rpg-input:focus, body.admin-layout .form-control:focus {
  border-color:#7C3AED !important; box-shadow:0 0 0 3px rgba(124,58,237,.12) !important;
}
label, .form-label {
  font-weight:700; font-size:.88rem; color:var(--text-mid);
  margin-bottom:5px; display:block;
}
body.admin-layout label, body.admin-layout .form-label { color:#4A5568; }

/* ================================================================
   TABLE
   ================================================================ */
body.admin-layout .table { color:var(--text); }
body.admin-layout table {
  border-collapse:collapse;
}
body.admin-layout .table thead th {
  background:#F7F8FF; color:#5B21B6;
  font-family:'Kanit',sans-serif; font-size:.82rem; font-weight:700;
  border-bottom:2px solid #E2E8F0; padding:10px 12px;
}
body.admin-layout .table td { padding:10px 12px; border-bottom:1px solid #F0F2F8; vertical-align:middle; }
body.admin-layout th,
body.admin-layout td {
  overflow-wrap:anywhere;
}
body.admin-layout .table-responsive,
body.admin-layout .tbl,
body.admin-layout .ex-tbl,
body.admin-layout .bk-table,
body.admin-layout .card-panel {
  max-width:100%;
}

/* ================================================================
   STATUS PILLS
   ================================================================ */
.status-pill {
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 10px; border-radius:20px; font-size:.72rem; font-weight:700;
}
.pill-published { background:#D1FAE5; color:#065F46; }
.pill-draft     { background:#F3F4F6; color:#6B7280; }
body.student-layout .pill-published { background:rgba(82,201,122,.2); color:#1A6A30; border:1px solid rgba(82,201,122,.4); }
body.student-layout .pill-draft     { background:rgba(0,0,0,.1); color:var(--text-light); border:1px solid rgba(0,0,0,.1); }

/* ================================================================
   RARITY
   ================================================================ */
.rarity-common    { border-color:#9CA3AF; }
.rarity-uncommon  { border-color:#10B981; }
.rarity-rare      { border-color:#3B82F6; }
.rarity-epic      { border-color:#8B5CF6; }
.rarity-legendary { border-color:var(--yellow);}

/* ================================================================
   CLASS ACCENTS
   ================================================================ */
.class-warrior  { color:#FF5C5C; }
.class-mage     { color:#8855CC; }
.class-assassin { color:#4488FF; }
.class-guard    { color:#52C97A; }
.class-support  { color:#FFB800; }
.class-archer   { color:#FF8833; }

/* ================================================================
   MODAL
   ================================================================ */
.rpg-modal-backdrop {
  display:none; position:fixed; inset:0;
  background: var(--modal-backdrop);
  backdrop-filter: blur(var(--modal-blur));
  -webkit-backdrop-filter: blur(var(--modal-blur));
  z-index:2000;
  align-items:flex-start; justify-content:center;
  padding: var(--modal-pad-y) 20px; overflow-y:auto;
}
.rpg-modal-backdrop.show { display:flex; }
.rpg-modal {
  background:var(--card-bg); border:2px solid var(--card-border);
  border-radius:24px; padding:28px; width:100%; max-width:620px;
  max-height: var(--modal-max-h); overflow-y: auto; overscroll-behavior: contain;
  box-shadow:0 10px 50px rgba(0,0,0,.2); animation:popIn .2s ease-out;
}
body.admin-layout .rpg-modal {
  background:#FFFFFF; border:1px solid #E2E8F0; border-radius:16px;
}

/* ================================================================
   NPC BUTTON
   ================================================================ */
.rpg-npc-btn {
  position:fixed; bottom:20px; right:20px;
  width:54px; height:54px; border-radius:50%;
  background:linear-gradient(135deg,#8855CC,#AA77EE);
  border:3px solid #FFFFFF; font-size:1.6rem;
  cursor:pointer;
  box-shadow:0 4px 16px rgba(136,80,200,.4), 0 4px 0 #662299;
  z-index:1050; transition:all .2s;
  display:flex; align-items:center; justify-content:center;
  animation:npcFloat 3s ease-in-out infinite;
}
.rpg-npc-btn:hover { transform:scale(1.1); }

/* ================================================================
   FOOTER
   ================================================================ */
.rpg-footer { display:none; }
body.admin-layout .rpg-footer {
  display:block; padding:12px 24px;
  border-top:1px solid #E2E8F0; background:#FFFFFF;
  color:#A0AEC0; font-size:.8rem;
}

/* ================================================================
   SCROLLBAR
   ================================================================ */
::-webkit-scrollbar { width:8px; height:8px; }
::-webkit-scrollbar-track { background:rgba(0,0,0,.05); border-radius:4px; }
::-webkit-scrollbar-thumb { background:rgba(0,0,0,.18); border-radius:4px; }
::-webkit-scrollbar-thumb:hover { background:rgba(0,0,0,.3); }

/* ================================================================
   ANIMATIONS
   ================================================================ */
@keyframes npcFloat {
  0%,100% { transform:translateY(0); }
  50%      { transform:translateY(-5px); }
}
@keyframes fadeUp {
  from { opacity:0; transform:translateY(10px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes popIn {
  from { opacity:0; transform:scale(.95); }
  to   { opacity:1; transform:scale(1); }
}
@keyframes flashDamage {
  0%   { background:rgba(255,80,80,.5); }
  100% { background:transparent; }
}
.fade-up    { animation:fadeUp .3s ease-out; }
.pop-in     { animation:popIn .25s ease-out; }
.flash-damage { animation:flashDamage .6s ease-out; }

/* ================================================================
   INFO ICON (click → centered modal)
   ================================================================ */
.info-tip {
  display:inline-flex; align-items:center; justify-content:center;
  width:16px; height:16px; margin-left:5px; padding:0;
  border:1.5px solid currentColor; border-radius:50%;
  font-family:'Kanit',sans-serif; font-weight:800; font-size:.62rem;
  color:currentColor; opacity:.75; cursor:pointer; user-select:none;
  background:transparent; line-height:1; vertical-align:middle;
  transition:opacity .15s, transform .15s; flex-shrink:0;
}
.info-tip:hover, .info-tip:focus { opacity:1; outline:none; transform:scale(1.15); }
.info-tip .info-body { display:none; }

#infoModalBackdrop {
  position:fixed; inset:0;
  background: var(--modal-backdrop);
  backdrop-filter: blur(var(--modal-blur));
  -webkit-backdrop-filter: blur(var(--modal-blur));
  z-index:10000;
  display:none; align-items:center; justify-content:center; padding:20px;
  animation:fadeIn .15s ease-out;
}
#infoModalBackdrop.show { display:flex; }
#infoModalBox {
  background:#fff; border:3px solid var(--card-border, #E8C97A);
  border-radius:18px; padding:24px 26px; max-width:440px; width:100%;
  max-height: var(--modal-max-h); overflow-y: auto; overscroll-behavior: contain;
  box-shadow:0 20px 60px rgba(0,0,0,.3); font-family:'Sarabun',sans-serif;
  animation:popIn .2s ease-out; position:relative;
}

/* ================================================================
   Universal modal viewport-fit fallback — applies to all *.modal-inner
   custom inline modals across PHP pages
   ================================================================ */
.modal-inner {
  max-height: var(--modal-max-h);
  overflow-y: auto;
  overscroll-behavior: contain;
}
@media (max-width: 768px) {
  .rpg-modal-backdrop, .app-dialog-backdrop, #infoModalBackdrop {
    padding: var(--modal-pad-y-sm) 10px;
  }
  .rpg-modal, .app-dialog, #infoModalBox, .modal-inner {
    max-height: var(--modal-max-h-sm);
  }
}
#infoModalBox h4 {
  font-family:'Kanit'; font-weight:800; color:var(--purple,#7C5CFF);
  font-size:1.15rem; margin:0 0 12px; padding-right:30px;
}
#infoModalBox .info-text {
  font-size:.95rem; line-height:1.7; color:#333;
}
#infoModalBox .info-close {
  position:absolute; top:10px; right:12px;
  width:32px; height:32px; border:none; background:#F3EEFF; color:var(--purple);
  border-radius:50%; font-size:1.1rem; font-weight:800; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  transition:background .15s;
}
#infoModalBox .info-close:hover { background:var(--purple,#7C5CFF); color:#fff; }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width:1100px) {
  body.admin-layout .rpg-main { padding:18px; }
  .admin-navbar {
    align-items:flex-start;
    gap:8px;
    padding:8px 12px;
  }
  .admin-brand { width:auto; }
  .admin-nav-links {
    order:3;
    width:100%;
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    padding:2px 0 4px;
    scrollbar-width:thin;
  }
  .admin-nav-links li { flex:0 0 auto; }
  .admin-user {
    margin-left:auto;
    max-width:calc(100vw - 190px);
  }
  .admin-user > span {
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
}

@media (max-width:900px) {
  :root { --topbar-h:112px; }
  body.student-layout {
    background-attachment:scroll;
  }
  body.student-layout::before {
    background:rgba(255,255,255,.74);
  }
  .game-topbar {
    height:auto;
    min-height:var(--topbar-h);
    padding:8px 10px;
    gap:8px;
    align-items:flex-start;
    flex-wrap:wrap;
  }
  .sidebar-toggle {
    display:flex;
    order:1;
  }
  .topbar-avatar {
    order:2;
    width:38px;
    height:38px;
    font-size:1.08rem;
  }
  .topbar-info {
    order:3;
    flex:1 1 92px;
    min-width:68px;
    padding-top:2px;
  }
  .topbar-name,
  .topbar-class {
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .topbar-name { font-size:.8rem; }
  .topbar-class { font-size:.62rem; }
  .topbar-bars {
    order:5;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    flex:1 0 100%;
    width:100%;
    min-width:0;
    max-width:none;
    gap:6px;
  }
  .bar-row {
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    align-items:center;
    gap:2px 5px;
    min-width:0;
    padding:3px 5px;
    border:1px solid rgba(0,0,0,.06);
    border-radius:9px;
    background:rgba(255,255,255,.45);
  }
  .bar-label { width:auto; font-size:.6rem; line-height:1.05; }
  .bar-track {
    grid-column:1 / -1;
    height:6px;
    min-width:0;
    width:100%;
  }
  .bar-val {
    display:block;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:.6rem;
    text-align:right;
  }
  .bar-row .info-tip {
    display:inline-flex;
    width:15px;
    height:15px;
    margin-left:0;
    font-size:.58rem;
    justify-self:end;
  }
  .topbar-stats {
    order:4;
    margin-left:0;
    gap:4px;
    flex-shrink:0;
    flex-direction:row;
    align-items:center;
    align-self:flex-start;
  }
  .stat-pill {
    padding:3px 7px;
    font-size:.72rem;
  }
  #notifWrap {
    align-self:center;
  }
  #notifWrap .sidebar-btn {
    width:32px !important;
    height:32px !important;
  }
  #notifList {
    max-width:calc(100vw - 20px);
  }
  .stat-pill.gold-pill img { width:16px !important; height:16px !important; }
  .game-sidebar {
    top:0;
    right:auto;
    bottom:0;
    left:0;
    width:76px;
    height:auto;
    z-index:2200;
    border-right:2px solid var(--card-border);
    border-top:0;
    box-shadow:4px 0 18px rgba(0,0,0,.16);
    flex-direction:column;
    justify-content:flex-start;
    align-items:center;
    padding:14px 8px calc(14px + env(safe-area-inset-bottom));
    gap:6px;
    overflow-x:hidden;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    transform:translateX(-100%);
    transition:transform .2s ease;
  }
  body.sidebar-open .game-sidebar {
    transform:translateX(0);
  }
  .sidebar-logo {
    display:flex;
    width:48px;
    height:48px;
    margin-bottom:8px;
  }
  .sidebar-spacer { display:block; flex:1; }
  .sidebar-btn {
    flex:0 0 auto;
    width:52px;
    height:50px;
    border-radius:13px;
  }
  .sidebar-btn img {
    width:24px !important;
    height:24px !important;
  }
  .sidebar-btn .btn-lbl { font-size:.56rem; }
  body.student-layout { background-attachment:scroll; }
  body.student-layout .rpg-main {
    margin-left:0;
    margin-top:var(--topbar-h);
    padding:14px 12px 60px;
    min-height:calc(100vh - var(--topbar-h));
  }
  .game-rightbar { display:none; }
  .game-deco { display:none; }
  .rpg-npc-btn {
    width:50px;
    height:50px;
    right:14px;
    bottom:22px;
  }
  .app-toast-stack {
    top:86px;
    right:10px;
    max-width:calc(100vw - 20px);
  }
}

@media (max-width:768px) {
  :root { --sidebar-w:56px; --topbar-h:112px; }
  body.admin-menu-open {
    overflow:hidden;
  }
  body.admin-layout .rpg-main {
    margin-top:56px;
    padding:14px 12px 32px;
  }
  .admin-navbar {
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:1220;
    flex-wrap:nowrap;
    min-height:auto;
    height:56px;
    padding:8px 10px;
    align-items:center;
    gap:8px;
  }
  .admin-brand {
    flex:1 1 auto;
    min-width:0;
    font-size:1rem;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .admin-menu-toggle {
    display:flex;
    order:-1;
  }
  .admin-nav-backdrop {
    top:56px;
    z-index:1180;
  }
  .admin-nav-links {
    display:flex;
    position:fixed;
    top:56px;
    left:0;
    bottom:78px;
    z-index:1230;
    width:min(300px, 86vw);
    margin:0 !important;
    padding:14px;
    border-top:0;
    border-right:1px solid #E2E8F0;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    flex-direction:column;
    flex-wrap:nowrap;
    gap:8px;
    background:#FFFFFF;
    box-shadow:8px 0 24px rgba(15,23,42,.16);
    transform:translateX(-105%);
    transition:transform .2s ease;
  }
  .admin-navbar.open .admin-nav-links {
    display:flex;
    transform:translateX(0);
  }
  .admin-nav-links li {
    min-width:0;
    width:100%;
  }
  .admin-nav-links a {
    width:100%;
    justify-content:flex-start;
    white-space:normal;
    min-height:42px;
    padding:9px 11px;
    font-size:.84rem;
    background:#F8FAFC;
  }
  .admin-user {
    display:none;
    position:fixed;
    left:0;
    bottom:0;
    z-index:1231;
    max-width:min(300px, 86vw);
    width:min(300px, 86vw);
    margin-left:0;
    flex-direction:column;
    align-items:stretch;
    gap:8px;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    border-top:1px solid #E2E8F0;
    border-right:1px solid #E2E8F0;
    background:#FFFFFF;
    box-shadow:8px 0 24px rgba(15,23,42,.16);
    transform:translateX(-105%);
    transition:transform .2s ease;
  }
  .admin-navbar.open .admin-user {
    display:flex;
    transform:translateX(0);
  }
  .admin-user > span {
    min-width:0;
    flex:1;
  }
  .rpg-card {
    border-radius:16px;
    padding:14px;
  }
  .rpg-btn, .btn-rpg {
    min-height:40px;
    padding:9px 14px;
    white-space:normal;
    text-align:center;
  }
  .rpg-modal-backdrop {
    padding:14px 10px;
    align-items:flex-start;
  }
  .rpg-modal,
  body.admin-layout .rpg-modal {
    border-radius:16px;
    padding:18px;
    max-width:100%;
  }
  .app-dialog-backdrop { padding:14px; }
  .app-dialog {
    max-width:100%;
    border-radius:16px;
    padding:18px;
  }
  .app-dialog-actions {
    justify-content:stretch;
  }
  .app-dialog-btn {
    flex:1 1 130px;
    min-height:40px;
  }
  #infoModalBackdrop { padding:14px; }
  #infoModalBox {
    max-width:100%;
    padding:20px;
    border-radius:16px;
  }
  body.admin-layout .table,
  body.admin-layout table,
  .small-tbl {
    min-width:680px;
  }
  body.admin-layout .rpg-card,
  body.admin-layout .card-panel,
  .tbl, .ex-tbl, .bk-table {
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  body.admin-layout .container,
  body.admin-layout .container-fluid {
    max-width:100% !important;
    padding-left:10px !important;
    padding-right:10px !important;
  }
  body.admin-layout .dash-wrap,
  body.admin-layout .u-wrap,
  body.admin-layout .bk-wrap,
  body.admin-layout .rp-wrap,
  body.admin-layout .q-wrap,
  body.admin-layout .course-wrap,
  body.admin-layout .rb-wrap,
  body.admin-layout .wrap {
    max-width:100% !important;
    padding:14px 10px 28px !important;
  }
  body.admin-layout .dash-wrap {
    overflow-x:hidden;
  }
  body.admin-layout .dash-wrap .stat-grid,
  body.admin-layout .dash-wrap .quick-grid {
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:10px !important;
  }
  body.admin-layout .dash-wrap .stat-card,
  body.admin-layout .dash-wrap .quick-btn,
  body.admin-layout .dash-wrap .panel {
    width:100%;
    min-width:0;
  }
  body.admin-layout .dash-wrap .panel {
    overflow:hidden;
    padding:14px !important;
  }
  body.admin-layout .dash-wrap table {
    width:100% !important;
    min-width:0 !important;
    table-layout:fixed;
  }
  body.admin-layout .dash-wrap th,
  body.admin-layout .dash-wrap td {
    padding:7px 6px !important;
    font-size:.78rem !important;
    white-space:normal !important;
    overflow-wrap:anywhere;
    word-break:break-word;
  }
  body.admin-layout .dash-wrap .role-pill,
  body.admin-layout .dash-wrap .status-pill {
    display:inline-block;
    max-width:100%;
    white-space:normal;
    text-align:center;
  }
  body.admin-layout .dash-wrap .quick-btn {
    flex-direction:column !important;
    justify-content:center;
    text-align:center;
    min-height:86px;
    padding:10px 8px !important;
  }
  body.admin-layout .dash-wrap .quick-btn-icon {
    flex:0 0 auto;
    font-size:1.35rem !important;
  }
  body.admin-layout .dash-wrap .quick-btn-label {
    font-size:.76rem !important;
    line-height:1.25;
  }
  body.admin-layout .dash-wrap .stat-card {
    padding:12px 8px !important;
  }
  body.admin-layout .dash-wrap .stat-num {
    font-size:1.45rem !important;
  }
  body.admin-layout .dash-wrap .stat-lbl {
    font-size:.72rem !important;
    overflow-wrap:anywhere;
  }
  body.admin-layout .u-wrap,
  body.admin-layout .bk-wrap,
  body.admin-layout .rp-wrap {
    overflow-x:hidden;
  }
  body.admin-layout .u-wrap *,
  body.admin-layout .bk-wrap *,
  body.admin-layout .rp-wrap * {
    min-width:0;
  }
  body.admin-layout .u-wrap .toolbar {
    display:grid !important;
    grid-template-columns:1fr !important;
    width:100%;
  }
  body.admin-layout .u-wrap .toolbar select,
  body.admin-layout .u-wrap .toolbar input,
  body.admin-layout .u-wrap .btn,
  body.admin-layout .bk-wrap .btn {
    width:100%;
  }
  body.admin-layout .u-wrap .tbl {
    width:100%;
    max-width:100%;
    overflow-x:auto;
    padding:10px !important;
  }
  body.admin-layout .u-wrap .tbl table {
    min-width:760px !important;
  }
  body.admin-layout .u-wrap .tbl th,
  body.admin-layout .u-wrap .tbl td {
    white-space:normal;
  }
  body.admin-layout .u-wrap .tbl td:last-child {
    white-space:nowrap;
  }
  body.admin-layout .bk-wrap .bk-panel,
  body.admin-layout .rp-wrap .panel {
    width:100%;
    max-width:100%;
    overflow:hidden;
    padding:14px !important;
  }
  body.admin-layout .bk-wrap table,
  body.admin-layout .rp-wrap table {
    width:100% !important;
    min-width:0 !important;
    table-layout:fixed;
  }
  body.admin-layout .bk-wrap th,
  body.admin-layout .bk-wrap td,
  body.admin-layout .rp-wrap th,
  body.admin-layout .rp-wrap td {
    padding:7px 6px !important;
    font-size:.76rem !important;
    white-space:normal !important;
    overflow-wrap:anywhere;
    word-break:break-word;
  }
  body.admin-layout .bk-wrap th:last-child,
  body.admin-layout .bk-wrap td:last-child {
    width:76px;
    white-space:nowrap !important;
    text-align:right;
  }
  body.admin-layout .bk-wrap th:nth-child(2),
  body.admin-layout .bk-wrap td:nth-child(2) {
    width:70px;
  }
  body.admin-layout .bk-wrap th:nth-child(3),
  body.admin-layout .bk-wrap td:nth-child(3) {
    width:92px;
  }
  body.admin-layout .rp-wrap .stat-grid {
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:10px !important;
  }
  body.admin-layout .rp-wrap .stat-card {
    width:100%;
    padding:12px 8px !important;
  }
  body.admin-layout .rp-wrap .stat-num {
    font-size:1.45rem !important;
  }
  body.admin-layout .rp-wrap .stat-lbl {
    font-size:.72rem !important;
    overflow-wrap:anywhere;
  }
  body.admin-layout .rp-wrap .bar {
    width:100%;
  }
  body.admin-layout .rp-wrap .bar-fill {
    min-width:18px;
    padding-left:4px;
    font-size:.68rem;
  }
  body.admin-layout h1,
  body.admin-layout h2 {
    font-size:clamp(1.08rem, 5vw, 1.45rem) !important;
    line-height:1.28;
  }
  body.admin-layout h3 {
    font-size:clamp(.98rem, 4vw, 1.18rem) !important;
    line-height:1.32;
  }
  body.admin-layout [style*="grid-template-columns:1fr 1fr"],
  body.admin-layout [style*="grid-template-columns:1fr 2fr 2fr"],
  body.admin-layout [style*="grid-template-columns:1fr 1fr 1fr"],
  body.admin-layout [style*="grid-template-columns:2fr 1fr"],
  body.admin-layout [style*="grid-template-columns:2fr 1fr 80px"],
  body.admin-layout [style*="grid-template-columns:340px"],
  body.admin-layout .crit-row,
  body.admin-layout .eval-row {
    grid-template-columns:1fr !important;
  }
  body.admin-layout .d-flex.justify-content-between,
  body.admin-layout .d-flex.align-items-center.justify-content-between {
    align-items:flex-start !important;
  }
  body.admin-layout .toolbar,
  body.admin-layout .filter-footer,
  body.admin-layout .filter-actions,
  body.admin-layout .modal-actions {
    align-items:stretch !important;
  }
  body.admin-layout .toolbar > *,
  body.admin-layout .filter-actions > *,
  body.admin-layout .modal-actions > * {
    min-width:0 !important;
  }
  body.admin-layout .embedded-tool {
    min-height:1200px;
    border-radius:10px;
  }
  body.admin-layout iframe {
    max-width:100%;
  }
  .modal,
  .modal-inv {
    padding:14px 10px !important;
  }
  .modal-inner,
  .modal-box {
    max-width:100% !important;
    width:100% !important;
    border-radius:16px !important;
    padding:18px !important;
  }
}

@media (max-width:560px) {
  .admin-navbar.open .admin-nav-links {
    display:flex;
  }
  .admin-logout {
    justify-content:center;
    min-height:38px;
  }
  body.admin-layout .rpg-main {
    padding-left:8px;
    padding-right:8px;
  }
  body.student-layout .rpg-main {
    padding-left:10px;
    padding-right:10px;
  }
  .topbar-info {
    flex-basis:72px;
  }
  .topbar-bars {
    min-width:0;
  }
  .bar-val { display:block; }
  .topbar-stats .gold-pill {
    max-width:92px;
    overflow:hidden;
  }
  .topbar-stats .gold-pill .info-tip {
    display:none;
  }
  .app-toast-stack {
    left:10px;
    right:10px;
    align-items:stretch;
    width:auto;
  }
  .app-toast {
    width:100%;
  }
  .rpg-card-title {
    font-size:.98rem;
  }
  .stat-pill {
    font-size:.7rem;
  }
  body.student-layout .shop-wrap,
  body.student-layout .cs-wrap,
  body.student-layout .sk-wrap,
  body.student-layout .rs-wrap,
  body.student-layout .th-wrap {
    padding-left:10px !important;
    padding-right:10px !important;
  }
  body.student-layout .shop-grid {
    grid-template-columns:repeat(auto-fill,minmax(138px,1fr)) !important;
  }
  body.student-layout .rs-grid {
    grid-template-columns:1fr !important;
  }
  body.student-layout .class-banner,
  body.student-layout .skill-hdr,
  body.student-layout .th-head {
    align-items:flex-start !important;
  }
}