/* ==========================================================================
   MathExam · "Vở ô li · Mực tím" — lớp giao diện cho ứng dụng (/app/)
   Nạp SAU <style> nội tuyến của index.html để ghi đè token và component.
   Không đụng tới .exam-sheet (bản in đề) ngoài các token màu.
   ========================================================================== */
:root {
  /* thang màu mực tím — giữ tên biến cũ để toàn bộ CSS/JS hiện có tự ăn theo */
  --emerald-950: #2B2733;
  --emerald-900: #2B2733;
  --emerald-800: #43248A;
  --emerald-700: #5E35B1;
  --emerald-600: #5E35B1;
  --emerald-500: #7E57C2;
  --emerald-100: #DCCFF5;
  --emerald-50:  #F1ECFA;

  --indigo-700: #43248A;
  --indigo-600: #5E35B1;
  --indigo-500: #7E57C2;
  --indigo-100: #DCCFF5;
  --indigo-50:  #F1ECFA;

  --cta-from: #5E35B1; --cta-to: #43248A; --cta-gradient: #5E35B1; --cta-indigo-gradient: #43248A;

  --amber-bg: #FFF3D1; --amber-border: #F0D78A; --amber-text: #8A5A00;

  --bg-canvas: #F7F5F0;
  --bg-surface: #FFFFFF;
  --bg-subtle: #FAF8F3;
  --bg-hover: #F1EEE7;

  --border: #ECE8DF;
  --border-strong: #D9D3C5;

  --text-primary: #2B2733;
  --text-secondary: #5C5764;
  --text-muted: #77727F;

  --success: #1F7A3E; --success-subtle: #E3F4E8;
  --danger: #B42328;  --danger-subtle: #FDECEC;

  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; --radius-pill: 999px;

  --shadow-xs: none;
  --shadow-sm: 0 3px 0 #ECE8DF;
  --shadow-card: 0 3px 0 #ECE8DF;
  --shadow-md: 0 10px 24px -6px rgba(43, 39, 51, .16);
  --shadow-lg: 0 20px 40px -12px rgba(43, 39, 51, .28);

  --mu-b: #5E35B1; --mu-b-h: #5530A3; --mu-b-d: #43248A; --mu-b-t: #F1ECFA; --mu-b-tb: #DCCFF5; --mu-b-tx: #4A2A99;
  --b: #5E35B1; --b-d: #43248A; --b-tb: #DCCFF5; --b-t: #F1ECFA;
}

html, body {
  font-family: "Nunito", ui-rounded, "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
}
h1, h2, h3, h4, .font-display, .brand-name, .nav-tab, .grade-btn, .btn, .qs-grade, .qs-cat, .filter-pill {
  font-family: "Nunito", ui-rounded, "Segoe UI", system-ui, sans-serif;
}
h1, h2, h3, h4 { letter-spacing: -.01em; font-weight: 900; }

.top-progress { background: rgba(94, 53, 177, .15); }
.top-progress::after { background: #5E35B1; }

/* ---------- Topbar & brand ---------- */
.topbar { box-shadow: none; border-bottom: 2px solid var(--border); }
.brand { gap: 10px; }
.brand-icon { width: auto; height: auto; }
.brand-mark {
  width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center;
  background: #5E35B1; color: #fff; font: 700 22px/1 Georgia, "Times New Roman", serif;
  box-shadow: 0 3px 0 #43248A;
}
.brand-name { font-weight: 900; font-size: 20px; letter-spacing: -.02em; }
.brand-num { color: var(--mu-b); margin-left: 0; }

.nav-tabs { background: #EFEBE3; border: 0; border-radius: 16px; padding: 4px; gap: 4px; }
.nav-tab { font-weight: 800; font-size: 13.5px; padding: 8px 14px; border-radius: 12px; border: 2px solid transparent; color: #77727F; }
.nav-tab:hover:not(.active) { background: transparent; color: var(--text-primary); }
.nav-tab.active, .nav-tab.active:hover { background: #fff; color: var(--mu-b-tx); border-color: #E6E1D6; box-shadow: 0 2px 0 #E0DBCF; }
.nav-count-pill { background: var(--mu-b-t); color: var(--mu-b-tx); border-radius: 999px; font-weight: 800; }
.nav-tab:not(.active) .nav-count-pill { background: #E2DDD2; color: #5C5764; }

.grade-switch { background: #EFEBE3; border: 0; border-radius: 14px; padding: 3px; }
.grade-switch-label { color: #77727F; font-weight: 800; }
.grade-btn { font-weight: 800; border-radius: 11px; color: #77727F; }
.grade-btn:hover:not(.active) { background: #fff; color: var(--text-primary); }
.grade-btn.active, .grade-btn.active:hover { background: var(--mu-b); color: #fff; box-shadow: 0 2px 0 var(--mu-b-d); }

/* ---------- Buttons (nổi khối, lún khi bấm) ---------- */
.btn {
  font-weight: 800; border: 2px solid #E6E1D6; background: #fff; color: var(--text-primary);
  border-radius: 12px; box-shadow: 0 3px 0 #E6E1D6;
  transition: background-color .15s, transform .06s, box-shadow .06s;
}
.btn:hover { background: #FBFAF7; border-color: #E6E1D6; }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #E6E1D6; }
.btn:focus-visible, .nav-tab:focus-visible, .grade-btn:focus-visible, .qs-grade:focus-visible, .qs-cat:focus-visible, .filter-pill:focus-visible {
  outline: 3px solid var(--mu-b-tb); outline-offset: 2px;
}
.btn-xs { border-radius: 9px; box-shadow: 0 2px 0 #E6E1D6; }
.btn-sm { border-radius: 11px; }
.btn-lg { border-radius: 14px; }
.btn-primary, .btn-primary:hover { background: var(--mu-b); border-color: var(--mu-b); color: #fff; box-shadow: 0 3px 0 var(--mu-b-d); }
.btn-primary:hover { background: var(--mu-b-h); border-color: var(--mu-b-h); }
.btn-primary:active { box-shadow: 0 1px 0 var(--mu-b-d); }
.btn-brand, .btn-brand:hover { background: var(--mu-b); border-color: var(--mu-b); color: #fff; box-shadow: 0 3px 0 var(--mu-b-d); }
.btn-brand:hover { background: var(--mu-b-h); border-color: var(--mu-b-h); }
.btn-danger, .btn-danger:hover { background: var(--danger-subtle); border-color: #F4C4C4; color: var(--danger); box-shadow: 0 3px 0 #F4C4C4; }
.btn-ghost { background: transparent; border-color: transparent; box-shadow: none; }
.btn-ghost:hover { background: #F1EEE7; }
.btn-ghost:active { transform: none; box-shadow: none; }

/* ---------- Launcher (trang Khám phá) ---------- */
.home-simple-wrap { max-width: 860px; margin-top: 36px; }
.home-simple-card {
  border: 2px solid var(--border); border-bottom-width: 4px; border-radius: 24px; padding: 28px; box-shadow: none;
  background-color: #FFFEFB;
  background-image:
    linear-gradient(rgba(94,53,177,.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(94,53,177,.09) 1px, transparent 1px);
  background-size: 32px 32px; background-position: -1px -1px;
}
.home-simple-head { border-bottom: 2px dashed #E6E1D6; }
.home-simple-title { font-size: 26px; font-weight: 900; }
.home-simple-meta { color: var(--mu-b-tx); font-weight: 800; }
.qs-label { font-size: 12px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; color: #77727F; }
.qs-grade, .qs-cat { border: 2px solid #E6E1D6; border-bottom-width: 4px; border-radius: 14px; background: #fff; font-weight: 800; transition: transform .06s, background-color .15s; }
.qs-grade { padding: 12px; font-size: 15px; }
.qs-grade:hover:not(.active), .qs-cat:hover:not(.active) { background: #FBFAF7; border-color: var(--mu-b-tb); }
.qs-grade:active, .qs-cat:active { transform: translateY(2px); }
.qs-grade.active, .qs-grade.active:hover, .qs-cat.active, .qs-cat.active:hover { background: var(--mu-b-t); border-color: var(--mu-b); color: var(--mu-b-tx); }
.mu-home-hero { display: flex; align-items: center; gap: 18px; }
.mu-home-hero .mu-bubble {
  position: relative; background: #fff; border: 2px solid #E6E1D6; border-bottom-width: 4px; border-radius: 16px;
  padding: 10px 14px; font-weight: 800; font-size: 14px; line-height: 1.45; max-width: 360px;
}
.mu-home-hero .mu-bubble::before {
  content: ""; position: absolute; left: -9px; top: 50%; margin-top: -7px; width: 14px; height: 14px; background: #fff;
  border-left: 2px solid #E6E1D6; border-bottom: 2px solid #E6E1D6; transform: rotate(45deg);
}
.mu-hl { background: linear-gradient(transparent 58%, #FFE45C 58%, #FFE45C 92%, transparent 92%); padding: 0 .1em; }
@media (max-width: 640px) { .mu-home-hero { flex-direction: column; text-align: center; } .mu-home-hero .mu-bubble::before { display: none; } }

/* ---------- Studio / ngân hàng / đề đã lưu ---------- */
.studio-sidebar, .inspector-card, .action-panel-card, .page-bar, .section-hero, .q-card, .data-card {
  border: 2px solid var(--border); border-bottom-width: 4px; border-radius: 18px; box-shadow: none;
}
.sidebar-group-title { font-weight: 900; }
.input, .select, .textarea { border: 2px solid #E6E1D6; border-radius: 12px; font-family: inherit; font-weight: 600; }
.input:focus, .select:focus, .textarea:focus { border-color: var(--mu-b); box-shadow: 0 0 0 3px rgba(94,53,177,.18); outline: none; }
.field-label { font-weight: 800; }
.slot-outline-item { border-radius: 12px; }
.slot-code-tag, .slot-pill-code { font-weight: 900; border-radius: 8px; }
.slot-pill-topic, .slot-pill-source, .diff-badge, .role-badge { font-weight: 800; border-radius: 999px; }
.filter-pill { font-weight: 800; border: 2px solid #E6E1D6; background: #fff; border-radius: 999px; padding: 5px 13px; }
.filter-pill:hover:not(.active) { border-color: var(--mu-b-tb); color: var(--mu-b-tx); background: #FBFAF7; }
.filter-pill.active, .filter-pill.active:hover { background: var(--mu-b); border-color: var(--mu-b); color: #fff; box-shadow: 0 2px 0 var(--mu-b-d); }
.mcq-choice-btn { border-radius: 12px; border-width: 2px; }
.q-card-head { border-bottom: 2px dashed #EFEBE3; }
details.q-sol { border-left-color: var(--mu-b); border-radius: 0 12px 12px 0; }
.data-table th { font-weight: 900; }

/* ---------- Lớp phủ ---------- */
.modal, .drawer, .user-dropdown, .loading-card { border-radius: 20px; }
.modal-head { font-weight: 900; border-bottom: 2px solid var(--border); }
.modal-foot { border-top: 2px solid var(--border); }
.user-pill { border: 2px solid #E6E1D6; box-shadow: 0 2px 0 #E6E1D6; }
.user-avatar { background: var(--mu-b); font-weight: 900; }
.dropdown-item { font-weight: 700; border-radius: 10px; }
.loading-overlay { background: rgba(43, 39, 51, .38); }
.loading-ring { border-color: var(--mu-b-tb); border-top-color: var(--mu-b); }
.loading-title { color: var(--text-primary); font-weight: 900; }
.loading-card .mu-loading-mascot { display: grid; place-items: center; margin: -8px 0 4px; }
.toast { background: #2B2733; border-radius: 16px; box-shadow: 0 4px 0 #17141C; font-weight: 800; }
.home-footer { border-top: 2px solid var(--border); }

/* ---------- Trạng thái rỗng có Mực ---------- */
.mu-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 28px 16px; gap: 4px; }
.mu-empty-title { font-size: 17px; font-weight: 900; color: var(--text-primary); margin-top: 2px; }
.mu-empty-sub { font-size: 13.5px; font-weight: 600; color: var(--text-muted); max-width: 380px; }

/* ---------- Linh vật: chuyển động ---------- */
.mascot { overflow: visible; animation: m-bob 3.2s ease-in-out infinite; }
.m-wave { transform-box: fill-box; transform-origin: 0% 100%; animation: m-wave 1.4s ease-in-out infinite; }
.mascot.m-celebrate { animation: m-jump 1.1s ease-in-out infinite; }
.m-zzz, .m-bubble { animation: m-float 2.5s ease-in-out infinite; }
.m-confetti { animation: m-twinkle 1.4s ease-in-out infinite; }
@keyframes m-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes m-wave { 0%,100% { transform: rotate(-6deg); } 50% { transform: rotate(14deg); } }
@keyframes m-jump { 0%,100% { transform: translateY(0); } 40%,60% { transform: translateY(-8px); } }
@keyframes m-float { 0%,100% { transform: translateY(0); opacity: 1; } 50% { transform: translateY(-4px); opacity: .75; } }
@keyframes m-twinkle { 0%,100% { opacity: 1; } 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .mascot, .mascot * { animation: none !important; } }

/* ---------- Responsive (ứng dụng gốc chưa có breakpoint cho topbar) ---------- */
@media (max-width: 960px) {
  .topbar { height: auto; }
  .topbar-inner { flex-wrap: wrap; padding: 10px 14px; row-gap: 8px; }
  .topbar-right { margin-left: auto; gap: 8px; }
  .nav-tabs { order: 3; width: 100%; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .nav-tabs::-webkit-scrollbar { display: none; }
  .nav-tab { flex-shrink: 0; white-space: nowrap; }
  .grade-switch-label { display: none; }
  .home-simple-wrap { margin-top: 20px; padding: 0 12px; }
}
@media (max-width: 640px) {
  .home-simple-card { padding: 18px; }
  .home-simple-card > div[style*="display:flex"] { flex-wrap: wrap; }
  .home-simple-head { flex-wrap: wrap; }
  .qs-cat-grid { grid-template-columns: 1fr 1fr; }
}

@media print { .mu-home-hero, .mu-empty { display: none !important; } }