/* ============================================================
   Mysomero Schools — Premium Frontend CSS v2.1.0
   Scoped under .mss-wrap. Luxury dark-navy / gold aesthetic.
   Fonts: Playfair Display (display) + DM Sans (body)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700;800&family=DM+Sans:wght@300;400;500;600;700&display=swap');

/* ── CSS Variables ─────────────────────────────────────────── */
:root {
  --mss-navy:         #0d1b2a;
  --mss-navy-mid:     #13243a;
  --mss-navy-light:   #1a3050;
  --mss-navy-border:  #243d5a;
  --mss-gold:         #c9963a;
  --mss-gold-light:   #e6b760;
  --mss-gold-dim:     rgba(201,150,58,.14);
  --mss-gold-glow:    rgba(201,150,58,.25);
  --mss-emerald:      #22c55e;
  --mss-emerald-bg:   rgba(34,197,94,.12);
  --mss-amber:        #f59e0b;
  --mss-amber-bg:     rgba(245,158,11,.12);
  --mss-rose:         #f43f5e;
  --mss-rose-bg:      rgba(244,63,94,.12);
  --mss-violet:       #a78bfa;
  --mss-violet-bg:    rgba(167,139,250,.12);
  --mss-sky:          #38bdf8;
  --mss-sky-bg:       rgba(56,189,248,.12);
  --mss-bg:           #0a1520;
  --mss-surface:      #111f2e;
  --mss-surface-2:    #162840;
  --mss-surface-3:    #1c3350;
  --mss-border:       #1f3a56;
  --mss-text:         #e8eef5;
  --mss-text-dim:     #8ba5c0;
  --mss-text-muted:   #5a7a9a;
  --mss-white:        #ffffff;
  /* Legacy aliases for template compat */
  --mss-blue:         var(--mss-gold);
  --mss-blue-dark:    var(--mss-gold-light);
  --mss-blue-light:   var(--mss-gold-dim);
  --mss-green:        var(--mss-emerald);
  --mss-green-bg:     var(--mss-emerald-bg);
  --mss-red:          var(--mss-rose);
  --mss-red-bg:       var(--mss-rose-bg);
  --mss-purple:       var(--mss-violet);
  --mss-purple-bg:    var(--mss-violet-bg);
  --mss-muted:        var(--mss-text-dim);
  --mss-radius:       12px;
  --mss-radius-sm:    8px;
  --mss-radius-lg:    18px;
  --mss-radius-xl:    24px;
  --mss-shadow:       0 2px 12px rgba(0,0,0,.35),0 1px 3px rgba(0,0,0,.25);
  --mss-shadow-md:    0 6px 24px rgba(0,0,0,.4),0 2px 8px rgba(0,0,0,.3);
  --mss-shadow-lg:    0 16px 48px rgba(0,0,0,.55),0 4px 12px rgba(0,0,0,.35);
  --mss-shadow-gold:  0 0 0 1px var(--mss-gold),0 8px 24px var(--mss-gold-glow);
  --mss-sidebar-w:    256px;
  --mss-font-display: 'Playfair Display', Georgia, serif;
  --mss-font:         'DM Sans', system-ui, -apple-system, sans-serif;
  --mss-transition:   .2s cubic-bezier(.4,0,.2,1);
}

/* ── Base Reset ────────────────────────────────────────────── */
.mss-wrap *,.mss-wrap *::before,.mss-wrap *::after{box-sizing:border-box}
.mss-wrap{font-family:var(--mss-font);font-size:14px;line-height:1.6;color:var(--mss-text);-webkit-font-smoothing:antialiased;background:var(--mss-bg)}
.mss-wrap a{color:var(--mss-gold);text-decoration:none}
.mss-wrap a:hover{color:var(--mss-gold-light);text-decoration:none}
.mss-wrap img{max-width:100%;height:auto}
.mss-wrap ul,.mss-wrap ol{margin:0;padding:0;list-style:none}
.mss-wrap p{margin:0 0 1rem}
.mss-wrap h1,.mss-wrap h2,.mss-wrap h3,.mss-wrap h4,.mss-wrap h5,.mss-wrap h6{margin:0 0 .75rem;font-weight:700;line-height:1.3;color:var(--mss-text)}

/* ── Layout: Shell ─────────────────────────────────────────── */
.mss-shell{display:flex;min-height:100vh;background:var(--mss-bg)}

/* ── Sidebar ───────────────────────────────────────────────── */
.mss-sidebar{
  width:var(--mss-sidebar-w);
  background:var(--mss-surface);
  border-right:1px solid var(--mss-border);
  display:flex;
  flex-direction:column;
  position:fixed;top:0;left:0;bottom:0;
  z-index:100;
  transition:transform var(--mss-transition);
  overflow-y:auto;
  scrollbar-width:thin;
  scrollbar-color:var(--mss-border) transparent;
}
.mss-sidebar::before{
  content:'';display:block;position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--mss-gold),var(--mss-gold-light),var(--mss-gold));
}
.mss-sidebar-logo{
  padding:24px 20px 18px;
  border-bottom:1px solid var(--mss-border);
  font-family:var(--mss-font-display);
  font-size:19px;font-weight:700;color:var(--mss-gold);
  display:flex;align-items:center;gap:11px;
  text-decoration:none;letter-spacing:-.01em;margin-top:3px;
}
.mss-sidebar-logo:hover{text-decoration:none;color:var(--mss-gold-light)}
.mss-sidebar-logo svg{width:28px;height:28px}
.mss-sidebar-school{
  padding:10px 20px;font-size:10px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--mss-text-muted);border-bottom:1px solid var(--mss-border);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.mss-nav{padding:12px 8px;flex:1}
.mss-nav-section{
  font-size:9.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--mss-text-muted);padding:16px 12px 6px;
}
.mss-nav-item{
  display:flex;align-items:center;gap:10px;padding:9px 12px;
  border-radius:var(--mss-radius-sm);color:var(--mss-text-dim);
  font-size:13.5px;font-weight:500;cursor:pointer;
  transition:background var(--mss-transition),color var(--mss-transition);
  text-decoration:none;margin-bottom:2px;position:relative;
}
.mss-nav-item:hover{background:var(--mss-gold-dim);color:var(--mss-gold-light);text-decoration:none}
.mss-nav-item.active{background:var(--mss-gold-dim);color:var(--mss-gold);font-weight:600}
.mss-nav-item.active::before{
  content:'';position:absolute;left:0;top:20%;bottom:20%;
  width:3px;background:var(--mss-gold);border-radius:0 3px 3px 0;
}
.mss-nav-item .mss-icon{width:18px;height:18px;opacity:.6;flex-shrink:0}
.mss-nav-item.active .mss-icon,.mss-nav-item:hover .mss-icon{opacity:1}
.mss-nav-badge{
  margin-left:auto;background:var(--mss-rose);color:#fff;
  font-size:10px;font-weight:700;padding:1px 7px;
  border-radius:99px;min-width:18px;text-align:center;
}
.mss-sidebar-footer{padding:12px 8px;border-top:1px solid var(--mss-border)}

/* ── Main Content ──────────────────────────────────────────── */
.mss-main{flex:1;margin-left:var(--mss-sidebar-w);display:flex;flex-direction:column;min-height:100vh;min-width:0}

/* ── Top Bar ───────────────────────────────────────────────── */
.mss-topbar{
  background:rgba(17,31,46,.92);
  border-bottom:1px solid var(--mss-border);
  padding:0 28px;height:62px;
  display:flex;align-items:center;justify-content:space-between;
  position:sticky;top:0;z-index:90;
  backdrop-filter:blur(12px);
}
.mss-topbar-title{
  font-family:var(--mss-font-display);
  font-size:17px;font-weight:700;color:var(--mss-text);letter-spacing:-.01em;
}
.mss-topbar-actions{display:flex;align-items:center;gap:10px}
.mss-topbar-icon-btn{
  width:36px;height:36px;border-radius:50%;
  background:var(--mss-surface-2);border:1px solid var(--mss-border);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;position:relative;color:var(--mss-text-dim);
  transition:background var(--mss-transition),border-color var(--mss-transition),color var(--mss-transition);
}
.mss-topbar-icon-btn:hover{background:var(--mss-gold-dim);border-color:var(--mss-gold);color:var(--mss-gold)}
.mss-topbar-icon-btn .mss-icon{width:18px;height:18px}
.mss-burger{display:none;background:none;border:none;cursor:pointer;padding:6px;color:var(--mss-text-dim)}

/* ── Page Body ─────────────────────────────────────────────── */
.mss-page{padding:28px 32px;flex:1}
.mss-page-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:28px;flex-wrap:wrap;gap:14px;
}
.mss-page-title{
  font-family:var(--mss-font-display);
  font-size:26px;font-weight:700;margin:0;color:var(--mss-text);
  letter-spacing:-.02em;line-height:1.2;
}
.mss-page-sub{font-size:13px;color:var(--mss-text-muted);margin:4px 0 0;font-weight:400}

/* ── Icon Helper ───────────────────────────────────────────── */
.mss-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.mss-icon svg{width:1em;height:1em}

/* ── Stat Cards ────────────────────────────────────────────── */
.mss-stats-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:16px;margin-bottom:28px;
}
.mss-stat-card{
  background:var(--mss-surface);border:1px solid var(--mss-border);
  border-radius:var(--mss-radius-lg);padding:22px 20px;
  display:flex;align-items:flex-start;gap:16px;
  box-shadow:var(--mss-shadow);
  transition:transform var(--mss-transition),box-shadow var(--mss-transition),border-color var(--mss-transition);
  position:relative;overflow:hidden;
}
.mss-stat-card::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.02) 0%,transparent 60%);
  pointer-events:none;
}
.mss-stat-card:hover{transform:translateY(-3px);box-shadow:var(--mss-shadow-md);border-color:var(--mss-navy-border)}
.mss-stat-icon{
  width:48px;height:48px;border-radius:var(--mss-radius);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;font-size:22px;
}
.mss-stat-icon svg{width:22px;height:22px}
.mss-stat-icon.blue  {background:var(--mss-gold-dim);    color:var(--mss-gold)}
.mss-stat-icon.green {background:var(--mss-emerald-bg);  color:var(--mss-emerald)}
.mss-stat-icon.amber {background:var(--mss-amber-bg);    color:var(--mss-amber)}
.mss-stat-icon.purple{background:var(--mss-violet-bg);   color:var(--mss-violet)}
.mss-stat-icon.red   {background:var(--mss-rose-bg);     color:var(--mss-rose)}
.mss-stat-value{
  font-family:var(--mss-font-display);
  font-size:28px;font-weight:700;line-height:1;color:var(--mss-text);letter-spacing:-.02em;
}
.mss-stat-label{
  font-size:11px;color:var(--mss-text-muted);margin-top:5px;
  font-weight:600;text-transform:uppercase;letter-spacing:.07em;
}

/* ── Card ──────────────────────────────────────────────────── */
.mss-card{
  background:var(--mss-surface);border:1px solid var(--mss-border);
  border-radius:var(--mss-radius-lg);box-shadow:var(--mss-shadow);overflow:hidden;
  transition:box-shadow var(--mss-transition);
}
.mss-card:hover{box-shadow:var(--mss-shadow-md)}
.mss-card-header{
  padding:16px 22px;border-bottom:1px solid var(--mss-border);
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:var(--mss-surface-2);
}
.mss-card-title{font-size:14px;font-weight:600;margin:0;color:var(--mss-text);display:flex;align-items:center;gap:8px}
.mss-card-body{padding:20px 22px}
.mss-card-footer{
  padding:12px 22px;border-top:1px solid var(--mss-border);
  background:var(--mss-surface-2);font-size:12px;color:var(--mss-text-muted);
}

/* ── Grids ─────────────────────────────────────────────────── */
.mss-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.mss-grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}

/* ── Table ─────────────────────────────────────────────────── */
.mss-table-wrap{overflow-x:auto}
.mss-table{width:100%;border-collapse:collapse;font-size:13px}
.mss-table th{
  text-align:left;padding:10px 16px;font-size:10.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;color:var(--mss-text-muted);
  border-bottom:1px solid var(--mss-border);white-space:nowrap;background:var(--mss-surface-2);
}
.mss-table td{padding:13px 16px;border-bottom:1px solid var(--mss-border);vertical-align:middle;color:var(--mss-text)}
.mss-table tr:last-child td{border-bottom:none}
.mss-table tbody tr:hover{background:var(--mss-surface-2)}
.mss-table .mss-avatar-name{display:flex;align-items:center;gap:10px}

/* ── Avatar ────────────────────────────────────────────────── */
.mss-avatar{width:36px;height:36px;border-radius:50%;object-fit:cover;flex-shrink:0;border:2px solid var(--mss-border)}
.mss-avatar-initials{
  width:36px;height:36px;border-radius:50%;
  background:linear-gradient(135deg,var(--mss-gold),var(--mss-gold-light));
  color:var(--mss-navy);display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;flex-shrink:0;
}

/* ── Buttons ───────────────────────────────────────────────── */
.mss-btn{
  display:inline-flex;align-items:center;gap:7px;padding:9px 18px;
  border-radius:var(--mss-radius-sm);font-size:13px;font-weight:600;
  font-family:var(--mss-font);cursor:pointer;border:1px solid transparent;
  transition:background var(--mss-transition),box-shadow var(--mss-transition),transform var(--mss-transition);
  text-decoration:none;white-space:nowrap;line-height:1.4;letter-spacing:.01em;
}
.mss-btn .mss-icon{width:15px;height:15px}
.mss-btn:hover{text-decoration:none;transform:translateY(-1px)}
.mss-btn:active{transform:translateY(0)}
.mss-btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.mss-btn-primary{
  background:linear-gradient(135deg,var(--mss-gold),var(--mss-gold-light));
  color:var(--mss-navy);border-color:var(--mss-gold);
  box-shadow:0 2px 12px var(--mss-gold-glow);
}
.mss-btn-primary:hover{background:linear-gradient(135deg,var(--mss-gold-light),var(--mss-gold));color:var(--mss-navy);box-shadow:0 4px 20px var(--mss-gold-glow)}
.mss-btn-secondary{background:var(--mss-surface-2);color:var(--mss-text);border-color:var(--mss-border)}
.mss-btn-secondary:hover{background:var(--mss-surface-3);border-color:var(--mss-navy-border)}
.mss-btn-success{background:var(--mss-emerald);color:#fff;border-color:var(--mss-emerald)}
.mss-btn-danger{background:var(--mss-rose);color:#fff;border-color:var(--mss-rose)}
.mss-btn-ghost{background:transparent;color:var(--mss-gold);border-color:transparent;padding-left:6px;padding-right:6px}
.mss-btn-ghost:hover{background:var(--mss-gold-dim)}
.mss-btn-sm{padding:5px 12px;font-size:12px}
.mss-btn-lg{padding:12px 28px;font-size:15px}
.mss-btn-icon{padding:8px;border-radius:var(--mss-radius-sm)}
.mss-btn-block{width:100%;justify-content:center}

/* ── Pills ─────────────────────────────────────────────────── */
.mss-pill{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:99px;font-size:11px;font-weight:600;letter-spacing:.03em}
.mss-pill-blue  {background:var(--mss-gold-dim);   color:var(--mss-gold-light)}
.mss-pill-green {background:var(--mss-emerald-bg); color:var(--mss-emerald)}
.mss-pill-amber {background:var(--mss-amber-bg);   color:var(--mss-amber)}
.mss-pill-red   {background:var(--mss-rose-bg);    color:var(--mss-rose)}
.mss-pill-purple{background:var(--mss-violet-bg);  color:var(--mss-violet)}
.mss-pill-gray  {background:rgba(255,255,255,.06); color:var(--mss-text-dim)}

/* ── Level Badge ───────────────────────────────────────────── */
.mss-level-badge{
  display:inline-flex;align-items:center;gap:5px;padding:3px 11px;border-radius:99px;
  background:linear-gradient(135deg,var(--mss-gold-dim),rgba(230,183,96,.15));
  border:1px solid rgba(201,150,58,.35);color:var(--mss-gold);
  font-size:11px;font-weight:700;letter-spacing:.04em;
}

/* ── Form Elements ─────────────────────────────────────────── */
.mss-form-group{margin-bottom:20px}
.mss-form-group label{
  display:block;font-size:11.5px;font-weight:700;
  color:var(--mss-text-muted);margin-bottom:7px;
  text-transform:uppercase;letter-spacing:.07em;
}
.mss-form-group .mss-hint{font-size:11px;color:var(--mss-text-muted);margin-top:5px}
.mss-input,.mss-select,.mss-textarea{
  width:100%;padding:10px 14px;border:1px solid var(--mss-border);
  border-radius:var(--mss-radius-sm);font-size:13px;font-family:var(--mss-font);
  color:var(--mss-text);background:var(--mss-surface-2);
  transition:border-color var(--mss-transition),box-shadow var(--mss-transition);
  line-height:1.5;
}
.mss-input::placeholder,.mss-textarea::placeholder{color:var(--mss-text-muted)}
.mss-input:focus,.mss-select:focus,.mss-textarea:focus{
  outline:none;border-color:var(--mss-gold);box-shadow:0 0 0 3px var(--mss-gold-glow);
}
.mss-select{color:var(--mss-text)}
.mss-select option{background:var(--mss-surface-2)}
.mss-textarea{resize:vertical;min-height:100px}
.mss-form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}

/* ── Progress Bar ──────────────────────────────────────────── */
.mss-progress-bar{height:6px;background:var(--mss-surface-3);border-radius:99px;overflow:hidden}
.mss-progress-bar-fill{
  height:100%;background:linear-gradient(90deg,var(--mss-gold),var(--mss-gold-light));
  border-radius:99px;transition:width .6s cubic-bezier(.4,0,.2,1);position:relative;
}
.mss-progress-bar-fill::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);
  animation:mss-shimmer 2s infinite;
}
@keyframes mss-shimmer{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.mss-progress-bar-fill.green{background:linear-gradient(90deg,var(--mss-emerald),#34d399)}
.mss-progress-bar-fill.amber{background:linear-gradient(90deg,var(--mss-amber),#fbbf24)}
.mss-progress-bar-fill.red  {background:linear-gradient(90deg,var(--mss-rose),#fb7185)}

/* ── XP Bar ────────────────────────────────────────────────── */
.mss-xp-bar-wrap{
  background:var(--mss-surface);border:1px solid var(--mss-border);
  border-radius:var(--mss-radius-lg);padding:20px 24px;box-shadow:var(--mss-shadow);
}
.mss-xp-header{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.mss-xp-header .mss-fw-600{color:var(--mss-text);font-size:15px;font-weight:700}
.mss-xp-header .mss-text-sm{margin-left:auto;font-size:12px;color:var(--mss-text-muted)}

/* ── Alerts ────────────────────────────────────────────────── */
.mss-alert{
  padding:13px 16px;border-radius:var(--mss-radius);font-size:13px;
  display:flex;align-items:flex-start;gap:10px;margin-bottom:16px;border:1px solid transparent;
}
.mss-alert .mss-icon{width:16px;height:16px;flex-shrink:0;margin-top:1px}
.mss-alert-info   {background:var(--mss-sky-bg);     color:var(--mss-sky);     border-color:rgba(56,189,248,.25)}
.mss-alert-success{background:var(--mss-emerald-bg); color:var(--mss-emerald); border-color:rgba(34,197,94,.25)}
.mss-alert-warning{background:var(--mss-amber-bg);   color:var(--mss-amber);   border-color:rgba(245,158,11,.25)}
.mss-alert-error  {background:var(--mss-rose-bg);    color:var(--mss-rose);    border-color:rgba(244,63,94,.25)}

/* ── Tabs ──────────────────────────────────────────────────── */
.mss-tabs{display:flex;border-bottom:1px solid var(--mss-border);gap:0;margin-bottom:24px;overflow-x:auto;scrollbar-width:none}
.mss-tabs::-webkit-scrollbar{display:none}
.mss-tab{
  padding:11px 20px;font-size:13px;font-weight:500;color:var(--mss-text-muted);
  cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;
  white-space:nowrap;transition:color var(--mss-transition);
}
.mss-tab:hover{color:var(--mss-gold)}
.mss-tab.active{color:var(--mss-gold);border-bottom-color:var(--mss-gold);font-weight:600}
.mss-tab-panel{display:none}
.mss-tab-panel.active{display:block}

/* ── Modal ─────────────────────────────────────────────────── */
.mss-modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.65);backdrop-filter:blur(4px);
  z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px;
  opacity:0;pointer-events:none;transition:opacity .25s;
}
.mss-modal-overlay.open{opacity:1;pointer-events:all}
.mss-modal{
  background:var(--mss-surface);border:1px solid var(--mss-border);
  border-radius:var(--mss-radius-xl);box-shadow:var(--mss-shadow-lg),0 0 0 1px rgba(255,255,255,.04) inset;
  width:100%;max-width:520px;max-height:90vh;overflow-y:auto;
  transform:scale(.95) translateY(12px);transition:transform .25s cubic-bezier(.4,0,.2,1);
}
.mss-modal-overlay.open .mss-modal{transform:scale(1) translateY(0)}
.mss-modal-lg{max-width:760px}
.mss-modal-xl{max-width:960px}
.mss-modal-head{
  padding:22px 26px 18px;border-bottom:1px solid var(--mss-border);
  display:flex;align-items:center;justify-content:space-between;background:var(--mss-surface-2);
}
.mss-modal-head h3{font-family:var(--mss-font-display);font-size:18px;font-weight:700;margin:0;color:var(--mss-text)}
.mss-modal-close{
  width:32px;height:32px;border:1px solid var(--mss-border);background:var(--mss-surface-3);
  cursor:pointer;border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:var(--mss-text-muted);transition:background var(--mss-transition),color var(--mss-transition);
}
.mss-modal-close:hover{background:var(--mss-rose-bg);color:var(--mss-rose);border-color:var(--mss-rose)}
.mss-modal-body{padding:22px 26px}
.mss-modal-footer{padding:16px 26px;border-top:1px solid var(--mss-border);display:flex;justify-content:flex-end;gap:10px;background:var(--mss-surface-2)}

/* ── Loading / Spinner ─────────────────────────────────────── */
.mss-spinner{
  width:24px;height:24px;border:3px solid var(--mss-border);
  border-top-color:var(--mss-gold);border-radius:50%;
  animation:mss-spin .7s linear infinite;display:inline-block;
}
@keyframes mss-spin{to{transform:rotate(360deg)}}
.mss-loading-screen{display:flex;align-items:center;justify-content:center;padding:48px;color:var(--mss-text-muted);gap:12px;font-size:13px}

/* ── Empty State ───────────────────────────────────────────── */
.mss-empty{text-align:center;padding:56px 24px;color:var(--mss-text-muted)}
.mss-empty-icon{
  width:56px;height:56px;margin:0 auto 16px;border-radius:var(--mss-radius);
  background:var(--mss-surface-2);display:flex;align-items:center;justify-content:center;
  font-size:26px;color:var(--mss-text-muted);
}
.mss-empty h3{font-size:16px;font-weight:600;margin-bottom:6px;color:var(--mss-text)}
.mss-empty p{font-size:13px;color:var(--mss-text-muted)}

/* ── Lesson Layout ─────────────────────────────────────────── */
.mss-lesson-layout{display:grid;grid-template-columns:1fr 340px;gap:20px;align-items:start}
.mss-video-wrapper{
  background:#000;border-radius:var(--mss-radius-lg);overflow:hidden;
  aspect-ratio:16/9;box-shadow:var(--mss-shadow-md);border:1px solid var(--mss-border);
}
.mss-lesson-notes{
  background:var(--mss-surface-2);border-radius:var(--mss-radius);
  padding:18px 20px;font-size:14px;line-height:1.75;color:var(--mss-text);border:1px solid var(--mss-border);
}

/* ── Leaderboard ───────────────────────────────────────────── */
.mss-podium{display:flex;justify-content:center;align-items:flex-end;gap:12px;margin-bottom:32px;padding:24px}
.mss-podium-item{text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px}
.mss-podium-item:nth-child(1){order:2}
.mss-podium-item:nth-child(2){order:1}
.mss-podium-item:nth-child(3){order:3}
.mss-podium-avatar-wrap{position:relative}
.mss-podium-avatar{
  width:56px;height:56px;border-radius:50%;
  background:linear-gradient(135deg,var(--mss-gold),var(--mss-gold-light));
  display:flex;align-items:center;justify-content:center;
  font-size:20px;font-weight:700;color:var(--mss-navy);border:3px solid var(--mss-gold);
}
.mss-podium-item:nth-child(1) .mss-podium-avatar{width:68px;height:68px;font-size:24px}
.mss-podium-medal{
  position:absolute;bottom:-6px;right:-6px;width:22px;height:22px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:12px;border:2px solid var(--mss-surface);
}
.mss-medal-1{background:var(--mss-gold)}
.mss-medal-2{background:#94a3b8}
.mss-medal-3{background:#b87333}
.mss-podium-name{font-size:12px;font-weight:600;color:var(--mss-text)}
.mss-podium-score{font-size:11px;color:var(--mss-text-muted)}
.mss-podium-block{border-radius:var(--mss-radius-sm) var(--mss-radius-sm) 0 0;width:80px}
.mss-podium-item:nth-child(1) .mss-podium-block{height:64px;background:linear-gradient(180deg,rgba(201,150,58,.3),rgba(201,150,58,.1));border:1px solid var(--mss-gold)}
.mss-podium-item:nth-child(2) .mss-podium-block{height:46px;background:var(--mss-surface-2);border:1px solid var(--mss-border)}
.mss-podium-item:nth-child(3) .mss-podium-block{height:36px;background:var(--mss-surface-2);border:1px solid var(--mss-border)}

/* ── Badges Grid ───────────────────────────────────────────── */
.mss-badges-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:16px}
.mss-badge-item{
  background:var(--mss-surface);border:1px solid var(--mss-border);
  border-radius:var(--mss-radius-lg);padding:20px 12px;text-align:center;
  transition:transform var(--mss-transition),box-shadow var(--mss-transition),border-color var(--mss-transition);
}
.mss-badge-item:hover{transform:translateY(-3px);box-shadow:var(--mss-shadow-md);border-color:var(--mss-gold)}
.mss-badge-item.earned{border-color:rgba(201,150,58,.4);background:var(--mss-gold-dim)}
.mss-badge-icon{font-size:32px;margin-bottom:8px;display:block;filter:grayscale(1) opacity(.35)}
.mss-badge-item.earned .mss-badge-icon{filter:none}
.mss-badge-name{font-size:11px;font-weight:600;color:var(--mss-text-dim)}
.mss-badge-item.earned .mss-badge-name{color:var(--mss-gold)}

/* ── Report Card ───────────────────────────────────────────── */
.mss-report-card{
  background:var(--mss-surface);border:1px solid var(--mss-border);
  border-radius:var(--mss-radius-xl);overflow:hidden;box-shadow:var(--mss-shadow-lg);
}
.mss-report-header{
  background:linear-gradient(135deg,var(--mss-navy-mid),var(--mss-navy-light));
  padding:28px;border-bottom:1px solid var(--mss-border);position:relative;overflow:hidden;
}
.mss-report-header::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--mss-gold),var(--mss-gold-light),var(--mss-gold));
}
.mss-report-title{
  font-family:var(--mss-font-display);font-size:22px;font-weight:800;
  color:var(--mss-text);margin:0 0 6px;letter-spacing:-.02em;
}
.mss-report-body{padding:24px 28px}
.mss-grade-table{width:100%;border-collapse:collapse;font-size:13px}
.mss-grade-table th{
  text-align:left;padding:9px 14px;font-size:10.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.07em;color:var(--mss-text-muted);
  border-bottom:1px solid var(--mss-border);background:var(--mss-surface-2);
}
.mss-grade-table td{padding:11px 14px;border-bottom:1px solid var(--mss-border);color:var(--mss-text)}
.mss-grade-pill{display:inline-block;padding:2px 10px;border-radius:99px;font-size:12px;font-weight:700}
.grade-d1,.grade-d2{background:var(--mss-emerald-bg);color:var(--mss-emerald)}
.grade-c3,.grade-c4,.grade-c5,.grade-c6{background:var(--mss-sky-bg);color:var(--mss-sky)}
.grade-p7,.grade-p8{background:var(--mss-amber-bg);color:var(--mss-amber)}
.grade-f9{background:var(--mss-rose-bg);color:var(--mss-rose)}
.mss-report-summary{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-top:20px;padding-top:20px;border-top:1px solid var(--mss-border)}
.mss-report-summary-item{text-align:center;padding:18px 12px;background:var(--mss-surface-2);border-radius:var(--mss-radius);border:1px solid var(--mss-border)}
.mss-report-summary-item .value{font-family:var(--mss-font-display);font-size:26px;font-weight:800;color:var(--mss-gold)}
.mss-report-summary-item .label{font-size:10px;color:var(--mss-text-muted);text-transform:uppercase;font-weight:700;letter-spacing:.08em;margin-top:4px}

/* ── Messaging ─────────────────────────────────────────────── */
.mss-inbox-layout{display:grid;grid-template-columns:270px 1fr;border:1px solid var(--mss-border);border-radius:var(--mss-radius-lg);overflow:hidden;background:var(--mss-surface);min-height:500px}
.mss-inbox-list{border-right:1px solid var(--mss-border);overflow-y:auto}
.mss-inbox-item{padding:14px 16px;border-bottom:1px solid var(--mss-border);cursor:pointer;transition:background var(--mss-transition)}
.mss-inbox-item:hover{background:var(--mss-surface-2)}
.mss-inbox-item.active{background:var(--mss-gold-dim);border-left:2px solid var(--mss-gold)}
.mss-inbox-item.unread .mss-inbox-subject{font-weight:700;color:var(--mss-text)}
.mss-inbox-sender{font-size:12px;font-weight:600;color:var(--mss-text)}
.mss-inbox-subject{font-size:12px;color:var(--mss-text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.mss-inbox-date{font-size:10px;color:var(--mss-text-muted);float:right}
.mss-message-view{padding:26px}
.mss-message-head{margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--mss-border)}
.mss-message-head h3{font-family:var(--mss-font-display);font-size:17px;font-weight:700;margin:0 0 6px}
.mss-message-from{font-size:12px;color:var(--mss-text-muted)}
.mss-message-body{font-size:14px;line-height:1.75;color:var(--mss-text)}

/* ── Certificate ───────────────────────────────────────────── */
.mss-certificate{
  background:var(--mss-surface);border:2px solid var(--mss-gold);
  border-radius:var(--mss-radius-xl);padding:52px;text-align:center;
  max-width:700px;margin:0 auto;position:relative;box-shadow:var(--mss-shadow-gold);
}
.mss-certificate::before{
  content:'';position:absolute;inset:8px;
  border:1px solid rgba(201,150,58,.2);border-radius:calc(var(--mss-radius-xl) - 6px);pointer-events:none;
}
.mss-cert-title{font-family:var(--mss-font-display);font-size:40px;font-weight:800;color:var(--mss-gold);margin:0 0 4px;letter-spacing:-.02em}
.mss-cert-subtitle{font-size:12px;color:var(--mss-text-muted);text-transform:uppercase;letter-spacing:.15em}
.mss-cert-recipient{font-family:var(--mss-font-display);font-size:30px;font-weight:700;margin:28px 0 8px;color:var(--mss-text)}
.mss-cert-body{font-size:15px;color:var(--mss-text-dim);margin-bottom:28px;line-height:1.7}
.mss-cert-meta{font-size:12px;color:var(--mss-text-muted);margin-top:32px}
.mss-cert-seal{
  width:84px;height:84px;margin:0 auto 22px;border-radius:50%;
  background:linear-gradient(135deg,var(--mss-gold),var(--mss-gold-light));
  display:flex;align-items:center;justify-content:center;color:var(--mss-navy);
  font-size:34px;box-shadow:0 0 0 6px var(--mss-gold-dim);
}

/* ── Pricing ───────────────────────────────────────────────── */
.mss-pricing-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:20px;margin:28px 0}
.mss-plan-card{
  background:var(--mss-surface);border:1px solid var(--mss-border);
  border-radius:var(--mss-radius-xl);padding:30px;text-align:center;position:relative;
  transition:transform var(--mss-transition),box-shadow var(--mss-transition);
}
.mss-plan-card:hover{transform:translateY(-4px);box-shadow:var(--mss-shadow-lg)}
.mss-plan-card.featured{border-color:var(--mss-gold);box-shadow:var(--mss-shadow-gold)}
.mss-plan-recommended{
  position:absolute;top:-14px;left:50%;transform:translateX(-50%);
  background:linear-gradient(90deg,var(--mss-gold),var(--mss-gold-light));color:var(--mss-navy);
  font-size:10px;font-weight:800;padding:4px 16px;border-radius:99px;letter-spacing:.06em;text-transform:uppercase;
}
.mss-plan-name{font-family:var(--mss-font-display);font-size:20px;font-weight:700;margin-bottom:6px;color:var(--mss-text)}
.mss-plan-desc{font-size:12px;color:var(--mss-text-muted);margin-bottom:22px}
.mss-plan-price{font-family:var(--mss-font-display);font-size:42px;font-weight:800;color:var(--mss-gold);margin-bottom:4px;line-height:1}
.mss-plan-price sub{font-size:16px;font-weight:400;color:var(--mss-text-muted);font-family:var(--mss-font)}
.mss-plan-period{font-size:12px;color:var(--mss-text-muted);margin-bottom:22px}
.mss-plan-features{text-align:left;margin-bottom:26px}
.mss-plan-feature{display:flex;align-items:center;gap:9px;padding:7px 0;font-size:13px;color:var(--mss-text-dim);border-bottom:1px solid var(--mss-border)}
.mss-plan-feature:last-child{border-bottom:none}
.mss-plan-feature .mss-icon{width:15px;height:15px;color:var(--mss-emerald);flex-shrink:0}

/* ── Timetable ─────────────────────────────────────────────── */
.mss-timetable-grid{display:grid;grid-template-columns:80px repeat(5,1fr);gap:3px;font-size:12px}
.mss-tt-header{
  background:linear-gradient(135deg,var(--mss-navy-light),var(--mss-navy-mid));
  color:var(--mss-gold);padding:10px 8px;text-align:center;
  font-weight:700;font-size:11px;letter-spacing:.04em;text-transform:uppercase;
  border-radius:var(--mss-radius-sm);border:1px solid var(--mss-border);
}
.mss-tt-time{padding:8px;font-size:10px;color:var(--mss-text-muted);text-align:right;display:flex;align-items:center;justify-content:flex-end;font-weight:600}
.mss-tt-cell{
  background:var(--mss-surface);border:1px solid var(--mss-border);
  border-radius:var(--mss-radius-sm);padding:8px;min-height:56px;cursor:pointer;
  transition:background var(--mss-transition),border-color var(--mss-transition);
}
.mss-tt-cell:hover{background:var(--mss-surface-2);border-color:var(--mss-navy-border)}
.mss-tt-cell.has-event{background:var(--mss-gold-dim);border-color:rgba(201,150,58,.4)}
.mss-tt-event-title{font-weight:600;color:var(--mss-gold);font-size:11px}
.mss-tt-event-type{font-size:10px;color:var(--mss-text-muted)}

/* ── Notification Dropdown ─────────────────────────────────── */
.mss-notif-panel{
  position:absolute;top:46px;right:0;width:330px;
  background:var(--mss-surface);border:1px solid var(--mss-border);
  border-radius:var(--mss-radius-lg);box-shadow:var(--mss-shadow-lg);z-index:200;overflow:hidden;display:none;
}
.mss-notif-panel.open{display:block}
.mss-notif-head{padding:14px 18px;border-bottom:1px solid var(--mss-border);display:flex;align-items:center;justify-content:space-between;background:var(--mss-surface-2)}
.mss-notif-head h4{font-size:13px;font-weight:700;margin:0;color:var(--mss-text)}
.mss-notif-item{padding:13px 18px;border-bottom:1px solid var(--mss-border);display:flex;gap:10px;font-size:12px;cursor:pointer;transition:background var(--mss-transition);color:var(--mss-text-dim)}
.mss-notif-item:hover{background:var(--mss-surface-2)}
.mss-notif-item.unread{background:var(--mss-gold-dim)}
.mss-notif-item.unread:hover{background:rgba(201,150,58,.2)}
.mss-notif-dot{width:8px;height:8px;border-radius:50%;background:var(--mss-gold);flex-shrink:0;margin-top:4px}

/* ── Entrance Animations ───────────────────────────────────── */
@keyframes mss-fade-up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.mss-page-header{animation:mss-fade-up .35s ease both}
.mss-stats-grid{animation:mss-fade-up .45s .05s ease both}
.mss-xp-bar-wrap{animation:mss-fade-up .45s .1s ease both}
.mss-grid-2 .mss-card:nth-child(1){animation:mss-fade-up .45s .12s ease both}
.mss-grid-2 .mss-card:nth-child(2){animation:mss-fade-up .45s .18s ease both}
.mss-grid-3 .mss-card:nth-child(1){animation:mss-fade-up .4s .1s ease both}
.mss-grid-3 .mss-card:nth-child(2){animation:mss-fade-up .4s .16s ease both}
.mss-grid-3 .mss-card:nth-child(3){animation:mss-fade-up .4s .22s ease both}

/* ── Utility Classes ───────────────────────────────────────── */
.mss-flex{display:flex}.mss-flex-1{flex:1}.mss-items-center{align-items:center}.mss-justify-between{justify-content:space-between}
.mss-gap-2{gap:8px}.mss-gap-3{gap:12px}.mss-gap-4{gap:16px}
.mss-mt-1{margin-top:4px}.mss-mt-2{margin-top:8px}.mss-mt-3{margin-top:12px}.mss-mt-4{margin-top:16px}
.mss-mb-4{margin-bottom:16px}.mss-mb-6{margin-bottom:24px}
.mss-text-sm{font-size:12px}.mss-text-muted{color:var(--mss-text-muted)}.mss-text-center{text-align:center}
.mss-fw-600{font-weight:600}.mss-fw-700{font-weight:700}
.mss-text-blue{color:var(--mss-gold)}.mss-text-green{color:var(--mss-emerald)}.mss-text-red{color:var(--mss-rose)}
.mss-w-full{width:100%}.mss-hidden{display:none!important}.mss-divider{height:1px;background:var(--mss-border);margin:16px 0}

/* ── Responsive ────────────────────────────────────────────── */
@media(max-width:1024px){
  .mss-grid-3{grid-template-columns:1fr 1fr}
  .mss-lesson-layout{grid-template-columns:1fr}
  .mss-page{padding:22px 20px}
}
@media(max-width:768px){
  :root{--mss-sidebar-w:0px}
  .mss-sidebar{transform:translateX(-100%);width:272px}
  .mss-sidebar.open{transform:translateX(0);box-shadow:var(--mss-shadow-lg)}
  .mss-main{margin-left:0}
  .mss-burger{display:flex}
  .mss-page{padding:16px}
  .mss-grid-2,.mss-grid-3{grid-template-columns:1fr}
  .mss-stats-grid{grid-template-columns:1fr 1fr}
  .mss-form-row{grid-template-columns:1fr}
  .mss-inbox-layout{grid-template-columns:1fr}
  .mss-inbox-list{border-right:none;border-bottom:1px solid var(--mss-border);max-height:250px}
  .mss-report-summary{grid-template-columns:1fr 1fr}
  .mss-timetable-grid{grid-template-columns:60px repeat(5,1fr)}
  .mss-modal{margin:12px}
  .mss-certificate{padding:30px 20px}
  .mss-report-header{padding:20px}
  .mss-report-body{padding:16px}
  .mss-podium{gap:8px;padding:16px}
  .mss-page-title{font-size:22px}
  .mss-topbar{padding:0 16px}
}
@media(max-width:480px){
  .mss-stats-grid{grid-template-columns:1fr}
  .mss-report-summary{grid-template-columns:1fr}
  .mss-pricing-grid{grid-template-columns:1fr}
}

/* ── Print ─────────────────────────────────────────────────── */
@media print{
  .mss-sidebar,.mss-topbar,.mss-btn,.mss-tabs,.no-print{display:none!important}
  .mss-main{margin-left:0}
  .mss-wrap{background:#fff;color:#000}
  .mss-report-card{box-shadow:none;border:2px solid #000;background:#fff}
  .mss-report-header{background:#fff}
  .mss-report-title,.mss-grade-table td,.mss-grade-table th{color:#000;background:#fff}
}