:root {
  --green-50: #f0fdf4;
  --green-100: #dcfce7;
  --green-200: #bbf7d0;
  --green-300: #86efac;
  --green-400: #4ade80;
  --green-500: #22c55e;
  --green-600: #16a34a;
  --green-700: #15803d;
  --green-800: #166534;
  --green-900: #14532d;
  --emerald: #10b981;
  --teal: #0d9488;
  --amber: #f59e0b;
  --red: #ef4444;
  --blue: #3b82f6;
  --purple: #8b5cf6;
  --bg: #f8fffe;
  --surface: #ffffff;
  --surface2: #f0fdf4;
  --border: #d1fae5;
  --text: #0f2d1c;
  --text2: #374151;
  --text3: #6b7280;
  --shadow: 0 4px 24px rgba(22,163,74,0.10);
  --shadow-lg: 0 8px 40px rgba(22,163,74,0.16);
  --radius: 16px;
  --radius-sm: 10px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: 'Plus Jakarta Sans', sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; overflow-x: hidden; }
body.readable-font { font-family: Arial, Verdana, sans-serif; }
body.text-large { font-size: 18px; }
body.text-small { font-size: 14px; }
body.high-contrast { --bg:#07140d; --surface:#0d2115; --surface2:#122d1d; --border:#55d184; --text:#f0fff4; --text2:#d8ffe3; --text3:#a7f3c2; }
body.large-buttons button, body.large-buttons .btn, body.large-buttons input, body.large-buttons select { min-height: 46px; }
body.reduce-motion *, body.reduce-motion *::before, body.reduce-motion *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--green-50); }
::-webkit-scrollbar-thumb { background: var(--green-300); border-radius: 99px; }
.page { display: none; min-height: 100vh; }
.page.active { display: flex; }
#authPage { background: linear-gradient(135deg, #0f2d1c 0%, #14532d 45%, #166534 100%); align-items: center; justify-content: center; position: relative; overflow: hidden; padding: 24px; }
#authPage::before, #authPage::after { content:''; position:absolute; border-radius:50%; pointer-events:none; }
#authPage::before { width:600px; height:600px; top:-150px; right:-120px; background: radial-gradient(circle, rgba(74,222,128,0.18), transparent 70%); animation: pulse-bg 7s ease-in-out infinite; }
#authPage::after { width:420px; height:420px; bottom:-100px; left:-80px; background: radial-gradient(circle, rgba(16,185,129,0.16), transparent 70%); animation: pulse-bg 8s ease-in-out infinite reverse; }
@keyframes pulse-bg { 0%,100%{transform:scale(1);opacity:.8} 50%{transform:scale(1.14);opacity:1} }
.floating-leaves { position: absolute; inset: 0; pointer-events: none; }
.floating-leaves span { position:absolute; opacity:.16; font-size:24px; animation: float-leaf 10s ease-in-out infinite; }
.floating-leaves span:nth-child(1){top:10%;left:5%}.floating-leaves span:nth-child(2){top:25%;right:8%;animation-delay:2s}.floating-leaves span:nth-child(3){top:60%;left:3%;animation-delay:4s}.floating-leaves span:nth-child(4){bottom:15%;right:5%;animation-delay:1s}.floating-leaves span:nth-child(5){top:45%;right:15%;animation-delay:3s}
@keyframes float-leaf { 0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-18px) rotate(15deg)} }
.auth-card { position:relative; z-index:2; width:100%; max-width:460px; background:rgba(255,255,255,.97); border-radius:24px; padding:34px; box-shadow: 0 32px 80px rgba(0,0,0,.28); animation: card-in .55s cubic-bezier(.34,1.56,.64,1); }
@keyframes card-in { from{opacity:0;transform:translateY(40px) scale(.96)} to{opacity:1;transform:none} }
.auth-back-link { display:inline-flex; align-items:center; gap:7px; padding:8px 12px; background:var(--green-50); border:1px solid var(--green-200); border-radius:999px; color:var(--green-700); text-decoration:none; font-size:12px; font-weight:700; margin-bottom:18px; }
.auth-logo { display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--green-800); margin-bottom:8px; }
.logo-icon { width:48px; height:48px; border-radius:14px; background:linear-gradient(135deg,var(--green-500),var(--emerald)); color:white; display:grid; place-items:center; font-size:22px; box-shadow:0 4px 16px rgba(34,197,94,.4); }
.auth-logo h1 { font-family:'Space Grotesk',sans-serif; font-size:22px; line-height:1.05; }
.auth-logo span { color:var(--emerald); }

.brand-logo { display:block; object-fit:contain; }
.brand-logo-auth { width:58px; height:58px; filter: drop-shadow(0 6px 18px rgba(16,185,129,.22)); }
.brand-logo-sidebar { width:38px; height:38px; filter: drop-shadow(0 4px 10px rgba(16,185,129,.18)); flex:0 0 auto; }
.auth-logo { align-items:center; }
.auth-subtitle { margin-left:70px; }
@media(max-width:640px){ .auth-subtitle { margin-left:0; } }

.auth-subtitle { font-size:13px; color:var(--text3); margin: 0 0 20px 70px; }
.tab-switch, .lang-switch { display:flex; background:var(--green-50); border:1px solid var(--green-100); border-radius:12px; padding:4px; gap:4px; }
.lang-switch.compact { width:max-content; margin:0 0 16px auto; }
.tab-btn, .lang-switch button { flex:1; padding:9px 13px; border:0; background:transparent; border-radius:9px; font-family:inherit; font-size:13px; font-weight:800; color:var(--text3); cursor:pointer; }
.tab-btn.active, .lang-switch button.active { background:white; color:var(--green-700); box-shadow:0 2px 8px rgba(0,0,0,.08); }
.auth-error { display:none; background:#fef2f2; border:1px solid #fecaca; color:#dc2626; padding:10px 12px; border-radius:10px; font-size:13px; margin:14px 0; }
.form-group { margin-bottom:14px; }
.form-group label { display:block; font-size:13px; font-weight:800; color:var(--text2); margin-bottom:6px; }
.form-group input, .form-group select, .form-group textarea { width:100%; padding:12px 14px; border:2px solid var(--border); border-radius:12px; font-family:inherit; font-size:14px; color:var(--text); background:white; outline:none; transition:.2s; }
.form-group textarea { resize: vertical; min-height: 88px; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color:var(--green-400); box-shadow:0 0 0 4px rgba(74,222,128,.15); }
.btn-primary, .btn, .btn-add, .btn-save { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 16px; border:0; border-radius:12px; font-family:inherit; font-size:14px; font-weight:800; cursor:pointer; color:white; background:linear-gradient(135deg,var(--green-500),var(--emerald)); box-shadow:0 4px 16px rgba(34,197,94,.26); transition:.2s; text-decoration:none; }
.btn-primary { width:100%; }
.btn-primary:hover, .btn:hover, .btn-add:hover, .btn-save:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(34,197,94,.34); }
.btn-secondary { color:var(--green-700); background:var(--green-50); border:1px solid var(--green-200); box-shadow:none; }
.btn-danger { background:#fef2f2; color:#dc2626; border:1px solid #fecaca; box-shadow:none; }
.btn-dark { background:linear-gradient(135deg,#0f2d1c,#166534); }
.btn-blue { background:linear-gradient(135deg,#2563eb,#4f46e5); }
.demo-hint { text-align:center; font-size:12px; color:var(--text3); margin-top:18px; padding-top:14px; border-top:1px solid var(--border); line-height:1.7; }
#appPage { flex-direction: row; min-height:100vh; }
.sidebar { width:270px; min-height:100vh; background:linear-gradient(180deg,#0f2d1c,#14532d); display:flex; flex-direction:column; position:fixed; inset:0 auto 0 0; z-index:100; transition:transform .3s; }
.sidebar-logo { padding:24px 18px 18px; border-bottom:1px solid rgba(255,255,255,.08); }
.logo-wrap { display:flex; align-items:center; gap:10px; text-decoration:none; min-width:0; }
.logo-icon-sm { width:38px; height:38px; border-radius:11px; display:grid; place-items:center; font-size:17px; background:linear-gradient(135deg,var(--green-400),var(--emerald)); }
.sidebar-logo h2 { color:white; font-family:'Space Grotesk',sans-serif; font-size:15px; line-height:1.05; }
.sidebar-logo h2 span { color:var(--green-400); }
.sidebar-user { margin:16px 12px 0; padding:12px; border-radius:14px; background:rgba(255,255,255,.07); display:flex; align-items:center; gap:10px; }
.user-avatar { width:42px; height:42px; border-radius:50%; background:linear-gradient(135deg,var(--green-400),var(--amber)); color:white; display:grid; place-items:center; font-weight:900; overflow:hidden; flex-shrink:0; }
.user-avatar img { width:100%; height:100%; object-fit:cover; }
.user-name { font-size:13px; font-weight:800; color:white; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:160px; }
.user-role { font-size:11px; color:var(--green-300); }
.sidebar-nav { flex:1; overflow-y:auto; padding:14px 12px; }
.nav-section-label { font-size:10px; color:rgba(255,255,255,.35); font-weight:900; letter-spacing:.1em; text-transform:uppercase; padding: 0 8px; margin:16px 0 8px; }
.nav-item { width:100%; border:0; background:transparent; display:flex; align-items:center; gap:10px; padding:11px 12px; border-radius:11px; color:rgba(255,255,255,.68); font-family:inherit; font-size:13px; font-weight:650; cursor:pointer; text-align:left; margin-bottom:3px; transition:.2s; }
.nav-item:hover { background:rgba(255,255,255,.08); color:white; }
.nav-item.active { background:linear-gradient(135deg,rgba(74,222,128,.24),rgba(16,185,129,.18)); color:var(--green-300); box-shadow: inset 3px 0 0 var(--green-400); }
.nav-icon { width:20px; text-align:center; flex-shrink:0; }
.sidebar-bottom { padding:12px; border-top:1px solid rgba(255,255,255,.08); }
.logout-btn { width:100%; border:0; background:transparent; color:rgba(255,255,255,.58); border-radius:11px; padding:11px 12px; text-align:left; font-family:inherit; font-weight:700; cursor:pointer; }
.logout-btn:hover { background:rgba(239,68,68,.16); color:#f87171; }
.sidebar-close-btn { display:none; position:absolute; top:12px; right:12px; width:36px; height:36px; border:0; border-radius:50%; font-size:24px; background:rgba(255,255,255,.12); color:white; }
.main-content { margin-left:270px; min-height:100vh; flex:1; display:flex; flex-direction:column; }
.top-bar { position:sticky; top:0; z-index:50; background:white; border-bottom:1px solid var(--border); padding:14px 26px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.top-bar-title { font-size:19px; font-weight:900; color:var(--text); }
.top-bar-subtitle { font-size:12px; color:var(--text3); margin-top:2px; }
.top-bar-right { display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.mobile-menu-btn { display:none; width:40px; height:40px; border:1px solid var(--border); background:var(--green-50); border-radius:12px; color:var(--green-800); font-size:22px; }
.xp-chip, .accessibility-chip { display:inline-flex; align-items:center; gap:7px; border:1px solid var(--green-200); background:var(--green-50); color:var(--green-700); padding:8px 12px; border-radius:999px; font-size:12px; font-weight:900; white-space:nowrap; }
.accessibility-chip { border:1px solid #bfdbfe; background:#eff6ff; color:#1d4ed8; cursor:pointer; }
.content-area { padding:28px; flex:1; }
.page-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:20px; }
.page-head h2 { font-size:22px; font-weight:900; margin-bottom:5px; }
.page-head p { font-size:13px; color:var(--text3); line-height:1.5; }
.grid { display:grid; gap:16px; }
.grid-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.grid-4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
.auto-grid { grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow); transition:.25s; }
.card.hover:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.card h3 { font-size:16px; font-weight:900; margin-bottom:8px; }
.card p { font-size:13px; color:var(--text3); line-height:1.6; }
.stat-card { position:relative; overflow:hidden; }
.stat-card::before { content:''; position:absolute; inset:0 0 auto; height:3px; background:linear-gradient(90deg,var(--green-400),var(--emerald)); }
.stat-icon { width:44px; height:44px; border-radius:13px; background:var(--green-50); display:grid; place-items:center; font-size:21px; margin-bottom:12px; }
.stat-value { font-family:'Space Grotesk',sans-serif; font-size:31px; font-weight:900; line-height:1; }
.stat-label { font-size:12px; color:var(--text3); margin-top:4px; }
.hero-card { background:linear-gradient(135deg,#0f2d1c,#15803d); color:white; border-radius:var(--radius); padding:26px; position:relative; overflow:hidden; box-shadow:var(--shadow-lg); }
.hero-card::after { content:'🌿'; position:absolute; right:22px; bottom:-18px; font-size:110px; opacity:.08; }
.hero-card h2 { font-size:25px; font-weight:900; margin-bottom:8px; }
.hero-card p { color:var(--green-200); max-width:620px; line-height:1.6; }
.path-list { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin-top:18px; }
.path-step { background:rgba(255,255,255,.11); border:1px solid rgba(255,255,255,.16); border-radius:14px; padding:14px; min-height:102px; }
.path-step.done { background:rgba(74,222,128,.18); border-color:rgba(134,239,172,.45); }
.path-step .num { width:28px; height:28px; border-radius:50%; background:rgba(255,255,255,.16); display:grid; place-items:center; font-weight:900; margin-bottom:8px; }
.path-step strong { display:block; font-size:13px; margin-bottom:3px; }
.path-step small { color:var(--green-200); font-size:11px; line-height:1.4; }
.progress-line { margin-top:18px; height:9px; border-radius:999px; background:rgba(255,255,255,.16); overflow:hidden; }
.progress-fill { height:100%; background:linear-gradient(90deg,var(--green-400),var(--emerald)); border-radius:inherit; width:0; transition:width .8s ease; }
.filter-bar { display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 20px; }
.filter-btn { border:1px solid var(--green-200); background:white; color:var(--green-700); padding:8px 12px; border-radius:999px; font-family:inherit; font-size:12px; font-weight:900; cursor:pointer; }
.filter-btn.active, .filter-btn:hover { background:var(--green-600); color:white; border-color:var(--green-600); }
.media-card { cursor:pointer; display:flex; flex-direction:column; min-height:235px; }
.media-icon { height:96px; border-radius:14px; display:grid; place-items:center; font-size:42px; background:linear-gradient(135deg,#14532d,#15803d); color:white; margin-bottom:14px; position:relative; overflow:hidden; }
.media-icon::after { content:''; position:absolute; inset:0; background:radial-gradient(circle at top right,rgba(255,255,255,.16),transparent 60%); }
.pill { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; font-size:11px; font-weight:900; background:var(--green-50); color:var(--green-700); border:1px solid var(--green-200); white-space:nowrap; }
.pill.amber { background:#fffbeb; color:#d97706; border-color:#fde68a; }
.pill.red { background:#fef2f2; color:#dc2626; border-color:#fecaca; }
.pill.blue { background:#eff6ff; color:#2563eb; border-color:#bfdbfe; }
.pill.purple { background:#f5f3ff; color:#7c3aed; border-color:#ddd6fe; }
.card-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.table-wrap { overflow-x:auto; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); }
table { width:100%; border-collapse:collapse; min-width:740px; }
th { padding:13px 15px; background:var(--green-50); color:var(--text3); text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.05em; font-weight:900; border-bottom:1px solid var(--border); }
td { padding:13px 15px; color:var(--text2); font-size:13px; border-bottom:1px solid var(--border); vertical-align:top; }
tr:last-child td { border-bottom:0; }
tr:hover td { background:rgba(240,253,244,.55); }
.action-btns { display:flex; gap:6px; flex-wrap:wrap; }
.icon-btn, .btn-edit, .btn-delete { border:0; border-radius:9px; padding:7px 10px; font-family:inherit; font-size:12px; font-weight:800; cursor:pointer; }
.btn-edit { background:#eff6ff; color:#2563eb; }
.btn-delete { background:#fef2f2; color:#dc2626; }
.icon-btn { background:var(--green-50); color:var(--green-700); border:1px solid var(--green-200); }
.quiz-shell { max-width:760px; margin:0 auto; }
.question-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:28px; box-shadow:var(--shadow); }
.question-text { font-size:19px; font-weight:850; line-height:1.6; margin:14px 0 22px; }
.options-list { display:grid; gap:10px; }
.option-btn { text-align:left; padding:14px 16px; border-radius:12px; border:2px solid var(--border); background:var(--green-50); color:var(--text); font-family:inherit; font-weight:700; cursor:pointer; display:flex; align-items:center; gap:12px; }
.option-btn:hover { border-color:var(--green-400); }
.option-btn.correct { background:#dcfce7; border-color:var(--green-500); color:var(--green-800); }
.option-btn.wrong { background:#fef2f2; border-color:#ef4444; color:#991b1b; }
.option-label { width:30px; height:30px; border-radius:50%; border:2px solid currentColor; background:white; display:grid; place-items:center; flex-shrink:0; font-size:12px; font-weight:900; }
.result-circle { width:136px; height:136px; border-radius:50%; margin:0 auto 18px; display:grid; place-items:center; background:linear-gradient(135deg,var(--green-400),var(--emerald)); color:white; font-family:'Space Grotesk'; font-size:42px; font-weight:900; }
.chart-box { min-height:260px; }
.chart-container { position:relative; height:230px; }
.insight-list { display:grid; gap:10px; }
.insight-item { display:flex; gap:12px; background:var(--green-50); border:1px solid var(--green-100); padding:12px; border-radius:12px; color:var(--text2); font-size:13px; line-height:1.45; }
.profile-layout { display:grid; grid-template-columns:260px 1fr; gap:16px; align-items:start; }
.profile-photo-box { text-align:center; }
.profile-photo { width:150px; height:150px; border-radius:50%; margin:0 auto 12px; display:grid; place-items:center; overflow:hidden; background:linear-gradient(135deg,var(--green-400),var(--amber)); color:white; font-size:52px; font-weight:900; border:5px solid var(--green-100); }
.profile-photo img { width:100%; height:100%; object-fit:cover; }
.settings-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.empty-state { grid-column:1/-1; text-align:center; color:var(--text3); padding:34px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); }
.game-banner { background:linear-gradient(135deg,#0f2d1c,#0d9488); color:white; border-radius:var(--radius); padding:28px; display:grid; grid-template-columns:1.2fr .8fr; gap:20px; align-items:center; overflow:hidden; }
.game-banner h2 { font-size:28px; font-weight:900; margin-bottom:10px; }
.game-banner p { color:#d1fae5; line-height:1.6; }
.game-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-top:16px; }
.game-mini { background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18); border-radius:14px; padding:13px; text-align:center; }
.game-mini div { font-size:28px; margin-bottom:5px; }
.game-mini strong { font-size:12px; }
.certificate { background:white; border:8px double var(--green-500); border-radius:18px; padding:36px; text-align:center; max-width:760px; margin:0 auto; }
.certificate h2 { font-family:'Space Grotesk'; font-size:30px; color:var(--green-800); margin-bottom:12px; }
.certificate .cert-name { font-size:26px; font-weight:900; color:var(--green-700); margin:18px 0; }
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.48); backdrop-filter:blur(4px); display:none; align-items:center; justify-content:center; z-index:1000; padding:20px; }
.modal-overlay.open { display:flex; }
.modal-box { background:var(--surface); border-radius:20px; width:min(760px,96vw); max-height:92vh; overflow:auto; box-shadow:0 30px 90px rgba(0,0,0,.26); padding:24px; animation: modal-in .25s ease; }
@keyframes modal-in { from{opacity:0;transform:scale(.96)} to{opacity:1;transform:none} }
.modal-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; }
.modal-title { font-size:19px; font-weight:900; }
.modal-x { width:36px; height:36px; border:0; border-radius:50%; background:var(--green-50); color:var(--green-700); font-size:24px; cursor:pointer; }
.modal-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:20px; flex-wrap:wrap; }
.toast-container { position:fixed; right:20px; bottom:20px; z-index:2000; display:grid; gap:10px; }
.toast { min-width:280px; background:white; border:1px solid var(--border); border-left:4px solid var(--green-500); border-radius:14px; box-shadow:0 8px 34px rgba(0,0,0,.14); padding:13px 15px; display:flex; gap:10px; align-items:flex-start; animation:toast-in .32s cubic-bezier(.34,1.56,.64,1); }
.toast.info { border-left-color:var(--blue); }.toast.warn{border-left-color:var(--amber)}.toast.error{border-left-color:var(--red)}
.toast-icon { font-size:22px; }.toast-msg{font-size:13px;font-weight:850;color:var(--text)}.toast-sub{font-size:11px;color:var(--text3);margin-top:2px;line-height:1.4}
@keyframes toast-in { from{opacity:0;transform:translateX(90px)} to{opacity:1;transform:none} }
.sidebar-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.42); z-index:90; }
.sidebar-overlay.open { display:block; }
.file-note { font-size:11px; color:var(--text3); margin-top:5px; line-height:1.45; }
.preview-box { border:1px dashed var(--green-300); background:var(--green-50); border-radius:12px; padding:12px; margin-top:8px; font-size:12px; color:var(--green-800); }
.preview-box img { max-width:100%; border-radius:10px; margin-top:8px; }
@media (max-width: 1100px) { .grid-4 { grid-template-columns:repeat(2,1fr); } .path-list { grid-template-columns:repeat(2,1fr); } .game-banner { grid-template-columns:1fr; } }
@media (max-width: 768px) {
  .sidebar { transform:translateX(-100%); width:min(84vw,300px); }
  .sidebar.open { transform:translateX(0); }
  .sidebar-close-btn { display:block; }
  .main-content { margin-left:0; }
  .mobile-menu-btn { display:block; flex-shrink:0; }
  .top-bar { padding:12px 14px; align-items:flex-start; }
  .top-bar-title { font-size:16px; }
  .top-bar-right { gap:6px; }
  .lang-switch { order:3; width:100%; justify-content:flex-end; background:transparent; border:0; padding:0; }
  .lang-switch button { flex:0 0 auto; background:var(--green-50); border:1px solid var(--green-200); }
  .accessibility-chip { display:none !important; }
  .accessibility-chip span { display:none; }
  .content-area { padding:18px 14px 28px; }
  .page-head { flex-direction:column; }
  .grid-2, .grid-3, .grid-4, .settings-grid, .profile-layout { grid-template-columns:1fr; }
  .path-list { grid-template-columns:1fr; }
  .hero-card { padding:22px; }
  .hero-card h2 { font-size:21px; }
  .table-wrap { border-radius:12px; }
  table { min-width:680px; }
  .modal-box { padding:18px; width:100%; }
  .auth-card { padding:26px 22px; }
  .auth-subtitle { margin-left:0; }
  .toast-container { left:12px; right:12px; bottom:12px; }
  .toast { min-width:0; }
}

/* Revision 24: compact admin content approval workspace */
.approval-page-v24 {
  display: grid;
  gap: 16px;
  max-width: 1440px;
  margin: 0 auto;
}

.approval-hero-v24 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 22px;
  border: 1px solid #bbf7d0;
  border-radius: 8px;
  background: #f7fef9;
}

.approval-hero-copy-v24 h2 {
  margin: 5px 0 6px;
  font-size: 24px;
  line-height: 1.2;
}

.approval-hero-copy-v24 p {
  margin: 0;
  color: var(--text3);
  font-size: 13px;
  line-height: 1.55;
}

.approval-eyebrow-v24 {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 9px;
  border-radius: 999px;
  background: #dcfce7;
  color: #166534;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.approval-total-v24 {
  flex: 0 0 118px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  padding: 12px 14px;
  border-left: 3px solid #22c55e;
  background: #fff;
}

.approval-total-v24 span {
  grid-column: 1 / -1;
  color: var(--text3);
  font-size: 11px;
  font-weight: 700;
}

.approval-total-v24 strong {
  color: var(--green-800);
  font-size: 30px;
  line-height: 1;
}

.approval-total-v24 small {
  color: var(--text3);
  font-size: 11px;
}

.approval-summary-v24 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.approval-stat-v24 {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 76px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}

.approval-stat-v24::before {
  content: '';
  align-self: stretch;
  width: 3px;
  border-radius: 3px;
  background: #22c55e;
}

.approval-stat-v24.media::before { background: #f43f5e; }
.approval-stat-v24.rejected::before { background: #64748b; }

.approval-stat-icon-v24,
.approval-panel-icon-v24 {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  background: #eff6ff;
  color: #2563eb;
}

.approval-stat-v24.media .approval-stat-icon-v24,
.approval-panel-icon-v24.media {
  border-color: #fecdd3;
  background: #fff1f2;
  color: #e11d48;
}

.approval-stat-v24.rejected .approval-stat-icon-v24,
.approval-panel-icon-v24.rejected {
  border-color: #e2e8f0;
  background: #f8fafc;
  color: #64748b;
}

.approval-stat-v24 strong {
  display: block;
  color: var(--text);
  font-size: 22px;
  line-height: 1;
}

.approval-stat-v24 div > span {
  display: block;
  margin-top: 5px;
  color: var(--text3);
  font-size: 11px;
  font-weight: 700;
}

.approval-queues-v24 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 16px;
}

.approval-panel-v24 {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}

.approval-panel-head-v24 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  background: #fbfefc;
}

.approval-panel-head-v24 > div {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 10px;
}

.approval-panel-head-v24 h3 {
  margin: 0;
  color: var(--text);
  font-size: 14px;
}

.approval-panel-head-v24 p {
  margin: 3px 0 0;
  color: var(--text3);
  font-size: 11px;
  line-height: 1.4;
}

.approval-count-v24 {
  flex: 0 0 auto;
  padding: 5px 9px;
  border-radius: 999px;
  background: #dcfce7;
  color: #166534;
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
}

.approval-count-v24.muted {
  background: #f1f5f9;
  color: #475569;
}

.approval-empty-v24 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 14px;
  padding: 18px;
  border: 1px dashed #bbf7d0;
  border-radius: 8px;
  background: #f8fffa;
}

.approval-empty-icon-v24 {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #dcfce7;
  color: #15803d;
  font-size: 17px;
  font-weight: 900;
}

.approval-empty-v24 strong {
  display: block;
  color: var(--text);
  font-size: 13px;
}

.approval-empty-v24 p {
  margin: 3px 0 0;
  color: var(--text3);
  font-size: 11px;
}

.approval-review-list-v24 {
  display: grid;
  gap: 10px;
  padding: 12px;
}

.approval-review-item-v24 {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
}

.approval-review-index-v24 {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: var(--green-50);
  color: var(--green-700);
  font-size: 11px;
  font-weight: 900;
}

.approval-review-main-v24 {
  min-width: 0;
}

.approval-review-main-v24 > strong {
  display: block;
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.approval-review-main-v24 > p {
  display: -webkit-box;
  overflow: hidden;
  margin: 3px 0 7px;
  color: var(--text3);
  font-size: 11px;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.approval-review-meta-v24 {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.approval-review-meta-v24 span {
  padding: 3px 6px;
  border-radius: 5px;
  background: #f1f5f9;
  color: #475569;
  font-size: 9px;
  font-weight: 700;
}

.approval-review-actions-v24 {
  display: grid;
  gap: 5px;
}

.approval-review-actions-v24 button {
  min-width: 64px;
  padding: 6px 9px;
  font-size: 10px;
}

.approval-history-list-v24 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 12px;
}

.approval-history-item-v24 {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.approval-history-icon-v24 {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 7px;
  background: #f1f5f9;
  color: #64748b;
}

.approval-history-item-v24 strong,
.approval-history-item-v24 span {
  display: block;
}

.approval-history-item-v24 strong {
  color: var(--text);
  font-size: 12px;
}

.approval-history-item-v24 div > span {
  overflow: hidden;
  margin-top: 2px;
  color: var(--text3);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.approval-history-item-v24 small {
  padding: 4px 7px;
  border-radius: 5px;
  background: #f1f5f9;
  color: #475569;
  font-size: 9px;
  font-weight: 800;
}

@media (max-width: 1100px) {
  .approval-queues-v24 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .approval-page-v24 {
    gap: 12px;
  }

  .approval-hero-v24 {
    align-items: flex-start;
    padding: 16px;
  }

  .approval-hero-copy-v24 h2 {
    font-size: 19px;
  }

  .approval-total-v24 {
    flex-basis: 88px;
    padding: 9px 10px;
  }

  .approval-total-v24 strong {
    font-size: 24px;
  }

  .approval-summary-v24 {
    gap: 7px;
  }

  .approval-stat-v24 {
    display: grid;
    justify-items: center;
    gap: 6px;
    min-height: 96px;
    padding: 10px 6px;
    text-align: center;
  }

  .approval-stat-v24::before {
    display: none;
  }

  .approval-stat-icon-v24 {
    width: 30px;
    height: 30px;
  }

  .approval-stat-v24 div > span {
    font-size: 9px;
  }

  .approval-panel-head-v24 {
    align-items: flex-start;
    padding: 12px;
  }

  .approval-panel-head-v24 p {
    display: none;
  }

  .approval-review-item-v24 {
    grid-template-columns: 24px minmax(0, 1fr);
  }

  .approval-review-index-v24 {
    width: 24px;
    height: 24px;
  }

  .approval-review-actions-v24 {
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, 1fr);
  }

  .approval-review-actions-v24 button {
    width: 100%;
  }

  .approval-history-list-v24 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 420px) {
  .approval-hero-v24 {
    display: block;
  }

  .approval-total-v24 {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    border-left: 0;
    border-top: 2px solid #22c55e;
  }

  .approval-total-v24 strong {
    order: -1;
  }

  .approval-count-v24 {
    white-space: normal;
    text-align: center;
  }
}
@media print {
  .sidebar,.top-bar,.card-actions,.btn,.toast-container { display:none !important; }
  .main-content { margin-left:0; }
  .content-area { padding:0; }
  body { background:white; }
}

/* Revision 5: materials, media types, and layout refinements */
.lang-switch.compact {
  margin: 0 0 16px 0;
  align-self: flex-start;
}

.auth-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.material-grid {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.material-card,
.media-card {
  min-height: 360px;
  padding: 0;
  overflow: hidden;
}

.material-card-body,
.media-card {
  display: flex;
  flex-direction: column;
}

.material-card-body {
  padding: 18px;
  gap: 10px;
}

.material-cover {
  height: 190px;
  background: linear-gradient(135deg, #14532d, #22c55e);
  position: relative;
  overflow: hidden;
}

.material-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.material-cover-fallback {
  height: 100%;
  display: grid;
  place-items: center;
  font-size: 64px;
  color: rgba(255,255,255,.95);
}

.material-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.material-meta-small {
  color: var(--text3);
  font-size: 12px;
  font-weight: 700;
}

.media-card {
  padding: 20px;
  gap: 12px;
}

.media-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.media-icon {
  height: 76px;
  width: 76px;
  border-radius: 20px;
  display: grid;
  place-items: center;
  font-size: 36px;
  background: linear-gradient(135deg, #f0fdf4, #dcfce7);
}

.material-detail-wrap {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.material-detail-hero {
  background: linear-gradient(135deg, #14532d, #22c55e);
  color: white;
  padding: 24px;
  border-radius: 20px;
}

.material-detail-hero p,
.material-hero-meta {
  color: rgba(255,255,255,.88);
}

.material-hero-meta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.material-form-view {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.material-block {
  background: white;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 18px;
  box-shadow: var(--shadow);
}

.material-block.text p,
.material-block.note p {
  font-size: 15px;
  line-height: 1.8;
  color: var(--text2);
  margin: 0;
}

.material-block.note {
  background: #f0fdf4;
  border-color: #bbf7d0;
}

.material-block.note strong {
  display: inline-block;
  margin-bottom: 8px;
  color: var(--green-700);
}

.material-block.image {
  padding: 14px;
}

.material-block.image img {
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  border-radius: 14px;
  display: block;
}

.material-block.audio {
  background: linear-gradient(135deg, #eff6ff, #f0fdfa);
  border-color: #bae6fd;
}

.material-audio-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}

.material-audio-head strong {
  display: block;
  color: #075985;
  margin-bottom: 5px;
}

.material-audio-head p {
  margin: 0;
  color: var(--text2);
  line-height: 1.6;
}

.material-audio-icon {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: inline-grid;
  place-items: center;
  background: #dbeafe;
  color: #2563eb;
  flex: 0 0 auto;
}

.material-block.audio audio {
  width: 100%;
  display: block;
}

.material-image-caption {
  margin-top: 10px;
  color: var(--text3);
  font-size: 13px;
}

.material-next-card {
  background: #f8fffb;
}

.material-editor-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 8px 0 14px;
}

#materialBlocksEditor {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.material-editor-item {
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 16px;
  background: #fcfffd;
}

.material-editor-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}

.material-steps {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}

.material-step {
  padding: 12px 14px;
  border-radius: 12px;
  background: #f0fdf4;
  border: 1px solid #dcfce7;
  font-weight: 600;
}

@media (max-width: 768px) {
  .material-cover {
    height: 150px;
  }

  .material-card,
  .media-card {
    min-height: auto;
  }

  .material-detail-hero {
    padding: 18px;
  }
}

/* Revision 6: block-based media and interactive quiz builder */
.video-block iframe,
.video-block video {
  width: 100%;
  height: 320px;
  border: 0;
  border-radius: 14px;
  background: #052e16;
  display: block;
}

.media-block-view {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.media-editor-item {
  background: linear-gradient(180deg, #ffffff, #f7fffb);
}

.quiz-count-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: max-content;
  margin: 12px 0;
  padding: 7px 12px;
  border-radius: 999px;
  background: #f0fdf4;
  color: var(--green-700);
  border: 1px solid #bbf7d0;
  font-size: 12px;
  font-weight: 800;
}

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

.quiz-feedback {
  margin-top: 16px;
  border-radius: 16px;
  padding: 16px;
  border: 1px solid var(--border);
}

.quiz-feedback.correct {
  background: #f0fdf4;
  border-color: #bbf7d0;
  color: #14532d;
}

.quiz-feedback.wrong {
  background: #fff7ed;
  border-color: #fed7aa;
  color: #9a3412;
}

.quiz-feedback p {
  margin: 6px 0 12px;
  color: inherit;
  opacity: .9;
}

.quiz-question-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 16px 0;
  text-align: left;
}

.mini-question-card {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
}

.mini-question-card p,
.mini-question-card small {
  color: var(--text3);
  line-height: 1.6;
}

.mini-question-card.is-correct {
  border-color: #86efac;
  background: #f0fdf4;
}

.mini-question-card.is-wrong {
  border-color: #fdba74;
  background: #fff7ed;
}

.answer-builder {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.answer-card {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #fff;
  cursor: pointer;
  transition: .2s ease;
}

.answer-card:hover {
  border-color: #86efac;
  box-shadow: var(--shadow);
}

.answer-card.selected {
  background: #f0fdf4;
  border-color: #22c55e;
  box-shadow: 0 10px 28px rgba(34, 197, 94, .12);
}

.answer-card input[type="radio"] {
  display: none;
}

.answer-letter {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: #ecfdf5;
  color: var(--green-700);
  font-weight: 900;
  border: 1px solid #bbf7d0;
}

.answer-input-wrap {
  flex: 1;
  min-width: 0;
}

.answer-input-wrap strong {
  display: block;
  font-size: 12px;
  color: var(--text3);
  margin-bottom: 6px;
}

.answer-input-wrap input {
  width: 100%;
}

.correct-badge {
  display: none;
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 10px;
  font-weight: 900;
  color: #15803d;
  background: #dcfce7;
  border-radius: 999px;
  padding: 4px 8px;
}

.answer-card.selected .correct-badge {
  display: inline-flex;
}

@media (max-width: 768px) {
  .answer-builder {
    grid-template-columns: 1fr;
  }

  .quiz-progress-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .video-block iframe,
  .video-block video {
    height: 220px;
  }
}

/* Revision 7: quiz bank and manual quiz collection UI */
.quiz-search-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 12px;
  box-shadow: var(--shadow);
}
.quiz-search-wrap input,
.quiz-picker-panel input[type="search"] {
  flex: 1;
  min-width: 180px;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 14px;
  outline: none;
}
.quiz-search-wrap span {
  color: var(--text3);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}
.quiz-picker-panel {
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 16px;
  background: #fcfffd;
  margin-top: 14px;
}
.quiz-picker-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}
.quiz-picker-head p {
  margin: 4px 0 0;
  color: var(--text3);
  font-size: 13px;
  line-height: 1.5;
}
.quiz-picker-count {
  background: var(--green-50);
  color: var(--green-700);
  border: 1px solid var(--green-200);
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}
.quiz-picker-list {
  display: grid;
  gap: 10px;
  max-height: 420px;
  overflow: auto;
  padding-right: 4px;
  margin-top: 12px;
}
.quiz-pick-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
  border: 1px solid var(--border);
  background: white;
  border-radius: 14px;
  padding: 12px;
  cursor: pointer;
  transition: .2s;
}
.quiz-pick-card:hover,
.quiz-pick-card.selected {
  border-color: var(--green-300);
  background: var(--green-50);
}
.quiz-pick-card input {
  margin-top: 4px;
  width: 18px;
  height: 18px;
  accent-color: var(--green-600);
}
.quiz-pick-card p {
  margin: 5px 0;
  color: var(--text2);
  font-size: 13px;
  line-height: 1.5;
}
.quiz-pick-card small {
  color: var(--text3);
  font-weight: 700;
}
@media (max-width: 640px) {
  .quiz-search-wrap,
  .quiz-picker-head {
    flex-direction: column;
    align-items: stretch;
  }
  .quiz-search-wrap span,
  .quiz-picker-count {
    width: max-content;
  }
}

/* Revision 8: fixed content CRUD UI */
.block-builder-toolbar,
.quiz-link-box,
.media-type-form-preview {
  background: #f8fffb;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 16px;
  margin: 16px 0;
}

.block-builder-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.block-builder-toolbar p,
.quiz-link-head p,
.media-type-form-preview p {
  margin: 4px 0 0;
  color: var(--text3);
  font-size: 13px;
  line-height: 1.6;
}

.block-editor-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.block-editor-item {
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 16px;
  background: #fff;
  box-shadow: var(--shadow);
}

.block-editor-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.block-editor-head small {
  display: block;
  margin-top: 3px;
  color: var(--text3);
  font-size: 12px;
  font-weight: 700;
}

.compact-grid {
  margin-bottom: 10px;
}

.media-type-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}

.media-type-admin-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow);
}

.media-type-admin-icon,
.media-type-preview-icon {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #ecfdf5, #dcfce7);
  font-size: 28px;
  flex: 0 0 auto;
}

.media-type-admin-body {
  min-width: 0;
  flex: 1;
}

.media-type-admin-body p {
  color: var(--text3);
  font-size: 13px;
  line-height: 1.55;
  margin: 6px 0 10px;
}

.media-type-admin-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.media-type-admin-meta code {
  background: #f1f5f9;
  padding: 4px 8px;
  border-radius: 8px;
  font-size: 12px;
  color: var(--text2);
}

.media-type-form-preview {
  display: flex;
  gap: 14px;
  align-items: center;
}

.quiz-link-summary {
  margin-top: 4px;
  padding: 9px 11px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 12px;
  color: var(--green-700);
  font-size: 12px;
  font-weight: 800;
}

.quiz-link-head {
  margin-bottom: 12px;
}

@media (max-width: 768px) {
  .block-builder-toolbar,
  .block-editor-head,
  .media-type-form-preview {
    flex-direction: column;
  }
  .media-type-admin-card {
    flex-direction: column;
  }
}

/* Revision 9: complete tablet and mobile responsive hardening */
html,
body,
#appPage,
.main-content,
.content-area {
  width: 100%;
  max-width: 100%;
}

body {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

img,
video,
iframe,
canvas,
svg {
  max-width: 100%;
}

.main-content,
.content-area,
.card,
.hero-card,
.table-wrap,
.modal-box,
.form-group,
.grid,
.profile-layout,
.game-banner,
.material-card,
.media-card,
.quiz-picker-panel,
.block-editor-item,
.material-editor-item,
.media-type-admin-card,
.question-card {
  min-width: 0;
}

button,
a,
input,
select,
textarea {
  max-width: 100%;
}

.table-wrap {
  width: 100%;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

.table-wrap table {
  white-space: normal;
}

.card-actions .btn,
.card-actions .btn-secondary,
.action-btns .btn-edit,
.action-btns .btn-delete,
.action-btns .icon-btn {
  min-width: max-content;
}

.modal-overlay {
  overflow: auto;
  align-items: center;
}

.modal-box {
  overscroll-behavior: contain;
}

.modal-box iframe {
  max-width: 100%;
}

.block-editor-item textarea,
.material-editor-item textarea,
.form-group textarea {
  max-height: 42vh;
}

.quiz-picker-list,
.sidebar-nav {
  -webkit-overflow-scrolling: touch;
}

.profile-photo-box,
.profile-layout > .card {
  width: 100%;
}

@media (min-width: 769px) and (max-width: 1180px) {
  .content-area {
    padding: 24px 20px 32px;
  }

  .grid-4,
  .path-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .auto-grid,
  .material-grid,
  .media-type-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }

  .profile-layout {
    grid-template-columns: 220px minmax(0, 1fr);
  }

  .game-grid {
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  }
}

@media (max-width: 1024px) {
  #appPage {
    flex-direction: column;
  }

  .sidebar {
    transform: translateX(-100%);
    width: min(86vw, 320px);
    box-shadow: 20px 0 60px rgba(0,0,0,.28);
  }

  .sidebar.open {
    transform: translateX(0);
  }

  .sidebar-close-btn {
    display: block;
  }

  .main-content {
    margin-left: 0;
    width: 100%;
  }

  .mobile-menu-btn {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
  }

  .top-bar {
    padding: 12px 18px;
    gap: 12px;
  }

  .top-bar > div:nth-child(2) {
    min-width: 0;
    flex: 1;
  }

  .top-bar-title,
  .top-bar-subtitle {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .top-bar-right {
    flex: 0 1 auto;
  }

  .content-area {
    padding: 22px 18px 34px;
  }

  .page-head {
    align-items: stretch;
  }

  .page-head .btn,
  .page-head .btn-secondary {
    width: max-content;
  }

  .hero-card p {
    max-width: none;
  }

  .game-banner {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {
  .top-bar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
  }

  .top-bar-right {
    grid-column: 1 / -1;
    width: 100%;
    justify-content: flex-start;
    gap: 8px;
  }

  .top-bar-right .lang-switch {
    order: 0;
    width: auto;
    justify-content: flex-start;
  }

  .top-bar-right .xp-chip,
  .top-bar-right .accessibility-chip {
    min-height: 38px;
  }

  .grid-2,
  .grid-3,
  .grid-4,
  .settings-grid,
  .profile-layout,
  .path-list,
  .answer-builder,
  .material-grid,
  .media-type-grid {
    grid-template-columns: 1fr !important;
  }

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

  .page-head {
    flex-direction: column;
  }

  .table-wrap {
    border-radius: 14px;
  }

  table {
    min-width: 720px;
  }

  .quiz-picker-list {
    max-height: 58vh;
  }

  .media-type-admin-card,
  .block-editor-head,
  .material-editor-head,
  .quiz-picker-head,
  .block-builder-toolbar,
  .media-type-form-preview,
  .quiz-progress-head {
    flex-direction: column;
    align-items: stretch;
  }

  .media-type-admin-icon,
  .media-type-preview-icon {
    width: 52px;
    height: 52px;
  }

  .answer-card {
    align-items: flex-start;
  }

  .answer-letter {
    width: 38px;
    height: 38px;
  }

  .modal-actions {
    justify-content: stretch;
  }

  .modal-actions .btn,
  .modal-actions .btn-secondary,
  .modal-actions .btn-danger,
  .modal-actions .btn-save {
    flex: 1 1 180px;
  }
}

@media (max-width: 640px) {
  #authPage {
    align-items: flex-start;
    padding: 18px 12px;
    min-height: 100dvh;
    overflow-y: auto;
  }

  .auth-card {
    padding: 22px 18px;
    border-radius: 20px;
    margin: 8px auto 18px;
    max-width: 100%;
  }

  .auth-logo {
    align-items: flex-start;
  }

  .auth-logo h1 {
    font-size: 20px;
  }

  .auth-subtitle {
    margin: 0 0 16px;
    line-height: 1.5;
  }

  .lang-switch.compact {
    width: max-content;
  }

  .tab-switch {
    width: 100%;
  }

  .demo-hint {
    word-break: break-word;
  }

  .content-area {
    padding: 16px 12px 28px;
  }

  .top-bar {
    padding: 10px 12px;
  }

  .top-bar-title {
    font-size: 15px;
  }

  .top-bar-subtitle {
    font-size: 11px;
  }

  .top-bar-right {
    gap: 6px;
  }

  .xp-chip,
  .accessibility-chip {
    padding: 7px 10px;
    font-size: 11px;
  }

  .accessibility-chip span {
    display: none;
  }

  .lang-switch button {
    padding: 8px 10px;
    font-size: 12px;
  }

  .hero-card,
  .game-banner,
  .question-card,
  .card,
  .block-editor-item,
  .material-editor-item,
  .material-block,
  .quiz-picker-panel,
  .media-type-admin-card {
    border-radius: 14px;
    padding: 16px;
  }

  .hero-card h2,
  .game-banner h2,
  .page-head h2 {
    font-size: 20px;
    line-height: 1.25;
  }

  .hero-card::after {
    font-size: 80px;
    right: 8px;
  }

  .path-step {
    min-height: auto;
    padding: 12px;
  }

  .stat-value {
    font-size: 26px;
    word-break: break-word;
  }

  .auto-grid,
  .game-grid {
    grid-template-columns: 1fr !important;
  }

  .filter-bar {
    gap: 7px;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
  }

  .filter-btn {
    white-space: nowrap;
    flex: 0 0 auto;
  }

  .page-head .btn,
  .page-head .btn-secondary,
  .card-actions .btn,
  .card-actions .btn-secondary,
  .card-actions .btn-danger,
  .btn-primary {
    width: 100%;
  }

  .card-actions {
    width: 100%;
  }

  .action-btns {
    flex-direction: column;
    align-items: stretch;
  }

  .action-btns .btn-edit,
  .action-btns .btn-delete,
  .action-btns .icon-btn {
    width: 100%;
    text-align: center;
  }

  .media-card,
  .material-card {
    min-height: 0;
  }

  .media-card-top {
    align-items: flex-start;
    flex-direction: column;
  }

  .media-icon {
    width: 64px;
    height: 64px;
    font-size: 30px;
  }

  .material-cover {
    height: 138px;
  }

  .material-card-body {
    padding: 16px;
  }

  .material-detail-hero {
    padding: 18px;
    border-radius: 16px;
  }

  .material-block.image img {
    max-height: 260px;
  }

  .video-block iframe,
  .video-block video,
  .modal-box iframe {
    height: 210px !important;
  }

  .quiz-search-wrap {
    flex-direction: column;
    align-items: stretch;
  }

  .quiz-search-wrap span,
  .quiz-picker-count {
    width: max-content;
    max-width: 100%;
  }

  .question-text {
    font-size: 16px;
    line-height: 1.55;
  }

  .option-btn {
    padding: 12px;
    align-items: flex-start;
  }

  .option-label {
    width: 28px;
    height: 28px;
  }

  .result-circle {
    width: 112px;
    height: 112px;
    font-size: 34px;
  }

  .profile-photo {
    width: 122px;
    height: 122px;
    font-size: 42px;
  }

  .certificate {
    padding: 22px 14px;
    border-width: 5px;
  }

  .certificate h2 {
    font-size: 23px;
  }

  .certificate .cert-name {
    font-size: 20px;
  }

  .modal-overlay {
    padding: 8px;
    align-items: flex-start;
  }

  .modal-box {
    width: 100%;
    max-height: calc(100dvh - 16px);
    border-radius: 18px;
    padding: 16px;
  }

  .modal-title {
    font-size: 17px;
    line-height: 1.35;
  }

  .modal-actions {
    flex-direction: column;
  }

  .modal-actions .btn,
  .modal-actions .btn-secondary,
  .modal-actions .btn-danger,
  .modal-actions .btn-save {
    width: 100%;
    flex: 0 0 auto;
  }

  .form-group input,
  .form-group select,
  .form-group textarea,
  .quiz-search-wrap input,
  .quiz-picker-panel input[type="search"] {
    font-size: 16px;
  }

  table {
    min-width: 640px;
  }

  th,
  td {
    padding: 11px 12px;
  }

  .toast-container {
    left: 10px;
    right: 10px;
    bottom: 10px;
  }

  .toast {
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 420px) {
  .sidebar {
    width: min(92vw, 320px);
  }

  .content-area {
    padding-left: 10px;
    padding-right: 10px;
  }

  .top-bar {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .mobile-menu-btn {
    width: 38px;
    height: 38px;
    font-size: 20px;
  }

  .top-bar-right .xp-chip {
    display: none;
  }

  .hero-card,
  .game-banner,
  .question-card,
  .card,
  .block-editor-item,
  .material-editor-item,
  .material-block,
  .quiz-picker-panel,
  .media-type-admin-card {
    padding: 14px;
  }

  .material-cover {
    height: 120px;
  }

  .pill {
    max-width: 100%;
    white-space: normal;
  }

  .block-builder-toolbar .card-actions,
  .material-editor-toolbar .card-actions {
    flex-direction: column;
  }
}

/* Revision 9b: scroll locking and accessibility-safe colors */
body.sidebar-open {
  overflow: hidden;
}

body.high-contrast .auth-card,
body.high-contrast .top-bar,
body.high-contrast .card,
body.high-contrast .table-wrap,
body.high-contrast .modal-box,
body.high-contrast .material-block,
body.high-contrast .media-type-admin-card,
body.high-contrast .block-editor-item,
body.high-contrast .material-editor-item,
body.high-contrast .quiz-picker-panel,
body.high-contrast .quiz-pick-card,
body.high-contrast .mini-question-card,
body.high-contrast .answer-card,
body.high-contrast .toast {
  background: var(--surface);
  color: var(--text);
}

body.high-contrast .form-group input,
body.high-contrast .form-group select,
body.high-contrast .form-group textarea,
body.high-contrast .quiz-search-wrap input,
body.high-contrast .quiz-picker-panel input[type="search"] {
  background: var(--surface2);
  color: var(--text);
  border-color: var(--border);
}

body.high-contrast .filter-btn,
body.high-contrast .btn-secondary,
body.high-contrast .icon-btn,
body.high-contrast .tab-switch,
body.high-contrast .lang-switch,
body.high-contrast .preview-box,
body.high-contrast .media-type-admin-meta code {
  background: var(--surface2);
  color: var(--text);
  border-color: var(--border);
}


/* Revision 10: school/class fields and compact mobile polish */
.file-note{font-size:12px;color:var(--text3);line-height:1.6;margin-top:6px}.sidebar-user .user-role{line-height:1.35}.table-wrap table th,.table-wrap table td{vertical-align:top}.settings-grid select{min-width:0}@media(max-width:768px){.table-wrap{max-width:100%;overflow-x:auto}.table-wrap table{min-width:860px}.modal-box .settings-grid{grid-template-columns:1fr!important}.profile-layout{grid-template-columns:1fr!important}.sidebar-user .user-role{font-size:11px}.auth-card{max-height:calc(100dvh - 24px);overflow:auto}.lang-switch.compact{transform:scale(.92);transform-origin:left center}}

/* Revision 11: material cover upload/link and fixed crop */
.cover-uploader-card {
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 18px;
  background: linear-gradient(180deg, #ffffff, #f8fffb);
  box-shadow: var(--shadow);
  margin: 16px 0;
}

.cover-uploader-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}

.cover-uploader-head p,
.cover-preview-box small {
  color: var(--text3);
  margin-top: 4px;
  line-height: 1.5;
}

.cover-uploader-grid {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 18px;
  align-items: start;
}

.cover-preview-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cover-preview-frame,
.material-detail-cover {
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: linear-gradient(135deg, #14532d, #22c55e);
}

.cover-preview-frame {
  height: 190px;
  box-shadow: var(--shadow);
}

.material-detail-cover {
  height: 280px;
  margin: 0;
}

.material-detail-cover img,
.cover-preview-frame img,
.table-cover-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.table-cover-thumb {
  width: 84px;
  height: 52px;
  border-radius: 12px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #14532d, #22c55e);
  color: white;
  font-size: 22px;
  border: 1px solid var(--border);
}

.material-cover,
.cover-preview-frame,
.material-detail-cover {
  aspect-ratio: 16 / 10;
}

@media (max-width: 768px) {
  .cover-uploader-head,
  .cover-uploader-grid {
    grid-template-columns: 1fr;
    flex-direction: column;
  }

  .cover-preview-frame {
    height: 170px;
  }

  .material-detail-cover {
    height: 190px;
  }
}

@media (max-width: 480px) {
  .cover-uploader-card {
    padding: 14px;
  }

  .cover-preview-frame {
    height: 150px;
  }

  .table-cover-thumb {
    width: 66px;
    height: 44px;
  }
}

/* Revision 12: teacher approval workflow and class management */
.teacher-review-note {
  margin: 14px 0 18px;
  padding: 14px 16px;
  border: 1px solid #bbf7d0;
  background: #f0fdf4;
  border-radius: 16px;
  color: var(--green-800);
  font-size: 14px;
  line-height: 1.6;
}

.approval-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  border: 1px solid var(--border);
  background: #f8fafc;
  color: var(--text2);
  white-space: nowrap;
}

.approval-badge.approved {
  background: #dcfce7;
  border-color: #86efac;
  color: #166534;
}

.approval-badge.pending {
  background: #fef9c3;
  border-color: #fde68a;
  color: #854d0e;
}

.approval-badge.rejected {
  background: #fee2e2;
  border-color: #fecaca;
  color: #991b1b;
}

.approval-badge.neutral {
  background: #f1f5f9;
  border-color: #e2e8f0;
  color: #475569;
}

.btn-edit.approve {
  background: #dcfce7;
  color: #166534;
  border-color: #86efac;
}

.empty-state.compact {
  padding: 20px;
  min-height: auto;
}

.approval-preview .teacher-review-note {
  margin-top: 0;
}

.class-admin-card {
  min-height: 330px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.class-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.class-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--text3);
  font-size: 13px;
  font-weight: 700;
}

.student-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
}

.student-chip-list span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 9px;
  border-radius: 999px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: var(--green-700);
  font-size: 12px;
  font-weight: 800;
}

.student-picker-grid {
  max-height: 320px;
  overflow: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #fcfffd;
}

.student-picker-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px;
  border: 1px solid #dcfce7;
  border-radius: 14px;
  background: white;
  cursor: pointer;
}

.student-picker-item input {
  width: auto;
  margin-top: 4px;
}

.student-picker-item span {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.student-picker-item small {
  color: var(--text3);
  font-size: 12px;
}

@media (max-width: 768px) {
  .teacher-review-note {
    font-size: 13px;
    padding: 12px;
  }

  .student-picker-grid {
    grid-template-columns: 1fr;
    max-height: 260px;
  }

  .class-admin-card {
    min-height: auto;
  }

  .approval-badge {
    white-space: normal;
    text-align: center;
  }
}

/* Revision 13: anti-login-flash, live student search, and permission controls */
html.session-loading #authPage { display: none !important; }
html.session-loading #appPage { display: flex !important; opacity: 0; pointer-events: none; }
html.session-loading body::before {
  content: 'Memuat dashboard...';
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #0f2d1c, #166534);
  color: #ecfdf5;
  font-weight: 900;
  letter-spacing: .02em;
}
.permission-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:10px; margin-top:10px; }
.permission-switch,
.student-picker-item-v13 {
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:12px;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface);
  cursor:pointer;
}
.permission-switch input,
.student-picker-item-v13 input { margin-top:3px; flex-shrink:0; }
.permission-switch strong,
.student-picker-item-v13 strong { display:block; font-size:13px; color:var(--text); }
.permission-switch small,
.student-picker-item-v13 small { display:block; font-size:11px; color:var(--text3); margin-top:2px; line-height:1.35; }
.permission-switch.disabled { opacity:.7; cursor:not-allowed; background:var(--surface2); }
.permission-badges { display:flex; flex-wrap:wrap; gap:5px; }
.permission-badge { display:inline-flex; align-items:center; gap:4px; padding:4px 8px; border-radius:999px; border:1px solid var(--border); background:var(--green-50); color:var(--green-700); font-size:11px; font-weight:900; white-space:nowrap; }
.permission-badge.off { background:#f8fafc; color:var(--text3); border-color:#e5e7eb; }
.student-search-panel { border:1px solid var(--border); background:var(--surface2); border-radius:16px; padding:14px; }
.live-search-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
.live-search-head small { color:var(--text3); font-weight:700; }
.student-picker-summary { display:flex; flex-wrap:wrap; gap:6px; margin:10px 0; min-height:24px; }
.student-picker-summary span { display:inline-flex; align-items:center; gap:5px; padding:5px 9px; border-radius:999px; background:white; border:1px solid var(--border); font-size:11px; font-weight:800; color:var(--green-700); }
.student-picker-results-v13 { display:grid; gap:8px; max-height:310px; overflow:auto; padding-right:3px; }
.student-picker-empty { padding:14px; border:1px dashed var(--green-200); border-radius:14px; background:white; color:var(--text3); font-size:13px; text-align:center; }
.class-owner-note { margin-top:8px; color:var(--text3); font-size:12px; line-height:1.5; }
@media (max-width: 768px) {
  .permission-grid { grid-template-columns:1fr; }
  .live-search-head { align-items:flex-start; flex-direction:column; }
}

/* Revision 14: stronger boot guard, advanced permissions, and optional professional cursor */
html.session-loading #authPage,
html.app-js-boot.session-loading #authPage {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}
html.session-loading #appPage {
  display: flex !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
html.session-loading body::before {
  content: 'Memulihkan sesi dashboard...';
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #ecfdf5, #f8fafc 56%, #eff6ff);
  color: #065f46;
  font-weight: 900;
  letter-spacing: .01em;
}
.guard-note {
  border: 1px solid #fed7aa;
  background: #fff7ed;
  color: #9a3412;
  padding: 12px 14px;
  border-radius: 14px;
  margin-bottom: 14px;
  font-size: 13px;
  font-weight: 800;
}
.permission-grid.advanced { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.permission-switch.danger strong { color: #b91c1c; }
.class-owner-note.warn { border-color:#fed7aa; background:#fff7ed; color:#9a3412; }
.student-picker-item-v14 {
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:10px;
  border:1px solid var(--border);
  border-radius:12px;
  background:white;
  cursor:pointer;
}
.student-picker-item-v14 input { margin-top:4px; }
.student-picker-item-v14 small { display:block; color:var(--text3); margin-top:3px; font-size:11px; }
.student-picker-item-v14.disabled { opacity:.65; cursor:not-allowed; background:#f8fafc; }
.student-picker-results-v14 { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:8px; max-height:310px; overflow:auto; padding-right:4px; }
.professional-cursor,
.professional-cursor * { cursor: none !important; }
.professional-cursor-dot,
.professional-cursor-ring {
  position: fixed;
  left: 0;
  top: 0;
  pointer-events: none;
  z-index: 2147483647;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity .18s ease, width .18s ease, height .18s ease, border-color .18s ease, background .18s ease;
  will-change: transform, opacity, width, height;
}
.professional-cursor-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #10b981;
  box-shadow: 0 0 18px rgba(16,185,129,.45);
}
.professional-cursor-ring {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 2px solid rgba(16,185,129,.45);
  background: rgba(16,185,129,.06);
  backdrop-filter: blur(2px);
}
.professional-cursor .professional-cursor-dot,
.professional-cursor .professional-cursor-ring { opacity: 1; }
.professional-cursor.cursor-hovering .professional-cursor-ring {
  width: 52px;
  height: 52px;
  border-color: rgba(59,130,246,.55);
  background: rgba(59,130,246,.08);
}
.professional-cursor.cursor-hovering .professional-cursor-dot { background:#3b82f6; }
@media (pointer: coarse), (max-width: 768px) {
  .professional-cursor,
  .professional-cursor * { cursor: auto !important; }
  .professional-cursor-dot,
  .professional-cursor-ring { display:none !important; }
}

/* Revision 15: clearer mission cards and EduPlay status */
.mission-path-v15 .path-step { min-height: 128px; }
.mission-path-v15 .path-step small { display:block; font-size:11px; line-height:1.5; }
.mission-status-pill { display:inline-flex; align-items:center; gap:8px; margin:14px 0 4px; padding:9px 12px; border-radius:999px; background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.22); color:#bbf7d0; font-size:13px; font-weight:900; }
.mission-status-pill.done { background:rgba(74,222,128,.20); border-color:rgba(134,239,172,.55); color:white; }
@media (max-width: 1100px) { .mission-path-v15 .path-step { min-height: 112px; } }

/* Revision 16: user category/search, class workflow, compact class cards */
.user-page-head-v16 p { max-width: 860px; }
.user-control-card-v16 { display:grid; gap:14px; margin-bottom:16px; }
.user-category-box-v16 { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:10px; }
.user-category-btn-v16 {
  border:1px solid var(--border);
  background:#fff;
  border-radius:16px;
  padding:12px 14px;
  display:flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
  box-shadow:var(--shadow-soft);
  color:var(--text);
}
.user-category-btn-v16 strong { flex:1; text-align:left; }
.user-category-btn-v16 em { font-style:normal; font-weight:900; color:var(--primary); }
.user-category-btn-v16.active { border-color:rgba(16,185,129,.55); background:linear-gradient(135deg,#ecfdf5,#fff); box-shadow:0 12px 26px rgba(16,185,129,.12); }
.google-search-v16 {
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid var(--border);
  border-radius:999px;
  background:#fff;
  padding:8px 10px 8px 14px;
  box-shadow:0 10px 24px rgba(15,23,42,.06);
}
.google-search-v16 input { flex:1; border:0; outline:0; background:transparent; padding:8px 4px; font-size:14px; }
.google-search-v16 button { border:0; background:#eef2ff; color:#3730a3; border-radius:999px; padding:8px 12px; font-weight:900; cursor:pointer; }
.search-counter-v16 { color:var(--text3); font-size:12px; font-weight:800; }
.user-table-wrap-v16 table th, .user-table-wrap-v16 table td { vertical-align:top; }
.muted-mini { color:var(--text3); font-size:11px; line-height:1.45; }
.role-pill-v16 { display:inline-flex; align-items:center; border-radius:999px; padding:5px 9px; font-size:11px; font-weight:900; background:#f1f5f9; color:#334155; }
.role-admin { background:#fef3c7; color:#92400e; }
.role-operator { background:#dbeafe; color:#1e40af; }
.role-guru { background:#dcfce7; color:#166534; }
.role-siswa { background:#fce7f3; color:#9d174d; }
.permission-badges.compact { display:flex; flex-wrap:wrap; gap:5px; max-width:320px; }
.empty-cell-v16 { text-align:center; color:var(--text3); padding:28px !important; }
.class-guide-v16 { display:flex; justify-content:space-between; gap:18px; align-items:center; margin-bottom:16px; border:1px solid rgba(16,185,129,.18); background:linear-gradient(135deg,#ffffff,#ecfdf5); }
.class-guide-v16 h3 { margin-bottom:6px; }
.class-guide-v16 p { color:var(--text2); line-height:1.55; }
.guide-steps-v16 { display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; min-width:260px; }
.guide-steps-v16 span { border:1px solid rgba(16,185,129,.22); background:white; color:#065f46; border-radius:999px; padding:8px 10px; font-size:12px; font-weight:900; }
.class-grid-v16 { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:14px; }
.class-card-v16 { padding:16px; display:flex; flex-direction:column; gap:10px; min-height:0; }
.class-card-head-v16 { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.class-card-head-v16 > div { display:flex; align-items:center; gap:9px; min-width:0; }
.class-card-head-v16 strong { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; line-height:1.28; }
.class-icon-v16 { display:grid; place-items:center; width:34px; height:34px; border-radius:12px; background:#ecfdf5; flex:0 0 auto; }
.class-meta-compact-v16 { display:flex; flex-wrap:wrap; gap:6px; }
.class-meta-compact-v16 span { border:1px solid var(--border); background:#f8fafc; border-radius:999px; padding:5px 8px; font-size:11px; color:var(--text2); font-weight:800; }
.class-desc-v16 { color:var(--text3); font-size:12px; line-height:1.45; margin:0; }
.class-progress-v16 { height:8px; background:#e2e8f0; border-radius:999px; overflow:hidden; }
.class-progress-v16 div { height:100%; background:linear-gradient(90deg,#10b981,#22c55e); border-radius:inherit; }
.class-flow-strip-v16 { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:6px; }
.flow-step-v16 { border:1px solid var(--border); background:#fff; border-radius:12px; padding:7px 5px; display:grid; gap:2px; justify-items:center; cursor:pointer; color:var(--text2); min-width:0; }
.flow-step-v16.done { border-color:rgba(16,185,129,.4); background:#ecfdf5; color:#065f46; }
.flow-step-v16 strong { font-size:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.flow-step-v16 em { font-style:normal; font-size:10px; font-weight:900; color:var(--text3); }
.student-mini-list-v16 { display:flex; flex-wrap:wrap; gap:5px; min-height:24px; }
.student-mini-list-v16 span { background:#f1f5f9; color:#475569; border-radius:999px; padding:5px 8px; font-size:10px; font-weight:800; }
.compact-actions-v16 { margin-top:auto; gap:7px; }
.compact-actions-v16 .btn { padding:9px 11px; font-size:12px; }
.workflow-modal-head-v16 p { color:var(--text2); line-height:1.55; margin-top:6px; }
.workflow-columns-v16 { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; }
.workflow-columns-v16 section { border:1px solid var(--border); border-radius:16px; padding:12px; background:#f8fafc; min-width:0; }
.workflow-columns-v16 h4 { margin-bottom:4px; }
.workflow-columns-v16 p { color:var(--text3); font-size:12px; line-height:1.45; margin-bottom:10px; }
.workflow-list-v16 { display:grid; gap:8px; max-height:300px; overflow:auto; padding-right:3px; }
.workflow-check-v16 { display:flex; gap:9px; align-items:flex-start; border:1px solid var(--border); border-radius:12px; background:#fff; padding:9px; cursor:pointer; }
.workflow-check-v16 input { margin-top:4px; }
.workflow-check-v16 small { display:block; color:var(--text3); font-size:11px; margin-top:2px; line-height:1.35; }
.empty-small-v16 { color:var(--text3); font-size:12px; padding:10px; background:#fff; border-radius:12px; border:1px dashed var(--border); }
@media (max-width: 900px) {
  .class-guide-v16 { display:block; }
  .guide-steps-v16 { justify-content:flex-start; min-width:0; margin-top:12px; }
  .workflow-columns-v16 { grid-template-columns:1fr; }
}
@media (max-width: 560px) {
  .google-search-v16 { border-radius:18px; align-items:stretch; }
  .google-search-v16 button { padding:7px 10px; }
  .class-grid-v16 { grid-template-columns:1fr; }
}

/* Revision 17: cleaner UI without emoji clutter + search polish */
.user-control-card-v17,
.content-search-card-v17 { border:1px solid rgba(16,185,129,.18); background:linear-gradient(135deg,#ffffff,#f8fffb); }
.user-category-btn-v17 { gap:8px; min-height:44px; padding:10px 13px; }
.user-category-btn-v17 strong { font-size:13px; }
.user-category-btn-v17 em { background:#ecfdf5; border:1px solid rgba(16,185,129,.25); color:#047857; border-radius:999px; padding:4px 8px; min-width:32px; text-align:center; }
.google-search-v17 { padding-left:14px; }
.google-search-v17 input { min-height:34px; }
.class-guide-v17 { padding:15px 16px; }
.class-guide-v17 h3,
.workflow-modal-head-v17 h3 { letter-spacing:-.02em; }
.guide-steps-v17 span { color:#065f46; background:#fff; }
.class-grid-v17 { grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:14px; }
.class-card-v17 { padding:15px; gap:9px; border-color:rgba(16,185,129,.16); }
.class-card-head-v17 > div { gap:0; }
.class-card-head-v17 strong { font-size:14px; }
.class-meta-compact-v17 span { background:#fff; color:#475569; border-color:#e2e8f0; }
.class-flow-strip-v17 { grid-template-columns:repeat(4, minmax(0, 1fr)); gap:5px; }
.flow-step-v17 { padding:7px 4px; }
.flow-step-v17 small { font-size:9px; color:#64748b; font-weight:800; line-height:1; }
.flow-step-v17.done small { color:#047857; }
.student-mini-list-v17 span { background:#f8fafc; border:1px solid #e2e8f0; }
.compact-actions-v17 .btn { padding:9px 10px; }
.workflow-columns-v17 section { background:linear-gradient(180deg,#ffffff,#f8fafc); }
.workflow-search-v17 { display:flex; align-items:center; gap:8px; margin:10px 0; border:1px solid #dbeafe; background:#fff; border-radius:999px; padding:7px 9px 7px 12px; }
.workflow-search-v17 input { flex:1; min-width:0; border:0; outline:0; background:transparent; font-size:12px; }
.workflow-search-v17 span { font-size:10px; font-weight:900; color:#1d4ed8; background:#eff6ff; border-radius:999px; padding:4px 7px; white-space:nowrap; }
.workflow-check-v17 { transition:background .15s ease, border-color .15s ease; }
.workflow-check-v17:hover { background:#f8fafc; border-color:#bfdbfe; }
.content-head-v17 p { max-width:780px; }
.content-tabs-v17 { margin-bottom:12px; }
.content-search-card-v17 { display:grid; gap:8px; margin-bottom:14px; padding:13px; }
.table-head-v17 { align-items:center; border:1px solid var(--border); background:#fff; border-radius:16px; padding:12px 14px; margin-bottom:12px; }
.table-head-v17 p { color:var(--text3); font-size:13px; margin:0; }
.nav-icon { font-size:12px; min-width:28px; opacity:.9; }
@media (max-width: 900px) {
  .class-grid-v17 { grid-template-columns:1fr; }
  .workflow-search-v17 { border-radius:14px; }
}

/* Revision 19: student class connection + class preview */
.class-grid-v19 { grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:14px; }
.class-card-v19 { min-height:auto; }
.class-card-v19 .class-desc-v16 { min-height:0; }
.class-actions-v19 { flex-wrap:wrap; }
.class-actions-v19 .btn { min-width:0; }
.class-flow-strip-v19 .flow-step-v17 { cursor:pointer; }
.class-guide-v19 { background:linear-gradient(135deg,#ffffff,#f5fffa); }
.class-meta-v19 span { max-width:100%; overflow:hidden; text-overflow:ellipsis; }
.class-preview-head-v19 { display:flex; justify-content:space-between; gap:16px; align-items:flex-start; margin-bottom:12px; }
.class-preview-head-v19 h3 { margin:0 0 5px; letter-spacing:-.02em; }
.class-preview-head-v19 p { color:var(--text3); margin:0; line-height:1.55; }
.class-preview-score-v19 { min-width:96px; text-align:center; border:1px solid rgba(16,185,129,.25); background:#ecfdf5; color:#047857; border-radius:18px; padding:10px; }
.class-preview-score-v19 strong { display:block; font-size:24px; line-height:1; }
.class-preview-score-v19 span { font-size:11px; font-weight:800; }
.class-preview-meta-v19 { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.class-preview-meta-v19 span { background:#f8fafc; border:1px solid #e2e8f0; border-radius:999px; padding:6px 10px; font-size:12px; font-weight:800; color:#475569; }
.class-preview-grid-v19 { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; }
.class-preview-grid-v19 section { background:#f8fafc; border:1px solid #e2e8f0; border-radius:18px; padding:12px; }
.class-preview-grid-v19 h4 { margin:0 0 10px; }
.class-preview-item-v19 { background:#fff; border:1px solid #e5e7eb; border-radius:14px; padding:10px; display:grid; gap:6px; margin-bottom:8px; }
.class-preview-item-v19 strong { font-size:13px; }
.class-preview-item-v19 small { color:#64748b; font-weight:800; }
.class-preview-item-v19 p { color:var(--text3); font-size:12px; line-height:1.45; margin:0; }
.class-preview-item-v19 .btn { padding:7px 9px; font-size:12px; }
.preview-empty-v19 { color:#64748b; background:#fff; border:1px dashed #cbd5e1; border-radius:14px; padding:12px; font-size:12px; }
.class-preview-next-v19 { margin-top:14px; box-shadow:none; }
.class-quiz-card-v19 h3 { margin-top:10px; }
.quiz-question-stack.mini-v19 { margin:10px 0; }
@media (max-width: 980px) { .class-preview-grid-v19 { grid-template-columns:1fr; } }
@media (max-width: 560px) { .class-preview-head-v19 { display:block; } .class-preview-score-v19 { margin-top:10px; } }

/* Revision 21 student class layout */
.student-free-access-v21{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:16px;
  border-color:rgba(34,197,94,.22);
  background:linear-gradient(135deg, rgba(236,253,245,.92), rgba(255,255,255,.96));
}
.student-free-access-v21 h3{margin:0 0 6px;font-size:17px}
.student-free-access-v21 p{margin:0;color:var(--text3);max-width:760px;line-height:1.55}
.student-class-grid-v21{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,360px));
  gap:16px;
  align-items:start;
}
.student-class-card-v21{
  padding:18px;
  min-height:0;
  max-width:360px;
  box-shadow:0 14px 30px rgba(15, 118, 110, .08);
}
.student-class-head-v21{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:10px}
.student-class-head-v21 h3{font-size:16px;line-height:1.35;margin:0 0 5px;color:var(--text)}
.student-class-head-v21 p{font-size:12px;color:var(--text3);margin:0;line-height:1.35}
.class-status-v21{font-size:12px;font-weight:800;border:1px solid rgba(34,197,94,.28);background:#dcfce7;color:#15803d;border-radius:999px;padding:5px 10px;white-space:nowrap}
.student-class-desc-v21{font-size:13px;line-height:1.55;color:var(--text3);min-height:40px;margin:8px 0 12px}
.student-class-progress-v21{height:8px;border-radius:999px;background:#e5e7eb;overflow:hidden;margin:0 0 12px}
.student-class-progress-v21 span{display:block;height:100%;background:#22c55e;border-radius:999px}
.student-class-metrics-v21{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.student-class-metrics-v21 span{border:1px solid rgba(16,185,129,.2);background:#f8fffb;border-radius:13px;padding:9px 8px;text-align:center;font-size:12px;color:var(--text3);line-height:1.25}
.student-class-metrics-v21 b{display:block;font-size:15px;color:var(--text);margin-bottom:2px}
.compact-actions-v21{margin-top:6px}.compact-actions-v21 .btn{padding:10px 14px}
.preview-head-v21{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:14px}
.preview-head-v21 h3{margin:0 0 6px;font-size:21px}.preview-head-v21 p{margin:0;color:var(--text3);line-height:1.5}
.preview-head-v21>div:last-child{min-width:100px;text-align:center;border:1px solid rgba(34,197,94,.22);border-radius:16px;padding:12px;background:#f0fdf4}.preview-head-v21 strong{display:block;font-size:22px;color:#15803d}.preview-head-v21 span{font-size:12px;color:var(--text3)}
.preview-meta-v21{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}.preview-meta-v21 span{font-size:12px;font-weight:800;border:1px solid rgba(16,185,129,.18);background:#f8fffb;border-radius:999px;padding:7px 10px;color:var(--text2)}
.preview-grid-v21{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.preview-section-v21{border:1px solid rgba(16,185,129,.18);border-radius:18px;padding:14px;background:#fff}.preview-section-v21 h4{margin:0 0 10px;font-size:15px}
.preview-item-v21{border:1px solid rgba(226,232,240,.95);border-radius:14px;padding:12px;margin-bottom:10px;background:#fbfefd}.preview-item-v21 strong{display:block;font-size:14px;margin-bottom:4px}.preview-item-v21 small{display:block;color:var(--text3);font-weight:700;margin-bottom:6px}.preview-item-v21 p{font-size:12px;line-height:1.45;color:var(--text3);margin:0 0 10px}.preview-empty-v21{color:var(--text3);font-size:13px;background:#f8fafc;border-radius:13px;padding:12px}.preview-note-v21{margin-top:14px;background:#f8fffb}.preview-note-v21 p{margin:6px 0 0;color:var(--text3)}
@media (max-width: 920px){.student-free-access-v21{display:block}.student-free-access-v21 .card-actions{margin-top:14px}.preview-grid-v21{grid-template-columns:1fr}.student-class-grid-v21{grid-template-columns:1fr}.student-class-card-v21{max-width:none}}

/* Revision 22: student quiz tabs and cleaner quiz cards */
.quiz-tabs-v22{
  display:grid;
  grid-template-columns:repeat(2,minmax(180px,1fr));
  gap:12px;
  margin:0 0 18px;
}
.quiz-tab-v22{
  border:1px solid rgba(16,185,129,.24);
  background:#fff;
  border-radius:18px;
  padding:14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  cursor:pointer;
  color:var(--text);
  box-shadow:0 10px 24px rgba(15,118,110,.05);
}
.quiz-tab-v22 strong{font-size:15px}.quiz-tab-v22 span{font-weight:900;color:#047857;background:#ecfdf5;border-radius:999px;padding:5px 10px}
.quiz-tab-v22.active{background:linear-gradient(135deg,#ecfdf5,#fff);border-color:rgba(34,197,94,.55);box-shadow:0 14px 30px rgba(34,197,94,.12)}
.quiz-card-v22{min-height:205px;display:flex;flex-direction:column;gap:10px}.quiz-card-v22 h3{margin:0;font-size:17px;line-height:1.35}.quiz-card-v22 p{margin:0;color:var(--text3);line-height:1.55}.quiz-card-top-v22{display:flex;gap:8px;flex-wrap:wrap}.quiz-card-v22 .card-actions{margin-top:auto}
@media (max-width: 720px){.quiz-tabs-v22{grid-template-columns:1fr}.quiz-card-v22{min-height:auto}}

/* EduPlay admin controls */
.eduplay-admin-panel { display:grid; gap:16px; margin-top:18px; }
.eduplay-admin-grid { align-items:stretch; }
.eduplay-control-card { min-height:190px; }
.eduplay-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:12px; }
.eduplay-card-head h3 { margin:8px 0 0; font-size:18px; }
.toggle-switch { width:58px; height:32px; border:0; border-radius:999px; background:#e5e7eb; padding:4px; cursor:pointer; display:flex; align-items:center; transition:.2s; flex:0 0 auto; }
.toggle-switch span { width:24px; height:24px; border-radius:50%; background:white; box-shadow:0 3px 10px rgba(15,23,42,.18); transform:translateX(0); transition:.2s; }
.toggle-switch.on { background:linear-gradient(135deg,var(--green-500),var(--emerald)); }
.toggle-switch.on span { transform:translateX(26px); }
.sound-admin-card { padding:18px; }
.compact-head { margin-bottom:12px; align-items:center; }
.compact-head h3 { margin:0 0 4px; }
.compact-head p { margin:0; }
.eduplay-sound-table table { min-width:840px; }
.eduplay-disabled-card { max-width:780px; margin:0 auto; text-align:left; }
.eduplay-disabled-card h2 { margin:12px 0 8px; font-size:24px; }
.eduplay-disabled-card p { max-width:620px; }
@media (max-width: 760px) {
  .eduplay-card-head,
  .compact-head { display:block; }
  .toggle-switch { margin-top:12px; }
}

/* Premium icon sweep */
.premium-icon {
  display:inline-grid;
  place-items:center;
  width:1.18em;
  height:1.18em;
  min-width:1.18em;
  color:var(--premium-icon-color, currentColor);
  line-height:1;
  vertical-align:-0.18em;
  filter:drop-shadow(0 2px 5px color-mix(in srgb, var(--premium-icon-color, currentColor) 24%, transparent));
}
.premium-icon svg {
  display:block;
  width:100%;
  height:100%;
  fill:none;
  stroke:currentColor;
  stroke-width:2.1;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.premium-icon svg * { vector-effect:non-scaling-stroke; }
.premium-icon--accessibility { color:#2563eb; }
.premium-icon--apple,
.premium-icon--food { color:#f97316; }
.premium-icon--arrow-down,
.premium-icon--arrow-left,
.premium-icon--arrow-right,
.premium-icon--arrow-up,
.premium-icon--refresh,
.premium-icon--shuffle { color:#0ea5e9; }
.premium-icon--atom,
.premium-icon--ruler { color:#0284c7; }
.premium-icon--award,
.premium-icon--new-badge,
.premium-icon--medal,
.premium-icon--star,
.premium-icon--trophy { color:#f59e0b; }
.premium-icon--balloon,
.premium-icon--rainbow { color:#d946ef; }
.premium-icon--back,
.premium-icon--door-exit,
.premium-icon--menu,
.premium-icon--settings { color:#64748b; }
.premium-icon--ban,
.premium-icon--bomb,
.premium-icon--fire,
.premium-icon--trash,
.premium-icon--x-circle,
.premium-icon--warning { color:#ef4444; }
.premium-icon--book,
.premium-icon--book-open,
.premium-icon--books,
.premium-icon--calendar,
.premium-icon--library { color:#2563eb; }
.premium-icon--briefcase,
.premium-icon--graduation,
.premium-icon--hospital,
.premium-icon--school,
.premium-icon--teacher { color:#16a34a; }
.premium-icon--card,
.premium-icon--gamepad,
.premium-icon--puzzle,
.premium-icon--swirl { color:#7c3aed; }
.premium-icon--chart-bar,
.premium-icon--chart-line,
.premium-icon--clipboard,
.premium-icon--receipt { color:#0f766e; }
.premium-icon--check-circle { color:#22c55e; }
.premium-icon--clapper,
.premium-icon--video { color:#dc2626; }
.premium-icon--chat,
.premium-icon--message,
.premium-icon--wave,
.premium-icon--wind { color:#0891b2; }
.premium-icon--compass,
.premium-icon--globe,
.premium-icon--map,
.premium-icon--pin,
.premium-icon--planet { color:#0891b2; }
.premium-icon--droplet,
.premium-icon--fish { color:#0ea5e9; }
.premium-icon--edit,
.premium-icon--camera,
.premium-icon--image,
.premium-icon--palette { color:#8b5cf6; }
.premium-icon--flask,
.premium-icon--microscope,
.premium-icon--numbers,
.premium-icon--percent { color:#0284c7; }
.premium-icon--fullscreen,
.premium-icon--link,
.premium-icon--lock,
.premium-icon--shield { color:#475569; }
.premium-icon--gem { color:#06b6d4; }
.premium-icon--hand,
.premium-icon--handshake,
.premium-icon--pointer { color:#f59e0b; }
.premium-icon--heart { color:#e11d48; }
.premium-icon--home { color:#059669; }
.premium-icon--hourglass,
.premium-icon--moon { color:#6366f1; }
.premium-icon--leaf,
.premium-icon--sprout { color:#16a34a; }
.premium-icon--lightning,
.premium-icon--rocket { color:#f97316; }
.premium-icon--search { color:#0ea5e9; }
.premium-icon--sparkles { color:#d946ef; }
.premium-icon--target { color:#ef4444; }
.premium-icon--money,
.premium-icon--play { color:#22c55e; }
.premium-icon--music,
.premium-icon--question { color:#6366f1; }
.premium-icon--paw { color:#a16207; }
.premium-icon--phone,
.premium-icon--run,
.premium-icon--walk { color:#0f766e; }
.premium-icon--scissors { color:#64748b; }
.premium-icon--smile { color:#eab308; }
.premium-icon--stopwatch,
.premium-icon--thermometer { color:#ef4444; }
.premium-icon--toolbox { color:#a16207; }
.premium-icon--traffic { color:#eab308; }
.premium-icon--user,
.premium-icon--users { color:#059669; }
.premium-icon--volume { color:#2563eb; }
.floating-leaves > span { color:rgba(187,247,208,.86); }
.floating-leaves .premium-icon { width:1.35em; height:1.35em; }
.auth-back-link .premium-icon,
.btn .premium-icon,
.btn-primary .premium-icon,
.btn-secondary .premium-icon,
.btn-danger .premium-icon,
.logout-btn .premium-icon,
.filter-btn .premium-icon,
.pill .premium-icon {
  width:1.05em;
  height:1.05em;
}
.nav-icon {
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.nav-icon .premium-icon {
  width:18px;
  height:18px;
}
.mobile-menu-btn .premium-icon {
  width:21px;
  height:21px;
}
.accessibility-chip .premium-icon,
.xp-chip .premium-icon {
  width:15px;
  height:15px;
}
.stat-icon {
  color:var(--green-700);
  box-shadow:inset 0 0 0 1px rgba(34,197,94,.18);
}
.stat-icon .premium-icon {
  width:25px;
  height:25px;
}
.media-icon .premium-icon {
  width:46px;
  height:46px;
}
.path-step .num .premium-icon,
.mission-status-pill .premium-icon {
  width:16px;
  height:16px;
}
.insight-item > span:first-child .premium-icon,
.badge-card .premium-icon,
.game-mini .premium-icon {
  width:1.45em;
  height:1.45em;
}
.hero-card::after {
  content:'';
  width:112px;
  height:112px;
  right:22px;
  bottom:-18px;
  opacity:.16;
  background:rgba(187,247,208,.9);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 19c9-1 13-6 14-14-8 1-13 5-14 14Z'/%3E%3Cpath d='M5 19c3-5 7-8 14-14'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 19c9-1 13-6 14-14-8 1-13 5-14 14Z'/%3E%3Cpath d='M5 19c3-5 7-8 14-14'/%3E%3C/svg%3E") center/contain no-repeat;
}

@media (max-width: 820px) {
  .top-bar-right .accessibility-chip,
  .top-bar-right .hide-mobile-accessibility {
    display: none !important;
    visibility: hidden !important;
  }
}

@media (max-width: 640px) {
  .content-area > .grid.grid-4.auto-grid:has(.stat-card) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-top: 12px !important;
  }

  .content-area > .grid.grid-4.auto-grid:has(.stat-card) .stat-card {
    min-height: 88px;
    padding: 12px 10px;
    border-radius: 12px;
    box-shadow: 0 3px 16px rgba(22, 163, 74, 0.08);
  }

  .content-area > .grid.grid-4.auto-grid:has(.stat-card) .stat-card::before {
    height: 2px;
  }

  .content-area > .grid.grid-4.auto-grid:has(.stat-card) .stat-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    margin-bottom: 8px;
  }

  .content-area > .grid.grid-4.auto-grid:has(.stat-card) .stat-icon .premium-icon {
    width: 19px;
    height: 19px;
  }

  .content-area > .grid.grid-4.auto-grid:has(.stat-card) .stat-value {
    font-size: 22px;
    line-height: 0.95;
  }

  .content-area > .grid.grid-4.auto-grid:has(.stat-card) .stat-label {
    font-size: 10.5px;
    margin-top: 3px;
    line-height: 1.25;
  }
}

@media (max-width: 380px) {
  .content-area > .grid.grid-4.auto-grid:has(.stat-card) {
    gap: 7px !important;
  }

  .content-area > .grid.grid-4.auto-grid:has(.stat-card) .stat-card {
    min-height: 82px;
    padding: 10px 9px;
  }

  .content-area > .grid.grid-4.auto-grid:has(.stat-card) .stat-value {
    font-size: 20px;
  }
}

@media (max-width: 900px) {
  #authPage {
    align-items: center !important;
    justify-content: center !important;
    min-height: 100dvh;
    padding: 18px 14px !important;
    overflow-y: auto;
  }

  #authPage::before {
    width: 420px;
    height: 420px;
    top: -140px;
    right: -190px;
  }

  #authPage::after {
    width: 320px;
    height: 320px;
    bottom: -120px;
    left: -130px;
  }

  .auth-card {
    width: min(100%, 430px);
    max-width: 430px;
    max-height: min(760px, calc(100dvh - 28px));
    margin: auto;
    padding: 24px 20px;
    border-radius: 22px;
    overflow: auto;
    box-shadow: 0 18px 54px rgba(0, 0, 0, 0.22);
  }

  .auth-back-link {
    margin-bottom: 14px;
    padding: 7px 11px;
    font-size: 11px;
  }

  .auth-logo {
    gap: 10px;
    margin-bottom: 8px;
  }

  .brand-logo-auth {
    width: 50px;
    height: 50px;
  }

  .auth-logo h1 {
    font-size: 20px;
  }

  .auth-subtitle {
    margin: 0 0 16px;
    font-size: 12px;
    line-height: 1.45;
  }

  .tab-switch {
    border-radius: 14px;
  }

  .tab-btn,
  .lang-switch button {
    padding: 8px 11px;
    font-size: 12px;
  }

  .form-group {
    margin-bottom: 11px;
  }

  .form-group label {
    margin-bottom: 5px;
    font-size: 12px;
  }

  .form-group input,
  .form-group select,
  .form-group textarea {
    padding: 10px 12px;
    border-radius: 12px;
    font-size: 13px;
  }

  .btn-primary {
    padding: 11px 14px;
    font-size: 13px;
  }

  .demo-hint {
    margin-top: 14px;
    padding-top: 12px;
    font-size: 11px;
    line-height: 1.55;
  }

  .lang-switch.compact {
    margin: 8px 0 0;
    transform: none;
  }
}

@media (max-width: 520px) {
  #authPage {
    padding: 14px 10px !important;
  }

  .auth-card {
    width: min(100%, 392px);
    max-height: calc(100dvh - 24px);
    padding: 20px 18px;
    border-radius: 20px;
  }

  .auth-back-link {
    justify-content: center;
    width: 100%;
    margin-bottom: 12px;
  }

  .auth-logo {
    justify-content: center;
  }

  .brand-logo-auth {
    width: 48px;
    height: 48px;
  }

  .auth-logo h1 {
    font-size: 19px;
  }

  .auth-subtitle {
    margin-bottom: 14px;
    text-align: center;
  }

  .demo-hint {
    font-size: 10.5px;
    line-height: 1.5;
  }

  .lang-switch.compact {
    margin: 8px auto 0;
  }
}

@media (max-width: 380px) {
  .auth-card {
    padding: 18px 15px;
  }

  .brand-logo-auth {
    width: 44px;
    height: 44px;
  }

  .auth-logo h1 {
    font-size: 18px;
  }

  .form-group input,
  .form-group select,
  .form-group textarea {
    padding: 9px 11px;
  }
}

@media (max-width: 640px) {
  .content-area > .hero-card:has(.mission-path-v15) {
    background: linear-gradient(180deg, #ffffff 0%, #f0fdfa 100%);
    color: var(--text);
    border: 1px solid rgba(16, 185, 129, 0.26);
    border-radius: 14px;
    padding: 16px;
    box-shadow: 0 8px 28px rgba(15, 118, 110, 0.10);
  }

  .content-area > .hero-card:has(.mission-path-v15)::after {
    display: none;
  }

  .content-area > .hero-card:has(.mission-path-v15) h2 {
    font-size: 18px;
    line-height: 1.25;
    margin-bottom: 6px;
    color: var(--green-900);
  }

  .content-area > .hero-card:has(.mission-path-v15) > p {
    color: var(--text3);
    font-size: 12.5px;
    line-height: 1.55;
    margin-bottom: 12px;
  }

  .content-area > .hero-card:has(.mission-path-v15) .mission-path-v15 {
    display: grid;
    gap: 8px;
    margin-top: 10px;
  }

  .content-area > .hero-card:has(.mission-path-v15) .path-step {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-height: 0;
    padding: 10px 11px;
    border-radius: 12px;
    background: #ffffff;
    border: 1px solid rgba(16, 185, 129, 0.16);
    box-shadow: 0 3px 12px rgba(15, 118, 110, 0.06);
  }

  .content-area > .hero-card:has(.mission-path-v15) .path-step.done {
    background: #ecfdf5;
    border-color: rgba(34, 197, 94, 0.26);
  }

  .content-area > .hero-card:has(.mission-path-v15) .path-step .num {
    width: 28px;
    height: 28px;
    margin: 0;
    background: #d1fae5;
    color: var(--green-700);
    font-size: 12px;
  }

  .content-area > .hero-card:has(.mission-path-v15) .path-step:not(.done) .num {
    background: #eef2ff;
    color: #4f46e5;
  }

  .content-area > .hero-card:has(.mission-path-v15) .path-step strong {
    margin: 0;
    color: var(--green-900);
    font-size: 12.5px;
    line-height: 1.25;
  }

  .content-area > .hero-card:has(.mission-path-v15) .path-step small {
    display: none;
  }

  .content-area > .hero-card:has(.mission-path-v15) .progress-line {
    height: 7px;
    margin-top: 12px;
    background: #d1fae5;
  }

  .content-area > .hero-card:has(.mission-path-v15) .progress-fill {
    background: linear-gradient(90deg, var(--green-500), var(--teal));
  }

  .content-area > .hero-card:has(.mission-path-v15) .card-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
  }

  .content-area > .hero-card:has(.mission-path-v15) .card-actions .btn,
  .content-area > .hero-card:has(.mission-path-v15) .card-actions .btn-secondary {
    width: 100%;
    min-width: 0;
    padding: 9px 10px;
    border-radius: 10px;
    font-size: 11.5px;
    box-shadow: none;
  }
}

@media (max-width: 380px) {
  .content-area > .hero-card:has(.mission-path-v15) {
    padding: 14px;
  }

  .content-area > .hero-card:has(.mission-path-v15) h2 {
    font-size: 17px;
  }

  .content-area > .hero-card:has(.mission-path-v15) .card-actions {
    grid-template-columns: 1fr;
  }
}

/* Revision 25: responsive class management workspace */
.class-page-v25 {
  display: grid;
  gap: 16px;
  max-width: 1440px;
  margin: 0 auto;
}

.class-page-head-v25 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 20px;
  border: 1px solid #bbf7d0;
  border-radius: 8px;
  background: #f8fffa;
}

.class-page-head-v25 h2 {
  margin: 4px 0 5px;
  color: var(--text);
  font-size: 23px;
  line-height: 1.2;
}

.class-page-head-v25 p {
  margin: 0;
  color: var(--text3);
  font-size: 12px;
  line-height: 1.5;
}

.class-page-kicker-v25,
.class-guide-kicker-v25 {
  color: #15803d;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.class-page-actions-v25 {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.class-total-v25 {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  min-height: 38px;
  padding: 8px 11px;
  border: 1px solid #d1fae5;
  border-radius: 7px;
  background: #fff;
  color: var(--text3);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.class-total-v25 strong {
  color: var(--green-800);
  font-size: 19px;
  line-height: 1;
}

.class-page-actions-v25 .btn {
  min-height: 38px;
  padding: 9px 14px;
}

.class-guide-v25 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-left: 4px solid #22c55e;
  border-radius: 8px;
  background: var(--surface);
}

.class-guide-v25 h3 {
  margin: 4px 0;
  color: var(--text);
  font-size: 15px;
}

.class-guide-v25 p {
  max-width: 760px;
  margin: 0;
  color: var(--text3);
  font-size: 11px;
  line-height: 1.5;
}

.guide-steps-v25 {
  display: grid;
  grid-template-columns: repeat(4, minmax(72px, 1fr));
  gap: 6px;
}

.guide-steps-v25 span {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 6px 8px;
  border: 1px solid #d1fae5;
  border-radius: 7px;
  background: #f8fffa;
  color: #166534;
  font-size: 10px;
  font-weight: 900;
}

.guide-steps-v25 b {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #22c55e;
  color: #fff;
  font-size: 9px;
}

.class-grid-v25 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 16px;
}

.class-card-v25 {
  min-width: 0;
  padding: 0;
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(15, 118, 110, .07);
}

.class-card-head-v25 {
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  background: #fbfefc;
}

.class-title-v25 {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 10px;
}

.class-icon-v25 {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border: 1px solid #bbf7d0;
  border-radius: 8px;
  background: #ecfdf5;
  color: #16a34a;
}

.class-title-v25 h3 {
  overflow: hidden;
  margin: 0 0 3px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.class-title-v25 p {
  overflow: hidden;
  margin: 0;
  color: var(--text3);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.class-card-v25 > .class-desc-v16 {
  padding: 12px 16px 0;
  color: var(--text3);
  font-size: 11px;
}

.class-progress-head-v25 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px 7px;
  color: var(--text3);
  font-size: 10px;
  font-weight: 800;
}

.class-progress-head-v25 strong {
  color: #15803d;
  font-size: 11px;
}

.class-progress-v25 {
  height: 6px;
  margin: 0 16px 12px;
  background: #e2e8f0;
}

.class-progress-v25 div {
  background: #22c55e;
}

.class-flow-strip-v25 {
  gap: 6px;
  padding: 0 16px 13px;
}

.flow-step-v25 {
  display: flex;
  align-items: center;
  justify-items: initial;
  gap: 7px;
  min-width: 0;
  min-height: 45px;
  padding: 7px 8px;
  border-radius: 7px;
  text-align: left;
}

.flow-number-v25 {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 23px;
  height: 23px;
  border-radius: 6px;
  background: #f1f5f9;
  color: #64748b;
  font-size: 9px;
  font-weight: 900;
}

.flow-step-v25.done .flow-number-v25 {
  background: #22c55e;
  color: #fff;
}

.flow-copy-v25 {
  display: block;
  min-width: 0;
}

.flow-step-v25 .flow-copy-v25 strong,
.flow-step-v25 .flow-copy-v25 small {
  display: block;
  overflow: hidden;
  max-width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flow-step-v25 .flow-copy-v25 strong {
  font-size: 9px;
}

.flow-step-v25 .flow-copy-v25 small {
  margin-top: 2px;
  color: var(--text3);
  font-size: 8px;
  font-weight: 700;
}

.class-students-v25 {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  border-top: 1px solid var(--border);
  background: #fbfefc;
}

.class-students-v25 > div:first-child strong,
.class-students-v25 > div:first-child span {
  display: block;
}

.class-students-v25 > div:first-child strong {
  color: var(--text);
  font-size: 11px;
}

.class-students-v25 > div:first-child span {
  margin-top: 2px;
  color: var(--text3);
  font-size: 9px;
}

.class-students-v25 .student-mini-list-v16 {
  justify-content: flex-end;
  min-width: 0;
}

.class-students-v25 .student-mini-list-v16 span {
  overflow: hidden;
  max-width: 128px;
  padding: 4px 7px;
  border-radius: 5px;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.class-card-v25 .class-actions-v19 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(86px, 1fr));
  gap: 6px;
  margin: 0;
  padding: 11px 16px 14px;
}

.class-card-v25 .class-actions-v19 .btn,
.class-card-v25 .class-actions-v19 .btn-secondary,
.class-card-v25 .class-actions-v19 .btn-danger {
  width: 100%;
  min-width: 0;
  padding: 8px 7px;
  border-radius: 7px;
  font-size: 10px;
  box-shadow: none;
}

@media (max-width: 1100px) {
  .class-grid-v25 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {
  .class-page-head-v25 {
    align-items: flex-start;
  }

  .class-guide-v25 {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .guide-steps-v25 {
    max-width: 520px;
  }
}

@media (max-width: 560px) {
  .class-page-v25 {
    gap: 12px;
  }

  .class-page-head-v25 {
    display: block;
    padding: 15px;
  }

  .class-page-head-v25 h2 {
    font-size: 19px;
  }

  .class-page-actions-v25,
  .class-page-head-v25 > .class-total-v25 {
    margin-top: 12px;
  }

  .class-page-actions-v25 .btn {
    flex: 1;
  }

  .class-guide-v25 {
    padding: 14px;
  }

  .guide-steps-v25 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .class-card-head-v25 {
    padding: 12px;
  }

  .class-title-v25 h3 {
    max-width: 210px;
    font-size: 13px;
  }

  .class-card-v25 > .class-desc-v16,
  .class-progress-head-v25 {
    padding-left: 12px;
    padding-right: 12px;
  }

  .class-progress-v25 {
    margin-left: 12px;
    margin-right: 12px;
  }

  .class-flow-strip-v25 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-left: 12px;
    padding-right: 12px;
  }

  .flow-step-v25 .flow-copy-v25 strong {
    font-size: 10px;
  }

  .flow-step-v25 .flow-copy-v25 small {
    font-size: 9px;
  }

  .class-students-v25 {
    grid-template-columns: 1fr;
    padding: 10px 12px;
  }

  .class-students-v25 .student-mini-list-v16 {
    justify-content: flex-start;
  }

  .class-card-v25 .class-actions-v19 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 10px 12px 12px;
  }
}

@media (max-width: 380px) {
  .class-page-actions-v25 {
    align-items: stretch;
  }

  .class-total-v25 {
    justify-content: center;
  }

  .class-card-v25 .class-actions-v19 {
    grid-template-columns: 1fr;
  }
}

/* Revision 26: clean responsive materials library */
.material-page-v26 {
  display: grid;
  gap: 14px;
  max-width: 1440px;
  margin: 0 auto;
}

.material-page-head-v26 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px 18px;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  background: #f8fbff;
}

.material-page-title-v26 {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 12px;
}

.material-page-icon-v26 {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  background: #eff6ff;
  color: #2563eb;
  font-size: 20px;
}

.material-page-kicker-v26 {
  color: #2563eb;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.material-page-head-v26 h2 {
  margin: 3px 0;
  color: var(--text);
  font-size: 21px;
  line-height: 1.2;
}

.material-page-head-v26 p {
  margin: 0;
  color: var(--text3);
  font-size: 11px;
  line-height: 1.45;
}

.material-page-actions-v26 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.material-page-actions-v26 .btn {
  min-height: 38px;
  padding: 9px 12px;
  border-radius: 7px;
  box-shadow: none;
}

.material-count-v26 {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  min-height: 38px;
  padding: 8px 11px;
  border: 1px solid #dbeafe;
  border-radius: 7px;
  background: #fff;
  color: var(--text3);
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}

.material-count-v26 strong {
  color: #1d4ed8;
  font-size: 19px;
  line-height: 1;
}

.material-filter-panel-v26 {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}

.material-filter-panel-v26 > div:first-child strong,
.material-filter-panel-v26 > div:first-child span {
  display: block;
}

.material-filter-panel-v26 > div:first-child strong {
  color: var(--text);
  font-size: 11px;
}

.material-filter-panel-v26 > div:first-child span {
  margin-top: 2px;
  color: var(--text3);
  font-size: 9px;
}

.material-filter-scroll-v26 {
  display: flex;
  gap: 7px;
  min-width: 0;
  overflow-x: auto;
  padding: 2px 1px;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.material-filter-scroll-v26 .filter-btn {
  flex: 0 0 auto;
  min-height: 32px;
  padding: 7px 10px;
  border-radius: 7px;
  font-size: 9px;
  white-space: nowrap;
}

.material-grid-v26 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 14px;
}

.material-card-v26 {
  min-height: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(15, 118, 110, .07);
}

.material-visual-v26 {
  position: relative;
}

.material-card-v26 .material-cover {
  height: 156px;
  aspect-ratio: auto;
  background: #e2e8f0;
}

.material-card-v26 .material-cover img {
  transition: transform .25s ease;
}

.material-card-v26:hover .material-cover img {
  transform: scale(1.025);
}

.material-type-v26 {
  position: absolute;
  left: 10px;
  bottom: 10px;
  padding: 5px 8px;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 6px;
  background: rgba(255,255,255,.92);
  color: #166534;
  font-size: 9px;
  font-weight: 900;
  backdrop-filter: blur(5px);
}

.material-card-body-v26 {
  gap: 8px;
  padding: 14px;
}

.material-card-body-v26 h3 {
  display: -webkit-box;
  overflow: hidden;
  min-height: 37px;
  margin: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.material-card-body-v26 > p {
  display: -webkit-box;
  overflow: hidden;
  min-height: 34px;
  margin: 0;
  color: var(--text3);
  font-size: 10px;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.material-meta-v26 {
  flex-wrap: nowrap;
  min-width: 0;
}

.material-meta-v26 .pill {
  overflow: hidden;
  max-width: 70%;
  padding: 4px 7px;
  border-radius: 5px;
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.material-meta-v26 .material-meta-small {
  flex: 0 0 auto;
  font-size: 9px;
}

.material-quiz-v26 {
  display: grid;
  grid-template-columns: 27px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin: 1px 0 0;
  padding: 7px 8px;
  border-radius: 7px;
  background: #f8fffa;
  font-size: 10px;
}

.material-quiz-v26 > span {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border-radius: 6px;
  background: #dcfce7;
  color: #16a34a;
}

.material-quiz-v26 small,
.material-quiz-v26 strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.material-quiz-v26 small {
  color: var(--text3);
  font-size: 8px;
}

.material-quiz-v26 strong {
  margin-top: 2px;
  color: #166534;
  font-size: 9px;
}

.material-actions-v26 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  gap: 7px;
  margin-top: 2px;
}

.material-actions-v26 .btn,
.material-actions-v26 .btn-secondary {
  width: 100%;
  min-width: 0;
  padding: 8px 9px;
  border-radius: 7px;
  font-size: 10px;
  box-shadow: none;
}

.material-empty-v26 {
  grid-column: 1 / -1;
}

@media (max-width: 1180px) {
  .material-grid-v26 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .material-page-head-v26 {
    align-items: flex-start;
  }

  .material-filter-panel-v26 {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

@media (max-width: 640px) {
  .material-page-v26 {
    gap: 11px;
  }

  .material-page-head-v26 {
    display: block;
    padding: 14px;
  }

  .material-page-head-v26 h2 {
    font-size: 18px;
  }

  .material-page-actions-v26,
  .material-page-head-v26 > .material-count-v26 {
    margin-top: 12px;
  }

  .material-page-actions-v26 .btn {
    flex: 1;
  }

  .material-grid-v26 {
    grid-template-columns: 1fr;
  }

  .material-card-v26 .material-cover {
    height: 168px;
  }

  .material-card-body-v26 {
    padding: 12px;
  }

  .material-card-body-v26 h3,
  .material-card-body-v26 > p {
    min-height: 0;
  }
}

@media (max-width: 380px) {
  .material-page-title-v26 {
    align-items: flex-start;
  }

  .material-page-actions-v26 {
    align-items: stretch;
  }

  .material-actions-v26 {
    grid-template-columns: 1fr;
  }
}

/* Revision 27: daily XP status */
.daily-xp-inline-v27 {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 9px 11px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 8px;
  background: rgba(255,255,255,.10);
  color: #d1fae5;
}

.daily-xp-inline-v27 span,
.daily-xp-inline-v27 small {
  font-size: 10px;
  font-weight: 700;
}

.daily-xp-inline-v27 strong {
  color: #fff;
  font-size: 13px;
}

.daily-xp-inline-v27 small {
  justify-self: end;
  color: rgba(255,255,255,.72);
  text-align: right;
}

.daily-xp-history-v27 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 320px);
  align-items: center;
  gap: 18px;
  margin-bottom: 16px;
  padding: 14px 16px;
  border: 1px solid #fde68a;
  border-radius: 8px;
  background: #fffbeb;
}

.daily-xp-history-v27 span,
.daily-xp-history-v27 strong,
.daily-xp-history-v27 small {
  display: block;
}

.daily-xp-history-v27 span {
  color: #92400e;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.daily-xp-history-v27 strong {
  margin: 3px 0;
  color: #78350f;
  font-size: 18px;
}

.daily-xp-history-v27 small {
  color: #a16207;
  font-size: 10px;
}

.daily-xp-progress-v27 {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #fef3c7;
}

.daily-xp-progress-v27 span {
  height: 100%;
  border-radius: inherit;
  background: #f59e0b;
}

@media (max-width: 640px) {
  .daily-xp-inline-v27 {
    grid-template-columns: auto 1fr;
    border-color: #bbf7d0;
    background: #ecfdf5;
    color: #166534;
  }

  .daily-xp-inline-v27 strong {
    justify-self: end;
    color: #15803d;
  }

  .daily-xp-inline-v27 small {
    grid-column: 1 / -1;
    justify-self: start;
    color: #047857;
    text-align: left;
  }

  .daily-xp-history-v27 {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}